[gnome-maps/wip/mlundblad/transit-routing: 12/26] Add list box row to display a leg of a transit itinerary



commit 44650254ead98d6629533292541bbdd6cc0adf8a
Author: Marcus Lundblad <ml update uu se>
Date:   Mon Jun 6 23:19:56 2016 +0200

    Add list box row to display a leg of a transit itinerary
    
    This list box class is used to render a "leg" of an itinerary
    when "diving in" to a particular itinerary.
    I.e. part of a journey such as "Walk 500 m" or "Bus 42 leaving at 12:00".
    
    https://bugzilla.gnome.org/show_bug.cgi?id=755808

 data/gnome-maps.css                    |   10 ++
 data/org.gnome.Maps.data.gresource.xml |    1 +
 data/ui/transit-leg-row.ui             |  244 ++++++++++++++++++++++++++++++++
 po/POTFILES.in                         |    1 +
 src/org.gnome.Maps.src.gresource.xml   |    1 +
 src/transitLegRow.js                   |  241 +++++++++++++++++++++++++++++++
 6 files changed, 498 insertions(+), 0 deletions(-)
---
diff --git a/data/gnome-maps.css b/data/gnome-maps.css
index 5ff11b5..5f500fe 100644
--- a/data/gnome-maps.css
+++ b/data/gnome-maps.css
@@ -95,3 +95,13 @@
     min-height: 16px;
     font-size: smaller;
 }
+
+.small-circular {
+  border-radius: 14px;
+  min-width: 14px;
+  min-height: 14px;
+  padding: 0px 0px;
+  background-color: transparent;
+  -gtk-outline-radius: 14px;
+}
+
diff --git a/data/org.gnome.Maps.data.gresource.xml b/data/org.gnome.Maps.data.gresource.xml
index 33cbea1..ebf23a5 100644
--- a/data/org.gnome.Maps.data.gresource.xml
+++ b/data/org.gnome.Maps.data.gresource.xml
@@ -32,6 +32,7 @@
     <file preprocess="xml-stripblanks">ui/social-place-more-results-row.ui</file>
     <file preprocess="xml-stripblanks">ui/social-place-row.ui</file>
     <file preprocess="xml-stripblanks">ui/transit-itinerary-row.ui</file>
+    <file preprocess="xml-stripblanks">ui/transit-leg-row.ui</file>
     <file preprocess="xml-stripblanks">ui/transit-route-label.ui</file>
     <file preprocess="xml-stripblanks">ui/user-location-bubble.ui</file>
     <file preprocess="xml-stripblanks">ui/zoom-control.ui</file>
