refactor: update layout creation ui for windows

grantjbutler · Feb 21, 2022 · f255aba · f255aba
1 parent c702150
commit f255aba
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 38 deletions.
diff --git a/packages/main/src/colors.ts b/packages/main/src/colors.ts
@@ -75,12 +75,12 @@ function deriveColorMapping(): ColorModeMapping {
         text: systemPreferences.getColor('window-text'),
         textSecondary: systemPreferences.getColor('window-text'),
         controlText: systemPreferences.getColor('button-text'),
-        selectedControlText: systemPreferences.getColor('window-text'),
+        selectedControlText: systemPreferences.getColor('highlight-text'),
 
         controlBackground: '',
         navBarBackground: '#f0f0f0',
         selectedContentBackground: getAccentColor(),
-        underPageBackground: '',
+        underPageBackground: '#f0f0f0',
         windowBackground: systemPreferences.getColor('window'),
 
         accent: getAccentColor(),
@@ -90,13 +90,13 @@ function deriveColorMapping(): ColorModeMapping {
       light: {
         text: systemPreferences.getColor('window-text'),
         textSecondary: systemPreferences.getColor('window-text'),
-        controlText: systemPreferences.getColor('window-text'),
-        selectedControlText: systemPreferences.getColor('window-text'),
+        controlText: systemPreferences.getColor('button-text'),
+        selectedControlText: systemPreferences.getColor('highlight-text'),
 
         controlBackground: '',
         navBarBackground: '#f0f0f0',
         selectedContentBackground: getAccentColor(),
-        underPageBackground: '',
+        underPageBackground: '#f0f0f0',
         windowBackground: systemPreferences.getColor('window'),
 
         accent: getAccentColor(),

diff --git a/packages/renderer/src/components/CommandBar.vue b/packages/renderer/src/components/CommandBar.vue
@@ -8,38 +8,79 @@
 
       <span>obs-layout</span>
     </div>
-    <div class="flex items-center justify-end bg-system-background-nav-bar">
-      <Popover class="relative">
-        <PopoverButton class="flex items-center p-3 space-x-1 hover:bg-gray-300">
-          <CloudUploadIcon class="w-6 h-6 text-gray-600" />
-
-          <span>Sync</span>
-        </PopoverButton>
-
-        <PopoverPanel class="absolute right-0 z-10">
-          <sync-popover />
-        </PopoverPanel>
-      </Popover>
-
-      <button
-        class="flex p-3 space-x-1 hover:bg-gray-300"
-        @click="$emit('openSettings')"
-      >
-        <CogIcon class="w-6 h-6 text-gray-600" />
-
-        <span>Settings</span>
-      </button>
+    <div class="flex justify-between bg-system-background-nav-bar">
+      <div class="flex items-center">
+        <select
+          v-model="selectedLayout"
+          class="h-full bg-transparent border-0 hover:bg-gray-300"
+        >
+          <option
+            v-for="layout in layouts"
+            :key="layout.id"
+            :value="layout.id"
+          >
+            {{ layout.name }}
+          </option>
+        </select>
+        <button
+          class="h-full p-3 hover:bg-gray-300"
+          title="Add layout"
+          @click="isNewLayoutModalOpen = true"
+        >
+          <PlusIcon class="w-5 h-5 text-gray-600" />
+        </button>
+      </div>
+      <div class="flex items-center">
+        <Popover class="relative">
+          <PopoverButton class="flex items-center p-3 space-x-1 hover:bg-gray-300">
+            <CloudUploadIcon class="w-6 h-6 text-gray-600" />
+
+            <span>Sync</span>
+          </PopoverButton>
+
+          <PopoverPanel class="absolute right-0 z-10">
+            <sync-popover />
+          </PopoverPanel>
+        </Popover>
+
+        <button
+          class="flex p-3 space-x-1 hover:bg-gray-300"
+          @click="$emit('openSettings')"
+        >
+          <CogIcon class="w-6 h-6 text-gray-600" />
+
+          <span>Settings</span>
+        </button>
+      </div>
     </div>
+
+    <new-layout-modal
+      :open="isNewLayoutModalOpen"
+      @close="setIsNewLayoutModalOpen"
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { CloudUploadIcon, CogIcon } from '@heroicons/vue/outline';
+import { computed, ref } from 'vue';
+import { CloudUploadIcon, CogIcon, PlusIcon } from '@heroicons/vue/outline';
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue';
 import ConnectionState from './ConnectionState.vue';
 import SyncPopover from './SyncPopover.vue';
+import { useLayoutsStore } from '/@/store/layouts';
+import NewLayoutModal from './Modals/NewLayoutModal.vue';
 
 defineEmits<{
   (e: 'openSettings'): void
 }>();
+
+const layoutsStore = useLayoutsStore();
+const layouts = computed(() => layoutsStore.layouts);
+const selectedLayout = computed({
+  get: () => layoutsStore.selectedLayout.id,
+  set: (value) => layoutsStore.selectLayout(value),
+});
+
+const isNewLayoutModalOpen = ref(false);
+const setIsNewLayoutModalOpen = (value: boolean) => isNewLayoutModalOpen.value = value;
 </script>
diff --git a/...src/components/Sidebar/NewLayoutModal.vue → .../src/components/Modals/NewLayoutModal.vue b/...src/components/Sidebar/NewLayoutModal.vue → .../src/components/Modals/NewLayoutModal.vue
@@ -16,18 +16,22 @@
           leave-from="opacity-100"
           leave-to="opacity-0"
         >
-          <DialogOverlay class="fixed inset-0 bg-black opacity-30" />
+          <DialogOverlay class="fixed inset-0 macos:bg-black windows:bg-white macos:opacity-30 windows:opacity-50" />
         </TransitionChild>
 
         <TransitionChild
           enter="transition duration-200 ease-linear"
-          enter-from="opacity-0 -translate-y-8"
-          enter-to="opacity-100 translate-y-0"
+          enter-from="opacity-0 macos:-translate-y-8"
+          enter-to="opacity-100 macos:translate-y-0"
           leave="transition duration-200 ease-linear"
-          leave-from="opacity-100 translate-y-0"
-          leave-to="opacity-0 -translate-y-8"
+          leave-from="opacity-100 macos:translate-y-0"
+          leave-to="opacity-0 macos:-translate-y-8"
         >
-          <div class="relative flex flex-col max-w-sm gap-3 p-4 mx-auto text-sm rounded-lg shadow-lg macos:bg-system-background-under-page macos:text-system-text macos:border macos:border-system-separator">
+          <div class="relative flex flex-col gap-3 p-4 mx-auto text-sm border rounded-lg macos:shadow-lg macos:max-w-sm windows:w-80 bg-system-background-under-page macos:text-system-text macos:border-system-separator windows:border-system-divider">
+            <h3 class="hidden text-xl windows:block">
+              Add a Layout
+            </h3>
+
             <div class="flex flex-col gap-2">
               <label>Layout Name</label>
               <input
@@ -53,15 +57,15 @@
               </select>
             </div>
 
-            <div class="flex justify-end w-full gap-2">
+            <div class="flex w-full gap-2 windows:flex-row-reverse macos:justify-end">
               <button
-                class="px-2 py-1 bg-gray-500 rounded"
+                class="px-2 py-1 rounded macos:bg-gray-500 windows:bg-gray-300 windows:w-1/2"
                 @click.prevent="cancel"
               >
                 Cancel
               </button>
               <button
-                class="px-2 py-1 rounded bg-system-background-selected-content disabled:opacity-30"
+                class="px-2 py-1 rounded bg-system-background-selected-content disabled:opacity-30 windows:w-1/2 windows:text-white"
                 :disabled="!isCreateButtonEnabled"
                 @click.prevent="create"
               >

diff --git a/packages/renderer/src/components/Sidebar.vue b/packages/renderer/src/components/Sidebar.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="bg-gray-200 w-72 macos:bg-transparent">
-    <layouts />
+    <layouts v-if="isMacOS" />
 
     <tree-control
       v-if="component"
@@ -14,7 +14,9 @@ import { useLayoutStore } from '/@/store/layout';
 import { computed } from 'vue';
 import TreeControl from './Sidebar/TreeControl.vue';
 import Layouts from './Sidebar/Layouts.vue';
+import { useIsMacOS } from '/@/integration/platform';
 
 const store = useLayoutStore();
 const component = computed(() => store.rootComponent);
+const isMacOS = useIsMacOS();
 </script>
diff --git a/packages/renderer/src/components/Sidebar/Layouts.vue b/packages/renderer/src/components/Sidebar/Layouts.vue
@@ -69,7 +69,7 @@ import {
 } from '@heroicons/vue/solid';
 import { computed, ref } from 'vue';
 import { useLayoutsStore } from '/@/store/layouts';
-import NewLayoutModal from './NewLayoutModal.vue';
+import NewLayoutModal from '/@/components/Modals/NewLayoutModal.vue';
 import Layout from './Layout.vue';
 
 const layoutsStore = useLayoutsStore();