Fix render pane + Add some CSS variables for theming

Nahara-OSS · Oct 9, 2024 · a5d05e1 · a5d05e1
1 parent 10f5ca8
commit a5d05e1
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 16 deletions.
diff --git a/nahara-motion-ui/src/App.svelte b/nahara-motion-ui/src/App.svelte
@@ -153,7 +153,7 @@
             extra={{ editor }}
             on:layoutupdate={e => $currentLayout.layout = e.detail}
         />
-        <MediaBar />
+        <MediaBar {editor} />
     </div>
     <PopupHost />
     <MenuHost />

diff --git a/nahara-motion-ui/src/app.scss b/nahara-motion-ui/src/app.scss
@@ -23,7 +23,28 @@ body, body > div#app {
 
 /* Color scheme */
 :root {
-    /* Colors here!!!! Use the --variable: #rrggbb; format. */
+    // Base colors
+    --base-background: #ffffff;
+    --base-foreground: #000000;
+    --base-header: #efefef;
+    --base-border-normal: #d1d1d1;
+    --base-border-focused: #1d1d1d;
+
+    // Pane colors
+    --pane-pane-header: var(--base-header);
+    --pane-background: var(--base-background);
+    --pane-border-normal: var(--base-border-normal);
+    --pane-border-focused: var(--base-border-focused);
+
+    // App bars - Top bar and media bar
+    --appbars-background: var(--base-header);
+    --appbars-border: var(--pane-border-normal);
+
+    // Controls
+    --control-background: var(--base-background);
+    --control-foreground: var(--base-foreground);
+    --control-border-normal: var(--base-border-normal);
+    --control-border-focused: var(--base-border-focused);
 }
 
 /* Design tokens */
@@ -34,11 +55,11 @@ body, body > div#app {
     white-space: nowrap;
     text-overflow: ellipsis;
     padding: 4px 8px;
-    background-color: #ffffff;
-    border: 1px solid #d1d1d1;
+    background-color: var(--control-background);
+    border: 1px solid var(--control-border-normal);
 
     &:hover {
-        border: 1px solid #2f2f2f;
+        border: 1px solid var(--control-border-focused);
         background-color: #efefef;
         box-shadow: inset 0 0 0 1px #efefef, inset 0 0 0 2px #fff;
     }

diff --git a/nahara-motion-ui/src/ui/bar/MediaBar.svelte b/nahara-motion-ui/src/ui/bar/MediaBar.svelte
@@ -8,10 +8,12 @@
     import { getSnappingModeType } from "../popup/SnappingPopup";
     import SnappingPopup from "../popup/SnappingPopup.svelte";
     import TimeDisplay from "./TimeDisplay.svelte";
+    import type { EditorImpl } from "../../App.svelte";
 
+    export let editor: EditorImpl;
     const timelineSnapping = snapping.timelineStore;
     const seekhead = app.currentSeekheadStore;
-    const scene = app.currentSceneStore;
+    const scene = editor.sceneStore;
     const playbackState = app.playbackStateStore;
 
     let quickSeekMs: number;
@@ -75,8 +77,8 @@
     .media-bar {
         height: 48px;
         align-items: center;
-        background-color: #efefef;
-        border-top: 1px solid #d1d1d1;
+        background-color: var(--appbars-background);
+        border-top: 1px solid var(--appbars-border);
         display: grid;
         grid-auto-flow: column;
         padding: 0 8px;

diff --git a/nahara-motion-ui/src/ui/bar/TopBar.svelte b/nahara-motion-ui/src/ui/bar/TopBar.svelte
@@ -54,6 +54,7 @@
 
                     findMaxEndTime($currentScene!);
                     openPopupAt(e.clientX, e.clientY, "Render scene", RenderPane, {
+                        scene: $currentScene,
                         saveAs: `${$currentScene!.metadata.name ?? 'scene'}.mp4`,
                         resWidth: $currentScene!.metadata.size.x,
                         resHeight: $currentScene!.metadata.size.y,
@@ -124,8 +125,8 @@
 <style lang="scss">
     .menu-bar {
         height: 34px;
-        background-color: #efefef;
-        border-bottom: 1px solid #d1d1d1;
+        background-color: var(--appbars-background);
+        border-bottom: 1px solid var(--appbars-border);
         box-sizing: border-box;
         display: flex;
         grid-auto-flow: column;

diff --git a/nahara-motion-ui/src/ui/pane/TabbedPane.svelte b/nahara-motion-ui/src/ui/pane/TabbedPane.svelte
@@ -163,23 +163,23 @@
 <style lang="scss">
     .pane {
         position: absolute;
-        border: 1px solid #d1d1d1;
+        border: 1px solid var(--pane-border-normal);
         box-sizing: border-box;
-        background-color: #fff;
+        background-color: var(--pane-background);
 
         &.dragging {
             z-index: 1;
         }
 
         &:hover {
-            border: 1px solid #1e1e1e;
+            border: 1px solid var(--pane-border-focused);
         }
 
         .titlebar {
             display: flex;
             flex-direction: row;
             height: 34px;
-            background-color: #efefef;
+            background-color: var(--pane-pane-header);
             overflow-x: scroll;
 
             &::-webkit-scrollbar {
@@ -224,7 +224,7 @@
                 }
 
                 &.selected {
-                    background-color: #fff;
+                    background-color: var(--pane-background);
                 }
 
                 &.single-tab {

diff --git a/nahara-motion-ui/src/ui/render/RenderPane.svelte b/nahara-motion-ui/src/ui/render/RenderPane.svelte
@@ -30,7 +30,7 @@
         }
     ];
 
-    export let scene: IScene = app.getCurrentScene()!;
+    export let scene: IScene;
 
     export let saveAs = "scene.mp4";
     export let resWidth = 1920;