diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css index bf507453e..29c7c940d 100644 --- a/data/theme/gnome-shell.css +++ b/data/theme/gnome-shell.css @@ -724,6 +724,14 @@ StScrollBar StButton#vhandle:active { spacing: 16px; } +.search-section-separator { + -gradient-height: 1px; + -gradient-start: rgba(255,255,255,0); + -gradient-end: rgba(255,255,255,0.5); + -margin-horizontal: 1.5em; + height: 1px; +} + .search-section-content { /* This is the space between the provider icon and the results container */ spacing: 25px; diff --git a/js/ui/popupMenu.js b/js/ui/popupMenu.js index a46938866..03691b69e 100644 --- a/js/ui/popupMenu.js +++ b/js/ui/popupMenu.js @@ -404,9 +404,17 @@ const PopupSeparatorMenuItem = new Lang.Class({ this.parent({ reactive: false, can_focus: false}); - this._drawingArea = new St.DrawingArea({ style_class: 'popup-separator-menu-item' }); - this.addActor(this._drawingArea, { span: -1, expand: true }); - this._drawingArea.connect('repaint', Lang.bind(this, this._onRepaint)); + this._separator = new HorzSeparator({ style_class: 'popup-separator-menu-item' }); + this.addActor(this._separator.actor, { span: -1, expand: true }); + } +}); + +const HorzSeparator = new Lang.Class({ + Name: 'HorzSeparator', + + _init: function (params) { + this.actor = new St.DrawingArea(params); + this.actor.connect('repaint', Lang.bind(this, this._onRepaint)); }, _onRepaint: function(area) { diff --git a/js/ui/searchDisplay.js b/js/ui/searchDisplay.js index 623ad352b..f37a88fa6 100644 --- a/js/ui/searchDisplay.js +++ b/js/ui/searchDisplay.js @@ -406,8 +406,8 @@ const SearchDisplay = new Lang.Class({ let providerIcon; if (!isAppsProvider) { - let separator = new PopupMenu.PopupSeparatorMenuItem(); - providerBox.add(separator.actor); + let separator = new PopupMenu.HorzSeparator({ style_class: 'search-section-separator' }); + providerBox.add(separator.actor, { expand: true }); providerIcon = new ProviderIcon(provider); providerIcon.connect('launch-search', Lang.bind(this, function(providerIcon) {