Merge pull request #2199 from zed-industries/welcome-experience
Welcome experience
This commit is contained in:
Mikayla Maki
@@ -20,6 +20,7 @@ import contactList from "./contactList"
|
||||
import incomingCallNotification from "./incomingCallNotification"
|
||||
import { ColorScheme } from "../themes/common/colorScheme"
|
||||
import feedback from "./feedback"
|
||||
import welcome from "./welcome"
|
||||
|
||||
export default function app(colorScheme: ColorScheme): Object {
|
||||
return {
|
||||
@@ -33,6 +34,7 @@ export default function app(colorScheme: ColorScheme): Object {
|
||||
incomingCallNotification: incomingCallNotification(colorScheme),
|
||||
picker: picker(colorScheme),
|
||||
workspace: workspace(colorScheme),
|
||||
welcome: welcome(colorScheme),
|
||||
contextMenu: contextMenu(colorScheme),
|
||||
editor: editor(colorScheme),
|
||||
projectDiagnostics: projectDiagnostics(colorScheme),
|
||||
|
||||
@@ -93,7 +93,7 @@ interface Text {
|
||||
underline?: boolean
|
||||
}
|
||||
|
||||
interface TextProperties {
|
||||
export interface TextProperties {
|
||||
size?: keyof typeof fontSizes
|
||||
weight?: FontWeight
|
||||
underline?: boolean
|
||||
|
||||
@@ -26,14 +26,19 @@ export default function contextMenu(colorScheme: ColorScheme) {
|
||||
hover: {
|
||||
background: background(layer, "hovered"),
|
||||
label: text(layer, "sans", "hovered", { size: "sm" }),
|
||||
keystroke: {
|
||||
...text(layer, "sans", "hovered", {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
padding: { left: 3, right: 3 },
|
||||
},
|
||||
},
|
||||
active: {
|
||||
background: background(layer, "active"),
|
||||
label: text(layer, "sans", "active", { size: "sm" }),
|
||||
},
|
||||
activeHover: {
|
||||
background: background(layer, "active"),
|
||||
label: text(layer, "sans", "active", { size: "sm" }),
|
||||
},
|
||||
},
|
||||
separator: {
|
||||
|
||||
@@ -29,6 +29,28 @@ export default function projectPanel(colorScheme: ColorScheme) {
|
||||
}
|
||||
|
||||
return {
|
||||
openProjectButton: {
|
||||
background: background(layer),
|
||||
border: border(layer, "active"),
|
||||
cornerRadius: 4,
|
||||
margin: {
|
||||
top: 16,
|
||||
left: 16,
|
||||
right: 16,
|
||||
},
|
||||
padding: {
|
||||
top: 3,
|
||||
bottom: 3,
|
||||
left: 7,
|
||||
right: 7,
|
||||
},
|
||||
...text(layer, "sans", "default", { size: "sm" }),
|
||||
hover: {
|
||||
...text(layer, "sans", "default", { size: "sm" }),
|
||||
background: background(layer, "hovered"),
|
||||
border: border(layer, "active"),
|
||||
},
|
||||
},
|
||||
background: background(layer),
|
||||
padding: { left: 12, right: 12, top: 6, bottom: 6 },
|
||||
indentWidth: 8,
|
||||
|
||||
@@ -0,0 +1,139 @@
|
||||
|
||||
import { ColorScheme } from "../themes/common/colorScheme";
|
||||
import { withOpacity } from "../utils/color";
|
||||
import { border, background, foreground, text, TextProperties } from "./components";
|
||||
|
||||
|
||||
export default function welcome(colorScheme: ColorScheme) {
|
||||
let layer = colorScheme.highest;
|
||||
|
||||
let checkboxBase = {
|
||||
cornerRadius: 4,
|
||||
padding: {
|
||||
left: 3,
|
||||
right: 3,
|
||||
top: 3,
|
||||
bottom: 3,
|
||||
},
|
||||
// shadow: colorScheme.popoverShadow,
|
||||
border: border(layer),
|
||||
margin: {
|
||||
right: 8,
|
||||
top: 5,
|
||||
bottom: 5
|
||||
},
|
||||
};
|
||||
|
||||
let interactive_text_size: TextProperties = { size: "sm" }
|
||||
|
||||
return {
|
||||
pageWidth: 320,
|
||||
logo: {
|
||||
color: foreground(layer, "default"),
|
||||
icon: "icons/logo_96.svg",
|
||||
dimensions: {
|
||||
width: 64,
|
||||
height: 64,
|
||||
}
|
||||
},
|
||||
logoSubheading: {
|
||||
...text(layer, "sans", "variant", { size: "md" }),
|
||||
margin: {
|
||||
top: 10,
|
||||
bottom: 7,
|
||||
},
|
||||
},
|
||||
buttonGroup: {
|
||||
margin: {
|
||||
top: 8,
|
||||
bottom: 16
|
||||
},
|
||||
},
|
||||
headingGroup: {
|
||||
margin: {
|
||||
top: 8,
|
||||
bottom: 12
|
||||
},
|
||||
},
|
||||
checkboxGroup: {
|
||||
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, "active"),
|
||||
cornerRadius: 4,
|
||||
margin: {
|
||||
top: 4,
|
||||
bottom: 4
|
||||
},
|
||||
padding: {
|
||||
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, "hovered"),
|
||||
border: border(layer, "active"),
|
||||
},
|
||||
},
|
||||
usageNote: {
|
||||
...text(layer, "sans", "variant", { size: "2xs" }),
|
||||
padding: {
|
||||
top: -4,
|
||||
|
||||
}
|
||||
},
|
||||
checkboxContainer: {
|
||||
margin: {
|
||||
top: 4,
|
||||
},
|
||||
padding: {
|
||||
bottom: 8,
|
||||
}
|
||||
},
|
||||
checkbox: {
|
||||
label: {
|
||||
...text(layer, "sans", interactive_text_size),
|
||||
// Also supports margin, container, border, etc.
|
||||
},
|
||||
icon: {
|
||||
color: foreground(layer, "on"),
|
||||
icon: "icons/check_12.svg",
|
||||
dimensions: {
|
||||
width: 12,
|
||||
height: 12,
|
||||
}
|
||||
},
|
||||
default: {
|
||||
...checkboxBase,
|
||||
background: background(layer, "default"),
|
||||
border: border(layer, "active")
|
||||
},
|
||||
checked: {
|
||||
...checkboxBase,
|
||||
background: background(layer, "hovered"),
|
||||
border: border(layer, "active")
|
||||
},
|
||||
hovered: {
|
||||
...checkboxBase,
|
||||
background: background(layer, "hovered"),
|
||||
border: border(layer, "active")
|
||||
},
|
||||
hoveredAndChecked: {
|
||||
...checkboxBase,
|
||||
background: background(layer, "hovered"),
|
||||
border: border(layer, "active")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -40,7 +40,49 @@ export default function workspace(colorScheme: ColorScheme) {
|
||||
const followerAvatarOuterWidth = followerAvatarWidth + 4
|
||||
|
||||
return {
|
||||
background: background(layer),
|
||||
background: background(colorScheme.lowest),
|
||||
blankPane: {
|
||||
logoContainer: {
|
||||
width: 256,
|
||||
height: 256,
|
||||
},
|
||||
logo: {
|
||||
color: withOpacity("#000000", colorScheme.isLight ? 0.6 : 0.8),
|
||||
icon: "icons/logo_96.svg",
|
||||
dimensions: {
|
||||
width: 256,
|
||||
height: 256,
|
||||
},
|
||||
},
|
||||
logoShadow: {
|
||||
color: withOpacity(colorScheme.isLight ? "#FFFFFF" : colorScheme.lowest.base.default.background, colorScheme.isLight ? 1 : 0.6),
|
||||
icon: "icons/logo_96.svg",
|
||||
dimensions: {
|
||||
width: 256,
|
||||
height: 256,
|
||||
},
|
||||
},
|
||||
keyboardHints: {
|
||||
margin: {
|
||||
top: 96,
|
||||
},
|
||||
cornerRadius: 4,
|
||||
},
|
||||
keyboardHint: {
|
||||
...text(layer, "sans", "variant", { size: "sm" }),
|
||||
padding: {
|
||||
top: 3,
|
||||
left: 8,
|
||||
right: 8,
|
||||
bottom: 3
|
||||
},
|
||||
cornerRadius: 8,
|
||||
hover: {
|
||||
...text(layer, "sans", "active", { size: "sm" }),
|
||||
}
|
||||
},
|
||||
keyboardHintWidth: 320,
|
||||
},
|
||||
joiningProjectAvatar: {
|
||||
cornerRadius: 40,
|
||||
width: 80,
|
||||
@@ -248,7 +290,7 @@ export default function workspace(colorScheme: ColorScheme) {
|
||||
},
|
||||
dock: {
|
||||
initialSizeRight: 640,
|
||||
initialSizeBottom: 480,
|
||||
initialSizeBottom: 304,
|
||||
wash_color: withOpacity(background(colorScheme.highest), 0.5),
|
||||
panel: {
|
||||
border: border(colorScheme.middle),
|
||||
|
||||
Reference in New Issue
Block a user