From f8a380fd5909e01f91ee1bee48456f8d01ed0b71 Mon Sep 17 00:00:00 2001 From: Samuel Elliott Date: Sat, 31 Mar 2018 01:10:33 +0100 Subject: [PATCH] Add more advanced content authors (links to Discord profile, GitHub, Twitter, etc) --- .../src/styles/partials/bdsettings/card.scss | 19 ++++++ .../styles/partials/bdsettings/tooltips.scss | 41 +++++++++-- client/src/styles/partials/layouts.scss | 4 ++ client/src/ui/components/bd/Card.vue | 11 ++- client/src/ui/components/bd/ContentAuthor.vue | 68 +++++++++++++++++++ .../src/ui/components/common/MaterialIcon.js | 1 + .../common/materialicons/Discord.vue | 28 ++++++++ client/src/ui/vue.js | 10 ++- tests/ext/plugins/Example 2/config.json | 19 +++--- tests/ext/plugins/Example 3/config.json | 18 ++++- tests/ext/plugins/Example 4/config.json | 8 ++- tests/ext/plugins/Example/config.json | 36 +++++++--- tests/ext/plugins/Patcher Test/config.json | 13 ++-- tests/ext/plugins/Permission Test/config.json | 13 ++-- 14 files changed, 249 insertions(+), 40 deletions(-) create mode 100644 client/src/ui/components/bd/ContentAuthor.vue create mode 100644 client/src/ui/components/common/materialicons/Discord.vue diff --git a/client/src/styles/partials/bdsettings/card.scss b/client/src/styles/partials/bdsettings/card.scss index 3a1e7b3e..43a9c15a 100644 --- 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; + } +} diff --git a/client/src/styles/partials/bdsettings/tooltips.scss b/client/src/styles/partials/bdsettings/tooltips.scss index f8db8cd2..241cc455 100644 --- 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; + } + } } diff --git a/client/src/styles/partials/layouts.scss b/client/src/styles/partials/layouts.scss index 6165c0c9..f98edb6b 100644 --- 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; +} diff --git a/client/src/ui/components/bd/Card.vue b/client/src/ui/components/bd/Card.vue index 08cb9000..5fbe7ede 100644 --- a/client/src/ui/components/bd/Card.vue +++ b/client/src/ui/components/bd/Card.vue @@ -21,9 +21,14 @@
{{item.description}}
-
v{{item.version}} by {{item.authors.join(', ').replace(/,(?!.*,)/gmi, ' and')}}
+
+ v{{item.version}} by + +
- +
@@ -33,10 +38,12 @@ diff --git a/client/src/ui/components/common/MaterialIcon.js b/client/src/ui/components/common/MaterialIcon.js index b68aea77..658cde63 100644 --- 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'; diff --git a/client/src/ui/components/common/materialicons/Discord.vue b/client/src/ui/components/common/materialicons/Discord.vue new file mode 100644 index 00000000..71d79a36 --- /dev/null +++ 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 +*/ + + + + diff --git a/client/src/ui/vue.js b/client/src/ui/vue.js index 0ad489cb..571dec48 100644 --- 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: '
', - 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; diff --git a/tests/ext/plugins/Example 2/config.json b/tests/ext/plugins/Example 2/config.json index b3d27f90..7dafbd76 100644 --- a/tests/ext/plugins/Example 2/config.json +++ b/tests/ext/plugins/Example 2/config.json @@ -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": [] -} \ No newline at end of file + "info": { + "name": "Example Plugin 2", + "authors": [ + "Jiiks" + ], + "version": 1.0, + "description": "Example Plugin 2 Description" + } +} diff --git a/tests/ext/plugins/Example 3/config.json b/tests/ext/plugins/Example 3/config.json index 6565e926..196b38e6 100644 --- a/tests/ext/plugins/Example 3/config.json +++ b/tests/ext/plugins/Example 3/config.json @@ -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" } diff --git a/tests/ext/plugins/Example 4/config.json b/tests/ext/plugins/Example 4/config.json index 3f26c3aa..6c54c7f2 100644 --- a/tests/ext/plugins/Example 4/config.json +++ b/tests/ext/plugins/Example 4/config.json @@ -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." diff --git a/tests/ext/plugins/Example/config.json b/tests/ext/plugins/Example/config.json index 92f6730c..88174af6 100644 --- 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": [ diff --git a/tests/ext/plugins/Patcher Test/config.json b/tests/ext/plugins/Patcher Test/config.json index 3c8cc3a9..bcf5e5fd 100644 --- a/tests/ext/plugins/Patcher Test/config.json +++ b/tests/ext/plugins/Patcher Test/config.json @@ -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" } diff --git a/tests/ext/plugins/Permission Test/config.json b/tests/ext/plugins/Permission Test/config.json index 38ca802a..1de44cd1 100644 --- a/tests/ext/plugins/Permission Test/config.json +++ b/tests/ext/plugins/Permission Test/config.json @@ -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": [] + ] }