diff --git a/data/ui/transit-leg-row.ui b/data/ui/transit-leg-row.ui
new file mode 100644
index 0000000..f1d824b
--- /dev/null
+++ b/data/ui/transit-leg-row.ui
@@ -0,0 +1,244 @@
+<?xml version="1.0" encoding="utf-8"?>
+<interface>
+  <requires lib="gtk+" version="3.14"/>
+  <template class="Gjs_TransitLegRow" parent="GtkListBoxRow">
+    <property name="visible">True</property>
+    <property name="can-focus">False</property>
+    <child>
+      <object class="GtkEventBox" id="eventBox">
+        <property name="visible">True</property>
+        <property name="can-focus">False</property>
+        <child>
+          <object class="GtkGrid" id="grid">
+            <property name="visible">True</property>
+            <property name="margin-top">0</property>
+            <property name="margin-bottom">0</property>
+            <property name="row-spacing">3</property>
+            <child>
+              <object class="GtkImage" id="modeImage">
+                <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="halign">GTK_ALIGN_START</property>
+              </object>
+              <packing>
+                <property name="left-attach">0</property>
+                <property name="top-attach">0</property>
+                <property name="height">2</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkLabel" id="fromLabel">
+                <property name="visible">True</property>
+                <property name="can-focus">False</property>
+                <property name="halign">GTK_ALIGN_START</property>
+                <property name="max-width-chars">25</property>
+                <property name="ellipsize">PANGO_ELLIPSIZE_END</property>
+              </object>
+              <packing>
+                <property name="left-attach">1</property>
+                <property name="top-attach">0</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkGrid" id="routeGrid">
+                <property name="visible">True</property>
+                <property name="can-focus">False</property>
+                <property name="halign">GTK_ALIGN_START</property>
+                <property name="hexpand">True</property>
+              </object>
+              <packing>
+                <property name="left-attach">1</property>
+                <property name="top-attach">1</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkLabel" id="timeLabel">
+                <property name="visible">True</property>
+                <property name="can-focus">False</property>
+                <property name="margin-start">6</property>
+                <property name="margin-end">18</property>
+                <property name="hexpand">False</property>
+                <property name="halign">GTK_ALIGN_END</property>
+              </object>
+              <packing>
+                <property name="left-attach">2</property>
+                <property name="top-attach">0</property>
+                <property name="height">2</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkRevealer" id="detailsRevealer">
+                <property name="visible">True</property>
+                <child>
+                  <object class="GtkGrid">
+                    <property name="visible">True</property>
+                    <property name="can-focus">False</property>
+                    <property name="margin-left">15</property>
+                    <property name="margin-right">15</property>
+                    <property name="row-spacing">1</property>
+                    <child>
+                      <object class="GtkLabel" id="agencyLabel">
+                        <property name="visible">False</property>
+                        <property name="use-markup">True</property>
+                        <property name="halign">GTK_ALIGN_START</property>
+                        <property name="max_width_chars">30</property>
+                        <property name="ellipsize">PANGO_ELLIPSIZE_END</property>
+                      </object>
+                      <packing>
+                        <property name="top-attach">0</property>
+                        <property name="left-attach">0</property>
+                        <property name="width">3</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkSeparator">
+                        <property name="visible">True</property>
+                        <property name="can-focus">False</property>
+                        <property name="hexpand">True</property>
+                        <property name="valign">GTK_ALIGN_CENTER</property>
+                      </object>
+                      <packing>
+                        <property name="top-attach">1</property>
+                        <property name="left-attach">0</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="collapsButton">
+                        <property name="visible">True</property>
+                        <property name="can-focus">True</property>
+                        <property name="tooltip-text" translatable="yes">Hide intermediate stops and 
information</property>
+                        <style>
+                          <class name="small-circular"/>
+                        </style>
+                        <child>
+                          <object class="GtkImage">
+                            <property name="visible">True</property>
+                            <property name="can-focus">False</property>
+                            <property name="icon-name">go-up-symbolic</property>
+                            <property name="pixel-size">8</property>
+                          </object>
+                        </child>
+                      </object>
+                      <packing>
+                        <property name="top-attach">1</property>
+                        <property name="left-attach">1</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkSeparator">
+                        <property name="visible">True</property>
+                        <property name="can-focus">False</property>
+                        <property name="hexpand">True</property>
+                        <property name="valign">GTK_ALIGN_CENTER</property>
+                      </object>
+                      <packing>
+                        <property name="top-attach">1</property>
+                        <property name="left-attach">2</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkListBox" id="instructionList">
+                        <property name="visible">True</property>
+                        <property name="can-focus">False</property>
+                      </object>
+                      <packing>
+                        <property name="top-attach">2</property>
+                        <property name="left-attach">0</property>
+                        <property name="width">3</property>
+                      </packing>
+                    </child>
+
+                  </object>
+                </child>
+              </object>
+              <packing>
+                <property name="top-attach">3</property>
+                <property name="left-attach">0</property>
+                <property name="width">3</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkStack" id="footerStack">
+                <property name="visible">True</property>
+                <property name="can-focus">False</property>
+                <child>
+                  <object class="GtkGrid">
+                    <property name="visible">True</property>
+                    <property name="can-focus">False</property>
+                    <child>
+                      <object class="GtkSeparator">
+                        <property name="visible">True</property>
+                        <property name="can-focus">False</property>
+                        <property name="hexpand">True</property>
+                        <property name="valign">GTK_ALIGN_CENTER</property>
+                      </object>
+                      <packing>
+                        <property name="top-attach">0</property>
+                        <property name="left-attach">0</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkButton" id="expandButton">
+                        <property name="visible">True</property>
+                        <property name="can-focus">True</property>
+                        <property name="tooltip-text" translatable="yes">Show intermediate stops and 
information</property>
+                        <style>
+                          <class name="small-circular"/>
+                        </style>
+                        <child>
+                          <object class="GtkImage">
+                            <property name="visible">True</property>
+                            <property name="can-focus">False</property>
+                            <property name="icon-name">go-down-symbolic</property>
+                            <property name="pixel-size">8</property>
+                          </object>
+                        </child>
+                      </object>
+                      <packing>
+                        <property name="top-attach">0</property>
+                        <property name="left-attach">1</property>
+                      </packing>
+                    </child>
+                    <child>
+                      <object class="GtkSeparator">
+                        <property name="visible">True</property>
+                        <property name="can-focus">False</property>
+                        <property name="hexpand">True</property>
+                        <property name="valign">GTK_ALIGN_CENTER</property>
+                      </object>
+                      <packing>
+                        <property name="top-attach">0</property>
+                        <property name="left-attach">2</property>
+                      </packing>
+                    </child>
+                  </object>
+                  <packing>
+                    <property name="name">expander</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkSeparator">
+                    <property name="visible">True</property>
+                    <property name="can-focus">False</property>
+                    <property name="hexpand">True</property>
+                    <property name="valign">GTK_ALIGN_CENTER</property>
+                  </object>
+                  <packing>
+                    <property name="name">separator</property>
+                  </packing>
+                </child>
+              </object>
+              <packing>
+                <property name="top-attach">4</property>
+                <property name="left-attach">0</property>
+                <property name="width">3</property>
+              </packing>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </template>
+</interface>
diff --git a/po/POTFILES.in b/po/POTFILES.in
index 83eef5f..9e67e91 100644
--- a/po/POTFILES.in
+++ b/po/POTFILES.in
@@ -50,6 +50,7 @@ src/printOperation.js
 src/sendToDialog.js
 src/shapeLayer.js
 src/sidebar.js
