add and use material/close

This commit is contained in:
Jiiks 2018-02-03 02:17:35 +02:00
parent 2f463fad32
commit e05b5c3377
8 changed files with 53 additions and 25 deletions

View File

@ -28,7 +28,7 @@
align-items: center;
cursor: pointer;
span {
.bd-x-text {
color: #72767d;
position: absolute;
top: 32px;
@ -36,8 +36,18 @@
font-size: 13px;
}
.bd-material-design-icon {
justify-content: center;
display: flex;
fill: #72767d;
}
&:hover {
background-color: hsla(218,5%,47%,.3);
.bd-material-design-icon {
fill: #FFF;
}
}
}
@ -72,6 +82,7 @@
.bd-material-design-icon {
fill: #414245;
&:hover {
fill: #FFF;
}

View File

@ -55,7 +55,7 @@
display: flex;
padding: 15px;
span {
.bd-modal-headertext {
color: #FFF;
font-weight: 700;
margin-bottom: 15px;
@ -74,6 +74,10 @@
justify-content: center;
align-items: center;
.bd-material-design-icon {
fill: #FFF;
}
&:hover {
background: #2d2f34;
}

View File

@ -13,8 +13,8 @@
<SidebarView :contentVisible="this.activeIndex >= 0" :animating="this.animating">
<Sidebar slot="sidebar">
<div class="bd-settings-x" @click="close">
<SvgX size="17"/>
<span>ESC</span>
<MiClose size="17"/>
<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">
@ -53,7 +53,7 @@
import { Settings } from 'modules';
import { SidebarView, Sidebar, SidebarItem, ContentColumn } from './sidebar';
import { CoreSettings, UISettings, EmoteSettings, CssEditorView, PluginsView } from './bd';
import { SvgX, MiGithubCircle, MiWeb } from './common';
import { SvgX, MiGithubCircle, MiWeb, MiClose } from './common';
// Constants
const sidebarItems = [
@ -86,8 +86,7 @@
},
components: {
SidebarView, Sidebar, SidebarItem, ContentColumn,
CoreSettings, UISettings, EmoteSettings, CssEditorView, PluginsView, MiGithubCircle, MiWeb,
SvgX
CoreSettings, UISettings, EmoteSettings, CssEditorView, PluginsView, MiGithubCircle, MiWeb, MiClose
},
methods: {
itemOnClick(id) {

View File

@ -4,3 +4,4 @@ export { default as MiPencil } from './materialicons/Pencil.vue';
export { default as MiDelete } from './materialicons/Delete.vue';
export { default as MiGithubCircle } from './materialicons/GithubCircle.vue';
export { default as MiWeb } from './materialicons/Web.vue';
export { default as MiClose } from './materialicons/Close.vue';

View File

@ -12,9 +12,9 @@
<div class="bd-modal">
<div class="bd-modal-inner">
<div class="bd-modal-header">
<span>{{headerText}}</span>
<span class="bd-modal-headertext">{{headerText}}</span>
<div class="bd-modal-x" @click="close">
<SvgX size="18"/>
<MiClose size="18"/>
</div>
</div>
<div class="bd-modal-body">
@ -33,12 +33,12 @@
<script>
// Imports
import SvgX from './SvgX.vue';
import { MiClose } from './MaterialIcon';
export default {
props: ['headerText', 'close'],
components: {
SvgX
MiClose
}
}
</script>

View File

@ -1,13 +0,0 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" 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>
</template>
<script>
export default {
props: ['size']
}
</script>

View File

@ -4,5 +4,4 @@ export { default as FormButton } from './FormButton.vue';
export { default as ButtonGroup } from './ButtonGroup.vue';
export { default as Button } from './Button.vue';
export { default as Modal } from './Modal.vue';
export { default as SvgX } from './SvgX.vue';
export * from './MaterialIcon';

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="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path>
</svg>
</span>
</template>
<script>
export default {
props: ['size']
}
</script>