diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css index cc568fbae..bd1c5d3c1 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 { @@ -1386,19 +1385,6 @@ StButton.popup-menu-item:insensitive { 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 { padding: 2px 0px 0px 4px; height: 36px; @@ -1409,45 +1395,22 @@ StButton.popup-menu-item:insensitive { } .summary-source-button { - text-shadow: black 0px 2px 2px; + transition-duration: 100; } -.summary-source-button:ltr { - padding-right: 12px; +.summary-source-button:hover { + background-color: rgba(255,255,255,0.1); + border-radius: 4px; } -.summary-source-button:selected .summary-source { - background-image: url("panel-button-highlight-narrow.svg"); +.summary-source-button:selected { + 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"); - 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 { @@ -1460,15 +1423,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/js/ui/messageTray.js b/js/ui/messageTray.js index 0ff4710c5..f1ffe7b62 100644 --- a/js/ui/messageTray.js +++ b/js/ui/messageTray.js @@ -31,7 +31,6 @@ const LONGER_SUMMARY_TIMEOUT = 4; const HIDE_TIMEOUT = 0.2; 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 // 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._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({ style_class: source.isChat ? '' : 'summary-notification-stack-scrollview', @@ -1367,30 +1351,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; @@ -1525,8 +1485,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 = []; @@ -1535,12 +1493,6 @@ const MessageTray = new Lang.Class({ 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.connect('focus-grabbed', Lang.bind(this, 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 // added to the summary without a notification being shown. this._newSummaryItems = []; - this._longestSummaryItem = null; this._chatSummaryItemsCount = 0; }, @@ -1683,14 +1634,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 @@ -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, function (actor, button) { this._onSummaryItemClicked(summaryItem, button); @@ -1756,26 +1694,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) { @@ -1882,122 +1800,6 @@ const MessageTray = new Lang.Class({ 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) { if (summaryItem.source.handleSummaryClick()) this._unsetClickedSummaryItem(); @@ -2196,8 +1998,6 @@ const MessageTray = new Lang.Class({ let summarySummoned = this._pointerInSummary || this._overviewVisible || this._traySummoned; 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); @@ -2216,16 +2016,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; @@ -2583,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;