From 7d7b2b8c2d39f5c9e4b50da2caa019af0a0e12bc Mon Sep 17 00:00:00 2001 From: Peiwen Li Date: Wed, 10 Jul 2024 14:34:31 +0800 Subject: [PATCH 1/5] ui-style: chore --- report-front-end/src/components/config-panel/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/report-front-end/src/components/config-panel/style.scss b/report-front-end/src/components/config-panel/style.scss index 0568aa80..2006609c 100644 --- a/report-front-end/src/components/config-panel/style.scss +++ b/report-front-end/src/components/config-panel/style.scss @@ -1,6 +1,6 @@ .input-wrapper { position: absolute; - top: -20px; + top: -18px; right: 0; width: 80px; } From 7648a45dc957ec090d3f4da3875c0dfc57e65a1e Mon Sep 17 00:00:00 2001 From: Peiwen Li Date: Wed, 10 Jul 2024 15:33:12 +0800 Subject: [PATCH 2/5] ui-feat: add compact style switch --- .../src/common/constant/constants.ts | 3 +-- .../src/common/helpers/storage.ts | 24 +++++++++++++++++-- .../src/components/top-navigation/index.tsx | 21 +++++++++++++++- report-front-end/src/main.tsx | 11 ++++----- 4 files changed, 48 insertions(+), 11 deletions(-) diff --git a/report-front-end/src/common/constant/constants.ts b/report-front-end/src/common/constant/constants.ts index 4d58a82d..fe4f27dc 100644 --- a/report-front-end/src/common/constant/constants.ts +++ b/report-front-end/src/common/constant/constants.ts @@ -35,6 +35,5 @@ export const APP_RIGHT_LOGO = process.env.VITE_RIGHT_LOGO || ""; export const SQL_DISPLAY = process.env.VITE_SQL_DISPLAY; -// TODO: decide whether to add an env var for this style switch? // https://cloudscape.design/patterns/general/density-settings/ -export const COMPACT_STYLE = true; +export const APP_STYLE_DEFAULT_COMPACT = true; diff --git a/report-front-end/src/common/helpers/storage.ts b/report-front-end/src/common/helpers/storage.ts index 716ede56..15b5c7d0 100644 --- a/report-front-end/src/common/helpers/storage.ts +++ b/report-front-end/src/common/helpers/storage.ts @@ -1,8 +1,15 @@ -import { applyMode, Mode } from "@cloudscape-design/global-styles"; +import { + applyDensity, + applyMode, + Density, + Mode, +} from "@cloudscape-design/global-styles"; import { NavigationPanelState } from "../types"; +import { APP_STYLE_DEFAULT_COMPACT } from "../constant/constants"; const PREFIX = "genai-chatbot"; const THEME_STORAGE_NAME = `${PREFIX}-theme`; +const DENSITY_STORAGE_NAME = `${PREFIX}-density`; const NAVIGATION_PANEL_STATE_STORAGE_NAME = `${PREFIX}-navigation-panel-state`; export abstract class Storage { @@ -23,6 +30,20 @@ export abstract class Storage { return theme; } + static getDensity(): Density { + let density = localStorage.getItem(DENSITY_STORAGE_NAME) as Density | null; + if (!density) { + density = APP_STYLE_DEFAULT_COMPACT + ? Density.Compact + : Density.Comfortable; + } + return density; + } + static applyDensity(density: Density) { + localStorage.setItem(DENSITY_STORAGE_NAME, density); + applyDensity(density); + } + static getNavigationPanelState(): NavigationPanelState { const value = localStorage.getItem(NAVIGATION_PANEL_STATE_STORAGE_NAME) ?? @@ -48,5 +69,4 @@ export abstract class Storage { return newState; } - } diff --git a/report-front-end/src/components/top-navigation/index.tsx b/report-front-end/src/components/top-navigation/index.tsx index 5667a826..b6562698 100644 --- a/report-front-end/src/components/top-navigation/index.tsx +++ b/report-front-end/src/components/top-navigation/index.tsx @@ -3,15 +3,16 @@ import { TopNavigation, } from "@cloudscape-design/components"; // import { Mode } from '@cloudscape-design/global-styles' +import { Density } from "@cloudscape-design/global-styles"; import { Auth } from "aws-amplify"; import { useEffect, useState } from "react"; -// import { Storage } from '../../common/helpers/storage' import { APP_LOGO, APP_RIGHT_LOGO, APP_TITLE, CHATBOT_NAME, } from "../../common/constant/constants"; +import { Storage } from "../../common/helpers/storage"; import "./style.scss"; export default function CustomTopNavigation() { @@ -52,6 +53,10 @@ export default function CustomTopNavigation() { } }; + const [isCompact, setIsCompact] = useState( + Storage.getDensity() === Density.Compact + ); + return (
{ + setIsCompact((prev) => { + Storage.applyDensity( + !prev ? Density.Compact : Density.Comfortable + ); + return !prev; + }); + }, + }, { type: "menu-dropdown", text: userName, diff --git a/report-front-end/src/main.tsx b/report-front-end/src/main.tsx index 509d48e1..9ad62499 100644 --- a/report-front-end/src/main.tsx +++ b/report-front-end/src/main.tsx @@ -1,13 +1,11 @@ -import "regenerator-runtime/runtime"; +import "@cloudscape-design/global-styles/index.css"; import React from "react"; import ReactDOM from "react-dom/client"; -import { Storage } from "./common/helpers/storage"; -import "@cloudscape-design/global-styles/index.css"; import { Provider } from "react-redux"; +import "regenerator-runtime/runtime"; +import { Storage } from "./common/helpers/storage"; import userReduxStore from "./common/helpers/store"; import AppConfigured from "./pages/login-page"; -import { applyDensity, Density } from "@cloudscape-design/global-styles"; -import { COMPACT_STYLE } from "./common/constant/constants"; const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement @@ -15,7 +13,8 @@ const root = ReactDOM.createRoot( const theme = Storage.getTheme(); Storage.applyTheme(theme); -applyDensity(COMPACT_STYLE ? Density.Compact : Density.Comfortable); +const density = Storage.getDensity(); +Storage.applyDensity(density); root.render( From faff26d958a6a41aa5df483bcb1ec67e5da04fb8 Mon Sep 17 00:00:00 2001 From: Peiwen Li Date: Wed, 10 Jul 2024 17:00:22 +0800 Subject: [PATCH 3/5] ux-improve: suggested question collapse automatically after click event --- .../src/components/chatbot-panel/custom-questions.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/report-front-end/src/components/chatbot-panel/custom-questions.tsx b/report-front-end/src/components/chatbot-panel/custom-questions.tsx index 5634a4ab..1a352e1d 100644 --- a/report-front-end/src/components/chatbot-panel/custom-questions.tsx +++ b/report-front-end/src/components/chatbot-panel/custom-questions.tsx @@ -57,7 +57,7 @@ export default function CustomQuestions(props: RecommendQuestionsProps) { configuration: userState.queryConfig, setMessageHistory: props.setMessageHistory }).then();*/ - + setShowMoreQuestions(true) // Call WebSocket API queryWithWS({ query: question, @@ -121,4 +121,4 @@ export default function CustomQuestions(props: RecommendQuestionsProps) { )}
); -} \ No newline at end of file +} From d971517dfb7f63b9c6cd8fef0951a753028d7a77 Mon Sep 17 00:00:00 2001 From: Peiwen Li Date: Wed, 10 Jul 2024 17:13:13 +0800 Subject: [PATCH 4/5] ui-refactor: config panel comp change to Drawer --- .../src/components/config-panel/index.tsx | 20 ++++++++----------- .../src/components/config-panel/style.scss | 4 ---- 2 files changed, 8 insertions(+), 16 deletions(-) diff --git a/report-front-end/src/components/config-panel/index.tsx b/report-front-end/src/components/config-panel/index.tsx index c798b369..7d10f574 100644 --- a/report-front-end/src/components/config-panel/index.tsx +++ b/report-front-end/src/components/config-panel/index.tsx @@ -1,9 +1,9 @@ import { Divider } from "@aws-amplify/ui-react"; import { Button, + Drawer, FormField, Grid, - HelpPanel, Input, Select, Slider, @@ -158,8 +158,8 @@ const ConfigPanel = (props: { }; return ( - - + +