Merge pull request #51 from JsSucks/ui

Merge

client/src/modules/core/pluginmanager.js

@@ -17,6 +17,7 @@ class Plugin {
 
     constructor(pluginInternals) {
         this.__pluginInternals = pluginInternals;
+        this.hasSettings = this.pluginConfig && this.pluginConfig.length > 0;
         this.start = this.start.bind(this);
         this.stop = this.stop.bind(this);
     }

client/src/modules/ui/components/BdSettingsWrapper.vue

@@ -32,9 +32,7 @@
         created: function () {
 
             Events.on('ready', e => {
-                setTimeout(() => { //Dummy timeout to test loading
-                    this.loaded = true;
-                }, 5000);
+                this.loaded = true;
             });
 
             window.addEventListener('keyup', globalKeyListener = e => {

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

@@ -13,7 +13,15 @@
     function showSettings() {
         this.settingsOpen = true;
     }
-    const methods = {  };
+    function editPlugin() {
+        try {
+            window.require('electron').shell.openItem(this.plugin.pluginPath);
+        } catch (err) {
+            console.log(err);
+        }
+    }
+
+    const methods = { editPlugin  };
 
     export default {
         props: ['plugin', 'togglePlugin', 'reloadPlugin', 'showSettings'],

client/src/modules/ui/components/bd/PluginsView.vue

@@ -15,6 +15,7 @@
     async function refreshLocalPlugins() {
         try {
             await PluginManager.refreshPlugins();
+            this.$forceUpdate();
         } catch (err) {
             
         }
@@ -28,6 +29,7 @@
         this.local = false;
     }
 
+    //TODO Display error if plugin fails to start/stop
     function togglePlugin(plugin) {
        if (plugin.enabled) {
             this.pluginManager.stopPlugin(plugin);
@@ -36,8 +38,9 @@
        }
     }
 
-    function reloadPlugin(plugin) {
-        this.pluginManager.reloadPlugin(plugin.name);
+    async function reloadPlugin(plugin) {
+        await this.pluginManager.reloadPlugin(plugin.name);
+        this.$forceUpdate();
     }
 
     function showSettings(plugin) {

client/src/modules/ui/components/bd/templates/PluginCard.html

@@ -1,6 +1,6 @@
 <div class="bd-plugin-card">
     <div class="bd-plugin-header">
-        <span>{{plugin.name}}</span>
+        <span v-tooltip="'wat'">{{plugin.name}}</span>
         <div class="bd-flex-spacer"/>
         <label class="bd-switch-wrapper" @click="togglePlugin(plugin)">
             <input type="checkbox" class="bd-switch-checkbox" />
@@ -14,16 +14,16 @@
             <div class="bd-plugin-extra">v{{plugin.version}} by {{plugin.authors.join(', ').replace(/,(?!.*,)/gmi, ' and')}}</div>
             <div class="bd-controls">
                 <ButtonGroup>
-                    <Button :onClick="() => showSettings(plugin)">
+                    <Button v-tooltip="'Settings'" v-if="plugin.hasSettings" :onClick="() => showSettings(plugin)">
                         <MiSettings/>
                     </Button>
-                    <Button :onClick="() => reloadPlugin(plugin)">
+                    <Button v-tooltip="'Reload'" :onClick="() => reloadPlugin(plugin)">
                         <MiReload/>
                     </Button>
-                    <Button>
+                    <Button v-tooltip="'Edit'" :onClick="editPlugin">
                         <MiEdit/>
                     </Button>
-                    <Button type="err">
+                    <Button v-tooltip="'Uninstall'" type="err">
                         <MiDelete/>
                     </Button>
                 </ButtonGroup>

client/src/modules/ui/vueui.js

@@ -9,17 +9,28 @@
 */
 
 const $ = require('jquery');
-const Vue = require('vue');
+const Vue = require('vue').default;
+const VTooltip = require('v-tooltip');
 
 const BdSettingsWrapper = (require('./components/BdSettingsWrapper.vue')).default;
 class UI {
 
     constructor() {
-        $('body').append($('<bdbody/>').append($('<div/>', {
+        $('body').append($('<bdbody/>')
+            .append($('<div/>', {
             id: 'bd-settings'
-        })));
+        })).append($('<bdtooltips/>')));
 
-         this.vueInstance = new Vue.default({
+        Vue.use(VTooltip, {
+            defaultContainer: 'bdtooltips',
+            defaultClass: 'bd-tooltip',
+            defaultTargetClass: 'bd-has-tooltip',
+            defaultInnerSelector: '.bd-tooltip-inner',
+            defaultTemplate: '<div class="bd-tooltip"><span class="bd-tooltip-inner"></span></div>'
+        });
+
+
+         this.vueInstance = new Vue({
              el: '#bd-settings',
              template: '<BdSettingsWrapper/>',
              components: { BdSettingsWrapper }
@@ -29,4 +40,6 @@ class UI {
 }
 
 
-module.exports = { UI }
+module.exports = { UI }
+
+

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

@@ -2,3 +2,4 @@
 @import './sidebarview.scss';
 @import './plugins.scss';
 @import './plugincard.scss';
+@import './tooltips.scss';

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

@@ -0,0 +1,36 @@
+bdtooltips {
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 9000;
+}
+
+.bd-tooltip {
+    background-color: #000;
+    border-radius: 5px;
+    box-shadow: 0 2px 10px 0 rgba(0,0,0,.2);
+    color: #dcddde;
+    contain: layout;
+    font-size: 14px;
+    font-weight: 500;
+    max-width: 190px;
+    padding: 8px 12px;
+    position: absolute;
+    word-wrap: break-word;
+    z-index: 9001;
+    margin-bottom: 10px;
+}
+
+.bd-tooltip:after {
+    border: 5px solid transparent;
+    content: " ";
+    height: 0;
+    pointer-events: none;
+    width: 0;
+    border-top-color: #000;
+    left: 50%;
+    margin-left: -5px;
+    position: absolute;
+    top: 100%;
+}

package.json

@@ -37,7 +37,8 @@
     "gulp-watch": "^5.0.0",
     "codemirror": "^5.23.0",
     "vue-codemirror": "^4.0.3",
-    "vue-material-design-icons": "^1.0.0"
+    "vue-material-design-icons": "^1.0.0",
+    "v-tooltip": "^2.0.0-rc.30"
 
   },
   "scripts": {

tests/plugins/Example 2/config.json

@@ -6,9 +6,5 @@
     "description": "Example Plugin 2 Description"
   },
   "main": "index.js",
-    "defaultConfig": [
-        {
-            "foo": "bar"
-        }
-    ]
+    "defaultConfig": []
 }