diff --git a/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss index f92892cff..c36f00e75 100644 --- a/data/theme/gnome-shell-sass/widgets/_dash.scss +++ b/data/theme/gnome-shell-sass/widgets/_dash.scss @@ -5,15 +5,14 @@ $dash_placeholder_size: 32px; $dash_padding: $base_padding + 4px; // 10px $dash_spacing: $base_padding / 4; +$dash_bottom_margin: $base_margin * 4; $dash_border_radius: $modal_radius * 1.5; #dash { - background-color: $dash_background_color; @include fontsize($base_font_size - 2); - margin: $base_margin * 4 $base_margin * 2; + margin: $base_margin * 4 $base_margin * 2 0; padding: 0 $dash_padding; - border-radius: $dash_border_radius; .placeholder { // background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg"); @@ -32,14 +31,21 @@ $dash_border_radius: $modal_radius * 1.5; } } +.dash-background { + background-color: $dash_background_color; + margin-bottom: $dash_bottom_margin; + padding: $dash_padding; + border-radius: $dash_border_radius; +} + // Dash Items -.dash-item-container > StWidget { - padding: $dash_padding $dash_spacing; +.dash-item-container .app-well-app, .show-apps { + padding: 0 $dash_spacing $dash_bottom_margin; } .dash-separator { width: 1px; - margin: 0 ($dash_spacing + ($dash_padding / 2)); + margin: 0 ($dash_spacing + ($dash_padding / 2)) $dash_bottom_margin; background-color: transparentize($osd_fg_color,0.7); } diff --git a/js/ui/dash.js b/js/ui/dash.js index efd855787..5d9d7d717 100644 --- a/js/ui/dash.js +++ b/js/ui/dash.js @@ -60,6 +60,7 @@ class DashItemContainer extends St.Widget { super._init({ style_class: 'dash-item-container', pivot_point: new Graphene.Point({ x: .5, y: .5 }), + layout_manager: new Clutter.BinLayout(), scale_x: 0, scale_y: 0, opacity: 0, @@ -152,6 +153,7 @@ class DashItemContainer extends St.Widget { this.destroy_all_children(); this.child = actor; + this.child.y_expand = true; this.add_actor(this.child); } @@ -203,6 +205,8 @@ class ShowAppsIcon extends DashItemContainer { { setSizeManually: true, showLabel: false, createIcon: this._createIcon.bind(this) }); + this.icon.y_align = Clutter.ActorAlign.CENTER; + this.toggleButton.add_actor(this.icon); this.toggleButton._delegate = this; @@ -300,7 +304,7 @@ const baseIconSizes = [16, 22, 24, 32, 48, 64]; var Dash = GObject.registerClass({ Signals: { 'icon-size-changed': {} }, -}, class Dash extends St.BoxLayout { +}, class Dash extends St.Widget { _init() { this._maxWidth = -1; this.iconSize = 64; @@ -317,26 +321,49 @@ var Dash = GObject.registerClass({ super._init({ name: 'dash', offscreen_redirect: Clutter.OffscreenRedirect.ALWAYS, + layout_manager: new Clutter.BinLayout(), + }); + + this._dashContainer = new St.BoxLayout({ x_align: Clutter.ActorAlign.CENTER, + y_expand: true, }); this._box = new St.Widget({ clip_to_allocation: true, layout_manager: new DashIconsLayout(), - x_expand: true, - x_align: Clutter.ActorAlign.CENTER, + y_expand: true, }); this._box._delegate = this; - this.add_child(this._box); + + this._dashContainer.add_child(this._box); this._showAppsIcon = new ShowAppsIcon(); this._showAppsIcon.show(false); this._showAppsIcon.icon.setIconSize(this.iconSize); this._hookUpLabel(this._showAppsIcon); - this.add_child(this._showAppsIcon); + this._dashContainer.add_child(this._showAppsIcon); this.showAppsButton = this._showAppsIcon.toggleButton; + const background = new St.Widget({ + style_class: 'dash-background', + }); + + const sizerBox = new Clutter.Actor(); + sizerBox.add_constraint(new Clutter.BindConstraint({ + source: this._showAppsIcon.icon, + coordinate: Clutter.BindCoordinate.HEIGHT, + })); + sizerBox.add_constraint(new Clutter.BindConstraint({ + source: this._dashContainer, + coordinate: Clutter.BindCoordinate.WIDTH, + })); + background.add_child(sizerBox); + + this.add_child(background); + this.add_child(this._dashContainer); + this.connect('notify::width', () => { if (this._maxWidth !== this.width) this._queueRedisplay();