[TASK] EM: Remove jQueryUI 99/35899/2
authorAndreas Fernandez <a.fernandez@scripting-base.de>
Thu, 8 Jan 2015 11:14:29 +0000 (12:14 +0100)
committerBenjamin Mack <benni@typo3.org>
Thu, 8 Jan 2015 11:42:59 +0000 (12:42 +0100)
This patch removes jQueryUI from the extension manager which is only
used to style tabs. The tabs are ported to Twitter Bootstrap.
Additionally, the now obsolete CSS gets removed and the configuration
form is cleaned up.

Resolves: #64183
Releases: master
Change-Id: I85ecda2c3e0363774f3d8f3e768fec4d0b0e6fc0
Reviewed-on: http://review.typo3.org/35899
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
Reviewed-by: Benjamin Mack <benni@typo3.org>
Tested-by: Benjamin Mack <benni@typo3.org>
typo3/sysext/extensionmanager/Resources/Private/Layouts/Main.html
typo3/sysext/extensionmanager/Resources/Private/Templates/Configuration/ShowConfigurationForm.html
typo3/sysext/extensionmanager/Resources/Private/Templates/UpdateScript/Show.html
typo3/sysext/extensionmanager/Resources/Public/JavaScript/Main.js
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_tab.less
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_module_extensionmanager.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css

index d3a3c7b..5ba8263 100644 (file)
@@ -3,14 +3,12 @@
 <f:be.container pageTitle="Extension Manager" enableClickMenu="false" loadPrototype="false" loadScriptaculous="false" loadExtJs="false" loadExtJsTheme="true" loadJQuery="true"
 
        includeCssFiles="{
-               0:'{f:uri.resource(path:\'Contrib/jQueryUI/jquery-ui-1.10.3.custom.min.css\')}',
-               1:'{f:uri.resource(path:\'Contrib/LoadMask/jquery.loadmask.css\')}'
+               0:'{f:uri.resource(path:\'Contrib/LoadMask/jquery.loadmask.css\')}'
        }"
        includeJsFiles="{
-               1:'{f:uri.resource(path:\'Contrib/jQueryUI/jquery-ui-1.10.3.min.js\')}',
-               2:'{f:uri.resource(path:\'JavaScript/jquery-validate-1.11.1.min.js\')}',
-               3:'{f:uri.resource(path:\'JavaScript/jquery.expander.min.js\')}',
-               5:'{f:uri.resource(path:\'Contrib/LoadMask/jquery.loadmask.js\')}'
+               0:'{f:uri.resource(path:\'JavaScript/jquery-validate-1.11.1.min.js\')}',
+               1:'{f:uri.resource(path:\'JavaScript/jquery.expander.min.js\')}',
+               2:'{f:uri.resource(path:\'Contrib/LoadMask/jquery.loadmask.js\')}'
        }"
        includeRequireJsModules="{
                0:'TYPO3/CMS/Extensionmanager/Main'
index 247357d..52559c5 100644 (file)
 </f:section>
 
 <f:section name="Content">
-       <div id="typo3-extension-configuration-forms">
-               <div class="tabs">
-                       <ul>
-                               <f:for each="{configuration}" as="category" key="categoryNumber">
-                                       <f:if condition="{category.name}">
-                                               <li><a href="#category-{categoryNumber}">{category.name}</a></li>
-                                       </f:if>
-                               </f:for>
-                       </ul>
-                       <f:form action="save" name="configurationform" class="validate">
+       <div role="tabpanel">
+               <ul class="nav nav-tabs" role="tablist">
+                       <f:for each="{configuration}" as="category" key="categoryNumber" iteration="iteration">
+                               <f:if condition="{category.name}">
+                                       <li role="presentation" class="{f:if(condition:'{iteration.isFirst}', then:'active')}"><a href="#category-{categoryNumber}" aria-controls="category-{categoryNumber}" role="tab" data-toggle="tab">{category.name}</a></li>
+                               </f:if>
+                       </f:for>
+               </ul>
+
+               <f:form action="save" name="configurationform" class="validate">
+                       <div class="tab-content">
                                <f:form.hidden name="extensionKey" value="{extension.key}" />
-                               <f:for each="{configuration}" as="category" key="categoryNumber">
+                               <f:for each="{configuration}" as="category" key="categoryNumber" iteration="iteration">
                                        <f:if condition="{category.name}">
