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

Style fixes and pluginview/plugincard bases

This commit is contained in:
Jiiks 2018-01-20 17:31:17 +02:00
parent 357706f4c5
commit e19f2ad8d7
12 changed files with 241 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/modules/ui/vue/components/BdSettings.vue
View File

@ -3,8 +3,8 @@
<script>
/*Imports*/
import { SidebarView, Sidebar, SidebarItem, ContentColumn } from './sidebar';
import { CoreSettings, UISettings, EmoteSettings } from './bd';
const components = { SidebarView, Sidebar, SidebarItem, ContentColumn, CoreSettings, UISettings, EmoteSettings };
import { CoreSettings, UISettings, EmoteSettings, PluginsView } from './bd';
const components = { SidebarView, Sidebar, SidebarItem, ContentColumn, CoreSettings, UISettings, EmoteSettings, PluginsView };
/*Constants*/
const sidebarItems = [

8
client/src/modules/ui/vue/components/bd/PluginCard.vue Normal file
View File

@ -0,0 +1,8 @@
<template src="./templates/PluginCard.html"></template>
<script>
export default {
props: ['plugin']
}
</script>

35
client/src/modules/ui/vue/components/bd/PluginsView.vue Normal file
View File

@ -0,0 +1,35 @@
<template src="./templates/PluginsView.html"></template>
<script>
/*Imports*/
import { SettingsWrapper, PluginCard } from './';
const components = { SettingsWrapper, PluginCard };
/*Variables*/
let dummyPlugins = [
{ "id": 0, "name": "Dummy Plugin 1", "authors": ["Jiiks"], "version": "1.0", "description": "Dummy Plugin 1 Description" },
{ "id": 0, "name": "Dummy Plugin 2", "authors": ["Jiiks", "SomeoneElse"], "version": "1.0", "description": "Dummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 Description" }
];
/*Methods*/
function showLocal() {
this.local = true;
}
function showOnline() {
this.local = false;
}
const methods = { showLocal, showOnline };
export default {
components,
data() {
return {
localPlugins: dummyPlugins,
local: true
}
},
methods
}
</script>

4
client/src/modules/ui/vue/components/bd/index.js
View File

@ -1,4 +1,6 @@
export { default as SettingsWrapper } from './SettingsWrapper.vue';
export { default as CoreSettings } from './CoreSettings.vue';
export { default as UISettings } from './UISettings.vue';
export { default as EmoteSettings } from './EmoteSettings.vue';
export { default as EmoteSettings } from './EmoteSettings.vue';
export { default as PluginsView } from './PluginsView.vue';
export { default as PluginCard } from './PluginCard.vue';

17
client/src/modules/ui/vue/components/bd/templates/PluginCard.html Normal file
View File

@ -0,0 +1,17 @@
<div class="bd-plugin-card">
<div class="bd-plugin-header">
<span>{{plugin.name}}</span>
<div class="bd-flex-spacer"/>
<label class="bd-switch-wrapper">
<input type="checkbox" class="bd-switch-checkbox" />
<div class="bd-switch"/>
</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"></div>
</div>
</div>
</div>

12
client/src/modules/ui/vue/components/bd/templates/PluginsView.html Normal file
View File

@ -0,0 +1,12 @@
<SettingsWrapper headertext="Plugins">
<div class="bd-flex bd-flex-col bd-pluginsView">
<div class="bd-flex">
<div class="bd-flex-grow bd-button" :class="{'bd-active': local}" @click="showLocal">
<h3>Local</h3>
</div>
<div class="bd-flex-grow bd-button" :class="{'bd-active': !local}">
<h3>Online</h3>
</div>
</div>
</div>
</SettingsWrapper>

3
client/src/modules/ui/vue/components/templates/BdSettings.html
View File

@ -17,6 +17,9 @@
<div :class="{active: activeContent('emotes'), animating: animatingContent('emotes')}">
<EmoteSettings />
</div>
<div :class="{active: activeContent('plugins'), animating: animatingContent('plugins')}">
<PluginsView />
</div>
</ContentColumn>
</SidebarView>

35
client/src/styles/partials/bdsettings.scss
View File

@ -1,3 +1,38 @@
@import './plugincard.scss';
.bd-pluginsView {
.bd-button {
text-align: center;
h3 {
-webkit-user-select: none;
user-select: none;
display: block;
font-size: 1.17em;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
&:hover,
&.bd-active {
color: #fff;
background: rgb(62, 130, 229);
}
&:first-of-type {
border-radius: 8px 0 0 8px;
}
&:last-of-type {
border-radius: 0 8px 8px 0;
}
}
}
.bd-settings-button {
position: absolute;
z-index: 1;

9
client/src/styles/partials/generic.scss
View File

@ -49,3 +49,12 @@
}
}
}
.bd-button {
cursor: pointer;
color: #b9bbbe;
background: #202225;
text-align: center;
-webkit-user-select: none;
user-select: none;
}

1
client/src/styles/partials/index.scss
View File

@ -1,6 +1,7 @@
@import './images.scss';
@import './colours.scss';
@import './animations.scss';
@import './layouts.scss';
@import './bdsettings.scss';
@import './sidebarview.scss';
@import './generic.scss';

19
client/src/styles/partials/layouts.scss Normal file
View File

@ -0,0 +1,19 @@
.bd-flex {
display: flex;
}
.bd-flex-row {
flex-direction: row;
}
.bd-flex-col {
flex-direction: column;
}
.bd-flex-grow {
flex-grow: 1;
}
.bd-flex-spacer {
flex-grow: 1;
}

97
client/src/styles/partials/plugincard.scss Normal file
View File

@ -0,0 +1,97 @@
.bd-plugin-card {
display: flex;
flex-direction: column;
flex-grow: 1;
background: rgba(32, 34, 37, 0.6);
border: 1px solid #202225;
padding: 5px 10px;
min-height: 150px;
color: #b9bbbe;
border-radius: 8px;
margin-top: 10px;
.bd-plugin-header {
padding-bottom: 5px;
display: flex;
flex-grow: 0;
font-weight: 700;
box-shadow: 0 1px 0px darken(#2f3136, 8%);
}
.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;
background: rgba(32, 34, 37, 0.6);
padding: 5px;
border-radius: 8px;
margin-top: 5px;
}
.bd-plugin-footer {
display: flex;
justify-content: flex-end;
flex-grow: 1;
align-items: flex-end;
.bd-plugin-extra {
color: rgba(255, 255, 255, 0.15);
font-size: 10px;
font-weight: 700;
}
}
}
.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);
}
}
}
}