diff options
| -rw-r--r-- | data/ui/place-bubble.ui | 118 | ||||
| -rw-r--r-- | src/placeBubble.js | 90 |
2 files changed, 150 insertions, 58 deletions
diff --git a/data/ui/place-bubble.ui b/data/ui/place-bubble.ui index fa37801d..5ed2ddc0 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 d4d41dbe..341e2cbf 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,68 @@ 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) { + content = 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); - } + return 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 +186,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() { |