-                                               <div class="category" id="category-{categoryNumber}">
+                                               <div role="tabpanel" class="tab-pane {f:if(condition:'{iteration.isFirst}', then:'active')}" id="category-{categoryNumber}">
                                                        <f:for each="{category.subcategories}" as="subcategory">
                                                                <div class="subcategory">
                                                                        <f:if condition="{subcategory.label}">
                                                                                <f:then>
-                                                                                       <h3>{subcategory.label}</h3>
+                                                                                       <h2>{subcategory.label}</h2>
                                                                                </f:then>
                                                                                <f:else>
                                                                                        <f:if condition="{category.subcategories->f:count()} > 1">
                                                                        </f:if>
                                                                        <f:for each="{subcategory.items}" as="item">
                                                                                <div class="group">
-                                                                                       <h4>{item.labelHeadline} <span class="info">[{category.name}.{item.name}]</span></h4>
+                                                                                       <h3>{item.labelHeadline} <span class="info">[{category.name}.{item.name}]</span></h3>
                                                                                        <f:if condition="{item.labelText}">
-                                                                                               <label for="{item.name}">{item.labelText -> f:format.nl2br()}</label>
+                                                                                               <label for="{item.name}">{item.labelText -> f:format.nl2br()}</label><br>
                                                                                        </f:if>
                                                                                        <f:if condition="{item.highlight}">
                                                                                                <span style="background:red; padding:1px 2px; color:#fff; font-weight:bold;">{item.highlight}</span>
                                                                                        </f:if>
                                                                                        <em:form.typoScriptConstants configuration="{item}" />
                                                                                        <f:if condition="{item.type} != 'user'">
-                                                                                               <f:then>
-                                                                                                       <f:alias map="{label: '{f:translate(key: \'extConfTemplate.type.{item.type}\')}'}">
-                                                                                                               <f:if condition="{label}">
-                                                                                                                       <f:then>
-                                                                                                                               <span class="info">({label})</span>
-                                                                                                                       </f:then>
-                                                                                                               </f:if>
-                                                                                                       </f:alias>
-                                                                                               </f:then>
+                                                                                               <f:alias map="{label: '{f:translate(key: \'extConfTemplate.type.{item.type}\')}'}">
+                                                                                                       <f:if condition="{label}">
+                                                                                                               <span class="info">({label})</span>
+                                                                                                       </f:if>
+                                                                                               </f:alias>
                                                                                        </f:if>
                                                                                </div>
                                                                        </f:for>
@@ -72,7 +69,7 @@
                                                </div>
                                        </f:if>
                                </f:for>
-                       </f:form>
-               </div>
+                       </div>
+               </f:form>
        </div>
 </f:section>
index 1d87e60..17d86ea 100644 (file)
 </f:section>
 
 <f:section name="Content">
-       <div id="typo3-extension-configuration-forms">
-               <div class="update-script">
-                       <f:if condition="{updateScriptResult}">
-                               <f:then>
-                                       <f:format.raw>{updateScriptResult}</f:format.raw>
-                               </f:then>
-                               <f:else>
-                                       <f:translate key="updateScript.none" />
-                               </f:else>
-                       </f:if>
-               </div>
+       <div class="update-script">
+               <f:if condition="{updateScriptResult}">
+                       <f:then>
+                               <f:format.raw>{updateScriptResult}</f:format.raw>
+                       </f:then>
+                       <f:else>
+                               <f:translate key="updateScript.none" />
+                       </f:else>
+               </f:if>
        </div>
 </f:section>
