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

Merge pull request #37 from JsSucks/ui 

Merge so far changes to master
This commit is contained in:
Alexei Stukov 2018-01-22 22:48:37 +02:00 committed by GitHub
parent 9cdf200ae7 b908b2e42e
commit c44131e0dd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 769 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
client/src/data/user.settings.default.json Normal file
View File

@ -0,0 +1,55 @@
[
{
"id": "core",
"text": "Core",
"settings": [
{
"id": "test-setting",
"text": "Test Setting",
"hint": "Test Setting",
"enabled": false,
"disabled": false
},
{
"id": "test-setting2",
"text": "Test Setting 2",
"hint": "Test Setting 2",
"enabled": true,
"disabled": false
},
{
"id": "voice-disconnect",
"text": "Voice Disconnect",
"hint": "Disconnect from voice server when Discord closes",
"enabled": false,
"disabled": true
},
{
"id": "developer-mode",
"text": "Developer Mode",
"hint": "BetterDiscord developer mode",
"enabled": false,
"disabled": true
}
]
},
{
"id": "ui",
"text": "UI",
"settings": [
]
},
{
"id": "emotes",
"text": "Emotes",
"settings": []
},
{
"id": "security",
"text": "Security",
"settings": [
]
}
]

11
client/src/modules/core/settings.js Normal file
View File

@ -0,0 +1,11 @@
const defaultSettings = require('../../data/user.settings.default');
class Settings {
static get getSettings() {
return defaultSettings;
}
}
module.exports = { Settings };

3
client/src/modules/index.js
View File

@ -6,4 +6,5 @@ export { BDIpc } from './core/bdipc';
export { WebpackModules } from './core/webpackmodules';
export { Events } from './core/events';
export { SocketProxy } from './core/discordsocket';
export { CssEditor } from './core/csseditor';
export { CssEditor } from './core/csseditor';
export { Settings } from './core/settings';

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

