From e7f5a2e1182e50532226403406c658e57d2fbc71 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Mon, 5 Mar 2018 05:37:33 +0200
Subject: [PATCH] add Beard's refresh button and change tab styling a bit

---
 client/src/styles/partials/generic/index.scss |   1 +
 .../styles/partials/generic/refreshbtn.scss   | 167 ++++++++++++++++++
 client/src/styles/partials/generic/tabs.scss  |   5 +-
 client/src/ui/components/bd/PluginsView.vue   |   8 +-
 client/src/ui/components/bd/ThemesView.vue    |   8 +-
 .../src/ui/components/common/RefreshBtn.vue   |  31 ++++
 6 files changed, 212 insertions(+), 8 deletions(-)
 create mode 100644 client/src/styles/partials/generic/refreshbtn.scss
 create mode 100644 client/src/ui/components/common/RefreshBtn.vue

diff --git a/client/src/styles/partials/generic/index.scss b/client/src/styles/partials/generic/index.scss
index e3614c84..b42b3800 100644
--- a/client/src/styles/partials/generic/index.scss
+++ b/client/src/styles/partials/generic/index.scss
@@ -7,3 +7,4 @@
 @import './material-buttons.scss';
 @import './drawers.scss';
 @import './preformatted.scss';
+@import './refreshbtn.scss';
diff --git a/client/src/styles/partials/generic/refreshbtn.scss b/client/src/styles/partials/generic/refreshbtn.scss
new file mode 100644
index 00000000..75f2ce32
--- /dev/null
+++ b/client/src/styles/partials/generic/refreshbtn.scss
@@ -0,0 +1,167 @@
+@keyframes bd-refresh-circle-anim-out {
+    0% {
+        transform: rotate(0deg);
+        stroke-dasharray: 36.5, 200;
+        stroke-dashoffset: -7.5;
+    }
+
+    80% {
+        stroke-dasharray: 36.5, 200;
+        stroke-dashoffset: -44;
+    }
+
+    100% {
+        transform: rotate(360deg);
+        stroke-dasharray: 36.5, 200;
+        stroke-dashoffset: -44;
+    }
+}
+
+@keyframes bd-refresh-circle-anim-in {
+    0% {
+        transform: rotate(-360deg);
+        stroke-dasharray: 0, 200;
+        stroke-dashoffset: -7.5;
+    }
+
+    100% {
+        transform: rotate(0deg);
+        stroke-dasharray: 36.5, 200;
+        stroke-dashoffset: -7.5;
+    }
+}
+
+@keyframes bd-refresh-arrow-rotate {
+    from {
+        transform: rotate(-680deg);
+    }
+
+    to {
+        transform: rotate(0deg);
+    }
+}
+
+.bd-refresh-button {
+    cursor: pointer;
+    height: 31px;
+    width: 31px;
+    display: block;
+
+    svg,
+    svg * {
+        backface-visibility: hidden;
+        -webkit-backface-visibility: hidden;
+    }
+
+    svg {
+        height: 19px;
+        width: 19px;
+        margin: 6px;
+    }
+
+    .bd-svg-refresh {
+        opacity: 1;
+    }
+
+    &.bd-refreshed {
+        .bd-svg-refresh {
+            transition: .5s cubic-bezier(.4,0,0,1) .2s;
+        }
+
+        .bd-svg-cancel-line:nth-of-type(1) {
+            transform-origin: bottom;
+            transition: .5s cubic-bezier(0,0,0,1) .1s, transform-origin 1ms;
+        }
+
+        .bd-svg-cancel-line:nth-of-type(2) {
+            transform-origin: left;
+            transition: .5s cubic-bezier(0,0,0,1), transform-origin 1ms;
+        }
+
+        .bd-svg-circle {
+            stroke-dasharray: 36.5, 200;
+            stroke-dashoffset: -7.5;
+            transform-origin: center;
+            animation: bd-refresh-circle-anim-in 1s cubic-bezier(.4,0,0,1);
+        }
+
+        .bd-svg-arrow {
+            transform-origin: center;
+            animation: bd-refresh-arrow-rotate 1s cubic-bezier(.4,0,0,1);
+        }
+    }
+
+    &.bd-refreshing {
+        .bd-svg-refresh {
+            transition: .5s cubic-bezier(.4,0,0,1);
+            opacity: .3;
+        }
+
+        .bd-svg-cancel-line {
+            opacity: 1;
+        }
+
+        .bd-svg-cancel-line:nth-of-type(1) {
+            transform-origin: top;
+            transform: scale(1,1);
+            transition: .5s cubic-bezier(0,0,0,1) .4s, transform-origin 1ms;
+        }
+
+        .bd-svg-cancel-line:nth-of-type(2) {
+            transform-origin: right;
+            transform: scale(1,1);
+            transition: .5s cubic-bezier(0,0,0,1) .3s, transform-origin 1ms;
+        }
+
+        .bd-svg-circle {
+            stroke-dasharray: 36.5, 200;
+            stroke-dashoffset: -44;
+            transform-origin: center;
+            animation: bd-refresh-circle-anim-out 1s cubic-bezier(.4,0,0,1);
+        }
+
+        .bd-svg-arrow {
+            transform-origin: center;
+            transform: rotate(360deg);
+            transition: 1s cubic-bezier(.4,0,0,1);
+        }
+
+        .bd-svg-arrow-triangle {
+            transition: .5s ease;
+            transform: scale(0);
+        }
+    }
+
+    .bd-svg-cancel {
+        transform: rotate(-45deg);
+        transform-origin: center;
+    }
+
+    .bd-svg-cancel-line {
+        opacity: .4;
+    }
+
+    .bd-svg-cancel-line:nth-of-type(1) {
+        transform: scale(1,0);
+    }
+
+    .bd-svg-cancel-line:nth-of-type(2) {
+        transform: scale(0,1);
+    }
+
+    .bd-svg-circle {
+        stroke-dasharray: 36.5, 200;
+        stroke-dashoffset: -7.5;
+    }
+
+    .bd-svg-arrow {
+        transform-origin: center;
+        transform: rotate(0deg);
+    }
+
+    .bd-svg-arrow-triangle {
+        transform-origin: 17.1px 6.9px;
+        transition: .8s ease .2s;
+        transform: scale(1);
+    }
+}
diff --git a/client/src/styles/partials/generic/tabs.scss b/client/src/styles/partials/generic/tabs.scss
index 7318dcd6..4e6d6785 100644
--- a/client/src/styles/partials/generic/tabs.scss
+++ b/client/src/styles/partials/generic/tabs.scss
@@ -41,6 +41,7 @@
 
         .bd-settingswrap & {
             min-width: 150px;
+            padding: 0;
         }
     }
 
