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", "message": "Export",
"description": "Label for the button to export a style ('edit' page) or all styles ('manage' page)" "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": { "externalHomepage": {
"message": "Homepage", "message": "Homepage",
"description": "Label for the external link to style's homepage" "description": "Label for the external link to style's homepage"

View File

@ -82,26 +82,23 @@ function initInstallPage({style, dup}, sourceLoader) {
function buildPage() { function buildPage() {
return $element({className: 'container', appendChild: [ return $element({className: 'container', appendChild: [
$element({className: 'header', appendChild: [ $element({className: 'header', appendChild: [
$element({className: 'actions', appendChild: [
$element({tag: 'button', className: 'install', textContent: installButtonLabel()})
]}),
$element({tag: 'h1', appendChild: [ $element({tag: 'h1', appendChild: [
style.name, style.name,
$element({tag: 'small', className: 'meta-version', textContent: style.version}) $element({tag: 'small', className: 'meta-version', textContent: style.version})
]}), ]}),
$element({tag: 'p', textContent: style.description}), $element({tag: 'p', textContent: style.description}),
$element({tag: 'h3', textContent: t('author')}), style.author && $element({tag: 'h3', textContent: t('author')}),
style.author, style.author,
$element({tag: 'h3', textContent: t('license')}), style.license && $element({tag: 'h3', textContent: t('license')}),
style.license, style.license,
$element({tag: 'h3', textContent: t('appliesLabel')}), $element({tag: 'h3', textContent: t('appliesLabel')}),
$element({tag: 'ul', appendChild: getAppliesTo(style).map( $element({tag: 'ul', appendChild: getAppliesTo(style).map(
pattern => $element({tag: 'li', textContent: pattern}) pattern => $element({tag: 'li', textContent: pattern})
)}), )}),
$element({className: 'actions', appendChild: [ externalLink(style),
$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'))
]})
]}), ]}),
$element({className: 'main', appendChild: [ $element({className: 'main', appendChild: [
$element({className: 'code'}) $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() { function installButtonLabel() {
return t(!dup ? 'installButton' : return t(!dup ? 'installButton' :
versionTest > 0 ? 'installButtonUpdate' : 'installButtonReinstall'); versionTest > 0 ? 'installButtonUpdate' : 'installButtonReinstall');