style: Clean up dialogs stylesheet to fix layout issues
- remove unnecessary dialog type-specific padding, spacing and margin definitions that led to layout to problems - bump the size of user avatar in authentication dialog - nest css classes in the sass to better reflect the structure of dialog elements - sync style of audio device selector with switcher-popup style - sync text and padding styles with other elements - fix incorrect button order in audio selection dialog Closes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/7876 Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3473>
This commit is contained in:
Sam Hewitt
Marge Bot
parent
c52ac4baa8
commit
8d065b558e
@ -1,57 +1,34 @@
|
||||
/* Modal Dialogs */
|
||||
|
||||
.headline {
|
||||
@extend %title_4;
|
||||
}
|
||||
|
||||
// style for all dialogs
|
||||
.modal-dialog {
|
||||
background-color: $bg_color;
|
||||
border-radius: $alert_radius;
|
||||
box-shadow: inset 0 0 0 1px $outer_borders_color;
|
||||
padding: $base_padding * 4;
|
||||
spacing: $base_padding * 3;
|
||||
box-shadow: 0 12px 8px 12px rgba(0,0,0,0.03);
|
||||
|
||||
.modal-dialog-content-box {
|
||||
spacing: $base_margin * 8;
|
||||
margin-top: $base_margin * 2;
|
||||
margin-bottom: $base_margin * 4;
|
||||
padding-top: $base_padding * 2;
|
||||
spacing: $base_padding * 3;
|
||||
max-width: 28em;
|
||||
}
|
||||
|
||||
.modal-dialog-linked-button {
|
||||
@extend %dialog_button;
|
||||
.modal-dialog-button-box {
|
||||
padding-top: $base_padding;
|
||||
.modal-dialog-button {
|
||||
@extend %dialog_button;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* End Session Dialog */
|
||||
.end-session-dialog {
|
||||
width: 24em;
|
||||
|
||||
.end-session-dialog-battery-warning,
|
||||
.dialog-list-title {
|
||||
color: $warning_color;
|
||||
}
|
||||
}
|
||||
|
||||
/* Message Dialog */
|
||||
.message-dialog-content {
|
||||
spacing: $base_padding * 3;
|
||||
|
||||
.message-dialog-title {
|
||||
text-align: center;
|
||||
@extend %title_2;
|
||||
|
||||
&.lightweight { @extend %title_4;}
|
||||
}
|
||||
.message-dialog-description { text-align: center; }
|
||||
}
|
||||
|
||||
/* Dialog List */
|
||||
// lists in dialogs
|
||||
.dialog-list {
|
||||
spacing: $base_padding * 3;
|
||||
|
||||
.dialog-list-title {
|
||||
text-align: center;
|
||||
@extend %heading;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dialog-list-scrollview { max-height: 200px; }
|
||||
@ -63,104 +40,134 @@
|
||||
|
||||
.dialog-list-item-title { font-weight: bold; }
|
||||
.dialog-list-item-description {
|
||||
color: darken($fg_color,5%);
|
||||
@extend %caption;
|
||||
color: darken($fg_color,5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* End Session Dialog */
|
||||
.end-session-dialog {
|
||||
width: 24em;
|
||||
|
||||
// special style for session warnings
|
||||
.end-session-dialog-battery-warning,
|
||||
.dialog-list-title {
|
||||
color: $warning_color;
|
||||
background-color: transparentize($warning_color, 0.9);
|
||||
padding: $base_padding * 1.5;
|
||||
border-radius: $base_border_radius;
|
||||
margin: $base_margin 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Message Dialog */
|
||||
.message-dialog-content {
|
||||
spacing: $base_padding * 3;
|
||||
|
||||
.message-dialog-title {
|
||||
text-align: center;
|
||||
@extend %title_2;
|
||||
|
||||
&.lightweight {
|
||||
@extend %title_4;
|
||||
}
|
||||
}
|
||||
.message-dialog-description {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Run Dialog */
|
||||
.run-dialog {
|
||||
.modal-dialog-content-box {
|
||||
margin-top: $base_padding * 4;
|
||||
margin-bottom: $base_padding * 2;
|
||||
width: 24em;
|
||||
|
||||
// run dialog needs to override bottom padding
|
||||
// to account for inexplicable extra padding
|
||||
padding-bottom: $base_padding;
|
||||
|
||||
.run-dialog-entry {
|
||||
padding: $base_padding * 2 $base_padding * 1.5;
|
||||
}
|
||||
.run-dialog-entry { width: 20em; }
|
||||
.run-dialog-description {
|
||||
@extend %caption;
|
||||
text-align: center;
|
||||
color: darken($fg_color, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Password or Authentication Dialog */
|
||||
|
||||
.prompt-dialog {
|
||||
width: 28em;
|
||||
|
||||
.modal-dialog-content-box {
|
||||
margin-bottom: $base_margin * 6;
|
||||
.prompt-dialog-password-grid {
|
||||
spacing-rows: $base_margin * 2;
|
||||
spacing-columns: $base_margin;
|
||||
|
||||
.prompt-dialog-password-entry {
|
||||
width: auto;
|
||||
padding: $base_padding * 2 $base_padding * 1.5;
|
||||
// 4px (spacing) + 16px (spinner-width)
|
||||
&:ltr { margin-left: $base_margin+$base_icon_size; }
|
||||
&:rtl { margin-right: $base_margin+$base_icon_size; }
|
||||
}
|
||||
}
|
||||
|
||||
.prompt-dialog-password-layout {
|
||||
spacing: $base_margin * 2;
|
||||
}
|
||||
|
||||
.prompt-dialog-error-label,
|
||||
.prompt-dialog-info-label,
|
||||
.prompt-dialog-null-label {
|
||||
@extend %caption;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.prompt-dialog-error-label {
|
||||
color: $warning_color;
|
||||
}
|
||||
}
|
||||
|
||||
.prompt-dialog-password-grid {
|
||||
spacing-rows: $base_margin * 2;
|
||||
spacing-columns: $base_margin;
|
||||
|
||||
.prompt-dialog-password-entry {
|
||||
width: auto;
|
||||
|
||||
// 4px (spacing) + 16px (spinner-width)
|
||||
&:ltr { margin-left: $base_margin+$base_icon_size; }
|
||||
&:rtl { margin-right: $base_margin+$base_icon_size; }
|
||||
}
|
||||
}
|
||||
|
||||
.prompt-dialog-password-layout {
|
||||
spacing: $base_margin * 2;
|
||||
}
|
||||
|
||||
.prompt-dialog-password-entry {
|
||||
width: 20em;
|
||||
}
|
||||
|
||||
.prompt-dialog-error-label,
|
||||
.prompt-dialog-info-label,
|
||||
.prompt-dialog-null-label {
|
||||
text-align: center;
|
||||
@extend %caption;
|
||||
}
|
||||
|
||||
.prompt-dialog-error-label {
|
||||
color: $warning_color;
|
||||
}
|
||||
|
||||
|
||||
/* Polkit Dialog */
|
||||
|
||||
.polkit-dialog-user-layout {
|
||||
text-align: center;
|
||||
spacing: $base_margin * 2;
|
||||
margin-bottom: $base_padding;
|
||||
|
||||
.polkit-dialog-user-root-label { color: $warning_color; }
|
||||
.polkit-dialog-user-label,
|
||||
.polkit-dialog-user-root-label {
|
||||
@extend %title_4;
|
||||
}
|
||||
|
||||
.polkit-dialog-user-root-label {
|
||||
color: $warning_color;
|
||||
}
|
||||
}
|
||||
|
||||
/* Audio selection dialog */
|
||||
.audio-device-selection-dialog {
|
||||
.modal-dialog-content-box { margin-bottom: $base_margin * 7; }
|
||||
.audio-selection-box { spacing: $base_margin * 5; }
|
||||
}
|
||||
min-width: 24em;
|
||||
|
||||
.audio-selection-device {
|
||||
border-radius: $base_border_radius * 2;
|
||||
&:hover,&:focus { background-color: $hover_bg_color; }
|
||||
&:active {
|
||||
background-color: -st-accent-color;
|
||||
color: -st-accent-fg-color;
|
||||
.audio-selection-box {
|
||||
spacing: $base_padding * 2;
|
||||
|
||||
// styled similar to switcher-popup
|
||||
.audio-selection-device {
|
||||
@include tile_button($fg:$osd_fg_color, $bg:$osd_bg_color);
|
||||
|
||||
.audio-selection-device-box {
|
||||
padding: $base_padding * 2;
|
||||
spacing: $base_padding * 2;
|
||||
}
|
||||
|
||||
.audio-selection-device-icon {
|
||||
icon-size: $base_icon_size * 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.audio-selection-device-box {
|
||||
padding: $base_margin * 5;
|
||||
spacing: $base_margin * 5;
|
||||
}
|
||||
|
||||
.audio-selection-device-icon {
|
||||
icon-size: $base_icon_size * 4;
|
||||
}
|
||||
|
||||
/* Welcome dialog */
|
||||
.welcome-dialog-image {
|
||||
background-image: url("resource:///org/gnome/shell/theme/gnome-shell-start.svg");
|
||||
@ -173,4 +180,9 @@
|
||||
/* Access portal dialog */
|
||||
.access-dialog {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// specific label style for restart message
|
||||
.restart-message {
|
||||
@extend %title_4;
|
||||
}
|
||||
|
||||
@ -55,17 +55,18 @@ const AudioDeviceSelectionDialog = GObject.registerClass({
|
||||
|
||||
this.contentLayout.add_child(content);
|
||||
|
||||
this.addButton({
|
||||
action: () => this.close(),
|
||||
label: _('Cancel'),
|
||||
key: Clutter.KEY_Escape,
|
||||
});
|
||||
|
||||
if (Main.sessionMode.allowSettings) {
|
||||
this.addButton({
|
||||
action: this._openSettings.bind(this),
|
||||
label: _('Sound Settings'),
|
||||
});
|
||||
}
|
||||
this.addButton({
|
||||
action: () => this.close(),
|
||||
label: _('Cancel'),
|
||||
key: Clutter.KEY_Escape,
|
||||
});
|
||||
}
|
||||
|
||||
_getDeviceLabel(device) {
|
||||
|
||||
@ -21,7 +21,7 @@ const DialogMode = {
|
||||
CONFIRM: 1,
|
||||
};
|
||||
|
||||
const DIALOG_ICON_SIZE = 64;
|
||||
const DIALOG_ICON_SIZE = 96;
|
||||
|
||||
const DELAYED_RESET_TIMEOUT = 200;
|
||||
|
||||
|
||||
@ -56,6 +56,7 @@ class Dialog extends St.Widget {
|
||||
this._dialog.add_child(this.contentLayout);
|
||||
|
||||
this.buttonLayout = new St.Widget({
|
||||
style_class: 'modal-dialog-button-box',
|
||||
layout_manager: new Clutter.BoxLayout({
|
||||
spacing: 12,
|
||||
homogeneous: true,
|
||||
@ -124,7 +125,7 @@ class Dialog extends St.Widget {
|
||||
keys = [];
|
||||
|
||||
let button = new St.Button({
|
||||
style_class: 'modal-dialog-linked-button',
|
||||
style_class: 'modal-dialog-button',
|
||||
button_mask: St.ButtonMask.ONE | St.ButtonMask.THREE,
|
||||
reactive: true,
|
||||
can_focus: true,
|
||||
|
||||
@ -988,7 +988,7 @@ class RestartMessage extends ModalDialog.ModalDialog {
|
||||
_init(message) {
|
||||
super._init({
|
||||
shellReactive: true,
|
||||
styleClass: 'restart-message headline',
|
||||
styleClass: 'restart-message',
|
||||
shouldFadeIn: false,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user