diff --git a/data/gnome-shell-icons.gresource.xml b/data/gnome-shell-icons.gresource.xml index db65673b4..6ace8f0f1 100644 --- a/data/gnome-shell-icons.gresource.xml +++ b/data/gnome-shell-icons.gresource.xml @@ -37,6 +37,7 @@ scalable/actions/shell-focus-top-bar-symbolic-rtl.svg scalable/actions/shell-focus-windows-symbolic.svg scalable/status/background-app-ghost-symbolic.svg + scalable/status/check-symbolic.svg scalable/status/keyboard-brightness-high-symbolic.svg scalable/status/keyboard-brightness-medium-symbolic.svg scalable/status/keyboard-brightness-off-symbolic.svg diff --git a/data/gnome-shell-theme.gresource.xml b/data/gnome-shell-theme.gresource.xml index 4501c3195..b23b960e9 100644 --- a/data/gnome-shell-theme.gresource.xml +++ b/data/gnome-shell-theme.gresource.xml @@ -3,12 +3,6 @@ calendar-today.svg calendar-today-light.svg - checkbox.svg - checkbox-focused.svg - checkbox-off-focused-light.svg - checkbox-off-focused.svg - checkbox-off-light.svg - checkbox-off.svg gnome-shell-dark.css gnome-shell-light.css gnome-shell-high-contrast.css diff --git a/data/icons/scalable/status/check-symbolic.svg b/data/icons/scalable/status/check-symbolic.svg new file mode 100644 index 000000000..27c620d49 --- /dev/null +++ b/data/icons/scalable/status/check-symbolic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/data/theme/checkbox-focused.svg b/data/theme/checkbox-focused.svg deleted file mode 100644 index 01eb733dc..000000000 --- a/data/theme/checkbox-focused.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/data/theme/checkbox-off-focused-light.svg b/data/theme/checkbox-off-focused-light.svg deleted file mode 100644 index 47673776d..000000000 --- a/data/theme/checkbox-off-focused-light.svg +++ /dev/null @@ -1,220 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - diff --git a/data/theme/checkbox-off-focused.svg b/data/theme/checkbox-off-focused.svg deleted file mode 100644 index d5a042e97..000000000 --- a/data/theme/checkbox-off-focused.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/data/theme/checkbox-off-light.svg b/data/theme/checkbox-off-light.svg deleted file mode 100644 index 5d37c85d6..000000000 --- a/data/theme/checkbox-off-light.svg +++ /dev/null @@ -1,211 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - diff --git a/data/theme/checkbox-off.svg b/data/theme/checkbox-off.svg deleted file mode 100644 index 50eece1b0..000000000 --- a/data/theme/checkbox-off.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/data/theme/checkbox.svg b/data/theme/checkbox.svg deleted file mode 100644 index da385b628..000000000 --- a/data/theme/checkbox.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/data/theme/gnome-shell-sass/widgets/_check-box.scss b/data/theme/gnome-shell-sass/widgets/_check-box.scss index 1480ade26..f18d6418c 100644 --- a/data/theme/gnome-shell-sass/widgets/_check-box.scss +++ b/data/theme/gnome-shell-sass/widgets/_check-box.scss @@ -1,18 +1,49 @@ /* Check Boxes */ -// these are equal to the size of the SVG assets -$check_height: 24px; -$check_width: 24px; - - .check-box { StBoxLayout { spacing: .8em; } + StBin { - width: $check_width; - height: $check_height; - background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/checkbox-off-light.svg"), url("resource:///org/gnome/shell/theme/checkbox-off.svg")); + border-radius: 7px; + padding: 2px; + } + + &:focus StBin { + // Trick due to St limitations. It needs a background to draw a box-shadow + background-color: rgba(0, 0, 0, 0.01); + box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, .65); + } + + StIcon { + icon-size: 14px; + padding: 1px; + + color: transparent; + border-radius: 6px; + border: 2px solid transparentize(if($variant == 'light', black, white), .85); + } + + &:hover StIcon { + border-color: transparentize(if($variant == 'light', black, white), .8); + } + + &:active StIcon { + border-color: transparentize(if($variant == 'light', black, white), .7); + } + + &:checked StIcon { + background-color: $selected_bg_color; + color: $selected_fg_color; + border-color: transparent; + } + + &:checked:hover StIcon { + background-color: lighten($selected_bg_color, 5%); + color: lighten($selected_fg_color, 5%); + } + + &:checked:active StIcon { + background-color: darken($selected_bg_color, 7%); + color: darken($selected_fg_color, 7%); } - &:focus StBin { background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/checkbox-off-focused-light.svg"), url("resource:///org/gnome/shell/theme/checkbox-off-focused.svg"));; } - &:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox.svg"); } - &:focus:checked StBin { background-image: url("resource:///org/gnome/shell/theme/checkbox-focused.svg"); } } diff --git a/js/ui/checkBox.js b/js/ui/checkBox.js index 4a5dbba7a..398a88238 100644 --- a/js/ui/checkBox.js +++ b/js/ui/checkBox.js @@ -23,6 +23,11 @@ class CheckBox extends St.Button { this._box = new St.Bin({y_align: Clutter.ActorAlign.START}); container.add_child(this._box); + this._check = new St.Icon({ + icon_name: 'check-symbolic', + }); + this._box.set_child(this._check); + this._label = new St.Label({y_align: Clutter.ActorAlign.CENTER}); this._label.clutter_text.set_line_wrap(true); this._label.clutter_text.set_ellipsize(Pango.EllipsizeMode.NONE);