Alexei Stukov
GitHub
commit
fb0326d371
|
|
@ -26,7 +26,9 @@
|
|||
"vue": "^2.5.13",
|
||||
"vue-loader": "^13.7.0",
|
||||
"vue-template-compiler": "^2.5.13",
|
||||
"css-loader": "^0.28.9"
|
||||
"css-loader": "^0.28.9",
|
||||
"sass-loader": "^6.0.6",
|
||||
"node-sass": "^4.7.2"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "webpack --progress --colors",
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
'use strict';
|
||||
|
||||
const styles = require('./styles/index.scss');
|
||||
const { Global, Logger, Utils, PluginManager, BDIpc, WebpackModules, SocketProxy, Events } = require('./modules');
|
||||
//const { UI } = require('./modules/ui/index.jsx');
|
||||
|
||||
|
|
@ -22,7 +23,13 @@ class BetterDiscord {
|
|||
const { UI } = require('./modules/ui/vueui.js');
|
||||
this.ui = new UI();
|
||||
});
|
||||
// this.UI = new UI();
|
||||
|
||||
//Inject styles to head for now
|
||||
const style = document.createElement('style');
|
||||
style.id = 'bd-main';
|
||||
style.type = 'text/css';
|
||||
style.appendChild(document.createTextNode(styles));
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,48 @@
|
|||
<template>
|
||||
<div class="bd-settings" :class="{active: isActive}">
|
||||
<SidebarView>
|
||||
<Sidebar slot="sidebar">
|
||||
<SidebarItem v-for="item in sidebarItems" :item="item" :key="item.id" :onClick="itemOnClick" />
|
||||
</Sidebar>
|
||||
</SidebarView>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const sidebarItems = [
|
||||
{ text: 'Internal', t: 'header' },
|
||||
{ id: 0, contentid: "core", text: 'Core', active: false, t: 'button' },
|
||||
{ id: 1, contentid: "ui", text: 'UI', active: false, t: 'button' },
|
||||
{ id: 2, contentid: "emotes", text: 'Emotes', active: false, t: 'button' },
|
||||
{ id: 3, contentid: "css", text: 'CSS Editor', active: false, t: 'button' },
|
||||
{ text: 'External', t: 'header' },
|
||||
{ id: 4, contentid: "plugins", text: 'Plugins', active: false, t: 'button' },
|
||||
{ id: 5, contentid: "themes", text: 'Themes', active: false, t: 'button' }
|
||||
];
|
||||
|
||||
function itemOnClick(id) {
|
||||
console.log(`Item Clicked! ${id}`);
|
||||
}
|
||||
|
||||
|
||||
import { SidebarItem, SidebarView, Sidebar } from './sidebar/index.js';
|
||||
export default {
|
||||
props: ['isActive']
|
||||
props: ['isActive'],
|
||||
components: {
|
||||
SidebarItem,
|
||||
SidebarView,
|
||||
Sidebar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sidebarItems
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
itemOnClick
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
<template>
|
||||
<div class="bd-item" :class="{active: item.active}" @click="onClick(item.id)">{{item.text}}</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['item', 'onClick']
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.bd-item {
|
||||
border-radius: 3px;
|
||||
margin-bottom: 2px;
|
||||
padding-bottom: 6px;
|
||||
padding-top: 6px;
|
||||
padding: 6px 10px;
|
||||
color: #b9bbbe;
|
||||
cursor: pointer;
|
||||
font-size: 17px;
|
||||
line-height: 20px;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||
&:hover
|
||||
|
||||
{
|
||||
background: rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #FFF;
|
||||
background: rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<div class='bd-header'>{{item.text}}</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['item']
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.bd-header {
|
||||
padding: 6px 0;
|
||||
margin-left: 10px;
|
||||
margin-top: 15px;
|
||||
color: rgba(255,255,255,0.15);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<SidebarButton v-if="item.t == 'button'" :item="item" :onClick="onClick" />
|
||||
<SidebarHeader v-else-if="item.t == 'header'" :item="item" />
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import { SidebarHeader, SidebarButton } from './';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SidebarHeader,
|
||||
SidebarButton
|
||||
},
|
||||
props: ['item', 'onClick']
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<div class='bd-sidebar'>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.bd-sidebar {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 30px;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #4D7DEC;
|
||||
margin-left: 10px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
padding-bottom: 13px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,192 @@
|
|||
<template>
|
||||
<div class='bd-sidebar-view' :class="{active: contentVisible, animating: animating}">
|
||||
<div class='bd-sidebar-region'>
|
||||
<div class='bd-settingsWrap'>
|
||||
<div class='bd-scroller'>
|
||||
<slot name="sidebar" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='bd-content-region'>
|
||||
<slot name="content" />
|
||||
<div class='bd-content-tools' />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
contentVisible: {
|
||||
default: false
|
||||
},
|
||||
animating: {
|
||||
default: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.bd-settingsWrap {
|
||||
padding: 20px 15px 15px 15px;
|
||||
}
|
||||
|
||||
.bd-scroller {
|
||||
width: 100%;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.bd-sidebar-view {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bd-sidebar-view:not(.active) {
|
||||
}
|
||||
|
||||
.bd-sidebar-view .bd-content-region {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.bd-sidebar-view .bd-content-region .bd-content-tools {
|
||||
width: 100px;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.bd-sidebar-view.active .bd-content-region {
|
||||
animation: slidein .6s forwards;
|
||||
}
|
||||
|
||||
.bd-sidebar-view .bd-content > div:not(.active) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.bd-sidebar-view .bd-content .animating {
|
||||
animation: fade-out .4s forwards;
|
||||
}
|
||||
|
||||
.bd-sidebar-view .bd-content {
|
||||
animation: fade-in .4s forwards;
|
||||
}
|
||||
|
||||
.bd-sidebar-region {
|
||||
background: #202225;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-box-pack: end;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding-top: 50px;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.bd-content-region {
|
||||
background: #2F3136;
|
||||
-ms-flex: 1 1 800px;
|
||||
-ms-flex-align: start;
|
||||
-webkit-box-align: start;
|
||||
-webkit-box-flex: 1;
|
||||
align-items: flex-start;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
flex: 1 1 70%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.bd-sidebar-view .bd-settingsWrap {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
-webkit-box-flex: 1;
|
||||
flex: 1;
|
||||
min-height: 1px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bd-sidebar-view .bd-settingsWrap .scroller {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
-webkit-box-flex: 1;
|
||||
flex: 1;
|
||||
min-height: 1px;
|
||||
contain: layout;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
@keyframes slidein {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideout {
|
||||
0% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(-100%);
|
||||
opacity: .2;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideoutin {
|
||||
0% {
|
||||
transform: translateX(-10%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: translateX(-100%);
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(-10%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
export { default as SidebarHeader } from './Header.vue';
|
||||
export { default as SidebarButton } from './Button.vue';
|
||||
export { default as SidebarItem } from './Item.vue';
|
||||
export { default as SidebarView } from './View.vue';
|
||||
export { default as Sidebar } from './Sidebar.vue';
|
||||
|
|
@ -17,6 +17,12 @@ const vueLoader = {
|
|||
loader: 'vue-loader'
|
||||
}
|
||||
|
||||
const scssLoader = {
|
||||
test: /\.scss$/,
|
||||
exclude: /node_modules/,
|
||||
loader: ['css-loader', 'sass-loader']
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
entry: './src/index.js',
|
||||
output: {
|
||||
|
|
@ -24,7 +30,7 @@ module.exports = {
|
|||
filename: 'betterdiscord.client.js'
|
||||
},
|
||||
module: {
|
||||
loaders: [jsLoader, vueLoader]
|
||||
loaders: [jsLoader, vueLoader, scssLoader]
|
||||
},
|
||||
externals: {
|
||||
'electron': 'window.require("electron")'
|
||||
|
|
|
|||
Loading…
Reference in New Issue