[gnome-maps/wip/layers-popover: 1/6] Start implementing layers popover menu.



commit 05731d6841efacea6598b3165a0ec59c9d389b47
Author: Dario Di Nucci <linkin88mail gmail com>
Date:   Sat Mar 1 18:34:44 2014 +0100

    Start implementing layers popover menu.

 src/gnome-maps.data.gresource.xml |    1 +
 src/gnome-maps.js.gresource.xml   |    1 +
 src/layers-popup.ui               |  135 +++++++++++++++++++++++++++++++++++++
 src/layersPopup.js                |   73 ++++++++++++++++++++
 src/main-window.ui                |   18 +++++
 src/mainWindow.js                 |   15 ++++-
 6 files changed, 241 insertions(+), 2 deletions(-)
---
diff --git a/src/gnome-maps.data.gresource.xml b/src/gnome-maps.data.gresource.xml
index 6250d60..2c48565 100644
--- a/src/gnome-maps.data.gresource.xml
+++ b/src/gnome-maps.data.gresource.xml
@@ -6,6 +6,7 @@
     <file preprocess="xml-stripblanks">zoom-control.ui</file>
     <file preprocess="xml-stripblanks">search-popup.ui</file>
     <file preprocess="xml-stripblanks">context-menu.ui</file>
+    <file preprocess="xml-stripblanks">layers-popup.ui</file>
     <file alias="application.css">../data/gnome-maps.css</file>
     <file alias="zoom-in.png">../data/media/zoom-in.png</file>
     <file alias="zoom-out.png">../data/media/zoom-out.png</file>
diff --git a/src/gnome-maps.js.gresource.xml b/src/gnome-maps.js.gresource.xml
index cb9a57c..2c7c2f1 100644
--- a/src/gnome-maps.js.gresource.xml
+++ b/src/gnome-maps.js.gresource.xml
@@ -5,6 +5,7 @@
     <file>config.js</file>
     <file>contextMenu.js</file>
     <file>geoclue.js</file>
+    <file>layersPopup.js</file>
     <file>main.js</file>
     <file>mainWindow.js</file>
     <file>mapLocation.js</file>
