Update empty pane styling
Co-Authored-By: Mikayla Maki <mikayla.c.maki@gmail.com>
This commit is contained in:
Nate Butler
parent
20064b5629
commit
8ee25be7b9
6 changed files with 104 additions and 25 deletions
41
assets/icons/logo_256.svg
Normal file
41
assets/icons/logo_256.svg
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<svg width="257" height="258" viewBox="0 0 257 258" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_ddiii_100_57)">
|
||||
<path d="M205.45 52.5503L241.758 15.4352C244.103 13.0378 242.405 9 239.051 9H24.1479C15.782 9 9 15.782 9 24.1479V200.243M205.45 52.5503H60.8343C56.6513 52.5503 53.2604 55.9413 53.2604 60.1243V160.006M205.45 52.5503L161.189 96.574M161.189 96.574H101.071C98.9795 96.574 97.284 98.2695 97.284 100.361V120.243M161.189 96.574L97.284 160.716M97.284 160.716H157.402C159.494 160.716 161.189 159.02 161.189 156.929V136.574M97.284 160.716L53.2604 203.793M53.2604 203.793L15.4233 241.832C13.0474 244.221 14.7392 248.29 18.1082 248.29H233.852C242.218 248.29 249 241.508 249 233.142V69.5917M53.2604 203.793H197.402C201.585 203.793 204.976 200.402 204.976 196.219V96.574" stroke="black" stroke-opacity="0.05" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" shape-rendering="crispEdges"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_ddiii_100_57" x="-1" y="0" width="257" height="258.29" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="-1" dy="-1"/>
|
||||
<feGaussianBlur stdDeviation="1"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.02 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_100_57"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="-1" dy="2"/>
|
||||
<feGaussianBlur stdDeviation="0.5"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0"/>
|
||||
<feBlend mode="normal" in2="effect1_dropShadow_100_57" result="effect2_dropShadow_100_57"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_100_57" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="-1" dy="1"/>
|
||||
<feGaussianBlur stdDeviation="0.5"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect3_innerShadow_100_57"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="-1"/>
|
||||
<feGaussianBlur stdDeviation="1"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
|
||||
<feBlend mode="normal" in2="effect3_innerShadow_100_57" result="effect4_innerShadow_100_57"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="-8" dy="6"/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
|
||||
<feBlend mode="normal" in2="effect4_innerShadow_100_57" result="effect5_innerShadow_100_57"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
23
assets/icons/logo_shadow_256.svg
Normal file
23
assets/icons/logo_shadow_256.svg
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<svg width="257" height="258" viewBox="0 0 257 258" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_dd_110_85)">
|
||||
<path d="M205.45 52.5503L241.758 15.4352C244.103 13.0378 242.405 9 239.051 9H24.1479C15.782 9 9 15.782 9 24.1479V200.243M205.45 52.5503H60.8343C56.6513 52.5503 53.2604 55.9413 53.2604 60.1243V160.006M205.45 52.5503L161.189 96.574M161.189 96.574H101.071C98.9795 96.574 97.284 98.2695 97.284 100.361V120.243M161.189 96.574L97.284 160.716M97.284 160.716H157.402C159.494 160.716 161.189 159.02 161.189 156.929V136.574M97.284 160.716L53.2604 203.793M53.2604 203.793L15.4233 241.832C13.0474 244.221 14.7392 248.29 18.1082 248.29H233.852C242.218 248.29 249 241.508 249 233.142V69.5917M53.2604 203.793H197.402C201.585 203.793 204.976 200.402 204.976 196.219V96.574" stroke="black" stroke-opacity="0.01" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" shape-rendering="crispEdges"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_dd_110_85" x="0" y="0" width="256" height="257.29" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="-1" dy="-1"/>
|
||||
<feGaussianBlur stdDeviation="1"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_110_85"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="-1" dy="2"/>
|
||||
<feGaussianBlur stdDeviation="0.5"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.12 0"/>
|
||||
<feBlend mode="normal" in2="effect1_dropShadow_110_85" result="effect2_dropShadow_110_85"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_110_85" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2 KiB |
|
|
@ -76,6 +76,8 @@ pub struct Workspace {
|
|||
#[derive(Clone, Deserialize, Default)]
|
||||
pub struct BlankPaneStyle {
|
||||
pub logo: IconStyle,
|
||||
pub logo_shadow: IconStyle,
|
||||
pub logo_container: ContainerStyle,
|
||||
pub keyboard_hints: ContainerStyle,
|
||||
pub keyboard_hint: Interactive<ContainedText>,
|
||||
pub keyboard_hint_width: f32,
|
||||
|
|
|
|||
|
|
@ -1429,7 +1429,6 @@ impl Pane {
|
|||
|
||||
fn render_blank_pane(&mut self, theme: &Theme, cx: &mut RenderContext<Self>) -> ElementBox {
|
||||
let background = theme.workspace.background;
|
||||
let keystroke_style = &theme.context_menu.item;
|
||||
let theme = &theme.workspace.blank_pane;
|
||||
Stack::new()
|
||||
.with_children([
|
||||
|
|
@ -1440,7 +1439,14 @@ impl Pane {
|
|||
Flex::column()
|
||||
.align_children_center()
|
||||
.with_children([
|
||||
theme::ui::icon(&theme.logo).aligned().boxed(),
|
||||
Stack::new()
|
||||
.with_children([
|
||||
theme::ui::icon(&theme.logo_shadow).aligned().boxed(),
|
||||
theme::ui::icon(&theme.logo).aligned().boxed(),
|
||||
])
|
||||
.contained()
|
||||
.with_style(theme.logo_container)
|
||||
.boxed(),
|
||||
Flex::column()
|
||||
.with_children({
|
||||
enum KeyboardHint {}
|
||||
|
|
@ -1453,14 +1459,13 @@ impl Pane {
|
|||
idx,
|
||||
cx,
|
||||
move |state, cx| {
|
||||
let style = keyboard_hint.style_for(state, false);
|
||||
theme::ui::keystroke_label_for(
|
||||
cx.window_id(),
|
||||
workspace_id,
|
||||
text,
|
||||
&keyboard_hint.style_for(state, false),
|
||||
&keystroke_style
|
||||
.style_for(state, false)
|
||||
.keystroke,
|
||||
&style,
|
||||
&style,
|
||||
hint_action,
|
||||
)
|
||||
.boxed()
|
||||
|
|
|
|||
|
|
@ -709,7 +709,7 @@ pub fn dock_default_item_factory(
|
|||
pub fn background_actions() -> &'static [(&'static str, &'static dyn Action)] {
|
||||
&[
|
||||
("Go to file", &file_finder::Toggle),
|
||||
("Open the command palette", &command_palette::Toggle),
|
||||
("Open command palette", &command_palette::Toggle),
|
||||
("Focus the dock", &FocusDock),
|
||||
("Open recent projects", &recent_projects::OpenRecent),
|
||||
("Change your settings", &OpenSettings),
|
||||
|
|
|
|||
|
|
@ -42,38 +42,46 @@ export default function workspace(colorScheme: ColorScheme) {
|
|||
return {
|
||||
background: background(colorScheme.lowest),
|
||||
blankPane: {
|
||||
logoContainer: {
|
||||
width: 256,
|
||||
height: 256,
|
||||
},
|
||||
logo: {
|
||||
color: border(layer, "active").color,
|
||||
icon: "icons/logo_96.svg",
|
||||
color: withOpacity("#000000", colorScheme.isLight ? 0.6 : 0.8),
|
||||
icon: "icons/logo_256.svg",
|
||||
dimensions: {
|
||||
width: 272,
|
||||
height: 272,
|
||||
}
|
||||
width: 256,
|
||||
height: 256,
|
||||
},
|
||||
},
|
||||
logoShadow: {
|
||||
color: withOpacity(colorScheme.isLight ? "#FFFFFF" : colorScheme.lowest.base.default.background, colorScheme.isLight ? 1 : 0.6),
|
||||
icon: "icons/logo_shadow_256.svg",
|
||||
dimensions: {
|
||||
width: 256,
|
||||
height: 256,
|
||||
},
|
||||
},
|
||||
keyboardHints: {
|
||||
margin: {
|
||||
top: 32,
|
||||
// bottom: -8.
|
||||
top: 96,
|
||||
},
|
||||
padding: {
|
||||
top: 8,
|
||||
left: 8,
|
||||
right: 8,
|
||||
},
|
||||
background: background(colorScheme.lowest),
|
||||
border: border(layer, "active"),
|
||||
cornerRadius: 4,
|
||||
},
|
||||
keyboardHint: {
|
||||
...text(layer, "sans", "variant", { size: "sm" }),
|
||||
margin: {
|
||||
bottom: 8
|
||||
padding: {
|
||||
top: 3,
|
||||
left: 8,
|
||||
right: 8,
|
||||
bottom: 3
|
||||
},
|
||||
cornerRadius: 8,
|
||||
hover: {
|
||||
...text(layer, "sans", "hovered", { size: "sm" }),
|
||||
...text(layer, "sans", "active", { size: "sm" }),
|
||||
}
|
||||
},
|
||||
keyboardHintWidth: 272,
|
||||
keyboardHintWidth: 320,
|
||||
},
|
||||
joiningProjectAvatar: {
|
||||
cornerRadius: 40,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue