diff --git a/data/theme/gnome-shell-sass/widgets/_calendar.scss b/data/theme/gnome-shell-sass/widgets/_calendar.scss index 16391a14e..33aea17a6 100644 --- a/data/theme/gnome-shell-sass/widgets/_calendar.scss +++ b/data/theme/gnome-shell-sass/widgets/_calendar.scss @@ -1,11 +1,11 @@ /* Date/Time Menu */ .clock-display-box { - spacing: $base_spacing / 2; + spacing: 2px; .clock { - padding-left: $base_padding; - padding-right: $base_padding; + padding-left: $base_padding * 2; + padding-right: $base_padding * 2; } } diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss index 1ee17d36a..9c41c153b 100644 --- a/data/theme/gnome-shell-sass/widgets/_panel.scss +++ b/data/theme/gnome-shell-sass/widgets/_panel.scss @@ -4,7 +4,7 @@ $panel_corner_radius: $base_border_radius+1; $panel_bg_color: #000; $panel_fg_color: #ccc; -$panel_height: 1.86em; +$panel_height: 2.2em; #panel { @@ -21,7 +21,6 @@ $panel_height: 1.86em; .panel-corner { -panel-corner-radius: 0; -panel-corner-background-color: transparent; - -panel-corner-border-color: transparent; } } @@ -35,11 +34,6 @@ $panel_height: 1.86em; -panel-corner-radius: $panel_corner_radius; -panel-corner-background-color: $panel_bg_color; -panel-corner-border-width: 2px; - -panel-corner-border-color: transparent; - - &:active, &:overview, &:focus { - -panel-corner-border-color: lighten($selected_bg_color,5%); - } } // panel menus @@ -48,13 +42,30 @@ $panel_height: 1.86em; color: $panel_fg_color; -natural-hpadding: $base_padding * 2; -minimum-hpadding: $base_padding; + transition-duration: 150ms; + border: 3px solid transparent; + border-radius: 99px; - &:hover { - color: lighten($panel_fg_color, 20%); + &.clock-display { + .clock { + transition-duration: 150ms; + border: 3px solid transparent; + border-radius: 99px; + } } - &:active, &:overview, &:focus, &:checked { - color: lighten($panel_fg_color, 20%); + &:hover, &:active, &:overview, &:focus, &:checked { + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.20); + + // The clock display needs to have the background on .clock because + // we want to exclude the do-not-disturb indicator from the background + &.clock-display { + box-shadow: none; + + .clock { + box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.20); + } + } } // status area icons @@ -83,25 +94,6 @@ $panel_height: 1.86em; } } - .panel-button { - &:active, &:overview, &:focus, &:checked { - // Trick due to St limitations. It needs a background to draw a box-shadow - background-color: rgba(0, 0, 0, 0.01); - box-shadow: inset 0 -2px 0 0 lighten($selected_bg_color,5%); - } - } - - .panel-button.clock-display { - // Move highlight from .panel-button to .clock - &:active, &:overview, &:focus, &:checked { - box-shadow: none; - - .clock { - background-color: rgba(0, 0, 0, 0.01); - box-shadow: inset 0 -2px 0 0 lighten($selected_bg_color,5%); - } - } - } .panel-status-indicators-box, .panel-status-menu-box { diff --git a/js/ui/panel.js b/js/ui/panel.js index 31b88f7fd..5b0eaec43 100644 --- a/js/ui/panel.js +++ b/js/ui/panel.js @@ -18,48 +18,6 @@ var APP_MENU_ICON_MARGIN = 0; var BUTTON_DND_ACTIVATION_TIMEOUT = 250; -// To make sure the panel corners blend nicely with the panel, -// we draw background and borders the same way, e.g. drawing -// them as filled shapes from the outside inwards instead of -// using cairo stroke(). So in order to give the border the -// appearance of being drawn on top of the background, we need -// to blend border and background color together. -// For that purpose we use the following helper methods, taken -// from st-theme-node-drawing.c -function _norm(x) { - return Math.round(x / 255); -} - -function _over(srcColor, dstColor) { - let src = _premultiply(srcColor); - let dst = _premultiply(dstColor); - let result = new Clutter.Color(); - - result.alpha = src.alpha + _norm((255 - src.alpha) * dst.alpha); - result.red = src.red + _norm((255 - src.alpha) * dst.red); - result.green = src.green + _norm((255 - src.alpha) * dst.green); - result.blue = src.blue + _norm((255 - src.alpha) * dst.blue); - - return _unpremultiply(result); -} - -function _premultiply(color) { - return new Clutter.Color({ red: _norm(color.red * color.alpha), - green: _norm(color.green * color.alpha), - blue: _norm(color.blue * color.alpha), - alpha: color.alpha }); -} - -function _unpremultiply(color) { - if (color.alpha == 0) - return new Clutter.Color(); - - let red = Math.min((color.red * 255 + 127) / color.alpha, 255); - let green = Math.min((color.green * 255 + 127) / color.alpha, 255); - let blue = Math.min((color.blue * 255 + 127) / color.alpha, 255); - return new Clutter.Color({ red, green, blue, alpha: color.alpha }); -} - class AppMenu extends PopupMenu.PopupMenu { constructor(sourceActor) { super(sourceActor, 0.5, St.Side.TOP); @@ -630,15 +588,11 @@ class PanelCorner extends St.DrawingArea { let borderWidth = node.get_length('-panel-corner-border-width'); let backgroundColor = node.get_color('-panel-corner-background-color'); - let borderColor = node.get_color('-panel-corner-border-color'); - - let overlap = borderColor.alpha != 0; - let offsetY = overlap ? 0 : borderWidth; let cr = this.get_context(); cr.setOperator(Cairo.Operator.SOURCE); - cr.moveTo(0, offsetY); + cr.moveTo(0, 0); if (this._side == St.Side.LEFT) { cr.arc(cornerRadius, borderWidth + cornerRadius, @@ -648,27 +602,12 @@ class PanelCorner extends St.DrawingArea { borderWidth + cornerRadius, cornerRadius, 3 * Math.PI / 2, 2 * Math.PI); } - cr.lineTo(cornerRadius, offsetY); + cr.lineTo(cornerRadius, 0); cr.closePath(); - let savedPath = cr.copyPath(); - - let xOffsetDirection = this._side == St.Side.LEFT ? -1 : 1; - let over = _over(borderColor, backgroundColor); - Clutter.cairo_set_source_color(cr, over); + Clutter.cairo_set_source_color(cr, backgroundColor); cr.fill(); - if (overlap) { - let offset = borderWidth; - Clutter.cairo_set_source_color(cr, backgroundColor); - - cr.save(); - cr.translate(xOffsetDirection * offset, -offset); - cr.appendPath(savedPath); - cr.fill(); - cr.restore(); - } - cr.$dispose(); }