@@ -86,12 +87,12 @@
     }
 
     .bd-settingswrap-header & {
-        margin-top: -17px;
+        // margin-top: -17px;
         margin-bottom: -20px;
 
         .bd-button {
             font-size: 16px;
-            padding: 18px 0 17px;
+           // padding: 18px 0 17px;
         }
 
         .bd-material-button {
diff --git a/client/src/ui/components/bd/PluginsView.vue b/client/src/ui/components/bd/PluginsView.vue
index 47a5b9f1..2a1684ec 100644
--- a/client/src/ui/components/bd/PluginsView.vue
+++ b/client/src/ui/components/bd/PluginsView.vue
@@ -13,11 +13,11 @@
         <div class="bd-tabbar" slot="header">
             <div class="bd-button" :class="{'bd-active': local}" @click="showLocal">
                 <h3>Installed</h3>
-                <div class="bd-material-button" v-if="local" @click="refreshLocal"><MiRefresh /></div>
+                <RefreshBtn v-if="local" :onClick="refreshLocal" />
             </div>
             <div class="bd-button" :class="{'bd-active': !local}" @click="showOnline">
                 <h3>Browse</h3>
-                <div class="bd-material-button" v-if="!local" @click="refreshOnline"><MiRefresh /></div>
+                <RefreshBtn v-if="!local" :onClick="refreshOnline" />
             </div>
         </div>
 
@@ -40,6 +40,7 @@
     import { SettingsWrapper } from './';
     import PluginCard from './PluginCard.vue';
     import { MiRefresh } from '../common';
+    import RefreshBtn from '../common/RefreshBtn.vue';
 
     export default {
         data() {
@@ -50,7 +51,8 @@
         },
         components: {
             SettingsWrapper, PluginCard,
-            MiRefresh
+            MiRefresh,
+            RefreshBtn
         },
         methods: {
             showLocal() {
diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index 3190e67a..2a7b2f46 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/client/src/ui/components/bd/ThemesView.vue
@@ -13,11 +13,11 @@
         <div class="bd-tabbar" slot="header">
             <div class="bd-button" :class="{'bd-active': local}" @click="showLocal">
                 <h3>Installed</h3>
-                <div class="bd-material-button" v-if="local" @click="refreshLocal"><MiRefresh /></div>
+                <RefreshBtn v-if="local" :onClick="refreshLocal"/>
             </div>
             <div class="bd-button" :class="{'bd-active': !local}" @click="showOnline">
                 <h3>Browse</h3>
-                <div class="bd-material-button" v-if="!local" @click="refreshOnline"><MiRefresh /></div>
+                <RefreshBtn v-if="!local" :onClick="refreshOnline" />
             </div>
         </div>
 
@@ -40,6 +40,7 @@
     import { SettingsWrapper } from './';
     import { MiRefresh } from '../common';
     import ThemeCard from './ThemeCard.vue';
+    import RefreshBtn from '../common/RefreshBtn.vue';
 
     export default {
         data() {
@@ -50,7 +51,8 @@
         },
         components: {
             SettingsWrapper, ThemeCard,
-            MiRefresh
+            MiRefresh,
+            RefreshBtn
         },
         methods: {
             showLocal() {
diff --git a/client/src/ui/components/common/RefreshBtn.vue b/client/src/ui/components/common/RefreshBtn.vue
new file mode 100644
index 00000000..6ce789da
--- /dev/null
+++ b/client/src/ui/components/common/RefreshBtn.vue
@@ -0,0 +1,31 @@
+/**
+ * BetterDiscord RefreshBtn
+ * Copyright (c) 2018 Lilian Tedone http://beard-design.com/
+ * All rights reserved.
+*/
+
+<template>
+    <div class="bd-refresh-button" :class="{'bd-refreshed': state === 'refreshed', 'bd-refreshing': state === 'refreshing'}" @click="onClick">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <g class="bd-svg-refresh">
+                <g class="bd-svg-circle">
+                    <path d="M0,0H24V24H0Z" style="fill:none" />
+                    <path d="M16.948,7.048A7,7,0,1,1,12,5a6.978,6.978,0,0,1,4.948,2.048" style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:2px" />
+                </g>
+                <g class="bd-svg-arrow">
+                    <path d="M0,0H24V24H0Z" style="fill:none" />
+                    <polygon class="bd-svg-arrow-triangle" style="fill:#fff" points="13 11 20 4 20 11 13 11" />
+                </g>
+            </g>
+            <g class="bd-svg-cancel">
+                <line class="bd-svg-cancel-line" x1="12" y1="3.098" x2="12" y2="20.902" style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:2px" />
+                <line class="bd-svg-cancel-line" x1="20.902" y1="12" x2="3.098" y2="12" style="fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:2px" />
+            </g>
+        </svg>
+    </div>
+</template>
+<script>
+    export default {
+        props: ['state', 'onClick']
+    }
+</script>