@ -1,11 +1,13 @@
<template src="./templates/BdSettings.html"></template>
<script>
const { CssEditor } = require('../../../');
const { Settings } = require('../../../');
/*Imports*/
import { SidebarView, Sidebar, SidebarItem, ContentColumn } from './sidebar';
import { CoreSettings, UISettings, EmoteSettings, PluginsView } from './bd';
const components = { SidebarView, Sidebar, SidebarItem, ContentColumn, CoreSettings, UISettings, EmoteSettings, PluginsView };
import { CoreSettings, UISettings, EmoteSettings, PluginsView, CssEditorView } from './bd';
const components = { SidebarView, Sidebar, SidebarItem, ContentColumn, CoreSettings, UISettings, EmoteSettings, PluginsView, CssEditorView };
/*Constants*/
const sidebarItems = [
@ -21,10 +23,6 @@
/*Methods*/
function itemOnClick(id) {
if (id === 3) {
CssEditor.show();
return;
}
if (this.animating || id === this.activeIndex) return;
if (this.activeIndex >= 0) this.sidebarItems.find(item => item.id === this.activeIndex).active = false;
this.sidebarItems.find(item => item.id === id).active = true;
@ -54,7 +52,21 @@
return item.id === this.activeIndex;
}
const methods = { itemOnClick, animatingContent, activeContent };
function enableSetting(cat, id) {
switch (cat) {
case 'core':
return this.coreSettings.find(setting => setting.id === id).enabled = true;
}
}
function disableSetting(cat, id) {
switch (cat) {
case 'core':
return this.coreSettings.find(setting => setting.id === id).enabled = false;
}
}
const methods = { itemOnClick, animatingContent, activeContent, enableSetting, disableSetting };
export default {
components,
@ -66,7 +78,13 @@
activeIndex: -1,
lastActiveIndex: -1,
animating: false,
first: true
first: true,
settings: Settings.getSettings
}
},
computed: {
coreSettings: function () {
return this.settings.find(settingset => settingset.id === 'core').settings;
}
},
updated: function () {

19
client/src/modules/ui/vue/components/bd/CoreSettings.vue
View File

@ -1,14 +1,29 @@
<template>
<SettingsWrapper headertext="Core Settings">
<div class="bd-form-item" v-for="setting in settings" :key="setting.id">
<SettingSwitch key="setting.id" :setting="setting" :onClick="settingOnClick" :disabled="setting.disabled"/>
<div class="bd-form-divider"/>
</div>
</SettingsWrapper>
</template>
<script>
/*Imports*/
import { SettingsWrapper } from './';
const components = { SettingsWrapper };
import { SettingSwitch } from '../generic';
const components = { SettingsWrapper, SettingSwitch };
/*Methods*/
function settingOnClick(setting) {
if (setting.enabled) return this.disableSetting('core', setting.id);
this.enableSetting('core', setting.id);
}
const methods = { settingOnClick };
export default {
components
components,
methods,
props: ['settings', 'enableSetting', 'disableSetting']
}
</script>

32
client/src/modules/ui/vue/components/bd/CssEditor.vue Normal file
View File

@ -0,0 +1,32 @@
<template src="./templates/CssEditor.html"></template>
<script>
const { CssEditor } = require('../../../../');
/*Imports*/
import { SettingsWrapper } from './';
import { SettingSwitch } from '../generic';
const components = { SettingsWrapper, SettingSwitch };
function openInternalEditor() {
CssEditor.show();
}
function settingClicked() {
this.dummySetting.checked = !this.dummySetting.checked;
}
export default {
components,
methods: { openInternalEditor, settingClicked },
data() {
return {
dummySetting: {
title: "Live Update",
hint: "Automatically update client css when saved.",
checked: true
}
}
}
}
</script>

57
client/src/modules/ui/vue/components/bd/PluginsView.vue
View File

@ -5,7 +5,8 @@
/*Imports*/
import { SettingsWrapper } from './';
import PluginCard from './PluginCard.vue';
const components = { SettingsWrapper, PluginCard };
import Refresh from 'vue-material-design-icons/Refresh.vue';
const components = { SettingsWrapper, PluginCard, Refresh };
/*Variables*/
@ -42,4 +43,56 @@
this.refreshLocalPlugins();
}
}
</script>
</script>
<style>
.bd-spinner-container {
display: flex;
flex-grow: 1;
align-items: center;
align-content: center;
justify-content: center;
}
.bd-spinner-container .bd-spinner-2 {
width: 200px;
height: 200px;
}
.bd-pluginsView .bd-button {
display: flex;
}
.bd-pluginsView .bd-button h3 {
flex-grow: 1;
}
.bd-pluginsView .bd-button .material-design-icon {
display: flex;
align-items: center;
fill: #FFF;
}
.bd-material-button {
border-radius: 3px;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
width: 30px;
height: 30px;
}
.bd-pluginsView .bd-button {
border-bottom: 2px solid #2b2d31;
align-items: center;
}
.bd-material-button > span {
display: flex;
}
.bd-material-button:hover {
background: #2d2f34;
}
</style>

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

@ -3,4 +3,5 @@ export { default as CoreSettings } from './CoreSettings.vue';
export { default as UISettings } from './UISettings.vue';
export { default as EmoteSettings } from './EmoteSettings.vue';
export { default as PluginsView } from './PluginsView.vue';
export { default as PluginCard } from './PluginCard.vue';
export { default as PluginCard } from './PluginCard.vue';
export { default as CssEditorView } from './CssEditor.vue';

26
client/src/modules/ui/vue/components/bd/templates/CssEditor.html Normal file
View File

@ -0,0 +1,26 @@
<SettingsWrapper headertext="CSS Editor">
<div class="bd-css-editor">
<div class="bd-form-item">
<h5>Custom Editor</h5>
<div class="bd-form-warning">
<div class="bd-text">Custom Editor is not installed!</div>
<div class="bd-form-button">
Install
</div>
</div>
<span style="color: #FFF; font-size: 12px; font-weight: 700;">*This is displayed if editor is not installed</span>
<div class="bd-form-button" @click="openInternalEditor">
Open
</div>
</div>
<div class="bd-form-divider"></div>
<SettingSwitch :setting="dummySetting" :onClick="settingClicked"/>
<div class="bd-form-item">
<h5>System Editor</h5>
<div class="bd-form-button">
Open
</div>
</div>
<div class="bd-form-divider"></div>
</div>
</SettingsWrapper>

