Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft: Update show apps icon for GNOME 42 changes #1759

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Draft: Update show apps icon for GNOME 42 changes #1759

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 41 additions & 40 deletions _stylesheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,19 @@
// 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;

// 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
Expand Down Expand Up @@ -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 {
Expand All @@ -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);
}
}
Expand Down
8 changes: 4 additions & 4 deletions appIconIndicators.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*
*/
Expand Down Expand Up @@ -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();
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This block makes the dot always visible, seems like debug leftover

}

_hideDefaultDot() {
Expand Down
129 changes: 76 additions & 53 deletions appIcons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have my dock in left panel mode, and I believe this CENTER change is the reason my icon is no longer at the end (bottom). Could that orientation be detected here?

(I'm here because Fedora applied your patch to its package.)


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);
Expand All @@ -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');
Expand All @@ -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
Expand Down
5 changes: 3 additions & 2 deletions dash.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,15 +159,16 @@ 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;
this._showAppsIcon.y_expand = false;
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);
});

Expand Down