redesign auto-refresh UI

Author: nkanaev

src/assets/graphicarts/chevron-down.svg

@@ -78,12 +78,20 @@
 
                     <header class="dropdown-header" role="heading" aria-level="2">Auto Refresh</header>
                     <div class="row text-center m-0">
-                        <button class="dropdown-item col-4 px-0" :aria-pressed="!refreshRate"       :class="{active: !refreshRate}"       @click.stop="refreshRate = 0">0</button>
-                        <button class="dropdown-item col-4 px-0" :aria-pressed="refreshRate == 10"  :class="{active: refreshRate == 10}"  @click.stop="refreshRate = 10">10m</button>
-                        <button class="dropdown-item col-4 px-0" :aria-pressed="refreshRate == 30"  :class="{active: refreshRate == 30}"  @click.stop="refreshRate = 30">30m</button>
-                        <button class="dropdown-item col-4 px-0" :aria-pressed="refreshRate == 60"  :class="{active: refreshRate == 60}"  @click.stop="refreshRate = 60">1h</button>
-                        <button class="dropdown-item col-4 px-0" :aria-pressed="refreshRate == 120" :class="{active: refreshRate == 120}" @click.stop="refreshRate = 120">2h</button>
-                        <button class="dropdown-item col-4 px-0" :aria-pressed="refreshRate == 240" :class="{active: refreshRate == 240}" @click.stop="refreshRate = 240">4h</button>
+                        <button class="dropdown-item col-4 px-0"
+                                @click.stop="changeRefreshRate(-1)"
+                                :disabled="!refreshRate">
+                            <span class="icon">
+                                {% inline "chevron-down.svg" %}
+                            </span>
+                        </button>
+                        <div class="col-4 d-flex align-items-center justify-content-center">{{ refreshRateTitle }}</div>
+                        <button class="dropdown-item col-4 px-0"
+                                @click.stop="changeRefreshRate(1)" :disabled="refreshRate === refreshRateOptions.at(-1).value">
+                            <span class="icon">
+                                {% inline "chevron-up.svg" %}
+                            </span>
+                        </button>
                     </div>
 
                     <div class="dropdown-divider"></div>

src/assets/graphicarts/chevron-up.svg

@@ -252,6 +252,17 @@ var vm = new Vue({
       'refreshRate': s.refresh_rate,
       'authenticated': app.authenticated,
       'feed_errors': {},
+
+      'refreshRateOptions': [
+        { title: "0", value: 0 },
+        { title: "10m", value: 10 },
+        { title: "30m", value: 30 },
+        { title: "1h", value: 60 },
+        { title: "2h", value: 120 },
+        { title: "4h", value: 240 },
+        { title: "12h", value: 720 },
+        { title: "24h", value: 1440 },
+      ],
     }
   },
   computed: {
@@ -309,7 +320,11 @@ var vm = new Vue({
     contentVideos: function() {
       if (!this.itemSelectedDetails) return []
       return (this.itemSelectedDetails.media_links || []).filter(l => l.type === 'video')
-    }
+    },
+    refreshRateTitle: function () {
+      const entry = this.refreshRateOptions.find(o => o.value === this.refreshRate)
+      return entry ? entry.title : '0'
+    },
   },
   watch: {
     'theme': {
@@ -778,6 +793,12 @@ var vm = new Vue({
         if (target && scroll) scrollto(target, scroll)
       })
     },
+    changeRefreshRate: function(offset) {
+      const curIdx = this.refreshRateOptions.findIndex(o => o.value === this.refreshRate)
+      if (curIdx <= 0 && offset < 0) return
+      if (curIdx >= (this.refreshRateOptions.length - 1) && offset > 0) return
+      this.refreshRate = this.refreshRateOptions[curIdx + offset].value
+    },
   }
 })