Fix: adjust install page layout

This commit is contained in:
eight 2017-09-14 11:06:32 +08:00
parent 70bbc08ee0
commit a542d227ec
2 changed files with 28 additions and 9 deletions

View File

@ -289,6 +289,10 @@
"message": "Export",
"description": "Label for the button to export a style ('edit' page) or all styles ('manage' page)"
},
"externalLink": {
"message": "External link",
"description": "Label for external links"
},
"externalHomepage": {
"message": "Homepage",
"description": "Label for the external link to style's homepage"

View File

@ -82,26 +82,23 @@ function initInstallPage({style, dup}, sourceLoader) {
function buildPage() {
return $element({className: 'container', appendChild: [
$element({className: 'header', appendChild: [
$element({className: 'actions', appendChild: [
$element({tag: 'button', className: 'install', textContent: installButtonLabel()})
]}),
$element({tag: 'h1', appendChild: [
style.name,
$element({tag: 'small', className: 'meta-version', textContent: style.version})
]}),
$element({tag: 'p', textContent: style.description}),
$element({tag: 'h3', textContent: t('author')}),
style.author && $element({tag: 'h3', textContent: t('author')}),
style.author,
$element({tag: 'h3', textContent: t('license')}),
style.license && $element({tag: 'h3', textContent: t('license')}),
style.license,
$element({tag: 'h3', textContent: t('appliesLabel')}),
$element({tag: 'ul', appendChild: getAppliesTo(style).map(
pattern => $element({tag: 'li', textContent: pattern})
)}),
$element({className: 'actions', appendChild: [
$element({tag: 'button', className: 'install', textContent: installButtonLabel()})
]}),
$element({className: 'external', appendChild: [
style.url && makeLink(style.url, t('externalHomepage')),
style.support && makeLink(style.support, t('externalSupport'))
]})
externalLink(style),
]}),
$element({className: 'main', appendChild: [
$element({className: 'code'})
@ -109,6 +106,24 @@ function initInstallPage({style, dup}, sourceLoader) {
]});
}
function externalLink(style) {
const urls = [];
if (style.url) {
urls.push([style.url, t('externalHomepage')]);
}
if (style.supportURL) {
urls.push([style.supportURL, t('externalSupport')]);
}
if (urls.length) {
return $element({appendChild: [
$element({tag: 'h3', textContent: t('externalLink')}),
$element({tag: 'ul', appendChild: urls.map(args =>
$element({tag: 'li', appendChild: makeLink(...args)})
)})
]});
}
}
function installButtonLabel() {
return t(!dup ? 'installButton' :
versionTest > 0 ? 'installButtonUpdate' : 'installButtonReinstall');