Tidied up left tabs, shadows

finos · Apr 23, 2024 · 3c9cfe2 · 3c9cfe2
1 parent 91ebe82
commit 3c9cfe2
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 26 deletions.
diff --git a/packages/sail2/src/client/controls/styles.module.css b/packages/sail2/src/client/controls/styles.module.css
@@ -2,7 +2,6 @@
     display: flex;
     flex-direction: column;
     justify-items: end;
-    background-color: aquamarine;
     justify-self: end;
     align-items: center;
 }

diff --git a/packages/sail2/src/client/frame/frame.tsx b/packages/sail2/src/client/frame/frame.tsx
@@ -20,7 +20,7 @@ export const Frame = ({ cs }: { cs: ClientState }) => {
                     <Tabs cs={cs} />
                     <Controls />
                 </div>
-                <div className={styles.main}>
+                <div className={styles.main} style={{ backgroundColor: cs.getTabs()[cs.getActiveTab()].background }}>
                     <Grids cs={cs} />
                 </div>
             </div>

diff --git a/packages/sail2/src/client/frame/styles.module.css b/packages/sail2/src/client/frame/styles.module.css
@@ -1,5 +1,4 @@
 .outer {
-    background-color: #eee;
     display: flex;
     flex-direction: column;
     position: fixed;
@@ -20,7 +19,6 @@
 }
 
 .middle {
-    background-color: orange;
     flex-basis: 30rem;
     flex-grow: 1;
     flex-shrink: 0;
@@ -39,8 +37,11 @@
 }
 
 .main {
-    background-color: maroon;
     flex-basis: 50rem;
     flex-grow: 1;
     flex-shrink: 0;
+    border-top-left-radius: .5rem;
+    border-bottom-left-radius: .5rem;
+    box-shadow: -4px 4px 3px #00000030;
+    overflow: scroll;
 }
diff --git a/packages/sail2/src/client/grid/grid.tsx b/packages/sail2/src/client/grid/grid.tsx
@@ -11,21 +11,22 @@ export const Grids = ({ cs }: { cs: ClientState }) => {
                 cs.getTabs().map((t, i) => {
                     const panels = cs.getPanels().filter(p => p.tab == t.id)
                     return (
-                        <SimpleGrid key={t.id} items={panels} active={i == cs.getActiveTab()} background={t.background} />
+                        <SimpleGrid key={t.id} items={panels} active={i == cs.getActiveTab()} background={t.background} id={'_gs_' + t.id} />
                     )
                 })
             }
         </div>
     )
 }
 
