[gnome-maps] placeBar: Add PlaceBar for adaptive mode



commit 5c667b43db8f908bf20b5e23bab461c46f290686
Author: James Westman <james flyingpimonster net>
Date:   Tue Dec 22 17:18:48 2020 -0600

    placeBar: Add PlaceBar for adaptive mode
    
    Add PlaceBar, an action bar that replaces the place bubble when the window is
    in adaptive mode. The contents of the place bar are not implemented yet, but
    the logic to switch in and out of adaptive mode is.

 data/org.gnome.Maps.data.gresource.xml |  1 +
 data/ui/main-window.ui                 | 12 +++++-
 data/ui/place-bar.ui                   | 30 +++++++++++++++
 src/application.js                     | 14 ++++++-
 src/mainWindow.js                      | 15 +++++++-
 src/mapMarker.js                       | 39 +++++++++++++++----
 src/org.gnome.Maps.src.gresource.xml   |  1 +
 src/placeBar.js                        | 70 ++++++++++++++++++++++++++++++++++
 src/placeMarker.js                     |  8 +---
 src/userLocationMarker.js              |  6 +--
 10 files changed, 174 insertions(+), 22 deletions(-)
---
diff --git a/data/org.gnome.Maps.data.gresource.xml b/data/org.gnome.Maps.data.gresource.xml
index 1eb1e5e9..c579f009 100644
--- a/data/org.gnome.Maps.data.gresource.xml
+++ b/data/org.gnome.Maps.data.gresource.xml
@@ -22,6 +22,7 @@
     <file preprocess="xml-stripblanks">ui/osm-type-list-row.ui</file>
     <file preprocess="xml-stripblanks">ui/osm-type-search-entry.ui</file>
     <file preprocess="xml-stripblanks">ui/osm-type-popover.ui</file>
+    <file preprocess="xml-stripblanks">ui/place-bar.ui</file>
     <file preprocess="xml-stripblanks">ui/place-buttons.ui</file>
     <file preprocess="xml-stripblanks">ui/place-entry.ui</file>
     <file preprocess="xml-stripblanks">ui/place-list-row.ui</file>
diff --git a/data/ui/main-window.ui b/data/ui/main-window.ui
index cb884538..bc6d26c2 100644
--- a/data/ui/main-window.ui
+++ b/data/ui/main-window.ui
@@ -136,6 +136,16 @@
             </child>
           </object>
         </child>
+        <child>
+          <object class="Gjs_PlaceBar" id="placeBar">
+            <property name="visible">True</property>
+          </object>
+          <packing>
+            <property name="left-attach">0</property>
+            <property name="top-attach">1</property>
+            <property name="width">1</property>
+          </packing>
+        </child>
         <child>
           <object class="GtkRevealer" id="actionBarRevealer">
             <property name="visible">True</property>
@@ -149,7 +159,7 @@
           </object>
           <packing>
             <property name="left-attach">0</property>
-            <property name="top-attach">1</property>
+            <property name="top-attach">2</property>
             <property name="width">2</property>
           </packing>
         </child>
diff --git a/data/ui/place-bar.ui b/data/ui/place-bar.ui
new file mode 100644
index 00000000..a9c9d546
--- /dev/null
+++ b/data/ui/place-bar.ui
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <template class="Gjs_PlaceBar" parent="GtkRevealer">
+    <property name="visible">True</property>
+    <property name="transition_type">slide-up</property>
+    <property name="reveal_child">False</property>
+    <child>
+      <object class="GtkActionBar" id="actionbar">
+        <property name="visible">True</property>
+        <child>
+          <object class="GtkBox">
+            <property name="visible">True</property>
+            <property name="orientation">vertical</property>
+            <child>
+              <object class="GtkLabel" id="title">
+                <style>
+                  <class name="title-2"/>
+                </style>
+                <property name="visible">True</property>
+                <property name="label"></property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </template>
+</interface>
+
+
diff --git a/src/application.js b/src/application.js
index 24692af2..573bceef 100644
--- a/src/application.js
+++ b/src/application.js
@@ -22,6 +22,7 @@
 
 const GLib = imports.gi.GLib;
 const GObject = imports.gi.GObject;
+const Geocode = imports.gi.GeocodeGlib;
 const Gio = imports.gi.Gio;
 const Gtk = imports.gi.Gtk;
 const GtkClutter = imports.gi.GtkClutter;
