Add more advanced content authors (links to Discord profile, GitHub, Twitter, etc)

2018-03-31 01:10:33 +01:00 · 2018-03-31 01:10:33 +01:00 · f8a380fd59
parent f28525129e
commit f8a380fd59
14 changed files with 249 additions and 40 deletions
--- a/client/src/styles/partials/bdsettings/card.scss
+++ b/client/src/styles/partials/bdsettings/card.scss
@ -79,3 +79,22 @@
        }
    }
 }
+
+.bd-content-author {
+    .bd-content-author-link {
+        cursor: pointer;
+
+        &:hover {
+            color: $coldimwhite;
+        }
+    }
+}
+
+.bd-content-author-links {
+    padding: 3px 5px;
+
+    .bd-popover-inner > :first-child {
+        display: flex;
+        flex-direction: row;
+    }
+}
--- a/client/src/styles/partials/bdsettings/tooltips.scss
+++ b/client/src/styles/partials/bdsettings/tooltips.scss
@ -6,7 +6,8 @@ bd-tooltips {
    z-index: 9001;
 }

-.bd-tooltip {
+.bd-tooltip,
+.bd-popover {
    background-color: #000;
    border-radius: 5px;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,.2);
@ -20,9 +21,13 @@ bd-tooltips {
    word-wrap: break-word;
    z-index: 9001;

-    .bd-tooltip-arrow {
+    &::after {
+        content: none;
+    }
+
+    .bd-tooltip-arrow,
+    .bd-popover-arrow {
        border: 5px solid transparent;
-        content: " ";
        height: 0;
        pointer-events: none;
        width: 0;
@ -32,7 +37,8 @@ bd-tooltips {
    &[x-placement^="top"] {
        margin-bottom: 10px;

-        .bd-tooltip-arrow {
+        .bd-tooltip-arrow,
+        .bd-popover-arrow {
            margin-left: -5px;
            border-top-color: #000;
            bottom: -10px;
@ -42,7 +48,8 @@ bd-tooltips {
    &[x-placement^="bottom"] {
        margin-top: 10px;

-        .bd-tooltip-arrow {
+        .bd-tooltip-arrow,
+        .bd-popover-arrow {
            border-width: 0 5px 5px 5px;
            top: -5px;
            border-bottom-color: #000;
@ -52,7 +59,8 @@ bd-tooltips {
    &[x-placement^="right"] {
        margin-left: 10px;

-        .bd-tooltip-arrow {
+        .bd-tooltip-arrow,
+        .bd-popover-arrow {
            border-width: 5px 5px 5px 0;
            left: -5px;
            border-right-color: #000;
@ -62,10 +70,29 @@ bd-tooltips {
    &[x-placement^="left"] {
        margin-right: 10px;

-        .bd-tooltip-arrow {
+        .bd-tooltip-arrow,
+        .bd-popover-arrow {
            border-width: 5px 0 5px 5px;
            right: -5px;
            border-left-color: #000;
        }
    }
+
+    .bd-material-button {
+        cursor: pointer;
+
+        &:hover {
+            .bd-material-design-icon {
+                fill: #fff;
+            }
+        }
+    }
+
+    .bd-material-design-icon {
+        fill: #414245;
+
+        &:hover {
+            fill: #fff;
+        }
+    }
 }
--- a/client/src/styles/partials/layouts.scss
+++ b/client/src/styles/partials/layouts.scss
@ -21,3 +21,7 @@
 .bd-hide {
    display: none;
 }
+
+.bd-inline {
+    display: inline;
+}
--- a/client/src/ui/components/bd/Card.vue
+++ b/client/src/ui/components/bd/Card.vue
@ -21,9 +21,14 @@
        <div class="bd-card-body">
            <div class="bd-card-description">{{item.description}}</div>
            <div class="bd-card-footer">
-                <div class="bd-card-extra">v{{item.version}} by {{item.authors.join(', ').replace(/,(?!.*,)/gmi, ' and')}}</div>
+                <div class="bd-card-extra">
+                    v{{item.version}} by
+                    <template v-for="(author, i) in item.authors">
+                        <ContentAuthor :author="author" :after="i === item.authors.length - 1 ? '' : i === item.authors.length - 2 ? ' and' : ','" />
+                    </template>
+                </div>
                <div class="bd-controls">
-                    <slot name="controls"/>
+                    <slot name="controls" />
                </div>
            </div>
        </div>
@ -33,10 +38,12 @@
 <script>
    // Imports
    import { MiExtension } from '../common';
+    import ContentAuthor from './ContentAuthor.vue';

    export default {
        props: ['item'],
        components: {
+            ContentAuthor,
            MiExtension
        }
    }
--- a/client/src/ui/components/bd/ContentAuthor.vue
+++ b/client/src/ui/components/bd/ContentAuthor.vue
@ -0,0 +1,68 @@
+/**
+ * BetterDiscord Content Author Component
+ * 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.
+*/
+
+<template>
+    <v-popover class="bd-content-author bd-inline" popoverClass="bd-popover bd-content-author-links" trigger="click" placement="top" :disabled="!hasLinks">
+        <!-- <template v-if="typeof author === 'string'">{{ author }}</template>
+        <a v-else-if="author.url" :href="author.url" @click="openLink">{{ author.name }}</a>
+        <a v-else-if="author.github_username" :href="'https://github.com/' + author.github_username" @click="openLink">{{ author.name }}</a>
+        <span v-else-if="author.discord_id" @click="openUserProfileModal(author.discord_id)">{{ author.name }}</span>
+        <template v-else>{{ author.name }}</template> -->
+
+        <span :class="{'bd-content-author-link': hasLinks}">{{ author.name || author }}</span><span v-text="after" @click.stop></span>
+
+        <template slot="popover">
+            <div v-if="author.discord_id" @click="openUserProfileModal(author.discord_id)" v-tooltip="author.discord_username || author.name" class="bd-material-button"><MiDiscord size="16" /></div>
+            <div v-if="author.github_username" @click="openGitHub" v-tooltip="author.github_username" class="bd-material-button"><MiGithubCircle size="16" /></div>
+            <div v-if="author.twitter_username" @click="openTwitter" v-tooltip="'@' + author.twitter_username" class="bd-material-button"><MiTwitterCircle size="16" /></div>
+            <div v-if="author.url" @click="openWebsite" v-tooltip="author.url" class="bd-material-button"><MiWeb size="16" /></div>
+        </template>
+    </v-popover>
+</template>
+
+<script>
+    // Imports
+    import { WebpackModules } from 'modules';
+    import { BdMenu } from 'ui';
+    import { shell } from 'electron';
+    import { MiGithubCircle, MiWeb, MiTwitterCircle, MiDiscord } from '../common';
+
+    export default {
+        props: ['author', 'after'],
+        components: {
+            MiGithubCircle, MiWeb, MiTwitterCircle, MiDiscord
+        },
+        computed: {
+            hasLinks() {
+                return this.author.discord_id || this.author.github_username || this.author.twitter_username || this.author.url;
+            }
+        },
+        methods: {
+            openLink(e) {
+                shell.openExternal(e.target.href);
+                e.preventDefault();
+            },
+            openUserProfileModal(discord_id) {
+                const UserProfileModal = WebpackModules.getModuleByProps(['fetchMutualFriends', 'setSection']);
+                UserProfileModal.open(discord_id);
+                BdMenu.close();
+            },
+            openGitHub() {
+                shell.openExternal(`https://github.com/${this.author.github_username}`);
+            },
+            openWebsite() {
+                shell.openExternal(this.author.url);
+            },
+            openTwitter() {
+                shell.openExternal(`https://twitter.com/${this.author.twitter_username}`);
+            }
+        }
+    }
+</script>
--- a/client/src/ui/components/common/MaterialIcon.js
+++ b/client/src/ui/components/common/MaterialIcon.js
@ -12,3 +12,4 @@ export { default as MiPlus } from './materialicons/Plus.vue';
 export { default as MiChevronDown } from './materialicons/ChevronDown.vue';
 export { default as MiExtension } from './materialicons/Extension.vue';
 export { default as MiError } from './materialicons/Error.vue';
+export { default as MiDiscord } from './materialicons/Discord.vue';
--- a/client/src/ui/components/common/materialicons/Discord.vue
+++ b/client/src/ui/components/common/materialicons/Discord.vue
@ -0,0 +1,28 @@
+/**
+ * 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="M 22,24L 16.75,19L 17.375,21L 4.5,21C 3.11929,21 2,19.8807 2,18.5L 2,3.5C 2,2.11929 3.11929,1 4.5,1L 19.5,1C 20.8807,1 22,2.11929 22,3.5L 22,24 Z M 12,6.8C 9.31508,6.8 7.4401,7.95052 7.4401,7.95052C 8.47135,7.02864 10.2682,6.48177 10.2682,6.48177L 10.0964,6.32552C 8.40885,6.35677 6.8776,7.52864 6.8776,7.52864C 5.15885,11.1224 5.26823,14.2161 5.26823,14.2161C 6.67448,16.0286 8.7526,15.9036 8.7526,15.9036L 9.45573,14.9974C 8.20572,14.7318 7.42448,13.6224 7.42448,13.6224C 7.42448,13.6224 9.29946,14.9 12,14.9C 14.7005,14.9 16.5755,13.6224 16.5755,13.6224C 16.5755,13.6224 15.7943,14.7318 14.5443,14.9974L 15.2474,15.9036C 15.2474,15.9036 17.3255,16.0286 18.7318,14.2161C 18.7318,14.2161 18.8411,11.1224 17.1224,7.52865C 17.1224,7.52865 15.5911,6.35677 13.9036,6.32552L 13.7318,6.48177C 13.7318,6.48177 15.5286,7.02865 16.5599,7.95052C 16.5599,7.95052 14.6849,6.80001 12,6.8 Z M 9.93143,10.5886C 10.5829,10.5886 11.1086,11.16 11.0971,11.8571C 11.0971,12.5543 10.5829,13.1257 9.93143,13.1257C 9.29143,13.1257 8.76571,12.5543 8.76571,11.8571C 8.76571,11.16 9.28,10.5886 9.93143,10.5886 Z M 14.1028,10.5886C 14.7543,10.5886 15.2686,11.16 15.2686,11.8572C 15.2686,12.5543 14.7543,13.1257 14.1028,13.1257C 13.4628,13.1257 12.9371,12.5543 12.9371,11.8572C 12.9371,11.16 13.4514,10.5886 14.1028,10.5886 Z " />
+        </svg>
+    </span>
+</template>
+
+<script>
+    export default {
+        props: ['size']
+    }
+</script>
--- a/client/src/ui/vue.js
+++ b/client/src/ui/vue.js
@ -19,7 +19,15 @@ Vue.use(VTooltip, {
    defaultArrowSelector: '.bd-tooltip-arrow',
    defaultInnerSelector: '.bd-tooltip-inner',
    defaultTemplate: '<div class="bd-tooltip"><div class="bd-tooltip-arrow"></div><span class="bd-tooltip-inner"></span></div>',
-    defaultBoundariesElement: DOM.getElement('#app-mount')
+    defaultBoundariesElement: DOM.getElement('#app-mount'),
+    popover: {
+        defaultContainer: 'bd-tooltips',
+        defaultClass: 'bd-popover',
+        defaultWrapperClass: 'bd-popover-wrapper',
+        defaultInnerClass: 'bd-popover-inner',
+        defaultArrowClass: 'bd-popover-arrow',
+        defaultBoundariesElement: DOM.getElement('#app-mount')
+    }
 });

 export default Vue;
--- a/tests/ext/plugins/Example
+++ b/tests/ext/plugins/Example
@ -1,11 +1,10 @@
 {
-  "info": {
-    "name": "Example Plugin 2",
-    "authors": ["Jiiks"],
-    "version": 1.0,
-    "description": "Example Plugin 2 Description"
-  },
-    "main": "index.js",
-    "type": "plugin",
-    "defaultConfig": []
-}
+    "info": {
+        "name": "Example Plugin 2",
+        "authors": [
+            "Jiiks"
+        ],
+        "version": 1.0,
+        "description": "Example Plugin 2 Description"
+    }
+}
--- a/tests/ext/plugins/Example
+++ b/tests/ext/plugins/Example
@ -2,9 +2,23 @@
    "info": {
        "id": "example-plugin-3",
        "name": "Example Plugin 3",
-        "authors": [ "Samuel Elliott" ],
+        "authors": [
+            {
+                "name": "Samuel Elliott",
+                "url": "https://samuelelliott.ml",
+                "discord_id": "284056145272766465",
+                "github_username": "samuelthomas2774",
+                "twitter_username": "_samuelelliott"
+            },
+            {
+                "name": "Jiiks",
+                "discord_id": "81388395867156480",
+                "github_username": "Jiiks",
+                "twitter_username": "Jiiksi"
+            }
+        ],
        "version": 1.0,
-        "description": "A plugin for testing BetterDiscord plugin exports"
+        "description": "A plugin for testing BetterDiscord plugin bridge."
    },
    "main": "index.js"
 }
--- a/tests/ext/plugins/Example
+++ b/tests/ext/plugins/Example
@ -3,7 +3,13 @@
        "id": "example-plugin-4",
        "name": "Example Plugin 4",
        "authors": [
-            "Samuel Elliott"
+            {
+                "name": "Samuel Elliott",
+                "url": "https://samuelelliott.ml",
+                "discord_id": "284056145272766465",
+                "github_username": "samuelthomas2774",
+                "twitter_username": "_samuelelliott"
+            }
        ],
        "version": 1.0,
        "description": "Plugin for testing array setting events as the first example plugin has a lot of stuff in it now."
--- a/tests/ext/plugins/Example/config.json
+++ b/tests/ext/plugins/Example/config.json
@ -2,20 +2,38 @@
    "info": {
        "id": "example-plugin",
        "name": "Example Plugin",
-        "authors": [ "Jiiks" ],
+        "authors": [
+            {
+                "name": "Jiiks",
+                "discord_id": "81388395867156480",
+                "github_username": "Jiiks",
+                "twitter_username": "Jiiksi"
+            },
+            {
+                "name": "Samuel Elliott",
+                "url": "https://samuelelliott.ml",
+                "discord_id": "284056145272766465",
+                "github_username": "samuelthomas2774",
+                "twitter_username": "_samuelelliott"
+            },
+            {
+                "name": "Mioni",
+                "discord_id": "418494039050944513"
+            },
+            "Just a string"
+        ],
        "version": 1.0,
        "description": "Example Plugin Description",
        "icon": "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg=="
    },
    "main": "index.js",
-    "type": "plugin",
    "dependencies": {
        "Example Module": "1.0"
    },
    "defaultConfig": [
        {
            "category_default_comment": "default category has no header and is always displayed first",
-            "category": "default",
+            "id": "default",
            "settings": [
                {
                    "id": "array-1",
@ -196,8 +214,8 @@
            ]
        },
        {
-            "category": "custom-settings",
-            "category_name": "Custom settings",
+            "id": "custom-settings",
+            "name": "Custom settings",
            "type": "drawer",
            "settings": [
                {
@ -249,8 +267,8 @@
        },
        {
            "category_header_comment": "Setting a category other than default has a header with category name as the text",
-            "category": "test-category",
-            "category_name": "Test Category",
+            "id": "test-category",
+            "name": "Test Category",
            "drawer_type_comment": "// Drawer type will create an expandable drawer for the settings",
            "type": "drawer",
            "settings": [
@ -278,8 +296,8 @@
            ]
        },
        {
-            "category": "test-category-2",
-            "category_name": "Test Category 2 (static with header)",
+            "id": "test-category-2",
+            "name": "Test Category 2 (static with header)",
            "static_type_comment": "Static type will behave like default but will have a header",
            "type": "static",
            "settings": [
--- a/tests/ext/plugins/Patcher
+++ b/tests/ext/plugins/Patcher
@ -2,11 +2,16 @@
    "info": {
        "id": "patcher-test",
        "name": "Patcher Test",
-        "authors": [ "Jiiks" ],
+        "authors": [
+            {
+                "name": "Jiiks",
+                "discord_id": "81388395867156480",
+                "github_username": "Jiiks",
+                "twitter_username": "Jiiksi"
+            }
+        ],
        "version": 1.0,
        "description": "Patcher Test Description"
    },
-    "main": "index.js",
-    "type": "plugin",
-    "defaultConfig": []
+    "main": "index.js"
 }
--- a/tests/ext/plugins/Permission
+++ b/tests/ext/plugins/Permission
@ -2,15 +2,20 @@
    "info": {
        "id": "permission-test",
        "name": "Permission Test",
-        "authors": [ "Jiiks" ],
+        "authors": [
+            {
+                "name": "Jiiks",
+                "discord_id": "81388395867156480",
+                "github_username": "Jiiks",
+                "twitter_username": "Jiiksi"
+            }
+        ],
        "version": 1.0,
        "description": "Permission Test Description"
    },
    "main": "index.js",
-    "type": "plugin",
    "permissions": [
        "READ_MESSAGES",
        "SEND_MESSAGES"
-    ],
-    "defaultConfig": []
+    ]
 }