[TASK] Streamline accordeon triggers in Install Tool 28/44628/4
authorGeorg Ringer <georg.ringer@gmail.com>
Mon, 9 Nov 2015 10:12:07 +0000 (11:12 +0100)
committerMorton Jonuschat <m.jonuschat@mojocode.de>
Fri, 13 Nov 2015 14:21:21 +0000 (15:21 +0100)
The panel headers of the install tool have been
streamlined by making the fully clickable and adding
an indicator whether the panel is collapsed or not.

Change-Id: I8e05a647d2fd208c405b9467c48e59e674eec1fd
Resolves: #71383
Resolves: #71385
Releases: master
Reviewed-on: https://review.typo3.org/44628
Reviewed-by: Mathias Schreiber <mathias.schreiber@wmdb.de>
Tested-by: Mathias Schreiber <mathias.schreiber@wmdb.de>
Reviewed-by: Morton Jonuschat <m.jonuschat@mojocode.de>
Tested-by: Morton Jonuschat <m.jonuschat@mojocode.de>
Build/Resources/Public/Less/InstallTool.less
typo3/sysext/install/Resources/Private/Partials/Action/Tool/AllConfiguration/SubSection.html
typo3/sysext/install/Resources/Private/Partials/Action/Tool/Configuration/Charset.html
typo3/sysext/install/Resources/Private/Partials/Action/Tool/Configuration/Context.html
typo3/sysext/install/Resources/Private/Partials/Action/Tool/Configuration/ExtbaseObjectCache.html
typo3/sysext/install/Resources/Private/Partials/Action/Tool/Configuration/Image.html
typo3/sysext/install/Resources/Private/Partials/Action/Tool/Configuration/Mail.html
typo3/sysext/install/Resources/Private/Templates/Action/Tool/CleanUp.html
typo3/sysext/install/Resources/Private/Templates/Action/Tool/SystemEnvironment.html
typo3/sysext/install/Resources/Private/Templates/Action/Tool/TestSetup.html
typo3/sysext/install/Resources/Public/Css/InstallTool.css

index e2ae48d..a41a224 100644 (file)
@@ -104,6 +104,15 @@ h1:first-child {
        }
 }
 
