oak-team/oak-gpui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update status bar style

Browse Source
This commit is contained in:
Nate Butler
2022-04-29 00:59:08 -04:00
parent d9735f312f
commit a352f8bad4
10 changed files with 293 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/src/styleTree/statusBar.ts
+106
View File
@@ -0,0 +1,106 @@
import Theme from "../themes/theme";
import { backgroundColor, border, iconColor, text } from "./components";
export default function statusBar(theme: Theme) {
const statusContainer = {
cornerRadius: 6,
padding: { top: 3, bottom: 3, left: 6, right: 6 }
}
const diagnosticStatusContainer = {
cornerRadius: 6,
padding: { top: 1, bottom: 1, left: 6, right: 6 }
}
return {
height: 30,
itemSpacing: 8,
padding: {
top: 1,
bottom: 1,
left: 6,
right: 6,
},
border: border(theme, "primary", { top: true, overlay: true }),
cursorPosition: text(theme, "sans", "muted"),
autoUpdateProgressMessage: text(theme, "sans", "muted"),
autoUpdateDoneMessage: text(theme, "sans", "muted"),
lspStatus: {
...diagnosticStatusContainer,
iconSpacing: 4,
iconWidth: 14,
height: 18,
message: text(theme, "sans", "muted"),
iconColor: iconColor(theme, "muted"),
hover: {
message: text(theme, "sans", "primary"),
iconColor: iconColor(theme, "primary"),
background: backgroundColor(theme, 300, "hovered"),
}
},
diagnosticMessage: {
...text(theme, "sans", "muted"),
hover: text(theme, "sans", "secondary"),
},
diagnosticSummary: {
height: 16,
iconWidth: 14,
iconSpacing: 2,
summarySpacing: 6,
text: text(theme, "sans", "primary", { size: "sm" }),
iconColorOk: iconColor(theme, "secondary"),
iconColorWarning: iconColor(theme, "warning"),
iconColorError: iconColor(theme, "error"),
containerOk: {
cornerRadius: 6,
padding: { top: 3, bottom: 3, left: 7, right: 7 },
},
containerWarning: {
...diagnosticStatusContainer,
background: backgroundColor(theme, "warning"),
border: border(theme, "warning"),
},
containerError: {
...diagnosticStatusContainer,
background: backgroundColor(theme, "error"),
border: border(theme, "error"),
},
hover: {
iconColorOk: iconColor(theme, "primary"),
containerOk: {
cornerRadius: 6,
padding: { top: 3, bottom: 3, left: 7, right: 7 },
background: backgroundColor(theme, 300, "hovered"),
},
containerWarning: {
...diagnosticStatusContainer,
background: backgroundColor(theme, "warning", "hovered"),
border: border(theme, "warning"),
},
containerError: {
...diagnosticStatusContainer,
background: backgroundColor(theme, "error", "hovered"),
border: border(theme, "error"),
}
},
},
sidebarButtons: {
groupLeft: {},
groupRight: {},
item: {
...statusContainer,
iconSize: 14,
iconColor: iconColor(theme, "secondary"),
hover: {
iconColor: iconColor(theme, "primary"),
background: backgroundColor(theme, 300, "hovered"),
},
active: {
iconColor: iconColor(theme, "active"),
background: backgroundColor(theme, 300, "active"),
}
}
}
}
}
styles/src/styleTree/workspace.ts
+3 -96
View File
@@ -1,7 +1,9 @@
import Theme from "../themes/theme";
import { backgroundColor, border, iconColor, text } from "./components";
import statusBar from "./statusBar";
export default function workspace(theme: Theme) {
const tab = {
height: 32,
background: backgroundColor(theme, 300),
@@ -56,102 +58,7 @@ export default function workspace(theme: Theme) {
color: border(theme, "secondary").color,
width: 1,
},
statusBar: {
height: 30,
itemSpacing: 8,
padding: {
top: 1,
bottom: 1,
left: 6,
right: 6,
},
border: border(theme, "primary", { top: true, overlay: true }),
cursorPosition: text(theme, "sans", "muted"),
autoUpdateProgressMessage: text(theme, "sans", "muted"),
autoUpdateDoneMessage: text(theme, "sans", "muted"),
lspStatus: {
iconSpacing: 4,
iconWidth: 14,
height: 18,
cornerRadius: 6,
padding: { left: 6, right: 6 },
message: text(theme, "sans", "muted"),
iconColor: iconColor(theme, "muted"),
hover: {
message: text(theme, "sans", "primary"),
iconColor: iconColor(theme, "primary"),
background: backgroundColor(theme, 300, "hovered"),
}
},
diagnosticMessage: {
...text(theme, "sans", "muted"),
hover: text(theme, "sans", "secondary"),
},
diagnosticSummary: {
height: 16,
iconWidth: 14,
iconSpacing: 2,
summarySpacing: 6,
text: text(theme, "sans", "primary", { size: "sm" }),
iconColorOk: iconColor(theme, "secondary"),
iconColorWarning: iconColor(theme, "warning"),
iconColorError: iconColor(theme, "error"),
containerOk: {
cornerRadius: 6,
padding: { left: 6, right: 6 },
},
containerWarning: {
cornerRadius: 6,
padding: { left: 6, right: 6 },
background: backgroundColor(theme, "warning"),
border: border(theme, "warning"),
},
containerError: {
cornerRadius: 6,
padding: { left: 6, right: 6 },
background: backgroundColor(theme, "error"),
border: border(theme, "error"),
},
hover: {
iconColorOk: iconColor(theme, "primary"),
containerOk: {
cornerRadius: 6,
padding: { left: 6, right: 6 },
background: backgroundColor(theme, 300, "hovered"),
},
containerWarning: {
cornerRadius: 6,
padding: { left: 6, right: 6 },
background: backgroundColor(theme, "warning", "hovered"),
border: border(theme, "warning"),
},
containerError: {
cornerRadius: 6,
padding: { left: 6, right: 6 },
background: backgroundColor(theme, "error", "hovered"),
border: border(theme, "error"),
}
},
},
sidebarButtons: {
groupLeft: {},
groupRight: {},
item: {
iconSize: 14,
padding: { top: 3, bottom: 3, left: 6, right: 6 },
cornerRadius: 6,
iconColor: iconColor(theme, "secondary"),
hover: {
iconColor: iconColor(theme, "primary"),
background: backgroundColor(theme, 300, "hovered"),
},
active: {
iconColor: iconColor(theme, "active"),
background: backgroundColor(theme, 300, "active"),
}
},
},
},
statusBar: statusBar(theme),
titlebar: {
avatarWidth: 18,
height: 32,