[gnome-maps] mainWindow: Split out headerbar buttons
- From: Marcus Lundblad <mlundblad src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-maps] mainWindow: Split out headerbar buttons
- Date: Mon, 9 Mar 2020 20:51:53 +0000 (UTC)
commit 23edf0f8970719cb31841ff86fccef1eb060c6f4
Author: James Westman <flyingpimonster gmail com>
Date: Wed Jan 1 23:18:07 2020 -0600
mainWindow: Split out headerbar buttons
Refactor the headerbar buttons into two new UI components, HeaderBarLeft
and HeaderBarRight.
This is necessary for the next step of making the adaptive UI, which is
to show these buttons in an action bar when the window is too narrow for
them to fit in the headerbar.
data/org.gnome.Maps.data.gresource.xml | 2 +
data/ui/headerbar-left.ui | 90 +++++++++++++++++++++
data/ui/headerbar-right.ui | 75 +++++++++++++++++
data/ui/main-window.ui | 144 ---------------------------------
src/headerBar.js | 95 ++++++++++++++++++++++
src/layersPopover.js | 11 ++-
src/mainWindow.js | 46 ++++-------
src/mapView.js | 5 +-
src/org.gnome.Maps.src.gresource.xml | 1 +
9 files changed, 290 insertions(+), 179 deletions(-)
---
diff --git a/data/org.gnome.Maps.data.gresource.xml b/data/org.gnome.Maps.data.gresource.xml
index 473b351b..749c12af 100644
--- a/data/org.gnome.Maps.data.gresource.xml
+++ b/data/org.gnome.Maps.data.gresource.xml
@@ -6,6 +6,8 @@
<file preprocess="xml-stripblanks">ui/context-menu.ui</file>
<file preprocess="xml-stripblanks">ui/export-view-dialog.ui</file>
<file preprocess="xml-stripblanks">ui/favorites-popover.ui</file>
+ <file preprocess="xml-stripblanks">ui/headerbar-left.ui</file>
+ <file preprocess="xml-stripblanks">ui/headerbar-right.ui</file>
<file preprocess="xml-stripblanks">ui/instruction-row.ui</file>
<file preprocess="xml-stripblanks">ui/layers-popover.ui</file>
<file preprocess="xml-stripblanks">ui/shape-layer-row.ui</file>
diff --git a/data/ui/headerbar-left.ui b/data/ui/headerbar-left.ui
new file mode 100644
index 00000000..f64b250f
--- /dev/null
+++ b/data/ui/headerbar-left.ui
@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated with glade 3.22.0 -->
+<interface>
+ <requires lib="gtk+" version="3.22"/>
+ <template class="Gjs_HeaderBarLeft" parent="GtkBox">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="spacing">6</property>
+ <child>
+ <object class="GtkButton" id="gotoUserLocationButton">
+ <property name="visible">True</property>
+ <property name="can-focus">True</property>
+ <property name="valign">center</property>
+ <property name="action-name">win.goto-user-location</property>
+ <property name="tooltip-text" translatable="yes" comments="Translators: This is a tooltip">Go to
current location</property>
+ <style>
+ <class name="image-button"/>
+ </style>
+ <child>
+ <object class="GtkImage" id="track-user-button-image">
+ <property name="visible">True</property>
+ <property name="icon-size">1</property>
+ <property name="icon-name">find-location-symbolic</property>
+ </object>
+ </child>
+ </object>
+ <packing>
+ <property name="pack-type">start</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GtkMenuButton" id="layersButton">
+ <property name="visible">True</property>
+ <property name="can-focus">True</property>
+ <property name="valign">center</property>
+ <property name="tooltip-text" translatable="yes" comments="Translators: This is a tooltip">Choose
map type</property>
+ <style>
+ <class name="image-button"/>
+ </style>
+ <child>
+ <object class="GtkImage" id="layers-button-image">
+ <property name="visible">True</property>
+ <property name="icon-size">1</property>
+ <property name="icon-name">layers-button-symbolic</property>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="GtkBox">
+ <property name="visible">True</property>
+ <style>
+ <class name="linked"/>
+ </style>
+ <child>
+ <object class="GtkButton">
+ <property name="visible">True</property>
+ <property name="can-focus">True</property>
+ <property name="valign">center</property>
+ <property name="action-name">win.zoom-out</property>
+ <property name="tooltip-text" translatable="yes" comments="Translators: This is a tooltip">Zoom
out</property>
+ <child>
+ <object class="GtkImage">
+ <property name="visible">True</property>
+ <property name="icon-size">1</property>
+ <property name="icon-name">zoom-out-symbolic</property>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="GtkButton">
+ <property name="visible">True</property>
+ <property name="can-focus">True</property>
+ <property name="valign">center</property>
+ <property name="action-name">win.zoom-in</property>
+ <property name="tooltip-text" translatable="yes" comments="Translators: This is a tooltip">Zoom
in</property>
+ <child>
+ <object class="GtkImage">
+ <property name="visible">True</property>
+ <property name="icon-size">1</property>
+ <property name="icon-name">zoom-in-symbolic</property>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
+ </template>
+</interface>
diff --git a/data/ui/headerbar-right.ui b/data/ui/headerbar-right.ui
new file mode 100644
index 00000000..e2178a8a
--- /dev/null
+++ b/data/ui/headerbar-right.ui
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated with glade 3.22.0 -->
+<interface>
+ <requires lib="gtk+" version="3.22"/>
+ <template class="Gjs_HeaderBarRight" parent="GtkBox">
+ <property name="visible">True</property>
+ <property name="no-show-all">True</property>
+ <property name="can_focus">False</property>
+ <property name="spacing">6</property>
+ <child>
+ <object class="GtkToggleButton" id="toggleSidebarButton">
+ <property name="visible">True</property>
+ <property name="can-focus">True</property>
+ <property name="valign">center</property>
+ <property name="action-name">win.toggle-sidebar</property>
+ <property name="tooltip-text" translatable="yes" comments="Translators: This is a tooltip">Toggle
route planner</property>
+ <style>
+ <class name="image-button"/>
+ </style>
+ <child>
+ <object class="GtkImage" id="toggle-sidebar-button-image">
+ <property name="visible">True</property>
+ <property name="icon-size">1</property>
+ <property name="icon-name">route-button-symbolic</property>
+ </object>
+ </child>
+ </object>
+ <packing>
+ <property name="pack-type">end</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GtkMenuButton" id="favoritesButton">
+ <property name="visible">True</property>
+ <property name="can-focus">True</property>
+ <property name="valign">center</property>
+ <property name="tooltip-text" translatable="yes" comments="Translators: This is a tooltip">Toggle
favorites</property>
+ <style>
+ <class name="image-button"/>
+ </style>
+ <child>
+ <object class="GtkImage" id="favorites-button-image">
+ <property name="visible">True</property>
+ <property name="icon-size">1</property>
+ <property name="icon-name">starred-symbolic</property>
+ </object>
+ </child>
+ </object>
+ <packing>
+ <property name="pack-type">end</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GtkButton" id="printRouteButton">
+ <property name="name">print-route</property>
+ <property name="can-focus">True</property>
+ <property name="tooltip-text" translatable="yes" comments="Translators: This is a tooltip">Print
Route</property>
+ <property name="action-name">win.print-route</property>
+ <property name="valign">center</property>
+ <style>
+ <class name="image-button"/>
+ </style>
+ <child>
+ <object class="GtkImage" id="print-route-button-image">
+ <property name="visible">True</property>
+ <property name="icon-name">document-print-symbolic</property>
+ </object>
+ </child>
+ </object>
+ <packing>
+ <property name="pack-type">end</property>
+ </packing>
+ </child>
+ </template>
+</interface>
diff --git a/data/ui/main-window.ui b/data/ui/main-window.ui
index 6abf9807..a1561b32 100644
--- a/data/ui/main-window.ui
+++ b/data/ui/main-window.ui
@@ -36,86 +36,6 @@
<style>
<class name="titlebar"/>
</style>
- <child>
- <object class="GtkButton" id="gotoUserLocationButton">
- <property name="visible">True</property>
- <property name="can-focus">True</property>
- <property name="valign">center</property>
- <property name="action-name">win.goto-user-location</property>
- <property name="tooltip-text" translatable="yes" comments="Translators: This is a tooltip">Go to
current location</property>
- <style>
- <class name="image-button"/>
- </style>
- <child>
- <object class="GtkImage" id="track-user-button-image">
- <property name="visible">True</property>
- <property name="icon-size">1</property>
- <property name="icon-name">find-location-symbolic</property>
- </object>
- </child>
- </object>
- <packing>
- <property name="pack-type">start</property>
- </packing>
- </child>
- <child>
- <object class="GtkMenuButton" id="layersButton">
- <property name="visible">True</property>
- <property name="can-focus">True</property>
- <property name="valign">center</property>
- <property name="tooltip-text" translatable="yes" comments="Translators: This is a
tooltip">Choose map type</property>
- <style>
- <class name="image-button"/>
- </style>
- <child>
- <object class="GtkImage" id="layers-button-image">
- <property name="visible">True</property>
- <property name="icon-size">1</property>
- <property name="icon-name">layers-button-symbolic</property>
- </object>
- </child>
- </object>
- </child>
- <child>
- <object class="GtkBox">
- <property name="visible">True</property>
- <style>
- <class name="linked"/>
- </style>
- <child>
- <object class="GtkButton">
- <property name="visible">True</property>
- <property name="can-focus">True</property>
- <property name="valign">center</property>
- <property name="action-name">win.zoom-out</property>
- <property name="tooltip-text" translatable="yes" comments="Translators: This is a
tooltip">Zoom out</property>
- <child>
- <object class="GtkImage">
- <property name="visible">True</property>
- <property name="icon-size">1</property>
- <property name="icon-name">zoom-out-symbolic</property>
- </object>
- </child>
- </object>
- </child>
- <child>
- <object class="GtkButton">
- <property name="visible">True</property>
- <property name="can-focus">True</property>
- <property name="valign">center</property>
- <property name="action-name">win.zoom-in</property>
- <property name="tooltip-text" translatable="yes" comments="Translators: This is a
tooltip">Zoom in</property>
- <child>
- <object class="GtkImage">
- <property name="visible">True</property>
- <property name="icon-size">1</property>
- <property name="icon-name">zoom-in-symbolic</property>
- </object>
- </child>
- </object>
- </child>
- </object>
- </child>
<child>
<object class="GtkMenuButton">
<property name="visible">True</property>
@@ -137,70 +57,6 @@
<property name="pack-type">end</property>
</packing>
</child>
- <child>
- <object class="GtkToggleButton" id="toggleSidebarButton">
- <property name="visible">True</property>
- <property name="can-focus">True</property>
- <property name="valign">center</property>
- <property name="action-name">win.toggle-sidebar</property>
- <property name="tooltip-text" translatable="yes" comments="Translators: This is a
tooltip">Toggle route planner</property>
- <style>
- <class name="image-button"/>
- </style>
- <child>
- <object class="GtkImage" id="toggle-sidebar-button-image">
- <property name="visible">True</property>
- <property name="icon-size">1</property>
- <property name="icon-name">route-button-symbolic</property>
- </object>
- </child>
- </object>
- <packing>
- <property name="pack-type">end</property>
- </packing>
- </child>
- <child>
- <object class="GtkMenuButton" id="favoritesButton">
- <property name="visible">True</property>
- <property name="can-focus">True</property>
- <property name="valign">center</property>
- <property name="tooltip-text" translatable="yes" comments="Translators: This is a
tooltip">Toggle favorites</property>
- <style>
- <class name="image-button"/>
- </style>
- <child>
- <object class="GtkImage" id="favorites-button-image">
- <property name="visible">True</property>
- <property name="icon-size">1</property>
- <property name="icon-name">starred-symbolic</property>
- </object>
- </child>
- </object>
- <packing>
- <property name="pack-type">end</property>
- </packing>
- </child>
- <child>
- <object class="GtkButton" id="printRouteButton">
- <property name="name">print-route</property>
- <property name="can-focus">True</property>
- <property name="tooltip-text" translatable="yes" comments="Translators: This is a tooltip">Print
Route</property>
- <property name="action-name">win.print-route</property>
- <property name="valign">center</property>
- <style>
- <class name="image-button"/>
- </style>
- <child>
- <object class="GtkImage" id="print-route-button-image">
- <property name="visible">True</property>
- <property name="icon-name">document-print-symbolic</property>
- </object>
- </child>
- </object>
- <packing>
- <property name="pack-type">end</property>
- </packing>
- </child>
</object>
</child>
<child>
diff --git a/src/headerBar.js b/src/headerBar.js
new file mode 100644
index 00000000..fed6569c
--- /dev/null
+++ b/src/headerBar.js
@@ -0,0 +1,95 @@
+/* -*- 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, see <http://www.gnu.org/licenses/>.
+ *
+ * Author: Cosimo Cecchi <cosimoc redhat com>
+ * Zeeshan Ali (Khattak) <zeeshanak gnome org>
+ */
+
+const GObject = imports.gi.GObject;
+const Gtk = imports.gi.Gtk;
+
+const FavoritesPopover = imports.favoritesPopover;
+const LayersPopover = imports.layersPopover;
+const MapView = imports.mapView;
+
+var HeaderBarLeft = GObject.registerClass({
+ Template: 'resource:///org/gnome/Maps/ui/headerbar-left.ui',
+ InternalChildren: [ 'layersButton' ]
+}, class HeaderBarLeft extends Gtk.Box {
+ _init(params) {
+ this._application = params.application;
+ delete params.application;
+
+ this._mapView = params.mapView;
+ delete params.mapView;
+
+ super._init(params);
+
+ this._layersPopover = new LayersPopover.LayersPopover({
+ mapView: this._mapView
+ });
+ this._layersButton.popover = this._layersPopover;
+
+ this._application.connect('notify::connected', () => {
+ let app = this._application;
+ this._layersButton.sensitive = app.connected;
+ });
+ }
+
+ popdownLayersPopover() {
+ this._layersPopover.popdown();
+ }
+});
+
+var HeaderBarRight = GObject.registerClass({
+ Template: 'resource:///org/gnome/Maps/ui/headerbar-right.ui',
+ InternalChildren: [ 'toggleSidebarButton',
+ 'favoritesButton',
+ 'printRouteButton' ]
+}, class HeaderBarRight extends Gtk.Box {
+ _init(params) {
+ this._application = params.application;
+ delete params.application;
+
+ this._mapView = params.mapView;
+ delete params.mapView;
+
+ super._init(params);
+
+ this._favoritesButton.popover = new FavoritesPopover.FavoritesPopover({
+ mapView: this._mapView
+ });
+ let favoritesPopover = this._favoritesButton.popover;
+ this._favoritesButton.sensitive = favoritesPopover.rows > 0;
+ favoritesPopover.connect('notify::rows', () => {
+ this._favoritesButton.sensitive = favoritesPopover.rows > 0;
+ });
+
+ this._mapView.bind_property('routeShowing', this._printRouteButton,
+ 'visible', GObject.BindingFlags.DEFAULT);
+
+ this._application.connect('notify::connected', () => {
+ let app = this._application;
+
+ this._toggleSidebarButton.sensitive = app.connected;
+ this._favoritesButton.sensitive = (app.connected &&
+ favoritesPopover.rows > 0);
+ this._printRouteButton.sensitive = app.connected;
+ });
+ }
+});
diff --git a/src/layersPopover.js b/src/layersPopover.js
index 45664823..118cbdc1 100644
--- a/src/layersPopover.js
+++ b/src/layersPopover.js
@@ -108,11 +108,15 @@ var LayersPopover = GObject.registerClass({
// disable the map type switch buttons if aerial is unavailable
if (Service.getService().tiles.aerial) {
this._streetLayerButton.connect('clicked', () => {
- this._mapView.setMapType(MapView.MapType.STREET);
+ if (this._streetLayerButton.active) {
+ this._mapView.setMapType(MapView.MapType.STREET);
+ }
});
this._aerialLayerButton.connect('clicked', () => {
- this._mapView.setMapType(MapView.MapType.AERIAL);
+ if (this._aerialLayerButton.active) {
+ this._mapView.setMapType(MapView.MapType.AERIAL);
+ }
});
this._mapView.view.connect("notify::zoom-level",
@@ -127,6 +131,9 @@ var LayersPopover = GObject.registerClass({
}
this.setMapType(this._mapView.getMapType());
+ this._mapView.connect("map-type-changed", (_mapView, type) => {
+ this.setMapType(type);
+ });
}
_setLayerPreviews() {
diff --git a/src/mainWindow.js b/src/mainWindow.js
index 3536b17a..9f95605b 100644
--- a/src/mainWindow.js
+++ b/src/mainWindow.js
@@ -36,7 +36,7 @@ const ExportViewDialog = imports.exportViewDialog;
const FavoritesPopover = imports.favoritesPopover;
const Geoclue = imports.geoclue;
const GeocodeFactory = imports.geocode;
-const LayersPopover = imports.layersPopover;
+const HeaderBar = imports.headerBar;
const LocationServiceDialog = imports.locationServiceDialog;
const MapView = imports.mapView;
const PlaceEntry = imports.placeEntry;
@@ -82,11 +82,7 @@ var MainWindow = GObject.registerClass({
'grid',
'mainStack',
'mainGrid',
- 'noNetworkView',
- 'toggleSidebarButton',
- 'layersButton',
- 'favoritesButton',
- 'printRouteButton' ]
+ 'noNetworkView' ]
}, class MainWindow extends Gtk.ApplicationWindow {
get mapView() {
@@ -112,13 +108,6 @@ var MainWindow = GObject.registerClass({
this._contextMenu = new ContextMenu.ContextMenu({ mapView: this._mapView,
mainWindow: this });
- this.layersPopover = new LayersPopover.LayersPopover({
- mapView: this._mapView
- });
- this._layersButton.popover = this.layersPopover;
- this._favoritesButton.popover = new FavoritesPopover.FavoritesPopover({ mapView: this._mapView });
-
-
this._initHeaderbar();
this._initActions();
this._initSignals();
@@ -163,9 +152,6 @@ var MainWindow = GObject.registerClass({
let sidebar = new Sidebar.Sidebar(this._mapView);
Application.routeQuery.connect('notify', () => this._setRevealSidebar(true));
- this._toggleSidebarButton.bind_property('active',
- this._mapView, 'routingOpen',
- GObject.BindingFlags.BIDIRECTIONAL);
this.application.bind_property('connected',
sidebar, 'visible',
GObject.BindingFlags.DEFAULT);
@@ -339,17 +325,20 @@ var MainWindow = GObject.registerClass({
}
_initHeaderbar() {
- this._placeEntry = this._createPlaceEntry();
- this._headerBar.custom_title = this._placeEntry;
+ this._headerBarLeft = new HeaderBar.HeaderBarLeft({
+ mapView: this._mapView,
+ application: this.application
+ });
+ this._headerBar.pack_start(this._headerBarLeft);
- let favoritesPopover = this._favoritesButton.popover;
- this._favoritesButton.sensitive = favoritesPopover.rows > 0;
- favoritesPopover.connect('notify::rows', () => {
- this._favoritesButton.sensitive = favoritesPopover.rows > 0;
+ this._headerBarRight = new HeaderBar.HeaderBarRight({
+ mapView: this._mapView,
+ application: this.application
});
+ this._headerBar.pack_end(this._headerBarRight);
- this._mapView.bind_property('routeShowing', this._printRouteButton,
- 'visible', GObject.BindingFlags.DEFAULT);
+ this._placeEntry = this._createPlaceEntry();
+ this._headerBar.custom_title = this._placeEntry;
Application.geoclue.connect('notify::state',
this._updateLocationSensitivity.bind(this));
@@ -357,12 +346,7 @@ var MainWindow = GObject.registerClass({
let app = this.application;
this._updateLocationSensitivity();
- this._layersButton.sensitive = app.connected;
- this._toggleSidebarButton.sensitive = app.connected;
- this._favoritesButton.sensitive = (app.connected &&
- favoritesPopover.rows > 0);
this._placeEntry.sensitive = app.connected;
- this._printRouteButton.sensitive = app.connected;
});
}
@@ -513,14 +497,12 @@ var MainWindow = GObject.registerClass({
_onStreetViewActivate() {
this._mapView.setMapType(MapView.MapType.STREET);
- this.layersPopover.setMapType(MapView.MapType.STREET);
}
_onAerialViewActivate() {
// don't attempt to switch to aerial if we don't have tiles for it
if (Service.getService().tiles.aerial) {
this._mapView.setMapType(MapView.MapType.AERIAL);
- this.layersPopover.setMapType(MapView.MapType.AERIAL);
}
}
@@ -637,7 +619,7 @@ var MainWindow = GObject.registerClass({
this._fileChooser.connect('response', (widget, response) => {
if (response === Gtk.ResponseType.ACCEPT) {
this._mapView.openShapeLayers(this._fileChooser.get_files());
- this.layersPopover.popdown();
+ this._headerBarLeft.popdownLayersPopover();
}
this._fileChooser.destroy();
});
diff --git a/src/mapView.js b/src/mapView.js
index feedf2c2..6183b164 100644
--- a/src/mapView.js
+++ b/src/mapView.js
@@ -109,7 +109,8 @@ var MapView = GObject.registerClass({
'going-to-user-location': {},
'gone-to-user-location': {},
'view-moved': {},
- 'marker-selected': { param_types: [Champlain.Marker] }
+ 'marker-selected': { param_types: [Champlain.Marker] },
+ 'map-type-changed': { param_types: [GObject.TYPE_STRING] }
},
}, class MapView extends GtkChamplain.Embed {
@@ -356,6 +357,8 @@ var MapView = GObject.registerClass({
}
overlay_sources.forEach((source) => this.view.add_overlay_source(source, 255));
+
+ this.emit("map-type-changed", mapType);
}
toggleScale() {
diff --git a/src/org.gnome.Maps.src.gresource.xml b/src/org.gnome.Maps.src.gresource.xml
index 961ac33f..8ecc6e9c 100644
--- a/src/org.gnome.Maps.src.gresource.xml
+++ b/src/org.gnome.Maps.src.gresource.xml
@@ -25,6 +25,7 @@
<file>graphHopper.js</file>
<file>graphHopperGeocode.js</file>
<file>graphHopperTransit.js</file>
+ <file>headerBar.js</file>
<file>hvt.js</file>
<file>http.js</file>
<file>instructionRow.js</file>
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
