Merge pull request #66 from JsSucks/ui

Merge

client/src/styles/partials/bdsettings/sidebarview.scss

@@ -47,11 +47,41 @@
         align-items: flex-end;
         overflow: hidden;
 
-        span {
+        .bd-vtext {
             color: #414245;
             font-weight: 700;
             font-size: 12px;
         }
+
+        .bd-vtext {
+            flex-grow: 1;
+            height: 20px;
+            cursor: default;
+            user-select: none;
+        }
+
+        .bd-material-button {
+            cursor: pointer;
+
+            &:hover {
+                .material-design-icon {
+                    fill: #FFF;
+                }
+            }
+        }
+
+        .material-design-icon {
+            fill: #414245;
+
+            svg {
+                width: 16px;
+                height: 16px;
+            }
+
+            &:hover {
+                fill: #FFF;
+            }
+        }
     }
 
     .platform-darwin & {

client/src/ui/components/BdSettings.vue

@@ -18,7 +18,13 @@
                 </div>
                 <SidebarItem v-for="item in sidebarItems" :item="item" :key="item.id" :onClick="itemOnClick" />
                 <div class="bd-info">
-                    <span>v2.0.0a by Jiiks/JsSucks</span>
+                    <span class="bd-vtext">v2.0.0a by Jiiks/JsSucks</span>
+                    <div @click="openGithub" v-tooltip="'Github'" class="bd-material-button">
+                        <MiGithub/>
+                    </div>
+                    <div @click="openWebsite" v-tooltip="'BetterDiscord'" class="bd-material-button">
+                        <MiWeb/>
+                     </div>
                 </div>
             </Sidebar>
             <ContentColumn slot="content">
@@ -43,10 +49,13 @@
 </template>
 <script>
     // Imports
+    import { shell } from 'electron';
     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';
 
     // Constants
     const sidebarItems = [
@@ -80,7 +89,8 @@
         components: {
             SidebarView, Sidebar, SidebarItem, ContentColumn,
             CoreSettings, UISettings, EmoteSettings, CssEditorView, PluginsView,
-            SvgX
+            SvgX,
+            MiGithub, MiWeb
         },
         methods: {
             itemOnClick(id) {
@@ -121,6 +131,13 @@
                     case 'core':
                         return this.coreSettings.find(setting => setting.id === id).enabled = false;
                 }
+            },
+            openGithub() {
+                console.log('open github?');
+                shell.openExternal('https://github.com/JsSucks/BetterDiscordApp');
+            },
+            openWebsite() {
+                shell.openExternal('https://betterdiscord.net');
             }
         }
     }