lightcordwarez
/
BetterDiscordApp-v2
mirror of https://github.com/JsSucks/BetterDiscordApp
1
0
Fork 0
Code Issues 3 Releases Wiki Activity

Move plugins and themes view tab bars to the header

This commit is contained in:
Samuel Elliott 2018-02-17 02:17:55 +00:00
parent 5938e39d99
commit 5931bffca3
No known key found for this signature in database
GPG Key ID: 8420C7CDE43DC4D6
5 changed files with 46 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
client/src/styles/partials/generic/tabs.scss
View File

@ -12,7 +12,7 @@
color: #87909c;
font-size: 14px;
font-weight: 500;
transition: color 0.2s ease;
transition: color 0.2s ease, border-bottom-color 0.2s ease;
flex: 0 0;
display: flex;
@ -52,7 +52,7 @@
&:hover,
&.bd-active {
background: transparent;
border-bottom: 2px solid $colbdblue;
border-bottom-color: $colbdblue;
color: #fff;
.bd-material-design-icon {
@ -64,4 +64,19 @@
cursor: default;
}
}
.bd-settingswrap-header & {
margin-top: -10px;
margin-bottom: -20px;
.bd-button {
font-size: 16px;
padding: 13px 0;
.bd-material-button {
width: 18px;
height: 18px;
}
}
}
}

3
client/src/styles/partials/sidebarview/settingswrap.scss
View File

@ -27,12 +27,15 @@
margin-top: 10px;
margin-bottom: 20px;
vertical-align: baseline;
display: flex;
flex: 0 0 auto;
.bd-settingswrap-header-text {
color: $colbdblue;
text-transform: uppercase;
font-weight: 600;
font-size: 16px;
flex: 1 1 auto;
}
}
}

21
client/src/ui/components/bd/PluginsView.vue
View File

@ -10,17 +10,18 @@
<template>
<SettingsWrapper headertext="Plugins">
<div class="bd-flex bd-flex-col bd-pluginsView">
<div class="bd-tabbar">
<div class="bd-button" :class="{'bd-active': local}" @click="showLocal">
<h3>Local</h3>
<div class="bd-material-button" @click="refreshLocal"><MiRefresh /></div>
</div>
<div class="bd-button" :class="{'bd-active': !local}" @click="showOnline">
<h3>Online</h3>
<div class="bd-material-button"><MiRefresh /></div>
</div>
<div class="bd-tabbar" slot="header">
<div class="bd-button" :class="{'bd-active': local}" @click="showLocal">
<h3>Local</h3>
<div class="bd-material-button" @click="refreshLocal"><MiRefresh /></div>
</div>
<div class="bd-button" :class="{'bd-active': !local}" @click="showOnline">
<h3>Online</h3>
<div class="bd-material-button"><MiRefresh /></div>
</div>
</div>
<div class="bd-flex bd-flex-col bd-pluginsView">
<div v-if="local" class="bd-flex bd-flex-grow bd-flex-col bd-plugins-container bd-local-plugins">
<PluginCard v-for="plugin in localPlugins" :plugin="plugin" :key="plugin.id" :togglePlugin="togglePlugin" :reloadPlugin="reloadPlugin" :showSettings="showSettings" />
</div>

5
client/src/ui/components/bd/SettingsWrapper.vue
View File

@ -12,9 +12,12 @@
<div class="bd-settingswrap">
<div class="bd-settingswrap-header">
<span class="bd-settingswrap-header-text">{{ headertext }}</span>
<slot name="header" />
</div>
<ScrollerWrap>
<slot />
<div class="bd-settingswrap-contents">
<slot />
</div>
</ScrollerWrap>
</div>
</template>

21
client/src/ui/components/bd/ThemesView.vue
View File

@ -10,17 +10,18 @@
<template>
<SettingsWrapper headertext="Themes">
<div class="bd-flex bd-flex-col bd-themesView">
<div class="bd-tabbar">
<div class="bd-button" :class="{'bd-active': local}" @click="showLocal">
<h3>Local</h3>
<div class="bd-material-button" @click="refreshLocal"><MiRefresh /></div>
</div>
<div class="bd-button" :class="{'bd-active': !local}" @click="showOnline">
<h3>Online</h3>
<div class="bd-material-button"><MiRefresh /></div>
</div>
<div class="bd-tabbar" slot="header">
<div class="bd-button" :class="{'bd-active': local}" @click="showLocal">
<h3>Local</h3>
<div class="bd-material-button" @click="refreshLocal"><MiRefresh /></div>
</div>
<div class="bd-button" :class="{'bd-active': !local}" @click="showOnline">
<h3>Online</h3>
<div class="bd-material-button"><MiRefresh /></div>
</div>
</div>
<div class="bd-flex bd-flex-col bd-themesView">
<div v-if="local" class="bd-flex bd-flex-grow bd-flex-col bd-themes-container bd-local-themes">
<ThemeCard v-for="theme in localThemes" :theme="theme" :key="theme.id" :toggleTheme="toggleTheme" :reloadTheme="reloadTheme" :showSettings="showSettings" />
</div>