[gnome-maps] sidebar: Add via points support
- From: Jonas Danielsson <jonasdn src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-maps] sidebar: Add via points support
- Date: Tue, 2 Sep 2014 15:46:44 +0000 (UTC)
commit 0eafc48302f774320219c6509d339e019d8a1d3f
Author: Dario Di Nucci <linkin88mail gmail com>
Date: Thu Jul 31 21:40:59 2014 +0200
sidebar: Add via points support
Add support for dynamicly add and remove via points to
the route search interface.
https://bugzilla.gnome.org/show_bug.cgi?id=731068
data/gnome-maps.css | 42 +++++--
src/gnome-maps.data.gresource.xml | 1 +
src/placeEntry.js | 16 ++-
src/route-via-row.ui | 39 +++++++
src/sidebar.js | 75 ++++++++++---
src/sidebar.ui | 221 ++++++++++++++++++++-----------------
6 files changed, 263 insertions(+), 131 deletions(-)
---
diff --git a/data/gnome-maps.css b/data/gnome-maps.css
index 785c168..49a6e03 100644
--- a/data/gnome-maps.css
+++ b/data/gnome-maps.css
@@ -59,15 +59,27 @@
background-image: url('zoom-out-insensitive.png');
}
-#sidebar-form > GtkLabel {
+#via-grid-container {
+ background-color: transparent;
+}
+
+#via-grid-container .list-row:hover {
+ background-color: transparent;
+}
+
+#via-grid-container .list-row:focus {
+ outline: 0;
+}
+
+#via-grid-container > GtkLabel {
padding-right: 6px;
}
-#sidebar-form > GtkLabel:dir(rtl) {
+#via-grid-container > GtkLabel:dir(rtl) {
padding-left: 6px;
}
-#sidebar-form .transportation-mode-button > GtkImage {
+#via-grid-container .transportation-mode-button > GtkImage {
padding-left: 7px;
padding-right: 7px;
padding-top: 4px;
@@ -75,25 +87,31 @@
}
#sidebar {
- border-left: 1px solid gray;
+ border-left: 1px solid gray;
}
#sidebar:dir(rtl) {
- border-right: 1px solid gray;
+ border-right: 1px solid gray;
}
-#instruction-box {
- margin-left: 10px;
- margin-right: 10px;
- border-bottom: 1px;
-}
#instruction-box > GtkImage {
padding-right: 6px;
padding-left: 6px;
}
-#instruction-list {
- border-top: 1px solid gray;
+#instruction-list .list-row {
+ background-color: #f1f2f1;
+ border-bottom: 1px solid #bbbeb7;
+}
+
+#instruction-list .list-row:hover {
+ background-color: #f9f9f9;
+ color: black;
+}
+
+#instruction-list .list-row:focused {
+ background-color: @theme_selected_bg_color;
+ color: @theme_selected_fg_color;
}
.bubble-title {
diff --git a/src/gnome-maps.data.gresource.xml b/src/gnome-maps.data.gresource.xml
index 633b451..f2012c9 100644
--- a/src/gnome-maps.data.gresource.xml
+++ b/src/gnome-maps.data.gresource.xml
@@ -10,6 +10,7 @@
<file preprocess="xml-stripblanks">context-menu.ui</file>
<file preprocess="xml-stripblanks">layers-popover.ui</file>
<file preprocess="xml-stripblanks">notification.ui</file>
+ <file preprocess="xml-stripblanks">route-via-row.ui</file>
<file preprocess="xml-stripblanks">search-result-bubble.ui</file>
<file preprocess="xml-stripblanks">user-location-bubble.ui</file>
<file alias="application.css">../data/gnome-maps.css</file>
diff --git a/src/placeEntry.js b/src/placeEntry.js
index ebe782b..bc422b4 100644
--- a/src/placeEntry.js
+++ b/src/placeEntry.js
@@ -43,9 +43,19 @@ const PlaceEntry = new Lang.Class({
},
set place(p) {
- this._place = p;
- this.text = p ? p.name : "";
- this.notify("place");
+ if (p) {
+ if (!this.place ||
+ (this.place.location.latitude != p.location.latitude ||
+ this.place.location.longitude != p.location.longitude)) {
+ this._place = p;
+ this.text = p.name;
+ this.notify("place");
+ }
+ } else {
+ this._place = p;
+ this.text = "";
+ this.notify("place");
+ }
},
get place() {
return this._place;
diff --git a/src/route-via-row.ui b/src/route-via-row.ui
new file mode 100644
index 0000000..17b2034
--- /dev/null
+++ b/src/route-via-row.ui
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+ <requires lib="gtk+" version="3.10"/>
+ <object class="GtkGrid" id="via-grid">
+ <property name="visible">True</property>
+ <property name="orientation">horizontal</property>
+ <child>
+ <object class="GtkImage" id="via-image">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="margin-start">12</property>
+ <property name="margin-end">12</property>
+ <property name="margin_top">0</property>
+ <property name="margin_bottom">0</property>
+ <property name="width-request">32</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkGrid" id="via-entry-grid">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkButton" id="via-remove-button">
+ <property name="visible">True</property>
+ <property name="can-focus">True</property>
+ <property name="valign">center</property>
+ <property name="height-request">31</property>
+ <child>
+ <object class="GtkImage" id="via-remove-image">
+ <property name="visible">True</property>
+ <property name="icon-name">list-remove-symbolic</property>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+</interface>
diff --git a/src/sidebar.js b/src/sidebar.js
index de4c4df..85df03e 100644
--- a/src/sidebar.js
+++ b/src/sidebar.js
@@ -49,14 +49,20 @@ const Sidebar = new Lang.Class({
this.get_style_context().add_class('maps-sidebar');
let ui = Utils.getUIObject('sidebar', [ 'sidebar',
- 'sidebar-form',
+ 'via-grid-container',
'instruction-list-scrolled',
'instruction-stack',
'instruction-spinner',
'instruction-list',
'mode-pedestrian-toggle',
'mode-bike-toggle',
- 'mode-car-toggle']);
+ 'mode-car-toggle',
+ 'from-entry-grid',
+ 'to-entry-grid',
+ 'via-add-button']);
+
+ this._mapView = mapView;
+ this._viaGridContainer = ui.viaGridContainer;
this._instructionList = ui.instructionList;
this._instructionStack = ui.instructionStack;
this._instructionWindow = ui.instructionListScrolled;
@@ -67,10 +73,13 @@ const Sidebar = new Lang.Class({
ui.modeBikeToggle,
ui.modeCarToggle);
- ui.sidebarForm.attach(this._createEntry("from", mapView),
- 1, 0, 1, 1);
- ui.sidebarForm.attach(this._createEntry("to", mapView),
- 1, 1, 1, 1);
+ this._initRouteEntry(ui.fromEntryGrid, 0);
+ this._initRouteEntry(ui.toEntryGrid, 1);
+
+ ui.viaAddButton.connect('clicked', (function() {
+ this._createViaRow(ui.viaGridContainer);
+ }).bind(this));
+
this.add(ui.sidebar);
},
@@ -86,7 +95,7 @@ const Sidebar = new Lang.Class({
car.connect('toggled', onToggle.bind(this, transport.CAR));
bike.connect('toggled', onToggle.bind(this, transport.BIKE));
- query.connect('updated', function() {
+ query.connect('notify::transportation', function() {
switch(query.transportation) {
case transport.PEDESTRIAN:
pedestrian.active = true;
@@ -101,13 +110,43 @@ const Sidebar = new Lang.Class({
});
},
- _createEntry: function(propName, mapView) {
- let entry = new PlaceEntry.PlaceEntry({ visible: true,
- mapView: mapView });
- entry.bind_property("place",
- Application.routeService.query, propName,
+ _createPlaceEntry: function() {
+ return new PlaceEntry.PlaceEntry({ visible: true,
+ can_focus: true,
+ receives_default: true,
+ margin_start: 5,
+ width_request: 220,
+ mapView: this._mapView });
+ },
+
+ _createViaRow: function(listbox) {
+ let ui = Utils.getUIObject('route-via-row', [ 'via-grid',
+ 'via-remove-button',
+ 'via-entry-grid' ]);
+
+ // Always insert before 'To'
+ let insertIndex = Application.routeService.query.points.length - 1;
+ listbox.insert(ui.viaGrid, insertIndex);
+ this._initRouteEntry(ui.viaEntryGrid, insertIndex);
+
+ ui.viaRemoveButton.connect('clicked', function() {
+ let row = ui.viaGrid.get_parent();
+ let pointIndex = row.get_index();
+
+ listbox.remove(row);
+ Application.routeService.query.removePoint(pointIndex + 1);
+ });
+ },
+
+ _initRouteEntry: function(container, pointIndex) {
+ let entry = this._createPlaceEntry();
+ container.add(entry);
+
+ let point = new RouteQuery.QueryPoint();
+ entry.bind_property('place',
+ point, 'place',
GObject.BindingFlags.BIDIRECTIONAL);
- return entry;
+ Application.routeService.query.addPoint(point, pointIndex);
},
_initInstructionList: function() {
@@ -117,10 +156,14 @@ const Sidebar = new Lang.Class({
route.connect('reset', (function() {
this._clearInstructions();
this._instructionStack.visible_child = this._instructionWindow;
+ this._viaGridContainer.get_children().forEach((function(row) {
+ query.removePoint(row.get_index() + 1);
+ row.destroy();
+ }).bind(this));
}).bind(this));
- query.connect('updated', (function() {
- if (query.from && query.to)
+ query.connect('notify', (function() {
+ if (query.isValid())
this._instructionStack.visible_child = this._instructionSpinner;
}).bind(this));
@@ -129,7 +172,7 @@ const Sidebar = new Lang.Class({
this._instructionStack.visible_child = this._instructionWindow;
route.turnPoints.forEach((function(turnPoint) {
- let row = new InstructionRow({ visible:true,
+ let row = new InstructionRow({ visible: true,
turnPoint: turnPoint });
this._instructionList.add(row);
}).bind(this));
diff --git a/src/sidebar.ui b/src/sidebar.ui
index a92813d..8346283 100644
--- a/src/sidebar.ui
+++ b/src/sidebar.ui
@@ -10,130 +10,154 @@
<property name="valign">fill</property>
<property name="column_homogeneous">True</property>
<property name="orientation">vertical</property>
- <property name="width_request">250</property>
- <property name="row_spacing">12</property>
+ <property name="width_request">320</property>
+ <property name="row_spacing">2</property>
<child>
- <object class="GtkGrid" id="sidebar-form">
- <property name="name">sidebar-form</property>
+ <object class="GtkGrid" id="mode-chooser">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="vexpand">False</property>
- <property name="orientation">vertical</property>
- <property name="row_spacing">12</property>
- <property name="margin_start">12</property>
- <property name="margin_end">12</property>
- <property name="margin_top">12</property>
- <property name="margin_bottom">0</property>
+ <property name="halign">center</property>
+ <property name="margin-top">10</property>
<child>
- <object class="GtkBox" id="mode-chooser">
+ <object class="GtkRadioButton" id="mode-pedestrian-toggle">
+ <property name="name">mode-pedestrian-toggle</property>
<property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="halign">center</property>
- <property name="homogeneous">True</property>
+ <property name="can_focus">True</property>
+ <property name="receives_default">True</property>
+ <property name="draw_indicator">False</property>
+ <property name="height-request">32</property>
+ <property name="width-request">42</property>
<child>
- <object class="GtkRadioButton" id="mode-pedestrian-toggle">
- <property name="name">mode-pedestrian-toggle</property>
+ <object class="GtkImage" id="mode-pedestrian-image">
<property name="visible">True</property>
- <property name="can_focus">True</property>
- <property name="receives_default">True</property>
- <property name="draw_indicator">False</property>
- <child>
- <object class="GtkImage" id="mode-pedestrian-image">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="pixbuf">route-pedestrian-symbolic</property>
- </object>
- </child>
- <style>
- <class name="transportation-mode-button"/>
- </style>
+ <property name="can_focus">False</property>
+ <property name="pixbuf">route-pedestrian-symbolic</property>
</object>
- <packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
- <property name="position">0</property>
- </packing>
</child>
+ <style>
+ <class name="transportation-mode-button"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkRadioButton" id="mode-bike-toggle">
+ <property name="name">mode-bike-toggle</property>
+ <property name="visible">True</property>
+ <property name="can_focus">True</property>
+ <property name="receives_default">True</property>
+ <property name="draw_indicator">False</property>
+ <property name="group">mode-pedestrian-toggle</property>
+ <property name="height-request">32</property>
+ <property name="width-request">42</property>
<child>
- <object class="GtkRadioButton" id="mode-bike-toggle">
- <property name="name">mode-bike-toggle</property>
- <property name="visible">True</property>
- <property name="can_focus">True</property>
- <property name="receives_default">True</property>
- <property name="draw_indicator">False</property>
- <property name="group">mode-pedestrian-toggle</property>
- <child>
- <object class="GtkImage" id="mode-bike-image">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="pixbuf">route-bike-symbolic</property>
- </object>
- </child>
- <style>
- <class name="transportation-mode-button"/>
- </style>
+ <object class="GtkImage" id="mode-bike-image">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="pixbuf">route-bike-symbolic</property>
</object>
- <packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
- <property name="position">1</property>
- </packing>
</child>
+ <style>
+ <class name="transportation-mode-button"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkRadioButton" id="mode-car-toggle">
+ <property name="name">mode-car-toggle</property>
+ <property name="visible">True</property>
+ <property name="can_focus">True</property>
+ <property name="receives_default">True</property>
+ <property name="active">True</property>
+ <property name="draw_indicator">False</property>
+ <property name="group">mode-bike-toggle</property>
+ <property name="height-request">32</property>
+ <property name="width-request">42</property>
<child>
- <object class="GtkRadioButton" id="mode-car-toggle">
- <property name="name">mode-car-toggle</property>
+ <object class="GtkImage" id="mode-car-image">
<property name="visible">True</property>
- <property name="can_focus">True</property>
- <property name="receives_default">True</property>
- <property name="active">True</property>
- <property name="draw_indicator">False</property>
- <property name="group">mode-bike-toggle</property>
- <child>
- <object class="GtkImage" id="mode-car-image">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="pixbuf">route-car-symbolic</property>
- </object>
- </child>
- <style>
- <class name="transportation-mode-button"/>
- </style>
+ <property name="can_focus">False</property>
+ <property name="pixbuf">route-car-symbolic</property>
</object>
- <packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
- <property name="position">2</property>
- </packing>
</child>
<style>
- <class name="linked"/>
+ <class name="transportation-mode-button"/>
</style>
</object>
- <packing>
- <property name="left_attach">0</property>
- <property name="top_attach">2</property>
- <property name="width">2</property>
- </packing>
</child>
+ <style>
+ <class name="linked"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkGrid" id="from-grid">
+ <property name="visible">True</property>
+ <property name="orientation">horizontal</property>
+ <property name="margin_start">12</property>
+ <property name="margin_end">12</property>
+ <property name="margin_top">12</property>
<child>
- <object class="GtkLabel" id="to-label">
+ <object class="GtkImage" id="from-image">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">end</property>
- <property name="label" translatable="yes">To</property>
+ <property name="margin-start">10</property>
+ <property name="margin-end">5</property>
+ <property name="width-request">32</property>
+ <property name="resource">/org/gnome/maps/direction-start</property>
</object>
- <packing>
- <property name="left_attach">0</property>
- <property name="top_attach">1</property>
- </packing>
</child>
<child>
- <object class="GtkLabel" id="from-label">
+ <object class="GtkGrid" id="from-entry-grid">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkButton" id="via-add-button">
+ <property name="visible">True</property>
+ <property name="can-focus">True</property>
+ <property name="valign">center</property>
+ <property name="height-request">31</property>
+ <child>
+ <object class="GtkImage" id="via-add-image">
+ <property name="visible">True</property>
+ <property name="icon-name">list-add-symbolic</property>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="GtkListBox" id="via-grid-container">
+ <property name="name">via-grid-container</property>
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="selection-mode">GTK_SELECTION_NONE</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkGrid" id="to-grid">
+ <property name="visible">True</property>
+ <property name="orientation">horizontal</property>
+ <property name="vexpand">False</property>
+ <property name="margin_start">12</property>
+ <property name="margin_end">12</property>
+ <child>
+ <object class="GtkImage" id="to-image">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="margin-start">10</property>
+ <property name="margin-end">5</property>
+ <property name="width-request">32</property>
+ <property name="resource">/org/gnome/maps/direction-end</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkGrid" id="to-entry-grid">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="halign">end</property>
- <property name="label" translatable="yes">From</property>
- <property name="ellipsize">end</property>
</object>
</child>
</object>
@@ -177,10 +201,6 @@
</object>
</child>
</object>
- <packing>
- <property name="left_attach">0</property>
- <property name="top_attach">1</property>
- </packing>
</child>
</object>
@@ -217,7 +237,8 @@
<property name="use_underline">True</property>
<property name="wrap">True</property>
<property name="ellipsize">end</property>
- <property name="max_width_chars">28</property>
+ <property name="width_chars">20</property>
+ <property name="max_width_chars">20</property>
<property name="lines">3</property>
</object>
<packing>
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
