[gnome-maps] Add zoom-in/zoom-out controls

[Zeeshan Ali Khattak <zeeshanak src gnome org>]

commit 9692088e66569a502d3eea805c98c57a474c1f1b
Author: Jonas Danielsson <jonas threetimestwo org>
Date:   Thu Aug 15 08:57:07 2013 +0200

    Add zoom-in/zoom-out controls
    
    https://bugzilla.gnome.org/show_bug.cgi?id=697701

 data/gnome-maps.css                 |   39 +++++++++++++++++++
 data/media/zoom-in-insensitive.png  |  Bin 0 -> 1686 bytes
 data/media/zoom-in.png              |  Bin 0 -> 2210 bytes
 data/media/zoom-out-insensitive.png |  Bin 0 -> 2210 bytes
 data/media/zoom-out.png             |  Bin 0 -> 2210 bytes
 src/Makefile-js.am                  |    3 +-
 src/gnome-maps.gresource.xml        |    5 ++
 src/mapView.js                      |    5 ++
 src/zoom-control.ui                 |   31 +++++++++++++++
 src/zoomControl.js                  |   70 +++++++++++++++++++++++++++++++++++
 10 files changed, 152 insertions(+), 1 deletions(-)
---
diff --git a/data/gnome-maps.css b/data/gnome-maps.css
index 961e54b..c68f822 100644
--- a/data/gnome-maps.css
+++ b/data/gnome-maps.css
@@ -5,3 +5,42 @@
 .maps-sidebar:dir(rtl) {
     border-width: 0 1px 0 0;
 }
+
+.zoom-control {
+    background-color: transparent;
+}
+
+.zoom-control GtkButton {
+    background-repeat: no-repeat;
+    opacity: 0.65;
+    border-width: 0;
+    border-image-width: 0;
+}
+
+.zoom-control GtkButton:hover {
+    opacity: 0.5;
+}
+
+#zoom-in-button {
+    background-image: url('zoom-in.png');
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+}
+
+#zoom-in-button:insensitive {
+    background-image: url('zoom-in-insensitive.png');
+}
+
+#zoom-out-button {
+    background-image: url('zoom-out.png');
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+}
+
+#zoom-out-button:insensitive {
+    background-image: url('zoom-out-insensitive.png');
+}
diff --git a/data/media/zoom-in-insensitive.png b/data/media/zoom-in-insensitive.png
new file mode 100644
index 0000000..796f64b
Binary files /dev/null and b/data/media/zoom-in-insensitive.png differ
diff --git a/data/media/zoom-in.png b/data/media/zoom-in.png
new file mode 100644
index 0000000..77d71bb
Binary files /dev/null and b/data/media/zoom-in.png differ
diff --git a/data/media/zoom-out-insensitive.png b/data/media/zoom-out-insensitive.png
new file mode 100644
index 0000000..3ecddb9
Binary files /dev/null and b/data/media/zoom-out-insensitive.png differ
diff --git a/data/media/zoom-out.png b/data/media/zoom-out.png
new file mode 100644
index 0000000..2794ac5
Binary files /dev/null and b/data/media/zoom-out.png differ
diff --git a/src/Makefile-js.am b/src/Makefile-js.am
index 3caf4bc..53296db 100644
--- a/src/Makefile-js.am
+++ b/src/Makefile-js.am
@@ -9,7 +9,8 @@ dist_js_DATA = \
     sidebar.js \
     utils.js \
     userLocation.js \
-    geoclue.js
+    geoclue.js \
+    zoomControl.js
 
 BUILT_SOURCES += \
     path.js \
diff --git a/src/gnome-maps.gresource.xml b/src/gnome-maps.gresource.xml
index 5916d8f..ded3871 100644
--- a/src/gnome-maps.gresource.xml
+++ b/src/gnome-maps.gresource.xml
@@ -3,6 +3,11 @@
   <gresource prefix="/org/gnome/maps">
     <file preprocess="xml-stripblanks">app-menu.ui</file>
     <file preprocess="xml-stripblanks">main-window.ui</file>
+    <file preprocess="xml-stripblanks">zoom-control.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>
   </gresource>
 </gresources>
