Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

further style adjustments; cargo-run works

Browse source
This commit is contained in:
Piotr Osiewicz 2023-06-15 22:39:51 +02:00 • committed by Mikayla Maki
parent 63630949ba
commit 4bd89c4c8c
No known key found for this signature in database
7 changed files with 382 additions and 331 deletions
Download patch file Download diff file Expand all files Collapse all files

167
styles/src/styleTree/assistant.ts
View file

@ -1,85 +1,94 @@
import { ColorScheme } from "../theme/colorScheme" import { ColorScheme } from "../theme/colorScheme"
import { text, border, background, foreground } from "./components" import { text, border, background, foreground } from "./components"
import editor from "./editor" import editor from "./editor"
import { interactive } from "./interactive"
export default function assistant(colorScheme: ColorScheme) { export default function assistant(colorScheme: ColorScheme) {
const layer = colorScheme.highest const layer = colorScheme.highest
return { return {
container: { container: {
background: editor(colorScheme).background, background: editor(colorScheme).background,
padding: { left: 12 }, padding: { left: 12 },
}, },
header: { header: {
border: border(layer, "default", { bottom: true, top: true }), border: border(layer, "default", { bottom: true, top: true }),
margin: { bottom: 6, top: 6 }, margin: { bottom: 6, top: 6 },
background: editor(colorScheme).background, background: editor(colorScheme).background,
}, },
userSender: { userSender: {
...text(layer, "sans", "default", { size: "sm", weight: "bold" }), default:
}, { ...text(layer, "sans", "default", { size: "sm", weight: "bold" }) },
assistantSender: { },
...text(layer, "sans", "accent", { size: "sm", weight: "bold" }), assistantSender: {
}, default: {
systemSender: { ...text(layer, "sans", "accent", { size: "sm", weight: "bold" })
...text(layer, "sans", "variant", { size: "sm", weight: "bold" }), },
}, },
sentAt: { systemSender: {
margin: { top: 2, left: 8 }, default: {
...text(layer, "sans", "default", { size: "2xs" }), ...text(layer, "sans", "variant", { size: "sm", weight: "bold" })
}, },
modelInfoContainer: { },
margin: { right: 16, top: 4 }, sentAt: {
}, margin: { top: 2, left: 8 },
model: { ...text(layer, "sans", "default", { size: "2xs" }),
background: background(layer, "on"), },
border: border(layer, "on", { overlay: true }), modelInfoContainer: {
padding: 4, margin: { right: 16, top: 4 },
cornerRadius: 4, },
...text(layer, "sans", "default", { size: "xs" }), model: interactive({
hover: { base: {
background: background(layer, "on", "hovered"), background: background(layer, "on"),
}, border: border(layer, "on", { overlay: true }),
}, padding: 4,
remainingTokens: { cornerRadius: 4,
background: background(layer, "on"), ...text(layer, "sans", "default", { size: "xs" }),
border: border(layer, "on", { overlay: true }), }, state: {
padding: 4, hovered: {
margin: { left: 4 }, background: background(layer, "on", "hovered"),
cornerRadius: 4, }
...text(layer, "sans", "positive", { size: "xs" }), }
}, }),
noRemainingTokens: { remainingTokens: {
background: background(layer, "on"), background: background(layer, "on"),
border: border(layer, "on", { overlay: true }), border: border(layer, "on", { overlay: true }),
padding: 4, padding: 4,
margin: { left: 4 }, margin: { left: 4 },
cornerRadius: 4, cornerRadius: 4,
...text(layer, "sans", "negative", { size: "xs" }), ...text(layer, "sans", "positive", { size: "xs" }),
}, },
errorIcon: { noRemainingTokens: {
margin: { left: 8 }, background: background(layer, "on"),
color: foreground(layer, "negative"), border: border(layer, "on", { overlay: true }),
width: 12, padding: 4,
}, margin: { left: 4 },
apiKeyEditor: { cornerRadius: 4,
background: background(layer, "on"), ...text(layer, "sans", "negative", { size: "xs" }),
cornerRadius: 6, },
text: text(layer, "mono", "on"), errorIcon: {
placeholderText: text(layer, "mono", "on", "disabled", { margin: { left: 8 },
size: "xs", color: foreground(layer, "negative"),
}), width: 12,
selection: colorScheme.players[0], },
border: border(layer, "on"), apiKeyEditor: {
padding: { background: background(layer, "on"),
bottom: 4, cornerRadius: 6,
left: 8, text: text(layer, "mono", "on"),
right: 8, placeholderText: text(layer, "mono", "on", "disabled", {
top: 4, size: "xs",
}, }),
}, selection: colorScheme.players[0],
apiKeyPrompt: { border: border(layer, "on"),
padding: 10, padding: {
...text(layer, "sans", "default", { size: "xs" }), bottom: 4,
}, left: 8,
} right: 8,
top: 4,
},
},
apiKeyPrompt: {
padding: 10,
...text(layer, "sans", "default", { size: "xs" }),
},
}
} }

