brl/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

messageTray: remove the labels of the items in the message tray

Browse Source 
According to the new visual style for the message tray we no longer
show the title of the source in the message tray.

https://bugzilla.gnome.org/show_bug.cgi?id=677213
This commit is contained in:
Ana Risteska 2012-08-10 20:24:22 +02:00 committed by Jasper St. Pierre
parent 16bbe9782b
commit 0ac4787f1a
2 changed files with 10 additions and 270 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
data/theme/gnome-shell.css
View File

@ -48,7 +48,6 @@ stage {
.dash-label, .dash-label,
.window-caption, .window-caption,
.switcher-list, .switcher-list,
.source-title,
.app-well-app > .overview-icon, .app-well-app > .overview-icon,
.remove-favorite > .overview-icon, .remove-favorite > .overview-icon,
.search-result-content > .overview-icon { .search-result-content > .overview-icon {
@ -1386,19 +1385,6 @@ StButton.popup-menu-item:insensitive {
border-radius: 4px; border-radius: 4px;
} }
/* 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 { #summary-mode {
padding: 2px 0px 0px 4px; padding: 2px 0px 0px 4px;
height: 36px; height: 36px;
@ -1409,45 +1395,22 @@ StButton.popup-menu-item:insensitive {
} }
.summary-source-button { .summary-source-button {
text-shadow: black 0px 2px 2px; transition-duration: 100;
} }
.summary-source-button:ltr { .summary-source-button:hover {
padding-right: 12px; background-color: rgba(255,255,255,0.1);
border-radius: 4px;
} }
.summary-source-button:selected .summary-source { .summary-source-button:selected {
background-image: url("panel-button-highlight-narrow.svg"); background-image: url("running-indicator.svg");
background-size: contain; 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");
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 { .summary-source {
padding-right: 4px; padding-right: 6px;
padding-left: 4px; padding-left: 6px;
} }
.summary-source-counter { .summary-source-counter {
@ -1460,15 +1423,6 @@ StButton.popup-menu-item:insensitive {
min-width: 1em; min-width: 1em;
} }
.source-title {
padding-left: 4px;
}
.source-title:rtl {
padding-left: 0px;
padding-right: 4px;
}
/* App Switcher */ /* App Switcher */
#altTabPopup { #altTabPopup {
padding: 8px; padding: 8px;

216
js/ui/messageTray.js
View File

@ -31,7 +31,6 @@ const LONGER_SUMMARY_TIMEOUT = 4;
const HIDE_TIMEOUT = 0.2; const HIDE_TIMEOUT = 0.2;
const LONGER_HIDE_TIMEOUT = 0.6; const LONGER_HIDE_TIMEOUT = 0.6;
const MAX_SOURCE_TITLE_WIDTH = 180;
// We delay hiding of the tray if the mouse is within MOUSE_LEFT_ACTOR_THRESHOLD // We delay hiding of the tray if the mouse is within MOUSE_LEFT_ACTOR_THRESHOLD
// range from the point where it left the tray. // range from the point where it left the tray.
@ -1296,22 +1295,7 @@ const SummaryItem = new Lang.Class({
this._sourceBox = new St.BoxLayout({ style_class: 'summary-source' }); this._sourceBox = new St.BoxLayout({ style_class: 'summary-source' });
this._sourceIcon = source.getSummaryIcon(); 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._sourceIcon, { y_fill: false });
this._sourceBox.add(this._sourceTitleBin, { expand: true, y_fill: false });
this.actor.child = this._sourceBox; this.actor.child = this._sourceBox;
this.notificationStackView = new St.ScrollView({ style_class: source.isChat ? '' : 'summary-notification-stack-scrollview', this.notificationStackView = new St.ScrollView({ style_class: source.isChat ? '' : 'summary-notification-stack-scrollview',
@ -1367,30 +1351,6 @@ const SummaryItem = new Lang.Class({
focusManager.add_group(this.rightClickMenu); 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() { prepareNotificationStackForShowing: function() {
if (this.notificationStack.get_n_children() > 0) if (this.notificationStack.get_n_children() > 0)
return; return;
@ -1525,8 +1485,6 @@ const MessageTray = new Lang.Class({
this._clickedSummaryItem = null; this._clickedSummaryItem = null;
this._clickedSummaryItemMouseButton = -1; this._clickedSummaryItemMouseButton = -1;
this._clickedSummaryItemAllocationChangedId = 0; this._clickedSummaryItemAllocationChangedId = 0;
this._expandedSummaryItem = null;
this._summaryItemTitleWidth = 0;
this._pointerBarrier = 0; this._pointerBarrier = 0;
this._unseenNotifications = []; this._unseenNotifications = [];
@ -1535,12 +1493,6 @@ const MessageTray = new Lang.Class({
this.idleMonitor = Shell.IdleMonitor.get(); this.idleMonitor = Shell.IdleMonitor.get();
// 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 = new FocusGrabber();
this._focusGrabber.connect('focus-grabbed', Lang.bind(this, this._focusGrabber.connect('focus-grabbed', Lang.bind(this,
function() { function() {
@ -1632,7 +1584,6 @@ const MessageTray = new Lang.Class({
// are items in this list once the notifications are done showing or once an item gets // 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. // added to the summary without a notification being shown.
this._newSummaryItems = []; this._newSummaryItems = [];
this._longestSummaryItem = null;
this._chatSummaryItemsCount = 0; this._chatSummaryItemsCount = 0;
}, },
@ -1683,14 +1634,6 @@ const MessageTray = new Lang.Class({
this._summary.insert_child_at_index(summaryItem.actor, this._chatSummaryItemsCount); 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); this._summaryItems.push(summaryItem);
// We keep this._newSummaryItems to track any new sources that were added to the // We keep this._newSummaryItems to track any new sources that were added to the
@ -1715,11 +1658,6 @@ const MessageTray = new Lang.Class({
}); });
})); }));
summaryItem.actor.connect('notify::hover', Lang.bind(this,
function () {
this._onSummaryItemHoverChanged(summaryItem);
}));
summaryItem.actor.connect('clicked', Lang.bind(this, summaryItem.actor.connect('clicked', Lang.bind(this,
function (actor, button) { function (actor, button) {
this._onSummaryItemClicked(summaryItem, button); this._onSummaryItemClicked(summaryItem, button);
@ -1756,26 +1694,6 @@ const MessageTray = new Lang.Class({
if (source.isChat) if (source.isChat)
this._chatSummaryItemsCount--; 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; let needUpdate = false;
if (this._notification && this._notification.source == source) { if (this._notification && this._notification.source == source) {
@ -1882,122 +1800,6 @@ const MessageTray = new Lang.Class({
this._updateState(); this._updateState();
}, },
_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();
else
return this._imaginarySummaryItemTitleWidth;
},
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) { _onSummaryItemClicked: function(summaryItem, button) {
if (summaryItem.source.handleSummaryClick()) if (summaryItem.source.handleSummaryClick())
this._unsetClickedSummaryItem(); this._unsetClickedSummaryItem();
@ -2196,8 +1998,6 @@ const MessageTray = new Lang.Class({
let summarySummoned = this._pointerInSummary || this._overviewVisible || this._traySummoned; let summarySummoned = this._pointerInSummary || this._overviewVisible || this._traySummoned;
let summaryPinned = this._summaryTimeoutId != 0 || this._pointerInTray || summarySummoned || this._locked; let summaryPinned = this._summaryTimeoutId != 0 || this._pointerInTray || summarySummoned || this._locked;
let summaryHovered = this._pointerInTray || this._pointerInSummary; 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 || let notificationsVisible = (this._notificationState == State.SHOWING ||
this._notificationState == State.SHOWN); this._notificationState == State.SHOWN);
@ -2216,16 +2016,8 @@ const MessageTray = new Lang.Class({
else if (this._newSummaryItems.length > 0) else if (this._newSummaryItems.length > 0)
this._showSummary(SUMMARY_TIMEOUT); this._showSummary(SUMMARY_TIMEOUT);
} }
} else if (this._summaryState == State.SHOWN) { } else if (this._summaryState == State.SHOWN && (!summaryPinned || mustHideSummary))
if (!summaryPinned || mustHideSummary)
this._hideSummary(); 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);
}
// Summary notification // Summary notification
let haveClickedSummaryItem = this._clickedSummaryItem != null; let haveClickedSummaryItem = this._clickedSummaryItem != null;
@ -2583,15 +2375,9 @@ const MessageTray = new Lang.Class({
{ opacity: 0, { opacity: 0,
time: ANIMATION_TIME, time: ANIMATION_TIME,
transition: 'easeOutQuad', transition: 'easeOutQuad',
onComplete: this._hideSummaryCompleted,
onCompleteScope: this,
}); });
}, },
_hideSummaryCompleted: function() {
this._setExpandedSummaryItem(null);
},
_updateSeenSummaryItems: function() { _updateSeenSummaryItems: function() {
if (this._backFromAway) { if (this._backFromAway) {
this._backFromAway = false; this._backFromAway = false;