[gnome-maps] mapBubble: Design refinements
- From: Marcus Lundblad <mlundblad src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-maps] mapBubble: Design refinements
- Date: Sun, 15 Nov 2020 21:43:12 +0000 (UTC)
commit d2340b8c1b89e32bffc6507a84f075cce4cb3b30
Author: James Westman <james flyingpimonster net>
Date: Fri Sep 11 21:11:58 2020 -0500
mapBubble: Design refinements
Iterating on the map bubble redesign based on feedback from designers. Also,
some bug fixes. See comments on !108.
Also, fix a bug where map bubble titles didn't wrap, so they were sometimes
way too wide.
data/org.gnome.Maps.data.gresource.xml | 1 -
data/ui/map-bubble.ui | 233 +++++++++++++++++++--------------
data/ui/place-bubble.ui | 50 -------
data/ui/user-location-bubble.ui | 42 ++----
po/POTFILES.in | 1 -
src/mapBubble.js | 56 ++++++++
src/placeBubble.js | 61 +--------
src/userLocationBubble.js | 4 +-
8 files changed, 209 insertions(+), 239 deletions(-)
---
diff --git a/data/org.gnome.Maps.data.gresource.xml b/data/org.gnome.Maps.data.gresource.xml
index 749c12af..789866ce 100644
--- a/data/org.gnome.Maps.data.gresource.xml
+++ b/data/org.gnome.Maps.data.gresource.xml
@@ -22,7 +22,6 @@
<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-bubble.ui</file>
<file preprocess="xml-stripblanks">ui/place-entry.ui</file>
<file preprocess="xml-stripblanks">ui/place-list-row.ui</file>
<file preprocess="xml-stripblanks">ui/place-popover.ui</file>
diff --git a/data/ui/map-bubble.ui b/data/ui/map-bubble.ui
index d64d00b1..34024ec7 100644
--- a/data/ui/map-bubble.ui
+++ b/data/ui/map-bubble.ui
@@ -25,133 +25,174 @@
</object>
</child>
<child>
- <object class="GtkGrid" id="bubble-content-area">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="margin-top">12</property>
- <property name="margin-bottom">12</property>
- <property name="margin-start">12</property>
- <property name="margin-end">12</property>
- </object>
- </child>
- <child>
- <object class="GtkBox" id="bubble-button-area">
+ <object class="GtkBox">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="orientation">horizontal</property>
- <property name="spacing">6</property>
- <property name="margin-bottom">12</property>
- <property name="margin-start">12</property>
- <property name="margin-end">12</property>
+ <property name="orientation">vertical</property>
+ <property name="margin">18</property>
+ <property name="spacing">12</property>
<child>
- <object class="GtkButton" id="bubble-route-button">
- <property name="name">bubble-route-button</property>
- <property name="visible">False</property>
- <property name="can_focus">True</property>
- <property name="receives_default">False</property>
- <property name="tooltip-text" translatable="yes" comments="Translators: This is a
tooltip">Add to new route</property>
+ <object class="GtkBox">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="orientation">horizontal</property>
+ <property name="spacing">12</property>
+ <child>
+ <object class="HdyAvatar" id="contact-avatar">
+ <property name="visible">False</property>
+ <property name="can_focus">False</property>
+ <property name="show_initials">True</property>
+ <property name="size">32</property>
+ </object>
+ </child>
<child>
- <object class="GtkBox">
+ <object class="GtkLabel" id="label-title">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="orientation">horizontal</property>
- <property name="spacing">6</property>
+ <property name="halign">start</property>
+ <property name="expand">True</property>
+ <property name="wrap">True</property>
+ <property name="max_width_chars">30</property>
+ <property name="xalign">0</property>
+ <style>
+ <class name="title-2"/>
+ </style>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel" id="address-label">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="halign">start</property>
+ <property name="xalign">0</property>
+ <property name="use_markup">True</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkBox" id="bubble-button-area">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="orientation">horizontal</property>
+ <property name="spacing">6</property>
+ <child>
+ <object class="GtkButton" id="bubble-route-button">
+ <property name="name">bubble-route-button</property>
+ <property name="visible">False</property>
+ <property name="can_focus">True</property>
+ <property name="receives_default">False</property>
+ <property name="tooltip-text" translatable="yes" comments="Translators: This is a
tooltip">Add to new route</property>
<child>
- <object class="GtkImage">
+ <object class="GtkBox">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="icon-name">route-button-symbolic</property>
- <property name="pixel_size">16</property>
+ <property name="orientation">horizontal</property>
+ <property name="spacing">6</property>
+ <child>
+ <object class="GtkImage">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="icon-name">route-button-symbolic</property>
+ <property name="pixel_size">16</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="label" translatable="yes" comments="Translators: This is the
button to find a route to a place">Directions</property>
+ </object>
+ </child>
</object>
</child>
+ <style>
+ <class name="suggested-action"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkButton" id="bubble-send-to-button">
+ <property name="name">bubble-send-to-button</property>
+ <property name="visible">False</property>
+ <property name="can_focus">True</property>
+ <property name="receives_default">False</property>
+ <property name="tooltip-text" translatable="yes" comments="Translators: This is a
tooltip">Share location</property>
<child>
- <object class="GtkLabel">
+ <object class="GtkImage" id="bubble-send-to-button-image">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="label" translatable="yes" comments="Translators: This is the button
to find a route to a place">Directions</property>
+ <property name="icon-name">send-to-symbolic</property>
+ <property name="pixel_size">16</property>
</object>
</child>
</object>
+ <packing>
+ <property name="pack-type">end</property>
+ </packing>
</child>
- <style>
- <class name="suggested-action"/>
- </style>
- </object>
- </child>
- <child>
- <object class="GtkButton" id="bubble-send-to-button">
- <property name="name">bubble-send-to-button</property>
- <property name="visible">False</property>
- <property name="can_focus">True</property>
- <property name="receives_default">False</property>
- <property name="tooltip-text" translatable="yes" comments="Translators: This is a
tooltip">Share location</property>
<child>
- <object class="GtkImage" id="bubble-send-to-button-image">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="icon-name">send-to-symbolic</property>
- <property name="pixel_size">16</property>
+ <object class="GtkButton" id="bubble-favorite-button">
+ <property name="name">bubble-favorite-button</property>
+ <property name="visible">False</property>
+ <property name="can_focus">True</property>
+ <property name="receives_default">False</property>
+ <property name="tooltip-text" translatable="yes" comments="Translators: This is a
tooltip">Mark as favorite</property>
+ <child>
+ <object class="GtkImage" id="bubble-favorite-button-image">
+ <property name="name">bubble-favorite-button-image</property>
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="icon-name">starred-symbolic</property>
+ <property name="pixel_size">16</property>
+ </object>
+ </child>
</object>
+ <packing>
+ <property name="pack-type">end</property>
+ </packing>
</child>
- </object>
- <packing>
- <property name="pack-type">end</property>
- </packing>
- </child>
- <child>
- <object class="GtkButton" id="bubble-favorite-button">
- <property name="name">bubble-favorite-button</property>
- <property name="visible">False</property>
- <property name="can_focus">True</property>
- <property name="receives_default">False</property>
- <property name="tooltip-text" translatable="yes" comments="Translators: This is a
tooltip">Mark as favorite</property>
<child>
- <object class="GtkImage" id="bubble-favorite-button-image">
- <property name="name">bubble-favorite-button-image</property>
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="icon-name">starred-symbolic</property>
- <property name="pixel_size">16</property>
+ <object class="GtkButton" id="bubble-check-in-button">
+ <property name="label" translatable="yes" comments="Translators: Check in is used as a
verb">C_heck in</property>
+ <property name="visible">False</property>
+ <property name="can_focus">True</property>
+ <property name="receives_default">False</property>
+ <property name="use_underline">True</property>
+ <property name="tooltip-text" translatable="yes" comments="Translators: This is a
tooltip">Check in here</property>
</object>
+ <packing>
+ <property name="pack-type">end</property>
+ </packing>
</child>
- </object>
- <packing>
- <property name="pack-type">end</property>
- </packing>
- </child>
- <child>
- <object class="GtkButton" id="bubble-check-in-button">
- <property name="label" translatable="yes" comments="Translators: Check in is used as a
verb">C_heck in</property>
- <property name="visible">False</property>
- <property name="can_focus">True</property>
- <property name="receives_default">False</property>
- <property name="use_underline">True</property>
- <property name="tooltip-text" translatable="yes" comments="Translators: This is a
tooltip">Check in here</property>
- </object>
- <packing>
- <property name="pack-type">end</property>
- </packing>
- </child>
- <child>
- <object class="GtkButton" id="bubble-edit-button">
- <property name="visible">False</property>
- <property name="can_focus">True</property>
- <property name="tooltip-text" translatable="yes" comments="Translators: This is a
tooltip">Edit on OpenStreetMap</property>
<child>
- <object class="GtkImage">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="icon-name">document-edit-symbolic</property>
- <property name="pixel_size">16</property>
+ <object class="GtkButton" id="bubble-edit-button">
+ <property name="visible">False</property>
+ <property name="can_focus">True</property>
+ <property name="tooltip-text" translatable="yes" comments="Translators: This is a
tooltip">Edit on OpenStreetMap</property>
+ <child>
+ <object class="GtkImage">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="icon-name">document-edit-symbolic</property>
+ <property name="pixel_size">16</property>
+ </object>
+ </child>
</object>
+ <packing>
+ <property name="pack-type">end</property>
+ </packing>
</child>
</object>
- <packing>
- <property name="pack-type">end</property>
- </packing>
</child>
</object>
</child>
+ <child>
+ <object class="GtkGrid" id="bubble-content-area">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ </object>
+ </child>
</object>
</child>
<child>
diff --git a/data/ui/user-location-bubble.ui b/data/ui/user-location-bubble.ui
index 58007df5..219f20ad 100644
--- a/data/ui/user-location-bubble.ui
+++ b/data/ui/user-location-bubble.ui
@@ -2,54 +2,28 @@
<!-- Generated with glade 3.18.3 -->
<interface>
<requires lib="gtk+" version="3.12"/>
- <object class="GtkGrid" id="grid-content">
+ <object class="GtkBox" id="content">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="column-spacing">12</property>
+ <property name="orientation">vertical</property>
+ <property name="spacing">6</property>
+ <property name="margin">18</property>
+ <property name="margin-top">0</property>
<child>
- <object class="GtkLabel" id="label-title">
+ <object class="GtkLabel" id="label-coordinates">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">start</property>
- <property name="label" translatable="yes">Current location</property>
- <style>
- <class name="bubble-title"/>
- </style>
+ <property name="margin_top">3</property>
+ <property name="wrap">True</property>
</object>
- <packing>
- <property name="left_attach">0</property>
- <property name="top_attach">0</property>
- </packing>
</child>
<child>
<object class="GtkLabel" id="label-accuracy">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">start</property>
- <style>
- <class name="bubble-subtitle"/>
- </style>
- </object>
- <packing>
- <property name="left_attach">0</property>
- <property name="top_attach">1</property>
- </packing>
- </child>
- <child>
- <object class="GtkLabel" id="label-coordinates">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="halign">start</property>
- <property name="margin_top">3</property>
- <property name="wrap">True</property>
- <style>
- <class name="bubble-subtitle"/>
- </style>
</object>
- <packing>
- <property name="left_attach">0</property>
- <property name="top_attach">2</property>
- </packing>
</child>
</object>
</interface>
diff --git a/po/POTFILES.in b/po/POTFILES.in
index 676a7a6f..c83a4eeb 100644
--- a/po/POTFILES.in
+++ b/po/POTFILES.in
@@ -16,7 +16,6 @@ data/ui/map-bubble.ui
data/ui/osm-account-dialog.ui
data/ui/osm-edit-address.ui
data/ui/osm-edit-dialog.ui
-data/ui/place-bubble.ui
data/ui/place-popover.ui
data/ui/route-entry.ui
data/ui/send-to-dialog.ui
diff --git a/src/mapBubble.js b/src/mapBubble.js
index f99bf9fb..b1c018a7 100644
--- a/src/mapBubble.js
+++ b/src/mapBubble.js
@@ -26,10 +26,12 @@ const Gtk = imports.gi.Gtk;
const Mainloop = imports.mainloop;
const Application = imports.application;
+const ContactPlace = imports.contactPlace;
const OSMAccountDialog = imports.osmAccountDialog;
const OSMEditDialog = imports.osmEditDialog;
const OSMUtils = imports.osmUtils;
const Place = imports.place;
+const PlaceFormatter = imports.placeFormatter;
const PlaceStore = imports.placeStore;
const SendToDialog = imports.sendToDialog;
const Utils = imports.utils;
@@ -73,6 +75,9 @@ class MapBubble extends Gtk.Popover {
'bubble-spinner',
'bubble-thumbnail',
'thumbnail-separator',
+ 'label-title',
+ 'contact-avatar',
+ 'address-label',
'bubble-main-stack',
'bubble-content-area',
'bubble-button-area',
@@ -82,12 +87,15 @@ class MapBubble extends Gtk.Popover {
'bubble-check-in-button',
'bubble-edit-button',
'bubble-favorite-button-image']);
+ this._title = ui.labelTitle;
this._thumbnail = ui.bubbleThumbnail;
this._thumbnailSeparator = ui.thumbnailSeparator;
this._content = ui.bubbleContentArea;
this._mainStack = ui.bubbleMainStack;
this._spinner = ui.bubbleSpinner;
this._mainBox = ui.bubbleMainBox;
+ this._contactAvatar = ui.contactAvatar;
+ this._addressLabel = ui.addressLabel;
if (!buttonFlags)
ui.bubbleButtonArea.visible = false;
@@ -106,7 +114,17 @@ class MapBubble extends Gtk.Popover {
this.add(this._mainStack);
+ /* Set up contact avatar */
+ if (this.place instanceof ContactPlace.ContactPlace) {
+ this._contactAvatar.visible = true;
+ Utils.load_icon(this.place.icon, 32, (pixbuf) => {
+ this._contactAvatar.set_image_load_func(this._avatarImageLoadFunc.bind(this, pixbuf));
+ });
+ }
+
this.get_style_context().add_class("map-bubble");
+
+ this.updatePlaceDetails();
}
get place() {
@@ -137,6 +155,27 @@ class MapBubble extends Gtk.Popover {
this._spinner.active = val;
}
+ updatePlaceDetails() {
+ let place = this.place;
+ let formatter = new PlaceFormatter.PlaceFormatter(place);
+
+ let address = formatter.rows.map((row) => {
+ row = row.map(function(prop) {
+ return GLib.markup_escape_text(place[prop], -1);
+ });
+ return row.join(', ');
+ });
+ if (address.length > 0) {
+ this._addressLabel.label = address.join('\n');
+ this._addressLabel.show();
+ } else {
+ this._addressLabel.hide();
+ }
+
+ this._title.label = formatter.title;
+ this._contactAvatar.text = formatter.title;
+ }
+
_initFavoriteButton(button, image) {
let placeStore = Application.placeStore;
button.visible = true;
@@ -256,4 +295,21 @@ class MapBubble extends Gtk.Popover {
}
});
}
+
+ // Loads the HdyAvatar image for contact places
+ _avatarImageLoadFunc(pixbuf, size) {
+ let width = pixbuf.get_width();
+ let height = pixbuf.get_height();
+ let croppedThumbnail;
+
+ if (width > height) {
+ let x = (width - height) / 2;
+ croppedThumbnail = pixbuf.new_subpixbuf(x, 0, height, height);
+ } else {
+ let y = (height - width) / 2;
+ croppedThumbnail = pixbuf.new_subpixbuf(0, y, width, width);
+ }
+
+ return croppedThumbnail.scale_simple(size, size, GdkPixbuf.InterpType.BILINEAR);
+ }
});
diff --git a/src/placeBubble.js b/src/placeBubble.js
index e205cc0b..96495366 100644
--- a/src/placeBubble.js
+++ b/src/placeBubble.js
@@ -19,7 +19,6 @@
* Author: Damián Nohales <damiannohales gmail com>
*/
-const GdkPixbuf = imports.gi.GdkPixbuf;
const Geocode = imports.gi.GeocodeGlib;
const GLib = imports.gi.GLib;
const GObject = imports.gi.GObject;
@@ -32,7 +31,6 @@ const MapBubble = imports.mapBubble;
const Overpass = imports.overpass;
const Place = imports.place;
const PlaceBubbleImage = imports.placeBubbleImage;
-const PlaceFormatter = imports.placeFormatter;
const PlaceStore = imports.placeStore;
const Translations = imports.translations;
const Utils = imports.utils;
@@ -53,10 +51,6 @@ var PlaceBubble = GObject.registerClass({
}, class PlaceBubble extends MapBubble.MapBubble {
_init(params) {
- let ui = Utils.getUIObject('place-bubble', [ 'main-grid',
- 'place-details',
- 'contact-avatar',
- 'label-title']);
params.buttons = (MapBubble.Button.ROUTE |
MapBubble.Button.SEND_TO);
@@ -70,17 +64,9 @@ var PlaceBubble = GObject.registerClass({
this.loading = true;
- this._title = ui.labelTitle;
- this._contactAvatar = ui.contactAvatar;
- this._placeDetails = ui.placeDetails;
-
- /* Set up contact avatar */
- if (this.place instanceof ContactPlace.ContactPlace) {
- this._contactAvatar.visible = true;
- Utils.load_icon(this.place.icon, 32, (pixbuf) => {
- this._contactAvatar.set_image_load_func(this._avatarImageLoadFunc.bind(this, pixbuf));
- });
- }
+ this._placeDetails = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL,
+ visible: true});
+ this.content.add(this._placeDetails);
let overpass = new Overpass.Overpass();
@@ -105,7 +91,6 @@ var PlaceBubble = GObject.registerClass({
} else {
this._populate(this.place);
}
- this.content.add(ui.mainGrid);
}
_onInfoAdded() {
@@ -123,21 +108,9 @@ var PlaceBubble = GObject.registerClass({
return Format.vprintf('https://%s.wikipedia.org/wiki/%s', [ lang, article ]);
}
- _createContent(formatter, place) {
+ _createContent(place) {
let content = [];
- let address = formatter.rows.map((row) => {
- row = row.map(function(prop) {
- return GLib.markup_escape_text(place[prop], -1);
- });
- return row.join(', ');
- });
- if (address.length > 0) {
- content.push({ label: _("Address"),
- icon: 'map-marker-symbolic',
- info: address.join('\n') });
- }
-
if (place.website) {
content.push({ label: _("Website"),
icon: 'web-browser-symbolic',
@@ -359,21 +332,17 @@ var PlaceBubble = GObject.registerClass({
}
_populate(place) {
- let formatter = new PlaceFormatter.PlaceFormatter(place);
-
// refresh place view
this._clearView();
- let content = this._createContent(formatter, place);
+ let content = this._createContent(place);
this._attachContent(content);
- this._contactAvatar.text = formatter.title;
- this._title.label = formatter.title;
-
if (place.wiki) {
this._requestWikipedia(place.wiki);
}
+ this.updatePlaceDetails();
this.loading = false;
}
@@ -413,22 +382,4 @@ var PlaceBubble = GObject.registerClass({
_clearView() {
this._placeDetails.get_children().forEach((child) => child.destroy());
}
-
- // Loads the HdyAvatar image for contact places
- _avatarImageLoadFunc(pixbuf, size) {
- let width = pixbuf.get_width();
- let height = pixbuf.get_height();
- let croppedThumbnail;
-
- if (width > height) {
- let x = (width - height) / 2;
- croppedThumbnail = pixbuf.new_subpixbuf(x, 0, height, height);
- } else {
- let y = (height - width) / 2;
- croppedThumbnail = pixbuf.new_subpixbuf(0, y, width, width);
- }
-
- return croppedThumbnail.scale_simple(size, size, GdkPixbuf.InterpType.BILINEAR);
- }
-
});
diff --git a/src/userLocationBubble.js b/src/userLocationBubble.js
index 1f47129f..1450438e 100644
--- a/src/userLocationBubble.js
+++ b/src/userLocationBubble.js
@@ -30,7 +30,7 @@ var UserLocationBubble = GObject.registerClass(
class UserLocationBubble extends MapBubble.MapBubble {
_init(params) {
- this._ui = Utils.getUIObject('user-location-bubble', [ 'grid-content',
+ this._ui = Utils.getUIObject('user-location-bubble', [ 'content',
'label-accuracy',
'label-coordinates' ]);
params.buttons = MapBubble.Button.ROUTE |
@@ -42,7 +42,7 @@ class UserLocationBubble extends MapBubble.MapBubble {
super._init(params);
this.updateLocation();
- this.content.add(this._ui.gridContent);
+ this.content.add(this._ui.content);
}
updateLocation() {
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
