[gnome-maps/wip/zoom-control] MapView: add a zoom control

[Mattias Bengtsson <mattiasb src gnome org>]

commit 7fd0ddc5b8d8e6ce69e8f4e37053640d5ccd9e1d
Author: Mattias Bengtsson <mattias jc bengtsson gmail com>
Date:   Tue Jun 18 17:02:16 2013 +0200

    MapView: add a zoom control
    
    Add a zoom control widget based on two buttons. WIP, needs styling.

 data/gnome-maps.css          |   24 +++++++++++++++++++++
 src/Makefile-js.am           |    3 +-
 src/control.js               |   48 ++++++++++++++++++++++++++++++++++++++++++
 src/control.ui               |   46 ++++++++++++++++++++++++++++++++++++++++
 src/control.ui~              |   42 ++++++++++++++++++++++++++++++++++++
 src/gnome-maps.gresource.xml |    1 +
 src/mapView.js               |    7 ++++++
 7 files changed, 170 insertions(+), 1 deletions(-)
---
diff --git a/data/gnome-maps.css b/data/gnome-maps.css
index 961e54b..b6dd228 100644
--- a/data/gnome-maps.css
+++ b/data/gnome-maps.css
@@ -5,3 +5,27 @@
 .maps-sidebar:dir(rtl) {
     border-width: 0 1px 0 0;
 }
+
+.zoom-control {
+    background-color: transparent;
+    border-width: 0px;
+}
+
+.zoom-control GtkButton {
+    background-color: #333333;
+       color: #bbbbbb;
+    font: bold;
+    border-width: 0px 0px 0px 0px;
+}
+
+#zoom-in-button {
+    background-color: #333333;
+    border-top-left-radius: 7px;
+    border-top-right-radius: 7px;
+}
+
+#zoom-out-button {
+    background-color: #333333;
+    border-bottom-left-radius: 7px;
+    border-bottom-right-radius: 7px;
+}
\ No newline at end of file
diff --git a/src/Makefile-js.am b/src/Makefile-js.am
index 3caf4bc..fc50682 100644
--- a/src/Makefile-js.am
+++ b/src/Makefile-js.am
@@ -7,7 +7,8 @@ dist_js_DATA = \
     mapView.js \
     path.js \
     sidebar.js \
-    utils.js \
+       utils.js \
+       control.js \
     userLocation.js \
     geoclue.js
 
