Remove old componets
This commit is contained in:
Jiiks
parent
4fc630cf0a
commit
17d7e83590
|
|
@ -1,23 +0,0 @@
|
|||
<template>
|
||||
<h2 class="bd-content-title">{{text}}</h2>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
text: {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.bd-content-title {
|
||||
color: #4D7DEC;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 100%;
|
||||
outline: 0;
|
||||
padding: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
<template>
|
||||
<div class="bd-settingsWrap">
|
||||
<div class="bd-scroller">
|
||||
<ContentHeader text="Core Settings" />
|
||||
<div>
|
||||
<SettingSwitch v-for="setting in settings" :setting="setting" :key="setting.id" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ContentHeader from './ContentHeader.vue';
|
||||
import SettingSwitch from './SettingSwitch.vue';
|
||||
|
||||
const settings = [
|
||||
{id: 0, title: "Public Servers", hint: "Display public servers button"},
|
||||
{id: 1, title: "Minimal Mode", hint: "Hide elements and reduce the size of elements"},
|
||||
{id: 2, title: "Voice Mode", hint: "Only show voice chat"},
|
||||
{id: 0, title: "Public Servers", hint: "Display public servers button"},
|
||||
{id: 1, title: "Minimal Mode", hint: "Hide elements and reduce the size of elements"},
|
||||
{id: 2, title: "Voice Mode", hint: "Only show voice chat"},
|
||||
{id: 0, title: "Public Servers", hint: "Display public servers button"},
|
||||
{id: 1, title: "Minimal Mode", hint: "Hide elements and reduce the size of elements"},
|
||||
{id: 2, title: "Voice Mode", hint: "Only show voice chat"},
|
||||
{id: 0, title: "Public Servers", hint: "Display public servers button"},
|
||||
{id: 1, title: "Minimal Mode", hint: "Hide elements and reduce the size of elements"},
|
||||
{id: 2, title: "Voice Mode", hint: "Only show voice chat"},
|
||||
{id: 0, title: "Public Servers", hint: "Display public servers button"},
|
||||
{id: 1, title: "Minimal Mode", hint: "Hide elements and reduce the size of elements"},
|
||||
{id: 2, title: "Voice Mode", hint: "Only show voice chat"},
|
||||
{id: 0, title: "Public Servers", hint: "Display public servers button"},
|
||||
{id: 1, title: "Minimal Mode", hint: "Hide elements and reduce the size of elements"},
|
||||
{id: 2, title: "Voice Mode", hint: "Only show voice chat"},
|
||||
{id: 0, title: "Public Servers", hint: "Display public servers button"},
|
||||
{id: 1, title: "Minimal Mode", hint: "Hide elements and reduce the size of elements"},
|
||||
{id: 2, title: "Voice Mode", hint: "Only show voice chat"},
|
||||
{id: 0, title: "Public Servers", hint: "Display public servers button"},
|
||||
{id: 1, title: "Minimal Mode", hint: "Hide elements and reduce the size of elements"},
|
||||
{id: 2, title: "Voice Mode", hint: "Only show voice chat"}
|
||||
];
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ContentHeader,
|
||||
SettingSwitch
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
settings
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,107 +0,0 @@
|
|||
<template>
|
||||
<div class="bd-setting-switch">
|
||||
<div class="bd-title">
|
||||
<h3>{{setting.title}}</h3>
|
||||
<label class="bd-switch-wrapper">
|
||||
<input type="checkbox" class="bd-switch-checkbox" />
|
||||
<div class="bd-switch" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="bd-hint">{{setting.hint}}</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
setting: {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.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);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
<template>
|
||||
<div class="bd-settingsWrap">
|
||||
<div class="bd-scroller">
|
||||
<ContentHeader text="UI Settings" />
|
||||
<div>
|
||||
<SettingSwitch v-for="setting in settings" :setting="setting" :key="setting.id" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ContentHeader from './ContentHeader.vue';
|
||||
import SettingSwitch from './SettingSwitch.vue';
|
||||
|
||||
const settings = [
|
||||
{id: 0, title: "Dummy Setting", hint: "Dummy Setting Hint"},
|
||||
{id: 0, title: "Dummy Setting", hint: "Dummy Setting Hint"},
|
||||
{id: 0, title: "Dummy Setting", hint: "Dummy Setting Hint"},
|
||||
{id: 0, title: "Dummy Setting", hint: "Dummy Setting Hint"},
|
||||
{id: 0, title: "Dummy Setting", hint: "Dummy Setting Hint"},
|
||||
{id: 0, title: "Dummy Setting", hint: "Dummy Setting Hint"},
|
||||
{id: 0, title: "Dummy Setting", hint: "Dummy Setting Hint"},
|
||||
{id: 0, title: "Dummy Setting", hint: "Dummy Setting Hint"},
|
||||
{id: 0, title: "Dummy Setting", hint: "Dummy Setting Hint"},
|
||||
{id: 0, title: "Dummy Setting", hint: "Dummy Setting Hint"},
|
||||
{id: 0, title: "Dummy Setting", hint: "Dummy Setting Hint"},
|
||||
{id: 0, title: "Dummy Setting", hint: "Dummy Setting Hint"},
|
||||
{id: 0, title: "Dummy Setting", hint: "Dummy Setting Hint"},
|
||||
{id: 0, title: "Dummy Setting", hint: "Dummy Setting Hint"}
|
||||
];
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ContentHeader,
|
||||
SettingSwitch
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
settings
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
<template>
|
||||
<div :class="['bd-settings-wrapper', 'platform-' + this.platform]">
|
||||
<div class="bd-settings-button" :class="{active: this.isActive}" @click="showSettings">
|
||||
<div class="bd-settings-button-btn"></div>
|
||||
</div>
|
||||
<BdSettings :isActive="this.isActive" :close="hideSettings" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import BdSettings from './bdsettings.vue';
|
||||
export default {
|
||||
components: {
|
||||
BdSettings
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isActive: false,
|
||||
platform: global.process.platform
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleSettings() {
|
||||
this.isActive = !this.isActive;
|
||||
},
|
||||
hideSettings() {
|
||||
this.isActive = false;
|
||||
},
|
||||
showSettings() {
|
||||
this.isActive = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,103 +0,0 @@
|
|||
<template>
|
||||
<div class="bd-settings" :class="{active: isActive}">
|
||||
<SidebarView :contentVisible="this.activeIndex >= 0" :animating="this.animating">
|
||||
<Sidebar slot="sidebar">
|
||||
<div class="bd-settings-x" @click="close">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 12 12"><g fill="none" fill-rule="evenodd"><path d="M0 0h12v12H0"></path><path class="fill" fill="#dcddde" d="M9.5 3.205L8.795 2.5 6 5.295 3.205 2.5l-.705.705L5.295 6 2.5 8.795l.705.705L6 6.705 8.795 9.5l.705-.705L6.705 6"></path></g></svg>
|
||||
</div>
|
||||
<SidebarItem v-for="item in sidebarItems" :item="item" :key="item.id" :onClick="itemOnClick" />
|
||||
</Sidebar>
|
||||
<SidebarViewContent slot="content">
|
||||
<div :class="{active: activeContent('core'), animating: animatingContent('core')}">
|
||||
<CoreSettings />
|
||||
</div>
|
||||
<div :class="{active: activeContent('ui'), animating: animatingContent('ui')}">
|
||||
<UISettings />
|
||||
</div>
|
||||
</SidebarViewContent>
|
||||
</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) {
|
||||
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;
|
||||
this.animating = true;
|
||||
this.lastActiveIndex = this.activeIndex;
|
||||
this.activeIndex = id;
|
||||
|
||||
if (this.first) {
|
||||
this.first = false;
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
this.animating = false;
|
||||
this.lastActiveIndex = -1;
|
||||
}, 400);
|
||||
}
|
||||
|
||||
function animatingContent(s) {
|
||||
const item = this.sidebarItems.find(item => item.contentid === s);
|
||||
if (!item) return false;
|
||||
return item.id === this.lastActiveIndex;
|
||||
}
|
||||
|
||||
function activeContent(s) {
|
||||
const item = this.sidebarItems.find(item => item.contentid === s);
|
||||
if (!item) return false;
|
||||
return item.id === this.activeIndex;
|
||||
}
|
||||
|
||||
|
||||
import { SidebarItem, SidebarView, Sidebar, SidebarViewContent } from './sidebar/index.js';
|
||||
import CoreSettings from './CoreSettings.vue';
|
||||
import UISettings from './UISettings.vue';
|
||||
export default {
|
||||
props: ['isActive', 'close'],
|
||||
components: {
|
||||
SidebarItem,
|
||||
SidebarView,
|
||||
Sidebar,
|
||||
SidebarViewContent,
|
||||
CoreSettings,
|
||||
UISettings
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sidebarItems,
|
||||
activeIndex: -1,
|
||||
lastActiveIndex: -1,
|
||||
animating: false,
|
||||
first: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
itemOnClick,
|
||||
activeContent,
|
||||
animatingContent
|
||||
},
|
||||
updated: function () {
|
||||
if (!this.isActive) {
|
||||
this.activeIndex = this.lastActiveIndex = -1;
|
||||
this.sidebarItems.forEach(sidebarItem => { sidebarItem.active = false; });
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
<template>
|
||||
<div class="bd-item" :class="{active: item.active}" @click="onClick(item.id)">{{item.text}}</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['item', 'onClick']
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
<template>
|
||||
<div class='bd-content bd-content-column'>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.bd-content-column {
|
||||
//position: relative;
|
||||
height: 100%;
|
||||
-webkit-box-flex: 1;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.bd-content-column > div {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bd-content-column .bd-settingsWrap {
|
||||
flex-direction: column;
|
||||
}
|
||||
.bd-content-column .bd-settingsWrap .bd-scroller {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
contain: layout;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
z-index: 200;
|
||||
width: auto;
|
||||
margin-right: 15px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
-moz-appearance: scrollbartrack-vertical;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
width: 8px;
|
||||
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0,0,0,0.6);
|
||||
border-radius: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
<template>
|
||||
<div class='bd-header'>{{item.text}}</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['item']
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<template>
|
||||
<div class='bd-sidebar'>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
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';
|
||||
export { default as SidebarViewContent } from './Content.vue';
|
||||
Loading…
Reference in New Issue