[gnome-maps/wip/jonasdn/mapbubbles: 2/2] Add expanded area to place bubble
- From: Jonas Danielsson <jonasdn src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-maps/wip/jonasdn/mapbubbles: 2/2] Add expanded area to place bubble
- Date: Sun, 31 Jan 2016 09:48:46 +0000 (UTC)
commit 2a26656ca8964f45cd2e90d6fdc94aee14d581fc
Author: Jonas Danielsson <jonas threetimestwo org>
Date: Sun Jan 31 10:43:04 2016 +0100
Add expanded area to place bubble
Trim the information shown by default and move extra
data to an expanded area.
https://bugzilla.gnome.org/show_bug.cgi?id=741423
data/ui/place-bubble.ui | 118 ++++++++++++++++++++++++++++++++++-------------
src/placeBubble.js | 93 ++++++++++++++++++++++++++-----------
2 files changed, 151 insertions(+), 60 deletions(-)
---
diff --git a/data/ui/place-bubble.ui b/data/ui/place-bubble.ui
index fa37801..5ed2ddc 100644
--- a/data/ui/place-bubble.ui
+++ b/data/ui/place-bubble.ui
@@ -16,54 +16,106 @@
<property name="can_focus">False</property>
<property name="column-spacing">5</property>
<child>
- <object class="GtkBox" id="box-content">
+ <object class="GtkBox">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="orientation">vertical</property>
- <style>
- <class name="bubble-content"/>
- </style>
<child>
- <object class="GtkLabel" id="label-title">
+ <object class="GtkGrid">
+ <property name="visible">True</property>
+ <property name="column-spacing">10</property>
+ <child>
+ <object class="GtkLabel" id="label-title">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="halign">start</property>
+ <property name="vexpand">True</property>
+ <style>
+ <class name="bubble-title"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkGrid">
+ <property name="margin-left">10</property>
+ <property name="visible">True</property>
+ <child>
+ <object class="GtkButton" id="expand-button">
+ <property name="visible">True</property>
+ <property name="can_focus">True</property>
+ <property name="valign">GTK_ALIGN_START</property>
+ <property name="halign">GTK_ALIGN_CENTER</property>
+ <child>
+ <object class="GtkImage">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="icon-name">pan-up-symbolic</property>
+ <property name="pixel_size">16</property>
+ </object>
+ </child>
+ <style>
+ <class name="image-button"/>
+ <class name="circular"/>
+ <class name="flat"/>
+ </style>
+ </object>
+ </child>
+ <child>
+ <object class="GtkButton" id="edit-button">
+ <property name="visible">True</property>
+ <property name="can_focus">True</property>
+ <property name="valign">GTK_ALIGN_START</property>
+ <property name="halign">GTK_ALIGN_CENTER</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>
+ <style>
+ <class name="image-button"/>
+ <class name="circular"/>
+ <class name="flat"/>
+ </style>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="GtkBox" id="box-content">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="halign">start</property>
- <property name="vexpand">True</property>
+ <property name="orientation">vertical</property>
<style>
- <class name="bubble-title"/>
+ <class name="bubble-content"/>
</style>
</object>
- <packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
- <property name="position">0</property>
- </packing>
</child>
- </object>
- <packing>
- <property name="left_attach">0</property>
- <property name="top_attach">0</property>
- </packing>
- </child>
- <child>
- <object class="GtkButton" id="edit-button">
- <property name="visible">True</property>
- <property name="can_focus">True</property>
- <property name="valign">GTK_ALIGN_START</property>
- <property name="halign">GTK_ALIGN_CENTER</property>
<child>
- <object class="GtkImage">
+ <object class="GtkRevealer" id="content-revealer">
<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>
+ <property name="halign">start</property>
+ <property name="vexpand">True</property>
+ <property name="margin-top">5</property>
+ <child>
+ <object class="GtkGrid" id="expanded-content">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="halign">start</property>
+ <property name="vexpand">True</property>
+ <property name="column-spacing">5</property>
+ <style>
+ <class name="bubble-content"/>
+ </style>
+ </object>
+ </child>
</object>
</child>
- <style>
- <class name="image-button"/>
- <class name="circular"/>
- <class name="flat"/>
- </style>
</object>
</child>
</object>
diff --git a/src/placeBubble.js b/src/placeBubble.js
index d4d41db..6b3e5ca 100644
--- a/src/placeBubble.js
+++ b/src/placeBubble.js
@@ -45,7 +45,10 @@ const PlaceBubble = new Lang.Class({
'box-content',
'grid-content',
'label-title',
- 'edit-button']);
+ 'edit-button',
+ 'expand-button',
+ 'expanded-content',
+ 'content-revealer']);
params.buttons = (MapBubble.Button.ROUTE |
MapBubble.Button.SEND_TO);
@@ -63,6 +66,9 @@ const PlaceBubble = new Lang.Class({
this._boxContent = ui.boxContent;
this._gridContent = ui.gridContent;
this._editButton = ui.editButton;
+ this._expandButton = ui.expandButton;
+ this._expandedContent = ui.expandedContent;
+ this._contentRevealer = ui.contentRevealer;
let overpass = new Overpass.Overpass();
if (Application.placeStore.exists(this.place, null)) {
@@ -91,7 +97,9 @@ const PlaceBubble = new Lang.Class({
if (this.place instanceof ContactPlace.ContactPlace)
this._editButton.visible = false;
else
- this._initEditButton(this._editButton);
+ this._initEditButton();
+
+ this._initExpandButton();
},
_formatWikiLink: function(wiki) {
@@ -102,50 +110,67 @@ const PlaceBubble = new Lang.Class({
},
_populate: function(place) {
- let infos = [];
+ let content = [];
+ let expandedContent = [];
let formatter = new PlaceFormatter.PlaceFormatter(place);
this._title.label = formatter.title;
- infos = formatter.rows.map(function(row) {
- row = row.map(function(prop) {
- switch (prop) {
- case 'postal_code':
- return _("Postal code: %s").format(place[prop]);
- case 'country_code':
- return _("Country code: %s").format(place[prop]);
- default:
- return GLib.markup_escape_text(place[prop], -1);
- }
+ formatter.rows.forEach(function(row) {
+ row.forEach(function(prop) {
+ content.push(GLib.markup_escape_text(place[prop], -1));
});
- return row.join(', ');
});
- if (place.population)
- infos.push(_("Population: %s").format(place.population));
+ if (place.population) {
+ expandedContent.push({ label: _("Population"),
+ info: place.population });
+ }
- if (place.openingHours)
- infos.push(_("Opening hours: %s").format(place.openingHoursTranslated));
+ if (place.openingHours) {
+ expandedContent.push({ label: _("Opening hours"),
+ info: place.openingHoursTranslated });
+ }
+
+ if (place.wheelchair) {
+ expandedContent.push({ label: _("Wheelchair access"),
+ info: place.wheelchairTranslated });
+ }
if (place.wiki) {
let link = this._formatWikiLink(place.wiki);
let href = Format.vprintf('<a href="%s">%s</a>',
[link, _("Wikipedia")]);
- infos.push(href);
+ expandedContent.push({ info: href });
}
- if (place.wheelchair) {
- infos.push(_("Wheelchair access: %s").format(place.wheelchairTranslated));
- }
- infos.forEach((function(info) {
- let label = new Gtk.Label({ label: info,
+ content.forEach((function(row) {
+ let label = new Gtk.Label({ label: row,
visible: true,
use_markup: true,
halign: Gtk.Align.START });
this._boxContent.pack_start(label, false, true, 0);
}).bind(this));
+ for (let row in expandedContent) {
+ let col = 0;
+
+ if (expandedContent[row].label) {
+ let label = new Gtk.Label({ label: expandedContent[row].label + ':',
+ visible: true,
+ halign: Gtk.Align.START });
+ this._expandedContent.attach(label, col++, row, 1, 1);
+ }
+
+ let info = new Gtk.Label({ label: expandedContent[row].info.bold(),
+ visible: true,
+ use_markup: true,
+ halign: Gtk.Align.START });
+ this._expandedContent.attach(info, col, row, col == 0 ? 2 : 1, 1);
+ }
+
+ this._expandButton.visible = expandedContent.length > 0;
this._stack.visible_child = this._gridContent;
},
@@ -160,9 +185,23 @@ const PlaceBubble = new Lang.Class({
}
},
- _initEditButton: function(button) {
- button.visible = true;
- button.connect('clicked', this._onEditClicked.bind(this));
+ _initEditButton: function() {
+ this._editButton.visible = true;
+ this._editButton.connect('clicked', this._onEditClicked.bind(this));
+ },
+
+ _initExpandButton: function() {
+ let image = this._expandButton.get_child();
+
+ this._expandButton.connect('clicked', (function() {
+ if (this._contentRevealer.child_revealed) {
+ this._contentRevealer.reveal_child = false;
+ image.icon_name = 'pan-up-symbolic';
+ } else {
+ this._contentRevealer.reveal_child = true;
+ image.icon_name = 'pan-down-symbolic';
+ }
+ }).bind(this));
},
_onEditClicked: function() {
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
