Update styling to better fit in on Windows.

grantjbutler · Feb 5, 2022 · 3e6ccc4 · 3e6ccc4
1 parent 07ae9ac
commit 3e6ccc4
Show file tree

Hide file tree

Showing 11 changed files with 132 additions and 55 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -14,5 +14,13 @@ module.exports = {
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
-  }
+  },
+  overrides: [
+    {
+      "files": ["tailwind.config.js"],
+      "rules": {
+        "@typescript-eslint/no-var-requires": "off"
+      }
+    }
+  ]  
 }
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "vuex": "^4.0.2"
   },
   "devDependencies": {
+    "@tailwindcss/forms": "0.3.4",
     "@types/chai": "^4.3.0",
     "@types/electron-devtools-installer": "^2.2.0",
     "@types/lodash": "^4.14.178",

diff --git a/src/assets/shared.css b/src/assets/shared.css
@@ -16,4 +16,10 @@
 
 .control\-field select {
   @apply macos:rounded;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
 }
diff --git a/src/components/Controls/FlexComponentControls.vue b/src/components/Controls/FlexComponentControls.vue
@@ -1,33 +1,27 @@
 <template>
-  <div>
-    <p class="controls-heading">Flex Component</p>
-    <div class="control-field">
-      <label>Direction</label>
-      <select v-model="direction">
-        <option value="horizontal">Horizontal</option>
-        <option value="vertical">Vertical</option>
-      </select>
-    </div>
-    <div class="control-field">
-      <label>Distribution</label>
-      <select v-model="distribution">
+  <div class="m-5 space-y-4">
+    <h3 class="text-lg">Flex Component</h3>
+    <FormSelect label="Direction" v-model="direction">
+      <option value="horizontal">Horizontal</option>
+      <option value="vertical">Vertical</option>
+    </FormSelect>
+    <FormSelect label="Distribution" v-model="distribution">
         <option value="leading">Leading</option>
         <option value="center">Center</option>
         <option value="trailing">Trailing</option>
-      </select>
-    </div>
-    <div class="control-field">
-      <label>Spacing</label>
-      <input type="number" v-model="spacing">
-    </div>
+    </FormSelect>
+    <FormNumberInput label="Spacing" v-model="spacing" :shows-slider="isWindows"></FormNumberInput>
   </div>
 </template>
 
 <script lang="ts">
 import { FlexComponent } from '@/layout'
 import { useStore } from '@/store/app'
 import { FLEX_SET_DIRECTION, FLEX_SET_DISTRIBUTION, FLEX_SET_SPACING } from '@/store/mutation-types'
+import { useIsWindows } from '@/integration/platform';
 import { computed, defineComponent, PropType, toRefs } from 'vue'
+import FormSelect from '@/components/Form/FormSelect.vue';
+import FormNumberInput from '@/components/Form/FormNumberInput.vue';
 
 export default defineComponent({
   name: 'FlexComponentControls',
@@ -37,9 +31,14 @@ export default defineComponent({
       required: true
     }
   },
+  components: {
+    FormSelect,
+    FormNumberInput
+  },
   setup(props) {
     const store = useStore()
     const { component } = toRefs(props)
+    const isWindows = useIsWindows();
     
     return {
       direction: computed({
@@ -53,7 +52,8 @@ export default defineComponent({
       spacing: computed({
         get() { return component.value.spacing },
         set(spacing: number) { store.commit(FLEX_SET_SPACING, spacing) }
-      })
+      }),
+      isWindows
     }
   }
 })

diff --git a/src/components/Controls/InsetComponentControls.vue b/src/components/Controls/InsetComponentControls.vue
@@ -1,27 +1,11 @@
 <template>
-  <div>
-    <p class="controls-heading">Inset Component</p>
-    <div class="control-field">
-      <label>Insets</label>
-      <div>
-        <div>
-          <label>Top</label>
-          <input type="number" v-model="top">
-        </div>
-        <div>
-          <label>Left</label>
-          <input type="number" v-model="left">
-        </div>
-        <div>
-          <label>Bottom</label>
-          <input type="number" v-model="bottom">
-        </div>
-        <div>
-          <label>Right</label>
-          <input type="number" v-model="right">
-        </div>
-      </div>
-    </div>
+  <div class="m-5 space-y-4">
+    <h3 class="text-lg">Inset Component</h3>
+    <label>Insets</label>
+    <FormNumberInput label="Top" v-model="top"></FormNumberInput>
+    <FormNumberInput label="Left" v-model="left"></FormNumberInput>
+    <FormNumberInput label="Bottom" v-model="bottom"></FormNumberInput>
+    <FormNumberInput label="Right" v-model="right"></FormNumberInput>
   </div>
 </template>
 
@@ -30,6 +14,7 @@ import InsetComponent from '@/layout/InsetComponent';
 import { useStore } from '@/store/app'
 import { INSET_SET_INSETS } from '@/store/mutation-types';
 import { computed, defineComponent, PropType, toRefs } from 'vue'
+import FormNumberInput from '@/components/Form/FormNumberInput.vue';
 
 export default defineComponent({
   name: 'InsetComponentControls',
@@ -39,6 +24,9 @@ export default defineComponent({
       required: true
     }
   },
+  components: {
+    FormNumberInput
+  },
   setup(props) {
     const { component } = toRefs(props);
     const store = useStore();

diff --git a/src/components/Controls/SourceComponentControls.vue b/src/components/Controls/SourceComponentControls.vue
@@ -1,12 +1,9 @@
 <template>
-  <div>
-    <p class="controls-heading">Source Component</p>
-    <div class="control-field">
-      <label>Source</label>
-      <select v-model="source">
-        <option v-for="aSource in sources" :key="aSource" :value="aSource" v-text="aSource.name"></option>
-      </select>
-    </div>
+  <div class="m-5 space-y-4">
+    <h3 class="text-lg">Source Component</h3>
+    <form-select label="Source" v-model="source">
+      <option v-for="aSource in sources" :key="aSource" :value="aSource" v-text="aSource.name"></option>
+    </form-select>
   </div>
 </template>
 
@@ -15,6 +12,7 @@ import SourceComponent from '@/layout/SourceComponent'
 import { useStore } from '@/store/app'
 import { SOURCE_SET_SOURCE } from '@/store/mutation-types'
 import { computed, defineComponent, PropType, toRefs } from 'vue'
+import FormSelect from '@/components/Form/FormSelect.vue';
 
 export default defineComponent({
   name: 'SourceComponentControls',
@@ -24,6 +22,9 @@ export default defineComponent({
       required: true
     }
   },
+  components: {
+    FormSelect
+  },
   setup(props) {
     const store = useStore()
     const { component } = toRefs(props)

diff --git a/src/components/Form/FormNumberInput.vue b/src/components/Form/FormNumberInput.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="flex flex-col space-y-2">
+    <div class="flex items-baseline windows:justify-between">
+      <label>{{ label }}</label>
+      <input type="number" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" class="windows:text-sm windows:border-gray-300 w-24 text-right">
+    </div>
+    <div v-if="showsSlider">
+      <input type="range" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" class="w-full">
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'FormNumberInput',
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    modelValue: {
+      type: Number,
+      required: true
+    },
+    showsSlider: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:modelValue']
+})
+</script>
diff --git a/src/components/Form/FormSelect.vue b/src/components/Form/FormSelect.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="flex items-baseline windows:justify-between">
+    <label>{{ label }}</label>
+    <select :value="modelValue" @change="$emit('update:modelValue', $event.target.value)" class="windows:text-sm windows:border-gray-300">
+      <slot></slot>
+    </select>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'FormSelect',
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    modelValue: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ['update:modelValue']
+})
+</script>
diff --git a/src/electron/preferences.ts b/src/electron/preferences.ts
@@ -25,7 +25,7 @@ export default class Preferences {
   }
 
   async setObsConnection(value: OBSConnectionOptions | null): Promise<void> {
-    let options = clone(value)
+    const options = clone(value)
 
     if (options && options.password) {
       await keytar.setPassword('obs-websocket', 'obs', options.password);

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,7 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
 const plugin = require('tailwindcss/plugin')
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires
 const colors = require('tailwindcss/colors')
 
 module.exports = {
@@ -42,6 +39,8 @@ module.exports = {
       borderOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus', 'macos', 'windows', 'window-blur'],
       borderRadius: ['responsive', 'macos', 'windows'],
       boxShadow: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus', 'macos', 'windows', 'window-blur'],
+      fontSize: ['responsive', 'macos', 'windows'],
+      justifyContent: ['responsive', 'macos', 'windows'],
       margin: ['responsive', 'macos', 'windows'],
       opacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus', 'macos', 'windows', 'window-blur'],
       padding: ['responsive', 'macos', 'windows'],
@@ -51,6 +50,7 @@ module.exports = {
     },
   },
   plugins: [
+    require('@tailwindcss/forms'),
     plugin(function({ addUtilities, addVariant, e }) {
       addVariant('macos', ({ modifySelectors, separator }) => {
         modifySelectors(({ className }) => {

diff --git a/yarn.lock b/yarn.lock
@@ -1125,6 +1125,13 @@
   dependencies:
     defer-to-connect "^1.0.1"
 
+"@tailwindcss/forms@0.3.4":
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.3.4.tgz#e4939dc16450eccf4fd2029770096f38cbb556d4"
+  integrity sha512-vlAoBifNJUkagB+PAdW4aHMe4pKmSLroH398UPgIogBFc91D2VlHUxe4pjxQhiJl0Nfw53sHSJSQBSTQBZP3vA==
+  dependencies:
+    mini-svg-data-uri "^1.2.3"
+
 "@tsconfig/node10@^1.0.7":
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/@tsconfig/node10/-/node10-1.0.8.tgz#c1e4e80d6f964fbecb3359c43bd48b40f7cadad9"
@@ -7299,6 +7306,11 @@ mini-css-extract-plugin@^0.9.0:
     schema-utils "^1.0.0"
     webpack-sources "^1.1.0"
 
+mini-svg-data-uri@^1.2.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.3.tgz#43177b2e93766ba338931a3e2a84a3dfd3a222b8"
+  integrity sha512-gSfqpMRC8IxghvMcxzzmMnWpXAChSA+vy4cia33RgerMS8Fex95akUyQZPbxJJmeBGiGmK7n/1OpUX8ksRjIdA==
+
 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"