From 65d68d1db27ba2659de283d518d5896c26b2ee53 Mon Sep 17 00:00:00 2001
From: Evan Welsh <contact@evanwelsh.com>
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.
*
*/
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);
});