[gnome-shell/wip/message-tray: 4/22] messageTray: restyle the message tray
- From: Jasper St. Pierre <jstpierre src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-shell/wip/message-tray: 4/22] messageTray: restyle the message tray
- Date: Wed, 1 Aug 2012 18:43:13 +0000 (UTC)
commit 22ab99a767d731604deb77d88a226cf9709d0e3b
Author: Ana Risteska <a risteska gmail com>
Date: Mon Jul 30 19:18:24 2012 +0200
messageTray: restyle the message tray
The patch implements the new visual style for the message tray,
that is now larger and has textured background. The icons are
also larger and the title of the source is no longer shown.
https://bugzilla.gnome.org/show_bug.cgi?id=677213
data/Makefile.am | 1 +
data/theme/gnome-shell.css | 72 ++------------
data/theme/noise-texture.png | Bin 0 -> 79464 bytes
js/ui/messageTray.js | 221 ++---------------------------------------
js/ui/notificationDaemon.js | 6 +-
js/ui/telepathyClient.js | 2 +-
6 files changed, 27 insertions(+), 275 deletions(-)
---
diff --git a/data/Makefile.am b/data/Makefile.am
index 7a80948..afaab1d 100644
--- a/data/Makefile.am
+++ b/data/Makefile.am
@@ -35,6 +35,7 @@ dist_theme_DATA = \
theme/filter-selected-ltr.svg \
theme/filter-selected-rtl.svg \
theme/gnome-shell.css \
+ theme/noise-texture.png \
theme/panel-button-border.svg \
theme/panel-button-highlight-narrow.svg \
theme/panel-button-highlight-wide.svg \
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 507e349..55c23f3 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -48,7 +48,6 @@ stage {
.dash-label,
.window-caption,
.switcher-list,
-.source-title,
.app-well-app > .overview-icon,
.remove-favorite > .overview-icon,
.search-result-content > .overview-icon {
@@ -1147,10 +1146,8 @@ StButton.popup-menu-item:insensitive {
/* Message Tray */
#message-tray {
- background-gradient-direction: vertical;
- background-gradient-start: rgba(0,0,0,0.01);
- background-gradient-end: rgba(0,0,0,0.82);
- height: 36px;
+ background: #2e3436 url(noise-texture.png) repeat 0 0;
+ height: 72px;
}
.notification {
@@ -1383,68 +1380,30 @@ StButton.popup-menu-item:insensitive {
selection-background-color: #808080;
}
-/* The spacing and padding on the summary is tricky; we want to keep
- * the icons from touching each other or the edges of the screen, but
- * we also want them to be "Fitts"-y with respect to the edges, so the
- * summary area's bottom and right padding must actually be part of
- * the icons. However, we can't put *all* of the padding into the
- * icons, because then the summary would be 0x0 when there were no
- * icons in it, and so you wouldn't be able to hover over it to
- * activate it.
- *
- * Also, the spacing between a summary-source's icon and title is
- * actually specified as padding-left in source-title, because we
- * want the spacing to collapse along with the title.
- */
#summary-mode {
padding: 2px 0px 0px 4px;
- height: 36px;
+ height: 72px;
}
#summary-mode:rtl {
padding: 2px 4px 0px 0px;
}
-.summary-source-button {
- text-shadow: black 0px 2px 2px;
-}
-
-.summary-source-button:ltr {
- padding-right: 12px;
-}
-
-.summary-source-button:selected .summary-source {
- background-image: url("panel-button-highlight-narrow.svg");
+.summary-source-button:hovered {
+ background-image: url("running-indicator.svg");
background-size: contain;
- 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");
+.summary-source-button:selected {
+ background-image: url("running-indicator.svg");
+ background-color: rgba(255,255,255,0.1);
+ transition-duration: 100;
background-size: contain;
- border-image: url("source-button-border.svg") 10 10 0 1;
-}
-
-.summary-source-button:rtl {
- padding-left: 12px;
-}
-
-.summary-source-button:last-child:ltr {
- padding-right: 12px;
-}
-
-.summary-source-button:last-child:rtl {
- padding-left: 12px;
}
.summary-source {
- padding-right: 4px;
- padding-left: 4px;
+ padding-right: 6px;
+ padding-left: 6px;
}
.summary-source-counter {
@@ -1457,15 +1416,6 @@ StButton.popup-menu-item:insensitive {
min-width: 1em;
}
-.source-title {
- padding-left: 4px;
-}
-
-.source-title:rtl {
- padding-left: 0px;
- padding-right: 4px;
-}
-
/* App Switcher */
#altTabPopup {
padding: 8px;
diff --git a/data/theme/noise-texture.png b/data/theme/noise-texture.png
new file mode 100644
index 0000000..6b70a2d
Binary files /dev/null and b/data/theme/noise-texture.png differ
diff --git a/js/ui/messageTray.js b/js/ui/messageTray.js
index 82f6398..549f35d 100644
--- a/js/ui/messageTray.js
+++ b/js/ui/messageTray.js
@@ -31,7 +31,7 @@ const LONGER_SUMMARY_TIMEOUT = 4;
const HIDE_TIMEOUT = 0.2;
const LONGER_HIDE_TIMEOUT = 0.6;
-const MAX_SOURCE_TITLE_WIDTH = 180;
+const NOTIFICATION_ICON_SIZE = 24;
// We delay hiding of the tray if the mouse is within MOUSE_LEFT_ACTOR_THRESHOLD
// range from the point where it left the tray.
@@ -542,7 +542,7 @@ const Notification = new Lang.Class({
this._table.remove_style_class_name('multi-line-notification');
if (!this._icon) {
- this._icon = params.icon || this.source.createIcon(this.source.ICON_SIZE);
+ this._icon = params.icon || this.source.createIcon(NOTIFICATION_ICON_SIZE);
this._table.add(this._icon, { row: 0,
col: 0,
x_expand: false,
@@ -1119,7 +1119,7 @@ const SourceActor = new Lang.Class({
const Source = new Lang.Class({
Name: 'MessageTraySource',
- ICON_SIZE: 24,
+ SOURCE_ICON_SIZE: 48,
_init: function(title, iconName, iconType) {
this.title = title;
@@ -1134,8 +1134,8 @@ const Source = new Lang.Class({
this.notifications = [];
- this.mainIcon = new SourceActor(this, this.ICON_SIZE);
- this._setSummaryIcon(this.createIcon(this.ICON_SIZE));
+ this.mainIcon = new SourceActor(this, this.SOURCE_ICON_SIZE);
+ this._setSummaryIcon(this.createIcon(this.SOURCE_ICON_SIZE));
},
_setCount: function(count, visible) {
@@ -1266,24 +1266,8 @@ const SummaryItem = new Lang.Class({
track_hover: true });
this._sourceBox = new St.BoxLayout({ style_class: 'summary-source' });
-
this._sourceIcon = source.getSummaryIcon();
- this._sourceTitleBin = new St.Bin({ y_align: St.Align.MIDDLE,
- x_fill: true,
- clip_to_allocation: true });
- this._sourceTitle = new St.Label({ style_class: 'source-title',
- text: source.title });
- this._sourceTitle.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
- this._sourceTitleBin.child = this._sourceTitle;
- this._sourceTitleBin.width = 0;
-
- this.source.connect('title-changed',
- Lang.bind(this, function() {
- this._sourceTitle.text = source.title;
- }));
-
this._sourceBox.add(this._sourceIcon, { y_fill: false });
- this._sourceBox.add(this._sourceTitleBin, { expand: true, y_fill: false });
this.actor.child = this._sourceBox;
this.notificationStackView = new St.ScrollView({ name: source.isChat ? '' : 'summary-notification-stack-scrollview',
@@ -1339,30 +1323,6 @@ const SummaryItem = new Lang.Class({
focusManager.add_group(this.rightClickMenu);
},
- // getTitleNaturalWidth, getTitleWidth, and setTitleWidth include
- // the spacing between the icon and title (which is actually
- // _sourceTitle's padding-left) as part of the width.
-
- getTitleNaturalWidth: function() {
- let [minWidth, naturalWidth] = this._sourceTitle.get_preferred_width(-1);
-
- return Math.min(naturalWidth, MAX_SOURCE_TITLE_WIDTH);
- },
-
- getTitleWidth: function() {
- return this._sourceTitleBin.width;
- },
-
- setTitleWidth: function(width) {
- width = Math.round(width);
- if (width != this._sourceTitleBin.width)
- this._sourceTitleBin.width = width;
- },
-
- setEllipsization: function(mode) {
- this._sourceTitle.clutter_text.ellipsize = mode;
- },
-
prepareNotificationStackForShowing: function() {
if (this.notificationStack.get_n_children() > 0)
return;
@@ -1497,8 +1457,6 @@ const MessageTray = new Lang.Class({
this._clickedSummaryItem = null;
this._clickedSummaryItemMouseButton = -1;
this._clickedSummaryItemAllocationChangedId = 0;
- this._expandedSummaryItem = null;
- this._summaryItemTitleWidth = 0;
this._pointerBarrier = 0;
this._unseenNotifications = [];
@@ -1507,12 +1465,6 @@ const MessageTray = new Lang.Class({
this.idleMonitor = new Shell.IdleMonitor();
- // To simplify the summary item animation code, we pretend
- // that there's an invisible SummaryItem to the left of the
- // leftmost real summary item, and that it's expanded when all
- // of the other items are collapsed.
- this._imaginarySummaryItemTitleWidth = 0;
-
this._focusGrabber = new FocusGrabber();
this._focusGrabber.connect('focus-grabbed', Lang.bind(this,
function() {
@@ -1605,7 +1557,6 @@ const MessageTray = new Lang.Class({
// are items in this list once the notifications are done showing or once an item gets
// added to the summary without a notification being shown.
this._newSummaryItems = [];
- this._longestSummaryItem = null;
this._chatSummaryItemsCount = 0;
},
@@ -1656,14 +1607,6 @@ const MessageTray = new Lang.Class({
this._summary.insert_child_at_index(summaryItem.actor, this._chatSummaryItemsCount);
}
- let titleWidth = summaryItem.getTitleNaturalWidth();
- if (titleWidth > this._summaryItemTitleWidth) {
- this._summaryItemTitleWidth = titleWidth;
- if (!this._expandedSummaryItem)
- this._imaginarySummaryItemTitleWidth = titleWidth;
- this._longestSummaryItem = summaryItem;
- }
-
this._summaryItems.push(summaryItem);
// We keep this._newSummaryItems to track any new sources that were added to the
@@ -1729,26 +1672,6 @@ const MessageTray = new Lang.Class({
if (source.isChat)
this._chatSummaryItemsCount--;
- if (this._expandedSummaryItem == summaryItemToRemove)
- this._expandedSummaryItem = null;
-
- if (this._longestSummaryItem.source == source) {
- let newTitleWidth = 0;
- this._longestSummaryItem = null;
- for (let i = 0; i < this._summaryItems.length; i++) {
- let summaryItem = this._summaryItems[i];
- let titleWidth = summaryItem.getTitleNaturalWidth();
- if (titleWidth > newTitleWidth) {
- newTitleWidth = titleWidth;
- this._longestSummaryItem = summaryItem;
- }
- }
-
- this._summaryItemTitleWidth = newTitleWidth;
- if (!this._expandedSummaryItem)
- this._imaginarySummaryItemTitleWidth = newTitleWidth;
- }
-
let needUpdate = false;
if (this._notification && this._notification.source == source) {
@@ -1849,119 +1772,11 @@ const MessageTray = new Lang.Class({
_onSummaryItemHoverChanged: function(summaryItem) {
if (summaryItem.actor.hover)
- this._setExpandedSummaryItem(summaryItem);
- },
-
- _setExpandedSummaryItem: function(summaryItem) {
- if (summaryItem == this._expandedSummaryItem)
- return;
-
- // We can't just animate individual summary items as the
- // pointer moves in and out of them, because if they don't
- // move in sync you get weird-looking wobbling. So whenever
- // there's a change, we have to re-tween the entire summary
- // area.
-
- // 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) {
- // 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) {
- 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
- // expanded/expanding item, or the width of the imaginary
- // invisible item if we're collapsing everything.
- Tweener.addTween(this,
- { _expandedSummaryItemTitleWidth: this._summaryItemTitleWidth,
- time: ANIMATION_TIME,
- transition: 'easeOutQuad',
- onComplete: this._expandSummaryItemCompleted,
- onCompleteScope: this });
- },
-
- get _expandedSummaryItemTitleWidth() {
- if (this._expandedSummaryItem)
- return this._expandedSummaryItem.getTitleWidth();
+ summaryItem.actor.add_style_pseudo_class('hovered');
else
- return this._imaginarySummaryItemTitleWidth;
+ summaryItem.actor.remove_style_pseudo_class('hovered');
},
- set _expandedSummaryItemTitleWidth(expansion) {
- expansion = Math.round(expansion);
-
- // Expand the expanding item to its new width
- if (this._expandedSummaryItem)
- this._expandedSummaryItem.setTitleWidth(expansion);
- else
- this._imaginarySummaryItemTitleWidth = expansion;
-
- // Figure out how much space the other items are currently
- // using, and how much they need to be shrunk to keep the
- // total width (including the width of the imaginary item)
- // constant.
- let excess = this._summaryItemTitleWidth - expansion;
- let oldExcess = 0, shrinkage;
- if (excess) {
- for (let i = 0; i < this._summaryItems.length; i++) {
- if (this._summaryItems[i] != this._expandedSummaryItem)
- oldExcess += this._summaryItems[i].getTitleWidth();
- }
- if (this._expandedSummaryItem)
- oldExcess += this._imaginarySummaryItemTitleWidth;
- }
- if (excess && oldExcess)
- shrinkage = excess / oldExcess;
- else
- shrinkage = 0;
-
- // Now shrink each one proportionately
- for (let i = 0; i < this._summaryItems.length; i++) {
- if (this._summaryItems[i] == this._expandedSummaryItem)
- continue;
-
- let oldWidth = this._summaryItems[i].getTitleWidth();
- let newWidth = Math.floor(oldWidth * shrinkage);
- excess -= newWidth;
- this._summaryItems[i].setTitleWidth(newWidth);
- }
- if (this._expandedSummaryItem) {
- let oldWidth = this._imaginarySummaryItemTitleWidth;
- let newWidth = Math.floor(oldWidth * shrinkage);
- excess -= newWidth;
- this._imaginarySummaryItemTitleWidth = newWidth;
- }
-
- // If the tray as a whole is fully-expanded, make sure the
- // left edge doesn't wobble during animation due to rounding.
- if (this._imaginarySummaryItemTitleWidth == 0 && excess != 0) {
- for (let i = 0; i < this._summaryItems.length; i++) {
- if (this._summaryItems[i] == this._expandedSummaryItem)
- continue;
-
- let oldWidth = this._summaryItems[i].getTitleWidth();
- if (oldWidth != 0) {
- this._summaryItems[i].setTitleWidth (oldWidth + excess);
- break;
- }
- }
- }
- },
-
- _expandSummaryItemCompleted: function() {
- if (this._expandedSummaryItem)
- this._expandedSummaryItem.setEllipsization(Pango.EllipsizeMode.END);
- },
_onSummaryItemClicked: function(summaryItem, button) {
if (summaryItem.source.handleSummaryClick())
@@ -2162,7 +1977,6 @@ const MessageTray = new Lang.Class({
let summaryPinned = this._summaryTimeoutId != 0 || this._pointerInTray || summarySummoned || this._locked;
let summaryHovered = this._pointerInTray || this._pointerInSummary;
let summaryVisibleWithNoHover = (this._overviewVisible || this._locked) && !summaryHovered;
- let summaryNotificationIsForExpandedSummaryItem = (this._clickedSummaryItem == this._expandedSummaryItem);
let notificationsVisible = (this._notificationState == State.SHOWING ||
this._notificationState == State.SHOWN);
@@ -2181,16 +1995,8 @@ const MessageTray = new Lang.Class({
else if (this._newSummaryItems.length > 0)
this._showSummary(SUMMARY_TIMEOUT);
}
- } else if (this._summaryState == State.SHOWN) {
- if (!summaryPinned || mustHideSummary)
- this._hideSummary();
- else if (summaryVisibleWithNoHover && !summaryNotificationIsForExpandedSummaryItem)
- // If we are hiding the summary, we'll collapse the expanded summary item when we are done
- // so that there is no animation. However, we should collapse the expanded summary item
- // if the summary is visible, but not hovered over, and the summary notification for the
- // expanded summary item is not being shown.
- this._setExpandedSummaryItem(null);
- }
+ } else if (this._summaryState == State.SHOWN && (!summaryPinned || mustHideSummary))
+ this._hideSummary();
// Summary notification
let haveClickedSummaryItem = this._clickedSummaryItem != null;
@@ -2423,7 +2229,8 @@ const MessageTray = new Lang.Class({
onCompleteScope: this
};
if (!this._notification.expanded)
- tweenParams.y = - this.actor.height;
+ // ana
+ tweenParams.y = - this.actor.height/2;
this._tween(this._notificationBin, '_notificationState', State.SHOWN, tweenParams);
},
@@ -2568,15 +2375,9 @@ const MessageTray = new Lang.Class({
{ opacity: 0,
time: ANIMATION_TIME,
transition: 'easeOutQuad',
- onComplete: this._hideSummaryCompleted,
- onCompleteScope: this,
});
},
- _hideSummaryCompleted: function() {
- this._setExpandedSummaryItem(null);
- },
-
_updateSeenSummaryItems: function() {
if (this._backFromAway) {
this._backFromAway = false;
diff --git a/js/ui/notificationDaemon.js b/js/ui/notificationDaemon.js
index 49d1e0b..6c75a3e 100644
--- a/js/ui/notificationDaemon.js
+++ b/js/ui/notificationDaemon.js
@@ -339,7 +339,7 @@ const NotificationDaemon = new Lang.Class({
let gicon = this._iconForNotificationData(icon, hints);
let iconActor = new St.Icon({ gicon: gicon,
icon_type: St.IconType.FULLCOLOR,
- icon_size: source.ICON_SIZE });
+ icon_size: MessageTray.NOTIFICATION_ICON_SIZE });
if (notification == null) {
notification = new MessageTray.Notification(source, summary, body,
@@ -535,7 +535,7 @@ const Source = new Lang.Class({
processNotification: function(notification, gicon) {
if (gicon)
this._gicon = gicon;
- this._setSummaryIcon(this.createIcon(this.ICON_SIZE));
+ this._setSummaryIcon(this.createIcon(this.SOURCE_ICON_SIZE));
let tracker = Shell.WindowTracker.get_default();
if (notification.resident && this.app && tracker.focus_app == this.app)
@@ -603,7 +603,7 @@ const Source = new Lang.Class({
// notification-based icons (ie, not a trayicon) or if it was unset before
if (!this.trayIcon) {
this.useNotificationIcon = false;
- this._setSummaryIcon(this.createIcon(this.ICON_SIZE));
+ this._setSummaryIcon(this.createIcon(this.SOURCE_ICON_SIZE));
}
},
diff --git a/js/ui/telepathyClient.js b/js/ui/telepathyClient.js
index 240969b..13b801d 100644
--- a/js/ui/telepathyClient.js
+++ b/js/ui/telepathyClient.js
@@ -532,7 +532,7 @@ const ChatSource = new Lang.Class({
},
_updateAvatarIcon: function() {
- this._setSummaryIcon(this.createIcon(this.ICON_SIZE));
+ this._setSummaryIcon(this.createIcon(this.SOURCE_ICON_SIZE));
this._notification.update(this._notification.title, null, { customContent: true });
},
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