+.collapsed .caret {
+       transition: all 0.25s ease-in-out;
+       transform: rotate(-90deg);
+}
+
+a[data-toggle="collapse"] {
+       display: block;
+}
+
 @media (min-width: @screen-md-min) {
        .affix-bottom {
                position: absolute;
index 65b6089..4597a43 100644 (file)
@@ -3,7 +3,8 @@
 <div class="panel panel-default">
        <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}">
+                       <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><i:object.arrayValueByKey array="{sections}" key="{sectionName}" /></strong> [{sectionName}]
                        </a>
                </h3>
index a7bd25c..b5216bd 100644 (file)
@@ -1,7 +1,8 @@
 <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
-                       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="collapsed">
+                               <span class="caret"></span>
                                Character set conversion settings
                        </a>
                </h4>
index ec3ea86..d4d6882 100644 (file)
@@ -1,7 +1,8 @@
 <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
-                       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
+                       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo" class="collapsed">
+                               <span class="caret"></span>
                                Debug settings
                        </a>
                </h4>
index 8cb0e4b..23154c2 100644 (file)
@@ -1,7 +1,8 @@
 <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingThree">
                <h4 class="panel-title">
-                       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
+                       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree" class="collapsed">
+                               <span class="caret"></span>
                                Extbase object cache
                        </a>
                </h4>
index 3a9aba6..b5db6c7 100644 (file)
@@ -1,7 +1,8 @@
 <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingFour">
                <h4 class="panel-title">
-                       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
+                       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour" class="collapsed">
+                               <span class="caret"></span>
                                Image handling settings
                        </a>
                </h4>
index b50e150..3b5a320 100644 (file)
@@ -1,7 +1,8 @@
 <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingFive">
                <h4 class="panel-title">
-                       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="true" aria-controls="collapseFive">
+                       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="true" aria-controls="collapseFive" class="collapsed">
+                               <span class="caret"></span>
                                Mail handling settings
                        </a>
                </h4>
index 3b486d1..9c10990 100644 (file)
@@ -12,7 +12,8 @@
                <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingOne">
                                <h4 class="panel-title">
-                                       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                                       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="collapsed">
+                                               <span class="caret"></span>
                                                Clean typo3temp/ folder
                                        </a>
                                </h4>
@@ -27,6 +28,7 @@
                        <div class="panel-heading" role="tab" id="headingTwo">
                                <h4 class="panel-title">
                                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                                               <span class="caret"></span>
                                                Clear processed files
                                        </a>
                                </h4>
@@ -41,6 +43,7 @@
                        <div class="panel-heading" role="tab" id="headingThree">
                                <h4 class="panel-title">
                                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+                                               <span class="caret"></span>
                                                Clear tables
                                        </a>
                                </h4>
@@ -55,6 +58,7 @@
                        <div class="panel-heading" role="tab" id="headingFour">
                                <h4 class="panel-title">
                                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
+                                               <span class="caret"></span>
                                                Reset backend user preferences
                                        </a>
                                </h4>
index 787ad93..666f88e 100644 (file)
@@ -11,7 +11,8 @@
                </f:for>
        </f:for>
 
-       <a class="btn btn-default" role="button" data-toggle="collapse" href="#phpinfo" aria-expanded="false">
+       <a class="btn btn-default collapsed" role="button" data-toggle="collapse" href="#phpinfo" aria-expanded="false">
+               <span class="caret"></span>
                Show PHP Info
        </a>
        <div class="collapse" id="phpinfo">
index c3f87e1..19cb2af 100644 (file)
@@ -11,7 +11,8 @@
                <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingOne">
                                <h4 class="panel-title">
-                                       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                                       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="collapsed">
+                                               <span class="caret"></span>
                                                Mail setup
                                        </a>
                                </h4>
@@ -25,7 +26,8 @@
                <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingTwo">
                                <h4 class="panel-title">
-                                       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
+                                       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo" class="collapsed">
+                                               <span class="caret"></span>
                                                True type font settings
                                        </a>
                                </h4>
@@ -39,7 +41,8 @@
                <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingThree">
                                <h4 class="panel-title">
-                                       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
+                                       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree" class="collapsed">
+                                               <span class="caret"></span>
                                                Convert image formats to jpg
                                        </a>
                                </h4>
@@ -53,7 +56,8 @@
                <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingFour">
                                <h4 class="panel-title">
-                                       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
+                                       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour" class="collapsed">
+                                               <span class="caret"></span>
                                                Writing gif and png
                                        </a>
                                </h4>
@@ -67,7 +71,8 @@
                <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingFive">
                                <h4 class="panel-title">
-                                       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="true" aria-controls="collapseFive">
+                                       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="true" aria-controls="collapseFive" class="collapsed">
+                                               <span class="caret"></span>
                                                Scaling images
                                        </a>
                                </h4>
@@ -81,7 +86,8 @@
                <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingSix">
                                <h4 class="panel-title">
-                                       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="true" aria-controls="collapseSix">
+                                       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="true" aria-controls="collapseSix" class="collapsed">
+                                               <span class="caret"></span>
                                                Combining images
                                        </a>
                                </h4>
                <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingSeven">
                                <h4 class="panel-title">
-                                       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven" aria-expanded="true" aria-controls="collapseSeven">
+                                       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven" aria-expanded="true" aria-controls="collapseSeven" class="collapsed">
+                                               <span class="caret"></span>
                                                GDlib
                                        </a>
                                </h4>
index 95e4b9a..751afe6 100644 (file)
@@ -8294,6 +8294,15 @@ h1:first-child {
 .list-group-item.active a {
   color: #fff;
 }
+.collapsed .caret {
+  transition: all 0.25s ease-in-out;
+  -webkit-transform: rotate(-90deg);
+      -ms-transform: rotate(-90deg);
+          transform: rotate(-90deg);
+}
+a[data-toggle="collapse"] {
+  display: block;
+}
 @media (min-width: 992px) {
   .affix-bottom {
     position: absolute;