diff --git a/src/layers-popup.ui b/src/layers-popup.ui
new file mode 100644
index 0000000..cd2257c
--- /dev/null
+++ b/src/layers-popup.ui
@@ -0,0 +1,135 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <!-- interface-requires gtk+ 3.10 -->
+  <object class="GtkListBox" id="list-box">
+    <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <property name="selection-mode">GTK_SELECTION_BROWSE</property>
+    <child>
+      <object class="GtkListBoxRow" id="street-layer-button-row">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <child>
+          <object class="GtkButton" id="street-layer-button">
+            <property name="visible">True</property>
+            <property name="can-focus">True</property>
+            <property name="valign">center</property>
+            <property name="height-request">80</property>
+            <property name="margin">2</property>
+            <property name="action-name">win.map-type</property>
+            <property name="action-target">"STREET"</property>
+            <style>
+              <class name="image-button"/>
+            </style>
+            <child>
+              <object class="GtkImage" id="street-layer-image">
+                <property name="visible">True</property>
+                <property name="icon-size">1</property>
+                <property name="icon-name">find-location-symbolic</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+    <child>
+      <object class="GtkListBoxRow" id="satellite-layer-button-row">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>        
+        <child>
+          <object class="GtkButton" id="satellite-layer-button">
+            <property name="visible">True</property>
+            <property name="can-focus">True</property>
+            <property name="valign">center</property>
+            <property name="height-request">80</property>
+            <property name="margin">2</property>
+            <property name="action-name">win.map-type</property>
+            <property name="action-target">"AERIAL"</property>>
+            <style>
+              <class name="image-button"/>
+            </style>
+            <child>
+              <object class="GtkImage" id="satellite-layer-image">
+                <property name="visible">True</property>
+                <property name="icon-size">1</property>
+                <property name="icon-name">find-location-symbolic</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+    <child>
+      <object class="GtkListBoxRow" id="transport-button-row">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <child>
+          <object class="GtkBox" id="transport-button-container">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <child>
+              <object class="GtkButton" id="bicycle-button">
+                <property name="visible">True</property>
+                <property name="can-focus">True</property>
+                <property name="valign">center</property>
+                <property name="action-name"></property>
+                <property name="width-request">60</property>
+                <property name="margin">2</property>
+                <style>
+                  <class name="image-button"/>
+                </style>
+                <child>
+                  <object class="GtkImage" id="bicycle-image">
+                    <property name="visible">True</property>
+                    <property name="icon-size">1</property>
+                    <property name="icon-name">find-location-symbolic</property>
+                  </object>
+               </child>
+              </object>
+            </child>
+          <child>
+              <object class="GtkButton" id="traffic-button">
+                <property name="visible">True</property>
+                <property name="can-focus">True</property>
+                <property name="valign">center</property>
+                <property name="action-name"></property>
+                <property name="width-request">60</property>
+                <property name="margin">2</property>
+                <style>
+                  <class name="image-button"/>
+                </style>
+                <child>
+                  <object class="GtkImage" id="traffic-image">
+                    <property name="visible">True</property>
+                    <property name="icon-size">1</property>
+                    <property name="icon-name">find-location-symbolic</property>
+                  </object>
+                </child>
+              </object>
+            </child>
+            <child>
+              <object class="GtkButton" id="transit-button">
+                <property name="visible">True</property>
+                <property name="can-focus">True</property>
+                <property name="valign">center</property>
+                <property name="action-name"></property>
+                <property name="width-request">60</property>
+                <property name="margin">2</property>
+                <style>
+                  <class name="image-button"/>
+                </style>
+                <child>
+                  <object class="GtkImage" id="transit-image">
+                    <property name="visible">True</property>
+                    <property name="icon-size">1</property>
+                    <property name="icon-name">find-location-symbolic</property>
+                  </object>
+                </child>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>
diff --git a/src/layersPopup.js b/src/layersPopup.js
new file mode 100644
index 0000000..f19cc83
--- /dev/null
+++ b/src/layersPopup.js
@@ -0,0 +1,73 @@
+/* -*- Mode: JS2; indent-tabs-mode: nil; js2-basic-offset: 4 -*- */
+/* vim: set et ts=4 sw=4: */
+/*
+ * GNOME Maps is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by the
+ * Free Software Foundation; either version 2 of the License, or (at your
+ * option) any later version.
+ *
+ * GNOME Maps is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with GNOME Maps; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
+ *
+ * Author: Dario Di Nucci <linkin88mail gmail com>
+ */
+
+const Gtk = imports.gi.Gtk;
+
+const Lang = imports.lang;
+const Utils = imports.utils;
+
+const Columns = {
+    ICON: 0,
+    TEXT: 1
+};
+
+const LayersPopup = new Lang.Class({
+    Name: 'LayersPopup',
+    Extends: Gtk.Popover,
+
+    _init: function(relativeTo) {
+    
+        let ui = Utils.getUIObject('layers-popup', ['list-box',
+                                                    'street-layer-button-row',
+                                                    'street-layer-button',
+                                                    'street-layer-image',
+                                                    'satellite-layer-button-row',
+                                                    'satellite-layer-button',
+                                                    'satellite-layer-image',
+                                                    'transport-button-row',
+                                                    'bicycle-button',
+                                                    'bicycle-image',
+                                                    'traffic-button',
+                                                    'traffic-image',
+                                                    'transit-button',
+                                                    'transit-image',
+                                                    ]);
+        
+        this._listBox = ui.listBox;
+        this._satelliteLayerButtonRow = ui.satelliteLayerButtonRow;
+        this._satelliteLayerButton = ui.satelliteLayerButton;
+        
+        this._satelliteLayerButton.connect('clicked',  (function (){
+                gtk_list_box_select_row(this._listBox, this._satelliteLayerButtonRow);
+        }));
+
+        //this.height_request = 300;
+
+        this.parent({ relative_to: relativeTo,
+                      width_request: 200,
+                      no_show_all: true,
+                      visible: true });
+
+        this.get_style_context().add_class('maps-popover');
+        this.add(this._listBox);
+        this.hide();
+    }
+});
+Utils.addSignalMethods(LayersPopup.prototype);
diff --git a/src/main-window.ui b/src/main-window.ui
index 5d6afc4..1e39313 100644
--- a/src/main-window.ui
+++ b/src/main-window.ui
@@ -77,6 +77,24 @@
           </packing>
         </child>
         <child>