index 2649c66..aff7eb1 100644 (file)
@@ -579,8 +579,6 @@ define(['jquery', 'datatables', 'jquery/jquery.clearable'], function($) {
                $(document).ready(function() {
                        var dataTable = ExtensionManager.manageExtensionListing();
 
-                       $('#typo3-extension-configuration-forms .tabs').tabs();
-
                        $(document).on('click', '.onClickMaskExtensionManager', function() {
                                $(ExtensionManager.identifier.extensionManager).mask();
                        });
index 47f1da4..9e79528 100644 (file)
        }
 }
 
+.tab-content {
+       background: @nav-tabs-active-link-bg;
+       border: 1px solid @nav-tabs-border-color;
+       border-top-color: transparent;
+       padding: 0 18px 24px;
+}
 
 div.typo3-dyntabmenu-divs {
        padding: floor(@line-height-computed * 1.5) @line-height-computed;
index 62ff01e..6b7d4fb 100644 (file)
@@ -2,43 +2,6 @@
 // Extensionmanager
 //
 
-// Tabs
-#typo3-extension-main-menu .tabs ul,
-#typo3-extension-configuration-forms .tabs ul {
-       list-style: none;
-       padding: 0;
-       margin-bottom: -1px;
-       .clearfix();
-       > li {
-               cursor: pointer;
-               &.ui-tabs-active a,
-               a.current {
-                       background: white;
-                       color: black;
-                       border-bottom: 0;
-                       padding-top: 4px;
-                       cursor: default;
-               }
-               a {
-                       border-radius: 4px 4px 0 0;
-                       float: left;
-                       height: 22px;
-                       background: #dadada;
-                       padding: 4px 15px;
-                       margin-top: -1px;
-                       margin-right: 2px;
-                       border: 1px solid #adadad;
-                       color: #606060;
-                       outline: none;
-                       &:hover {
-                               background-color: #eee;
-                               border-color: #adadad;
-                               color: #606060;
-                       }
-               }
-       }
-}
-
 // Extension list
 .typo3-extension-list {
        .ext-icon {
index b726fce..0218053 100644 (file)
@@ -8350,6 +8350,12 @@ span.spinner {
 .nav-tabs > li.active > a:hover {
   background: #ededed;
 }
+.tab-content {
+  background: #fafafa;
+  border: 1px solid #cccccc;
+  border-top-color: transparent;
+  padding: 0 18px 24px;
+}
 div.typo3-dyntabmenu-divs {
   padding: 27px 18px;
   margin-bottom: 1em;
@@ -11064,67 +11070,6 @@ fieldset[disabled] .live-search-list .x-btn button.active {
 .contentelement-wizard a {
   display: inline-block;
 }
-#typo3-extension-main-menu .tabs ul,
-#typo3-extension-configuration-forms .tabs ul {
-  list-style: none;
-  padding: 0;
-  margin-bottom: -1px;
-}
-#typo3-extension-main-menu .tabs ul:before,
-#typo3-extension-configuration-forms .tabs ul:before,
-#typo3-extension-main-menu .tabs ul:after,
-#typo3-extension-configuration-forms .tabs ul:after {
-  content: " ";
-  display: table;
-}
-#typo3-extension-main-menu .tabs ul:after,
-#typo3-extension-configuration-forms .tabs ul:after {
-  clear: both;
-}
-#typo3-extension-main-menu .tabs ul:before,
-#typo3-extension-configuration-forms .tabs ul:before,
-#typo3-extension-main-menu .tabs ul:after,
-#typo3-extension-configuration-forms .tabs ul:after {
-  content: " ";
-  display: table;
-}
-#typo3-extension-main-menu .tabs ul:after,
-#typo3-extension-configuration-forms .tabs ul:after {
-  clear: both;
-}
-#typo3-extension-main-menu .tabs ul > li,
-#typo3-extension-configuration-forms .tabs ul > li {
-  cursor: pointer;
-}
-#typo3-extension-main-menu .tabs ul > li.ui-tabs-active a,
-#typo3-extension-configuration-forms .tabs ul > li.ui-tabs-active a,
-#typo3-extension-main-menu .tabs ul > li a.current,
-#typo3-extension-configuration-forms .tabs ul > li a.current {
-  background: white;
-  color: black;
-  border-bottom: 0;
-  padding-top: 4px;
-  cursor: default;
-}
-#typo3-extension-main-menu .tabs ul > li a,
-#typo3-extension-configuration-forms .tabs ul > li a {
-  border-radius: 4px 4px 0 0;
-  float: left;
-  height: 22px;
-  background: #dadada;
-  padding: 4px 15px;
-  margin-top: -1px;
-  margin-right: 2px;
-  border: 1px solid #adadad;
-  color: #606060;
-  outline: none;
-}
-#typo3-extension-main-menu .tabs ul > li a:hover,
-#typo3-extension-configuration-forms .tabs ul > li a:hover {
-  background-color: #eee;
-  border-color: #adadad;
-  color: #606060;
-}
 .typo3-extension-list .ext-icon {
   max-height: 16px;
   width: auto;