[TASK] Style Admin Panel 61/41861/3
authorAndreas Steiger <typo3@andreassteiger.de>
Thu, 23 Jul 2015 07:09:22 +0000 (09:09 +0200)
committerBenjamin Mack <benni@typo3.org>
Fri, 24 Jul 2015 05:43:42 +0000 (07:43 +0200)
style cache table like the other tables in admin panel
set a maximum width for admin panel
add spacing between the elements
restructure html

Resolves: #68481
Releases: master
Change-Id: I8df141d9d46bfea4b3a4a08f3500c03d6b0ee665
Reviewed-on: http://review.typo3.org/41861
Reviewed-by: Daniel Goerz <ervaude@gmail.com>
Tested-by: Daniel Goerz <ervaude@gmail.com>
Reviewed-by: Benjamin Mack <benni@typo3.org>
Tested-by: Benjamin Mack <benni@typo3.org>
typo3/sysext/frontend/Classes/View/AdminPanelView.php
typo3/sysext/t3skin/stylesheets/standalone/admin_panel.css

index 1f69867..1748664 100755 (executable)
@@ -252,13 +252,11 @@ class AdminPanelView {
                $row = $this->extGetLL('adminPanelTitle') . ': <span class="typo3-adminPanel-beuser">' . htmlspecialchars($GLOBALS['BE_USER']->user['username']) . '</span>';
                $isVisible = $GLOBALS['BE_USER']->uc['TSFE_adminConfig']['display_top'];
                $cssClassName = 'typo3-adminPanel-panel-' . ($isVisible ? 'open' : 'closed');
-               $header = '<tr class="typo3-adminPanel-header">' . '<td colspan="2" id="typo3-adminPanel-header" class="' . $cssClassName . '">' . '<span class="typo3-adminPanel-header-title">' . $row . '</span>' . $this->linkSectionHeader('top', '<span class="typo3-adminPanel-header-button fa"></span>', 'typo3-adminPanel-header-buttonWrapper') . '<input type="hidden" name="TSFE_ADMIN_PANEL[display_top]" value="' . $GLOBALS['BE_USER']->uc['TSFE_adminConfig']['display_top'] . '" /></td>' . '</tr>';
+               $header = '<div class="typo3-adminPanel-header">' . '<div id="typo3-adminPanel-header" class="' . $cssClassName . '">' . '<span class="typo3-adminPanel-header-title">' . $row . '</span>' . $this->linkSectionHeader('top', '<span class="typo3-adminPanel-header-button fa"></span>', 'typo3-adminPanel-header-buttonWrapper') . '<input type="hidden" name="TSFE_ADMIN_PANEL[display_top]" value="' . $GLOBALS['BE_USER']->uc['TSFE_adminConfig']['display_top'] . '" /></div>' . '</div>';
                if ($moduleContent && $this->extNeedUpdate) {
-                       $footer = '<tr class="typo3-adminPanel-footer">
-                                               <td colspan="2">
+                       $footer = '<div id="typo3-adminPanel-footer">
                                                        <input class="typo3-adminPanel-update btn btn-default" type="submit" value="' . $this->extGetLL('update') . '" />
-                                               </td>
-                                       </tr>';
+                                       </div>';
                }
                $query = !GeneralUtility::_GET('id') ? '<input type="hidden" name="id" value="' . $GLOBALS['TSFE']->id . '" />' : '';
 
@@ -279,7 +277,7 @@ class AdminPanelView {
        TYPO3 Admin panel start
 -->
 <a id="TSFE_ADMIN_PANEL"></a>
-<form id="TSFE_ADMIN_PANEL_FORM" name="TSFE_ADMIN_PANEL_FORM" action="' . htmlspecialchars(GeneralUtility::getIndpEnv('TYPO3_REQUEST_SCRIPT')) . '#TSFE_ADMIN_PANEL" method="get" onsubmit="document.forms.TSFE_ADMIN_PANEL_FORM[\'TSFE_ADMIN_PANEL[DUMMY]\'].value=Math.random().toString().substring(2,8)">' . $query . '<table class="typo3-adminPanel">' . $header . $moduleContent . $footer . '</table></form>';
+<form id="TSFE_ADMIN_PANEL_FORM" name="TSFE_ADMIN_PANEL_FORM" action="' . htmlspecialchars(GeneralUtility::getIndpEnv('TYPO3_REQUEST_SCRIPT')) . '#TSFE_ADMIN_PANEL" method="get" onsubmit="document.forms.TSFE_ADMIN_PANEL_FORM[\'TSFE_ADMIN_PANEL[DUMMY]\'].value=Math.random().toString().substring(2,8)">' . $query . '<div class="typo3-adminPanel">' . $header . $moduleContent . $footer . '</div></form>';
                if ($GLOBALS['BE_USER']->uc['TSFE_adminConfig']['display_top']) {
                        $out .= '<script type="text/javascript" src="typo3/sysext/backend/Resources/Public/JavaScript/jsfunc.evalfield.js"></script>';
                        $out .= '<script type="text/javascript">/*<![CDATA[*/' . GeneralUtility::minifyJavaScript('
@@ -403,13 +401,13 @@ class AdminPanelView {
                        $GLOBALS['BE_USER']->extPageInTreeInfo = array();
                        $GLOBALS['BE_USER']->extPageInTreeInfo[] = array($GLOBALS['TSFE']->page['uid'], htmlspecialchars($GLOBALS['TSFE']->page['title']), $depth + 1);
                        $GLOBALS['BE_USER']->extGetTreeList($GLOBALS['TSFE']->id, $depth, 0, $GLOBALS['BE_USER']->getPagePermsClause(1));
-                       foreach ($GLOBALS['BE_USER']->extPageInTreeInfo as $row) {
-                               $outTable .= '<tr>' . '<td><span style="width: ' . ($depth + 1 - $row[2]) * 18 . 'px; height: 1px; display: inline-block;"></span>' . IconUtility::getSpriteIcon('apps-pagetree-page-default') . htmlspecialchars($row[1]) . '</td><td>' . $GLOBALS['BE_USER']->extGetNumberOfCachedPages($row[0]) . '</td></tr>';
+                       foreach ($GLOBALS['BE_USER']->extPageInTreeInfo as $key => $row) {
+                               $outTable .= '<tr class="typo3-adminPanel-itemRow ' . ($key % 2 == 0 ? 'line-even' : 'line-odd') . '">' . '<td><span style="width: ' . ($depth + 1 - $row[2]) * 18 . 'px; height: 1px; display: inline-block;"></span>' . IconUtility::getSpriteIcon('apps-pagetree-page-default') . htmlspecialchars($row[1]) . '</td><td>' . $GLOBALS['BE_USER']->extGetNumberOfCachedPages($row[0]) . '</td></tr>';
                        }
-                       $outTable = '<br /><table class="typo3-adminPanel-table"><thead><tr><th colspan="2">' . $this->extGetLL('cache_cacheEntries') . '</th></tr></thead>' . $outTable . '</table>';
+                       $outTable = '<table class="typo3-adminPanel-table"><thead><tr><th colspan="2">' . $this->extGetLL('cache_cacheEntries') . '</th></tr></thead>' . $outTable . '</table>';
                        $outTable .= '<span class="fa fa-bolt clear-cache-icon"><!-- --></span><input class="btn btn-default clear-cache" type="submit" name="TSFE_ADMIN_PANEL[action][clearCache]" value="' . $this->extGetLL('cache_doit') . '" />';
 
-                       $out .= $this->extGetItem('', $outTable);
+                       $out .= $this->extGetItem('', $outTable, '', 'typo3-adminPanel-tableRow', 'typo3-adminPanel-table-wrapper');
                }
                return $out;
        }
@@ -472,7 +470,7 @@ class AdminPanelView {
                        $GLOBALS['TT']->printConf['flag_messages'] = $this->extGetFeAdminValue('tsdebug', 'displayMessages');
                        $GLOBALS['TT']->printConf['flag_content'] = $this->extGetFeAdminValue('tsdebug', 'displayContent');
                        $GLOBALS['TT']->printConf['flag_queries'] = $this->extGetFeAdminValue('tsdebug', 'displayQueries');
-                       $out .= '<tr><td class="typo3-adminPanel-table-wrapper" colspan="2">' . $GLOBALS['TT']->printTSlog() . '</td></tr>';
+                       $out .= $this->extGetItem('', $GLOBALS['TT']->printTSlog(), '', 'typo3-adminPanel-tableRow', 'typo3-adminPanel-table-wrapper scroll-table');
                }
                return $out;
        }
@@ -522,12 +520,13 @@ class AdminPanelView {
                                $value = (string)$arr[1] !== '' ? $arr[1] : '';
                                $table .=
                                        '<tr class="typo3-adminPanel-itemRow ' . ($key % 2 == 0 ? 'line-even' : 'line-odd') . '">
-                                                       <td class="typo3-adminPanel-section-content-title">' . $label . '</td>
-                                                       <td class="typo3-adminPanel-section-content">' . htmlspecialchars($value) . '</td>
+                                                       <td>' . $label . '</td>
+                                                       <td>' . htmlspecialchars($value) . '</td>
                                                </tr>';
                        }
                        $out .= $table;
-                       $out = '<tr><td class="typo3-adminPanel-table-wrapper" colspan="2"><table class="typo3-adminPanel-table">' . $out . '</table></td></tr>';
+                       $out = '<table class="typo3-adminPanel-table">' . $out . '</table>';
+                       $out = $this->extGetItem('', $out, '', 'typo3-adminPanel-tableRow', 'typo3-adminPanel-table-wrapper');
                }
 
                $out = $head . $out;
@@ -550,7 +549,7 @@ class AdminPanelView {
                $settingName = 'display_' . $sectionSuffix;
                $isVisible = $GLOBALS['BE_USER']->uc['TSFE_adminConfig'][$settingName];
                $cssClassName = 'typo3-adminPanel-section-' . ($isVisible ? 'open' : 'closed');
-               return '<tr class="typo3-adminPanel-section-title"><td colspan="2">' . $this->linkSectionHeader($sectionSuffix, $this->extGetLL($sectionSuffix), $cssClassName) . '<input type="hidden" name="TSFE_ADMIN_PANEL[' . $settingName . ']" value="' . $isVisible . '" /></td></tr>';
+               return '<div class="typo3-adminPanel-section-title"><div class="wrapper">' . $this->linkSectionHeader($sectionSuffix, $this->extGetLL($sectionSuffix), $cssClassName) . '<input type="hidden" name="TSFE_ADMIN_PANEL[' . $settingName . ']" value="' . $isVisible . '" /></div></div>';
        }
 
        /**
@@ -579,14 +578,17 @@ class AdminPanelView {
         * @param string $title Key to label
         * @param string $content The HTML content for the forth table cell.
         * @param string $checkbox The HTML for a checkbox or hidden fields.
+        * @param string  $innerDivClass The Class attribute for the td element.
+        * @param string  $outerDivClass The Class attribute for the tr element.
         * @return string HTML table row.
         * @see extGetHead()
         */
-       public function extGetItem($title, $content = '', $checkbox = '') {
+       public function extGetItem($title, $content = '', $checkbox = '', $outerDivClass = NULL, $innerDivClass = NULL) {
                $title = $title ? '<label for="' . htmlspecialchars($title) . '">' . $this->extGetLL($title) . '</label>' : '';
-               $out = '<tr class="typo3-adminPanel-itemRow">
-                                       <td class="typo3-adminPanel-section-content">' . $checkbox . $title . $content . '</td>
-                               </tr>';
+               $outerDivClass === NULL ? $out = '<div class="typo3-adminPanel-itemRow">' : $out = '<div class="' . $outerDivClass . '">';
+               $innerDivClass === NULL ? $out .= '<div class="typo3-adminPanel-section-content">' : $out .= '<div class="' . $innerDivClass . '">';
+               $out .= $checkbox . $title . $content . '</div>
+                               </div>';
                return $out;
        }
 
index 91024d7..2014d23 100644 (file)
  **/
 
 #TSFE_ADMIN_PANEL_FORM {
+       display: block;
+       max-width: 50%;
+}
+
+#TSFE_ADMIN_PANEL_FORM {
        background-color: #fff;
        box-shadow: 0 3px 15px #808080;
        margin: 0;
        margin: 0;
        min-width: 315px;
        padding: 0;
+       line-height: 0.8;
+}
+
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel * {
+       line-height: 1;
+}
+
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-table * {
+       line-height: 1.55;
 }
 
+#TSFE_ADMIN_PANEL_FORM,
 #TSFE_ADMIN_PANEL_FORM table,
 #TSFE_ADMIN_PANEL_FORM a {
        color: black;
        text-decoration: none;
 }
 
