[TASK] Styling and placement of Toggle All button install tool 43/28243/2
authorPatrick Broens <patrick@patrickbroens.nl>
Tue, 11 Mar 2014 08:45:54 +0000 (09:45 +0100)
committerSteffen Ritter <info@rs-websystems.de>
Tue, 11 Mar 2014 19:05:31 +0000 (20:05 +0100)
The "Toggle All" button in the install tool is currently clickable plain
text, which should be a button. It also needs to move to the fixed footer,
so it's always accessible.

This patch changes the plain text to a button and moves the button to the
fixed footer

Change-Id: I25a57e7a7f0f25fe2fe204f68fe2ee4dbbf1ade0
Resolves: #55469
Releases: 6.2
Reviewed-on: https://review.typo3.org/28243
Reviewed-by: Wouter Wolters
Tested-by: Wouter Wolters
Reviewed-by: Sebastian Fischer
Tested-by: Sebastian Fischer
Reviewed-by: Steffen Ritter
Tested-by: Steffen Ritter
typo3/sysext/install/Resources/Private/Templates/Action/Tool/AllConfiguration.html
typo3/sysext/install/Resources/Private/Templates/Action/Tool/Configuration.html
typo3/sysext/install/Resources/Public/Javascript/Install.js
typo3/sysext/install/Resources/Public/Stylesheets/Action/Common/Install.css

index 68504d7..3699228 100644 (file)
@@ -40,7 +40,7 @@
                        <form method="post">
                                <f:render partial="Action/Common/HiddenFormFields" arguments="{_all}" />
 
                        <form method="post">
                                <f:render partial="Action/Common/HiddenFormFields" arguments="{_all}" />
 
-                               <div class="toggleAll">Toggle All</div>
+
 
                                <f:for each="{data}" as="sectionData" key="sectionName">
                                        <f:if condition="{sectionData}">
 
                                <f:for each="{data}" as="sectionData" key="sectionName">
                                        <f:if condition="{sectionData}">
                                        </f:if>
                                </f:for>
 
                                        </f:if>
                                </f:for>
 
-                               <div id="fixed-footer-fieldset">
-                                       <f:render partial="Action/Common/SubmitButton" arguments="{name:'write', text:'Write configuration', className:'btn-save'}"/>
+                               <div id="fixed-footer-handler">
+                                       <div id="fixed-footer">
+                                               <f:render partial="Action/Common/SubmitButton" arguments="{name:'write', text:'Write configuration', className:'btn-save'}"/>
+                                               <div class="toggleAll button">Toggle All</div>
+                                       </div>
                                </div>
                        </form>
                </f:else>
                                </div>
                        </form>
                </f:else>
index 96d4723..0b0b93c 100644 (file)
                        <f:render partial="Action/Tool/Configuration/{feature.name}" arguments="{_all}" />
                </f:for>
 
                        <f:render partial="Action/Tool/Configuration/{feature.name}" arguments="{_all}" />
                </f:for>
 
-               <div id="fixed-footer-fieldset">
-                       <f:render partial="Action/Common/SubmitButton" arguments="{name:'activate', text:'Activate', className:'btn-save'}"/>
+               <div id="fixed-footer-handler">
+                       <div id="fixed-footer">
+                               <f:render partial="Action/Common/SubmitButton" arguments="{name:'activate', text:'Activate', className:'btn-save'}"/>
+                               <div class="toggleAll button">Toggle All</div>
+                       </div>
                </div>
 
        </form>
                </div>
 
        </form>
index f8cf95b..1336147 100644 (file)
@@ -375,7 +375,7 @@ $(document).ready(function() {
        });
 
        // Footer scrolling and visibility
        });
 
        // Footer scrolling and visibility
-       if ($('#fixed-footer-fieldset').length > 0) {
+       if ($('#fixed-footer-handler').length > 0) {
                $(window).scroll(handleButtonScrolling);
                $('body.backend #typo3-docbody').scroll(handleButtonScrolling);
        }
                $(window).scroll(handleButtonScrolling);
                $('body.backend #typo3-docbody').scroll(handleButtonScrolling);
        }
