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

Merge pull request #76 from JsSucks/styling 

Merge
This commit is contained in:
Alexei Stukov 2018-02-03 07:48:56 +02:00 committed by GitHub
parent 2f680a9a4e e0ce4c00c1
commit 7ce0ecbf62
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 52 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/styles/partials/bdsettings/sidebarview.scss
View File

@ -53,9 +53,9 @@
.bd-info {
display: flex;
flex-grow: 1;
align-items: flex-end;
overflow: hidden;
padding: 0 25px;
.bd-vtext {
color: #414245;

2
client/src/styles/partials/generic/scrollable.scss
View File

@ -8,6 +8,8 @@
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
padding: 10px 10px 10px 0;
margin: 10px 0;
&::-webkit-scrollbar {
width: 14px;

29
client/src/ui/components/BdSettings.vue
View File

@ -17,16 +17,19 @@
<span class="bd-x-text">ESC</span>
</div>
<SidebarItem v-for="item in sidebarItems" :item="item" :key="item.id" :onClick="itemOnClick" />
<div class="bd-info">
<span class="bd-vtext">v2.0.0a by Jiiks/JsSucks</span>
<div @click="openGithub" v-tooltip="'Github'" class="bd-material-button">
<MiGithubCircle size="16"/>
</div>
<div @click="openWebsite" v-tooltip="'BetterDiscord'" class="bd-material-button">
<MiWeb size="16"/>
</div>
</div>
</Sidebar>
<div slot="sidebarfooter" class="bd-info">
<span class="bd-vtext">v2.0.0a by Jiiks/JsSucks</span>
<div @click="openGithub" v-tooltip="'Github'" class="bd-material-button">
<MiGithubCircle size="16" />
</div>
<div @click="openTwitter" v-tooltip="'@Jiiksi'" class="bd-material-button">
<MiTwitterCircle size="16" />
</div>
<div @click="openWebsite" v-tooltip="'BetterDiscord'" class="bd-material-button">
<MiWeb size="16" />
</div>
</div>
<ContentColumn slot="content">
<div v-if="activeContent('core') || animatingContent('core')" :class="{active: activeContent('core'), animating: animatingContent('core')}">
<CoreSettings :settings="coreSettings" :enableSetting="enableSetting" :disableSetting="disableSetting" />
@ -53,7 +56,7 @@
import { Settings } from 'modules';
import { SidebarView, Sidebar, SidebarItem, ContentColumn } from './sidebar';
import { CoreSettings, UISettings, EmoteSettings, CssEditorView, PluginsView } from './bd';
import { SvgX, MiGithubCircle, MiWeb, MiClose } from './common';
import { SvgX, MiGithubCircle, MiWeb, MiClose, MiTwitterCircle } from './common';
// Constants
const sidebarItems = [
@ -86,7 +89,8 @@
},
components: {
SidebarView, Sidebar, SidebarItem, ContentColumn,
CoreSettings, UISettings, EmoteSettings, CssEditorView, PluginsView, MiGithubCircle, MiWeb, MiClose
CoreSettings, UISettings, EmoteSettings, CssEditorView, PluginsView,
MiGithubCircle, MiWeb, MiClose, MiTwitterCircle
},
methods: {
itemOnClick(id) {
@ -134,6 +138,9 @@
},
openWebsite() {
shell.openExternal('https://betterdiscord.net');
},
openTwitter() {
shell.openExternal('https://twitter.com/Jiiksi');
}
}
}

1
client/src/ui/components/common/MaterialIcon.js
View File

@ -7,3 +7,4 @@ export { default as MiWeb } from './materialicons/Web.vue';
export { default as MiClose } from './materialicons/Close.vue';
export { default as MiMinus } from './materialicons/Minus.vue';
export { default as MiOpenInNew } from './materialicons/OpenInNew.vue';
export { default as MiTwitterCircle } from './materialicons/TwitterCircle.vue';

27
client/src/ui/components/common/materialicons/TwitterCircle.vue Normal file
View File

@ -0,0 +1,27 @@
/**
* BetterDiscord Material Design Icon
* 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.
*
* Material Design Icons
* Copyright (c) 2014 Google
* Apache 2.0 LICENSE
* https://www.apache.org/licenses/LICENSE-2.0.txt
*/
<template>
<span class="bd-material-design-icon">
<svg :width="size || 24" :height="size || 24" viewBox="0 0 24 24">
<path d="M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33M12,2C17.52,2 22,6.48 22,12C22,17.52 17.52,22 12,22C6.48,22 2,17.52 2,12C2,6.48 6.48,2 12,2Z"></path>
</svg>
</span>
</template>
<script>
export default {
props: ['size']
}
</script>

2
client/src/ui/components/sidebar/Sidebar.vue
View File

@ -9,7 +9,7 @@
*/
<template>
<div class="bd-sidebar bd-scroller">
<div class="bd-sidebar">
<slot/>
</div>
</template>

3
client/src/ui/components/sidebar/View.vue
View File

@ -10,12 +10,13 @@
<template>
<div class="bd-sidebar-view" :class="{active: contentVisible, animating: animating}">
<div class="bd-sidebar-region">
<div class="bd-sidebar-region bd-flex-col">
<div class="bd-settingsWrap">
<ScrollerWrap dark="true">
<slot name="sidebar" />
</ScrollerWrap>
</div>
<slot name="sidebarfooter"/>
</div>
<div class="bd-content-region">
<slot name="content" />