From 4bd89c4c8c8b6860050c09d8457fac1baebfee65 Mon Sep 17 00:00:00 2001 From: Piotr Osiewicz <24362066+osiewicz@users.noreply.github.com> Date: Thu, 15 Jun 2023 22:39:51 +0200 Subject: [PATCH] further style adjustments; cargo-run works --- styles/src/styleTree/assistant.ts | 167 +++++++------- styles/src/styleTree/contactList.ts | 41 ++-- styles/src/styleTree/feedback.ts | 78 +++---- styles/src/styleTree/search.ts | 208 +++++++++--------- .../styleTree/simpleMessageNotification.ts | 71 +++--- styles/src/styleTree/toolbarDropdownMenu.ts | 92 ++++---- styles/src/styleTree/updateNotification.ts | 54 +++-- 7 files changed, 381 insertions(+), 330 deletions(-) diff --git a/styles/src/styleTree/assistant.ts b/styles/src/styleTree/assistant.ts index bbb4aae5e1b9d35f21f2d78897f368691c006e72..d501237721fcb5196ed1c3082ee4522548e5cd50 100644 --- a/styles/src/styleTree/assistant.ts +++ b/styles/src/styleTree/assistant.ts @@ -1,85 +1,94 @@ import { ColorScheme } from "../theme/colorScheme" import { text, border, background, foreground } from "./components" import editor from "./editor" +import { interactive } from "./interactive" export default function assistant(colorScheme: ColorScheme) { - const layer = colorScheme.highest - return { - container: { - background: editor(colorScheme).background, - padding: { left: 12 }, - }, - header: { - border: border(layer, "default", { bottom: true, top: true }), - margin: { bottom: 6, top: 6 }, - background: editor(colorScheme).background, - }, - userSender: { - ...text(layer, "sans", "default", { size: "sm", weight: "bold" }), - }, - assistantSender: { - ...text(layer, "sans", "accent", { size: "sm", weight: "bold" }), - }, - systemSender: { - ...text(layer, "sans", "variant", { size: "sm", weight: "bold" }), - }, - sentAt: { - margin: { top: 2, left: 8 }, - ...text(layer, "sans", "default", { size: "2xs" }), - }, - modelInfoContainer: { - margin: { right: 16, top: 4 }, - }, - model: { - background: background(layer, "on"), - border: border(layer, "on", { overlay: true }), - padding: 4, - cornerRadius: 4, - ...text(layer, "sans", "default", { size: "xs" }), - hover: { - background: background(layer, "on", "hovered"), - }, - }, - remainingTokens: { - background: background(layer, "on"), - border: border(layer, "on", { overlay: true }), - padding: 4, - margin: { left: 4 }, - cornerRadius: 4, - ...text(layer, "sans", "positive", { size: "xs" }), - }, - noRemainingTokens: { - background: background(layer, "on"), - border: border(layer, "on", { overlay: true }), - padding: 4, - margin: { left: 4 }, - cornerRadius: 4, - ...text(layer, "sans", "negative", { size: "xs" }), - }, - errorIcon: { - margin: { left: 8 }, - color: foreground(layer, "negative"), - width: 12, - }, - apiKeyEditor: { - background: background(layer, "on"), - cornerRadius: 6, - text: text(layer, "mono", "on"), - placeholderText: text(layer, "mono", "on", "disabled", { - size: "xs", - }), - selection: colorScheme.players[0], - border: border(layer, "on"), - padding: { - bottom: 4, - left: 8, - right: 8, - top: 4, - }, - }, - apiKeyPrompt: { - padding: 10, - ...text(layer, "sans", "default", { size: "xs" }), - }, - } + const layer = colorScheme.highest + return { + container: { + background: editor(colorScheme).background, + padding: { left: 12 }, + }, + header: { + border: border(layer, "default", { bottom: true, top: true }), + margin: { bottom: 6, top: 6 }, + background: editor(colorScheme).background, + }, + userSender: { + default: + { ...text(layer, "sans", "default", { size: "sm", weight: "bold" }) }, + }, + assistantSender: { + default: { + ...text(layer, "sans", "accent", { size: "sm", weight: "bold" }) + }, + }, + systemSender: { + default: { + ...text(layer, "sans", "variant", { size: "sm", weight: "bold" }) + }, + }, + sentAt: { + margin: { top: 2, left: 8 }, + ...text(layer, "sans", "default", { size: "2xs" }), + }, + modelInfoContainer: { + margin: { right: 16, top: 4 }, + }, + model: interactive({ + base: { + background: background(layer, "on"), + border: border(layer, "on", { overlay: true }), + padding: 4, + cornerRadius: 4, + ...text(layer, "sans", "default", { size: "xs" }), + }, state: { + hovered: { + background: background(layer, "on", "hovered"), + } + } + }), + remainingTokens: { + background: background(layer, "on"), + border: border(layer, "on", { overlay: true }), + padding: 4, + margin: { left: 4 }, + cornerRadius: 4, + ...text(layer, "sans", "positive", { size: "xs" }), + }, + noRemainingTokens: { + background: background(layer, "on"), + border: border(layer, "on", { overlay: true }), + padding: 4, + margin: { left: 4 }, + cornerRadius: 4, + ...text(layer, "sans", "negative", { size: "xs" }), + }, + errorIcon: { + margin: { left: 8 }, + color: foreground(layer, "negative"), + width: 12, + }, + apiKeyEditor: { + background: background(layer, "on"), + cornerRadius: 6, + text: text(layer, "mono", "on"), + placeholderText: text(layer, "mono", "on", "disabled", { + size: "xs", + }), + selection: colorScheme.players[0], + border: border(layer, "on"), + padding: { + bottom: 4, + left: 8, + right: 8, + top: 4, + }, + }, + apiKeyPrompt: { + padding: 10, + ...text(layer, "sans", "default", { size: "xs" }), + }, + } } diff --git a/styles/src/styleTree/contactList.ts b/styles/src/styleTree/contactList.ts index 5837720401bc40a7e991b0c16f2cee8cdc02154a..4309343ed257bad38b40b56767bef46bed57625d 100644 --- a/styles/src/styleTree/contactList.ts +++ b/styles/src/styleTree/contactList.ts @@ -192,24 +192,27 @@ export default function contactsPanel(colorScheme: ColorScheme) { }, } ), - projectRow: { - ...projectRow, - background: background(layer), - icon: { - margin: { left: nameMargin }, - color: foreground(layer, "variant"), - width: 12, - }, - name: { - ...projectRow.name, - ...text(layer, "mono", { size: "sm" }), - }, - hover: { - background: background(layer, "hovered"), - }, - active: { - background: background(layer, "active"), - }, - }, + projectRow: toggleable(interactive({ + base: { + ...projectRow, + background: background(layer), + icon: { + margin: { left: nameMargin }, + color: foreground(layer, "variant"), + width: 12, + }, + name: { + ...projectRow.name, + ...text(layer, "mono", { size: "sm" }), + }, + }, state: { + hovered: { + background: background(layer, "hovered"), + }, + } + }), + { + default: { background: background(layer, "active") } + }) } } diff --git a/styles/src/styleTree/feedback.ts b/styles/src/styleTree/feedback.ts index 5eef4b42792131b9b4de128c708d5e17dd28dc14..4b5a4de89fb2c97765c279d1716abda2e8424bbd 100644 --- a/styles/src/styleTree/feedback.ts +++ b/styles/src/styleTree/feedback.ts @@ -1,44 +1,48 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, text } from "./components" +import { interactive } from "./interactive" export default function feedback(colorScheme: ColorScheme) { - let layer = colorScheme.highest + let layer = colorScheme.highest - return { - submit_button: { - ...text(layer, "mono", "on"), - background: background(layer, "on"), - cornerRadius: 6, - border: border(layer, "on"), - 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"), - }, + return { + submit_button: interactive({ + base: { + ...text(layer, "mono", "on"), + background: background(layer, "on"), + cornerRadius: 6, + border: border(layer, "on"), + margin: { + right: 4, }, - 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, - }), - } + padding: { + bottom: 2, + left: 10, + right: 10, + 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"), + }, + } + }), + 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, + }), + } } diff --git a/styles/src/styleTree/search.ts b/styles/src/styleTree/search.ts index d69c4bb2d919d2b70054deba22f16e3db9eb39f6..e278f69ff084d53bec79a0d22f20ad503cdfa38c 100644 --- a/styles/src/styleTree/search.ts +++ b/styles/src/styleTree/search.ts @@ -1,113 +1,123 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { background, border, foreground, text } from "./components" +import { interactive } from "./interactive" +import { toggleable } from "./toggle" export default function search(colorScheme: ColorScheme) { - let layer = colorScheme.highest + let layer = colorScheme.highest - // Search input - const editor = { - background: background(layer), - cornerRadius: 8, - minWidth: 200, - maxWidth: 500, - placeholderText: text(layer, "mono", "disabled"), - selection: colorScheme.players[0], - text: text(layer, "mono", "default"), - border: border(layer), - margin: { - right: 12, - }, - padding: { - top: 3, - bottom: 3, - left: 12, - right: 8, - }, - } + // Search input + const editor = { + background: background(layer), + cornerRadius: 8, + minWidth: 200, + maxWidth: 500, + placeholderText: text(layer, "mono", "disabled"), + selection: colorScheme.players[0], + text: text(layer, "mono", "default"), + border: border(layer), + margin: { + right: 12, + }, + padding: { + top: 3, + bottom: 3, + left: 12, + right: 8, + }, + } - const includeExcludeEditor = { - ...editor, - minWidth: 100, - maxWidth: 250, - } + 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: { - ...text(layer, "mono", "on"), - background: background(layer, "on"), - cornerRadius: 6, - border: border(layer, "on"), - margin: { - right: 4, - }, - padding: { - bottom: 2, - left: 10, - right: 10, - top: 2, - }, - active: { - ...text(layer, "mono", "on", "inverted"), - background: background(layer, "on", "inverted"), - border: border(layer, "on", "inverted"), - }, - 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"), - }, - }, - editor, - invalidEditor: { - ...editor, - border: border(layer, "negative"), - }, - includeExcludeEditor, - invalidIncludeExcludeEditor: { - ...includeExcludeEditor, - border: border(layer, "negative"), - }, - matchIndex: { - ...text(layer, "mono", "variant"), - padding: { - left: 6, - }, + 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: { + right: 4, }, - optionButtonGroup: { - padding: { - left: 12, - right: 12, - }, + padding: { + bottom: 2, + left: 10, + right: 10, + top: 2, }, - includeExcludeInputs: { - ...text(layer, "mono", "variant"), - padding: { - right: 6, - }, + }, state: { + clicked: { + ...text(layer, "mono", "on", "pressed"), + background: background(layer, "on", "pressed"), + border: border(layer, "on", "pressed"), }, - resultsStatus: { - ...text(layer, "mono", "on"), - size: 18, + hovered: { + ...text(layer, "mono", "on", "hovered"), + background: background(layer, "on", "hovered"), + border: border(layer, "on", "hovered"), }, - dismissButton: { - color: foreground(layer, "variant"), - iconWidth: 12, - buttonWidth: 14, - padding: { - left: 10, - right: 10, - }, - hover: { - color: foreground(layer, "hovered"), - }, + } + }), { + default: { + ...text(layer, "mono", "on", "inverted"), + background: background(layer, "on", "inverted"), + border: border(layer, "on", "inverted"), + }, + + }), + editor, + invalidEditor: { + ...editor, + 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: interactive({ + base: { + color: foreground(layer, "variant"), + iconWidth: 12, + buttonWidth: 14, + padding: { + left: 10, + right: 10, }, - } + }, state: { + hovered: { + color: foreground(layer, "hovered"), + } + } + }), + } } diff --git a/styles/src/styleTree/simpleMessageNotification.ts b/styles/src/styleTree/simpleMessageNotification.ts index 8d88f05c53466b718d5efd189cfdf6a321499ba2..70219d7a1029d9500facaf8d3e15baa7d20db152 100644 --- a/styles/src/styleTree/simpleMessageNotification.ts +++ b/styles/src/styleTree/simpleMessageNotification.ts @@ -1,44 +1,51 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, foreground, text } from "./components" +import { interactive } from "./interactive" const headerPadding = 8 export default function simpleMessageNotification( - colorScheme: ColorScheme + colorScheme: ColorScheme ): Object { - let layer = colorScheme.middle - return { - message: { - ...text(layer, "sans", { size: "xs" }), - margin: { left: headerPadding, right: headerPadding }, + let layer = colorScheme.middle + return { + message: { + ...text(layer, "sans", { size: "xs" }), + 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 }, - hover: { - ...text(layer, "sans", "default", { size: "xs" }), - background: background(layer, "hovered"), - border: border(layer, "active"), - }, + margin: { left: headerPadding, top: 6, bottom: 6 }, + }, state: { + hovered: { + ...text(layer, "sans", "default", { size: "xs" }), + background: background(layer, "hovered"), + border: border(layer, "active"), }, - dismissButton: { - color: foreground(layer), - iconWidth: 8, - iconHeight: 8, - buttonWidth: 8, - buttonHeight: 8, - hover: { - color: foreground(layer, "hovered"), - }, + } + }), + dismissButton: interactive({ + base: { + color: foreground(layer), + iconWidth: 8, + iconHeight: 8, + buttonWidth: 8, + buttonHeight: 8, + }, state: { + hovered: { + color: foreground(layer, "hovered"), }, - } + } + }) + } } diff --git a/styles/src/styleTree/toolbarDropdownMenu.ts b/styles/src/styleTree/toolbarDropdownMenu.ts index 92616eb0223781deae3162bfd7d429a3f896e6eb..0cfcb921efc352bcfbcc74e43727167936332a85 100644 --- a/styles/src/styleTree/toolbarDropdownMenu.ts +++ b/styles/src/styleTree/toolbarDropdownMenu.ts @@ -1,46 +1,56 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, text } from "./components" - +import { interactive } from "./interactive" +import { toggleable } from "./toggle" export default function dropdownMenu(colorScheme: ColorScheme) { - let layer = colorScheme.middle + let layer = colorScheme.middle - return { - rowHeight: 30, - background: background(layer), - border: border(layer), - shadow: colorScheme.popoverShadow, - header: { - ...text(layer, "sans", { size: "sm" }), - secondaryText: text(layer, "sans", { size: "sm", color: "#aaaaaa" }), - secondaryTextSpacing: 10, - padding: { left: 8, right: 8, top: 2, bottom: 2 }, - cornerRadius: 6, - background: background(layer, "on"), - border: border(layer, "on", { overlay: true }), - hover: { - background: background(layer, "hovered"), - ...text(layer, "sans", "hovered", { size: "sm" }), - } - }, - sectionHeader: { - ...text(layer, "sans", { size: "sm" }), - padding: { left: 8, right: 8, top: 8, bottom: 8 }, - }, - item: { - ...text(layer, "sans", { size: "sm" }), - secondaryTextSpacing: 10, - secondaryText: text(layer, "sans", { size: "sm" }), - padding: { left: 18, right: 18, top: 2, bottom: 2 }, - hover: { - background: background(layer, "hovered"), - ...text(layer, "sans", "hovered", { size: "sm" }), - }, - active: { - background: background(layer, "active"), - }, - activeHover: { - background: background(layer, "active"), - }, - }, - } + return { + rowHeight: 30, + background: background(layer), + border: border(layer), + shadow: colorScheme.popoverShadow, + header: interactive({ + base: { + ...text(layer, "sans", { size: "sm" }), + secondaryText: text(layer, "sans", { size: "sm", color: "#aaaaaa" }), + secondaryTextSpacing: 10, + padding: { left: 8, right: 8, top: 2, bottom: 2 }, + cornerRadius: 6, + background: background(layer, "on"), + border: border(layer, "on", { overlay: true }) + }, + state: { + hovered: { + background: background(layer, "hovered"), + ...text(layer, "sans", "hovered", { size: "sm" }), + } + } + }) + , + sectionHeader: { + ...text(layer, "sans", { size: "sm" }), + padding: { left: 8, right: 8, top: 8, bottom: 8 }, + }, + item: toggleable(interactive({ + base: { + ...text(layer, "sans", { size: "sm" }), + secondaryTextSpacing: 10, + secondaryText: text(layer, "sans", { size: "sm" }), + padding: { left: 18, right: 18, top: 2, bottom: 2 } + }, state: { + hovered: { + background: background(layer, "hovered"), + ...text(layer, "sans", "hovered", { size: "sm" }), + } + } + }), { + default: { + background: background(layer, "active"), + }, + hovered: { + background: background(layer, "active"), + }, + }) + } } diff --git a/styles/src/styleTree/updateNotification.ts b/styles/src/styleTree/updateNotification.ts index 281012e62f562ac721ab17c4c72afb458e1d59f1..aa8db916ea08a4625e2a218a4fead51d61552847 100644 --- a/styles/src/styleTree/updateNotification.ts +++ b/styles/src/styleTree/updateNotification.ts @@ -1,31 +1,39 @@ import { ColorScheme } from "../theme/colorScheme" import { foreground, text } from "./components" +import { interactive } from "./interactive" const headerPadding = 8 export default function updateNotification(colorScheme: ColorScheme): Object { - let layer = colorScheme.middle - return { - message: { - ...text(layer, "sans", { size: "xs" }), - margin: { left: headerPadding, right: headerPadding }, + let layer = colorScheme.middle + return { + message: { + ...text(layer, "sans", { size: "xs" }), + 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"), - }, - }, - } + }, + }) + + } }