diff --git a/src/control.js b/src/control.js
new file mode 100644
index 0000000..e134a38
--- /dev/null
+++ b/src/control.js
@@ -0,0 +1,48 @@
+/* -*- Mode: JS2; indent-tabs-mode: nil; js2-basic-offset: 4 -*- */
+/* vim: set et ts=4 sw=4: */
+/*
+ * Copyright (c) 2011, 2012, 2013 Red Hat, Inc.
+ *
+ * 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: Mattias Bengtsson <mattias jc bengtsson gmail com>
+ */
+
+const Clutter = imports.gi.Clutter;
+const Gtk = imports.gi.Gtk;
+const GtkClutter = imports.gi.GtkClutter;
+
+const Lang = imports.lang;
+
+const Utils = imports.utils;
+
+const Zoom = new Lang.Class({
+       Name: 'Zoom',
+       Extends: GtkClutter.Actor,
+
+    _init: function(mapView, props) {
+        GtkClutter.Actor.prototype._init.call(this, props);
+               let ui = Utils.getUIObject('control', ['zoom-control',
+                                                                                          'zoom-in-button',
+                                                                                          'zoom-out-button'
+                                                                                         ]);
+
+        ui.zoomInButton.connect('clicked', mapView.zoom_in.bind(mapView));
+        ui.zoomOutButton.connect('clicked', mapView.zoom_out.bind(mapView));
+        Utils.clearGtkClutterActorBg(this);
+        this.contents = ui.zoomControl;
+
+    }
+});
diff --git a/src/control.ui b/src/control.ui
new file mode 100644
index 0000000..be47a8f
--- /dev/null
+++ b/src/control.ui
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <!-- interface-requires gtk+ 3.8 -->
+  <object class="GtkImage" id="image1">
+    <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <property name="icon_size">1</property>
+  </object>
+  <object class="GtkBox" id="zoom-control">
+    <property name="name">zoom-control</property>
+    <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <property name="orientation">vertical</property>
+       <style>
+         <class name="zoom-control" />
+       </style>
+    <child>
+      <object class="GtkButton" id="zoom-in-button">
+        <property name="label">+</property>
+        <property name="name">zoom-in-button</property>
+        <property name="visible">True</property>
+        <property name="can_focus">True</property>
+        <property name="receives_default">True</property>
+      </object>
+      <packing>
+        <property name="expand">False</property>
+        <property name="fill">True</property>
+        <property name="position">1</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkButton" id="zoom-out-button">
+        <property name="label">-</property>
+        <property name="name">zoom-out-button</property>
+        <property name="visible">True</property>
+        <property name="can_focus">True</property>
+        <property name="receives_default">True</property>
+      </object>
+      <packing>
+        <property name="expand">False</property>
+        <property name="fill">True</property>
+        <property name="position">2</property>
+      </packing>
+    </child>
+  </object>
+</interface>
diff --git a/src/control.ui~ b/src/control.ui~
new file mode 100644
index 0000000..d86940e
--- /dev/null
+++ b/src/control.ui~
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <!-- interface-requires gtk+ 3.8 -->
+  <object class="GtkImage" id="image1">
+    <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <property name="icon_size">1</property>
+  </object>
+  <object class="GtkBox" id="zoom-control">
+    <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <property name="orientation">vertical</property>
+    <child>
+      <object class="GtkButton" id="zoom-in-button">
+        <property name="label">+</property>
+        <property name="name">zoom-in-button</property>
+        <property name="visible">True</property>
+        <property name="can_focus">True</property>
+        <property name="receives_default">True</property>
+      </object>
+      <packing>
+        <property name="expand">False</property>
+        <property name="fill">True</property>
+        <property name="position">1</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkButton" id="zoom-out-button">
+        <property name="label">-</property>
+        <property name="name">zoom-out-button</property>
+        <property name="visible">True</property>
+        <property name="can_focus">True</property>
+        <property name="receives_default">True</property>
+      </object>
+      <packing>
+        <property name="expand">False</property>
+        <property name="fill">True</property>
+        <property name="position">2</property>
+      </packing>
+    </child>
+  </object>
+</interface>
diff --git a/src/gnome-maps.gresource.xml b/src/gnome-maps.gresource.xml
index 5916d8f..5920a92 100644
--- a/src/gnome-maps.gresource.xml
+++ b/src/gnome-maps.gresource.xml
@@ -3,6 +3,7 @@
   <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">control.ui</file>
     <file alias="application.css">../data/gnome-maps.css</file>
   </gresource>
 </gresources>
diff --git a/src/mapView.js b/src/mapView.js
index 0bfe944..8e332a6 100644
--- a/src/mapView.js
+++ b/src/mapView.js
@@ -25,6 +25,7 @@ const Cogl = imports.gi.Cogl;
 const Gdk = imports.gi.Gdk;
 const GdkPixbuf = imports.gi.GdkPixbuf;
 const Gtk = imports.gi.Gtk;
+const GtkClutter = imports.gi.GtkClutter;
 const GtkChamplain = imports.gi.GtkChamplain;
 const Champlain = imports.gi.Champlain;
 const Geocode = imports.gi.GeocodeGlib;
@@ -39,6 +40,7 @@ const Path = imports.path;
 const MapLocation = imports.mapLocation;
 const UserLocation = imports.userLocation;
 const Geoclue = imports.geoclue;
+const Control = imports.control;
 const _ = imports.gettext.gettext;
 
 const MapType = {
@@ -77,6 +79,10 @@ const MapView = new Lang.Class({
         this._factory = Champlain.MapSourceFactory.dup_default();
         this.setMapType(MapType.STREET);
 
+        this.view.add_child(new Control.Zoom(this.view, {
+            x_align: Clutter.ActorAlign.END
+        }));
+        
         this._showUserLocation();
     },
 
@@ -186,5 +192,6 @@ const MapView = new Lang.Class({
     _onViewMoved: function() {
         this.emit('view-moved');
     }
+    
 });
 Signals.addSignalMethods(MapView.prototype);