10
client/src/modules/ui/vue/components/bd/templates/PluginsView.html
View File

@ -3,14 +3,22 @@
<div class="bd-flex">
<div class="bd-flex-grow bd-button" :class="{'bd-active': local}" @click="showLocal">
<h3>Local</h3>
<div @click="refreshLocalPlugins()">Refresh</div>
<div class="bd-material-button" @click="refreshLocalPlugins">
<refresh />
</div>
</div>
<div class="bd-flex-grow bd-button" :class="{'bd-active': !local}" @click="showOnline">
<h3>Online</h3>
<div class="bd-material-button">
<refresh/>
</div>
</div>
</div>
<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"/>
</div>
<div v-if="!local" class="bd-spinner-container">
<div class="bd-spinner-2"></div>
</div>
</div>
</SettingsWrapper>

6
client/src/modules/ui/vue/components/generic/SettingSwitch.vue Normal file
View File

@ -0,0 +1,6 @@
<template src="./templates/SettingSwitch.html"></template>
<script>
export default {
props: ['setting', 'onClick', 'disabled']
}
</script>

3
client/src/modules/ui/vue/components/generic/index.js
View File

@ -1 +1,2 @@
export { default as ScrollerWrap } from './ScrollerWrap.vue';
export { default as ScrollerWrap } from './ScrollerWrap.vue';
export { default as SettingSwitch } from './SettingSwitch.vue';

10
client/src/modules/ui/vue/components/generic/templates/SettingSwitch.html Normal file
View File

@ -0,0 +1,10 @@
<div class="bd-setting-switch" :class="{'bd-disabled': disabled}">
<div class="bd-title">
<h3>{{setting.title || setting.text}}</h3>
<label class="bd-switch-wrapper" @click="!disabled ? onClick(setting) : null">
<input type="checkbox" class="bd-switch-checkbox"/>
<div class="bd-switch" :class="{'bd-checked': (setting.checked || setting.enabled)}"/>
</label>
</div>
<div class="bd-hint">{{setting.hint}}</div>
</div>

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

@ -9,11 +9,14 @@
</Sidebar>
<ContentColumn slot="content">
<div :class="{active: activeContent('core'), animating: animatingContent('core')}">
<CoreSettings />
<CoreSettings :settings="coreSettings" :enableSetting="enableSetting" :disableSetting="disableSetting"/>
</div>
<div :class="{active: activeContent('ui'), animating: animatingContent('ui')}">
<UISettings />
</div>
<div :class="{active: activeContent('css'), animating: animatingContent('css')}">
<CssEditorView />
</div>
<div :class="{active: activeContent('emotes'), animating: animatingContent('emotes')}">
<EmoteSettings />
</div>

327
client/src/styles/partials/animations.scss
View File

