Merge remote-tracking branch 'upstream/develop' into mobile-back

* upstream/develop: (142 commits)
  fix timeago font
  added hide_network option, fixed properties naming
  Fix fetching new users, add storing local users in usersObjects with their screen_name as well as id, so that they could be fetched zero-state with screen-name link.
  improve notification subscription
  Fix typo that prevented scope copy from working.
  added check for activatePanel is function or not
  addressed PR comments
  activate panel on user screen click
  added not preload check so hidden toggles asap
  removed counters from left panel
  added router-links to all relavent links
  added activatePanel onclick for timeago button
  added PR comments
  add checkbox to disable web push
  removed brackets from condition
  resolved lint issue
  renamed config to preload images and add ident to config
  added config for preload and made attachment responsive to it
  preload nsfw image
  fix
  ...

2 files changed, 330 insertions, 0 deletions

diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
new file mode 100644
index 00000000..44e4a22f
--- /dev/null
+++ b/src/components/shadow_control/shadow_control.js
@@ -0,0 +1,87 @@
+import ColorInput from '../color_input/color_input.vue'
+import OpacityInput from '../opacity_input/opacity_input.vue'
+import { getCssShadow } from '../../services/style_setter/style_setter.js'
+import { hex2rgb } from '../../services/color_convert/color_convert.js'
+
+export default {
+  // 'Value' and 'Fallback' can be undefined, but if they are
+  // initially vue won't detect it when they become something else
+  // therefore i'm using "ready" which should be passed as true when
+  // data becomes available
+  props: [
+    'value', 'fallback', 'ready'
+  ],
+  data () {
+    return {
+      selectedId: 0,
+      // TODO there are some bugs regarding display of array (it's not getting updated when deleting for some reason)
+      cValue: this.value || this.fallback || []
+    }
+  },
+  components: {
+    ColorInput,
+    OpacityInput
+  },
+  methods: {
+    add () {
+      this.cValue.push(Object.assign({}, this.selected))
+      this.selectedId = this.cValue.length - 1
+    },
+    del () {
+      this.cValue.splice(this.selectedId, 1)
+      this.selectedId = this.cValue.length === 0 ? undefined : this.selectedId - 1
+    },
+    moveUp () {
+      const movable = this.cValue.splice(this.selectedId, 1)[0]
+      this.cValue.splice(this.selectedId - 1, 0, movable)
+      this.selectedId -= 1
+    },
+    moveDn () {
+      const movable = this.cValue.splice(this.selectedId, 1)[0]
+      this.cValue.splice(this.selectedId + 1, 0, movable)
+      this.selectedId += 1
+    }
+  },
+  beforeUpdate () {
+    this.cValue = this.value || this.fallback
+  },
+  computed: {
+    selected () {
+      if (this.ready && this.cValue.length > 0) {
+        return this.cValue[this.selectedId]
+      } else {
+        return {
+          x: 0,
+          y: 0,
+          blur: 0,
+          spread: 0,
+          inset: false,
+          color: '#000000',
+          alpha: 1
+        }
+      }
+    },
+    moveUpValid () {
+      return this.ready && this.selectedId > 0
+    },
+    moveDnValid () {
+      return this.ready && this.selectedId < this.cValue.length - 1
+    },
+    present () {
+      return this.ready &&
+        typeof this.cValue[this.selectedId] !== 'undefined' &&
+        !this.usingFallback
+    },
+    usingFallback () {
+      return typeof this.value === 'undefined'
+    },
+    rgb () {
+      return hex2rgb(this.selected.color)
+    },
+    style () {
+      return this.ready ? {
+        boxShadow: getCssShadow(this.cValue)
+      } : {}
+    }
+  }
+}
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
new file mode 100644
index 00000000..744925d4
--- /dev/null
+++ b/src/components/shadow_control/shadow_control.vue
@@ -0,0 +1,243 @@
+<template>
+<div class="shadow-control" :class="{ disabled: !present }">
+  <div class="shadow-preview-container">
+    <div :disabled="!present" class="y-shift-control">
+      <input
+        v-model="selected.y"
+        :disabled="!present"
+        class="input-number"
+        type="number">
+      <div class="wrap">
+        <input
+          v-model="selected.y"
+          :disabled="!present"
+          class="input-range"
+          type="range"
+          max="20"
+          min="-20">
+      </div>
+    </div>
+    <div class="preview-window">
+      <div class="preview-block" :style="style"></div>
+    </div>
+    <div :disabled="!present" class="x-shift-control">
+      <input
+        v-model="selected.x"
+        :disabled="!present"
+        class="input-number"
+        type="number">
+      <div class="wrap">
+        <input
+          v-model="selected.x"
+          :disabled="!present"
+          class="input-range"
+          type="range"
+          max="20"
+          min="-20">
+      </div>
+    </div>
+  </div>
+
+  <div class="shadow-tweak">
+    <div :disabled="usingFallback" class="id-control style-control">
+      <label for="shadow-switcher" class="select" :disabled="!ready || usingFallback">
+        <select
+          v-model="selectedId" class="shadow-switcher"
+          :disabled="!ready || usingFallback"
+          id="shadow-switcher">
+          <option v-for="(shadow, index) in cValue" :value="index">
+            {{$t('settings.style.shadows.shadow_id', { value: index })}}
+          </option>
+        </select>
+        <i class="icon-down-open"/>
+      </label>
+      <button class="btn btn-default" :disabled="!ready || !present" @click="del">
+        <i class="icon-cancel"/>
+      </button>
+      <button class="btn btn-default" :disabled="!moveUpValid" @click="moveUp">
+        <i class="icon-up-open"/>
+      </button>
+      <button class="btn btn-default" :disabled="!moveDnValid" @click="moveDn">
+        <i class="icon-down-open"/>
+      </button>
+      <button class="btn btn-default" :disabled="usingFallback" @click="add">
+        <i class="icon-plus"/>
+      </button>
+    </div>
+    <div :disabled="!present" class="inset-control style-control">
+      <label for="inset" class="label">
+        {{$t('settings.style.shadows.inset')}}
+      </label>
+      <input
+        v-model="selected.inset"
+        :disabled="!present"
+        name="inset"
+        id="inset"
+        class="input-inset"
+        type="checkbox">
+      <label class="checkbox-label" for="inset"></label>
+    </div>
+    <div :disabled="!present" class="blur-control style-control">
+      <label for="spread" class="label">
+        {{$t('settings.style.shadows.blur')}}
+      </label>
+      <input
+        v-model="selected.blur"
+        :disabled="!present"
+        name="blur"
+        id="blur"
+        class="input-range"
+        type="range"
+        max="20"
+        min="0">
+      <input
+        v-model="selected.blur"
+        :disabled="!present"
+        class="input-number"
+        type="number"
+        min="0">
+    </div>
+    <div :disabled="!present" class="spread-control style-control">
+      <label for="spread" class="label">
+        {{$t('settings.style.shadows.spread')}}
+      </label>
+      <input
+        v-model="selected.spread"
+        :disabled="!present"
+        name="spread"
+        id="spread"
+        class="input-range"
+        type="range"
+        max="20"
+        min="-20">
+      <input
+        v-model="selected.spread"
+        :disabled="!present"
+        class="input-number"
+        type="number">
+    </div>
+    <ColorInput
+      v-model="selected.color"
+      :disabled="!present"
+      :label="$t('settings.style.common.color')"
+      name="shadow"/>
+    <OpacityInput
+      v-model="selected.alpha"
+      :disabled="!present"/>
+    <p>
+      {{$t('settings.style.shadows.hint')}}
+    </p>
+  </div>
+</div>
+</template>
+
+<script src="./shadow_control.js" ></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+.shadow-control {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-bottom: 1em;
+
+  .shadow-preview-container,
+  .shadow-tweak {
+    margin: 5px 6px 0 0;
+  }
+  .shadow-preview-container {
+    flex: 0;
+    display: flex;
+    flex-wrap: wrap;
+
+    $side: 15em;
+
+    input[type=number] {
+      width: 5em;
+      min-width: 2em;
+    }
+    .x-shift-control,
+    .y-shift-control {
+      display: flex;
+      flex: 0;
+
+      &[disabled=disabled] *{
+        opacity: .5
+      }
+
+    }
+
+    .x-shift-control {
+      align-items: flex-start;
+    }
+
+    .x-shift-control .wrap,
+    input[type=range] {
+      margin: 0;
+      width: $side;
+      height: 2em;
+    }
+    .y-shift-control {
+      flex-direction: column;
+      align-items: flex-end;
+      .wrap {
+        width: 2em;
+        height: $side;
+      }
+      input[type=range] {
+        transform-origin: 1em 1em;
+        transform: rotate(90deg);
+      }
+    }
+    .preview-window {
+      flex: 1;
+      background-color: #999999;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-image:
+      linear-gradient(45deg, #666666 25%, transparent 25%),
+      linear-gradient(-45deg, #666666 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, #666666 75%),
+      linear-gradient(-45deg, transparent 75%, #666666 75%);
+      background-size: 20px 20px;
+      background-position:0 0, 0 10px, 10px -10px, -10px 0;
+
+      border-radius: $fallback--inputRadius;
+      border-radius: var(--inputRadius, $fallback--inputRadius);
+
+      .preview-block {
+        width: 33%;
+        height: 33%;
+        background-color: $fallback--bg;
+        background-color: var(--bg, $fallback--bg);
+        border-radius: $fallback--panelRadius;
+        border-radius: var(--panelRadius, $fallback--panelRadius);
+      }
+    }
+  }
+
+  .shadow-tweak {
+    flex: 1;
+    min-width: 280px;
+
+    .id-control {
+      align-items: stretch;
+      .select, .btn {
+        min-width: 1px;
+        margin-right: 5px;
+      }
+      .btn {
+        padding: 0 .4em;
+        margin: 0 .1em;
+      }
+      .select {
+        flex: 1;
+        select {
+          align-self: initial;
+        }
+      }
+    }
+  }
+}
+</style>