lookingGlass: Clean up the stylesheet and improve visuals overall
- shuffle stylesheet around for readability - change names and classes of elements to be consistent - added style classes to window list elements so they can be styled - make sure all elements follow OSD style even in light theme - clean out some old styles Fixes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/7746 Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3412>
This commit is contained in:
Sam Hewitt
committed by
Jakub Steiner
Jakub Steiner
parent
459981ef79
commit
fc39c32324
@ -1,5 +1,35 @@
|
||||
/* Looking Glass */
|
||||
|
||||
// common
|
||||
.lg-dialog {
|
||||
|
||||
StEntry {
|
||||
@extend %osd_entry;
|
||||
min-height: to_em(22px);
|
||||
}
|
||||
|
||||
// override link color since OSD style
|
||||
$lg_link_color: st-lighten(-st-accent-color, 20%);
|
||||
.shell-link {
|
||||
color: $lg_link_color;
|
||||
&:hover { color: st-lighten($lg_link_color, 10%); }
|
||||
&:active { color: st-darken($lg_link_color, 10%); }
|
||||
}
|
||||
|
||||
.actor-link {
|
||||
@extend %monospace;
|
||||
color: st-darken($osd_fg_color, 20%);
|
||||
&:hover { color:$osd_fg_color; }
|
||||
&:active { color: st-lighten($osd_fg_color, 20%); }
|
||||
& StIcon { icon-size: 12px; }
|
||||
}
|
||||
}
|
||||
|
||||
.lg-completions-text {
|
||||
@extend %caption;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// Dialog
|
||||
#LookingGlassDialog {
|
||||
|
||||
@ -40,96 +70,166 @@
|
||||
}
|
||||
|
||||
.notebook-tab {
|
||||
@extend %osd_button;
|
||||
@extend %osd_button_flat;
|
||||
background-color: transparent;
|
||||
-natural-hpadding: $base_padding * 2;
|
||||
-minimum-hpadding: $base_padding * 2;
|
||||
padding: $base_padding $base_padding * 2;
|
||||
&:selected {
|
||||
@include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);
|
||||
}
|
||||
}
|
||||
|
||||
StBoxLayout#EvalBox { padding: 4px; spacing: $base_padding; padding: $base_padding; }
|
||||
StBoxLayout#ResultsArea { spacing: $base_padding; padding: $base_padding; }
|
||||
}
|
||||
|
||||
.lg-dialog {
|
||||
|
||||
StEntry {
|
||||
@extend %osd_entry;
|
||||
min-height: to_em(22px);
|
||||
}
|
||||
|
||||
.shell-link {
|
||||
color: $link_color;
|
||||
&:hover { color: st-lighten($link_color, 10%); }
|
||||
&:active { color: st-darken($link_color, 10%); }
|
||||
}
|
||||
|
||||
.actor-link {
|
||||
color: $insensitive_fg_color;
|
||||
&:hover { color: lighten($insensitive_fg_color, 20%); }
|
||||
&:active { color: darken($insensitive_fg_color, 20%); }
|
||||
|
||||
& StIcon { icon-size: 12px; }
|
||||
}
|
||||
}
|
||||
|
||||
.lg-completions-text {
|
||||
@extend %caption;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.lg-obj-inspector-title {
|
||||
spacing: $base_padding;
|
||||
}
|
||||
|
||||
.lg-obj-inspector-button {
|
||||
border: 1px solid $borders_color;
|
||||
padding: 4px;
|
||||
border-radius: $base_border_radius;
|
||||
&:hover { border: 1px solid $fg_color; }
|
||||
}
|
||||
|
||||
#EvalBox {
|
||||
@extend %monospace;
|
||||
}
|
||||
|
||||
// Extensions
|
||||
#lookingGlassExtensions { padding: $base_padding; }
|
||||
|
||||
.lg-extensions-list {
|
||||
padding: $base_padding;
|
||||
spacing: $base_padding;
|
||||
}
|
||||
|
||||
.lg-extension {
|
||||
@extend %card;
|
||||
}
|
||||
|
||||
.lg-extension-name {
|
||||
@extend %heading;
|
||||
}
|
||||
|
||||
.lg-extension-meta {
|
||||
spacing: $base_padding;
|
||||
}
|
||||
|
||||
// Inspector
|
||||
#LookingGlassPropertyInspector {
|
||||
background: $bg_color;
|
||||
border: 1px solid $borders_color;
|
||||
border-radius: $base_border_radius;
|
||||
padding: $base_padding;
|
||||
}
|
||||
|
||||
.lg-debug-flag-button {
|
||||
StLabel { padding: $base_padding, 2 * $base_padding; }
|
||||
|
||||
background-color: $osd_bg_color;
|
||||
color: $osd_fg_color;
|
||||
&:hover { color: lighten($osd_fg_color, 20%); }
|
||||
&:active { color: darken($osd_fg_color, 20%); }
|
||||
border-radius: $modal_radius;
|
||||
border: 1px solid $osd_borders_color;
|
||||
padding: $base_padding * 2;
|
||||
|
||||
@if $contrast == 'high' {
|
||||
border-color: $hc_inset_color;
|
||||
}
|
||||
|
||||
.lg-obj-inspector-title {
|
||||
@extend %heading;
|
||||
spacing: $base_margin;
|
||||
}
|
||||
|
||||
.lg-obj-inspector-close-button,
|
||||
.lg-obj-inspector-button {
|
||||
@extend %osd_button;
|
||||
padding: $base_padding $base_padding * 2;
|
||||
}
|
||||
|
||||
.lg-obj-inspector-close-button {
|
||||
margin: $base_margin;
|
||||
padding: $base_padding;
|
||||
border-radius: $forced_circular_radius;
|
||||
> StIcon {
|
||||
icon-size: $base_icon_size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lg-debug-flags-header {
|
||||
padding-top: 2 * $base_padding;
|
||||
|
||||
// Evaluator
|
||||
#LookingGlassEvaluator {
|
||||
padding: $base_padding;
|
||||
@extend %title_2;
|
||||
|
||||
.evaluator-results {
|
||||
@extend %monospace;
|
||||
spacing: $base_padding;
|
||||
}
|
||||
}
|
||||
|
||||
// Window List
|
||||
#LookingGlassWindows {
|
||||
|
||||
padding: $base_padding;
|
||||
spacing: $base_padding;
|
||||
|
||||
.lg-window {
|
||||
@extend %card_common;
|
||||
@include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);
|
||||
margin: 0;
|
||||
padding: $base_padding * 2;
|
||||
|
||||
.lg-window-name {
|
||||
@extend %heading;
|
||||
}
|
||||
|
||||
.lg-window-props-box {
|
||||
.lg-window-props {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Extensions
|
||||
#LookingGlassExtensions {
|
||||
|
||||
.lg-extensions-list {
|
||||
padding: $base_padding;
|
||||
spacing: $base_padding;
|
||||
}
|
||||
|
||||
.lg-extension {
|
||||
@extend %card_common;
|
||||
@include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);
|
||||
margin: 0;
|
||||
spacing: $base_margin;
|
||||
padding: $base_padding * 2;
|
||||
|
||||
.lg-extension-name {
|
||||
@extend %heading;
|
||||
color: $osd_fg_color !important;
|
||||
}
|
||||
|
||||
.lg-extension-description {
|
||||
}
|
||||
|
||||
.lg-extension-meta {
|
||||
spacing: $base_padding * 2;
|
||||
}
|
||||
}
|
||||
|
||||
.lg-extensions-none {
|
||||
@extend %title_4;
|
||||
color: transparentize($osd_fg_color, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
// Actors
|
||||
#LookingGlassActors {
|
||||
padding: $base_padding;
|
||||
spacing: $base_margin;
|
||||
}
|
||||
|
||||
// Debug
|
||||
#LookingGlassDebugFlags {
|
||||
|
||||
.lg-debug-flags-header {
|
||||
padding: $base_padding;
|
||||
padding-top: 2 * $base_padding;
|
||||
@extend %title_4;
|
||||
}
|
||||
|
||||
.lg-debug-flag-button {
|
||||
@extend %osd_button;
|
||||
padding: $base_padding * 1.5 $base_padding * 2;
|
||||
margin-bottom: $base_padding;
|
||||
|
||||
StLabel {
|
||||
@extend %monospace;
|
||||
font-weight: normal !important;
|
||||
}
|
||||
|
||||
// switch style overrides since lg is OSD style
|
||||
.toggle-switch {
|
||||
@if $contrast == 'high' {
|
||||
background: transparentize(white, .7);
|
||||
&:hover {
|
||||
background: transparentize(white, .6);
|
||||
}
|
||||
} @else {
|
||||
background: transparentize(white, .85);
|
||||
&:hover {
|
||||
background: transparentize(white, .8);
|
||||
}
|
||||
}
|
||||
&:checked {
|
||||
background: -st-accent-color;
|
||||
color: -st-accent-fg-color;
|
||||
|
||||
&:hover {
|
||||
background-color: st-lighten(-st-accent-color, 5%);
|
||||
color: st-lighten(-st-accent-fg-color, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -333,7 +333,7 @@ class Result extends St.BoxLayout {
|
||||
const WindowList = GObject.registerClass({
|
||||
}, class WindowList extends St.BoxLayout {
|
||||
_init(lookingGlass) {
|
||||
super._init({name: 'Windows', vertical: true, style: 'spacing: 8px'});
|
||||
super._init({name: 'LookingGlassWindows', vertical: true});
|
||||
let tracker = Shell.WindowTracker.get_default();
|
||||
this._updateId = Main.initializeDeferredWork(this, this._updateWindowList.bind(this));
|
||||
global.display.connect('window-created', this._updateWindowList.bind(this));
|
||||
@ -356,17 +356,22 @@ const WindowList = GObject.registerClass({
|
||||
metaWindow.connect('unmanaged', this._updateWindowList.bind(this));
|
||||
metaWindow._lookingGlassManaged = true;
|
||||
}
|
||||
let box = new St.BoxLayout({vertical: true});
|
||||
let box = new St.BoxLayout({vertical: true, style_class: 'lg-window'});
|
||||
this.add_child(box);
|
||||
|
||||
let header = new St.BoxLayout({vertical: true, style_class: 'lg-window-name'});
|
||||
box.add_child(header);
|
||||
|
||||
let windowLink = new ObjLink(this._lookingGlass, metaWindow, metaWindow.title);
|
||||
box.add_child(windowLink);
|
||||
let propsBox = new St.BoxLayout({vertical: true, style: 'padding-left: 6px;'});
|
||||
header.add_child(windowLink);
|
||||
|
||||
let propsBox = new St.BoxLayout({vertical: true, style_class: 'lg-window-props-box'});
|
||||
box.add_child(propsBox);
|
||||
propsBox.add_child(new St.Label({text: `wmclass: ${metaWindow.get_wm_class()}`}));
|
||||
let app = tracker.get_window_app(metaWindow);
|
||||
if (app != null && !app.is_window_backed()) {
|
||||
let icon = app.create_icon_texture(22);
|
||||
let propBox = new St.BoxLayout({style: 'spacing: 6px; '});
|
||||
let propBox = new St.BoxLayout({style_class: 'lg-window-props'});
|
||||
propsBox.add_child(propBox);
|
||||
propBox.add_child(new St.Label({text: 'app: '}));
|
||||
let appLink = new ObjLink(this._lookingGlass, app, app.get_id());
|
||||
@ -435,7 +440,7 @@ class ObjInspector extends St.ScrollView {
|
||||
}
|
||||
|
||||
button = new St.Button({
|
||||
style_class: 'window-close',
|
||||
style_class: 'lg-obj-inspector-close-button',
|
||||
icon_name: 'window-close-symbolic',
|
||||
});
|
||||
button.connect('clicked', this.close.bind(this));
|
||||
@ -716,7 +721,7 @@ export const Inspector = GObject.registerClass({
|
||||
const Extensions = GObject.registerClass({
|
||||
}, class Extensions extends St.BoxLayout {
|
||||
_init(lookingGlass) {
|
||||
super._init({vertical: true, name: 'lookingGlassExtensions'});
|
||||
super._init({vertical: true, name: 'LookingGlassExtensions'});
|
||||
|
||||
this._lookingGlass = lookingGlass;
|
||||
this._noExtensions = new St.Label({
|
||||
@ -890,7 +895,7 @@ const ActorLink = GObject.registerClass({
|
||||
_init(actor) {
|
||||
this._arrow = new St.Icon({
|
||||
icon_name: 'pan-end-symbolic',
|
||||
icon_size: 8,
|
||||
icon_size: 12,
|
||||
x_align: Clutter.ActorAlign.CENTER,
|
||||
y_align: Clutter.ActorAlign.CENTER,
|
||||
pivot_point: new Graphene.Point({x: 0.5, y: 0.5}),
|
||||
@ -938,7 +943,7 @@ const ActorLink = GObject.registerClass({
|
||||
const ActorTreeViewer = GObject.registerClass(
|
||||
class ActorTreeViewer extends St.BoxLayout {
|
||||
_init(lookingGlass) {
|
||||
super._init();
|
||||
super._init({name: 'LookingGlassActors'});
|
||||
|
||||
this._lookingGlass = lookingGlass;
|
||||
this._actorData = new Map();
|
||||
@ -1221,7 +1226,7 @@ const DebugFlags = GObject.registerClass(
|
||||
class DebugFlags extends St.BoxLayout {
|
||||
_init() {
|
||||
super._init({
|
||||
name: 'lookingGlassDebugFlags',
|
||||
name: 'LookingGlassDebugFlags',
|
||||
vertical: true,
|
||||
x_align: Clutter.ActorAlign.CENTER,
|
||||
});
|
||||
@ -1357,11 +1362,11 @@ class LookingGlass extends St.BoxLayout {
|
||||
toolbar.add_child(emptyBox);
|
||||
toolbar.add_child(notebook.tabControls);
|
||||
|
||||
this._evalBox = new St.BoxLayout({name: 'EvalBox', vertical: true});
|
||||
this._evalBox = new St.BoxLayout({name: 'LookingGlassEvaluator', vertical: true});
|
||||
notebook.appendPage('Evaluator', this._evalBox);
|
||||
|
||||
this._resultsArea = new St.BoxLayout({
|
||||
name: 'ResultsArea',
|
||||
style_class: 'evaluator-results',
|
||||
vertical: true,
|
||||
y_expand: true,
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user