GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-18 22:12:21 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Flatten buttons to match macOS style (#2159)

Browse source 
* Use button gradient only on hover

* Apply hover effect to main window buttons

* Apply arbitrary change to force recreation of colors.py

* Undo arbitrary change to fix props not being created

* Remember that the comments are used for regex matching

* Yet another try

* Revert "Yet another try"

This reverts commit eaef4805c1.

* Update _root-vars.scss
This commit is contained in:
Matthias Metelka 2022-11-02 11:39:30 +01:00 committed by GitHub
parent e049e54d1f
commit 0a3ac591e6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 67 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
qt/aqt/data/web/css/toolbar.scss
View file

@ -3,7 +3,7 @@
@use "root-vars";
@use "sass/vars" as *;
@use "sass/elevation";
@use "sass/elevation" as *;
@use "sass/button-mixins" as button;
#header {
@ -15,9 +15,14 @@
border-radius: prop(border-radius);
border-bottom-left-radius: prop(border-radius-large);
border-bottom-right-radius: prop(border-radius-large);
@include button.base($with-hover: false);
@include elevation.elevation(2);
@include button.base($with-hover: false, $with-active: false);
overflow: hidden;
padding: 0;
@include elevation(1, $opacity-boost: -0.08);
&:hover {
@include elevation(2);
transition: box-shadow 0.2s linear;
}
}
body {
@ -37,7 +42,7 @@ body {
text-decoration: none;
color: color(fg);
display: inline-block;
@include button.base($elevation: 0);
@include button.base;
border: none;
&:first-child {
padding-left: 18px;

63
qt/aqt/stylesheets.py
View file

@ -4,13 +4,12 @@ from aqt import colors, props
from aqt.theme import ThemeManager
def button_gradient(start: str, end: str, shadow: str) -> str:
def button_gradient(start: str, end: str) -> str:
return f"""
qlineargradient(
spread:pad, x1:0.5, y1:0, x2:0.5, y2:1,
stop:0 {start},
stop:0.94 {end}
stop:1 {shadow}
stop:1 {end}
);
"""
@ -109,13 +108,7 @@ QPushButton {{
QPushButton,
QTabBar::tab:!selected,
QComboBox:!editable {{
background: {
button_gradient(
tm.var(colors.BUTTON_GRADIENT_START),
tm.var(colors.BUTTON_GRADIENT_END),
tm.var(colors.SHADOW)
)
};
background: {tm.var(colors.BUTTON_BG)};
border-bottom: 1px solid {tm.var(colors.SHADOW)};
}}
QPushButton:hover,
@ -123,9 +116,8 @@ QTabBar::tab:hover,
QComboBox:!editable:hover {{
background: {
button_gradient(
tm.var(colors.BUTTON_HOVER_GRADIENT_START),
tm.var(colors.BUTTON_HOVER_GRADIENT_END),
tm.var(colors.SHADOW)
tm.var(colors.BUTTON_GRADIENT_START),
tm.var(colors.BUTTON_GRADIENT_END),
)
};
}}
@ -202,21 +194,14 @@ QComboBox::down-arrow {{
image: url({tm.themed_icon("mdi:chevron-down")});
}}
QComboBox::drop-down {{
background: {
button_gradient(
tm.var(colors.BUTTON_GRADIENT_START),
tm.var(colors.BUTTON_GRADIENT_END),
tm.var(colors.SHADOW)
)
};
background: {tm.var(colors.BUTTON_BG)};
border-bottom: 1px solid {tm.var(colors.SHADOW)};
}}
QComboBox::drop-down:hover {{
background: {
button_gradient(
tm.var(colors.BUTTON_HOVER_GRADIENT_START),
tm.var(colors.BUTTON_HOVER_GRADIENT_END),
tm.var(colors.SHADOW)
tm.var(colors.BUTTON_GRADIENT_START),
tm.var(colors.BUTTON_GRADIENT_END),
)
};
border-bottom: 1px solid {tm.var(colors.SHADOW)};
@ -262,11 +247,13 @@ QTabBar::tab:last {{
}}
QTabBar::tab:selected {{
color: white;
background: {tm.var(colors.BUTTON_PRIMARY_BG)};
}}
QTabBar::tab:selected:hover {{
background: {
button_gradient(
button_gradient(
tm.var(colors.BUTTON_PRIMARY_GRADIENT_START),
tm.var(colors.BUTTON_PRIMARY_GRADIENT_END),
tm.var(colors.SHADOW)
)
};
}}
@ -286,13 +273,7 @@ QHeaderView {{
}}
QHeaderView::section {{
border: 1px solid {tm.var(colors.BORDER_SUBTLE)};
background: {
button_gradient(
tm.var(colors.BUTTON_GRADIENT_START),
tm.var(colors.BUTTON_GRADIENT_END),
tm.var(colors.SHADOW)
)
};
background: {tm.var(colors.BUTTON_BG)};
}}
QHeaderView::section:pressed,
QHeaderView::section:pressed:!first {{
@ -308,9 +289,8 @@ QHeaderView::section:pressed:!first {{
QHeaderView::section:hover {{
background: {
button_gradient(
tm.var(colors.BUTTON_HOVER_GRADIENT_START),
tm.var(colors.BUTTON_HOVER_GRADIENT_END),
tm.var(colors.SHADOW)
tm.var(colors.BUTTON_GRADIENT_START),
tm.var(colors.BUTTON_GRADIENT_END),
)
};
}}
@ -352,13 +332,7 @@ QSpinBox::down-button {{
subcontrol-origin: border;
width: 16px;
border: 1px solid {tm.var(colors.BORDER_SUBTLE)};
background: {
button_gradient(
tm.var(colors.BUTTON_GRADIENT_START),
tm.var(colors.BUTTON_GRADIENT_END),
tm.var(colors.SHADOW)
)
};
background: {tm.var(colors.BUTTON_BG)};
}}
QSpinBox::up-button:pressed,
QSpinBox::down-button:pressed {{
@ -375,9 +349,8 @@ QSpinBox::up-button:hover,
QSpinBox::down-button:hover {{
background: {
button_gradient(
tm.var(colors.BUTTON_HOVER_GRADIENT_START),
tm.var(colors.BUTTON_HOVER_GRADIENT_END),
tm.var(colors.SHADOW)
tm.var(colors.BUTTON_GRADIENT_START),
tm.var(colors.BUTTON_GRADIENT_END),
)
};
}}

35
sass/_button-mixins.scss
View file

@ -20,45 +20,31 @@
border-bottom-right-radius: var(--border-right-radius);
}
@mixin background($primary: false, $elevation: 1, $hover: true) {
@mixin background($primary: false, $hover: true) {
@if $primary {
background: linear-gradient(
180deg,
var(--button-primary-gradient-start) 0%,
var(--button-primary-gradient-end) 100%
);
background: var(--button-primary-bg);
@if $hover {
&:hover {
background: linear-gradient(
180deg,
var(--button-primary-hover-gradient-start) 0%,
var(--button-primary-hover-gradient-end) 100%
var(--button-primary-gradient-start) 0%,
var(--button-primary-gradient-end) 100%
);
border-color: var(--button-hover-border);
}
}
@if $elevation != 0 {
@include elevation($elevation, 0.2);
}
} @else {
background: linear-gradient(
180deg,
var(--button-gradient-start) 0%,
var(--button-gradient-end) 100%
);
background: var(--button-bg);
@if $hover {
&:hover {
background: linear-gradient(
180deg,
var(--button-hover-gradient-start) 0%,
var(--button-hover-gradient-end) 100%
var(--button-gradient-start) 0%,
var(--button-gradient-end) 100%
);
border-color: var(--button-hover-border);
}
}
@if $elevation != 0 {
@include elevation($elevation);
}
}
}
@ -68,8 +54,7 @@
$with-hover: true,
$with-active: true,
$active-class: "",
$with-disabled: true,
$elevation: 1
$with-disabled: true
) {
-webkit-appearance: none;
cursor: pointer;
@ -78,11 +63,12 @@
border: none;
} @else {
border: 1px solid var(--border-subtle);
border-bottom-color: var(--shadow);
}
} @else {
border: none;
}
@include background($primary, $elevation, $hover: $with-hover);
@include background($primary, $hover: $with-hover);
@if ($primary) {
color: white;
@ -110,6 +96,7 @@
color: var(--fg-disabled);
box-shadow: none !important;
background-color: var(--button-gradient-end);
border-bottom-color: var(--border-subtle);
}
}
}

2
sass/_root-vars.scss
View file

@ -8,6 +8,7 @@
/*! colors */
:root {
$colors: map.get($vars, colors);
@each $name, $val in create-vars-from-map($colors, light) {
@if str-index($name, "comment") == 1 {
/*! #{$val} */
@ -16,6 +17,7 @@
}
}
color-scheme: light;
&.night-mode {
@each $name, $val in create-vars-from-map($colors, dark) {
@if str-index($name, "comment") == 1 {

58
sass/_vars.scss
View file

@ -134,11 +134,11 @@ $vars: (
),
),
button: (
disabled: (
"Background color of disabled buttons",
bg: (
"Background color of buttons",
(
light: color.scale(palette(lightgray, 5), $alpha: -50%),
dark: color.scale(palette(darkgray, 3), $alpha: -50%),
light: white,
dark: palette(darkgray, 4),
),
),
gradient: (
@ -158,22 +158,6 @@ $vars: (
),
),
hover: (
gradient: (
start: (
"Start value of default button gradient in hover state",
(
light: palette(lightgray, 1),
dark: palette(darkgray, 3),
),
),
end: (
"End value of default button gradient in hover state",
(
light: palette(lightgray, 2),
dark: palette(darkgray, 4),
),
),
),
border: (
"Border color of default button in hover state",
(
@ -182,7 +166,21 @@ $vars: (
),
),
),
disabled: (
"Background color of disabled button",
(
light: color.scale(palette(lightgray, 5), $alpha: -50%),
dark: color.scale(palette(darkgray, 3), $alpha: -50%),
),
),
primary: (
bg: (
"Background color of primary button",
(
light: palette(blue, 4),
dark: color.scale(palette(blue, 6), $saturation: -10%),
),
),
gradient: (
start: (
"Start value of primary button gradient",
@ -199,26 +197,8 @@ $vars: (
),
),
),
hover: (
gradient: (
start: (
"Start value of primary button gradient in hover state",
(
light: palette(blue, 3),
dark: color.scale(palette(blue, 5), $saturation: -10%),
),
),
end: (
"End value of primary button gradient in hover state",
(
light: palette(blue, 5),
dark: color.scale(palette(blue, 7), $saturation: -10%),
),
),
),
),
disabled: (
"Background of primary button in disabled state",
"Background color of primary button in disabled state",
(
light: palette(blue, 3),
dark: color.scale(palette(blue, 5), $saturation: -10%),

7
sass/buttons.scss
View file

@ -25,9 +25,14 @@
button {
outline: none !important;
@include button.base;
@include elevation(1);
border-radius: var(--border-radius-large);
padding: 8px 10px;
font-weight: 500;
margin: 0 4px;
@include elevation(1, $opacity-boost: -0.08);
&:hover {
@include elevation(2);
transition: box-shadow 0.2s linear;
}
}

2
ts/components/LabelButton.svelte
View file

@ -39,7 +39,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<style lang="scss">
@use "sass/button-mixins" as button;
button {
.label-button {
@include button.base($active-class: active);
&.primary {
@include button.base($primary: true);

2
ts/components/SpinBox.svelte
View file

@ -122,7 +122,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
button {
opacity: 0;
position: absolute;
@include button.base($border: false, $elevation: 0);
@include button.base($border: false);
&.left {
inset: 0 auto 0 0;