-function SimpleGrid({ items, active, background }: { items: AppPanel[], active: boolean, background: string }) {
+function SimpleGrid({ items, active, background, id }: { items: AppPanel[], active: boolean, background: string, id: string }) {
 
     var grid: GridStack | null = null
     var timerId: number | null = null
 
     useEffect(() => {
-        grid = GridStack.init();
+        const el = document.getElementById(id)!!
+        grid = GridStack.addGrid(el);
 
         grid.on("dragstop", (_event, element) => {
             const node = element.gridstackNode;
@@ -45,13 +46,13 @@ function SimpleGrid({ items, active, background }: { items: AppPanel[], active:
 
 
     return (
-        <div className="grid-stack" style={{
-            visibility: active ? "visible" : "hidden",
+        <div id={id} className="grid-stack" style={{
+            display: active ? "block" : "none",
             backgroundColor: background
         }}>
             {
                 items.map(i =>
-                    <div className='grid-stack-item' gs-w={i.w} gs-h={i.h} gs-x={i.x} gs-y={i.y}>
+                    <div key={i.id} className='grid-stack-item' gs-w={i.w} gs-h={i.h} gs-x={i.x} gs-y={i.y}>
                         <Content key={i.id} panel={i} />
                     </div>
                 )

diff --git a/packages/sail2/src/client/grid/styles.module.css b/packages/sail2/src/client/grid/styles.module.css
@@ -1,13 +1,11 @@
 .grids {
-    padding: 2px;
-    border-radius: .4rem;
-    background-color: bisque;
+    border-radius: .5rem;
+    padding: .5rem;
 }
 
 /** Grid Content */
 
 .content {
-    background-color: yellow;
     display: flex;
     flex-direction: column;
     height: 100%;
@@ -17,7 +15,6 @@
     display: flex;
     flex-direction: column;
     justify-items: center;
-    background-color: red;
     flex-grow: 1;
     flex-shrink: 1;
 }
@@ -28,7 +25,7 @@
     flex-basis: 2rem;
     flex-shrink: 0;
     flex-grow: 0;
-    background-color: green;
+    background-color: #FFFFFF55;
     gap: .2rem;
 }
 

diff --git a/packages/sail2/src/client/index.tsx b/packages/sail2/src/client/index.tsx
@@ -5,4 +5,8 @@ import '../../static/fonts/DM_Sans/DM_Sans.css'
 
 const container = document.getElementById('app');
 const root = createRoot(container!);
-root.render(<Frame cs={getClientState()} />);
+root.render(<Frame cs={getClientState()} />);
+
+getClientState().addStateChangeCallback(() => {
+    root.render(<Frame cs={getClientState()} />);
+})
diff --git a/packages/sail2/src/client/state/state.ts b/packages/sail2/src/client/state/state.ts
@@ -27,13 +27,17 @@ export interface ClientState {
     removePanel(id: string): void
     addPanel(ap: AppPanel): void
     getPanels(): AppPanel[]
+
+    /** Callback */
+    addStateChangeCallback(cb: () => void): void
 }
 
 abstract class AbstractClientState implements ClientState {
 
     private tabs: TabDetail[] = []
     private panels: AppPanel[] = []
     private activeTab: number = 0
+    callbacks: (() => void)[] = []
 
     constructor(tabs: TabDetail[], panels: AppPanel[], activeTab: number) {
         this.tabs = tabs
@@ -90,6 +94,10 @@ abstract class AbstractClientState implements ClientState {
     getPanels(): AppPanel[] {
         return this.panels
     }
+
+    addStateChangeCallback(cb: () => void) {
+        this.callbacks.push(cb)
+    }
 }
 
 class LocalStorageClientState extends AbstractClientState {
@@ -106,6 +114,7 @@ class LocalStorageClientState extends AbstractClientState {
 
     saveState(): void {
         localStorage.setItem('ui-state', JSON.stringify(this))
+        this.callbacks.forEach(cb => cb())
     }
 
 }

diff --git a/packages/sail2/src/client/tabs/styles.module.css b/packages/sail2/src/client/tabs/styles.module.css
@@ -8,9 +8,6 @@
     flex-grow: 0;
     flex-shrink: 0;
     gap: .5rem;
-    border-left: 1px solid white;
-    border-top: 1px solid white;
-    border-bottom: 1px solid white;
     border-radius: 0;
     border-top-left-radius: .5rem;
     border-bottom-left-radius: .5rem;
@@ -20,8 +17,11 @@
     padding-right: 1rem;
     padding-top: .2rem;
     padding-bottom: .2rem;
+    box-shadow: -4px 4px 3px #00000030;
 }
 
+
+
 .tabDetail {
     display: flex;
     flex-direction: column;
@@ -30,6 +30,18 @@
     flex-basis: 3rem;
 }
 
+.inactiveTab {
+    background: linear-gradient(90deg, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .6) 60%);
+}
+
+.activeTab {
+    background: linear-gradient(134deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 70%);
+}
+
+.tab:hover {
+    background: white;
+}
+
 .tabImage {
     max-width: 3rem;
     text-align: center;

diff --git a/packages/sail2/src/client/tabs/tabs.tsx b/packages/sail2/src/client/tabs/tabs.tsx
@@ -4,13 +4,16 @@ import * as styles from './styles.module.css'
 
 
 
-const Tab = ({ td, active }: { td: TabDetail, active: boolean }) => {
-    return (<div className={styles.tab} style={{ backgroundColor: td.background }}>
-        <div className={styles.tabDetail}>
+const Tab = ({ td, active, onClick }: { td: TabDetail, active: boolean, onClick: () => void }) => {
+    return (<div className={`${styles.tab} ${active ? styles.activeTab : styles.inactiveTab}`} style={{
+        backgroundColor: td.background,
+        zIndex: active ? 100 : "none"
+    }}>
+        <div className={styles.tabDetail} onClick={onClick} >
             <img src={td.icon} className={styles.tabImage} />
             <p className={styles.tabText}>{td.title}</p>
         </div>
-    </div>
+    </div >
     )
 }
 
@@ -19,7 +22,7 @@ export const Tabs = ({ cs }: { cs: ClientState }) => {
     return (
         <div className={styles.tabs}>
             {
-                cs.getTabs().map((t, i) => <Tab key={t.id} td={t} active={i == cs.getActiveTab()} />)
+                cs.getTabs().map((t, i) => <Tab key={t.id} td={t} active={i == cs.getActiveTab()} onClick={() => cs.setActiveTab(i)} />)
             }
         </div>
     )