-#TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-header td {
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-header {
+       line-height: 0.5;
+}
+
+#TSFE_ADMIN_PANEL_FORM #typo3-adminPanel-header {
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        cursor: move;
 }
 
-#TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-header td,
-#TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-footer td {
+#TSFE_ADMIN_PANEL_FORM #typo3-adminPanel-header,
+#TSFE_ADMIN_PANEL_FORM #typo3-adminPanel-footer {
+       display: inline-block;
+       width: 100%;
        background-color: #222;
        color: white;
 }
 
-#TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-footer td {
+#TSFE_ADMIN_PANEL_FORM #typo3-adminPanel-footer {
        padding-right: 5px;
 }
 
-#TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-header td a,
-#TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-footer td a {
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-header a,
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-footer a {
        color: #fff;
 }
 
-
-#TSFE_ADMIN_PANEL_FORM tr .btn {
+#TSFE_ADMIN_PANEL_FORM .btn {
        margin-top: 6px;
        margin-bottom: 6px;
 }
        content: "\f107";
 }
 
-#TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-section-title td {
-       background-color: #ddd;
-       border-bottom: 1px solid #888;
-       border-top: 1px solid #888;
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-title .wrapper {
        clear: left;
        margin: 0;
        padding: 0;
+       border-top: 1px solid #888;
+       border-bottom: 1px solid #888;
+       background-color: #ddd;
 }
 
