User a card base for both plugin and theme cards
This commit is contained in:
Jiiks
parent
e7b488316b
commit
72b024c4f3
|
|
@ -1,4 +1,4 @@
|
|||
.bd-theme-card {
|
||||
.bd-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
|
|
@ -9,14 +9,14 @@
|
|||
color: #b9bbbe;
|
||||
margin-top: 10px;
|
||||
|
||||
.bd-theme-header {
|
||||
.bd-card-header {
|
||||
padding-bottom: 5px;
|
||||
display: flex;
|
||||
flex-grow: 0;
|
||||
font-weight: 700;
|
||||
align-items: center;
|
||||
|
||||
.bd-theme-icon {
|
||||
.bd-card-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
|
@ -30,12 +30,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-theme-body {
|
||||
.bd-card-body {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
|
||||
.bd-theme-description {
|
||||
.bd-card-description {
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
max-height: 60px;
|
||||
|
|
@ -48,12 +48,12 @@
|
|||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.bd-theme-footer {
|
||||
.bd-card-footer {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: flex-end;
|
||||
|
||||
.bd-theme-extra {
|
||||
.bd-card-extra {
|
||||
color: rgba(255, 255, 255, 0.15);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
@import './button.scss';
|
||||
@import './sidebarview.scss';
|
||||
@import './plugins.scss';
|
||||
@import './plugincard.scss';
|
||||
@import './themecard.scss';
|
||||
@import './card.scss';
|
||||
@import './tooltips.scss';
|
||||
@import './plugin-settings-modal.scss';
|
||||
|
|
|
|||
|
|
@ -1,126 +0,0 @@
|
|||
.bd-plugin-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
background: transparent;
|
||||
border-bottom: 1px solid rgba(114, 118, 126, 0.3);
|
||||
padding: 10px 5px;
|
||||
min-height: 150px;
|
||||
color: #b9bbbe;
|
||||
margin-top: 10px;
|
||||
|
||||
.bd-plugin-header {
|
||||
padding-bottom: 5px;
|
||||
display: flex;
|
||||
flex-grow: 0;
|
||||
font-weight: 700;
|
||||
align-items: center;
|
||||
|
||||
.bd-plugin-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
> span {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: #afb1b4;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-plugin-body {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
|
||||
.bd-plugin-description {
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
max-height: 60px;
|
||||
min-height: 60px;
|
||||
color: #8a8c90;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 5px;
|
||||
border-radius: 8px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.bd-plugin-footer {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: flex-end;
|
||||
|
||||
.bd-plugin-extra {
|
||||
color: rgba(255, 255, 255, 0.15);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.bd-controls {
|
||||
.bd-button-group {
|
||||
.bd-button {
|
||||
fill: #FFF;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-switch-wrapper {
|
||||
flex: 0 0 auto;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
display: block;
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.bd-switch {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: #72767d;
|
||||
border-radius: 14px;
|
||||
transition: background .15s ease-in-out,box-shadow .15s ease-in-out,border .15s ease-in-out;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background: #f6f6f7;
|
||||
border-radius: 10px;
|
||||
transition: all .15s ease;
|
||||
box-shadow: 0 3px 1px 0 rgba(0,0,0,.05), 0 2px 2px 0 rgba(0,0,0,.1), 0 3px 3px 0 rgba(0,0,0,.05);
|
||||
}
|
||||
|
||||
&.bd-checked {
|
||||
background: $colbdblue;
|
||||
|
||||
&::before {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
/**
|
||||
* BetterDiscord Card Component
|
||||
* Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
|
||||
* All rights reserved.
|
||||
* https://betterdiscord.net
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
<template>
|
||||
<div class="bd-card">
|
||||
<div class="bd-card-header">
|
||||
<div class="bd-card-icon" :style="{backgroundImage: item.icon ? `url(${item.icon})` : null}">
|
||||
<MiExtension v-if="!item.icon" :size="30" />
|
||||
</div>
|
||||
<span>{{item.name}}</span>
|
||||
<div class="bd-flex-spacer" />
|
||||
<slot name="toggle"/>
|
||||
</div>
|
||||
<div class="bd-card-body">
|
||||
<div class="bd-card-description">{{item.description}}</div>
|
||||
<div class="bd-card-footer">
|
||||
<div class="bd-card-extra">v{{item.version}} by {{item.authors.join(', ').replace(/,(?!.*,)/gmi, ' and')}}</div>
|
||||
<div class="bd-controls">
|
||||
<slot name="controls"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// Imports
|
||||
import { MiExtension } from '../common';
|
||||
|
||||
export default {
|
||||
props: ['item'],
|
||||
components: {
|
||||
MiExtension
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -9,45 +9,31 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<div class="bd-plugin-card">
|
||||
<div class="bd-plugin-header">
|
||||
<div class="bd-plugin-icon" :style="{backgroundImage: plugin.icon ? `url(${plugin.icon})` : null}">
|
||||
<MiExtension v-if="!plugin.icon" :size="30"/>
|
||||
</div>
|
||||
<span>{{plugin.name}}</span>
|
||||
<div class="bd-flex-spacer" />
|
||||
<label class="bd-switch-wrapper" @click="() => { togglePlugin(plugin); this.$forceUpdate(); }">
|
||||
<input type="checkbox" class="bd-switch-checkbox" />
|
||||
<div class="bd-switch" :class="{'bd-checked': plugin.enabled}" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="bd-plugin-body">
|
||||
<div class="bd-plugin-description">{{plugin.description}}</div>
|
||||
<div class="bd-plugin-footer">
|
||||
<div class="bd-plugin-extra">v{{plugin.version}} by {{plugin.authors.join(', ').replace(/,(?!.*,)/gmi, ' and')}}</div>
|
||||
<div class="bd-controls">
|
||||
<ButtonGroup>
|
||||
<Button v-tooltip="'Settings'" v-if="plugin.hasSettings" :onClick="() => showSettings(plugin)">
|
||||
<MiSettings size="18"/>
|
||||
</Button>
|
||||
<Button v-tooltip="'Reload'" :onClick="() => reloadPlugin(plugin)">
|
||||
<MiRefresh size="18" />
|
||||
</Button>
|
||||
<Button v-tooltip="'Edit'" :onClick="editPlugin">
|
||||
<MiPencil size="18" />
|
||||
</Button>
|
||||
<Button v-tooltip="'Uninstall'" type="err">
|
||||
<MiDelete size="18" />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Card :item="plugin">
|
||||
<label slot="toggle" class="bd-switch-wrapper" @click="() => { togglePlugin(plugin); this.$forceUpdate(); }">
|
||||
<input type="checkbox" class="bd-switch-checkbox" />
|
||||
<div class="bd-switch" :class="{'bd-checked': plugin.enabled}" />
|
||||
</label>
|
||||
<ButtonGroup slot="controls">
|
||||
<Button v-tooltip="'Settings'" v-if="plugin.hasSettings" :onClick="() => showSettings(plugin)">
|
||||
<MiSettings size="18" />
|
||||
</Button>
|
||||
<Button v-tooltip="'Reload'" :onClick="() => reloadPlugin(plugin)">
|
||||
<MiRefresh size="18" />
|
||||
</Button>
|
||||
<Button v-tooltip="'Edit'" :onClick="editPlugin">
|
||||
<MiPencil size="18" />
|
||||
</Button>
|
||||
<Button v-tooltip="'Uninstall'" type="err">
|
||||
<MiDelete size="18" />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</Card>
|
||||
</template>
|
||||
<script>
|
||||
// Imports
|
||||
import { shell } from 'electron';
|
||||
import Card from './Card.vue';
|
||||
import { Button, ButtonGroup, SettingSwitch, MiSettings, MiRefresh, MiPencil, MiDelete, MiExtension } from '../common';
|
||||
|
||||
export default {
|
||||
|
|
@ -58,7 +44,7 @@
|
|||
},
|
||||
props: ['plugin', 'togglePlugin', 'reloadPlugin', 'showSettings'],
|
||||
components: {
|
||||
Button, ButtonGroup, SettingSwitch, MiSettings, MiRefresh, MiPencil, MiDelete, MiExtension
|
||||
Card, Button, ButtonGroup, SettingSwitch, MiSettings, MiRefresh, MiPencil, MiDelete, MiExtension
|
||||
},
|
||||
methods: {
|
||||
editPlugin() {
|
||||
|
|
|
|||
|
|
@ -9,45 +9,31 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<div class="bd-theme-card">
|
||||
<div class="bd-theme-header">
|
||||
<div class="bd-theme-icon" :style="{backgroundImage: theme.icon ? `url(${theme.icon})` : null}">
|
||||
<MiExtension v-if="!theme.icon" :size="30" />
|
||||
</div>
|
||||
<span>{{theme.name}}</span>
|
||||
<div class="bd-flex-spacer" />
|
||||
<label class="bd-switch-wrapper" @click="() => { toggleTheme(theme); this.$forceUpdate(); }">
|
||||
<input type="checkbox" class="bd-switch-checkbox" />
|
||||
<div class="bd-switch" :class="{'bd-checked': theme.enabled}" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="bd-theme-body">
|
||||
<div class="bd-theme-description">{{theme.description}}</div>
|
||||
<div class="bd-theme-footer">
|
||||
<div class="bd-theme-extra">v{{theme.version}} by {{theme.authors.join(', ').replace(/,(?!.*,)/gmi, ' and')}}</div>
|
||||
<div class="bd-controls">
|
||||
<ButtonGroup>
|
||||
<Button v-tooltip="'Settings'" v-if="theme.hasSettings" :onClick="() => showSettings(theme)">
|
||||
<MiSettings size="18" />
|
||||
</Button>
|
||||
<Button v-tooltip="'Reload'" :onClick="() => reloadTheme(theme)">
|
||||
<MiRefresh size="18" />
|
||||
</Button>
|
||||
<Button v-tooltip="'Edit'" :onClick="editTheme">
|
||||
<MiPencil size="18" />
|
||||
</Button>
|
||||
<Button v-tooltip="'Uninstall'" type="err">
|
||||
<MiDelete size="18" />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Card :item="theme">
|
||||
<label slot="toggle" class="bd-switch-wrapper" @click="() => { toggleTheme(theme); this.$forceUpdate(); }">
|
||||
<input type="checkbox" class="bd-switch-checkbox" />
|
||||
<div class="bd-switch" :class="{'bd-checked': theme.enabled}" />
|
||||
</label>
|
||||
<ButtonGroup slot="controls">
|
||||
<Button v-tooltip="'Settings'" v-if="theme.hasSettings" :onClick="() => showSettings(theme)">
|
||||
<MiSettings size="18" />
|
||||
</Button>
|
||||
<Button v-tooltip="'Reload'" :onClick="() => reloadTheme(theme)">
|
||||
<MiRefresh size="18" />
|
||||
</Button>
|
||||
<Button v-tooltip="'Edit'" :onClick="editTheme">
|
||||
<MiPencil size="18" />
|
||||
</Button>
|
||||
<Button v-tooltip="'Uninstall'" type="err">
|
||||
<MiDelete size="18" />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</Card>
|
||||
</template>
|
||||
<script>
|
||||
// Imports
|
||||
import { shell } from 'electron';
|
||||
import Card from './Card.vue';
|
||||
import { Button, ButtonGroup, SettingSwitch, MiSettings, MiRefresh, MiPencil, MiDelete, MiExtension } from '../common';
|
||||
|
||||
export default {
|
||||
|
|
@ -58,7 +44,7 @@
|
|||
},
|
||||
props: ['theme', 'toggleTheme', 'reloadTheme', 'showSettings'],
|
||||
components: {
|
||||
Button, ButtonGroup, SettingSwitch, MiSettings, MiRefresh, MiPencil, MiDelete, MiExtension
|
||||
Card, Button, ButtonGroup, SettingSwitch, MiSettings, MiRefresh, MiPencil, MiDelete, MiExtension
|
||||
},
|
||||
methods: {
|
||||
editTheme() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue