From e748bf4b1ccf9e09ab2cfc2202f4e28eb662d19c Mon Sep 17 00:00:00 2001 From: James Clarke Date: Tue, 21 Jan 2025 16:20:23 +0000 Subject: [PATCH] Fix some bugs in session state handling + update styling of session state ui (#402) --- shared/common/ui/toggleSwitch/index.tsx | 3 +- .../ui/toggleSwitch/toggleSwitch.module.scss | 33 ++- .../studio/components/sessionState/index.tsx | 4 +- .../sessionState/sessionState.module.scss | 211 +++++++++--------- shared/studio/state/sessionState.ts | 12 +- .../studio/tabs/schema/textView.module.scss | 2 +- 6 files changed, 148 insertions(+), 117 deletions(-) diff --git a/shared/common/ui/toggleSwitch/index.tsx b/shared/common/ui/toggleSwitch/index.tsx index 42c52b61..53831f50 100644 --- a/shared/common/ui/toggleSwitch/index.tsx +++ b/shared/common/ui/toggleSwitch/index.tsx @@ -17,8 +17,9 @@ export function ToggleSwitch({ className={cn(styles.toggleSwitch, className, { [styles.checked]: checked, })} + onClick={() => onChange(!checked)} > -
onChange(!checked)}> +
diff --git a/shared/common/ui/toggleSwitch/toggleSwitch.module.scss b/shared/common/ui/toggleSwitch/toggleSwitch.module.scss index eccc1cb6..7a54ef04 100644 --- a/shared/common/ui/toggleSwitch/toggleSwitch.module.scss +++ b/shared/common/ui/toggleSwitch/toggleSwitch.module.scss @@ -2,31 +2,44 @@ .toggleSwitch { cursor: pointer; + padding: 8px; } .track { display: flex; - width: calc(var(--switchSize, 18px) * 2 - 4px); + width: calc(var(--switchSize, 18px) * 2 - 8px); height: var(--switchSize, 18px); border-radius: var(--switchSize, 18px); - background-color: var(--fullscreenOverlayBg); - transition: background-color 0.2s; + background-color: var(--Grey95); + border: 1px solid var(--Grey90); + overflow: hidden; + + .checked & { + background-color: var(--Grey97); + } + + @include darkTheme { + background-color: var(--Grey12); + border-color: var(--Grey25); + } } .switch { - width: calc(var(--switchSize, 18px) - 4px); - height: calc(var(--switchSize, 18px) - 4px); + width: calc(var(--switchSize, 18px) - 2px); + height: calc(var(--switchSize, 18px) - 2px); border-radius: var(--switchSize, 18px); - margin: 2px; - background: #b3b3b3; + margin: 1px; + background: #fff; + box-shadow: 0 0 4px rgba(0, 0, 0, 0.18); transition: transform 0.2s, background-color 0.2s; @include darkTheme { - background: #333; + background: var(--Grey50); + box-shadow: 0 0 4px rgba(0, 0, 0, 0.4); } .checked & { - transform: translateX(calc(var(--switchSize, 18px) - 4px)); - background: var(--accentGreen); + transform: translateX(calc(var(--switchSize, 18px) - 8px)); + background: #a565cd; } } diff --git a/shared/studio/components/sessionState/index.tsx b/shared/studio/components/sessionState/index.tsx index 87da3668..e044cdf0 100644 --- a/shared/studio/components/sessionState/index.tsx +++ b/shared/studio/components/sessionState/index.tsx @@ -245,7 +245,9 @@ const SessionBarContent = observer(function SessionBarContent() { {state.isLoaded ? (
state.openPanel()}>
- {overflowCount ? +{overflowCount} : null} + {activeState.length && overflowCount ? ( + +{overflowCount} + ) : null}
diff --git a/shared/studio/components/sessionState/sessionState.module.scss b/shared/studio/components/sessionState/sessionState.module.scss index 4106adaa..0b5bb560 100644 --- a/shared/studio/components/sessionState/sessionState.module.scss +++ b/shared/studio/components/sessionState/sessionState.module.scss @@ -1,4 +1,3 @@ -@import "@edgedb/common/styles.scss"; @import "@edgedb/common/mixins.scss"; .sessionState { @@ -32,12 +31,12 @@ .tabArrow { position: absolute; - fill: var(--grey97); + fill: var(--app_panel_background); left: calc(50% - 15px); top: calc(100% + 3px); pointer-events: none; opacity: 0; - transition: opacity 0s 0.1s, fill 0.2s; + transition: opacity 0s 0.1s; @include darkTheme { fill: #2e2e2e; @@ -79,11 +78,8 @@ } &.panelOpen .tabArrow { - fill: #f5f5f5; - - @include darkTheme { - fill: #242424; - } + fill: var(--app_panel_background); + z-index: 200; } .iconMobile { @@ -110,8 +106,8 @@ left: 0; width: 100%; height: 0; - background-color: var(--grey97); - border-radius: 8px; + background-color: var(--app_panel_background); + border-radius: 12px; transition: height 0.2s; .barOpen & { @@ -126,32 +122,31 @@ .panelBg { position: absolute; - height: calc(100% - 16px); - left: 16px; - right: 16px; + height: calc(100% - 8px); + left: 8px; + right: 8px; top: 0; - border-radius: 8px; + border-radius: 12px; + box-shadow: 0 0 8px rgba(0, 0, 0, 0.04), 0 0 4px rgba(0, 0, 0, 0.06); pointer-events: none; opacity: 0; z-index: 0; transition: height 0.2s, left 0.2s, z-index 0s 0.2s, opacity 0s 0.2s; @include breakpoint(mobile) { - left: 0; - right: 0; + height: 100%; + inset: 0; + border-radius: 0; + box-shadow: none; } .panelOpen & { opacity: 1; - background-color: var(--grey97); + background-color: var(--app_panel_background); pointer-events: auto; z-index: 101; transition-delay: 0s; } - - @include darkTheme { - background-color: var(--grey12); - } } .sessionBar { @@ -178,11 +173,11 @@ } .chips { - margin: 8px 0 0 8px; + padding: 8px 0 0 8px; display: flex; flex-wrap: wrap; min-height: 34px; - max-height: 68px; + max-height: 82px; flex-grow: 1; overflow: hidden; } @@ -214,13 +209,14 @@ } .panelButton { - background-color: var(--accentGreen); - color: #fff; + color: #a565cd; + background-color: #fff; + border: 1px solid var(--Grey90); height: 26px; padding: 0 7px; display: flex; align-items: center; - border-radius: 13px; + border-radius: 16px; cursor: pointer; span { @@ -235,40 +231,46 @@ } @include darkTheme { - color: #141414; + background-color: var(--Grey14); + border-color: var(--Grey25); + color: #d19cf1; } } .chip { display: flex; - background-color: var(--grey90); + background-color: var(--header_background); + border: 1px solid var(--Grey90); padding-right: 10px; - border-radius: 6px; - line-height: 26px; - font-family: "Roboto Mono", monospace; + border-radius: 8px; + line-height: 28px; + font-family: "Roboto Mono Variable", monospace; font-size: 13px; - font-weight: 500; + font-weight: 450; margin-right: 8px; margin-bottom: 8px; color: #808080; white-space: nowrap; overflow: hidden; + cursor: pointer; .chipKind { - width: 22px; - background-color: #d3d3d3; + width: 25px; + background: var(--Grey97); + border-right: 1px solid var(--Grey93); display: flex; justify-content: center; - font-weight: 700; - font-size: 11px; - color: #848484; + font-weight: 800; + font-size: 12px; + color: var(--Grey50); text-transform: uppercase; padding-left: 2px; margin-right: 8px; @include darkTheme { - background-color: #1b1b1b; - color: #5d5d5d; + background-color: var(--Grey20); + border-right-color: var(--Grey25); + color: var(--Grey60); } } @@ -281,17 +283,16 @@ } @include darkTheme { - background-color: #242424; + background-color: var(--Grey22); + border-color: var(--Grey25); color: #bfbfbf; } } .editorPanel { position: absolute; + inset: 8px; top: 0; - left: 16px; - right: 16px; - bottom: 0; display: flex; opacity: 0; z-index: 0; @@ -300,14 +301,7 @@ @include breakpoint(mobile) { position: fixed; - top: 0; - left: 0; - right: 0; - background-color: var(--grey90); - - @include darkTheme { - background-color: var(--grey20); - } + inset: 0; } &.panelVisible { @@ -322,13 +316,26 @@ flex-direction: column; flex-grow: 1; pointer-events: auto; + font-family: "Roboto Flex Variable", sans-serif; .closePanel { @extend .panelButton; position: absolute; - top: 0; - right: 0; + top: 2px; + right: 2px; margin: 8px; + background-color: #a565cd; + color: #fff; + border: 0; + + svg { + margin-top: 0; + } + + @include darkTheme { + color: #fff; + background-color: #a565cd; + } @include breakpoint(mobile) { display: none; @@ -345,8 +352,8 @@ @include breakpoint(mobile) { flex-direction: column; height: auto; - margin-bottom: 2px; - background-color: var(--fullscreenOverlayBg); + background-color: var(--header_background); + border-bottom: 1px solid var(--panel_border); } .title { @@ -354,7 +361,6 @@ @include breakpoint(mobile) { display: block; - font-family: Roboto; font-size: 20px; font-style: normal; font-weight: 700; @@ -368,44 +374,33 @@ margin-bottom: 4px; display: flex; align-items: center; + width: 400px; svg { position: absolute; stroke: #acacac; - left: 8px; + left: 14px; pointer-events: none; } input { - background-color: var(--app-card-bg); - border: 0; - border-radius: 16px; + background-color: var(--panel_background); + border: 1px solid var(--panel_border); + border-radius: 20px; outline: 0; color: inherit; - font-family: "Inter", sans-serif; - line-height: 32px; + font-family: "Roboto Flex Variable", sans-serif; + font-size: 14px; + font-weight: 450; + line-height: 38px; padding: 0 10px; - padding-left: 32px; + padding-left: 40px; flex-grow: 1; - - @include breakpoint(mobile) { - border-radius: 6px; - height: 40px; - background-color: var(--grey95); - - @include darkTheme { - background-color: var(--grey20); - } - } } @include breakpoint(mobile) { width: calc(100vw - 32px); margin: 0 0 16px 0; - - svg { - stroke: #7c7c7c; - } } } } @@ -417,11 +412,14 @@ padding: 0 8px; padding-bottom: 4px; min-height: 0; + max-width: 1400px; + margin: 0 auto; @include breakpoint(mobile) { display: flex; flex-direction: column; padding: 0; + margin: 0; min-height: unset; overflow: auto; } @@ -438,9 +436,9 @@ } @include breakpoint(mobile) { - margin-bottom: 2px; + border-bottom: 1px solid var(--panel_border); + padding-top: 12px; min-height: unset; - background-color: var(--fullscreenOverlayBg); &:first-child { margin-left: unset; @@ -449,6 +447,7 @@ &:last-child { padding-bottom: 74px; flex-grow: 1; + border-bottom: 0; } } @@ -501,11 +500,12 @@ } .item { - background-color: var(--grey90); + background-color: var(--panel_background); + border: 1px solid var(--panel_border); margin-bottom: 8px; - padding: 8px; - border-radius: 6px; - font-family: "Roboto Mono", monospace; + padding: 12px; + border-radius: 10px; + font-family: "Roboto Mono Variable", monospace; display: grid; grid-template-areas: "toggle header" "toggle value"; grid-template-columns: auto 1fr; @@ -518,12 +518,20 @@ .itemValue { opacity: 0.6; pointer-events: none; - font-weight: 500; + font-weight: 450; + border: 1px solid var(--panel_border); + margin: -1px; + padding: 0 10px; + border-radius: 6px; + + b { + font-weight: 500; + } } } &.highlighted { - outline-color: #39d1a5; + outline-color: #be8ddc; transition-duration: 0s; } @@ -532,18 +540,16 @@ } @include breakpoint(mobile) { - padding: 16px 16px 16px 16px; - background-color: var(--grey95); - - @include darkTheme { - background-color: var(--grey20); - } + padding: 16px; } } .activeToggle { grid-area: toggle; - margin-right: 8px; + margin: -8px; + margin-right: 0; + align-self: start; + --switchSize: 20px; } .itemHeader { @@ -563,30 +569,35 @@ } .itemDesc { - font-style: italic; - margin-top: 6px; + font-family: "Roboto Flex Variable", sans-serif; + margin-top: 8px; font-size: 14px; line-height: 16px; - opacity: 0.5; + opacity: 0.6; } .itemName { - font-weight: 500; + font-weight: 450; + margin-right: 8px; + span { opacity: 0.8; } .nameMatch { opacity: 1; - background-color: var(--accentGreen); + background-color: #d8acf3; border-radius: 2px; + + @include darkTheme { + background-color: #772fa3; + } } } .itemType { font-size: 14px; - font-weight: 500; - margin-left: 8px; + font-weight: 450; opacity: 0.5; @include breakpoint(mobile) { @@ -600,7 +611,7 @@ text-transform: uppercase; font-size: 13px; font-weight: 500; - font-family: "Inter", sans-serif; + font-family: "Roboto Flex Variable", sans-serif; &.disabled { opacity: 0.5; diff --git a/shared/studio/state/sessionState.ts b/shared/studio/state/sessionState.ts index ff39c984..dc98dfb8 100644 --- a/shared/studio/state/sessionState.ts +++ b/shared/studio/state/sessionState.ts @@ -361,7 +361,9 @@ export class SessionState extends Model({ this.draftState!.config[configName], "value", frozen( - valueToEditorValue(value, config.type.data as PrimitiveType) + value != null + ? valueToEditorValue(value, config.type.data as PrimitiveType) + : newPrimitiveValue(config.type.data as PrimitiveType)[0] ) ); } @@ -427,11 +429,13 @@ export class SessionState extends Model({ const instanceState = instanceCtx.get(this)!; const dbState = dbCtx.get(this)!; + if (!this.draftState) return; + storeSessionState({ instanceId: instanceState.instanceId!, dbName: dbState.name, data: { - globals: Object.entries(this.draftState!.globals).reduce( + globals: Object.entries(this.draftState.globals).reduce( (data, [name, global]) => { data[name] = { typeId: global.type.data.id, @@ -442,7 +446,7 @@ export class SessionState extends Model({ }, {} as StoredSessionStateData["globals"] ), - config: Object.entries(this.draftState!.config).reduce( + config: Object.entries(this.draftState.config).reduce( (data, [name, config]) => { if (config.value != null) { data[name] = { @@ -454,7 +458,7 @@ export class SessionState extends Model({ }, {} as StoredSessionStateData["config"] ), - options: Object.entries(this.draftState!.options).reduce( + options: Object.entries(this.draftState.options).reduce( (data, [name, opt]) => { data[name] = { active: opt.active, diff --git a/shared/studio/tabs/schema/textView.module.scss b/shared/studio/tabs/schema/textView.module.scss index 9a78dfd2..bb8175bd 100644 --- a/shared/studio/tabs/schema/textView.module.scss +++ b/shared/studio/tabs/schema/textView.module.scss @@ -104,7 +104,7 @@ input { height: 32px; background: #fff; - border-radius: 8px; + border-radius: 20px; border: 1px solid var(--panel_border); padding: 0; padding-left: 32px;