@ -68,3 +68,330 @@
opacity: 1;
}
}
/*SPINNERS*/
/*BD-SPINNER*/
.bd-spinner {
width: 40px;
height: 40px;
position: relative;
-webkit-animation: bd-spinner-anim3 2s cubic-bezier(0.4, 0, 0, 1) infinite;
animation: bd-spinner-anim3 2s cubic-bezier(0.4, 0, 0, 1) infinite;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.bd-spinner::after {
content: "";
background: #fff;
height: 10px;
width: 10px;
position: absolute;
border-radius: 50%;
left: 5px;
top: 15px;
-webkit-animation: bd-spinner-anim1 2s cubic-bezier(0.4, 0, 0, 1) infinite;
animation: bd-spinner-anim1 2s cubic-bezier(0.4, 0, 0, 1) infinite;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.bd-spinner::before {
content: "";
background: #fff;
height: 10px;
width: 10px;
position: absolute;
border-radius: 50%;
right: 5px;
top: 15px;
-webkit-animation: bd-spinner-anim2 2s cubic-bezier(0.4, 0, 0, 1) infinite;
animation: bd-spinner-anim2 2s cubic-bezier(0.4, 0, 0, 1) infinite;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
@-webkit-keyframes bd-spinner-anim1 {
0% {
-webkit-transform: translate(10px, 0);
transform: translate(10px, 0);
}
50% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
-webkit-transform: translate(10px, 0);
transform: translate(10px, 0);
}
}
@keyframes bd-spinner-anim1 {
0% {
-webkit-transform: translate(10px, 0);
transform: translate(10px, 0);
}
50% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
-webkit-transform: translate(10px, 0);
transform: translate(10px, 0);
}
}
@-webkit-keyframes bd-spinner-anim2 {
0% {
-webkit-transform: translate(-10px, 0);
transform: translate(-10px, 0);
}
50% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
-webkit-transform: translate(-10px, 0);
transform: translate(-10px, 0);
}
}
@keyframes bd-spinner-anim2 {
0% {
-webkit-transform: translate(-10px, 0);
transform: translate(-10px, 0);
}
50% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
-webkit-transform: translate(-10px, 0);
transform: translate(-10px, 0);
}
}
@-webkit-keyframes bd-spinner-anim3 {
from {
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes bd-spinner-anim3 {
from {
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/*BD-SPINNER-1*/
.bd-spinner-1 {
width: 40px;
height: 40px;
position: relative;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIyNSAyNSA1MCA1MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTAwIDEwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSJjaXJjdWxhciI+IDxjaXJjbGUgY2xhc3M9InBhdGgiIGN4PSI1MCIgY3k9IjUwIiByPSIxNyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+IDxzdHlsZT4gLmxvYWRlciB7IHBvc2l0aW9uOiByZWxhdGl2ZTsgbWFyZ2luOiAwIGF1dG87IHdpZHRoOiAxMDBweDsgfSAubG9hZGVyOmJlZm9yZSB7IGNvbnRlbnQ6ICIiOyBkaXNwbGF5OiBibG9jazsgcGFkZGluZy10b3A6IDEwMCU7IH0gLmNpcmN1bGFyIHsgLXdlYmtpdC1hbmltYXRpb246IHJvdGF0ZSAycyBsaW5lYXIgaW5maW5pdGU7IGFuaW1hdGlvbjogcm90YXRlIDJzIGxpbmVhciBpbmZpbml0ZTsgaGVpZ2h0OiAxMDAlOyAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7IC1tcy10cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB3aWR0aDogMTAwJTsgcG9zaXRpb246IGFic29sdXRlOyB0b3A6IDA7IGJvdHRvbTogMDsgbGVmdDogMDsgcmlnaHQ6IDA7IG1hcmdpbjogYXV0bzsgc3Ryb2tlOiAjZmZmOyB9IC5wYXRoIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgLXdlYmtpdC1hbmltYXRpb246IGRhc2ggMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZSwgY29sb3IgNnMgZWFzZS1pbi1vdXQgaW5maW5pdGU7IGFuaW1hdGlvbjogZGFzaCAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlLCBjb2xvciA2cyBlYXNlLWluLW91dCBpbmZpbml0ZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IH0gQC13ZWJraXQta2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBAa2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBALXdlYmtpdC1rZXlmcmFtZXMgZGFzaCB7IDAlIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgfSA1MCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTM1cHg7IH0gMTAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDg5LCAyMDA7IHN0cm9rZS1kYXNob2Zmc2V0OiAtMTI0cHg7IH0gfSBAa2V5ZnJhbWVzIGRhc2ggeyAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDEsIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7IH0gNTAlIHsgc3Ryb2tlLWRhc2hhcnJheTogODksIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IC0zNXB4OyB9IDEwMCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTEyNHB4OyB9IH0gPC9zdHlsZT4gPC9zdmc+) 50% 50%/60% no-repeat;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/*BD-SPINNER-2*/
.bd-spinner-2 {
width: 40px;
height: 40px;
position: relative;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIyNSAyNSA1MCA1MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTAwIDEwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSJjaXJjdWxhciI+IDxjaXJjbGUgY2xhc3M9InBhdGgiIGN4PSI1MCIgY3k9IjUwIiByPSIyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxMCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+IDxzdHlsZT4gLmxvYWRlciB7IHBvc2l0aW9uOiByZWxhdGl2ZTsgbWFyZ2luOiAwIGF1dG87IHdpZHRoOiAxMDBweDsgfSAubG9hZGVyOmJlZm9yZSB7IGNvbnRlbnQ6ICIiOyBkaXNwbGF5OiBibG9jazsgcGFkZGluZy10b3A6IDEwMCU7IH0gLmNpcmN1bGFyIHsgLXdlYmtpdC1hbmltYXRpb246IHJvdGF0ZSAycyBsaW5lYXIgaW5maW5pdGU7IGFuaW1hdGlvbjogcm90YXRlIDJzIGxpbmVhciBpbmZpbml0ZTsgaGVpZ2h0OiAxMDAlOyAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBjZW50ZXI7IC1tcy10cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB0cmFuc2Zvcm0tb3JpZ2luOiBjZW50ZXIgY2VudGVyOyB3aWR0aDogMTAwJTsgcG9zaXRpb246IGFic29sdXRlOyB0b3A6IDA7IGJvdHRvbTogMDsgbGVmdDogMDsgcmlnaHQ6IDA7IG1hcmdpbjogYXV0bzsgc3Ryb2tlOiAjZmZmOyB9IC5wYXRoIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgLXdlYmtpdC1hbmltYXRpb246IGRhc2ggMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZSwgY29sb3IgNnMgZWFzZS1pbi1vdXQgaW5maW5pdGU7IGFuaW1hdGlvbjogZGFzaCAxLjVzIGVhc2UtaW4tb3V0IGluZmluaXRlLCBjb2xvciA2cyBlYXNlLWluLW91dCBpbmZpbml0ZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IH0gQC13ZWJraXQta2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBAa2V5ZnJhbWVzIHJvdGF0ZSB7IDEwMCUgeyAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7IH0gfSBALXdlYmtpdC1rZXlmcmFtZXMgZGFzaCB7IDAlIHsgc3Ryb2tlLWRhc2hhcnJheTogMSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogMDsgfSA1MCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTM1cHg7IH0gMTAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDg5LCAyMDA7IHN0cm9rZS1kYXNob2Zmc2V0OiAtMTI0cHg7IH0gfSBAa2V5ZnJhbWVzIGRhc2ggeyAwJSB7IHN0cm9rZS1kYXNoYXJyYXk6IDEsIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7IH0gNTAlIHsgc3Ryb2tlLWRhc2hhcnJheTogODksIDIwMDsgc3Ryb2tlLWRhc2hvZmZzZXQ6IC0zNXB4OyB9IDEwMCUgeyBzdHJva2UtZGFzaGFycmF5OiA4OSwgMjAwOyBzdHJva2UtZGFzaG9mZnNldDogLTEyNHB4OyB9IH0gPC9zdHlsZT4gPC9zdmc+) 50% 50%/60% no-repeat;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/*BD-SPINNER-3*/
.bd-spinner-3 {
width: 40px;
height: 40px;
position: relative;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.bd-spinner-3::before {
content: "";
background: #fff;
height: 30px;
width: 30px;
position: absolute;
border-radius: 50%;
left: 5px;
top: 5px;
-webkit-animation: bd-spinner-3-anim1 1.5s cubic-bezier(0.4, 0, 0, 1) infinite;
animation: bd-spinner-3-anim1 1.5s cubic-bezier(0.4, 0, 0, 1) infinite;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.bd-spinner-3::after {
content: "";
background: #202225;
height: 20px;
width: 20px;
position: absolute;
border-radius: 50%;
left: 10px;
top: 10px;
-webkit-animation: bd-spinner-3-anim2 1.5s cubic-bezier(0.4, 0, 0, 1) infinite;
animation: bd-spinner-3-anim2 1.5s cubic-bezier(0.4, 0, 0, 1) infinite;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
@-webkit-keyframes bd-spinner-3-anim1 {
0% {
-webkit-transform: scale(1)rotate(0.01deg);
transform: scale(1)rotate(0.01deg);
}
50% {
-webkit-transform: scale(1.2)rotate(0.01deg);
transform: scale(1.2)rotate(0.01deg);
}
100% {
-webkit-transform: scale(1)rotate(0.01deg);
transform: scale(1)rotate(0.01deg);
}
}
@keyframes bd-spinner-3-anim1 {
0% {
-webkit-transform: scale(1)rotate(0.01deg);
transform: scale(1)rotate(0.01deg);
}
50% {
-webkit-transform: scale(1.2)rotate(0.01deg);
transform: scale(1.2)rotate(0.01deg);
}
100% {
-webkit-transform: scale(1)rotate(0.01deg);
transform: scale(1)rotate(0.01deg);
}
}
@-webkit-keyframes bd-spinner-3-anim2 {
0% {
-webkit-transform: scale(1)rotate(0.01deg);
transform: scale(1)rotate(0.01deg);
}
50% {
-webkit-transform: scale(0.4)rotate(0.01deg);
transform: scale(0.4)rotate(0.01deg);
}
100% {
-webkit-transform: scale(1)rotate(0.01deg);
transform: scale(1)rotate(0.01deg);
}
}
@keyframes bd-spinner-3-anim2 {
0% {
-webkit-transform: scale(1)rotate(0.01deg);
transform: scale(1)rotate(0.01deg);
}
50% {
-webkit-transform: scale(0.4)rotate(0.01deg);
transform: scale(0.4)rotate(0.01deg);
}
100% {
-webkit-transform: scale(1)rotate(0.01deg);
transform: scale(1)rotate(0.01deg);
}
}
/*BD-SPINNER-4*/
.bd-spinner-4 {
width: 40px;
height: 40px;
position: relative;
-webkit-animation: bd-spinner-4-anim1 1s cubic-bezier(0.9, -0.64, 0.05, 1.44) infinite;
animation: bd-spinner-4-anim1 1s cubic-bezier(0.9, -0.64, 0.05, 1.44) infinite;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.bd-spinner-4::before {
content: "";
background: #fff;
height: 10px;
width: 10px;
position: absolute;
border-radius: 50%;
left: 5px;
top: 15px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.bd-spinner-4::after {
content: "";
background: #fff;
height: 10px;
width: 10px;
position: absolute;
border-radius: 50%;
right: 5px;
top: 15px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
@-webkit-keyframes bd-spinner-4-anim1 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
@keyframes bd-spinner-4-anim1 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}

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

@ -3,8 +3,7 @@
.bd-pluginsView {
.bd-button {
text-align: center;
background: transparent;
h3 {
-webkit-user-select: none;
user-select: none;
@ -20,15 +19,8 @@
&: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;
background: transparent;
border-bottom: 2px solid #3e82e5;
}
}
}

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

@ -50,6 +50,11 @@
}
}
.bd-content-region,
.bd-content-region .bd-content-column {
backface-visibility: hidden;
}
.bd-button {
cursor: pointer;
color: #b9bbbe;
@ -57,4 +62,174 @@
text-align: center;
-webkit-user-select: none;
user-select: none;
font-weight: 500;
}
.bd-form-item h5 {
color: #b9bbbe;
text-transform: uppercase;
font-weight: 600;
font-size: 12px;
}
.bd-form-divider {
height: 1px;
margin-top: 8px;
margin-bottom: 40px;
background: hsla(218,5%,47%,.3);
}
.bd-form-warning {
display: flex;
margin-top: 20px;
background: #d84040;
border: 1px solid #B30B0B;
opacity: .8;
border-radius: 4px;
padding: 10px;
}
.bd-form-warning .bd-text {
display: flex;
color: #FFF;
font-weight: 700;
align-items: center;
flex-grow: 1;
}
.bd-form-warning .bd-form-button {
margin: 0;
align-self: flex-end;
background: #C42929;
&:hover {
background: lighten(#C42929, 2%);
}
}
.bd-form-button {
background: #3e82e5;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
color: #FFF;
border-radius: 4px;
margin-top: 10px;
cursor: pointer;
font-weight: 500;
user-select: none;
&:hover {
background: lighten(#3e82e5, 5%);
}
}
.bd-setting-switch {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
-webkit-box-pack: start;
justify-content: flex-start;
-webkit-box-align: stretch;
align-items: stretch;
}
.bd-setting-switch .bd-title {
display: flex;
justify-content: flex-start;
-webkit-box-align: stretch;
align-items: stretch;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: row;
box-sizing: border-box;
}
.bd-setting-switch .bd-switch-wrapper {
flex: 0 0 auto;
user-select: none;
position: relative;
width: 44px;
height: 24px;
display: block;
}
.bd-setting-switch .bd-switch-wrapper input {
position: absolute;
opacity: 0;
cursor: pointer;
width: 100%;
height: 100%;
z-index: 1;
}
.bd-setting-switch .bd-switch-wrapper .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;
}
.bd-setting-switch .bd-title h3 {
font-weight: 500;
color: #f6f6f7;
flex: 1;
line-height: 24px;
margin-bottom: 0;
margin-top: 0;
}
.bd-setting-switch .bd-hint {
flex: 1 1 auto;
color: #72767d;
font-size: 14px;
font-weight: 500;
margin-bottom: 15px;
line-height: 30px;
border-bottom: 0px solid hsla(218,5%,47%,.1);
}
.bd-setting-switch .bd-switch-wrapper .bd-switch:before {
content: "";
display: block;
width: 18px;
height: 18px;
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-setting-switch .bd-switch-wrapper .bd-switch.bd-checked {
background: $colbdblue;
}
.bd-setting-switch .bd-switch-wrapper .bd-switch.bd-checked:before {
transform: translateX(20px);
}
.bd-setting-switch + .bd-form-divider {
margin: 0 0 10px 0;
}
.bd-setting-switch.bd-disabled {
input {
cursor: not-allowed;
}
.bd-switch:before {
background: #888888;
}
}

7
client/src/styles/partials/plugincard.scss
View File

@ -2,9 +2,9 @@
display: flex;
flex-direction: column;
flex-grow: 1;
background: rgba(32, 34, 37, 0.6);
background: #2f3136;
border: 1px solid #202225;
padding: 5px 10px;
padding: 10px 5px;
min-height: 150px;
color: #b9bbbe;
border-radius: 8px;
@ -15,7 +15,6 @@
display: flex;
flex-grow: 0;
font-weight: 700;
box-shadow: 0 1px 0px darken(#2f3136, 8%);
}
.bd-plugin-body {
@ -31,7 +30,7 @@
color: #8a8c90;
font-size: 12px;
font-weight: 600;
background: rgba(32, 34, 37, 0.6);
background: rgba(0,0,0,.05);
padding: 5px;
border-radius: 8px;
margin-top: 5px;

1
client/webpack.config.js
View File

@ -13,7 +13,6 @@ const jsLoader = {
const vueLoader = {
test: /\.(vue)$/,
exclude: /node_modules/,
loader: 'vue-loader'
}

1
core/src/modules/csseditor.js
View File

@ -27,7 +27,6 @@ class CSSEditor extends Module {
this.editor = new BrowserWindow(this.options);
this.editor.loadURL(`file://${this.editorPath}/index.html`);
this.editor.webContents.toggleDevTools();
this.editor.open = true;
this.editor.setSheetOffset(33);

4
package.json
View File

@ -36,7 +36,9 @@
"gulp-plumber": "^1.2.0",
"gulp-watch": "^5.0.0",
"codemirror": "^5.23.0",
"vue-codemirror": "^4.0.3"
"vue-codemirror": "^4.0.3",
"vue-material-design-icons": "^1.0.0"
},
"scripts": {
"build": "cd ./client && npm run build && cd ../core && npm run build && cd ../csseditor && npm run build",