mirror of
https://github.com/zed-industries/zed.git
synced 2024-11-07 20:39:04 +03:00
Tweak welcome design
Co-Authored-By: Mikayla Maki <mikayla.c.maki@gmail.com>
This commit is contained in:
Nate Butler
parent
cc33f83e4e
commit
344f59adf7
@ -855,6 +855,7 @@ pub struct FeedbackStyle {
|
||||
#[derive(Clone, Deserialize, Default)]
|
||||
pub struct WelcomeStyle {
|
||||
pub page_width: f32,
|
||||
pub logo: IconStyle,
|
||||
pub logo_subheading: ContainedText,
|
||||
pub checkbox: CheckboxStyle,
|
||||
pub button: Interactive<ContainedText>,
|
||||
@ -863,6 +864,19 @@ pub struct WelcomeStyle {
|
||||
pub checkbox_group: ContainerStyle,
|
||||
}
|
||||
|
||||
#[derive(Clone, Deserialize, Default)]
|
||||
pub struct IconStyle {
|
||||
pub color: Color,
|
||||
pub icon: String,
|
||||
pub dimensions: Dimensions,
|
||||
}
|
||||
|
||||
#[derive(Clone, Deserialize, Default)]
|
||||
pub struct Dimensions {
|
||||
pub width: f32,
|
||||
pub height: f32,
|
||||
}
|
||||
|
||||
#[derive(Clone, Deserialize, Default)]
|
||||
pub struct CheckboxStyle {
|
||||
pub check_icon: String,
|
||||
|
||||
@ -3,7 +3,7 @@ mod base_keymap_picker;
|
||||
use std::borrow::Cow;
|
||||
|
||||
use gpui::{
|
||||
elements::{Empty, Flex, Image, Label, MouseEventHandler, ParentElement, Svg},
|
||||
elements::{Empty, Flex, Label, MouseEventHandler, ParentElement, Svg},
|
||||
Action, Element, ElementBox, Entity, MouseButton, MutableAppContext, RenderContext,
|
||||
Subscription, View, ViewContext,
|
||||
};
|
||||
@ -56,10 +56,11 @@ impl View for WelcomePage {
|
||||
.with_children([
|
||||
Flex::column()
|
||||
.with_children([
|
||||
Image::new("images/zed-logo-90x90.png")
|
||||
Svg::new(theme.welcome.logo.icon.clone())
|
||||
.with_color(theme.welcome.logo.color)
|
||||
.constrained()
|
||||
.with_width(90.)
|
||||
.with_height(90.)
|
||||
.with_width(theme.welcome.logo.dimensions.width)
|
||||
.with_height(theme.welcome.logo.dimensions.height)
|
||||
.aligned()
|
||||
.contained()
|
||||
.aligned()
|
||||
@ -75,8 +76,10 @@ impl View for WelcomePage {
|
||||
])
|
||||
.contained()
|
||||
.with_style(theme.welcome.heading_group)
|
||||
.constrained()
|
||||
.with_width(width)
|
||||
.boxed(),
|
||||
Flex::row()
|
||||
Flex::column()
|
||||
.with_children([
|
||||
self.render_cta_button(
|
||||
"Choose a theme",
|
||||
@ -99,6 +102,8 @@ impl View for WelcomePage {
|
||||
])
|
||||
.contained()
|
||||
.with_style(theme.welcome.button_group)
|
||||
.constrained()
|
||||
.with_width(width)
|
||||
.boxed(),
|
||||
Flex::column()
|
||||
.with_children([
|
||||
@ -119,6 +124,8 @@ impl View for WelcomePage {
|
||||
])
|
||||
.contained()
|
||||
.with_style(theme.welcome.checkbox_group)
|
||||
.constrained()
|
||||
.with_width(width)
|
||||
.boxed(),
|
||||
])
|
||||
.constrained()
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
|
||||
import { ColorScheme } from "../themes/common/colorScheme";
|
||||
import { withOpacity } from "../utils/color";
|
||||
import { border, background, foreground, text, TextProperties } from "./components";
|
||||
|
||||
|
||||
@ -27,50 +28,61 @@ export default function welcome(colorScheme: ColorScheme) {
|
||||
|
||||
return {
|
||||
pageWidth: 320,
|
||||
logo: {
|
||||
color: foreground(layer, "default"),
|
||||
icon: "icons/logo_96.svg",
|
||||
dimensions: {
|
||||
width: 64,
|
||||
height: 64,
|
||||
}
|
||||
},
|
||||
logoSubheading: {
|
||||
...text(layer, "sans", { size: "lg" }),
|
||||
...text(layer, "sans", "variant", { size: "md" }),
|
||||
margin: {
|
||||
top: 10,
|
||||
bottom: 7,
|
||||
},
|
||||
},
|
||||
buttonGroup: {
|
||||
border: border(layer, "active"),
|
||||
margin: {
|
||||
top: 8,
|
||||
bottom: 7
|
||||
bottom: 16
|
||||
},
|
||||
},
|
||||
headingGroup: {
|
||||
margin: {
|
||||
top: 8,
|
||||
bottom: 7
|
||||
bottom: 12
|
||||
},
|
||||
},
|
||||
checkboxGroup: {
|
||||
margin: {
|
||||
top: 8,
|
||||
bottom: 7
|
||||
border: border(layer, "variant"),
|
||||
background: withOpacity(background(layer, "hovered"), 0.25),
|
||||
cornerRadius: 4,
|
||||
padding: {
|
||||
left: 12,
|
||||
top: 2,
|
||||
bottom: 2
|
||||
},
|
||||
},
|
||||
button: {
|
||||
background: background(layer),
|
||||
border: border(layer, "default"),
|
||||
border: border(layer, "active"),
|
||||
cornerRadius: 4,
|
||||
margin: {
|
||||
top: 8,
|
||||
bottom: 7
|
||||
top: 4,
|
||||
bottom: 4
|
||||
},
|
||||
padding: {
|
||||
top: 1,
|
||||
bottom: 1,
|
||||
top: 3,
|
||||
bottom: 3,
|
||||
left: 7,
|
||||
right: 7,
|
||||
},
|
||||
...text(layer, "sans", "default", interactive_text_size),
|
||||
hover: {
|
||||
...text(layer, "sans", "default", interactive_text_size),
|
||||
background: background(layer, "default"),
|
||||
background: background(layer, "hovered"),
|
||||
border: border(layer, "active"),
|
||||
},
|
||||
},
|
||||
@ -81,7 +93,7 @@ export default function welcome(colorScheme: ColorScheme) {
|
||||
},
|
||||
container: {
|
||||
margin: {
|
||||
top: 5,
|
||||
top: 4,
|
||||
},
|
||||
},
|
||||
width: 12,
|
||||
@ -101,7 +113,7 @@ export default function welcome(colorScheme: ColorScheme) {
|
||||
hovered: {
|
||||
...checkboxBase,
|
||||
background: background(layer, "hovered"),
|
||||
border: border(layer, "hovered")
|
||||
border: border(layer, "active")
|
||||
},
|
||||
hoveredAndChecked: {
|
||||
...checkboxBase,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user