diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 8465c9b8..44c9ce87 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -301,6 +301,10 @@ "message": "Support", "description": "Label for the external link to style's support site" }, + "externalFeedback": { + "message": "Feedback", + "description": "Label for the external link to send feedback for the style" + }, "externalUsercssDocument": { "message": "Documentation for Usercss", "description": "Label for the external link to usercss documentation" diff --git a/manage/config-dialog.js b/manage/config-dialog.js index b802ac4a..2ab02aa0 100644 --- a/manage/config-dialog.js +++ b/manage/config-dialog.js @@ -1,4 +1,4 @@ -/* global usercss messageBox */ +/* global usercss messageBox makeLink */ 'use strict'; @@ -7,9 +7,22 @@ function configDialog(style) { const form = buildConfigForm(); return messageBox({ - title: style.name, + title: `${style.name} v${style.usercssData.version}`, className: 'config-dialog', - contents: form.el, + contents: [ + $element({ + className: 'config-heading', + appendChild: style.usercssData.supportURL && makeLink({ + className: 'external-support', + href: style.usercssData.supportURL, + textContent: t('externalFeedback') + }) + }), + $element({ + className: 'config-body', + appendChild: form.el + }) + ], buttons: [ t('confirmSave'), { diff --git a/manage/manage.css b/manage/manage.css index 1c4ef217..8d1ce214 100644 --- a/manage/manage.css +++ b/manage/manage.css @@ -653,6 +653,12 @@ fieldset > *:not(legend) { } /* config dialog */ +.config-dialog .config-heading { + float: right; + margin: -1.25rem 0 0 0; + font-size: 0.9em; +} + .config-dialog label { display: flex; padding: .75em 0;