[gnome-maps] New layers popover menu



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

    New layers popover menu
    
    Replace the map-type-menu with a new popover menu for switching
    between views (aerial and street).
    
    https://bugzilla.gnome.org/show_bug.cgi?id=725352

 data/gnome-maps.css               |   21 ++++++++-
 data/icons/layers-button.svg      |   78 +++++++++++++++++++++++++++++++++++++
 data/media/maptype-aerial.png     |  Bin 0 -> 30531 bytes
 data/media/maptype-street.png     |  Bin 0 -> 32933 bytes
 src/gnome-maps.data.gresource.xml |    4 ++
 src/gnome-maps.js.gresource.xml   |    1 +
 src/layers-popover.ui             |   58 +++++++++++++++++++++++++++
 src/layersPopover.js              |   45 +++++++++++++++++++++
 src/main-window.ui                |   25 +----------
 src/mainWindow.js                 |    6 ++-
 10 files changed, 212 insertions(+), 26 deletions(-)
---
diff --git a/data/gnome-maps.css b/data/gnome-maps.css
index 22e8739..6891aec 100644
--- a/data/gnome-maps.css
+++ b/data/gnome-maps.css
@@ -7,9 +7,24 @@
 }
 
 .maps-popover {
-       margin: 0px;
-       padding: 5px;
-       border-radius: 0px;
+    margin: 0px;
+    padding: 5px;
+    border-radius: 0px;
+}
+
+.layer-radio-button {
+    background-image: none;
+    padding: 0px;
+    border: 2px solid @insensitive_borders;
+    border-radius: 0px;
+    -GtkWidget-focus-line-width: 1;
+    -GtkWidget-focus-padding: 1;
+    -GtkButton-image-spacing: 0;
+    -GtkButton-interior-focus: true;
+}
+
+.layer-radio-button:active {
+    border: 2px solid @suggested_action_button_a;
 }
 
 .zoom-control {
diff --git a/data/icons/layers-button.svg b/data/icons/layers-button.svg
new file mode 100644
index 0000000..a50bbc4
--- /dev/null
+++ b/data/icons/layers-button.svg
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/";
+   xmlns:cc="http://creativecommons.org/ns#";
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+   xmlns:svg="http://www.w3.org/2000/svg";
+   xmlns="http://www.w3.org/2000/svg";
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+   width="16px"
+   height="16px"
+   id="svg6558"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="New document 2">
+  <defs
+     id="defs6560" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="32"
+     inkscape:cx="8.6411621"
+     inkscape:cy="4.5216328"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:grid-bbox="true"
+     inkscape:document-units="px"
+     inkscape:snap-nodes="false"
+     inkscape:snap-bbox="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1014"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid7050" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata6563">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage"; />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer">
+    <path
+       
style="color:#000000;fill:#2e3436;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.20415698999999998;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       d="M 4.34375,7.46875 1.625,8.5625 8,11.09375 14.40625,8.5625 11.6875,7.46875 7.96875,8.9375 z"
+       id="rect6931-9"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccc" />
+    <path
+       
style="color:#000000;fill:#2e3436;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       d="M 8 2.9375 L 1.625 5.5 L 8 8.0625 L 14.40625 5.5 L 8 2.9375 z "
+       id="rect6931" />
+    <path
+       inkscape:connector-curvature="0"
+       
style="color:#000000;fill:#2e3436;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.20415698999999998;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       d="M 4.34375,10.59375 1.625,11.6875 8,14.21875 14.40625,11.6875 11.6875,10.59375 7.96875,12.0625 z"
+       id="rect6931-9-3"
+       sodipodi:nodetypes="ccccccc" />
+  </g>
+</svg>
diff --git a/data/media/maptype-aerial.png b/data/media/maptype-aerial.png
new file mode 100644
index 0000000..b7613c7
Binary files /dev/null and b/data/media/maptype-aerial.png differ
diff --git a/data/media/maptype-street.png b/data/media/maptype-street.png
new file mode 100644
index 0000000..a9aa9ac
Binary files /dev/null and b/data/media/maptype-street.png differ
diff --git a/src/gnome-maps.data.gresource.xml b/src/gnome-maps.data.gresource.xml
index 6250d60..51cbf61 100644
--- a/src/gnome-maps.data.gresource.xml
+++ b/src/gnome-maps.data.gresource.xml
@@ -6,10 +6,14 @@
     <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-popover.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>
     <file alias="zoom-in-insensitive.png">../data/media/zoom-in-insensitive.png</file>
     <file alias="zoom-out-insensitive.png">../data/media/zoom-out-insensitive.png</file>
+    <file alias="maptype-aerial.png">../data/media/maptype-aerial.png</file>
+    <file alias="maptype-street.png">../data/media/maptype-street.png</file>
+    <file alias="layers-button.svg">../data/icons/layers-button.svg</file>
   </gresource>
 </gresources>
diff --git a/src/gnome-maps.js.gresource.xml b/src/gnome-maps.js.gresource.xml
index cb9a57c..6c729c3 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>layersPopover.js</file>
     <file>main.js</file>
     <file>mainWindow.js</file>
     <file>mapLocation.js</file>
diff --git a/src/layers-popover.ui b/src/layers-popover.ui
new file mode 100644
index 0000000..f0c221e
--- /dev/null
+++ b/src/layers-popover.ui
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <!-- interface-requires gtk+ 3.10 -->
+  <object class="GtkGrid" id="grid">
+    <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <child>
+      <object class="GtkRadioButton" id="street-layer-button">
+        <property name="visible">True</property>
+        <property name="can-focus">True</property>
+        <property name="margin">2</property>
+        <property name="action-name">win.map-type</property>
+        <property name="action-target">"STREET"</property>
+        <property name="draw-indicator">False</property>
+        <style>
+          <class name="layer-radio-button"/>
+        </style>
+        <child>
+          <object class="GtkImage" id="street-layer-image">
+            <property name="visible">True</property>
+            <property name="pixbuf">maptype-street.png</property>
+          </object>
+        </child>
+      </object>
+      <packing>
+        <property name="left-attach">0</property>
+        <property name="top-attach">0</property>
+        <property name="width">3</property>
+        <property name="height">1</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkRadioButton" id="aerial-layer-button">
+        <property name="visible">True</property>
+        <property name="can-focus">True</property>
+        <property name="margin">2</property>
+        <property name="action-name">win.map-type</property>
+        <property name="action-target">"AERIAL"</property>
+        <property name="draw-indicator">False</property>
+        <style>
+          <class name="layer-radio-button"/>
+        </style>
+        <child>
+          <object class="GtkImage" id="aerial-layer-image">
+            <property name="visible">True</property>
+            <property name="pixbuf">maptype-aerial.png</property>
+          </object>
+        </child>
+      </object>
+      <packing>
+        <property name="left-attach">0</property>
+        <property name="top-attach">1</property>
+        <property name="width">3</property>
+        <property name="height">1</property>
+      </packing>
+    </child>
+  </object>
+</interface>
diff --git a/src/layersPopover.js b/src/layersPopover.js
new file mode 100644
index 0000000..e96cdf8
--- /dev/null
+++ b/src/layersPopover.js
@@ -0,0 +1,45 @@
+/* -*- 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 LayersPopover = new Lang.Class({
+    Name: 'LayersPopover',
+    Extends: Gtk.Popover,
+
+    _init: function() {
+        let ui = Utils.getUIObject('layers-popover', [ 'grid',
+                                                       'street-layer-button',
+                                                       'aerial-layer-button' ]);
+
+        this.parent({ width_request: 200,
+                      no_show_all: true,
+                      visible: false });
+
+        ui.aerialLayerButton.join_group(ui.streetLayerButton);
+
+        this.get_style_context().add_class('maps-popover');
+        this.add(ui.grid);
+    }
+});
+Utils.addSignalMethods(LayersPopover.prototype);
diff --git a/src/main-window.ui b/src/main-window.ui
index 9247031..aa7accb 100644
--- a/src/main-window.ui
+++ b/src/main-window.ui
@@ -1,20 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
   <!-- interface-requires gtk+ 3.0 -->
-  <menu id="map-type-menu">
-    <section>
-      <item>
-        <attribute name="label" translatable="yes">Street</attribute>
-        <attribute name="action">win.map-type</attribute>
-        <attribute name="target">STREET</attribute>
-      </item>
-      <item>
-        <attribute name="label" translatable="yes">Satellite</attribute>
-        <attribute name="action">win.map-type</attribute>
-        <attribute name="target">AERIAL</attribute>
-      </item>
-    </section>
-  </menu>
   <object class="GtkEntryCompletion" id="search-completion">
     <property name="minimum_key_length">2</property>
     <child>
@@ -77,26 +63,21 @@
           </packing>
         </child>
         <child>
-          <object class="GtkMenuButton" id="layer-menu-button">
+          <object class="GtkMenuButton" id="layers-button">
             <property name="visible">True</property>
             <property name="can-focus">True</property>
             <property name="valign">center</property>
-            <property name="menu-model">map-type-menu</property>
-            <property name="action-name">win.map-type-menu</property>
             <style>
               <class name="image-button"/>
             </style>
             <child>
-              <object class="GtkImage" id="layer-menu-button-image">
+              <object class="GtkImage" id="layers-button-image">
                 <property name="visible">True</property>
                 <property name="icon-size">1</property>
-                <property name="icon-name">emblem-system-symbolic</property>
+                <property name="pixbuf">layers-button.svg</property>
               </object>
             </child>
           </object>
-          <packing>
-            <property name="pack-type">end</property>
-          </packing>
         </child>
       </object>
     </child>
diff --git a/src/mainWindow.js b/src/mainWindow.js
index dffd00e..35fbfd1 100644
--- a/src/mainWindow.js
+++ b/src/mainWindow.js
@@ -31,6 +31,7 @@ const Mainloop = imports.mainloop;
 
 const Application = imports.application;
 const MapView = imports.mapView;
+const LayersPopover = imports.layersPopover;
 const SearchPopup = imports.searchPopup;
 const ContextMenu = imports.contextMenu;
 const PlaceStore = imports.placeStore;
@@ -52,7 +53,8 @@ const MainWindow = new Lang.Class({
         let ui = Utils.getUIObject('main-window', [ 'app-window',
                                                     'window-content',
                                                     'search-entry',
-                                                    'search-completion']);
+                                                    'search-completion',
+                                                    'layers-button']);
         this._searchEntry = ui.searchEntry;
         this._searchCompletion = ui.searchCompletion;
         this.window = ui.appWindow;
@@ -66,6 +68,8 @@ const MainWindow = new Lang.Class({
 
         this._contextMenu = new ContextMenu.ContextMenu(this.mapView);
 
+        ui.layersButton.popover = new LayersPopover.LayersPopover();
+
         this._initPlaces();
         this._initSearchWidgets();
         this._initActions();


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