@@ -64,7 +65,18 @@ var Application = GObject.registerClass({
                                                '',
                                                '',
                                                GObject.ParamFlags.READABLE |
-                                               GObject.ParamFlags.WRITABLE)
+                                               GObject.ParamFlags.WRITABLE),
+        'selected-place': GObject.ParamSpec.object('selected-place',
+                                                   'Selected Place',
+                                                   'The selected place',
+                                                   GObject.ParamFlags.READABLE |
+                                                   GObject.ParamFlags.WRITABLE,
+                                                   Geocode.Place),
+        'adaptive-mode': GObject.ParamSpec.boolean('adaptive-mode',
+                                                   'Adaptive Move',
+                                                   'Whether the main window is in adaptive (narrow) mode',
+                                                   GObject.ParamFlags.READABLE |
+                                                   GObject.ParamFlags.WRITABLE),
     },
 }, class Application extends Gtk.Application {
 
diff --git a/src/mainWindow.js b/src/mainWindow.js
index 4b057e4d..f00d2967 100644
--- a/src/mainWindow.js
+++ b/src/mainWindow.js
@@ -39,6 +39,7 @@ const GeocodeFactory = imports.geocode;
 const HeaderBar = imports.headerBar;
 const LocationServiceDialog = imports.locationServiceDialog;
 const MapView = imports.mapView;
+const PlaceBar = imports.placeBar;
 const PlaceEntry = imports.placeEntry;
 const PlaceStore = imports.placeStore;
 const PrintOperation = imports.printOperation;
@@ -84,7 +85,8 @@ var MainWindow = GObject.registerClass({
                         'mainGrid',
                         'noNetworkView',
                         'actionBar',
-                        'actionBarRevealer' ]
+                        'actionBarRevealer',
+                        'placeBar' ]
 }, class MainWindow extends Gtk.ApplicationWindow {
 
     get mapView() {
@@ -115,8 +117,9 @@ var MainWindow = GObject.registerClass({
         this._initSignals();
         this._restoreWindowGeometry();
         this._initDND();
+        this._initPlaceBar();
 
-        this._grid.attach(this._sidebar, 1, 0, 1, 1);
+        this._grid.attach(this._sidebar, 1, 0, 1, 2);
 
         this._grid.show_all();
 
@@ -160,6 +163,12 @@ var MainWindow = GObject.registerClass({
         return sidebar;
     }
 
+    _initPlaceBar() {
+        this.application.bind_property('selected-place',
+                                       this._placeBar, 'place',
+                                       GObject.BindingFlags.DEFAULT);
+    }
+
     _initDND() {
         this.drag_dest_set(Gtk.DestDefaults.DROP, null, 0);
         this.drag_dest_add_uri_targets();
@@ -371,12 +380,14 @@ var MainWindow = GObject.registerClass({
         this.connect('size-allocate', () => {
             let [width, height] = this.get_size();
             if (width < _ADAPTIVE_VIEW_WIDTH) {
+                this.application.adaptive_mode = true;
                 this._headerBarLeft.hide();
                 this._headerBarRight.hide();
                 this._actionBarRevealer.set_reveal_child(true);
                 this._placeEntry.set_margin_start(0);
                 this._placeEntry.set_margin_end(0);
             } else {
+                this.application.adaptive_mode = false;
                 this._headerBarLeft.show();
                 this._headerBarRight.show();
                 this._actionBarRevealer.set_reveal_child(false);
diff --git a/src/mapMarker.js b/src/mapMarker.js
index 49cf491c..fe2468bd 100644
--- a/src/mapMarker.js
+++ b/src/mapMarker.js
@@ -27,7 +27,9 @@ const GObject = imports.gi.GObject;
 const Gtk = imports.gi.Gtk;
 const Mainloop = imports.mainloop;
 
+const Application = imports.application;
 const MapWalker = imports.mapWalker;
+const PlaceBubble = imports.placeBubble;
 const Utils = imports.utils;
 
 var MapMarker = GObject.registerClass({
@@ -97,6 +99,8 @@ var MapMarker = GObject.registerClass({
             this.connect('notify::view-longitude', this._onViewUpdated.bind(this));
             this.connect('notify::view-zoom-level', this._onViewUpdated.bind(this));
         }
+
+        Application.application.connect('notify::adaptive-mode', this._onAdaptiveModeChanged.bind(this));
     }
 
     get surface() {
@@ -202,15 +206,19 @@ var MapMarker = GObject.registerClass({
     }
 
     get bubble() {
-        if (this._bubble === undefined)
-            this._bubble = this._createBubble();
+        if (this._bubble === undefined && this._hasBubble()) {
+            if (this._place.name) {
+                this._bubble = new PlaceBubble.PlaceBubble({ place: this._place,
+                                                             mapView: this._mapView });
+            }
+        }
 
         return this._bubble;
     }
 
-    _createBubble() {
+    _hasBubble() {
         // Markers has no associated bubble by default
-        return null;
+        return false;
     }
 
     _positionBubble(bubble) {
@@ -349,7 +357,7 @@ var MapMarker = GObject.registerClass({
     }
 
     showBubble() {
-        if (this.bubble && !this.bubble.visible && this._isInsideView()) {
+        if (this.bubble && !this.bubble.visible && this._isInsideView() && 
!Application.application.adaptive_mode) {
             this._initBubbleSignals();
             this.bubble.show();
             this._positionBubble(this.bubble);
@@ -384,9 +392,24 @@ var MapMarker = GObject.registerClass({
     }
 
     _onMarkerSelected() {
-        if (this.selected)
-            this.showBubble();
-        else
+        if (this.selected) {
+            if (this.bubble) {
+                this.showBubble();
+                Application.application.selected_place = this._place;
+            }
+        } else {
             this.hideBubble();
+            Application.application.selected_place = null;
+        }
+    }
+
+    _onAdaptiveModeChanged() {
+        if (this.selected) {
+            if (!Application.application.adaptive_mode) {
+                this.showBubble();
+            } else {
+                this.hideBubble();
+            }
+        }
     }
 });
diff --git a/src/org.gnome.Maps.src.gresource.xml b/src/org.gnome.Maps.src.gresource.xml
index 994b07ce..83927581 100644
--- a/src/org.gnome.Maps.src.gresource.xml
+++ b/src/org.gnome.Maps.src.gresource.xml
@@ -55,6 +55,7 @@
     <file>photonGeocode.js</file>
     <file>photonParser.js</file>
     <file>place.js</file>
+    <file>placeBar.js</file>
     <file>placeBubble.js</file>
     <file>placeBubbleImage.js</file>
     <file>placeButtons.js</file>
diff --git a/src/placeBar.js b/src/placeBar.js
new file mode 100644
index 00000000..7bc5677f
--- /dev/null
+++ b/src/placeBar.js
@@ -0,0 +1,70 @@
+/* -*- Mode: JS2; indent-tabs-mode: nil; js2-basic-offset: 4 -*- */
+/* vim: set et ts=4 sw=4: */
+/*
+ * Copyright (c) 2020 James Westman
+ *
+ * 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: James Westman <james flyingpimonster net>
+ */
+
+const Gdk = imports.gi.Gdk;
+const Geocode = imports.gi.GeocodeGlib;
+const GObject = imports.gi.GObject;
+const Gtk = imports.gi.Gtk;
+
+const Application = imports.application;
+const PlaceButtons = imports.placeButtons;
+const PlaceFormatter = imports.placeFormatter;
+
+var PlaceBar = GObject.registerClass({
+    Template: 'resource:///org/gnome/Maps/ui/place-bar.ui',
+    InternalChildren: [ 'actionbar',
+                        'title' ],
+    Properties: {
+        'place': GObject.ParamSpec.object('place',
+                                          'Place',
+                                          'The place to show information about',
+                                          GObject.ParamFlags.READABLE |
+                                          GObject.ParamFlags.WRITABLE,
+                                          Geocode.Place)
+    },
+}, class PlaceBar extends Gtk.Revealer {
+    _init(params) {
+        super._init(params);
+
+        Application.application.connect('notify::adaptive-mode', this._updateVisibility.bind(this));
+        this.connect('notify::place', this._updatePlace.bind(this));
+    }
+
+    _updatePlace() {
+        this._updateVisibility();
+
+        if (!this.place) {
+            return;
+        }
+
+        let formatter = new PlaceFormatter.PlaceFormatter(this.place);
+        this._title.label = formatter.title;
+
+    }
+
+    _updateVisibility() {
+        if (Application.application.adaptive_mode) {
+            this.reveal_child = (this.place != null);
+        } else {
+            this.reveal_child = false;
+        }
+    }
+});
diff --git a/src/placeMarker.js b/src/placeMarker.js
index 86e068c0..a7c8c201 100644
--- a/src/placeMarker.js
+++ b/src/placeMarker.js
@@ -38,11 +38,7 @@ class PlaceMarker extends MapMarker.MapMarker {
                  y: this.height - 3 };
     }
 
-    _createBubble() {
-        if (this.place.name) {
-            return new PlaceBubble.PlaceBubble({ place: this.place,
-                                                 mapView: this._mapView });
-        } else
-            return null;
+    _hasBubble() {
+        return true;
     }
 });
diff --git a/src/userLocationMarker.js b/src/userLocationMarker.js
index 21126a84..d0a56725 100644
--- a/src/userLocationMarker.js
+++ b/src/userLocationMarker.js
@@ -24,7 +24,6 @@ const Clutter = imports.gi.Clutter;
 const GObject = imports.gi.GObject;
 
 const MapMarker = imports.mapMarker;
-const PlaceBubble = imports.placeBubble;
 
 var AccuracyCircleMarker = GObject.registerClass(
 class AccuracyCirleMarker extends Champlain.Point {
@@ -90,9 +89,8 @@ class UserLocationMarker extends MapMarker.MapMarker {
                  y: Math.floor(this.height / 2) };
     }
 
-    _createBubble() {
-        return new PlaceBubble.PlaceBubble({ place: this.place,
-                                             mapView: this._mapView });
+    _hasBubble() {
+        return true;
     }
 
     addToLayer(layer) {


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