[BUGFIX] Extension manager styling 69/19569/2
authorFelix Kopp <felix-source@phorax.com>
Fri, 1 Mar 2013 00:09:05 +0000 (01:09 +0100)
committerChristian Kuhn <lolli@schwarzbu.ch>
Fri, 5 Apr 2013 13:57:53 +0000 (15:57 +0200)
The extension manager never got all defined styles.
Bring several visual improvements:

— placeholder in search field
— show action icons on hover
— style extension state column
— float table header cols left and right

Change-Id: Id6eafa2b28b1d054929a84400bf1648b6e1e6d75
Fixes: #45928
Releases: 6.0, 6.1
Reviewed-on: https://review.typo3.org/19569
Reviewed-by: Christian Kuhn
Tested-by: Christian Kuhn
typo3/sysext/extensionmanager/Classes/ViewHelpers/ToggleExtensionInstallationStateViewHelper.php
typo3/sysext/extensionmanager/Resources/Private/Language/locallang.xlf
typo3/sysext/extensionmanager/Resources/Private/Layouts/Main.html
typo3/sysext/extensionmanager/Resources/Private/Scss/page/_base.scss
typo3/sysext/extensionmanager/Resources/Private/Scss/page/_manage.scss
typo3/sysext/extensionmanager/Resources/Private/Templates/Configuration/ShowConfigurationForm.html
typo3/sysext/extensionmanager/Resources/Private/Templates/List/Index.html
typo3/sysext/extensionmanager/Resources/Private/Templates/List/ShowAllVersions.html
typo3/sysext/extensionmanager/Resources/Private/Templates/List/Ter.html
typo3/sysext/extensionmanager/Resources/Private/Templates/UpdateScript/Show.html
typo3/sysext/extensionmanager/Resources/Public/Css/main.css

index 7ed2805..5206015 100644 (file)
@@ -47,7 +47,7 @@ class ToggleExtensionInstallationStateViewHelper extends \TYPO3\CMS\Fluid\ViewHe
        public function render($extension) {
                $requiredExtensions = \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::getRequiredExtensionListArray();
 
-                       // Required extensions can't be activated or deactivated
+               // Required extensions can't be deactivated, these are always activated
                if (in_array($extension['key'], $requiredExtensions)) {
                        return '';
                }
index 54b0bf5..346b109 100644 (file)
                        <trans-unit id="extensionList.header.author" xml:space="preserve">
                                <source>Author</source>
                        </trans-unit>
+                       <trans-unit id="searchTemplate.searchExtensions" xml:space="preserve">
+                               <source>Search extensions</source>
+                       </trans-unit>
                        <trans-unit id="searchTemplate.submitButton" xml:space="preserve">
-                               <source>Search</source>
+                               <source>Go</source>
                        </trans-unit>
                        <trans-unit id="searchTemplate.resetSearchButton" xml:space="preserve">
                                <source>Reset Search</source>
index 708fbbb..93b6340 100644 (file)
 
        <div id="typo3-docheader">
                <div class="typo3-docheader-functions">
-                       <f:render section="docHeaderRow2" />
+                       <f:render section="functions" />
                </div>
                <div class="typo3-docheader-buttons">
-                       <f:render section="docHeaderRow1" />
+                       <f:render section="buttons" />
                </div>
        </div>
        <div id="typo3-docbody">
index f1d6f81..42b8a30 100644 (file)
        background-color: #aaffcb !important;
 }
 
+.stable,
+.alpha,
+.beta {
+       font-weight: bold;
+       color: #fff;
+}
+
+.typo3-extension-list td.icons {
+       width: 140px;
+}
+
+.typo3-extension-list .icons a {
+       display: none;
+}
+
+.typo3-extension-list tr:hover .icons a {
+       display: inline;
+}
+
 #typo3-extension-configuration-forms .info {
        font-size: 9px;
        color: #666;
        color: #ff2262;
 }
 
