mirrors/zed
1
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-12-27 19:02:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

Added basic styling for checkboxes, yay

Browse source 
Co-authored-by: Max <max@zed.dev>
This commit is contained in:
Mikayla Maki 2023-02-24 17:04:31 -08:00
parent 86e2101592
commit 118435a348
3 changed files with 39 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
crates/theme/src/theme.rs
View file

@ -860,9 +860,10 @@ pub struct WelcomeStyle {
pub struct CheckboxStyle { pub struct CheckboxStyle {
pub width: f32, pub width: f32,
pub height: f32, pub height: f32,
pub unchecked: ContainerStyle, pub default: ContainerStyle,
pub checked: ContainerStyle, pub checked: ContainerStyle,
pub hovered: ContainerStyle, pub hovered: ContainerStyle,
pub hovered_and_checked: ContainerStyle,
} }
#[derive(Clone, Deserialize, Default)] #[derive(Clone, Deserialize, Default)]

14
crates/welcome/src/welcome.rs
View file

@ -126,11 +126,17 @@ impl WelcomePage {
.with_height(style.height) .with_height(style.height)
.contained() .contained()
.with_style(if checked { .with_style(if checked {
style.checked if state.hovered() {
} else if state.hovered() { style.hovered_and_checked
style.hovered } else {
style.checked
}
} else { } else {
style.unchecked if state.hovered() {
style.hovered
} else {
style.default
}
}) })
.boxed() .boxed()
}) })

33
styles/src/styleTree/welcome.ts
View file

@ -6,9 +6,8 @@ export default function welcome(colorScheme: ColorScheme) {
let layer = colorScheme.highest; let layer = colorScheme.highest;
// TODO // TODO
let checkbox_base = { let checkboxBase = {
background: colorScheme.ramps.red(0.5).hex(), cornerRadius: 4,
cornerRadius: 8,
padding: { padding: {
left: 8, left: 8,
right: 8, right: 8,
@ -26,9 +25,31 @@ export default function welcome(colorScheme: ColorScheme) {
checkbox: { checkbox: {
width: 9, width: 9,
height: 9, height: 9,
unchecked: checkbox_base, default: {
checked: checkbox_base, ...checkboxBase,
hovered: checkbox_base background: colorScheme.ramps.blue(0.5).hex(),
},
checked: {
...checkboxBase,
background: colorScheme.ramps.red(0.5).hex(),
},
hovered: {
...checkboxBase,
background: colorScheme.ramps.blue(0.5).hex(),
border: {
color: colorScheme.ramps.green(0.5).hex(),
width: 1,
}
},
hoveredAndChecked: {
...checkboxBase,
background: colorScheme.ramps.red(0.5).hex(),
border: {
color: colorScheme.ramps.green(0.5).hex(),
width: 1,
}
}
} }
} }
} }