[TASK] Streamline FE-Edit toolbar and buttons 42/44242/3
authorFrank Nägler <frank.naegler@typo3.org>
Fri, 23 Oct 2015 13:10:14 +0000 (15:10 +0200)
committerChristian Kuhn <lolli@schwarzbu.ch>
Sat, 24 Oct 2015 14:27:49 +0000 (16:27 +0200)
Resolves: #70971
Releases: master
Change-Id: I5351563d1c49fb061ddd84e17a99d971054f2b92
Reviewed-on: https://review.typo3.org/44242
Reviewed-by: Andreas Fernandez <typo3@scripting-base.de>
Tested-by: Andreas Fernandez <typo3@scripting-base.de>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
typo3/sysext/feedit/Classes/FrontendEditPanel.php
typo3/sysext/t3skin/stylesheets/standalone/admin_panel.css

index 264848e..14679f3 100644 (file)
@@ -125,10 +125,10 @@ class FrontendEditPanel
         // Hiding for localizations because it is unknown what should be the function in that case
         if (isset($allow['hide']) && $hideField && $this->backendUser->workspace === 0 && !$dataArr['_LOCALIZED_UID']) {
             if ($dataArr[$hideField]) {
-                $icon = $this->iconFactory->getIcon('actions-edit-unhide')->render();
+                $icon = $this->iconFactory->getIcon('actions-edit-unhide', Icon::SIZE_SMALL)->render();
                 $panel .= $this->editPanelLinkWrap($icon, $formName, 'unhide');
             } else {
-                $icon = $this->iconFactory->getIcon('actions-edit-hide')->render();
+                $icon = $this->iconFactory->getIcon('actions-edit-hide', Icon::SIZE_SMALL)->render();
                 $panel .= $this->editPanelLinkWrap($icon, $formName, 'hide', '', $this->backendUser->extGetLL('p_hideConfirm'));
             }
         }
@@ -164,7 +164,9 @@ class FrontendEditPanel
                                                                        <input type="hidden" name="TSFE_EDIT[cmd]" value="" />
                                                                        <input type="hidden" name="TSFE_EDIT[record]" value="' . $currentRecord . '" />
                                                                        <div class="typo3-editPanel">'
-                                        . $panel .
+                                        . '<div class="btn-group">'
+                                        . $panel
+                                        . '</div>' .
             ($labelTxt ? '<div class="typo3-editPanel-label">' . sprintf($labelTxt, htmlspecialchars(GeneralUtility::fixed_lgd_cs($dataArr[$labelField], 50))) . '</div>' : '') . '
                                                                        </div>
                                                                </form>';
@@ -232,7 +234,7 @@ class FrontendEditPanel
                 'noView' => $nV
             )
         ) . $addUrlParamStr;
-        $icon = $this->editPanelLinkWrap_doWrap($iconImg, $url);
+        $icon = $this->editPanelLinkWrap_doWrap($iconImg, $url, 'content-link');
         if ($conf['beforeLastTag'] < 0) {
             $content = $icon . $content;
         } elseif ($conf['beforeLastTag'] > 0) {
@@ -285,7 +287,7 @@ class FrontendEditPanel
             } else {
                 $cf1 = ($cf2 = '');
             }
-            $out = '<a href="#" onclick="' . htmlspecialchars(($cf1 . 'document.' . $formName . '[\'TSFE_EDIT[cmd]\'].value=\'' . $cmd . '\'; document.' . $formName . '.submit();' . $cf2 . ' return false;')) . '">' . $string . '</a>';
+            $out = '<a href="#" class="btn btn-default btn-sm" onclick="' . htmlspecialchars(($cf1 . 'document.' . $formName . '[\'TSFE_EDIT[cmd]\'].value=\'' . $cmd . '\'; document.' . $formName . '.submit();' . $cf2 . ' return false;')) . '">' . $string . '</a>';
         }
         return $out;
     }
@@ -295,13 +297,14 @@ class FrontendEditPanel
      *
      * @param string $string The string to wrap in a link, typ. and image used as button in the edit panel.
      * @param string $url The URL of the link. Should be absolute if supposed to work with <base> path set.
+     * @param string $additionalClasses Additional CSS classes
      * @return string A <a> tag wrapped string.
      * @see editPanelLinkWrap()
      */
