Merge pull request #74 from JsSucks/ui

Material icons

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;
+            }
         }
     }
 
@@ -64,20 +74,15 @@
             cursor: pointer;
 
             &:hover {
-                .material-design-icon {
+                .bd-material-design-icon {
                     fill: #FFF;
                 }
             }
         }
 
-        .material-design-icon {
+        .bd-material-design-icon {
             fill: #414245;
 
-            svg {
-                width: 16px;
-                height: 16px;
-            }
-
             &:hover {
                 fill: #FFF;
             }

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;
             }

client/src/ui/components/BdSettings.vue

@@ -13,17 +13,17 @@
         <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">
                     <span class="bd-vtext">v2.0.0a by Jiiks/JsSucks</span>
                     <div @click="openGithub" v-tooltip="'Github'" class="bd-material-button">
-                        <MiGithub/>
+                        <MiGithubCircle size="16"/>
                     </div>
                     <div @click="openWebsite" v-tooltip="'BetterDiscord'" class="bd-material-button">
-                        <MiWeb/>
+                        <MiWeb size="16"/>
                      </div>
                 </div>
             </Sidebar>
@@ -53,9 +53,7 @@
     import { Settings } from 'modules';
     import { SidebarView, Sidebar, SidebarItem, ContentColumn } from './sidebar';
     import { CoreSettings, UISettings, EmoteSettings, CssEditorView, PluginsView } from './bd';
-    import { SvgX } from './common';
-    import MiGithub from 'vue-material-design-icons/github-circle.vue';
-    import MiWeb from 'vue-material-design-icons/web.vue';
+    import { SvgX, MiGithubCircle, MiWeb, MiClose } from './common';
 
     // Constants
     const sidebarItems = [
@@ -88,9 +86,7 @@
         },
         components: {
             SidebarView, Sidebar, SidebarItem, ContentColumn,
-            CoreSettings, UISettings, EmoteSettings, CssEditorView, PluginsView,
-            SvgX,
-            MiGithub, MiWeb
+            CoreSettings, UISettings, EmoteSettings, CssEditorView, PluginsView, MiGithubCircle, MiWeb, MiClose
         },
         methods: {
             itemOnClick(id) {

client/src/ui/components/bd/PluginCard.vue

@@ -25,16 +25,16 @@
                 <div class="bd-controls">
                     <ButtonGroup>
                         <Button v-tooltip="'Settings'" v-if="plugin.hasSettings" :onClick="() => showSettings(plugin)">
-                            <MiSettings />
+                            <MiSettings size="18"/>
                         </Button>
                         <Button v-tooltip="'Reload'" :onClick="() => reloadPlugin(plugin)">
-                            <MiReload />
+                            <MiRefresh size="18" />
                         </Button>
                         <Button v-tooltip="'Edit'" :onClick="editPlugin">
-                            <MiEdit />
+                            <MiPencil size="18" />
                         </Button>
                         <Button v-tooltip="'Uninstall'" type="err">
-                            <MiDelete />
+                            <MiDelete size="18" />
                         </Button>
                     </ButtonGroup>
                 </div>
@@ -45,11 +45,7 @@
 <script>
     // Imports
     import { shell } from 'electron';
-    import { Button, ButtonGroup, SettingSwitch } from '../common';
-    import MiSettings from 'vue-material-design-icons/settings.vue';
-    import MiReload from 'vue-material-design-icons/refresh.vue';
-    import MiEdit from 'vue-material-design-icons/pencil.vue';
-    import MiDelete from 'vue-material-design-icons/delete.vue';
+    import { Button, ButtonGroup, SettingSwitch, MiSettings, MiRefresh, MiPencil, MiDelete } from '../common';
 
     export default {
         data() {
@@ -59,8 +55,7 @@
         },
         props: ['plugin', 'togglePlugin', 'reloadPlugin', 'showSettings'],
         components: {
-            Button, ButtonGroup, SettingSwitch,
-            MiSettings, MiReload, MiEdit, MiDelete
+            Button, ButtonGroup, SettingSwitch, MiSettings, MiRefresh, MiPencil, MiDelete
         },
         methods: {
             editPlugin() {

client/src/ui/components/common/MaterialIcon.js

@@ -0,0 +1,7 @@
+export { default as MiSettings } from './materialicons/Settings.vue';
+export { default as MiRefresh } from './materialicons/Refresh.vue';
+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';

client/src/ui/components/common/Modal.vue

@@ -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>

client/src/ui/components/common/SvgX.vue

@@ -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>

client/src/ui/components/common/index.js

@@ -4,4 +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';

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
+*/
+
+<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>

client/src/ui/components/common/materialicons/Delete.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
+*/
+
+<template>
+    <span class="bd-material-design-icon">
+        <svg :width="size || 24" :height="size || 24" viewBox="0 0 24 24">
+            <path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19C6,20.1 6.9,21 8,21H16C17.1,21 18,20.1 18,19V7H6V19Z"></path>
+        </svg>
+    </span>
+</template>
+<script>
+    export default {
+        props: ['size']
+    }
+</script>

client/src/ui/components/common/materialicons/GithubCircle.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
+*/
+
+<template>
+    <span class="bd-material-design-icon">
+        <svg :width="size || 24" :height="size || 24" viewBox="0 0 24 24">
+            <path d="M12,2C6.48,2 2,6.48 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12C22,6.48 17.52,2 12,2Z"></path>
+        </svg>
+    </span>
+</template>
+<script>
+    export default {
+        props: ['size']
+    }
+</script>

client/src/ui/components/common/materialicons/Pencil.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
+*/
+
+<template>
+    <span class="bd-material-design-icon">
+        <svg :width="size || 24" :height="size || 24" viewBox="0 0 24 24">
+            <path d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"></path>
+        </svg>
+    </span>
+</template>
+<script>
+    export default {
+        props: ['size']
+    }
+</script>

client/src/ui/components/common/materialicons/Refresh.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
+*/
+
+<template>
+    <span class="bd-material-design-icon">
+        <svg :width="size || 24" :height="size || 24" viewBox="0 0 24 24">
+            <path d="M17.65,6.35C16.2,4.9 14.21,4 12,4C7.58,4 4,7.58 4,12C4,16.42 7.58,20 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18C8.69,18 6,15.31 6,12C6,8.69 8.69,6 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z"></path>
+        </svg>
+    </span>
+</template>
+<script>
+    export default {
+        props: ['size']
+    }
+</script>

client/src/ui/components/common/materialicons/Settings.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
+*/
+
+<template>
+    <span class="bd-material-design-icon">
+        <svg :width="size || 24" :height="size || 24" viewBox="0 0 24 24">
+            <path d="M12,15.5C10.07,15.5 8.5,13.93 8.5,12C8.5,10.07 10.07,8.5 12,8.5C13.93,8.5 15.5,10.07 15.5,12C15.5,13.93 13.93,15.5 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"></path>
+        </svg>
+    </span>
+</template>
+<script>
+    export default {
+        props: ['size']
+    }
+</script>

client/src/ui/components/common/materialicons/Web.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
+*/
+
+<template>
+    <span class="bd-material-design-icon">
+        <svg :width="size || 24" :height="size || 24" viewBox="0 0 24 24">
+            <path d="M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2Z"></path>
+        </svg>
+    </span>
+</template>
+<script>
+    export default {
+        props: ['size']
+    }
+</script>