diff --git a/src/mapView.js b/src/mapView.js
index 22f19e4..3783af1 100644
--- a/src/mapView.js
+++ b/src/mapView.js
@@ -33,6 +33,7 @@ const Lang = imports.lang;
 const Mainloop = imports.mainloop;
 const Signals = imports.signals;
 
+const ZoomControl = imports.zoomControl;
 const Sidebar = imports.sidebar;
 const Utils = imports.utils;
 const Path = imports.path;
@@ -77,6 +78,10 @@ const MapView = new Lang.Class({
         this._factory = Champlain.MapSourceFactory.dup_default();
         this.setMapType(MapType.STREET);
 
+        this._zoomControl = new ZoomControl.ZoomControl(this);
+        this._zoomControl.set_position(20, 20);
+        this.view.add_child(this._zoomControl);
+
         this._geoclue = new Geoclue.Geoclue();
         this._updateUserLocation();
         this._geoclue.connect("location-changed",
diff --git a/src/zoom-control.ui b/src/zoom-control.ui
new file mode 100644
index 0000000..4306918
--- /dev/null
+++ b/src/zoom-control.ui
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <!-- interface-requires gtk+ 3.10 -->
+  <object class= "GtkGrid" id="zoom-control">
+       <property name="visible">True</property>
+       <property name="can_focus">False</property>
+       <property name="orientation">vertical</property>
+       <property name="row_spacing">1</property>
+       <style>
+         <class name="zoom-control" />
+       </style>
+       <child>
+         <object class="GtkButton" id="zoom-in-button">
+               <property name="name">zoom-in-button</property>
+               <property name="visible">True</property>
+               <property name="width-request">22></property>
+               <property name="height-request">23></property>
+               <property name="can_focus">False</property>
+         </object>
+       </child>
+       <child>
+         <object class="GtkButton" id="zoom-out-button">
+               <property name="name">zoom-out-button</property>
+               <property name="visible">True</property>
+               <property name="width-request">22></property>
+               <property name="height-request">23></property>
+               <property name="can_focus">False</property>
+         </object>
+       </child>
+  </object>
+</interface>
diff --git a/src/zoomControl.js b/src/zoomControl.js
new file mode 100644
index 0000000..ae65e9f
--- /dev/null
+++ b/src/zoomControl.js
@@ -0,0 +1,70 @@
+/* -*- 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: Jonas Danielsson <jonas threetimestwo org>
+ *         Mattias Bengtsson <mattias jc bengtsson gmail com>
+ */
+
+const Lang = imports.lang;
+
+const GtkClutter = imports.gi.GtkClutter;
+const Utils = imports.utils;
+
+const ZoomControl = new Lang.Class({
+    Name: 'ZoomControl',
+    Extends: GtkClutter.Actor,
+
+    _init: function (mapView) {
+        this.parent();
+        Utils.clearGtkClutterActorBg(this);
+        let ui = Utils.getUIObject('zoom-control', ['zoom-control',
+                                                    'zoom-in-button',
+                                                    'zoom-out-button']);
+        this.contents = ui.zoomControl;
+        this._zoomInButton = ui.zoomInButton;
+        this._zoomOutButton = ui.zoomOutButton;
+        this._view = mapView.view;
+
+        this._zoomInButton.connect('clicked',
+                                   this._view.zoom_in.bind(this._view));
+        this._zoomOutButton.connect('clicked',
+                                    this._view.zoom_out.bind(this._view));
+
+        this._view.connect('notify::zoom-level',
+                           this._updateSensitive.bind(this));
+        this._view.connect('notify::max-zoom-level',
+                           this._updateSensitive.bind(this));
+        this._view.connect('notify::min-zoom-level',
+                           this._updateSensitive.bind(this));
+    },
+
+    _updateSensitive: function () {
+        let zoomLevel = this._view.zoom_level;
+        let maxZoomLevel = this._view.max_zoom_level;
+        let minZoomLevel = this._view.min_zoom_level;
+
+        if (zoomLevel >= maxZoomLevel)
+            this._zoomInButton.set_sensitive(false);
+        else
+            this._zoomInButton.set_sensitive(true);
+
+        if (zoomLevel <= minZoomLevel)
+            this._zoomOutButton.set_sensitive(false);
+        else
+            this._zoomOutButton.set_sensitive(true);
+    }
+});