From a250d0bf19a6f999db59243c29a1c2368e03e980 Mon Sep 17 00:00:00 2001 From: JosephMcc Date: Sun, 15 Sep 2024 20:48:51 -0700 Subject: [PATCH] theme: Add support for colored buttons in dialogs Adds support for :default and :destructive-action buttons in modal dialogs. Puts them to use in the confirm and polkit dialogs. Also improves the accent background color. --- data/theme/cinnamon-sass/_colors.scss | 2 +- data/theme/cinnamon-sass/_common.scss | 32 +++++++++++++++++++ data/theme/cinnamon-sass/_drawing.scss | 7 ++++ .../theme/cinnamon-sass/widgets/_dialogs.scss | 3 ++ js/ui/dialog.js | 4 +++ js/ui/modalDialog.js | 9 ++++-- js/ui/polkitAuthenticationAgent.js | 3 +- 7 files changed, 55 insertions(+), 5 deletions(-) diff --git a/data/theme/cinnamon-sass/_colors.scss b/data/theme/cinnamon-sass/_colors.scss index d2c487ef10..b27687ee6d 100644 --- a/data/theme/cinnamon-sass/_colors.scss +++ b/data/theme/cinnamon-sass/_colors.scss @@ -19,7 +19,7 @@ $warning_color: #f8e45c; $warning_bg_color: #cd9309; $accent_color: #78aeed; -$accent_bg_color: #597493; +$accent_bg_color: #3584e4; $large_icon_color: transparentize($fg_color, 0.6); $light_text_color: mix($fg_color, $bg_color, 65%); diff --git a/data/theme/cinnamon-sass/_common.scss b/data/theme/cinnamon-sass/_common.scss index cd566b4fab..2bf856e396 100644 --- a/data/theme/cinnamon-sass/_common.scss +++ b/data/theme/cinnamon-sass/_common.scss @@ -104,6 +104,38 @@ stage { } } +%linked_button_default { + @extend %linked_button; + + border-color: darken($accent_bg_color, 20%); + + @include button(normal, $c: $accent_bg_color, $style: default); + &:hover { @include button(hover, $c: $accent_bg_color, $style: default); } + &:active { @include button(active, $c: $accent_bg_color, $style: default); } + &:checked { @include button(checked, $c: $accent_bg_color, $style: default); } + &:insensitive { + border-color: $borders_color; + + @include button(insensitive); + } +} + +%linked_button_destructive { + @extend %linked_button; + + border-color: darken($error_bg_color, 20%); + + @include button(normal, $c: $error_bg_color, $style: default); + &:hover { @include button(hover, $c: $error_bg_color, $style: default); } + &:active { @include button(active, $c: $error_bg_color, $style: default); } + &:checked { @include button(checked, $c: $error_bg_color, $style: default); } + &:insensitive { + border-color: $borders_color; + + @include button(insensitive); + } +} + // items in menus %menuitem { font-weight: normal; diff --git a/data/theme/cinnamon-sass/_drawing.scss b/data/theme/cinnamon-sass/_drawing.scss index 9e6dc9c621..0304ec7628 100644 --- a/data/theme/cinnamon-sass/_drawing.scss +++ b/data/theme/cinnamon-sass/_drawing.scss @@ -74,6 +74,13 @@ $checked_button_bg_color: $lightest_bg_color; $insensitive_button_bg_color: darken($button_bg_color, $insensitive_factor); + // background color mix override for default button style + @if $style == 'default' { + $hover_button_bg_color: lighten($button_bg_color, 10%); + $active_button_bg_color: darken($button_bg_color, 5%); + $checked_button_bg_color: darken($button_bg_color, 5%); + } + // flat style overrides @if $style == 'flat' { $insensitive_button_bg_color: $button_bg_color; diff --git a/data/theme/cinnamon-sass/widgets/_dialogs.scss b/data/theme/cinnamon-sass/widgets/_dialogs.scss index fd18951f37..b2a1814e54 100644 --- a/data/theme/cinnamon-sass/widgets/_dialogs.scss +++ b/data/theme/cinnamon-sass/widgets/_dialogs.scss @@ -13,6 +13,9 @@ .dialog-linked-button { @extend %linked_button; + + &:default { @extend %linked_button_default; } + &:destructive-action { @extend %linked_button_destructive; } } .confirm-dialog-title { diff --git a/js/ui/dialog.js b/js/ui/dialog.js index baff8613f7..281ad9dd28 100644 --- a/js/ui/dialog.js +++ b/js/ui/dialog.js @@ -128,6 +128,7 @@ class Dialog extends St.Widget { addButton(buttonInfo) { let { label, action, key } = buttonInfo; let isDefault = buttonInfo['default']; + let isDestructive = buttonInfo['destructive_action']; let keys; if (key) @@ -154,6 +155,9 @@ class Dialog extends St.Widget { if (isDefault) button.add_style_pseudo_class('default'); + if (isDestructive) + button.add_style_pseudo_class('destructive-action'); + if (this._initialKeyFocus == null || isDefault) this._setInitialKeyFocus(button); diff --git a/js/ui/modalDialog.js b/js/ui/modalDialog.js index 4f08721dff..d7cb637c5a 100644 --- a/js/ui/modalDialog.js +++ b/js/ui/modalDialog.js @@ -144,7 +144,8 @@ var ModalDialog = GObject.registerClass({ * Optional arguments include @focused, which determines whether the button * is initially focused, and @key, which is a keybinding associated with * the button press such that pressing the keybinding will have the same - * effect as clicking the button. + * effect as clicking the button. Other arguments include @default + * and @destructive_action which add additional styling. * * An example usage is * ``` @@ -157,7 +158,8 @@ var ModalDialog = GObject.registerClass({ * { * label: _("OK"), * action: this.destroy.bind(this), - * key: Clutter.KEY_Return + * key: Clutter.KEY_Return, + * default: true * } * ]); * ``` @@ -389,7 +391,8 @@ class ConfirmDialog extends ModalDialog { action: () => { this.destroy(); this.callback(); - } + }, + destructive_action: true } ]); } diff --git a/js/ui/polkitAuthenticationAgent.js b/js/ui/polkitAuthenticationAgent.js index a08b6a5dca..c1c5cf4d63 100644 --- a/js/ui/polkitAuthenticationAgent.js +++ b/js/ui/polkitAuthenticationAgent.js @@ -160,7 +160,8 @@ var AuthenticationDialog = GObject.registerClass({ this._okButton = this.addButton({ label: _("Authenticate"), action: this._onAuthenticateButtonPressed.bind(this), - reactive: false + reactive: false, + default: true }); this._okButton.bind_property('reactive', this._okButton, 'can-focus',