41
styles/src/styleTree/contactList.ts
View file

@ -192,24 +192,27 @@ export default function contactsPanel(colorScheme: ColorScheme) {
}, },
} }
), ),
projectRow: { projectRow: toggleable(interactive({
...projectRow, base: {
background: background(layer), ...projectRow,
icon: { background: background(layer),
margin: { left: nameMargin }, icon: {
color: foreground(layer, "variant"), margin: { left: nameMargin },
width: 12, color: foreground(layer, "variant"),
}, width: 12,
name: { },
...projectRow.name, name: {
...text(layer, "mono", { size: "sm" }), ...projectRow.name,
}, ...text(layer, "mono", { size: "sm" }),
hover: { },
background: background(layer, "hovered"), }, state: {
}, hovered: {
active: { background: background(layer, "hovered"),
background: background(layer, "active"), },
}, }
}, }),
{
default: { background: background(layer, "active") }
})
} }
} }

78
styles/src/styleTree/feedback.ts
View file

@ -1,44 +1,48 @@
import { ColorScheme } from "../theme/colorScheme" import { ColorScheme } from "../theme/colorScheme"
import { background, border, text } from "./components" import { background, border, text } from "./components"
import { interactive } from "./interactive"
export default function feedback(colorScheme: ColorScheme) { export default function feedback(colorScheme: ColorScheme) {
let layer = colorScheme.highest let layer = colorScheme.highest
return { return {
submit_button: { submit_button: interactive({
...text(layer, "mono", "on"), base: {
background: background(layer, "on"), ...text(layer, "mono", "on"),
cornerRadius: 6, background: background(layer, "on"),
border: border(layer, "on"), cornerRadius: 6,
margin: { border: border(layer, "on"),
right: 4, margin: {
}, right: 4,
padding: {
bottom: 2,
left: 10,
right: 10,
top: 2,
},
clicked: {
...text(layer, "mono", "on", "pressed"),
background: background(layer, "on", "pressed"),
border: border(layer, "on", "pressed"),
},
hover: {
...text(layer, "mono", "on", "hovered"),
background: background(layer, "on", "hovered"),
border: border(layer, "on", "hovered"),
},
}, },
button_margin: 8, padding: {
info_text_default: text(layer, "sans", "default", { size: "xs" }), bottom: 2,
link_text_default: text(layer, "sans", "default", { left: 10,
size: "xs", right: 10,
underline: true, top: 2,
}), }
link_text_hover: text(layer, "sans", "hovered", { }, state: {
size: "xs", clicked: {
underline: true, ...text(layer, "mono", "on", "pressed"),
}), background: background(layer, "on", "pressed"),
} border: border(layer, "on", "pressed"),
},
hovered: {
...text(layer, "mono", "on", "hovered"),
background: background(layer, "on", "hovered"),
border: border(layer, "on", "hovered"),
},
}
}),
button_margin: 8,
info_text_default: text(layer, "sans", "default", { size: "xs" }),
link_text_default: text(layer, "sans", "default", {
size: "xs",
underline: true,
}),
link_text_hover: text(layer, "sans", "hovered", {
size: "xs",
underline: true,
}),
}
} }