-#TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-section-title td a {
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-title a {
        display: block;
-       height: 26px;
+       padding-top: 5px;
+       padding-bottom: 5px;
        line-height: 25px;
 }
 
        font-weight: 500;
 }
 
-#TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-section-title td a .typo3-adminPanel-label {
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-title a .typo3-adminPanel-label {
        padding-top: 4px;
        white-space: nowrap;
 }
 
-#TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-section-title td {
-       padding-top: 4px;
-       padding-bottom:4px;
-}
-
-#TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-section-title td:hover {
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-title .wrapper:hover {
        color: #fff;
        background-color: #7e7e7e;
 }
 
-#TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-section-title td:hover a {
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-title .wrapper:hover a {
        color: #fff;
 }
 
-#TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-section-title .typo3-adminPanel-section-open,
-#TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-section-title .typo3-adminPanel-section-closed {
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-title .typo3-adminPanel-section-open,
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-title .typo3-adminPanel-section-closed {
        display: inline-block;
        width: 100%;
        padding-left: 26px;
 }
 
-#TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-section-title .typo3-adminPanel-section-open:before,
-#TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-section-title .typo3-adminPanel-section-closed:before {
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-title .typo3-adminPanel-section-open:before,
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-title .typo3-adminPanel-section-closed:before {
        margin-left: -13px;
        padding-right: 13px;
        font-size: 14px;
        content: "\f0d8";
 }
 