+.typo3-extension-list .inactive {
+       color: rgb(170, 170, 170);
+}
+
 .headerTooltip,
 .tooltip {
        @include box-shadow(2px 2px 11px #666);
index b1b1e99..b1882af 100644 (file)
 }
 
 // Upload extension
+.headerRow { overflow: auto; width: 100% }
+
+.typo3-extensionmanager-headerRowLeft {
+       float: left;
+}
+
 .typo3-extensionmanager-headerRowRight {
        float: right;
 }
@@ -72,6 +78,7 @@
                color: #fff;
 
                cursor: pointer;
+               white-space: nowrap;
 
 
                &:hover {
index 58773ab..10a74ed 100644 (file)
@@ -1,10 +1,13 @@
 {namespace em=TYPO3\CMS\Extensionmanager\ViewHelpers}
 <f:layout name="main" />
-<f:section name="docHeaderRow1">
-       <f:be.buttons.icon uri="{f:uri.action(action:'index',controller:'List',additionalParams:{search:extension.key})}" icon="actions-view-go-back" title="{f:translate(key:'extConfTemplate.backToList')}" />
+
+<f:section name="functions">
 </f:section>
-<f:section name="docHeaderRow2">
+
+<f:section name="buttons">
+       <f:be.buttons.icon uri="{f:uri.action(action:'index',controller:'List',additionalParams:{search:extension.key})}" icon="actions-view-go-back" title="{f:translate(key:'extConfTemplate.backToList')}" />
 </f:section>
+
 <f:section name="Content">
        <div id="typo3-extension-configuration-forms">
                <h2>
index 6e822a2..57ff9b1 100644 (file)
@@ -1,13 +1,16 @@
 {namespace em=TYPO3\CMS\Extensionmanager\ViewHelpers}
 
 <f:layout name="main" />
-<f:section name="docHeaderRow1">
-       <f:be.buttons.icon uri="{f:uri.action(action:'form',controller:'UploadExtensionFile')}" icon="actions-edit-upload" title="{f:translate(key:'extensionList.uploadExtension')}"/>
+
+<f:section name="functions">
 </f:section>
-<f:section name="docHeaderRow2">
+
+<f:section name="buttons">
+       <f:be.buttons.icon uri="{f:uri.action(action:'form',controller:'UploadExtensionFile')}" icon="actions-edit-upload" title="{f:translate(key:'extensionList.uploadExtension')}"/>
 </f:section>
+
 <f:section name="Content">
-       <div class="headerRow">
+       <div class="headerRow ui-helper-clearfix">
                <div class="typo3-extensionmanager-headerRowLeft">
                </div>
                <div class="typo3-extensionmanager-headerRowRight">
                        <f:for each="{extensions}" as="extension" key="extensionKey">
                                <f:if condition="{extension.terObject}">
                                        <f:then>
-                                               <tr id="{extensionKey}" class="{f:if(condition:'{extension.terObject.reviewState} >= 0', then:'', else:'insecure')}">
+                                               <tr id="{extensionKey}" class="{f:if(condition:'{extension.terObject.reviewState} >= 0', then:'', else:'insecure')} {f:if(condition:'{extension.installed}', then: '', else: 'inactive')}">
                                        </f:then>
                                        <f:else>
-                                               <tr id="{extensionKey}">
+                                               <tr id="{extensionKey}" class="{f:if(condition:'{extension.installed}', then: '', else: 'inactive')}">
                                        </f:else>
                                </f:if>
                                <td>
@@ -65,7 +68,7 @@
                                <td>
                                        {extension.version}
                                </td>
-                               <td>
+                               <td class="icons">
                                        <em:configureExtension extension="{extension}" />
                                        <em:updateScript extensionKey="{extension.key}" />
                                        <em:removeExtension extension="{extension}" />
index e26c529..049d6e7 100644 (file)
@@ -1,9 +1,11 @@
 {namespace em=TYPO3\CMS\Extensionmanager\ViewHelpers}
 
 <f:layout name="main"/>
-<f:section name="docHeaderRow1">
+
+<f:section name="functions">
 </f:section>
-<f:section name="docHeaderRow2">
+
+<f:section name="buttons">
 </f:section>
 
 <f:section name="Content">
index 90ec50f..b9e159b 100644 (file)
@@ -1,16 +1,19 @@
 {namespace em=TYPO3\CMS\Extensionmanager\ViewHelpers}
 
 <f:layout name="main"/>
-<f:section name="docHeaderRow1">
+
+<f:section name="functions">
 </f:section>
-<f:section name="docHeaderRow2">
+
+<f:section name="buttons">
 </f:section>
+
 <f:section name="Content">
-       <div class="headerRow">
+       <div class="headerRow ui-helper-clearfix">
                <div class="typo3-extensionmanager-headerRowLeft">
                        <f:form class="typo3-extensionmanager-searchTerForm" action="ter">
                                <div class="typo3-extensionmanager-searchTerFieldWrapper">
-                                       <f:form.textfield name="search" value="{search}" />
+                                       <f:form.textfield name="search" value="{search}"  placeholder="{f:translate(key:'searchTemplate.searchExtensions')}"/>
                                        <span class="t3-icon t3-icon-actions t3-icon-actions-input t3-icon-input-clear t3-tceforms-input-clearer"></span>
                                </div>
                                <f:form.submit value="{f:translate(key:'searchTemplate.submitButton')}"/>
index 0a3ab7f..72bb6bb 100644 (file)
@@ -2,11 +2,11 @@
 
 <f:layout name="main" />
 
-<f:section name="docHeaderRow1">
-       <f:be.buttons.icon uri="{f:uri.action(action:'index',controller:'List',additionalParams:{search:extensionKey})}" icon="actions-view-go-back" title="{f:translate(key:'extConfTemplate.backToList')}" />
+<f:section name="functions">
 </f:section>
 
-<f:section name="docHeaderRow2">
+<f:section name="buttons">
+       <f:be.buttons.icon uri="{f:uri.action(action:'index',controller:'List',additionalParams:{search:extensionKey})}" icon="actions-view-go-back" title="{f:translate(key:'extConfTemplate.backToList')}" />
 </f:section>
 
 <f:section name="Content">
index 039c378..6722393 100644 (file)
@@ -1602,6 +1602,21 @@ button.ui-button::-moz-focus-inner {
 .beta {
   background-color: #aaffcb !important; }
 
+.stable,
+.alpha,
+.beta {
+  font-weight: bold;
+  color: #fff; }
+
+.typo3-extension-list td.icons {
+  width: 140px; }
+
+.typo3-extension-list .icons a {
+  display: none; }
+
+.typo3-extension-list tr:hover .icons a {
+  display: inline; }
+
 #typo3-extension-configuration-forms .info {
   font-size: 9px;
   color: #666;
@@ -1616,6 +1631,9 @@ button.ui-button::-moz-focus-inner {
 .typo3-extension-manager .insecure {
   color: #ff2262; }
 
+.typo3-extension-list .inactive {
+  color: #aaaaaa; }
+
 .headerTooltip,
 .tooltip {
   -webkit-box-shadow: 2px 2px 11px #666666;
@@ -1643,6 +1661,13 @@ button.ui-button::-moz-focus-inner {
       right: 3px;
       top: 4px; }
 
+.headerRow {
+  overflow: auto;
+  width: 100%; }
+
+.typo3-extensionmanager-headerRowLeft {
+  float: left; }
+
 .typo3-extensionmanager-headerRowRight {
   float: right; }
 
@@ -1683,7 +1708,8 @@ button.ui-button::-moz-focus-inner {
     vertical-align: middle;
     font-weight: bold;
     color: #fff;
-    cursor: pointer; }
+    cursor: pointer;
+    white-space: nowrap; }
     .typo3-extension-list th:hover {
       background: rgba(200, 200, 200, 0.3); }
     .typo3-extension-list th .DataTables_sort_icon {