Clean up preferences on macOS.

grantjbutler · Feb 6, 2022 · 96c044b · 96c044b
1 parent e2c7a7c
commit 96c044b
Show file tree

Hide file tree

Showing 11 changed files with 103 additions and 65 deletions.
diff --git a/public/index.html b/public/index.html
@@ -5,7 +5,6 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
     <noscript>

diff --git a/src/App.vue b/src/App.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="flex flex-col h-screen text-system-text text-sm">
+  <div class="flex flex-col h-screen text-sm text-system-text">
     <nav-bar v-if="isMacOS" class="flex-none"></nav-bar>
     <command-bar v-if="isWindows" class="flex-none"></command-bar>
-    <div class="flex-1 flex flex-row items-stretch">
+    <div class="flex flex-row items-stretch flex-1">
       <sidebar class="flex-none border-r border-system-divider"></sidebar>
       <preview></preview>
       <controls class="flex-none border-l border-system-divider"></controls>
@@ -38,7 +38,5 @@ export default defineComponent({
 </script>
 
 <style>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-</style>
+@import url('./assets/shared.css');
+</style>
diff --git a/src/Preferences.vue b/src/Preferences.vue
@@ -1,45 +1,39 @@
 <template>
-  <div class="h-screen text-sm bg-system-background-window text-system-text">
-    <p class="controls-heading">OBS Connection</p>
-    <div class="control-field">
-      <label>Host</label>
-      <input type="text" v-model="connection.host">
-    </div>
-    <div class="control-field">
-      <label>Port</label>
-      <input type="number" v-model="connection.port">
-    </div>
-    <div class="control-field">
-      <label>Password</label>
-      <input type="password" v-model="connection.password">
-    </div>
-    <div class="justify-end control-field">
-      <button v-if="isConnectButtonVisible" class="px-3 py-1 bg-green-500 rounded" @click="connect">Connect</button>
-      <button v-if="isAbortButtonVisible" class="px-3 py-1 bg-yellow-500 rounded">Abort</button>
-      <button v-if="isDisconnectButtonVisible" class="px-3 py-1 bg-red-500 rounded" @click="disconnect">Disconnect</button>
-    </div>
-    <p class="controls-heading">Sources</p>
-    <div class="control-field">
-      <label>Source Filter</label>
-      <input type="text" v-model="sourceFilter">
-    </div>
-    <div class="control-field">
-      <label>Scene Filter</label>
-      <input type="text" v-model="sceneFilter">
-    </div>
+  <div class="h-screen p-2 space-y-2 text-sm macos:bg-system-background-under-page macos:text-system-text">
+    <Controls label="OBS Connection">
+      <Control label="Host" type="text" v-model="connection.host"></Control>
+      <Control label="Port" type="text" v-model="connection.port"></Control>
+      <Control label="Password" type="password" v-model="connection.password"></Control>
+
+      <div class="flex justify-end macos:col-start-2 macos:col-end-9">
+        <button v-if="isConnectButtonVisible" class="px-3 py-1 bg-green-500 rounded" @click="connect">Connect</button>
+        <button v-if="isAbortButtonVisible" class="px-3 py-1 bg-yellow-500 rounded">Abort</button>
+        <button v-if="isDisconnectButtonVisible" class="px-3 py-1 bg-red-500 rounded" @click="disconnect">Disconnect</button>
+      </div>
+    </Controls>
+
+    <Controls label="Filters">
+      <Control label="Source Filter" type="text" v-model="sourceFilter"></Control>
+      <Control label="Scene Filter" type="text" v-model="sceneFilter"></Control>
+    </Controls>
   </div>
 </template>
 
 <script lang="ts">
-import '@/assets/shared.css';
 import { ipcRenderer } from 'electron';
 import { computed, defineComponent, onMounted, ref, watch } from 'vue'
 import debounce from 'lodash/debounce';
 import { isOBSConnectionOptions } from './obs/connection';
 import { useObsConnectionState } from './integration/obs';
 import { OBSConnectionState } from './obs/connection-state';
+import Controls from '@/components/Preferences/Controls.vue';
+import Control from '@/components/Preferences/Control.vue';
 
 export default defineComponent({
+  components: {
+    Controls,
+    Control
+  },
   setup() {
     const connectionState = useObsConnectionState();
     const connection = ref({
@@ -109,7 +103,5 @@ export default defineComponent({
 </script>
 
 <style>
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import url('./assets/shared.css');
 </style>
diff --git a/src/assets/shared.css b/src/assets/shared.css
@@ -1,25 +1,9 @@
-.controls\-heading {
-  @apply border-b border-system-separator p-2 text-system-text-secondary font-semibold;
-}
-
-.control\-field {
-  @apply p-2 flex space-x-2;
-}
-
-.control\-field label {
-  @apply w-1/3 text-right;
-}
-
-.control\-field input, .control\-field select {
-  @apply text-system-text-control bg-system-background-control w-2/3;
-}
-
-.control\-field select {
-  @apply macos:rounded;
-}
-
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
-}
+}
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/components/Controls.vue b/src/components/Controls.vue
@@ -9,7 +9,6 @@
 </template>
 
 <script lang="ts">
-import '@/assets/shared.css';
 import { Component } from '@/layout';
 import { useStore } from '@/store/app'
 import { computed, defineComponent } from 'vue'

diff --git a/src/components/Preferences/Control.vue b/src/components/Preferences/Control.vue
@@ -0,0 +1,25 @@
+<template>
+  <label class="macos:col-span-2 macos:col-start-2 macos:text-right">{{ label }}</label>
+  <input class="macos:col-span-5 macos:col-end-9 macos:px-2 macos:py-1 macos:rounded macos:text-system-text-control macos:bg-system-background-control" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" v-bind="$attrs">
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+
+type Value = string | number
+
+export default defineComponent({
+  name: 'Control',
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    modelValue: {
+      type: Object as PropType<Value>,
+      required: true
+    }
+  },
+  emits: ['update:modelValue']
+})
+</script>
diff --git a/src/components/Preferences/Controls.vue b/src/components/Preferences/Controls.vue
@@ -0,0 +1,25 @@
+<template>
+  <fieldset>
+    <legend class="macos:ml-2">{{ label }}</legend>
+
+    <div class="p-2 space-y-2 macos:border macos:rounded macos:border-system-separator macos:bg-system-background-window">
+      <div class="macos:grid macos:items-baseline macos:grid-cols-9 macos:gap-2">
+        <slot></slot>
+      </div>
+    </div>
+  </fieldset>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'Controls',
+  props: {
+    label: {
+      type: String,
+      required: true
+    }
+  }
+})
+</script>
diff --git a/src/electron/colors.ts b/src/electron/colors.ts
@@ -13,6 +13,7 @@ type ColorMapping = {
   controlBackground: string
   navBarBackground: string
   selectedContentBackground: string
+  underPageBackground: string
   windowBackground: string
 
   accent: string
@@ -41,6 +42,7 @@ function deriveColorMapping(): ColorModeMapping {
         controlBackground: systemPreferences.getColor('control-background'),
         navBarBackground: '#3c363c',
         selectedContentBackground: systemPreferences.getColor('selected-content-background'),
+        underPageBackground: systemPreferences.getColor('under-page-background'),
         windowBackground: systemPreferences.getColor('window-background'),
 
         accent: getAccentColor(),
@@ -56,6 +58,7 @@ function deriveColorMapping(): ColorModeMapping {
         controlBackground: systemPreferences.getColor('control-background'),
         navBarBackground: '#efebef',
         selectedContentBackground: systemPreferences.getColor('selected-content-background'),
+        underPageBackground: systemPreferences.getColor('under-page-background'),
         windowBackground: systemPreferences.getColor('window-background'),
 
         accent: getAccentColor(),
@@ -74,6 +77,7 @@ function deriveColorMapping(): ColorModeMapping {
         controlBackground: '',
         navBarBackground: '#f0f0f0',
         selectedContentBackground: getAccentColor(),
+        underPageBackground: '',
         windowBackground: systemPreferences.getColor('window'),
 
         accent: getAccentColor(),
@@ -89,6 +93,7 @@ function deriveColorMapping(): ColorModeMapping {
         controlBackground: '',
         navBarBackground: '#f0f0f0',
         selectedContentBackground: getAccentColor(),
+        underPageBackground: '',
         windowBackground: systemPreferences.getColor('window'),
 
         accent: getAccentColor(),

diff --git a/src/electron/preferences-window.ts b/src/electron/preferences-window.ts
@@ -7,12 +7,13 @@ let preferencesWindow: BrowserWindow | undefined
 
 async function createPreferencesWindow() {
   preferencesWindow = new BrowserWindow({
-    width: 330,
-    height: 175,
+    useContentSize: true,
+    width: 485,
+    height: 330,
     show: false,
     fullscreenable: false,
     maximizable: false,
-    // resizable: false,
+    resizable: false,
     title: 'Preferences',
     webPreferences: {
 

diff --git a/src/preferences.ts b/src/preferences.ts
@@ -11,3 +11,6 @@ createApp(Preferences)
   .component('menu-separator', MenuSeparator)
   .component('Submenu', Submenu)
   .mount('#app')
+
+document.getElementsByTagName('html')[0]
+  .classList.add(process.platform);
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -21,29 +21,36 @@ module.exports = {
             'nav-bar': 'var(--color-nav-bar-background)',
             control: 'var(--color-control-background)',
             'selected-content': 'var(--color-selected-content-background)',
+            'under-page': 'var(--color-under-page-background)',
             window: 'var(--color-window-background)'
           },
           accent: 'var(--color-accent)',
           separator: 'var(--color-separator)',
           divider: 'var(--color-divider)'
         },
-
       }
     },
   },
   variants: {
     extend: {
+      alignItems: ['responsive', 'macos', 'windows'],
       backgroundColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus', 'macos', 'windows', 'window-blur'],
       backgroundOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus', 'macos', 'windows', 'window-blur'],
       borderColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus', 'macos', 'windows', 'window-blur'],
       borderOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus', 'macos', 'windows', 'window-blur'],
       borderRadius: ['responsive', 'macos', 'windows'],
       borderWidth: ['responsive', 'macos', 'windows'],
       boxShadow: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus', 'macos', 'windows', 'window-blur'],
+      display: ['responsive', 'macos', 'windows'],
       flexGrow: ['responsive', 'macos', 'windows'],
       flexShrink: ['responsive', 'macos', 'windows'],
       fontSize: ['responsive', 'macos', 'windows'],
       fontWeight: ['responsive', 'macos', 'windows'],
+      gap: ['responsive', 'macos', 'windows'],
+      gridColumn: ['responsive', 'macos', 'windows'],
+      gridColumnEnd: ['responsive', 'macos', 'windows'],
+      gridColumnStart: ['responsive', 'macos', 'windows'],
+      gridTemplateColumns: ['responsive', 'macos', 'windows'],
       justifyContent: ['responsive', 'macos', 'windows'],
       margin: ['responsive', 'macos', 'windows'],
       opacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus', 'macos', 'windows', 'window-blur'],