From e05b5c33772bb53f5264292bc18f4f0db0189f17 Mon Sep 17 00:00:00 2001 From: Jiiks Date: Sat, 3 Feb 2018 02:17:35 +0200 Subject: [PATCH] add and use material/close --- .../partials/bdsettings/sidebarview.scss | 13 ++++++++- .../src/styles/partials/generic/modals.scss | 6 ++++- client/src/ui/components/BdSettings.vue | 9 +++---- .../src/ui/components/common/MaterialIcon.js | 1 + client/src/ui/components/common/Modal.vue | 8 +++--- client/src/ui/components/common/SvgX.vue | 13 --------- client/src/ui/components/common/index.js | 1 - .../components/common/materialicons/Close.vue | 27 +++++++++++++++++++ 8 files changed, 53 insertions(+), 25 deletions(-) delete mode 100644 client/src/ui/components/common/SvgX.vue create mode 100644 client/src/ui/components/common/materialicons/Close.vue diff --git a/client/src/styles/partials/bdsettings/sidebarview.scss b/client/src/styles/partials/bdsettings/sidebarview.scss index 4442f35f..2d9fd257 100644 --- a/client/src/styles/partials/bdsettings/sidebarview.scss +++ b/client/src/styles/partials/bdsettings/sidebarview.scss @@ -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; } diff --git a/client/src/styles/partials/generic/modals.scss b/client/src/styles/partials/generic/modals.scss index b30bc889..a36906ac 100644 --- a/client/src/styles/partials/generic/modals.scss +++ b/client/src/styles/partials/generic/modals.scss @@ -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; } diff --git a/client/src/ui/components/BdSettings.vue b/client/src/ui/components/BdSettings.vue index 46d22f93..9d8539b7 100644 --- a/client/src/ui/components/BdSettings.vue +++ b/client/src/ui/components/BdSettings.vue @@ -13,8 +13,8 @@
- - ESC + + ESC
@@ -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) { diff --git a/client/src/ui/components/common/MaterialIcon.js b/client/src/ui/components/common/MaterialIcon.js index e05ad1b6..e6218e35 100644 --- a/client/src/ui/components/common/MaterialIcon.js +++ b/client/src/ui/components/common/MaterialIcon.js @@ -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'; diff --git a/client/src/ui/components/common/Modal.vue b/client/src/ui/components/common/Modal.vue index 43853d26..431edbd1 100644 --- a/client/src/ui/components/common/Modal.vue +++ b/client/src/ui/components/common/Modal.vue @@ -12,9 +12,9 @@
- {{headerText}} + {{headerText}}
- +
@@ -33,12 +33,12 @@ diff --git a/client/src/ui/components/common/SvgX.vue b/client/src/ui/components/common/SvgX.vue deleted file mode 100644 index c72ffc7c..00000000 --- a/client/src/ui/components/common/SvgX.vue +++ /dev/null @@ -1,13 +0,0 @@ - - diff --git a/client/src/ui/components/common/index.js b/client/src/ui/components/common/index.js index 9fc96e2b..5875e4d2 100644 --- a/client/src/ui/components/common/index.js +++ b/client/src/ui/components/common/index.js @@ -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'; diff --git a/client/src/ui/components/common/materialicons/Close.vue b/client/src/ui/components/common/materialicons/Close.vue new file mode 100644 index 00000000..3ae64af0 --- /dev/null +++ b/client/src/ui/components/common/materialicons/Close.vue @@ -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 +*/ + + +