-#TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-section-title .typo3-adminPanel-section-closed:before {
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-title .typo3-adminPanel-section-closed:before {
        content: "\f0d7";
 }
 
-#TSFE_ADMIN_PANEL_FORM tr.typo3-adminPanel-itemRow td {
-       padding: 0px 15px;
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-itemRow .typo3-adminPanel-section-content {
+       padding: 7px 15px;
        line-height: 16px;
 }
 
-#TSFE_ADMIN_PANEL_FORM td.typo3-adminPanel-section-content {
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-content {
        padding-right: 11px;
 }
 
-#TSFE_ADMIN_PANEL_FORM td.typo3-adminPanel-section-content .toolbar span {
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-content .toolbar span {
        padding: 1px;
 }
 
-#TSFE_ADMIN_PANEL_FORM td.typo3-adminPanel-section-content label {
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-content label {
        padding-right: 5px;
 }
 
 
 #TSFE_ADMIN_PANEL_FORM .clear-cache-icon:before {
        position: absolute;
-       left: 11px;
+       left: 26px;
        top: -11px;
 }
 
-#TSFE_ADMIN_PANEL_FORM .btn.clear-cache{
+#TSFE_ADMIN_PANEL_FORM .btn.clear-cache {
+       margin-left: 15px;
        padding-left: 25px
 }
 
        margin: 0;
        vertical-align: inherit;
        border-color: inherit;
-       padding: 5px;
+       padding: 0 15px;
        text-align: left;
        white-space: nowrap;
 }
        padding: 10px 0;
 }
 
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table-wrapper.scroll-table {
+       overflow-x: scroll;
+}
+
 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table .line-odd,
 #TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table .line-even {
        background-color: #f0f0f0;
        user-select: none;
 }
 
+#TSFE_ADMIN_PANEL_FORM #typo3-adminPanel-footer .btn {
+       margin-bottom: 5px;
+}
+
 #TSFE_ADMIN_PANEL_FORM .btn:hover {
        background-color:#c4c4c4;
 }