210
styles/src/styleTree/search.ts
View file

@ -1,113 +1,123 @@
import { ColorScheme } from "../theme/colorScheme" import { ColorScheme } from "../theme/colorScheme"
import { withOpacity } from "../theme/color" import { withOpacity } from "../theme/color"
import { background, border, foreground, text } from "./components" import { background, border, foreground, text } from "./components"
import { interactive } from "./interactive"
import { toggleable } from "./toggle"
export default function search(colorScheme: ColorScheme) { export default function search(colorScheme: ColorScheme) {
let layer = colorScheme.highest let layer = colorScheme.highest
// Search input // Search input
const editor = { const editor = {
background: background(layer), background: background(layer),
cornerRadius: 8, cornerRadius: 8,
minWidth: 200, minWidth: 200,
maxWidth: 500, maxWidth: 500,
placeholderText: text(layer, "mono", "disabled"), placeholderText: text(layer, "mono", "disabled"),
selection: colorScheme.players[0], selection: colorScheme.players[0],
text: text(layer, "mono", "default"), text: text(layer, "mono", "default"),
border: border(layer), border: border(layer),
margin: {
right: 12,
},
padding: {
top: 3,
bottom: 3,
left: 12,
right: 8,
},
}
const includeExcludeEditor = {
...editor,
minWidth: 100,
maxWidth: 250,
}
return {
// TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
matchBackground: withOpacity(foreground(layer, "accent"), 0.4),
optionButton: toggleable(interactive({
base: {
...text(layer, "mono", "on"),
background: background(layer, "on"),
cornerRadius: 6,
border: border(layer, "on"),
margin: { margin: {
right: 12, right: 4,
}, },
padding: { padding: {
top: 3, bottom: 2,
bottom: 3, left: 10,
left: 12, right: 10,
right: 8, top: 2,
}, },
} }, state: {
clicked: {
...text(layer, "mono", "on", "pressed"),
background: background(layer, "on", "pressed"),
border: border(layer, "on", "pressed"),
},
hovered: {
...text(layer, "mono", "on", "hovered"),
background: background(layer, "on", "hovered"),
border: border(layer, "on", "hovered"),
},
}
}), {
default: {
...text(layer, "mono", "on", "inverted"),
background: background(layer, "on", "inverted"),
border: border(layer, "on", "inverted"),
},
const includeExcludeEditor = { }),
...editor, editor,
minWidth: 100, invalidEditor: {
maxWidth: 250, ...editor,
} border: border(layer, "negative"),
},
return { includeExcludeEditor,
// TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive invalidIncludeExcludeEditor: {
matchBackground: withOpacity(foreground(layer, "accent"), 0.4), ...includeExcludeEditor,
optionButton: { border: border(layer, "negative"),
...text(layer, "mono", "on"), },
background: background(layer, "on"), matchIndex: {
cornerRadius: 6, ...text(layer, "mono", "variant"),
border: border(layer, "on"), padding: {
margin: { left: 6,
right: 4, },
}, },
padding: { optionButtonGroup: {
bottom: 2, padding: {
left: 10, left: 12,
right: 10, right: 12,
top: 2, },
}, },
active: { includeExcludeInputs: {
...text(layer, "mono", "on", "inverted"), ...text(layer, "mono", "variant"),
background: background(layer, "on", "inverted"), padding: {
border: border(layer, "on", "inverted"), right: 6,
}, },
clicked: { },
...text(layer, "mono", "on", "pressed"), resultsStatus: {
background: background(layer, "on", "pressed"), ...text(layer, "mono", "on"),
border: border(layer, "on", "pressed"), size: 18,
}, },
hover: { dismissButton: interactive({
...text(layer, "mono", "on", "hovered"), base: {
background: background(layer, "on", "hovered"), color: foreground(layer, "variant"),
border: border(layer, "on", "hovered"), iconWidth: 12,
}, buttonWidth: 14,
padding: {
left: 10,
right: 10,
}, },
editor, }, state: {
invalidEditor: { hovered: {
...editor, color: foreground(layer, "hovered"),
border: border(layer, "negative"), }
}, }
includeExcludeEditor, }),
invalidIncludeExcludeEditor: { }
...includeExcludeEditor,
border: border(layer, "negative"),
},
matchIndex: {
...text(layer, "mono", "variant"),
padding: {
left: 6,
},
},
optionButtonGroup: {
padding: {
left: 12,
right: 12,
},
},
includeExcludeInputs: {
...text(layer, "mono", "variant"),
padding: {
right: 6,
},
},
resultsStatus: {
...text(layer, "mono", "on"),
size: 18,
},
dismissButton: {
color: foreground(layer, "variant"),
iconWidth: 12,
buttonWidth: 14,
padding: {
left: 10,
right: 10,
},
hover: {
color: foreground(layer, "hovered"),
},
},
}
} }