+          <object class="GtkButton" id="layers-button">
+            <property name="visible">True</property>
+            <property name="can-focus">True</property>
+            <property name="valign">center</property>
+            <!--<property name="action-name">win.show-layers-popup</property>-->
+            <style>
+              <class name="image-button"/>
+            </style>
+            <child>
+              <object class="GtkImage" id="layers-image">
+                <property name="visible">True</property>
+                <property name="icon-size">1</property>
+                <property name="icon-name">find-location-symbolic</property>
+              </object>
+            </child>
+          </object>
+        </child>
+        <child>
           <object class="GtkMenuButton" id="layer-menu-button">
             <property name="visible">True</property>
             <property name="can-focus">True</property>
diff --git a/src/mainWindow.js b/src/mainWindow.js
index 3f9fc96..18e163d 100644
--- a/src/mainWindow.js
+++ b/src/mainWindow.js
@@ -33,6 +33,7 @@ const Mainloop = imports.mainloop;
 
 const Application = imports.application;
 const MapView = imports.mapView;
+const LayersPopup = imports.layersPopup;
 const SearchPopup = imports.searchPopup;
 const ContextMenu = imports.contextMenu;
 const PlaceStore = imports.placeStore;
@@ -62,7 +63,9 @@ const MainWindow = new Lang.Class({
         let ui = Utils.getUIObject('main-window', [ 'app-window',
                                                     'window-content',
                                                     'search-entry',
-                                                    'search-completion']);
+                                                    'search-completion',
+                                                    'layers-button']);
+        this._layersButton = ui.layersButton;
         this._searchEntry = ui.searchEntry;
         this._searchCompletion = ui.searchCompletion;
         this.window = ui.appWindow;
@@ -77,6 +80,7 @@ const MainWindow = new Lang.Class({
 
         this._initPlaces();
         this._initSearchWidgets();
+        this._initLayersWidgets();
         this._initActions();
         this._initSignals();
         this._restoreWindowGeometry();
@@ -95,6 +99,12 @@ const MainWindow = new Lang.Class({
                 'subsequent writes will overwrite the file!');
         }
     },
+    
+    _initLayersWidgets: function(){
+        this._layersPopup = new LayersPopup.LayersPopup(this._layersButton);
+        this._layersButton.connect('clicked',
+                                this._layersPopup.show.bind(this._layersPopup));
+    },
 
     _initSearchWidgets: function() {
         this._searchPopup = new SearchPopup.SearchPopup(this._searchEntry, 10);
@@ -108,9 +118,10 @@ const MainWindow = new Lang.Class({
                                   this._onSearchPopupSelected.bind(this));
         this.mapView.view.connect('button-press-event',
                                   this._searchPopup.hide.bind(this._searchPopup));
+        this.mapView.view.connect('button-press-event',
+                                  this.mapView.grab_focus.bind(this.mapView));
         this._searchEntry.connect('changed',
                                   this._searchPopup.hide.bind(this._searchPopup));
-
         this._searchCompletion.set_model(this._placeStore);
         this._searchCompletion.connect('match-selected', (function(c, m, iter) {
             let place = m.get_value(iter, PlaceStore.Columns.PLACE);


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]