-    protected function editPanelLinkWrap_doWrap($string, $url)
+    protected function editPanelLinkWrap_doWrap($string, $url, $additionalClasses = '')
     {
         $onclick = 'vHWin=window.open(' . GeneralUtility::quoteJSvalue($url . '&returnUrl=sysext/backend/Resources/Private/Templates/Close.html') . ',\'FEquickEditWindow\',\'width=690,height=500,status=0,menubar=0,scrollbars=1,resizable=1\');vHWin.focus();return false;';
-        return '<a href="#" onclick="' . htmlspecialchars($onclick) . '" class="frontEndEditIconLinks">' . $string . '</a>';
+        return '<a href="#" class="btn btn-default btn-sm ' . htmlspecialchars($additionalClasses) . '" onclick="' . htmlspecialchars($onclick) . '" class="frontEndEditIconLinks">' . $string . '</a>';
     }
 
     /**
index 31570f4..b2e03fb 100644 (file)
@@ -5,15 +5,15 @@
 /* FONT PATH
  * -------------------------- */
 @font-face {
-  font-family: 'TYPO3FontAwesome';
-  src: url('../../Resources/Public/Fonts/FontAwesome/fontawesome-webfont.eot?v=4.3.0');
-  src: url('../../Resources/Public/Fonts/FontAwesome/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),
-  url('../../Resources/Public/Fonts/FontAwesome/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),
-  url('../../Resources/Public/Fonts/FontAwesome/fontawesome-webfont.woff?v=4.3.0') format('woff'),
-  url('../../Resources/Public/Fonts/FontAwesome/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),
-  url('../../Resources/Public/Fonts/FontAwesome/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
-  font-weight: normal;
-  font-style: normal;
+       font-family: 'TYPO3FontAwesome';
+       src: url('../../Resources/Public/Fonts/FontAwesome/fontawesome-webfont.eot?v=4.3.0');
+       src: url('../../Resources/Public/Fonts/FontAwesome/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),
+       url('../../Resources/Public/Fonts/FontAwesome/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),
+       url('../../Resources/Public/Fonts/FontAwesome/fontawesome-webfont.woff?v=4.3.0') format('woff'),
+       url('../../Resources/Public/Fonts/FontAwesome/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),
+       url('../../Resources/Public/Fonts/FontAwesome/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
+       font-weight: normal;
+       font-style: normal;
 }
 
 /*!
 .frontEndEditIconLinks .fa:before,
 .typo3-editPanel .fa,
 .typo3-editPanel .fa:before{
-  display: inline-block;
-  font: normal normal normal 14px/1 TYPO3FontAwesome;
-  font-size: 15px;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  transform: translate(0, 0);
+       display: inline-block;
+       font: normal normal normal 14px/1 TYPO3FontAwesome;
+       font-size: 15px;
+       text-rendering: auto;
+       -webkit-font-smoothing: antialiased;
+       -moz-osx-font-smoothing: grayscale;
+       transform: translate(0, 0);
 }
 #TSFE_ADMIN_PANEL_FORM .fa-pencil:before,
 .typo3-feedit-element .fa-pencil:before {
-  content: "\f040";
+       content: "\f040";
 }
 #TSFE_ADMIN_PANEL_FORM .fa-angle-up:before,
 .typo3-editPanel .fa-angle-up:before {
-  content: "\f106";
+       content: "\f106";
 }
 #TSFE_ADMIN_PANEL_FORM .fa-angle-down:before,
 .typo3-editPanel .fa-angle-down:before {
-  content: "\f107";
+       content: "\f107";
 }
 #TSFE_ADMIN_PANEL_FORM .fa-toggle-off:before,
 .typo3-editPanel .fa-toggle-off:before {
-  content: "\f204";
+       content: "\f204";
 }
 #TSFE_ADMIN_PANEL_FORM .fa-toggle-on:before,
 .typo3-editPanel .fa-toggle-on:before {
-  content: "\f205";
+       content: "\f205";
 }
 #TSFE_ADMIN_PANEL_FORM .fa-google-plus-square:before,
 .typo3-editPanel .fa-google-plus-square:before {
-  content: "\f0d4";
+       content: "\f0d4";
 }
 #TSFE_ADMIN_PANEL_FORM .fa-trash:before,
 .typo3-editPanel .fa-trash:before {
-  content: "\f1f8";
+       content: "\f1f8";
 }
 #TSFE_ADMIN_PANEL_FORM .fa-history:before,
 .typo3-editPanel .fa-history:before {
-  content: "\f1da";
+       content: "\f1da";
 }
 #TSFE_ADMIN_PANEL_FORM .fa-list-alt:before,
 .typo3-editPanel .fa-list-alt:before {
-  content: "\f022";
+       content: "\f022";
 }
 #TSFE_ADMIN_PANEL_FORM .fa-plus-square:before,
 .typo3-feedit-element .fa-plus-square:before {
-  content: "\f0fe";
+       content: "\f0fe";
 }
 #TSFE_ADMIN_PANEL_FORM .fa-arrows:before,
 .typo3-editPanel .fa-arrows:before{
-  content: "\f047";
+       content: "\f047";
 }
 #TSFE_ADMIN_PANEL_FORM .fa-exclamation-circle:before {
-    content: "\f06a";
+       content: "\f06a";
 }
 #TSFE_ADMIN_PANEL_FORM .fa-exclamation-triangle:before {
-    content: "\f071";
+       content: "\f071";
 }
 #TSFE_ADMIN_PANEL_FORM .fa-info-circle:before {
-    content: "\f05a";
+       content: "\f05a";
 }
 #TSFE_ADMIN_PANEL_FORM .fa-caret-down:before {
-    content: "\f0d7";
+       content: "\f0d7";
 }
 #TSFE_ADMIN_PANEL_FORM .fa-caret-up:before {
-    content: "\f0d8";
+       content: "\f0d8";
 }
 #TSFE_ADMIN_PANEL_FORM .fa-bolt:before {
        content: "\f0e7";
 
 .typo3-editPanel {
        background: #ccc;
+       padding: 5px 10px;
 }
 
 .typo3-editPanel a {
        overflow: hidden;
 }
 
-.typo3-feedit-element .t3-icon,
-.typo3-feedit-element .fa {
-       color: #000000;
-       margin: 2px 3px;
+.typo3-feedit-element .btn-default.content-link {
+       background-color: #eee;
+       margin: 3px;
 }
 
 .typo3-feedit-element {
-       outline: 3px solid rgba(247, 144, 37, 0.8) !important;
-       outline-offset: 4px;
 }
 
 .typo3-feedit-element-hidden {