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

Merge branch 'main' into elevations

Browse Source
This commit is contained in:
K Simmons
2022-10-18 12:47:15 -07:00
parent 6dfa34fcf8 318b923bac
commit b0ddbeb0ad
273 changed files with 26504 additions and 15624 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/src/styleTree/app.ts
+8 -4
View File
@@ -1,6 +1,5 @@
import { text } from "./components";
import contactFinder from "./contactFinder";
import contactsPanel from "./contactsPanel";
import contactsPopover from "./contactsPopover";
import commandPalette from "./commandPalette";
import editor from "./editor";
@@ -12,8 +11,11 @@ import contextMenu from "./contextMenu";
import projectDiagnostics from "./projectDiagnostics";
import contactNotification from "./contactNotification";
import updateNotification from "./updateNotification";
import projectSharedNotification from "./projectSharedNotification";
import tooltip from "./tooltip";
import terminal from "./terminal";
import contactList from "./contactList";
import incomingCallNotification from "./incomingCallNotification";
import { ColorScheme } from "../themes/common/colorScheme";
// export const panel = {
@@ -26,16 +28,19 @@ export default function app(colorScheme: ColorScheme): Object {
name: colorScheme.name,
isLight: colorScheme.isLight,
},
commandPalette: commandPalette(colorScheme),
contactNotification: contactNotification(colorScheme),
projectSharedNotification: projectSharedNotification(colorScheme),
incomingCallNotification: incomingCallNotification(colorScheme),
picker: picker(colorScheme),
workspace: workspace(colorScheme),
contextMenu: contextMenu(colorScheme),
editor: editor(colorScheme),
projectDiagnostics: projectDiagnostics(colorScheme),
commandPalette: commandPalette(colorScheme),
projectPanel: projectPanel(colorScheme),
contactsPopover: contactsPopover(colorScheme),
contactsPanel: contactsPanel(colorScheme),
contactFinder: contactFinder(colorScheme),
contactList: contactList(colorScheme),
search: search(colorScheme),
breadcrumbs: {
...text(colorScheme.lowest.top, "sans", "variant"),
@@ -43,7 +48,6 @@ export default function app(colorScheme: ColorScheme): Object {
left: 6,
},
},
contactNotification: contactNotification(colorScheme),
updateNotification: updateNotification(colorScheme),
tooltip: tooltip(colorScheme),
terminal: terminal(colorScheme.lowest),
styles/src/styleTree/contactFinder.ts
+28 -2
View File
@@ -1,9 +1,11 @@
import picker from "./picker";
import { ColorScheme } from "../themes/common/colorScheme";
import { background, foreground } from "./components";
import { background, border, foreground, text } from "./components";
export default function contactFinder(colorScheme: ColorScheme) {
let layer = colorScheme.highest.top;
const sideMargin = 6;
const contactButton = {
background: background(layer, "variant"),
color: foreground(layer, "variant"),
@@ -13,7 +15,31 @@ export default function contactFinder(colorScheme: ColorScheme) {
};
return {
...picker(colorScheme),
picker: {
item: {
...picker(colorScheme).item,
margin: { left: sideMargin, right: sideMargin }
},
empty: picker(colorScheme).empty,
inputEditor: {
background: background(layer, "on"),
cornerRadius: 6,
text: text(layer, "mono",),
placeholderText: text(layer, "mono", "variant", { size: "sm" }),
selection: colorScheme.players[0],
border: border(layer),
padding: {
bottom: 4,
left: 8,
right: 8,
top: 4,
},
margin: {
left: sideMargin,
right: sideMargin,
}
}
},
rowHeight: 28,
contactAvatar: {
cornerRadius: 10,
styles/src/styleTree/contactsPanel.ts → styles/src/styleTree/contactList.ts
+58 -42
View File
@@ -13,6 +13,13 @@ export default function contactsPanel(colorScheme: ColorScheme) {
let layer = colorScheme.lowest.middle;
const contactButton = {
background: background(layer, "on"),
color: foreground(layer, "on"),
iconWidth: 8,
buttonWidth: 16,
cornerRadius: 8,
};
const projectRow = {
guestAvatarSpacing: 4,
height: 24,
@@ -39,14 +46,6 @@ export default function contactsPanel(colorScheme: ColorScheme) {
},
};
const contactButton = {
background: background(layer, "on"),
color: foreground(layer, "on"),
iconWidth: 8,
buttonWidth: 16,
cornerRadius: 8,
};
return {
background: background(layer),
padding: { top: 12, bottom: 0 },
@@ -64,23 +63,16 @@ export default function contactsPanel(colorScheme: ColorScheme) {
top: 4,
},
margin: {
left: sidePadding,
right: sidePadding,
left: 6
},
},
userQueryEditorHeight: 32,
userQueryEditorHeight: 33,
addContactButton: {
margin: { left: 6, right: 12 },
color: foreground(layer, "on"),
buttonWidth: 16,
buttonWidth: 28,
iconWidth: 16,
},
privateButton: {
iconWidth: 12,
color: foreground(layer, "on"),
cornerRadius: 5,
buttonWidth: 12,
},
rowHeight: 28,
sectionIconSize: 8,
headerRow: {
@@ -95,6 +87,26 @@ export default function contactsPanel(colorScheme: ColorScheme) {
background: background(layer, "active"),
},
},
leaveCall: {
background: background(layer),
border: border(layer),
cornerRadius: 6,
margin: {
top: 1,
},
padding: {
top: 1,
bottom: 1,
left: 7,
right: 7,
},
...text(layer, "sans", "variant", { size: "xs" }),
hover: {
...text(layer, "sans", "hovered", { size: "xs" }),
background: background(layer, "hovered"),
border: border(layer, "hovered"),
},
},
contactRow: {
padding: {
left: sidePadding,
@@ -104,20 +116,22 @@ export default function contactsPanel(colorScheme: ColorScheme) {
background: background(layer, "active"),
},
},
treeBranch: {
color: borderColor(layer),
width: 1,
hover: {
color: borderColor(layer, "hovered"),
},
active: {
color: borderColor(layer, "active"),
},
},
contactAvatar: {
cornerRadius: 10,
width: 18,
},
contactStatusFree: {
cornerRadius: 4,
padding: 4,
margin: { top: 12, left: 12 },
background: foreground(layer, "positive"),
},
contactStatusBusy: {
cornerRadius: 4,
padding: 4,
margin: { top: 12, left: 12 },
background: foreground(layer, "negative"),
},
contactUsername: {
...text(layer, "mono", { size: "sm" }),
margin: {
@@ -136,6 +150,19 @@ export default function contactsPanel(colorScheme: ColorScheme) {
background: background(layer, "on"),
color: foreground(layer, "on"),
},
callingIndicator: {
...text(layer, "mono", "variant", { size: "xs" })
},
treeBranch: {
color: borderColor(layer),
width: 1,
hover: {
color: borderColor(layer),
},
active: {
color: borderColor(layer),
},
},
projectRow: {
...projectRow,
background: background(layer, "on"),
@@ -144,22 +171,11 @@ export default function contactsPanel(colorScheme: ColorScheme) {
...text(layer, "mono", { size: "sm" }),
},
hover: {
background: background(layer, "hovered"),
background: background(layer, "on", "hovered"),
},
active: {
background: background(layer, "active"),
background: background(layer, "on", "active"),
},
},
inviteRow: {
padding: {
left: sidePadding,
right: sidePadding,
},
border: border(layer, { top: true }),
text: text(layer, "sans", { size: "sm" }),
hover: {
text: text(layer, "sans", "hovered", { size: "sm" }),
},
},
};
}
}
styles/src/styleTree/contactsPopover.ts
+25 -4
View File
@@ -1,8 +1,29 @@
import { ColorScheme } from "../themes/common/colorScheme";
import { background } from "./components";
import { background, border, text } from "./components";
export default function workspace(colorScheme: ColorScheme) {
export default function contactsPopover(colorScheme: ColorScheme) {
let layer = colorScheme.middle.middle;
const sidePadding = 12;
return {
background: background(colorScheme.lowest.middle),
};
background: background(layer),
cornerRadius: 6,
padding: { top: 6 },
margin: { top: -6 },
shadow: colorScheme.middle.shadow,
border: border(layer),
width: 300,
height: 400,
inviteRowHeight: 28,
inviteRow: {
padding: {
left: sidePadding,
right: sidePadding,
},
border: border(layer, { top: true }),
text: text(layer, "sans", "variant", { size: "sm" }),
hover: {
text: text(layer, "sans", "hovered", { size: "sm" }),
},
},
}
}
styles/src/styleTree/editor.ts
+23 -2
View File
@@ -1,4 +1,5 @@
import { fontWeights } from "../common";
import { withOpacity } from "../utils/color";
import {
ColorScheme,
Layer,
@@ -143,8 +144,14 @@ export default function editor(colorScheme: ColorScheme) {
indicator: foreground(layer, "variant"),
verticalScale: 0.55,
},
diffBackgroundDeleted: background(layer, "negative"),
diffBackgroundInserted: background(layer, "positive"),
diff: {
deleted: foreground(layer, "negative"),
modified: foreground(layer, "warning"),
inserted: foreground(layer, "positive"),
removedWidthEm: 0.275,
widthEm: 0.16,
cornerRadius: 0.05,
},
documentHighlightReadBackground: elevation.ramps
.neutral(0.5)
.alpha(0.2)
@@ -252,6 +259,20 @@ export default function editor(colorScheme: ColorScheme) {
background: background(layer, "on", "hovered"),
},
},
scrollbar: {
width: 12,
minHeightFactor: 1.0,
track: {
border: border(layer, "variant", { left: true }),
},
thumb: {
background: withOpacity(borderColor(layer, "variant"), 0.5),
border: {
width: 1,
color: withOpacity(borderColor(layer, 'variant'), 0.5),
}
}
},
compositionMark: {
underline: {
thickness: 1.0,
styles/src/styleTree/incomingCallNotification.ts
+45
View File
@@ -0,0 +1,45 @@
import { ColorScheme } from "../themes/common/colorScheme";
import { background, border, text } from "./components";
export default function incomingCallNotification(colorScheme: ColorScheme): Object {
let layer = colorScheme.middle.middle;
const avatarSize = 48;
return {
windowHeight: 74,
windowWidth: 380,
background: background(layer),
callerContainer: {
padding: 12,
},
callerAvatar: {
height: avatarSize,
width: avatarSize,
cornerRadius: avatarSize / 2,
},
callerMetadata: {
margin: { left: 10 },
},
callerUsername: {
...text(layer, "sans", { size: "sm", weight: "bold" }),
margin: { top: -3 },
},
callerMessage: {
...text(layer, "sans", "variant", { size: "xs" }),
margin: { top: -3 },
},
worktreeRoots: {
...text(layer, "sans", "variant", { size: "xs", weight: "bold" }),
margin: { top: -3 },
},
buttonWidth: 96,
acceptButton: {
background: background(layer, "accent"),
border: border(layer, { left: true, bottom: true }),
...text(layer, "sans", "positive", { size: "xs", weight: "extra_bold" })
},
declineButton: {
border: border(layer, { left: true }),
...text(layer, "sans", "negative", { size: "xs", weight: "extra_bold" })
},
};
}
styles/src/styleTree/projectSharedNotification.ts
+47
View File
@@ -0,0 +1,47 @@
import { ColorScheme } from "../themes/common/colorScheme";
import { background, border, text } from "./components";
export default function projectSharedNotification(colorScheme: ColorScheme): Object {
let elevation = colorScheme.middle;
let layer = elevation.middle;
const avatarSize = 48;
return {
windowHeight: 74,
windowWidth: 380,
background: background(layer,),
ownerContainer: {
padding: 12,
},
ownerAvatar: {
height: avatarSize,
width: avatarSize,
cornerRadius: avatarSize / 2,
},
ownerMetadata: {
margin: { left: 10 },
},
ownerUsername: {
...text(layer, "sans", { size: "sm", weight: "bold" }),
margin: { top: -3 },
},
message: {
...text(layer, "sans", "variant", { size: "xs" }),
margin: { top: -3 },
},
worktreeRoots: {
...text(layer, "sans", "variant", { size: "xs", weight: "bold" }),
margin: { top: -3 },
},
buttonWidth: 96,
openButton: {
background: background(layer, "accent"),
border: border(layer, { left: true, bottom: true, }),
...text(layer, "sans", "accent", { size: "xs", weight: "extra_bold" })
},
dismissButton: {
border: border(layer, { left: true }),
...text(layer, "sans", "variant", { size: "xs", weight: "extra_bold" })
},
};
}
styles/src/styleTree/workspace.ts
+62 -17
View File
@@ -14,6 +14,24 @@ export default function workspace(colorScheme: ColorScheme) {
const elevation = colorScheme.lowest;
const layer = elevation.bottom;
const titlebarPadding = 6;
const titlebarButton = {
cornerRadius: 6,
padding: {
top: 1,
bottom: 1,
left: 8,
right: 8,
},
...text(layer, "sans", { size: "xs" }),
background: background(layer),
border: border(layer),
hover: {
...text(layer, "sans", "hovered", { size: "xs" }),
background: background(layer, "hovered"),
border: border(elevation.top, "hovered"),
},
};
const avatarWidth = 18;
return {
background: background(layer),
@@ -25,6 +43,14 @@ export default function workspace(colorScheme: ColorScheme) {
padding: 12,
...text(layer, "sans", { size: "lg" }),
},
externalLocationMessage: {
background: background(elevation.middle, "accent"),
border: border(elevation.middle, "accent"),
cornerRadius: 6,
padding: 12,
margin: { bottom: 8, right: 8 },
...text(elevation.middle, "sans", "accent", { size: "xs" }),
},
leaderBorderOpacity: 0.7,
leaderBorderWidth: 2.0,
tabBar: tabBar(colorScheme),
@@ -45,6 +71,8 @@ export default function workspace(colorScheme: ColorScheme) {
},
statusBar: statusBar(colorScheme),
titlebar: {
avatarWidth,
avatarMargin: 8,
height: 33, // 32px + 1px for overlaid border
background: background(layer),
border: border(layer, { bottom: true, overlay: true }),
@@ -57,15 +85,21 @@ export default function workspace(colorScheme: ColorScheme) {
title: text(layer, "sans", "variant"),
// Collaborators
avatarWidth: 18,
avatarMargin: 8,
avatar: {
cornerRadius: 10,
cornerRadius: avatarWidth / 2,
border: {
color: "#00000088",
width: 1,
},
},
inactiveAvatar: {
cornerRadius: avatarWidth / 2,
border: {
color: "#00000088",
width: 1,
},
grayscale: true,
},
avatarRibbon: {
height: 3,
width: 12,
@@ -75,20 +109,7 @@ export default function workspace(colorScheme: ColorScheme) {
// Sign in buttom
// FlatButton, Variant
signInPrompt: {
...text(layer, "sans", { size: "xs" }),
background: background(layer),
border: border(layer),
cornerRadius: 6,
padding: {
top: 1,
bottom: 1,
left: 8,
right: 8,
},
hover: {
...text(layer, "sans", "hovered", { size: "xs" }),
background: background(layer, "hovered"),
},
...titlebarButton
},
// Offline Indicator
@@ -117,6 +138,30 @@ export default function workspace(colorScheme: ColorScheme) {
},
cornerRadius: 6,
},
toggleContactsButton: {
cornerRadius: 6,
color: foreground(layer),
iconWidth: 8,
buttonWidth: 20,
active: {
background: background(layer, "active"),
color: foreground(layer, "active"),
},
hover: {
background: background(layer, "hovered"),
color: foreground(layer, "hovered"),
},
},
toggleContactsBadge: {
cornerRadius: 3,
padding: 2,
margin: { top: 3, left: 3 },
border: border(layer),
background: foreground(layer, "accent"),
},
shareButton: {
...titlebarButton
}
},
toolbar: {