@@ -394,10 +394,10 @@ $(document).ready(function() {
 });
 
 function handleButtonScrolling() {
 });
 
 function handleButtonScrolling() {
-       if (!isScrolledIntoView($('#fixed-footer-fieldset'))) {
-               $('#fixed-footer-fieldset fieldset').addClass('fixed');
+       if (!isScrolledIntoView($('#fixed-footer-handler'))) {
+               $('#fixed-footer').addClass('fixed');
        } else {
        } else {
-               $('#fixed-footer-fieldset fieldset').removeClass('fixed');
+               $('#fixed-footer').removeClass('fixed');
        }
 }
 function isScrolledIntoView(elem) {
        }
 }
 function isScrolledIntoView(elem) {
index 33057a5..56a77cf 100644 (file)
@@ -222,7 +222,8 @@ textarea {
        font-size: 1.2em;
 }
 
        font-size: 1.2em;
 }
 
-button {
+button,
+.button {
        color: #606060;
        font-size: 1.1em;
        padding: 0.3em 0.6em;
        color: #606060;
        font-size: 1.1em;
        padding: 0.3em 0.6em;
@@ -237,7 +238,8 @@ button {
        cursor: pointer;
 }
 
        cursor: pointer;
 }
 
-button:hover {
+button:hover,
+.button:hover {
        background-color: #ededed;
        background: -moz-linear-gradient(top,  #f6f6f6 0%, #aaa 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#aaa));
        background-color: #ededed;
        background: -moz-linear-gradient(top,  #f6f6f6 0%, #aaa 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#aaa));
@@ -486,11 +488,6 @@ body.standalone #t3-install-menu-logout a {
        border-bottom: 1px solid #666;
 }
 
        border-bottom: 1px solid #666;
 }
 
-#t3-install-box-body .toggleAll {
-       text-align: right;
-       cursor: pointer;
-}
-
 .toggleGroup {
        margin: 1em 0;
 }
 .toggleGroup {
        margin: 1em 0;
 }
@@ -823,31 +820,42 @@ button.btn-save:hover {
        background-image: url('../../../Images/Icon/Save.png'), linear-gradient(to bottom,  #f6f6f6 0%,#aaa 100%);
 }
 
        background-image: url('../../../Images/Icon/Save.png'), linear-gradient(to bottom,  #f6f6f6 0%,#aaa 100%);
 }
 
-#fixed-footer-fieldset fieldset li {
-       margin: 0 0;
+#fixed-footer-handler {
+       height: 41px;
+       margin: 2em -1.8em 0 -1.8em;
 }
 }
-#fixed-footer-fieldset fieldset {
-       margin: 0 -1.8em;
+
+#fixed-footer {
        color: #fff;
        color: #fff;
-       text-align: center;
-       padding: 0.5em 0;
+       overflow: hidden;
+       padding: 1em 1.8em;
 }
 
 }
 
-#fixed-footer-fieldset fieldset.fixed {
-       width: 51.7em;
+#fixed-footer.fixed {
+       background-color: #666;
        bottom: 0;
        position: fixed;
        bottom: 0;
        position: fixed;
-       background-color: #666;
+       width: 48.1em;
 }
 
 }
 
-.standalone #fixed-footer-fieldset fieldset.fixed {
+#fixed-footer fieldset {
+       float: left;
+       margin: 0;
+}
+
+#fixed-footer .toggleAll {
+       cursor: pointer;
+       float: right;
+       line-height: 15px;
+}
+
+.standalone #fixed-footer.fixed {
        background-color: #dadada;
        border-right: 1px solid #dadada;
 }
 
        background-color: #dadada;
        border-right: 1px solid #dadada;
 }
 
-#fixed-footer-fieldset {
-       height: 41px;
-       margin-top: 2em;
+#fixed-footer fieldset li {
+       margin: 0;
 }
 
 .phpinfo {
 }
 
 .phpinfo {