diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css index 8298276a1..69628614b 100644 --- a/data/theme/gnome-shell.css +++ b/data/theme/gnome-shell.css @@ -502,10 +502,15 @@ StTooltip { padding: 4px; background-color: rgba(0,0,0,0.9); color: #ffffff; - -shell-arrow-width: 12px; -shell-menu-spacing: 4px; } +.app-well-menu-arrow { + border-color: #5f5f5f; + color: rgba(0,0,0,0.9); + width: 12px; +} + .app-well-menu-item:hover { background-color: #1e1e1e; } @@ -818,6 +823,16 @@ StTooltip { background-image: url("corner-ripple.png"); } +.switcher-arrow { + border-color: rgba(0,0,0,0); + color: #808080; +} + +.switcher-arrow:highlighted { + border-color: rgba(0,0,0,0); + color: white; +} + /* Workspace Switcher */ .workspace-switcher-container { background: rgba(0,0,0,0.8); diff --git a/js/ui/altTab.js b/js/ui/altTab.js index 7ba530179..350fe8dd9 100644 --- a/js/ui/altTab.js +++ b/js/ui/altTab.js @@ -13,13 +13,6 @@ const St = imports.gi.St; const Main = imports.ui.main; const Tweener = imports.ui.tweener; -const POPUP_ARROW_COLOR = new Clutter.Color(); -POPUP_ARROW_COLOR.from_pixel(0xffffffff); -const POPUP_UNFOCUSED_ARROW_COLOR = new Clutter.Color(); -POPUP_UNFOCUSED_ARROW_COLOR.from_pixel(0x808080ff); -const TRANSPARENT_COLOR = new Clutter.Color(); -TRANSPARENT_COLOR.from_pixel(0x00000000); - const POPUP_APPICON_SIZE = 96; const POPUP_SCROLL_TIME = 0.10; // seconds @@ -477,16 +470,18 @@ SwitcherList.prototype = { this.actor.add_actor(this._rightGradient); // Those arrows indicate whether scrolling in one direction is possible - this._leftArrow = new St.DrawingArea(); + this._leftArrow = new St.DrawingArea({ style_class: 'switcher-arrow', + pseudo_class: 'highlighted' }); this._leftArrow.connect('repaint', Lang.bind(this, function (area) { - Shell.draw_box_pointer(area, Shell.PointerDirection.LEFT, TRANSPARENT_COLOR, POPUP_ARROW_COLOR); + Shell.draw_box_pointer(area, Shell.PointerDirection.LEFT); })); - this._rightArrow = new St.DrawingArea(); + this._rightArrow = new St.DrawingArea({ style_class: 'switcher-arrow', + pseudo_class: 'highlighted' }); this._rightArrow.connect('repaint', Lang.bind(this, function (area) { - Shell.draw_box_pointer(area, Shell.PointerDirection.RIGHT, TRANSPARENT_COLOR, POPUP_ARROW_COLOR); + Shell.draw_box_pointer(area, Shell.PointerDirection.RIGHT); })); this._leftGradient.add_actor(this._leftArrow); @@ -865,16 +860,13 @@ AppSwitcher.prototype = { // thumbnails are visible (ie, when the app icon is supposed to be // in justOutline mode). Apps with multiple windows will normally // show a dim arrow, but show a bright arrow when they are - // highlighted; their redraw handler will use the right color - // based on this._curApp; we just need to do a queue_relayout() to - // force it to redraw. (queue_redraw() doesn't work because - // ShellDrawingArea only redraws on allocate.) + // highlighted. highlight : function(n, justOutline) { if (this._curApp != -1) { if (this.icons[this._curApp].cachedWindows.length == 1) this._arrows[this._curApp].hide(); else - this._arrows[this._curApp].queue_relayout(); + this._arrows[this._curApp].remove_style_pseudo_class('highlighted'); } SwitcherList.prototype.highlight.call(this, n, justOutline); @@ -884,7 +876,7 @@ AppSwitcher.prototype = { if (justOutline && this.icons[this._curApp].cachedWindows.length == 1) this._arrows[this._curApp].show(); else - this._arrows[this._curApp].queue_relayout(); + this._arrows[this._curApp].add_style_pseudo_class('highlighted'); } }, @@ -893,12 +885,10 @@ AppSwitcher.prototype = { this.addItem(appIcon.actor); let n = this._arrows.length; - let arrow = new St.DrawingArea(); + let arrow = new St.DrawingArea({ style_class: 'switcher-arrow' }); arrow.connect('repaint', Lang.bind(this, function (area) { - Shell.draw_box_pointer(area, Shell.PointerDirection.DOWN, - TRANSPARENT_COLOR, - this._curApp == n ? POPUP_ARROW_COLOR : POPUP_UNFOCUSED_ARROW_COLOR); + Shell.draw_box_pointer(area, Shell.PointerDirection.DOWN); })); this._list.add_actor(arrow); this._arrows.push(arrow); diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js index ecb31dc43..c8261ad82 100644 --- a/js/ui/appDisplay.js +++ b/js/ui/appDisplay.js @@ -608,9 +608,6 @@ AppIconMenu.prototype = { _init: function(source) { this._source = source; - this._arrowSize = 4; // CSS default - this._spacing = 0; // CSS default - this.actor = new Shell.GenericContainer({ reactive: true }); this.actor.connect('get-preferred-width', Lang.bind(this, this._getPreferredWidth)); this.actor.connect('get-preferred-height', Lang.bind(this, this._getPreferredHeight)); @@ -634,16 +631,11 @@ AppIconMenu.prototype = { this._windowContainer.connect('leave-event', Lang.bind(this, this._onMenuLeave)); this._windowContainer.connect('button-release-event', Lang.bind(this, this._onMenuButtonRelease)); - this._borderColor = new Clutter.Color(); - this._backgroundColor = new Clutter.Color(); this._windowContainerBox.connect('style-changed', Lang.bind(this, this._onStyleChanged)); - this._arrow = new St.DrawingArea(); + this._arrow = new St.DrawingArea({ style_class: 'app-well-menu-arrow' }); this._arrow.connect('repaint', Lang.bind(this, function (area) { - Shell.draw_box_pointer(area, - Shell.PointerDirection.LEFT, - this._borderColor, - this._backgroundColor); + Shell.draw_box_pointer(area, Shell.PointerDirection.LEFT); })); this.actor.add_actor(this._arrow); @@ -658,11 +650,10 @@ AppIconMenu.prototype = { }, _getPreferredWidth: function(actor, forHeight, alloc) { - let [min, natural] = this._windowContainerBox.get_preferred_width(forHeight); - min += this._arrowSize; - natural += this._arrowSize; - alloc.min_size = min; - alloc.natural_size = natural; + let [menuMin, menuNatural] = this._windowContainerBox.get_preferred_width(forHeight); + let [arrowMin, arrowNatural] = this._arrow.get_preferred_width(forHeight); + alloc.min_size = menuMin + arrowMin; + alloc.natural_size = menuNatural + arrowNatural; }, _getPreferredHeight: function(actor, forWidth, alloc) { @@ -678,15 +669,17 @@ AppIconMenu.prototype = { let width = box.x2 - box.x1; let height = box.y2 - box.y1; + let [arrowMinWidth, arrowWidth] = this._arrow.get_preferred_width(height); + childBox.x1 = 0; - childBox.x2 = this._arrowSize; - childBox.y1 = Math.floor((height / 2) - (this._arrowSize / 2)); - childBox.y2 = childBox.y1 + this._arrowSize; + childBox.x2 = arrowWidth; + childBox.y1 = Math.floor((height / 2) - (arrowWidth / 2)); + childBox.y2 = childBox.y1 + arrowWidth; this._arrow.allocate(childBox, flags); // Ensure the arrow is above the border area let border = themeNode.get_border_width(St.Side.LEFT); - childBox.x1 = this._arrowSize - border; + childBox.x1 = arrowWidth - border; childBox.x2 = width; childBox.y1 = 0; childBox.y2 = height; @@ -873,25 +866,10 @@ AppIconMenu.prototype = { _onStyleChanged: function() { let themeNode = this._windowContainerBox.get_theme_node(); - let [success, len] = themeNode.get_length('-shell-arrow-width', false); - if (success) { - this._arrowSize = len; - this.actor.queue_relayout(); - } [success, len] = themeNode.get_length('-shell-menu-spacing', false) if (success) { this._windowContainer.spacing = len; } - - let color = new Clutter.Color(); - themeNode.get_background_color(color); - this._backgroundColor = color; - - color = new Clutter.Color(); - themeNode.get_border_color(St.Side.LEFT, color); - this._borderColor = color; - - this._arrow.queue_repaint(); } }; Signals.addSignalMethods(AppIconMenu.prototype); diff --git a/src/shell-drawing.c b/src/shell-drawing.c index 616c80078..df410aabb 100644 --- a/src/shell-drawing.c +++ b/src/shell-drawing.c @@ -51,20 +51,24 @@ shell_draw_clock (StDrawingArea *area, void shell_draw_box_pointer (StDrawingArea *area, - ShellPointerDirection direction, - ClutterColor *border_color, - ClutterColor *background_color) + ShellPointerDirection direction) { + StThemeNode *theme_node; + ClutterColor border_color, body_color; guint width, height; cairo_t *cr; + theme_node = st_widget_get_theme_node (ST_WIDGET (area)); + st_theme_node_get_border_color (theme_node, (StSide)direction, &border_color); + st_theme_node_get_foreground_color (theme_node, &body_color); + st_drawing_area_get_surface_size (area, &width, &height); cr = st_drawing_area_get_context (area); cairo_set_line_width (cr, 1.0); - clutter_cairo_set_source_color (cr, border_color); + clutter_cairo_set_source_color (cr, &border_color); switch (direction) { @@ -98,7 +102,7 @@ shell_draw_box_pointer (StDrawingArea *area, cairo_stroke_preserve (cr); - clutter_cairo_set_source_color (cr, background_color); + clutter_cairo_set_source_color (cr, &body_color); cairo_fill (cr); } diff --git a/src/shell-drawing.h b/src/shell-drawing.h index feaa580bf..2516577cf 100644 --- a/src/shell-drawing.h +++ b/src/shell-drawing.h @@ -8,17 +8,16 @@ G_BEGIN_DECLS +/* Note that these correspond to StSide */ typedef enum { SHELL_POINTER_UP, + SHELL_POINTER_RIGHT, SHELL_POINTER_DOWN, - SHELL_POINTER_LEFT, - SHELL_POINTER_RIGHT + SHELL_POINTER_LEFT } ShellPointerDirection; void shell_draw_box_pointer (StDrawingArea *area, - ShellPointerDirection direction, - ClutterColor *border_color, - ClutterColor *background_color); + ShellPointerDirection direction); void shell_draw_clock (StDrawingArea *area, int hour,