71
styles/src/styleTree/simpleMessageNotification.ts
View file

@ -1,44 +1,51 @@
import { ColorScheme } from "../theme/colorScheme" import { ColorScheme } from "../theme/colorScheme"
import { background, border, foreground, text } from "./components" import { background, border, foreground, text } from "./components"
import { interactive } from "./interactive"
const headerPadding = 8 const headerPadding = 8
export default function simpleMessageNotification( export default function simpleMessageNotification(
colorScheme: ColorScheme colorScheme: ColorScheme
): Object { ): Object {
let layer = colorScheme.middle let layer = colorScheme.middle
return { return {
message: { message: {
...text(layer, "sans", { size: "xs" }), ...text(layer, "sans", { size: "xs" }),
margin: { left: headerPadding, right: headerPadding }, margin: { left: headerPadding, right: headerPadding },
},
actionMessage: interactive({
base: {
...text(layer, "sans", { size: "xs" }),
border: border(layer, "active"),
cornerRadius: 4,
padding: {
top: 3,
bottom: 3,
left: 7,
right: 7,
}, },
actionMessage: {
...text(layer, "sans", { size: "xs" }),
border: border(layer, "active"),
cornerRadius: 4,
padding: {
top: 3,
bottom: 3,
left: 7,
right: 7,
},
margin: { left: headerPadding, top: 6, bottom: 6 }, margin: { left: headerPadding, top: 6, bottom: 6 },
hover: { }, state: {
...text(layer, "sans", "default", { size: "xs" }), hovered: {
background: background(layer, "hovered"), ...text(layer, "sans", "default", { size: "xs" }),
border: border(layer, "active"), background: background(layer, "hovered"),
}, border: border(layer, "active"),
}, },
dismissButton: { }
color: foreground(layer), }),
iconWidth: 8, dismissButton: interactive({
iconHeight: 8, base: {
buttonWidth: 8, color: foreground(layer),
buttonHeight: 8, iconWidth: 8,
hover: { iconHeight: 8,
color: foreground(layer, "hovered"), buttonWidth: 8,
}, buttonHeight: 8,
}, state: {
hovered: {
color: foreground(layer, "hovered"),
}, },
} }
})
}
} }

92
styles/src/styleTree/toolbarDropdownMenu.ts
View file

