From 96804d42f0f6aa6af85295933af6fd267b19e473 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 7 Oct 2018 19:59:22 +0300
Subject: Some themeing is working!!

---
 src/components/opacity_input/opacity_input.vue | 75 ++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 src/components/opacity_input/opacity_input.vue

(limited to 'src/components/opacity_input')

diff --git a/src/components/opacity_input/opacity_input.vue b/src/components/opacity_input/opacity_input.vue
new file mode 100644
index 00000000..cfe6de21
--- /dev/null
+++ b/src/components/opacity_input/opacity_input.vue
@@ -0,0 +1,75 @@
+<template>
+<div class="opacity-control" :class="{ disabled: !present }">
+  <label :for="name" class="label">
+    {{$t('settings.opacity')}}
+  </label>
+  <input
+  v-if="typeof fallback !== 'undefined'"
+  class="opt"
+  :id="name + '-o'"
+      type="checkbox"
+  :checked="present"
+           @input="$emit('input', !present ? fallback : undefined)"
+           >
+  <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
+  <input
+    :id="name"
+    class="input-range"
+    type="range"
+    :value="value || fallback"
+    :disabled="!present"
+    @input="$emit('input', $event.target.value)"
+    max="1"
+    min="0"
+    step=".05">
+</div>
+</template>
+
+<script>
+export default {
+  props: [
+    'name', 'value', 'fallback'
+  ],
+  computed: {
+    present () {
+      return typeof this.value !== 'undefined'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.opacity-control {
+  display: flex;
+
+  &.disabled *:not(.opt-l) {
+    opacity: .5
+  }
+
+  .opt-l {
+    align-self: center;
+    line-height: 0;
+    &::before {
+      width: 14px;
+      height: 14px;
+    }
+  }
+
+  .label {
+    flex: 2;
+    min-width: 7em;
+  }
+
+  .input-range {
+    align-self: center;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    height: auto;
+    box-shadow: none;
+    min-width: 9em;
+    flex: 1;
+  }
+}
+</style>
-- 
cgit v1.2.3-70-g09d2