add Beard's refresh button and change tab styling a bit
This commit is contained in:
Jiiks
parent
064065cfe1
commit
e7f5a2e118
|
|
@ -7,3 +7,4 @@
|
|||
@import './material-buttons.scss';
|
||||
@import './drawers.scss';
|
||||
@import './preformatted.scss';
|
||||
@import './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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue