Commit 6f675678 authored by Andreas Fernandez's avatar Andreas Fernandez Committed by Anja Leichsenring
Browse files

[TASK] Streamline templates in System Maintenance Area

- Introduce proper `<html>` tag
- Use callouts instead of alerts
- Deleted obsolete template files
- Streamline handling of inline vs. modal
- Fix CSS for nested panels, if parent is `flat`

Resolves: #85463
Releases: master
Change-Id: Ide545367d2153da5c170eda1e69397005bb8ed58
Reviewed-on: https://review.typo3.org/57454


Tested-by: default avatarTYPO3com <no-reply@typo3.com>
Reviewed-by: Jan Helke's avatarJan Helke <typo3@helke.de>
Tested-by: Jan Helke's avatarJan Helke <typo3@helke.de>
Reviewed-by: default avatarJord de Jong <jord.dejong@windinternet.nl>
Reviewed-by: Robert van Kammen's avatarRobert van Kammen <rvkammen@hotmail.com>
Tested-by: Robert van Kammen's avatarRobert van Kammen <rvkammen@hotmail.com>
Reviewed-by: Jürgen Venne's avatarJürgen Venne <venne@schaffrath-digital.de>
Tested-by: Jürgen Venne's avatarJürgen Venne <venne@schaffrath-digital.de>
Reviewed-by: Anja Leichsenring's avatarAnja Leichsenring <aleichsenring@ab-softlab.de>
Tested-by: Anja Leichsenring's avatarAnja Leichsenring <aleichsenring@ab-softlab.de>
parent cadbc4d2
......@@ -35,6 +35,7 @@ $grid-float-breakpoint: $screen-md-min;
@import "typo3/element_docheader";
@import "typo3/element_message";
@import "typo3/element_table";
@import "typo3/element_tab";
//
// Include modules
......@@ -104,10 +105,6 @@ img.logo {
@include alert-variant($btn-default-bg, $btn-default-border, $btn-default-color);
}
.nav-pills > li > a {
border-radius: 0;
}
h1:first-child {
margin-top: 0;
}
......
......@@ -35,7 +35,7 @@
position: relative;
}
&.panel-default .panel-heading {
&.panel-default > .panel-heading {
background: $gray-lighter;
}
......
{namespace i=TYPO3\CMS\Install\ViewHelpers}
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:i="http://typo3.org/ns/TYPO3/CMS/Install/ViewHelpers" data-namespace-typo3-fluid="true">
<li class="modulemenu-item t3js-mainmodule" data-controller="{controller}">
<a class="modulemenu-item-link" href="{i:uri.action(controller: controller)}">
<span class="modulemenu-icon modulemenu-item-icon">
<span class="t3js-icon icon icon-size-default icon-state-default">
<span class="icon-markup">
<img src="{f:uri.resource(path: 'Icons/module-install-{controller}.svg')}" width="32" height="32">
</span>
</span>
</span>
<span class="modulemenu-item-title">{label}</span>
</a>
<a class="modulemenu-item-link" href="{i:uri.action(controller: controller)}">
<span class="modulemenu-icon modulemenu-item-icon">
<span class="t3js-icon icon icon-size-default icon-state-default">
<span class="icon-markup">
<img src="{f:uri.resource(path: 'Icons/module-install-{controller}.svg')}" width="32" height="32">
</span>
</span>
</span>
<span class="modulemenu-item-title">{label}</span>
</a>
</li>
</html>
{namespace i=TYPO3\CMS\Install\ViewHelpers}
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:i="http://typo3.org/ns/TYPO3/CMS/Install/ViewHelpers" data-namespace-typo3-fluid="true">
<div class="panel panel-default panel-flat searchhit">
<div class="panel-heading" role="tab" id="heading{extensionKey}">
<div class="panel-heading" role="tab" id="heading-{extensionKey}">
<h3 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{extensionKey}"
aria-expanded="true" aria-controls="collapse{extensionKey}" class="collapsed"
>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-{extensionKey}" aria-expanded="true" aria-controls="collapse-{extensionKey}" class="collapsed">
<span class="caret"></span>
<strong>{extensionData.packageInfo.packageKey}</strong>
</a>
</h3>
</div>
<div id="collapse{extensionKey}" class="panel-collapse collapse search-item" role="tabpanel" aria-labelledby="heading{extensionKey}">
<div id="collapse-{extensionKey}" class="panel-collapse collapse search-item" role="tabpanel" aria-labelledby="heading-{extensionKey}">
<div class="panel-body">
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<f:for each="{extensionData.configuration}" as="category" key="categoryName" iteration="iteration">
<f:if condition="{categoryName}">
<li role="presentation" class="{f:if(condition:'{iteration.isFirst}', then:'active')}">
<a class="text-capitalize" href="#{i:format.noSpace(value:'category-{extensionKey}-{categoryName}')}" aria-controls="category-{extensionKey}-{categoryName}" role="tab" data-toggle="tab">
{categoryName}
</a>
<a class="text-capitalize" href="#{i:format.noSpace(value:'category-{extensionKey}-{categoryName}')}" aria-controls="category-{extensionKey}-{categoryName}" role="tab" data-toggle="tab">{categoryName}</a>
</li>
</f:if>
</f:for>
......@@ -45,12 +41,12 @@
{categoryName}.{configurationItem.name}
<f:if condition="{configurationItem.type} != 'user'">
<f:if condition="{configurationItem.type}">
({configurationItem.type})
</f:if>
({configurationItem.type})
</f:if>
</f:if>
</p>
<div class="form-control-wrap">
<i:form.typoScriptConstants configuration="{configurationItem}" />
<i:form.typoScriptConstants configuration="{configurationItem}"/>
</div>
<f:if condition="{configurationItem.labels.1}">
<div class="help-block">{configurationItem.labels.1 -> f:format.nl2br()}</div>
......@@ -63,9 +59,11 @@
</f:if>
</f:for>
</div>
<button type="submit" class="btn btn-default" name="mySubmit">Save "{extensionKey}" configuration</button>
<button type="submit" class="btn btn-default" name="save">Save "{extensionKey}" configuration</button>
</form>
</div>
</div>
</div>
</div>
</html>
{namespace i=TYPO3\CMS\Install\ViewHelpers}
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:i="http://typo3.org/ns/TYPO3/CMS/Install/ViewHelpers" data-namespace-typo3-fluid="true">
<div class="panel panel-default panel-flat">
<div class="panel-heading" role="tab" id="heading{sectionName}">
<div class="panel-heading" role="tab" id="heading-{sectionName}">
<h3 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{sectionName}"
aria-expanded="true" aria-controls="collapse{sectionName}" class="collapsed"
>
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-{sectionName}" aria-expanded="true" aria-controls="collapse-{sectionName}" class="collapsed">
<span class="caret"></span>
<strong>{sectionData.description}</strong> [{sectionName}]
</a>
</h3>
</div>
<div id="collapse{sectionName}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{sectionName}">
<div id="collapse-{sectionName}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-{sectionName}">
<f:for each="{sectionData.items}" as="item">
<a id="{sectionName}-{item.key}"></a>
<div class="item">
......@@ -44,11 +43,9 @@
<f:then>
<div class="form-group">
<span class="help-block">{item.description -> f:format.raw()}</span>
<select
data-path="{sectionName}/{item.key}"
class="t3-install-form-input-text form-control t3js-localConfiguration-pathValue">
<select data-path="{sectionName}/{item.key}" class="t3-install-form-input-text form-control t3js-localConfiguration-pathValue">
<f:for each="{item.allowedValues}" key="optionKey" as="optionLabel">
<option value="{optionKey}" {f:if(condition:'{item.value} == {optionKey}', then: 'selected="selected"')}>{optionLabel} ({optionKey})</option>
<option value="{optionKey}" {f:if(condition: '{item.value} == {optionKey}', then: 'selected="selected"')}>{optionLabel} ({optionKey})</option>
</f:for>
</select>
</div>
......@@ -84,10 +81,10 @@
<div class="form-group">
<span class="help-block">{item.description -> f:format.raw()}</span>
<input
type="password"
value="{item.value}"
data-path="{sectionName}/{item.key}"
class="t3-install-form-input-text form-control t3js-localConfiguration-pathValue"
type="password"
value="{item.value}"
data-path="{sectionName}/{item.key}"
class="t3-install-form-input-text form-control t3js-localConfiguration-pathValue"
/>
</div>
</f:if>
......@@ -131,3 +128,5 @@
</f:for>
</div>
</div>
</html>
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
......@@ -23,3 +25,5 @@
</div>
</div>
</div>
</html>
<div class="alert alert-warning">
<div class="header-container">
<div class="message-header">
<input
type="radio"
class="t3-install-tool-configuration-radio"
id="t3-install-tool-configuration-context-custom"
name="install[values][{feature.name}][enable]"
value="{preset.name}"
{f:if(condition: preset.isActive, then:'checked="checked"')}
/>
<label
for="t3-install-tool-configuration-context-custom"
class="t3-install-tool-configuration-radio-label"
>
<strong>
Custom configuration
</strong>
{f:if(condition: preset.isActive, then:' [Active]')}
</label>
</div>
</div>
<div class="message-body>">
<p>
Custom configuration mixture if no other preset fits.
</p>
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:be.infobox state="1" disableIcon="true">
<input
type="radio"
class="t3-install-tool-configuration-radio"
id="t3-install-tool-configuration-context-custom"
name="install[values][{feature.name}][enable]"
value="{preset.name}"
{f:if(condition: preset.isActive, then:'checked="checked"')}
/>
<label for="t3-install-tool-configuration-context-custom" class="t3-install-tool-configuration-radio-label">
<strong>Custom configuration</strong> {f:if(condition: preset.isActive, then:' [Active]')}
</label>
<p>Custom configuration mixture if no other preset fits.</p>
<f:for each="{preset.configurationValues}" as="configurationValue" key="configurationKey">
<div class="form-group">
<label class="col-sm-4 control-label" for="{feature.name}{preset.name}{configurationKey}">{configurationKey}</label>
<div class="col-sm-8">
<input
id="{feature.name}{preset.name}{configurationKey}"
type="text"
name="install[values][{feature.name}][{preset.name}][{configurationKey}]"
value="{configurationValue}"
class="form-control t3js-custom-preset"
data-radio="t3-install-tool-configuration-context-custom"
/>
</div>
<f:for each="{preset.configurationValues}" as="configurationValue" key="configurationKey">
<div class="form-group">
<label class="col-sm-4 control-label" for="{feature.name}{preset.name}{configurationKey}">{configurationKey}</label>
<div class="col-sm-8">
<input
id="{feature.name}{preset.name}{configurationKey}"
type="text"
name="install[values][{feature.name}][{preset.name}][{configurationKey}]"
value="{configurationValue}"
class="form-control t3js-custom-preset"
data-radio="t3-install-tool-configuration-context-custom"
/>
</div>
</f:for>
</div>
</div>
<p></p>
</div>
</f:for>
</f:be.infobox>
</html>
<div class="alert alert-success">
<div class="header-container">
<div class="message-header">
<input
type="radio"
class="t3-install-tool-configuration-radio"
id="t3-install-tool-configuration-context-debug"
name="install[values][{feature.name}][enable]"
value="{preset.name}"
{f:if(condition: preset.isActive, then:'checked="checked"')}
/>
<label
for="t3-install-tool-configuration-context-debug"
class="t3-install-tool-configuration-radio-label"
>
<strong>Debug</strong>
{f:if(condition: preset.isActive, then:' [Active]')}
</label>
</div>
</div>
<div class="message-body>">
Enable debug output, deprecation logs, and set logging to info level.
</div>
</div>
<p></p>
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:be.infobox state="0" disableIcon="true">
<input
type="radio"
class="t3-install-tool-configuration-radio"
id="t3-install-tool-configuration-context-debug"
name="install[values][{feature.name}][enable]"
value="{preset.name}"
{f:if(condition: preset.isActive, then:'checked="checked"')}
/>
<label for="t3-install-tool-configuration-context-debug" class="t3-install-tool-configuration-radio-label">
<strong>Debug</strong> {f:if(condition: preset.isActive, then:' [Active]')}
</label>
<p>Enable debug output, deprecation logs, and set logging to info level.</p>
</f:be.infobox>
</html>
<div class="alert alert-success">
<div class="header-container">
<div class="message-header">
<input
type="radio"
class="t3-install-tool-configuration-radio"
id="t3-install-tool-configuration-context-live"
name="install[values][{feature.name}][enable]"
value="{preset.name}"
{f:if(condition: preset.isActive, then:'checked="checked"')}
/>
<label
for="t3-install-tool-configuration-context-live"
class="t3-install-tool-configuration-radio-label"
>
<strong>Live</strong>
{f:if(condition: preset.isActive, then:' [Active]')}
</label>
</div>
</div>
<div class="message-body>">
Turn off debug output, deprecation logs, and set logging to warnings and errors only.
</div>
</div>
<p></p>
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:be.infobox state="0" disableIcon="true">
<input
type="radio"
class="t3-install-tool-configuration-radio"
id="t3-install-tool-configuration-context-live"
name="install[values][{feature.name}][enable]"
value="{preset.name}"
{f:if(condition: preset.isActive, then:'checked="checked"')}
/>
<label for="t3-install-tool-configuration-context-live" class="t3-install-tool-configuration-radio-label">
<strong>Live</strong> {f:if(condition: preset.isActive, then:' [Active]')}
</label>
<p>Turn off debug output, deprecation logs, and set logging to warnings and errors only.</p>
</f:be.infobox>
</html>
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">
......@@ -51,3 +53,5 @@
</div>
</div>
</div>
</html>
<div class="alert alert-warning">
<div class="header-container">
<div class="message-header">
<input
type="radio"
class="t3-install-tool-configuration-radio"
id="t3-install-tool-configuration-image-custom"
name="install[values][{feature.name}][enable]"
value="{preset.name}"
{f:if(condition: preset.isActive, then:'checked="checked"')}
/>
<label
for="t3-install-tool-configuration-image-custom"
class="t3-install-tool-configuration-radio-label"
>
<strong>
Custom configuration
</strong>
{f:if(condition: preset.isActive, then:' [Active]')}
</label>
</div>
</div>
<div class="message-body>">
<p>
Custom configuration mixture if no other preset fits.
</p>
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:be.infobox state="1" disableIcon="true">
<input
type="radio"
class="t3-install-tool-configuration-radio"
id="t3-install-tool-configuration-image-custom"
name="install[values][{feature.name}][enable]"
value="{preset.name}"
{f:if(condition: preset.isActive, then:'checked="checked"')}
/>
<label for="t3-install-tool-configuration-image-custom" class="t3-install-tool-configuration-radio-label">
<strong>Custom configuration</strong> {f:if(condition: preset.isActive, then:' [Active]')}
</label>
<p>Custom configuration mixture if no other preset fits.</p>
<f:for each="{preset.configurationValues}" as="configurationValue" key="configurationKey">
<div class="form-group">
<label class="col-sm-4 control-label" for="{feature.name}{preset.name}{configurationKey}">{configurationKey}</label>
<div class="col-sm-8">
<input
id="{feature.name}{preset.name}{configurationKey}"
type="text"
name="install[values][{feature.name}][{preset.name}][{configurationKey}]"
value="{configurationValue}"
class="form-control t3js-custom-preset"
data-radio="t3-install-tool-configuration-image-custom"
/>
</div>
<f:for each="{preset.configurationValues}" as="configurationValue" key="configurationKey">
<div class="form-group">
<label class="col-sm-4 control-label" for="{feature.name}{preset.name}{configurationKey}">{configurationKey}</label>
<div class="col-sm-8">
<input
id="{feature.name}{preset.name}{configurationKey}"
type="text"
name="install[values][{feature.name}][{preset.name}][{configurationKey}]"
value="{configurationValue}"
class="form-control t3js-custom-preset"
data-radio="t3-install-tool-configuration-image-custom"
/>
</div>
</f:for>
</div>
</div>
<p></p>
</div>
</f:for>
</f:be.infobox>
</html>
<div class="alert {f:if(condition:'{preset.isAvailable}', then:'alert-success', else:'alert-danger')}">
<div class="header-container">
<div class="message-header">
<input
type="radio"
class="t3-install-tool-configuration-radio"
id="t3-install-tool-configuration-image-graphicsmagick"
name="install[values][{feature.name}][enable]"
value="{preset.name}"
{f:if(condition:'{preset.isAvailable}', then:'', else:'disabled="disabled"')}
{f:if(condition: preset.isActive, then:'checked="checked"')}
/>
<label
for="t3-install-tool-configuration-image-graphicsmagick"
class="t3-install-tool-configuration-radio-label"
>
<strong>
Graphics Magick
</strong>
{f:if(condition: preset.isActive, then:' [Active]')}
</label>
</div>
</div>
<div class="message-body>">
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:be.infobox state="{f:if(condition:'{preset.isAvailable}', then:'0', else:'2')}" disableIcon="true">
<input
type="radio"
class="t3-install-tool-configuration-radio"
id="t3-install-tool-configuration-image-graphicsmagick"
name="install[values][{feature.name}][enable]"
value="{preset.name}"
{f:if(condition:'{preset.isAvailable}', then:'', else:'disabled="disabled"')}
{f:if(condition: preset.isActive, then:'checked="checked"')}
/>
<label for="t3-install-tool-configuration-image-graphicsmagick" class="t3-install-tool-configuration-radio-label">
<strong>Graphics Magick</strong> {f:if(condition: preset.isActive, then:' [Active]')}
</label>
<p>
<f:if condition="{preset.isAvailable}">
<f:then>
GraphicsMagick was found in path {preset.foundPath}
GraphicsMagick was found in path <code>{preset.foundPath}</code>.
</f:then>
<f:else>
GraphicsMagick was not found in standard system paths. If it is
......@@ -32,6 +24,7 @@
input box above and search again.
</f:else>
</f:if>
</div>
</div>
<p></p>
</p>
</f:be.infobox>
</html>
<div class="alert {f:if(condition:'{preset.isAvailable}', then:'alert-success', else:'alert-danger')}">
<div class="header-container">
<div class="message-header">
<input
type="radio"
class="t3-install-tool-configuration-radio"
id="t3-install-tool-configuration-image-imagemagick6"
name="install[values][{feature.name}][enable]"
value="{preset.name}"
{f:if(condition:'{preset.isAvailable}', then:'', else:'disabled="disabled"')}
{f:if(condition: preset.isActive, then:'checked="checked"')}
/>
<label
for="t3-install-tool-configuration-image-imagemagick6"
class="t3-install-tool-configuration-radio-label"
>
<strong>
Image Magick version 6 or higher
</strong>
{f:if(condition: preset.isActive, then:' [Active]')}
</label>
</div>
</div>
<div class="message-body>">
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:be.infobox state="{f:if(condition:'{preset.isAvailable}', then:'0', else:'2')}" disableIcon="true">
<input
type="radio"
class="t3-install-tool-configuration-radio"
id="t3-install-tool-configuration-image-imagemagick6"
name="install[values][{feature.name}][enable]"
value="{preset.name}"
{f:if(condition:'{preset.isAvailable}', then:'', else:'disabled="disabled"')}
{f:if(condition: preset.isActive, then:'checked="checked"')}
/>
<label for="t3-install-tool-configuration-image-imagemagick6" class="t3-install-tool-configuration-radio-label">
<strong>Image Magick version 6 or higher</strong> {f:if(condition: preset.isActive, then:' [Active]')}
</label>
<p>
<f:if condition="{preset.isAvailable}">
<f:then>
An ImageMagick version 6 or higher was found in path {preset.foundPath}
An ImageMagick version 6 or higher was found in path <code>{preset.foundPath}</code>.
</f:then>
<f:else>
ImageMagick version 6 or higher was not found in standard system paths.
......@@ -32,6 +24,7 @@
input box above and search again.
</f:else>
</f:if>
</div>
</div>
<p></p>
</p>
</f:be.infobox>
</html>
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">