+src/transitLegRow.js
 src/transitPlan.js
 src/translations.js
 src/utils.js
diff --git a/src/org.gnome.Maps.src.gresource.xml b/src/org.gnome.Maps.src.gresource.xml
index fb7e596..062b817 100644
--- a/src/org.gnome.Maps.src.gresource.xml
+++ b/src/org.gnome.Maps.src.gresource.xml
@@ -78,6 +78,7 @@
     <file>storedRoute.js</file>
     <file>togeojson/togeojson.js</file>
     <file>transitItineraryRow.js</file>
+    <file>transitLegRow.js</file>
     <file>transitOptions.js</file>
     <file>transitPlan.js</file>
     <file>transitRouteLabel.js</file>
diff --git a/src/transitLegRow.js b/src/transitLegRow.js
new file mode 100644
index 0000000..29fff78
--- /dev/null
+++ b/src/transitLegRow.js
@@ -0,0 +1,241 @@
+/* -*- Mode: JS2; indent-tabs-mode: nil; js2-basic-offset: 4 -*- */
+/* vim: set et ts=4 sw=4: */
+/*
+ * Copyright (c) 2017 Marcus Lundblad
+ *
+ * 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, see <http://www.gnu.org/licenses/>.
+ *
+ * Author: Marcus Lundblad <ml update uu se>
+ */
+
+const Lang = imports.lang;
+
+const _ = imports.gettext.gettext;
+
+const Gdk = imports.gi.Gdk;
+const GLib = imports.gi.GLib;
+const Gtk = imports.gi.Gtk;
+const Pango = imports.gi.Pango;
+
+const InstructionRow = imports.instructionRow;
+const TransitRouteLabel = imports.transitRouteLabel;
+const TransitStopRow = imports.transitStopRow;
+const Utils = imports.utils;
+
+const TransitLegRow = new Lang.Class({
+    Name: 'TransitLegRow',
+    Extends: Gtk.ListBoxRow,
+    Template: 'resource:///org/gnome/Maps/ui/transit-leg-row.ui',
+    InternalChildren: ['grid',
+                       'modeImage',
+                       'fromLabel',
+                       'routeGrid',
+                       'timeLabel',
+                       'footerStack',
+                       'expandButton',
+                       'detailsRevealer',
+                       'agencyLabel',
+                       'collapsButton',
+                       'instructionList',
+                       'eventBox'],
+
+    _init: function(params) {
+        this._leg = params.leg;
+        delete params.leg;
+
+        this._start = params.start;
+        delete params.start;
+
+        this._mapView = params.mapView;
+        delete params.mapView;
+
+        this._print = params.print;
+        delete params.print;
+
+        this.parent(params);
+
+        this._modeImage.icon_name = this._leg.iconName;
+        if (this._start) {
+            if (this._leg.from) {
+                /* Translators: this is a format string indicating instructions
+                 * starting a journey at the address given as the parameter
+                 */
+                this._fromLabel.label = _("Start at %s").format(this._leg.from);
+            } else {
+                /* Translators: this indicates starting a journey at a location
+                 * with no set name (such as when the user started routing from
+                 * an arbitrary point on the map)
+                 */
+                this._fromLabel.label = _("Start");
+            }
+        } else {
+            this._fromLabel.label = this._leg.from;
+        }
+
+        if (this._leg.transit) {
+            let routeLabel = new TransitRouteLabel.TransitRouteLabel({
+                                    leg: this._leg,
+                                 });
+
+            this._routeGrid.add(routeLabel);
+
+            this._agencyLabel.visible = true;
+
+            if (this._leg.agencyUrl) {
+                let url = GLib.markup_escape_text(this._leg.agencyUrl, -1);
+                /* we need to double-escape the tooltip text, as GTK+ treats it as
+                 * markup
+                 */
+                let tooltip = GLib.markup_escape_text(url, -1);
+                this._agencyLabel.label =
+                    '<a href="%s" title="%s">%s</a>'.format(url, tooltip,
+                                                            this._leg.agencyName);
+            } else {
+                this._agencyLabel.label = this._leg.agencyName;
+            }
+        } else {
+            this._expandButton.tooltip_text = _("Show walking instructions");
+            this._collapsButton.tooltip_text = _("Hide walking instructions");
+        }
+
+        if (!this._leg.transit || this._leg.headsign) {
+            /* Restrict headsign label to 20 characters to avoid horizontally
+             * overflowing the sidebar, make an exception for printing where
+             * we allow it use the available space.
+             */
+            let maxWidthChars = this._print ? -1 : 20;
+            let headsignLabel = new Gtk.Label({ visible: true,
+                                                can_focus: false,
+                                                use_markup: true,
+                                                hexpand: true,
+                                                margin_start: 3,
+                                                max_width_chars: maxWidthChars,
+                                                ellipsize: Pango.EllipsizeMode.END,
+                                                halign: Gtk.Align.START });
+            if (this._leg.transit && this._leg.headsign) {
+                headsignLabel.label =
+                    '<span size="small">%s</span>'.format(this._leg.headsign);
+            } else if (!this._leg.transit) {
+                /* Translators: this is a format string indicating walking a certain
+                 * distance, with the distance expression being the %s placeholder
+                 */
+                let label =
+                    _("Walk %s").format(Utils.prettyDistance(this._leg.distance));
+                headsignLabel.label =
+                    '<span size="small">%s</span>'.format(label);
+            }
+
+            headsignLabel.get_style_context().add_class('dim-label');
+            this._routeGrid.add(headsignLabel);
+        }
+
+        this._timeLabel.label = this._leg.prettyPrintTime({ isStart: this._start });
+
+        if (this._hasIntructions())
+            this._populateInstructions();
+        else
+            this._footerStack.visible_child_name = 'separator';
+
+        this._expandButton.connect('clicked', this._expand.bind(this));
+        this._collapsButton.connect('clicked', this._collaps.bind(this));
+
+        this._instructionList.connect('row-selected', (function(listbox, row) {
+            if (row) {
+                if (row.turnPoint)
+                    this._mapView.showTurnPoint(row.turnPoint);
+                else
+                    this._mapView.showTransitStop(row.stop, this._leg);
+            }
+        }).bind(this));
+
+        this._eventBox.connect('event', (function(widget, event) {
+            this._handleEventBox(event);
+            return true;
+        }).bind(this));
+
+        this._isExpanded = false;
+
+        // hide expand/collaps row in printing mode
+        this._footerStack.visible = !this._print;
+
+        // allow more space for the departure label when printing
+        if (this._print)
+            this._fromLabel.max_width_chars = -1;
+    },
+
+    // Handle events received on the EventBox for expanding when clicking
+    _handleEventBox: function(event) {
+        let [isButton, button] = event.get_button();
+        let type = event.get_event_type();
+
+        if (isButton && button === 1 && !this._isExpanded &&
+            type === Gdk.EventType.BUTTON_PRESS) {
+            this._mapView.view.zoom_level = 16;
+            this._mapView.view.center_on(this._leg.fromCoordinate[0],
+                                         this._leg.fromCoordinate[1]);
+            if (this._hasIntructions())
+                this._expand();
+        }
+    },
+
+    _expand: function() {
+        this._footerStack.visible_child_name = 'separator';
+        this._detailsRevealer.reveal_child = true;
+        /* collaps the time label down to just show the start time when
+         * revealing intermediate stop times, as the arrival time is displayed
+         * at the last stop
+         */
+        this._timeLabel.label = this._leg.prettyPrintDepartureTime();
+        this._isExpanded = true;
+    },
+
+    _collaps: function() {
+        this._footerStack.visible_child_name = 'expander';
+        this._detailsRevealer.reveal_child = false;
+        this._timeLabel.label = this._leg.prettyPrintTime({ isStart: this._start });
+        this._isExpanded = false;
+    },
+
+    _hasIntructions: function() {
+        return this._leg.transit || this._leg.walkingInstructions;
+    },
+
+    _populateInstructions: function() {
+        if (this._leg.transit) {
+            let stops = this._leg.intermediateStops;
+            for (let index = 0; index < stops.length; index++) {
+                 let stop = stops[index];
+                 let row =
+                    new TransitStopRow.TransitStopRow({ visible: true,
+                                                        stop: stop,
+                                                        final: index === stops.length - 1 });
+                this._instructionList.add(row);
+            }
+        } else {
+            /* don't output the starting and ending instructions from the walk
+             * route, since these are explicitely added by the itinerary
+             */
+            for (let index = 1;
+                 index < this._leg.walkingInstructions.length - 1;
+                 index++) {
+                let instruction = this._leg.walkingInstructions[index];
+                let row =
+                    new InstructionRow.InstructionRow({ visible: true,
+                                                        turnPoint: instruction });
+
+                this._instructionList.add(row);
+            }
+        }
+    }
+});


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