Add configDescription field for plugins (#747)

wulkano · Nov 14, 2019 · f197e2d · f197e2d
1 parent fba30c6
commit f197e2d
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 7 deletions.
diff --git a/docs/plugins.md b/docs/plugins.md
@@ -44,6 +44,7 @@ In the above case, the second and third item are added by two different share se
 The share service is a plain object defining some metadata:
 
 - `title`: The title used in the export menu. For example: `Share to GIPHY`.<br>The text should be in [title case](https://capitalizemytitle.com), for example, `Save to Disk`, not `Save to disk`.
+- `configDescription`: A description displayed at the top of the configuration window. You can use this to explain the config options or link to API docs. Any links in this description will be parsed into clickable links automatically.
 - `formats`: The file formats you support. Can be: `gif`, `mp4`, `webm`, `apng`
 - `action`: The function that is run when the user clicks the menu item. Read more below.
 - `config`: Definition of the config the plugins needs. Read more below.

diff --git a/main/utils/plugin-config.js b/main/utils/plugin-config.js
@@ -35,6 +35,7 @@ class PluginConfig extends Store {
       const validator = ajv.compile(schema);
       validator(defaults);
       validator.title = service.title;
+      validator.description = service.configDescription;
       validator.config = service.config;
 
       return validator;

diff --git a/renderer/components/config/tab.js b/renderer/components/config/tab.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Linkify from 'react-linkify';
 
-import Item from '../preferences/item';
+import Item, {Link} from '../preferences/item';
 import Select from '../preferences/item/select';
 import Switch from '../preferences/item/switch';
 import {OpenOnGithubIcon, OpenConfigIcon} from '../../vectors';
@@ -25,7 +26,7 @@ const ConfigInput = ({name, type, schema, value, onChange, hasErrors}) => {
             padding: 4px 8px;
             line-height: 32px;
             font-size: 12px;
-            margin-top: 16px;
+            margin-top: 8px;
             outline: none;
             box-shadow: var(--input-shadow);
           }
@@ -71,11 +72,18 @@ class Tab extends React.Component {
   render() {
     const {validator, values, onChange, openConfig, viewOnGithub} = this.props;
 
-    const {config, errors} = validator;
+    const {config, errors, description} = validator;
     const allErrors = errors || [];
 
     return (
       <div className="container">
+        {
+          description && (
+            <div className="description">
+              <Linkify component={Link}>{description}</Linkify>
+            </div>
+          )
+        }
         {
           [...Object.keys(config)].map(key => {
             const schema = config[key];
@@ -87,6 +95,7 @@ class Tab extends React.Component {
             return (
               <Item
                 key={key}
+                small
                 title={schema.title}
                 subtitle={schema.description}
                 vertical={type === 'string'}
@@ -117,6 +126,15 @@ class Tab extends React.Component {
             overflow-y: auto;
           }
 
+          .description {
+            color: var(--subtitle-color);
+            font-weight: normal;
+            font-size: 1.4rem;
+            width: 100%;
+            padding: 16px 16px 0 16px;
+            box-sizing: border-box;
+          }
+
           .icon-container {
             width: 24px;
             height: 24px;

diff --git a/renderer/components/preferences/item/index.js b/renderer/components/preferences/item/index.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Linkify from 'react-linkify';
 
-const Link = ({href, children}) => (
+export const Link = ({href, children}) => (
   <span onClick={() => electron.shell.openExternal(href)}>
     {children}
     <style jsx>{`
@@ -47,7 +47,8 @@ class Item extends React.Component {
       warning,
       onClick,
       last,
-      parentItem
+      parentItem,
+      small
     } = this.props;
 
     const subtitleArray = Array.isArray(subtitle) ? subtitle : [subtitle];
@@ -77,7 +78,7 @@ class Item extends React.Component {
           .container {
             display: flex;
             max-width: 100%;
-            padding: ${onClick ? '16px' : '32px'} 16px;
+            padding: ${small || onClick ? '16px' : '32px'} 16px;
             margin-bottom: ${last ? '16px' : '0'};
             border-bottom: 1px solid var(--row-divider-color);
             flex-direction: column;
@@ -187,7 +188,8 @@ Item.propTypes = {
   ]),
   onClick: PropTypes.elementType,
   last: PropTypes.bool,
-  parentItem: PropTypes.bool
+  parentItem: PropTypes.bool,
+  small: PropTypes.bool
 };
 
 export default Item;