From d1ffd3cf3599d5dab5743848899e806bc7c58c7a Mon Sep 17 00:00:00 2001 From: Marina Zhurakhinskaya Date: Mon, 21 Mar 2011 21:22:02 -0400 Subject: [PATCH] MessageTray: style summary sources MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Make summary sources look more clickable and highlight them when selected. Highlighting the fully expanded summary source when selected matches the highlighting in the top bar items and teaches the user that any part of the expanded summary source can be clicked. Based on the initial patches by Florian Müllner and Jonathan Strander. https://bugzilla.gnome.org/show_bug.cgi?id=644788 --- data/Makefile.am | 1 + data/theme/gnome-shell.css | 33 +++++++++++-- data/theme/source-button-border.svg | 74 +++++++++++++++++++++++++++++ js/ui/messageTray.js | 18 +++++-- 4 files changed, 117 insertions(+), 9 deletions(-) create mode 100644 data/theme/source-button-border.svg diff --git a/data/Makefile.am b/data/Makefile.am index 990f2325e..b0477194c 100644 --- a/data/Makefile.am +++ b/data/Makefile.am @@ -49,6 +49,7 @@ dist_theme_DATA = \ theme/separator-white.png \ theme/single-view-active.svg \ theme/single-view.svg \ + theme/source-button-border.svg \ theme/toggle-off-us.svg \ theme/toggle-off-intl.svg \ theme/toggle-on-us.svg \ diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css index 5cae9c23c..ccf3d91f3 100644 --- a/data/theme/gnome-shell.css +++ b/data/theme/gnome-shell.css @@ -971,7 +971,7 @@ StTooltip StLabel { #message-tray { background-gradient-direction: vertical; background-gradient-start: rgba(0,0,0,0.01); - background-gradient-end: rgba(0,0,0,0.95); + background-gradient-end: rgba(0,0,0,0.82); height: 36px; color: white; } @@ -1157,14 +1157,32 @@ StTooltip StLabel { padding: 2px 4px 0px 0px; } +.summary-source-button { + color: #fff; + text-shadow: black 0px 2px 2px; +} + .summary-source-button:ltr { - padding-left: 4px; - padding-right: 16px; + padding-right: 12px; +} + +.summary-source-button:selected .summary-source { + background-image: url("panel-button-highlight-narrow.svg"); + border-image: url("source-button-border.svg") 10 10 0 1; +} + +.summary-source-button:expanded:selected .summary-source { + background-image: none; + border-image: none; +} + +.summary-source-button:expanded:selected { + background-image: url("panel-button-highlight-wide.svg"); + border-image: url("source-button-border.svg") 10 10 0 1; } .summary-source-button:rtl { - padding-right: 4px; - padding-left: 16px; + padding-left: 12px; } .summary-source-button:last-child:ltr { @@ -1175,6 +1193,11 @@ StTooltip StLabel { padding-left: 12px; } +.summary-source { + padding-right: 4px; + padding-left: 4px; +} + .source-title { font-size: 9pt; font-weight: bold; diff --git a/data/theme/source-button-border.svg b/data/theme/source-button-border.svg new file mode 100644 index 000000000..6e5051ee9 --- /dev/null +++ b/data/theme/source-button-border.svg @@ -0,0 +1,74 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/js/ui/messageTray.js b/js/ui/messageTray.js index ea21d494d..22d15c5dc 100644 --- a/js/ui/messageTray.js +++ b/js/ui/messageTray.js @@ -910,6 +910,7 @@ SummaryItem.prototype = { _init: function(source) { this.source = source; this.actor = new St.Button({ style_class: 'summary-source-button', + y_fill: true, reactive: true, button_mask: St.ButtonMask.ONE | St.ButtonMask.TWO | St.ButtonMask.THREE, track_hover: true }); @@ -926,8 +927,8 @@ SummaryItem.prototype = { this._sourceTitleBin.child = this._sourceTitle; this._sourceTitleBin.width = 0; - this._sourceBox.add_actor(this._sourceIcon); - this._sourceBox.add_actor(this._sourceTitleBin, { expand: true }); + this._sourceBox.add(this._sourceIcon, { y_fill: false }); + this._sourceBox.add(this._sourceTitleBin, { expand: true, y_fill: false }); this.actor.child = this._sourceBox; this.rightClickMenu = new St.BoxLayout({ name: 'summary-right-click-menu', vertical: true }); @@ -1331,12 +1332,18 @@ MessageTray.prototype = { // Turn off ellipsization for the previously expanded item that is // collapsing and for the item that is expanding because it looks // better that way. - if (this._expandedSummaryItem) + if (this._expandedSummaryItem) { + // Ideally, we would remove 'expanded' pseudo class when the item + // is done collapsing, but we don't track when that happens. + this._expandedSummaryItem.actor.remove_style_pseudo_class('expanded'); this._expandedSummaryItem.setEllipsization(Pango.EllipsizeMode.NONE); + } this._expandedSummaryItem = summaryItem; - if (this._expandedSummaryItem) + if (this._expandedSummaryItem) { + this._expandedSummaryItem.actor.add_style_pseudo_class('expanded'); this._expandedSummaryItem.setEllipsization(Pango.EllipsizeMode.NONE); + } // We tween on a "_expandedSummaryItemTitleWidth" pseudo-property // that represents the current title width of the @@ -1928,6 +1935,7 @@ MessageTray.prototype = { this._adjustSummaryBoxPointerPosition(); this._summaryBoxPointerState = State.SHOWING; + this._clickedSummaryItem.actor.add_style_pseudo_class('selected'); this._summaryBoxPointer.show(true, Lang.bind(this, function() { this._summaryBoxPointerState = State.SHOWN; })); @@ -1954,6 +1962,8 @@ MessageTray.prototype = { this._summaryRightClickMenuClickedId = 0; } + if (this._clickedSummaryItem) + this._clickedSummaryItem.actor.remove_style_pseudo_class('selected'); this._clickedSummaryItem = null; this._clickedSummaryItemMouseButton = -1; },