@ -1,46 +1,56 @@
import { ColorScheme } from "../theme/colorScheme" import { ColorScheme } from "../theme/colorScheme"
import { background, border, text } from "./components" import { background, border, text } from "./components"
import { interactive } from "./interactive"
import { toggleable } from "./toggle"
export default function dropdownMenu(colorScheme: ColorScheme) { export default function dropdownMenu(colorScheme: ColorScheme) {
let layer = colorScheme.middle let layer = colorScheme.middle
return { return {
rowHeight: 30, rowHeight: 30,
background: background(layer), background: background(layer),
border: border(layer), border: border(layer),
shadow: colorScheme.popoverShadow, shadow: colorScheme.popoverShadow,
header: { header: interactive({
...text(layer, "sans", { size: "sm" }), base: {
secondaryText: text(layer, "sans", { size: "sm", color: "#aaaaaa" }), ...text(layer, "sans", { size: "sm" }),
secondaryTextSpacing: 10, secondaryText: text(layer, "sans", { size: "sm", color: "#aaaaaa" }),
padding: { left: 8, right: 8, top: 2, bottom: 2 }, secondaryTextSpacing: 10,
cornerRadius: 6, padding: { left: 8, right: 8, top: 2, bottom: 2 },
background: background(layer, "on"), cornerRadius: 6,
border: border(layer, "on", { overlay: true }), background: background(layer, "on"),
hover: { border: border(layer, "on", { overlay: true })
background: background(layer, "hovered"), },
...text(layer, "sans", "hovered", { size: "sm" }), state: {
} hovered: {
}, background: background(layer, "hovered"),
sectionHeader: { ...text(layer, "sans", "hovered", { size: "sm" }),
...text(layer, "sans", { size: "sm" }), }
padding: { left: 8, right: 8, top: 8, bottom: 8 }, }
}, })
item: { ,
...text(layer, "sans", { size: "sm" }), sectionHeader: {
secondaryTextSpacing: 10, ...text(layer, "sans", { size: "sm" }),
secondaryText: text(layer, "sans", { size: "sm" }), padding: { left: 8, right: 8, top: 8, bottom: 8 },
padding: { left: 18, right: 18, top: 2, bottom: 2 }, },
hover: { item: toggleable(interactive({
background: background(layer, "hovered"), base: {
...text(layer, "sans", "hovered", { size: "sm" }), ...text(layer, "sans", { size: "sm" }),
}, secondaryTextSpacing: 10,
active: { secondaryText: text(layer, "sans", { size: "sm" }),
background: background(layer, "active"), padding: { left: 18, right: 18, top: 2, bottom: 2 }
}, }, state: {
activeHover: { hovered: {
background: background(layer, "active"), background: background(layer, "hovered"),
}, ...text(layer, "sans", "hovered", { size: "sm" }),
}, }
} }
}), {
default: {
background: background(layer, "active"),
},
hovered: {
background: background(layer, "active"),
},
})
}
} }

54
styles/src/styleTree/updateNotification.ts
View file

@ -1,31 +1,39 @@
import { ColorScheme } from "../theme/colorScheme" import { ColorScheme } from "../theme/colorScheme"
import { foreground, text } from "./components" import { foreground, text } from "./components"
import { interactive } from "./interactive"
const headerPadding = 8 const headerPadding = 8
export default function updateNotification(colorScheme: ColorScheme): Object { export default function updateNotification(colorScheme: ColorScheme): Object {
let layer = colorScheme.middle let layer = colorScheme.middle
return { return {
message: { message: {
...text(layer, "sans", { size: "xs" }), ...text(layer, "sans", { size: "xs" }),
margin: { left: headerPadding, right: headerPadding }, margin: { left: headerPadding, right: headerPadding },
},
actionMessage: interactive({
base: {
...text(layer, "sans", { size: "xs" }),
margin: { left: headerPadding, top: 6, bottom: 6 }
}, state: {
hovered: {
color: foreground(layer, "hovered"),
}
}
}),
dismissButton: interactive({
base: {
color: foreground(layer),
iconWidth: 8,
iconHeight: 8,
buttonWidth: 8,
buttonHeight: 8
}, state: {
hovered: {
color: foreground(layer, "hovered"),
}, },
actionMessage: { },
...text(layer, "sans", { size: "xs" }), })
margin: { left: headerPadding, top: 6, bottom: 6 },
hover: { }
color: foreground(layer, "hovered"),
},
},
dismissButton: {
color: foreground(layer),
iconWidth: 8,
iconHeight: 8,
buttonWidth: 8,
buttonHeight: 8,
hover: {
color: foreground(layer, "hovered"),
},
},
}
} }