From 65d68d1db27ba2659de283d518d5896c26b2ee53 Mon Sep 17 00:00:00 2001 From: Evan Welsh Date: Sat, 28 May 2022 04:48:03 -0400 Subject: [PATCH] Update show apps icon for GNOME 42 changes --- _stylesheet.scss | 81 +++++++++++++-------------- appIconIndicators.js | 8 +-- appIcons.js | 129 +++++++++++++++++++++++++------------------ dash.js | 5 +- 4 files changed, 124 insertions(+), 99 deletions(-) diff --git a/_stylesheet.scss b/_stylesheet.scss index df7200b54..5519840d2 100644 --- a/_stylesheet.scss +++ b/_stylesheet.scss @@ -1,7 +1,5 @@ // From https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/c17dc9c8ecba0b542aab75f13da238f7b0690031/data/theme/gnome-shell-sass/_common.scss#L28 $base_padding: 6px; -$base_margin: 4px; -$base_spacing: 6px; $base_border_radius: 8px; $modal_radius: $base_border_radius * 2; @@ -9,15 +7,13 @@ $modal_radius: $base_border_radius * 2; // From https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/c17dc9c8ecba0b542aab75f13da238f7b0690031/data/theme/gnome-shell-sass/widgets/_dash.scss $dash_background_color: #3b3b3b; $dash_placeholder_size: 32px; -$dash_padding: $base_padding + 4px; // 10px +$dash_padding: $base_padding * 2; // 12px $dash_spacing: round($base_padding / 4); $dash_edge_items_padding: $dash_padding - $dash_spacing; -$dash_bottom_margin: $base_margin * 4; $dash_border_radius: $modal_radius * 1.5; // Stock -$dock_start_margin: $dash_bottom_margin; -$dock_side_margin: $dock_start_margin / 4; +$dock_side_margin: $dash_padding; $dock_fixed_inner_margin: $dock_side_margin; // Adapted to $dock_bottom_margin @@ -54,50 +50,55 @@ $osd_fg_color: #eeeeec; margin: 0px; padding: 0px; - .dash-background { - margin: 0; - margin-#{$side}: $dock_side_margin; - padding: 0; - } - - .dash-separator { - background-color: transparentize($osd_fg_color, 0.7); - @if is_horizontal($side) { - margin-bottom: 0; - } @else { - height: 1px; - margin: ($dash_spacing + ($dash_padding / 2)) 0; - } - } - #dashtodockDashContainer { padding: $dash_padding; padding-#{$side}: 0; padding-#{opposite($side)}: 0; } - .dash-item-container { - .app-well-app, - .show-apps { - padding: $dash_spacing; - padding-#{$side}: $dash_padding + $dock_side_margin; - padding-#{opposite($side)}: $dash_padding; - } + .app-well-app-running-dot { + margin-bottom: 0; + } + } - .app-well-app { - &.running .overview-icon { - background-image: none; - } - &.focused .overview-icon { - background-color: rgba(238, 238, 236, 0.2); - } + .dash-background { + margin: 0; + margin-#{$side}: $dock_side_margin; + padding: 0; + } + + .dash-item-container { + .app-well-app, + .show-apps { + padding: $dash_spacing; + padding-#{$side}: $dash_padding + $dock_side_margin; + padding-#{opposite($side)}: $dash_padding; + } + + .app-well-app { + &.running .overview-icon { + background-image: none; } - > StButton { - transition-duration: 250; - background-size: contain; + &.focused .overview-icon { + background-color: rgba(238, 238, 236, 0.2); } } + + > StButton { + transition-duration: 250; + background-size: contain; + } + } + + .dash-separator { + background-color: transparentize($osd_fg_color, 0.7); + @if is_horizontal($side) { + margin-bottom: 0; + } @else { + height: 1px; + margin: ($dash_spacing + ($dash_padding / 2)) 0; + } } &.shrink { @@ -116,7 +117,7 @@ $osd_fg_color: #eeeeec; .app-well-app, .show-apps { padding: shrink($dash_spacing); - padding-#{$side}: shrink($dash_padding) + $dock_side_margin; + padding-#{$side}: shrink($dash_padding); padding-#{opposite($side)}: shrink($dash_padding); } } diff --git a/appIconIndicators.js b/appIconIndicators.js index fe427574d..a0598d0fe 100644 --- a/appIconIndicators.js +++ b/appIconIndicators.js @@ -32,7 +32,7 @@ const MAX_WINDOWS_CLASSES = 4; /* - * This is the main indicator class to be used. The desired bahviour is + * This is the main indicator class to be used. The desired behavior is * obtained by composing the desired classes below based on the settings. * */ @@ -169,10 +169,10 @@ var RunningIndicatorBase = class DashToDock_RunningIndicatorBase extends Indicat } _updateDefaultDot() { - if (this._source.running) + // if (this._source.running) this._source._dot.show(); - else - this._source._dot.hide(); + // else + // this._source._dot.hide(); } _hideDefaultDot() { diff --git a/appIcons.js b/appIcons.js index cfb415f2e..f8777f5fb 100644 --- a/appIcons.js +++ b/appIcons.js @@ -1225,77 +1225,65 @@ function getInterestingWindows(windows, monitorIndex) { } /** - * A ShowAppsIcon improved class. - * - * - set label position based on dash orientation (Note, I am reusing most machinery of the appIcon class) - * - implement a popupMenu based on the AppIcon code (Note, I am reusing most machinery of the appIcon class) - * + * Use AppIcon to handle the menu for the dock icon */ var DockShowAppsIcon = GObject.registerClass({ Signals: { 'menu-state-changed': { param_types: [GObject.TYPE_BOOLEAN] }, - 'sync-tooltip': {} - } -} -, class DockShowAppsIcon extends Dash.ShowAppsIcon { - _init() { - super._init(); - - // Re-use appIcon methods - let appIconPrototype = AppDisplay.AppIcon.prototype; - this.toggleButton.y_expand = false; - this.toggleButton.connect('popup-menu', - appIconPrototype._onKeyboardPopupMenu.bind(this)); - this.toggleButton.connect('clicked', - this._removeMenuTimeout.bind(this)); - - this.reactive = true; - this.toggleButton.popupMenu = () => this.popupMenu.call(this); - this.toggleButton._removeMenuTimeout = () => this._removeMenuTimeout.call(this); + 'sync-tooltip': {}, + }, +}, class DockShowAppsIcon extends AppDisplay.AppIcon { + _init(source) { + // Skip AppIcon._init to avoid the app handling logic + AppDisplay.AppViewItem.prototype._init.call(this, {}, false, false); + + // Keep a reference to the container + this.source = source; + + this._iconActor = null; + + // Create the icon + this.icon = new IconGrid.BaseIcon(_('Show Applications'), { + setSizeManually: true, + showLabel: false, + createIcon: this._createIcon.bind(this), + }); + this.icon.y_align = Clutter.ActorAlign.CENTER; - this._menu = null; - this._menuManager = new PopupMenu.PopupMenuManager(this); - this._menuTimeoutId = 0; - } + this._iconContainer = new St.Widget({ + layout_manager: new Clutter.BinLayout(), + x_expand: true, + y_expand: true, + }); - vfunc_leave_event(leaveEvent) - { - return AppDisplay.AppIcon.prototype.vfunc_leave_event.call( - this.toggleButton, leaveEvent); - } + this.set_child(this._iconContainer); - vfunc_button_press_event(buttonPressEvent) - { - return AppDisplay.AppIcon.prototype.vfunc_button_press_event.call( - this.toggleButton, buttonPressEvent); - } + this._iconContainer.add_child(this.icon); - vfunc_touch_event(touchEvent) - { - return AppDisplay.AppIcon.prototype.vfunc_touch_event.call( - this.toggleButton, touchEvent); - } + // Setup the menu events + this.connect('popup-menu', this._onKeyboardPopupMenu.bind(this)); - showLabel() { - itemShowLabel.call(this); - } + this._menu = null; + this._menuManager = new PopupMenu.PopupMenuManager(this); - _onMenuPoppedDown() { - AppDisplay.AppIcon.prototype._onMenuPoppedDown.apply(this, arguments); + this._menuTimeoutId = 0; } - _setPopupTimeout() { - AppDisplay.AppIcon.prototype._setPopupTimeout.apply(this, arguments); + _createIcon(iconSize) { + // Use ShowAppsIcon to create the icon itself + return Dash.ShowAppsIcon.prototype._createIcon.call(this, iconSize); } - _removeMenuTimeout() { - AppDisplay.AppIcon.prototype._removeMenuTimeout.apply(this, arguments); + activate() { + // Toggle the toggle button as the primary action + // This overrides the logic to "launch" an app + this.source.toggleButton.checked = !this.source.toggleButton.checked; } popupMenu() { this._removeMenuTimeout(); - this.toggleButton.fake_release(); + this.source.toggleButton.fake_release(); if (!this._menu) { this._menu = new DockShowAppsIconMenu(this); @@ -1314,7 +1302,7 @@ var DockShowAppsIcon = GObject.registerClass({ this.emit('menu-state-changed', true); - this.toggleButton.set_hover(true); + this.source.toggleButton.set_hover(true); this._menu.popup(); this._menuManager.ignoreRelease(); this.emit('sync-tooltip'); @@ -1323,6 +1311,41 @@ var DockShowAppsIcon = GObject.registerClass({ } }); +/** + * A ShowAppsIcon improved class. + * + * - set label position based on dash orientation (Note, I am reusing most machinery of the appIcon class) + * - implement a popupMenu based on the AppIcon code (Note, I am reusing most machinery of the appIcon class) + */ +var DockShowAppsIconContainer = GObject.registerClass(class DockShowAppsIconContainer extends Dash.ShowAppsIcon { + _init() { + Dash.DashItemContainer.prototype._init.call(this); + + this.toggleButton = new St.Button({ + style_class: 'show-apps', + track_hover: true, + can_focus: true, + toggle_mode: true, + }); + + this.appIcon = new DockShowAppsIcon(this); + + this.toggleButton.add_actor(this.appIcon); + this.toggleButton._delegate = this; + + this.setChild(this.toggleButton); + this.setDragApp(null); + } + + get icon() { + return this.appIcon.icon; + } + + showLabel() { + itemShowLabel.call(this); + } +}); + /** * A menu for the showAppsIcon diff --git a/dash.js b/dash.js index 3ad75881f..0019db183 100644 --- a/dash.js +++ b/dash.js @@ -159,7 +159,8 @@ var DockDash = GObject.registerClass({ this._dashContainer.add_actor(this._scrollView); this._scrollView.add_actor(this._box); - this._showAppsIcon = new AppIcons.DockShowAppsIcon(); + this._showAppsIcon = new AppIcons.DockShowAppsIconContainer(); + this._showAppsIcon.show(false); this._showAppsIcon.icon.setIconSize(this.iconSize); this._showAppsIcon.x_expand = false; @@ -167,7 +168,7 @@ var DockDash = GObject.registerClass({ if (!this._isHorizontal) this._showAppsIcon.y_align = Clutter.ActorAlign.START; this._hookUpLabel(this._showAppsIcon); - this._showAppsIcon.connect('menu-state-changed', (_icon, opened) => { + this._showAppsIcon.appIcon.connect('menu-state-changed', (o, opened) => { this._itemMenuStateChanged(this._showAppsIcon, opened); });