panel: Remove panel corners
They were a cute gimmick for a decade, now it's time to say goodbye ... 😢️ https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/5010 Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2151>
This commit is contained in:
Florian Müllner
parent
61b34ffe78
commit
4f27a6e520
@ -22,10 +22,6 @@ stage {
|
||||
&.unlock-screen,
|
||||
&:overview {
|
||||
background-color: #000;
|
||||
|
||||
.panel-corner {
|
||||
-panel-corner-opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-button {
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
/* Top Bar */
|
||||
// a.k.a. the panel
|
||||
|
||||
$panel_corner_radius: $base_border_radius+1;
|
||||
$panel_bg_color: #000;
|
||||
$panel_fg_color: if($variant == 'light', lighten($bg_color, 10%), darken($fg_color, 5%));
|
||||
$panel_height: 2.2em;
|
||||
@ -19,20 +18,6 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
|
||||
&.login-screen,
|
||||
&:overview {
|
||||
background-color: transparent;
|
||||
|
||||
.panel-corner {
|
||||
-panel-corner-opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// the rounded outset corners
|
||||
.panel-corner {
|
||||
-panel-corner-radius: $panel_corner_radius;
|
||||
-panel-corner-background-color: $panel_bg_color;
|
||||
-panel-corner-border-width: 2px;
|
||||
-panel-corner-border-color: transparent;
|
||||
-panel-corner-opacity: 1;
|
||||
transition-duration: $panel_transition_duration;
|
||||
}
|
||||
|
||||
// panel menus
|
||||
|
||||
215
js/ui/panel.js
215
js/ui/panel.js
@ -2,7 +2,6 @@
|
||||
/* exported Panel */
|
||||
|
||||
const { Atk, Clutter, GLib, GObject, Meta, Shell, St } = imports.gi;
|
||||
const Cairo = imports.cairo;
|
||||
|
||||
const Animation = imports.ui.animation;
|
||||
const { AppMenu } = imports.ui.appMenu;
|
||||
@ -344,170 +343,6 @@ class ActivitiesButton extends PanelMenu.Button {
|
||||
}
|
||||
});
|
||||
|
||||
var PanelCorner = GObject.registerClass(
|
||||
class PanelCorner extends St.DrawingArea {
|
||||
_init(side) {
|
||||
this._side = side;
|
||||
|
||||
super._init({ style_class: 'panel-corner' });
|
||||
}
|
||||
|
||||
_findRightmostButton(container) {
|
||||
if (!container.get_children)
|
||||
return null;
|
||||
|
||||
let children = container.get_children();
|
||||
|
||||
if (!children || children.length == 0)
|
||||
return null;
|
||||
|
||||
// Start at the back and work backward
|
||||
let index;
|
||||
for (index = children.length - 1; index >= 0; index--) {
|
||||
if (children[index].visible)
|
||||
break;
|
||||
}
|
||||
if (index < 0)
|
||||
return null;
|
||||
|
||||
if (!(children[index] instanceof St.Widget))
|
||||
return null;
|
||||
|
||||
if (!children[index].has_style_class_name('panel-menu') &&
|
||||
!children[index].has_style_class_name('panel-button'))
|
||||
return this._findRightmostButton(children[index]);
|
||||
|
||||
return children[index];
|
||||
}
|
||||
|
||||
_findLeftmostButton(container) {
|
||||
if (!container.get_children)
|
||||
return null;
|
||||
|
||||
let children = container.get_children();
|
||||
|
||||
if (!children || children.length == 0)
|
||||
return null;
|
||||
|
||||
// Start at the front and work forward
|
||||
let index;
|
||||
for (index = 0; index < children.length; index++) {
|
||||
if (children[index].visible)
|
||||
break;
|
||||
}
|
||||
if (index == children.length)
|
||||
return null;
|
||||
|
||||
if (!(children[index] instanceof St.Widget))
|
||||
return null;
|
||||
|
||||
if (!children[index].has_style_class_name('panel-menu') &&
|
||||
!children[index].has_style_class_name('panel-button'))
|
||||
return this._findLeftmostButton(children[index]);
|
||||
|
||||
return children[index];
|
||||
}
|
||||
|
||||
setStyleParent(box) {
|
||||
let side = this._side;
|
||||
|
||||
let rtlAwareContainer = box instanceof St.BoxLayout;
|
||||
if (rtlAwareContainer &&
|
||||
box.get_text_direction() == Clutter.TextDirection.RTL) {
|
||||
if (this._side == St.Side.LEFT)
|
||||
side = St.Side.RIGHT;
|
||||
else if (this._side == St.Side.RIGHT)
|
||||
side = St.Side.LEFT;
|
||||
}
|
||||
|
||||
let button;
|
||||
if (side == St.Side.LEFT)
|
||||
button = this._findLeftmostButton(box);
|
||||
else if (side == St.Side.RIGHT)
|
||||
button = this._findRightmostButton(box);
|
||||
|
||||
if (button) {
|
||||
if (this._button) {
|
||||
if (this._buttonStyleChangedSignalId) {
|
||||
this._button.disconnect(this._buttonStyleChangedSignalId);
|
||||
this._button.style = null;
|
||||
}
|
||||
|
||||
if (this._buttonDestroySignalId)
|
||||
this._button.disconnect(this._buttonDestroySignalId);
|
||||
}
|
||||
|
||||
this._button = button;
|
||||
|
||||
this._buttonDestroySignalId = button.connect('destroy', () => {
|
||||
if (this._button == button) {
|
||||
this._button = null;
|
||||
this._buttonStyleChangedSignalId = 0;
|
||||
}
|
||||
});
|
||||
|
||||
// Synchronize the locate button's pseudo classes with this corner
|
||||
this._buttonStyleChangedSignalId = button.connect('style-changed',
|
||||
() => {
|
||||
let pseudoClass = button.get_style_pseudo_class();
|
||||
this.set_style_pseudo_class(pseudoClass);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
vfunc_repaint() {
|
||||
let node = this.get_theme_node();
|
||||
|
||||
let cornerRadius = node.get_length("-panel-corner-radius");
|
||||
let borderWidth = node.get_length('-panel-corner-border-width');
|
||||
|
||||
let backgroundColor = node.get_color('-panel-corner-background-color');
|
||||
|
||||
let cr = this.get_context();
|
||||
cr.setOperator(Cairo.Operator.SOURCE);
|
||||
|
||||
cr.moveTo(0, 0);
|
||||
if (this._side == St.Side.LEFT) {
|
||||
cr.arc(cornerRadius,
|
||||
borderWidth + cornerRadius,
|
||||
cornerRadius, Math.PI, 3 * Math.PI / 2);
|
||||
} else {
|
||||
cr.arc(0,
|
||||
borderWidth + cornerRadius,
|
||||
cornerRadius, 3 * Math.PI / 2, 2 * Math.PI);
|
||||
}
|
||||
cr.lineTo(cornerRadius, 0);
|
||||
cr.closePath();
|
||||
|
||||
Clutter.cairo_set_source_color(cr, backgroundColor);
|
||||
cr.fill();
|
||||
|
||||
cr.$dispose();
|
||||
}
|
||||
|
||||
vfunc_style_changed() {
|
||||
super.vfunc_style_changed();
|
||||
let node = this.get_theme_node();
|
||||
|
||||
let cornerRadius = node.get_length("-panel-corner-radius");
|
||||
let borderWidth = node.get_length('-panel-corner-border-width');
|
||||
|
||||
const transitionDuration =
|
||||
node.get_transition_duration() / St.Settings.get().slow_down_factor;
|
||||
const opacity = node.get_double('-panel-corner-opacity');
|
||||
|
||||
this.set_size(cornerRadius, borderWidth + cornerRadius);
|
||||
this.translation_y = -borderWidth;
|
||||
|
||||
this.remove_transition('opacity');
|
||||
this.ease({
|
||||
opacity: opacity * 255,
|
||||
duration: transitionDuration,
|
||||
mode: Clutter.AnimationMode.EASE_IN_OUT_QUAD,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const UnsafeModeIndicator = GObject.registerClass(
|
||||
class UnsafeModeIndicator extends PanelMenu.SystemIndicator {
|
||||
_init() {
|
||||
@ -656,14 +491,6 @@ class Panel extends St.Widget {
|
||||
this._rightBox = new St.BoxLayout({ name: 'panelRight' });
|
||||
this.add_child(this._rightBox);
|
||||
|
||||
this._leftCorner = new PanelCorner(St.Side.LEFT);
|
||||
this.bind_property('style', this._leftCorner, 'style', GObject.BindingFlags.SYNC_CREATE);
|
||||
this.add_child(this._leftCorner);
|
||||
|
||||
this._rightCorner = new PanelCorner(St.Side.RIGHT);
|
||||
this.bind_property('style', this._rightCorner, 'style', GObject.BindingFlags.SYNC_CREATE);
|
||||
this.add_child(this._rightCorner);
|
||||
|
||||
Main.overview.connect('showing', () => {
|
||||
this.add_style_pseudo_class('overview');
|
||||
});
|
||||
@ -748,24 +575,6 @@ class Panel extends St.Widget {
|
||||
childBox.x2 = allocWidth;
|
||||
}
|
||||
this._rightBox.allocate(childBox);
|
||||
|
||||
let cornerWidth, cornerHeight;
|
||||
|
||||
[, cornerWidth] = this._leftCorner.get_preferred_width(-1);
|
||||
[, cornerHeight] = this._leftCorner.get_preferred_height(-1);
|
||||
childBox.x1 = 0;
|
||||
childBox.x2 = cornerWidth;
|
||||
childBox.y1 = allocHeight;
|
||||
childBox.y2 = allocHeight + cornerHeight;
|
||||
this._leftCorner.allocate(childBox);
|
||||
|
||||
[, cornerWidth] = this._rightCorner.get_preferred_width(-1);
|
||||
[, cornerHeight] = this._rightCorner.get_preferred_height(-1);
|
||||
childBox.x1 = allocWidth - cornerWidth;
|
||||
childBox.x2 = allocWidth;
|
||||
childBox.y1 = allocHeight;
|
||||
childBox.y2 = allocHeight + cornerHeight;
|
||||
this._rightCorner.allocate(childBox);
|
||||
}
|
||||
|
||||
_tryDragWindow(event) {
|
||||
@ -880,19 +689,11 @@ class Panel extends St.Widget {
|
||||
Main.messageTray.bannerAlignment = Clutter.ActorAlign.CENTER;
|
||||
|
||||
if (this._sessionStyle)
|
||||
this._removeStyleClassName(this._sessionStyle);
|
||||
this.remove_style_class_name(this._sessionStyle);
|
||||
|
||||
this._sessionStyle = Main.sessionMode.panelStyle;
|
||||
if (this._sessionStyle)
|
||||
this._addStyleClassName(this._sessionStyle);
|
||||
|
||||
if (this.get_text_direction() == Clutter.TextDirection.RTL) {
|
||||
this._leftCorner.setStyleParent(this._rightBox);
|
||||
this._rightCorner.setStyleParent(this._leftBox);
|
||||
} else {
|
||||
this._leftCorner.setStyleParent(this._leftBox);
|
||||
this._rightCorner.setStyleParent(this._rightBox);
|
||||
}
|
||||
this.add_style_class_name(this._sessionStyle);
|
||||
}
|
||||
|
||||
_hideIndicators() {
|
||||
@ -971,18 +772,6 @@ class Panel extends St.Widget {
|
||||
return indicator;
|
||||
}
|
||||
|
||||
_addStyleClassName(className) {
|
||||
this.add_style_class_name(className);
|
||||
this._rightCorner.add_style_class_name(className);
|
||||
this._leftCorner.add_style_class_name(className);
|
||||
}
|
||||
|
||||
_removeStyleClassName(className) {
|
||||
this.remove_style_class_name(className);
|
||||
this._rightCorner.remove_style_class_name(className);
|
||||
this._leftCorner.remove_style_class_name(className);
|
||||
}
|
||||
|
||||
_onMenuSet(indicator) {
|
||||
if (!indicator.menu || indicator.menu._openChangedId)
|
||||
return;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user