[TASK] Streamline Admin Panel 14/52314/9
authorBenjamin Kott <benjamin.kott@wfp2.com>
Sat, 1 Apr 2017 23:14:07 +0000 (01:14 +0200)
committerBenni Mack <benni@typo3.org>
Mon, 3 Apr 2017 04:38:04 +0000 (06:38 +0200)
Resolves: #80639
Releases: master
Change-Id: I81375357f2708c2af89d745013352fd2fda7eb7b
Reviewed-on: https://review.typo3.org/52314
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Frank Naegler <frank.naegler@typo3.org>
Tested-by: Frank Naegler <frank.naegler@typo3.org>
Reviewed-by: Benni Mack <benni@typo3.org>
Tested-by: Benni Mack <benni@typo3.org>
Build/Resources/Public/Sass/adminpanel.scss
Build/Resources/Public/Sass/component/_icon.scss
typo3/sysext/core/Classes/TimeTracker/TimeTracker.php
typo3/sysext/feedit/Classes/FrontendEditPanel.php
typo3/sysext/frontend/Classes/View/AdminPanelView.php
typo3/sysext/frontend/Resources/Public/Css/adminpanel.css
typo3/sysext/frontend/Resources/Public/JavaScript/AdminPanel.js [deleted file]
typo3/sysext/frontend/Tests/Unit/View/AdminPanelViewTest.php

index d02883e..cb1c55b 100644 (file)
@@ -1,3 +1,24 @@
+//
+// Admin panel
+// ===========
+// Contains all needed styles for the Admin Panel.
+//
+
+//
+// Load Variables
+//
+@import "variables/main";
+@import "bootstrap/variables";
+
+//
+// Shared Components
+//
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel,
+.typo3-editPanel-btn,
+.typo3-editPanel-link {
+    @import "component/icon";
+}
+
 /*!
  *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
  * Font Awesome icons are prefixed with #TSFE_ADMIN_PANEL_FORM to prevent issues with
  * CSS from the website that uses Font Awesome too.
  */
-#TSFE_ADMIN_PANEL_FORM .fa:before,
-.frontEndEditIconLinks .fa:before,
-.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);
-}
-
-#TSFE_ADMIN_PANEL_FORM .fa-pencil:before,
-.typo3-feedit-element .fa-pencil:before {
-    content: "\f040";
-}
-
-#TSFE_ADMIN_PANEL_FORM .fa-angle-up:before,
-.typo3-editPanel .fa-angle-up:before {
-    content: "\f106";
-}
-
-#TSFE_ADMIN_PANEL_FORM .fa-angle-down:before,
-.typo3-editPanel .fa-angle-down:before {
-    content: "\f107";
-}
-
-#TSFE_ADMIN_PANEL_FORM .fa-toggle-off:before,
-.typo3-editPanel .fa-toggle-off:before {
-    content: "\f204";
-}
-
-#TSFE_ADMIN_PANEL_FORM .fa-toggle-on:before,
-.typo3-editPanel .fa-toggle-on:before {
-    content: "\f205";
-}
-
-#TSFE_ADMIN_PANEL_FORM .fa-google-plus-square:before,
-.typo3-editPanel .fa-google-plus-square:before {
-    content: "\f0d4";
-}
-
-#TSFE_ADMIN_PANEL_FORM .fa-trash:before,
-.typo3-editPanel .fa-trash:before {
-    content: "\f1f8";
-}
-
-#TSFE_ADMIN_PANEL_FORM .fa-history:before,
-.typo3-editPanel .fa-history:before {
-    content: "\f1da";
-}
-
-#TSFE_ADMIN_PANEL_FORM .fa-list-alt:before,
-.typo3-editPanel .fa-list-alt:before {
-    content: "\f022";
-}
-
-#TSFE_ADMIN_PANEL_FORM .fa-plus-square:before,
-.typo3-feedit-element .fa-plus-square:before {
-    content: "\f0fe";
-}
-
-#TSFE_ADMIN_PANEL_FORM .fa-arrows:before,
-.typo3-editPanel .fa-arrows:before {
-    content: "\f047";
-}
-
-#TSFE_ADMIN_PANEL_FORM .fa-exclamation-circle:before {
-    content: "\f06a";
-}
-
-#TSFE_ADMIN_PANEL_FORM .fa-exclamation-triangle:before {
-    content: "\f071";
-}
-
-#TSFE_ADMIN_PANEL_FORM .fa-info-circle:before {
-    content: "\f05a";
-}
-
-#TSFE_ADMIN_PANEL_FORM .fa-caret-down:before {
-    content: "\f0d7";
-}
-
-#TSFE_ADMIN_PANEL_FORM .fa-caret-up:before {
-    content: "\f0d8";
-}
-
-#TSFE_ADMIN_PANEL_FORM .fa-bolt:before {
-    content: "\f0e7";
-}
-
-/**
- * General Styles
- **/
-
-#TSFE_ADMIN_PANEL_FORM *:before,
-#TSFE_ADMIN_PANEL_FORM *:after {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-}
-
-/**
- * Frontend Editing Styles
- **/
-
+#TSFE_ADMIN_PANEL_FORM,
+.typo3-feedit-element,
 .typo3-editPanel {
-    background: #ccc;
-    padding: 5px 10px;
-}
-
-.typo3-editPanel a {
-    text-decoration: none;
-}
-
-.typo3-editPanel-label {
-    display: inline;
-    margin: 0 10px;
-}
-
-.typo3-editPanel .t3-icon {
-    display: inline-block;
-    position: relative;
-    overflow: hidden;
-}
-
-.typo3-feedit-element .btn-default.content-link {
-    background-color: #eee;
-    margin: 3px;
-}
-
-.typo3-feedit-element-hidden {
-    opacity: 0.2;
-}
-
-/**
- * Admin Panel Styles
- **/
+    .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);
+    }
+
+    .fa-pencil:before {
+        content: "\f040";
+    }
+
+    .fa-angle-up:before {
+        content: "\f106";
+    }
+
+    .fa-angle-down:before {
+        content: "\f107";
+    }
+
+    .fa-toggle-off:before {
+        content: "\f204";
+    }
+
+    .fa-toggle-on:before {
+        content: "\f205";
+    }
+
+    .fa-google-plus-square:before {
+        content: "\f0d4";
+    }
+
+    .fa-trash:before {
+        content: "\f1f8";
+    }
+
+    .fa-history:before {
+        content: "\f1da";
+    }
+
+    .fa-list-alt:before {
+        content: "\f022";
+    }
+
+    .fa-plus-square:before {
+        content: "\f0fe";
+    }
+
+    .fa-arrows:before {
+        content: "\f047";
+    }
+
+    .fa-exclamation-circle:before {
+        content: "\f06a";
+    }
+
+    .fa-exclamation-triangle:before {
+        content: "\f071";
+    }
+
+    .fa-info-circle:before {
+        content: "\f05a";
+    }
+
+    .fa-caret-down:before {
+        content: "\f0d7";
+    }
+
+    .fa-caret-up:before {
+        content: "\f0d8";
+    }
+
+    .fa-bolt:before {
+        content: "\f0e7";
+    }
+}
+
+//
+// Placeholder
+//
+%adminpanelicon {
+    &: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);
+    }
+}
+
+%basestyles {
+    background-color: #fafafa;
+    color: #333;
+    font-family: sans-serif;
+    font-size: 12px;
+    line-height: 1.35em;
 
-#TSFE_ADMIN_PANEL_FORM {
-    display: block;
-    max-width: 50%;
+    a {
+        color: inherit;
+        text-decoration: none;
+    }
 }
 
+//
+// Container
+//
 #TSFE_ADMIN_PANEL_FORM {
-    background-color: #fff;
-    box-shadow: 0 3px 15px #808080;
-    margin: 0;
-    padding: 0;
+    display: block !important;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    max-width: 100%;
+    max-height: 100%;
     z-index: 10002;
-    border-top-right-radius: 4px;
-    border-top-left-radius: 4px;
-}
-
-#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel {
-    border: 1px solid #ccc;
-    border-spacing: 0;
-    border-collapse: separate;
-    border-top-right-radius: 4px;
-    border-top-left-radius: 4px;
-    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;
-    font-family: Verdana, Arial, sans-serif;
-    font-size: 12px;
-    text-decoration: none;
-}
-
-#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 #typo3-adminPanel-header {
-    display: inline-block;
-    width: 100%;
-    background-color: #222;
-    color: white;
-}
-
-#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-header a {
-    color: #fff;
-}
-
-#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-header-title {
-    float: left;
-    padding-top: 11px;
-    padding-left: 15px;
-}
-
-#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-header-buttonWrapper {
-    display: inline-block;
-    float: right;
-    margin-left: 10px;
-}
-
-#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-panel-open .typo3-adminPanel-header-button:before,
-#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-panel-closed .typo3-adminPanel-header-button:before {
-    display: inline-block;
-    float: right;
-    padding: 10px 15px;
-    font-size: 16px;
-    content: "\f106";
-}
-
-#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-panel-closed .typo3-adminPanel-header-button:before {
-    content: "\f107";
-}
-
-#TSFE_ADMIN_PANEL_FORM .updatebutton {
-    text-align: right;
-    background-color: #222;
-    width: 100%;
-}
-
-#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 .typo3-adminPanel-section-title a {
-    display: block;
-    padding-top: 5px;
-    padding-bottom: 5px;
-    line-height: 25px;
-}
-
-#TSFE_ADMIN_PANEL_FORM label {
-    display: inline;
-    line-height: 16px;
-    font-weight: 500;
-}
-
-#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-title a .typo3-adminPanel-label {
-    padding-top: 4px;
-    white-space: nowrap;
-}
-
-#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-title .wrapper:hover {
-    color: #fff;
-    background-color: #7e7e7e;
-}
-
-#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-title .wrapper:hover a {
-    color: #fff;
-}
-
-#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 .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 .typo3-adminPanel-section-title .typo3-adminPanel-section-closed:before {
-    content: "\f0d7";
-}
-
-#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-itemRow .typo3-adminPanel-section-content {
-    padding: 7px 15px;
-    line-height: 16px;
-}
-
-#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-content {
-    padding-right: 11px;
-}
-
-#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-content .toolbar span {
-    padding: 1px;
-}
-
-#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-content label {
-    padding-right: 5px;
-}
-
-#TSFE_ADMIN_PANEL_FORM #typo3-adminPanel-tsLog {
-    border: 1px solid #7e7e7e;
-    border-spacing: 0;
-}
-
-#TSFE_ADMIN_PANEL_FORM .clear-cache-icon:before {
-    position: relative;
-    left: 34px;
-    top: 3px;
-}
-
-#TSFE_ADMIN_PANEL_FORM .btn.clear-cache {
-    margin-left: 15px;
-    padding-left: 25px;
-}
-
-#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table {
-    width: 100%;
-    border-collapse: collapse;
-    border-spacing: 0;
-    border: 1px solid #ccc;
-}
-
-#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table tr {
-    margin: 0;
     padding: 0;
-    vertical-align: inherit;
-    border-color: inherit;
-}
-
-#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table td {
     margin: 0;
-    vertical-align: inherit;
-    border-color: inherit;
-    padding: 0 15px;
-    text-align: left;
-    white-space: nowrap;
-}
 
-#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table th {
-    padding: 10px 10px 10px 15px;
-    border-bottom: 1px solid #aaa;
-    text-align: left;
-    background-color: #ededed;
-}
-
-#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table th span[style] {
-    color: #fff !important;
-}
-
-#TSFE_ADMIN_PANEL_FORM #typo3-adminPanel-tsLog .typo3-adminPanel-logRow-highlight {
-    background-color: #fcd3cf;
-}
-
-#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table-wrapper {
-    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;
-    text-align: left;
-    vertical-align: top;
-}
-
-#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table .line-even {
-    background-color: #dedede;
-}
-
-#TSFE_ADMIN_PANEL_FORM #typo3-adminPanel-tsLog .stackPointer {
-    color: maroon;
-    vertical-align: top;
-}
+    * {
+        box-sizing: border-box;
+    }
 
-/**
- * General Form and Button Styles
- **/
+    *,
+    *:focus,
+    *:hover,
+    *:active {
+        outline: none;
+    }
 
-.t3-icon {
-    display: inline-block;
-    position: relative;
-    vertical-align: middle;
-    text-align: center;
+    *:before,
+    *:after {
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+    }
 }
 
-.btn .t3-icon {
-    margin: 0;
-}
-
-#TSFE_ADMIN_PANEL_FORM input,
-#TSFE_ADMIN_PANEL_FORM select {
-    position: static;
-    padding: 0;
-}
-
-#TSFE_ADMIN_PANEL_FORM input[type="checkbox"] {
-    display: block;
-    float: left;
-    margin-top: 1px;
-    margin-left: 0;
-    margin-right: 5px;
-}
-
-#TSFE_ADMIN_PANEL_FORM input[type="text"],
-#TSFE_ADMIN_PANEL_FORM select {
-    display: block;
-    width: 100%;
-    margin-top: 5px;
-    padding: 6px;
-    box-sizing: border-box;
-}
-
-#TSFE_ADMIN_PANEL_FORM input {
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-    color: inherit;
-    margin: 0;
-}
-
-#TSFE_ADMIN_PANEL_FORM .btn {
-    display: inline-block;
-    margin-bottom: 0;
-    padding: 6px 8px;
-    border: 1px solid transparent;
-    border-radius: 2px;
-    font-weight: normal;
-    font-size: 12px;
-    line-height: 1.5;
-    text-align: center;
-    vertical-align: middle;
-    touch-action: manipulation;
-    cursor: pointer;
-    background-image: none;
-    white-space: nowrap;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-#TSFE_ADMIN_PANEL_FORM .btn:hover {
-    background-color: #c4c4c4;
-}
-
-#TSFE_ADMIN_PANEL_FORM .btn-default {
-    color: #333;
-    background-color: #eee;
-    border-color: #bbb;
-    cursor: pointer;
-}
-
-#TSFE_ADMIN_PANEL_FORM .btn-group {
-    position: relative;
-    display: inline-block;
-    vertical-align: middle;
-}
-
-#TSFE_ADMIN_PANEL_FORM .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
-    border-radius: 0;
-}
-
-#TSFE_ADMIN_PANEL_FORM .btn-group > .btn:first-child {
-    margin-left: 0;
-}
-
-#TSFE_ADMIN_PANEL_FORM input[type="text"] {
-    font-size: 12px;
-    line-height: 1.5;
-    color: #333;
-    background-color: #fefefe;
-    background-image: none;
-    border: 1px solid #bbb;
-    border-radius: 2px;
-    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-    -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-}
-
-#TSFE_ADMIN_PANEL_FORM .treeline-icon {
-    position: relative;
-    display: inline-block;
-    margin-right: 2px;
-    padding: 0;
-    height: 18px;
-    width: 16px;
-    white-space: nowrap;
-    overflow: hidden;
-    vertical-align: middle;
+//
+// Panel
+//
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel {
+    @extend %basestyles;
+
+    border: 1px solid #cacaca;
+    max-height: 100vh;
+    max-width: 100%;
+    min-width: 280px;
+    border-left: 0;
+    border-bottom: 0;
+    border-top-left-radius: 2px;
+    display: flex;
+    flex-direction: column;
+}
+
+//
+// Enabling
+//
+#TSFE_ADMIN_PANEL_FORM {
+    #typo3AdminPanelEnable,
+    #typo3AdminPanelCollapse {
+        display: none;
+    }
+
+    #typo3AdminPanelEnable:checked + #typo3AdminPanelCollapse + .typo3-adminPanel {
+        .typo3-adminPanel-header {
+            .typo3-adminPanel-header-enable-enabled {
+                display: inline;
+            }
+
+            .typo3-adminPanel-header-enable-disabled {
+                display: none;
+            }
+
+            .typo3-adminPanel-header-collapse {
+                display: block;
+            }
+        }
+    }
+
+    #typo3AdminPanelCollapse:checked + .typo3-adminPanel {
+        .typo3-adminPanel-actions,
+        .typo3-adminPanel-body {
+            display: none;
+        }
+
+        .typo3-adminPanel-header {
+            .typo3-adminPanel-header-collapse-enabled {
+                display: inline;
+            }
+
+            .typo3-adminPanel-header-collapse-disabled {
+                display: none;
+            }
+        }
+    }
+}
+
+//
+// Header
+//
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel {
+    .typo3-adminPanel-header {
+        position: relative;
+        background-color: $brand-notice;
+        color: #fafafa;
+        padding: 1em 3em;
+
+        .typo3-adminPanel-header-user:before {
+            content: ':';
+            margin-right: 0.5em;
+        }
+
+        .typo3-adminPanel-header-enable,
+        .typo3-adminPanel-header-collapse {
+            position: absolute;
+            cursor: pointer;
+            top: 50%;
+            left: 0;
+            padding: 1em;
+            transform: translate(0, -50%);
+        }
+
+        .typo3-adminPanel-header-collapse {
+            display: none;
+            left: auto;
+            right: 0;
+        }
+
+        .typo3-adminPanel-header-enable-enabled {
+            display: none;
+            color: $brand-success;
+        }
+
+        .typo3-adminPanel-header-enable-disabled {
+            color: $brand-danger;
+        }
+
+        .typo3-adminPanel-header-collapse-enabled {
+            display: none;
+        }
+    }
+}
+
+//
+// Actions
+//
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel {
+    .typo3-adminPanel-actions {
+        text-align: right;
+        padding: 0 1em 0.75em;
+        background-color: $brand-notice;
+        color: #fafafa;
+    }
 }
 
-#TSFE_ADMIN_PANEL_FORM .treeline-icon:after,
-#TSFE_ADMIN_PANEL_FORM .treeline-icon:before {
-    position: absolute;
-    content: '';
-    left: 50%;
-}
+//
+// Body
+//
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel {
+    .typo3-adminPanel-body {
+        height: 100%;
+        overflow: auto;
 
-#TSFE_ADMIN_PANEL_FORM .treeline-icon:before {
-    top: 0;
-    height: 100%;
-    width: 2px;
-    margin-left: -1px;
-    border-left: 1px dotted #666;
+        > .typo3-adminPanel-section-title:first-child {
+            border-top: none;
+        }
+    }
 }
 
-#TSFE_ADMIN_PANEL_FORM .treeline-icon:after {
-    border-top: 1px dotted #666;
-    height: 2px;
-    width: 100%;
-    top: 50%;
-    margin-top: -1px;
+//
+// Section
+//
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel {
+    .typo3-adminPanel-section-title {
+        position: relative;
+        overflow: hidden;
+        border-top: 1px solid #bbb;
+        background-color: #eee;
+        padding: 0.75em 3em 0.75em 1em;
+
+        &:hover {
+            background-color: #ddd;
+        }
+
+        a {
+            position: relative;
+            display: block;
+            padding: 0.75em 3em 0.75em 1em;
+            margin: -0.75em -3em -0.75em -1em;
+        }
+    }
+
+    .typo3-adminPanel-section-title-identifier {
+        position: absolute;
+        top: 50%;
+        right: 0;
+        padding: 1em;
+        transform: translate(0, -50%);
+
+        @extend %adminpanelicon;
+
+        &:before {
+            content: "\f105";
+        }
+    }
+
+    .typo3-adminPanel-section-open {
+        .typo3-adminPanel-section-title-identifier:before {
+            content: "\f107 ";
+        }
+    }
+
+    .typo3-adminPanel-section-body {
+        padding: 0.75em 1em;
+    }
+}
+
+//
+// Inputs
+//
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel {
+    label {
+        display: block;
+        font-weight: normal;
+        padding: 0;
+        margin: 0;
+        overflow: hidden;
+    }
+
+    input[type=text],
+    select {
+        display: block;
+        width: 100%;
+        padding: 0.5em;
+        border: 1px solid #ccc;
+        margin: 0.5em 0;
+        font-size: inherit;
+
+        &:focus,
+        &:hover {
+            border-color: #aaa;
+        }
+    }
+
+    .typo3-adminPanel-form-group {
+        margin: 1em 0;
+    }
+
+    .typo3-adminPanel-form-group-checkbox,
+    .typo3-adminPanel-form-group-radio {
+        margin: 0.5em 0;
+
+        label {
+            padding-left: 20px;
+        }
+
+        input[type=checkbox],
+        input[type=radio] {
+            float: left;
+            padding: 0;
+            margin: 1px 0 0 -20px;
+        }
+    }
+}
+
+//
+// Table
+//
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel {
+    .typo3-adminPanel-table-overflow {
+        max-width: 100%;
+        margin: 1em 0;
+        overflow-x: auto;
+    }
+
+    .typo3-adminPanel-table {
+        width: 100%;
+        border: 1px solid #ccc;
+        border-collapse: collapse;
+        border-spacing: 0;
+
+        td,
+        th {
+            text-align: left;
+            overflow: hidden;
+            position: relative;
+            vertical-align: top;
+            padding: 0.75em;
+        }
+
+        thead {
+            tr {
+                background-color: rgba(0, 0, 0, 0.15);
+            }
+
+            td,
+            th {
+                font-weight: normal;
+            }
+        }
+
+        tbody {
+            tr:nth-of-type(odd) {
+                background-color: rgba(0, 0, 0, 0.05);
+            }
+        }
+    }
+
+    .typo3-adminPanel-table-cell-content {
+        word-wrap: break-word;
+    }
+
+    .typo3-adminPanel-table-cell-nowrap {
+        white-space: nowrap;
+    }
+
+    .typo3-adminPanel-logRow-highlight {
+        background-color: #fcd3cf;
+    }
+
+    .stackPointer {
+        color: maroon;
+        vertical-align: top;
+    }
+}
+
+//
+// Button
+//
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel {
+    .typo3-adminPanel-btn {
+        display: inline-block;
+        margin-bottom: 0;
+        padding: 6px 8px;
+        border: 1px solid transparent;
+        border-radius: 0;
+        font-weight: normal;
+        line-height: 1.5;
+        text-align: center;
+        vertical-align: middle;
+        touch-action: manipulation;
+        cursor: pointer;
+        white-space: nowrap;
+        user-select: none;
+
+        &:focus,
+        &:hover,
+        &:active {
+            outline: none;
+        }
+    }
+
+    .typo3-adminPanel-btn-default {
+        color: #333;
+        background-color: #eee;
+        border-color: #bbb;
+        cursor: pointer;
+
+        &:hover {
+            background-color: #c4c4c4;
+        }
+    }
+
+    .typo3-adminPanel-btn-dark {
+        color: #fafafa;
+        background-color: #555;
+        border-color: rgba(0, 0, 0, 0.5);
+        cursor: pointer;
+
+        &:hover {
+            background-color: #444;
+        }
+    }
+
+    .typo3-adminPanel-btn-group {
+        position: relative;
+        display: inline-block;
+        vertical-align: middle;
+
+        .typo3-adminPanel-btn + .typo3-adminPanel-btn {
+            margin-left: -1px;
+        }
+    }
+}
+
+//
+// Treeline
+//
+#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel {
+    .treeline-icon {
+        display: inline-block;
+        margin-right: 2px;
+        padding: 0;
+        height: 18px;
+        width: 16px;
+        white-space: nowrap;
+        overflow: hidden;
+        vertical-align: middle;
+    }
+
+    .treeline-icon:after,
+    .treeline-icon:before {
+        position: absolute;
+        content: '';
+        margin-left: 7px;
+    }
+
+    .treeline-icon:before {
+        top: 0;
+        height: 100%;
+        width: 2px;
+        margin-left: 7px;
+        border-left: 1px dotted #666;
+    }
+
+    .treeline-icon:after {
+        border-top: 1px dotted #666;
+        height: 2px;
+        width: 8px;
+        margin-top: 8px;
+    }
+
+    .treeline-icon-jointop:before {
+        top: 50%;
+    }
+
+    .treeline-icon-joinbottom:before {
+        height: 26px;
+        margin-top: -8px;
+    }
+
+    .treeline-icon-line:after {
+        display: none;
+    }
+
+    .treeline-icon-blank {
+        display: none;
+    }
+
+    .treeline-icon-clear:before,
+    .treeline-icon-clear:after {
+        display: none;
+    }
+}
+
+//
+// Frontend Editing Styles
+//
+.typo3-feedit-element {
+    border: 1px solid #cacaca;
+    margin: 1em 0;
 }
 
-#TSFE_ADMIN_PANEL_FORM .treeline-icon-jointop:before {
-    top: 50%;
+.typo3-editPanel {
+    @extend %basestyles;
+
+    display: block !important;
+    border-top: 1px solid #cacaca;
+    padding: 0.5em;
+
+    .typo3-editPanel-label {
+        margin-left: 1.5em;
+        display: inline-block;
+        vertical-align: middle;
+    }
+
+    .typo3-editPanel-btn {
+        display: inline-block !important;
+        margin-bottom: 0;
+        padding: 6px 8px;
+        line-height: 1.5em;
+        border: 1px solid transparent;
+        border-radius: 0;
+        font-weight: normal;
+        text-align: center;
+        vertical-align: middle;
+        touch-action: manipulation;
+        cursor: pointer;
+        white-space: nowrap;
+        user-select: none;
+
+        &:focus,
+        &:hover,
+        &:active {
+            outline: none;
+        }
+    }
+
+    .typo3-editPanel-btn-default {
+        color: #333;
+        background-color: #eee;
+        border-color: #bbb;
+        cursor: pointer;
+
+        &:hover {
+            background-color: #c4c4c4;
+        }
+    }
+
+    .typo3-editPanel-btn-group {
+        position: relative;
+        display: inline-block;
+        vertical-align: middle;
+
+        .typo3-editPanel-btn + .typo3-editPanel-btn {
+            margin-left: -1px;
+        }
+    }
+}
+
+.typo3-editPanel-btn {
+    display: inline-block !important;
 }
 
-#TSFE_ADMIN_PANEL_FORM .treeline-icon-joinbottom:before {
-    top: -50%;
-}
+.typo3-feedit-element-hidden {
+    border-color: darken(#f8ecce, 20%);
 
-#TSFE_ADMIN_PANEL_FORM .treeline-icon-line:after {
-    display: none;
-}
+    .typo3-editPanel {
+        border-top-color: darken(#f8ecce, 20%);
+        background-color: #f8ecce;
 
-#TSFE_ADMIN_PANEL_FORM .treeline-icon-blank {
-    display: none;
-}
+        .typo3-editPanel-btn-default {
+            border-color: darken(#f8ecce, 30%);
+            background-color: darken(#f8ecce, 10%);
 
-#TSFE_ADMIN_PANEL_FORM .treeline-icon-clear:before,
-#TSFE_ADMIN_PANEL_FORM .treeline-icon-clear:after {
-    display: none;
+            &:hover {
+                background-color: darken(#f8ecce, 15%);
+            }
+        }
+    }
 }
index a03d60f..37f3fb4 100644 (file)
@@ -41,8 +41,7 @@ $icon-opacity-disabled: 0.5;
         display: block;
         height: 100%;
         width: 100%;
-
-        @include translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
     }
 
     * {
index 14bf30c..3dcddf5 100644 (file)
@@ -342,10 +342,9 @@ class TimeTracker implements SingletonInterface
         $outputArr[] = $this->fw('Details');
         $out = '';
         foreach ($outputArr as $row) {
-            $out .= '
-                               <th><strong>' . $row . '</strong></th>';
+            $out .= '<th>' . $row . '</th>';
         }
-        $out = '<tr class="typo3-adminPanel-itemRow">' . $out . '</tr>';
+        $out = '<thead><tr>' . $out . '</tr></thead>';
         $flag_tree = $this->printConf['flag_tree'];
         $flag_messages = $this->printConf['flag_messages'];
         $flag_content = $this->printConf['flag_content'];
@@ -357,7 +356,6 @@ class TimeTracker implements SingletonInterface
             } else {
                 $logRowClass = $c % 2 ? 'line-odd' : 'line-even';
             }
-            $logRowClass .= ' typo3-adminPanel-section-content-title';
             $item = '';
             // If first...
             if (!$c) {
@@ -388,7 +386,7 @@ class TimeTracker implements SingletonInterface
             $theLabel = GeneralUtility::fixed_lgd_cs($theLabel, -$keyLgd);
             $theLabel = $data['stackPointer'] ? '<span class="stackPointer">' . $theLabel . '</span>' : $theLabel;
             $keyLabel = $theLabel . $keyLabel;
-            $item .= '<td class="' . $logRowClass . '">' . ($flag_tree ? $data['icons'] : '') . $this->fw($keyLabel) . '</td>';
+            $item .= '<td class="typo3-adminPanel-table-cell-nowrap ' . $logRowClass . '">' . ($flag_tree ? $data['icons'] : '') . $this->fw($keyLabel) . '</td>';
             // Key value:
             $keyValue = $data['value'];
             $item .= '<td class="' . $logRowClass . ' typo3-adminPanel-tsLogTime">' . $this->fw(htmlspecialchars($keyValue)) . '</td>';
@@ -417,16 +415,16 @@ class TimeTracker implements SingletonInterface
                         $data['content'] = str_replace($reg[0][$key], $match, $data['content']);
                     }
                 }
-                $msgArr[] = '<span style="color:#000066;">' . nl2br($data['content']) . '</span>';
+                $msgArr[] = nl2br($data['content']);
             }
             if (!empty($msgArr)) {
                 $msg = implode($msgArr, '<hr />');
             }
-            $item .= '<td valign="top" class="' . $logRowClass . '" style="text-align:left;">' . $this->fw($msg) . '</td>';
-            $out .= '<tr class="typo3-adminPanel-itemRow">' . $item . '</tr>';
+            $item .= '<td class="typo3-adminPanel-table-cell-content">' . $this->fw($msg) . '</td>';
+            $out .= '<tr>' . $item . '</tr>';
             $c++;
         }
-        $out = '<table class="typo3-adminPanel-table typo3-adminPanel-tsLog">' . $out . '</table>';
+        $out = '<div class="typo3-adminPanel-table-overflow"><table class="typo3-adminPanel-table">' . $out . '</table></div>';
         return $out;
     }
 
index 284f3ba..b269820 100644 (file)
@@ -103,36 +103,36 @@ class FrontendEditPanel
             $panel .= $this->backendUser->adminPanel->ext_makeToolBar();
         }
         if (isset($allow['edit'])) {
-            $icon = '<span title="' . $this->backendUser->extGetLL('p_editRecord') . '">' . $this->iconFactory->getIcon('actions-document-open', Icon::SIZE_SMALL)->render() . '</span>';
+            $icon = '<span title="' . $this->backendUser->extGetLL('p_editRecord') . '">' . $this->iconFactory->getIcon('actions-document-open', Icon::SIZE_SMALL)->render('inline') . '</span>';
             $panel .= $this->editPanelLinkWrap($icon, $formName, 'edit', $dataArr['_LOCALIZED_UID'] ? $table . ':' . $dataArr['_LOCALIZED_UID'] : $currentRecord);
         }
         // Hiding in workspaces because implementation is incomplete
         if (isset($allow['move']) && $sortField && $this->backendUser->workspace === 0) {
-            $icon = '<span title="' . $this->backendUser->extGetLL('p_moveUp') . '">' . $this->iconFactory->getIcon('actions-move-up', Icon::SIZE_SMALL)->render() . '</span>';
+            $icon = '<span title="' . $this->backendUser->extGetLL('p_moveUp') . '">' . $this->iconFactory->getIcon('actions-move-up', Icon::SIZE_SMALL)->render('inline') . '</span>';
             $panel .= $this->editPanelLinkWrap($icon, $formName, 'up');
-            $icon = '<span title="' . $this->backendUser->extGetLL('p_moveDown') . '">' . $this->iconFactory->getIcon('actions-move-down', Icon::SIZE_SMALL)->render() . '</span>';
+            $icon = '<span title="' . $this->backendUser->extGetLL('p_moveDown') . '">' . $this->iconFactory->getIcon('actions-move-down', Icon::SIZE_SMALL)->render('inline') . '</span>';
             $panel .= $this->editPanelLinkWrap($icon, $formName, 'down');
         }
         // Hiding in workspaces because implementation is incomplete
         // 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', Icon::SIZE_SMALL)->render();
+                $icon = $this->iconFactory->getIcon('actions-edit-unhide', Icon::SIZE_SMALL)->render('inline');
                 $panel .= $this->editPanelLinkWrap($icon, $formName, 'unhide');
             } else {
-                $icon = $this->iconFactory->getIcon('actions-edit-hide', Icon::SIZE_SMALL)->render();
+                $icon = $this->iconFactory->getIcon('actions-edit-hide', Icon::SIZE_SMALL)->render('inline');
                 $panel .= $this->editPanelLinkWrap($icon, $formName, 'hide', '', $this->backendUser->extGetLL('p_hideConfirm'));
             }
         }
         if (isset($allow['new'])) {
             if ($table === 'pages') {
                 $icon = '<span title="' . $this->backendUser->extGetLL('p_newSubpage') . '">'
-                    . $this->iconFactory->getIcon('actions-page-new', Icon::SIZE_SMALL)->render()
+                    . $this->iconFactory->getIcon('actions-page-new', Icon::SIZE_SMALL)->render('inline')
                     . '</span>';
                 $panel .= $this->editPanelLinkWrap($icon, $formName, 'new', $currentRecord, '');
             } else {
                 $icon = '<span title="' . $this->backendUser->extGetLL('p_newRecordAfter') . '">'
-                    . $this->iconFactory->getIcon('actions-document-new', Icon::SIZE_SMALL)->render()
+                    . $this->iconFactory->getIcon('actions-document-new', Icon::SIZE_SMALL)->render('inline')
                     . '</span>';
                 $panel .= $this->editPanelLinkWrap($icon, $formName, 'new', $currentRecord, '', $newUID);
             }
@@ -141,7 +141,7 @@ class FrontendEditPanel
         // Hiding for localizations because it is unknown what should be the function in that case
         if (isset($allow['delete']) && $this->backendUser->workspace === 0 && !$dataArr['_LOCALIZED_UID']) {
             $icon = '<span title="' . $this->backendUser->extGetLL('p_delete') . '">'
-                . $this->iconFactory->getIcon('actions-edit-delete', Icon::SIZE_SMALL)->render()
+                . $this->iconFactory->getIcon('actions-edit-delete', Icon::SIZE_SMALL)->render('inline')
                 . '</span>';
             $panel .= $this->editPanelLinkWrap($icon, $formName, 'delete', '', $this->backendUser->extGetLL('p_deleteConfirm'));
         }
@@ -155,8 +155,8 @@ class FrontendEditPanel
                                                                ' . $formTag . $hiddenFieldString . '
                                                                        <input type="hidden" name="TSFE_EDIT[cmd]" value="" />
                                                                        <input type="hidden" name="TSFE_EDIT[record]" value="' . $currentRecord . '" />
-                                                                       <div class="typo3-editPanel">'
-                                        . '<div class="btn-group">'
+                                                                       <div class="typo3-editPanel" style="display: none;">'
+                                        . '<div class="typo3-editPanel-btn-group">'
                                         . $panel
                                         . '</div>' .
             ($labelTxt ? '<div class="typo3-editPanel-label">' . sprintf($labelTxt, htmlspecialchars(GeneralUtility::fixed_lgd_cs($dataArr[$labelField], 50))) . '</div>' : '') . '
@@ -213,8 +213,8 @@ class FrontendEditPanel
         // Special content is about to be shown, so the cache must be disabled.
         $this->frontendController->set_no_cache('Display frontend edit icons', true);
         $iconTitle = $this->cObj->stdWrap($conf['iconTitle'], $conf['iconTitle.']);
-        $iconImg = '<span title="' . htmlspecialchars($iconTitle, ENT_COMPAT, 'UTF-8', false) . '" class="frontEndEditIcons" style="' . ($conf['styleAttribute'] ? htmlspecialchars($conf['styleAttribute']) : '') . '">'
-            . $this->iconFactory->getIcon('actions-document-open', Icon::SIZE_SMALL)->render()
+        $iconImg = '<span title="' . htmlspecialchars($iconTitle, ENT_COMPAT, 'UTF-8', false) . '" style="' . ($conf['styleAttribute'] ? htmlspecialchars($conf['styleAttribute']) : '') . '">'
+            . $this->iconFactory->getIcon('actions-document-open', Icon::SIZE_SMALL)->render('inline')
             . '</span>';
         $nV = GeneralUtility::_GP('ADMCMD_view') ? 1 : 0;
 
@@ -280,7 +280,7 @@ class FrontendEditPanel
             } else {
                 $cf1 = ($cf2 = '');
             }
-            $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>';
+            $out = '<a href="#" class="typo3-editPanel-btn typo3-editPanel-btn-default" onclick="' . htmlspecialchars(($cf1 . 'document.' . $formName . '[\'TSFE_EDIT[cmd]\'].value=\'' . $cmd . '\'; document.' . $formName . '.submit();' . $cf2 . ' return false;')) . '">' . $string . '</a>';
         }
         return $out;
     }
@@ -299,7 +299,7 @@ class FrontendEditPanel
         $width = MathUtility::forceIntegerInRange($this->backendUser->getTSConfigVal('options.feedit.popupWidth'), 690, 5000, 690);
         $height = MathUtility::forceIntegerInRange($this->backendUser->getTSConfigVal('options.feedit.popupHeight'), 500, 5000, 500);
         $onclick = 'vHWin=window.open(' . GeneralUtility::quoteJSvalue($url . '&returnUrl=' . rawurlencode(PathUtility::getAbsoluteWebPath(ExtensionManagementUtility::siteRelPath('backend') . 'Resources/Private/Templates/Close.html'))) . ',\'FEquickEditWindow\',\'width=' . $width . ',height=' . $height . ',status=0,menubar=0,scrollbars=1,resizable=1\');vHWin.focus();return false;';
-        return '<a href="#" class="btn btn-default btn-sm ' . htmlspecialchars($additionalClasses) . '" onclick="' . htmlspecialchars($onclick) . '" class="frontEndEditIconLinks">' . $string . '</a>';
+        return '<a href="#" class="typo3-editPanel-btn typo3-editPanel-btn-default frontEndEditIconLinks ' . htmlspecialchars($additionalClasses) . '" onclick="' . htmlspecialchars($onclick) . '" style="display: none;">' . $string . '</a>';
     }
 
     /**
index b649139..7e5b058 100644 (file)
@@ -156,7 +156,18 @@ class AdminPanelView
             if (($input['action']['clearCache'] && $this->isAdminModuleEnabled('cache')) || isset($input['preview_showFluidDebug'])) {
                 $beUser->extPageInTreeInfo = [];
                 $theStartId = (int)$input['cache_clearCacheId'];
-                $this->getTypoScriptFrontendController()->clearPageCacheContent_pidList($beUser->extGetTreeList($theStartId, $this->extGetFeAdminValue('cache', 'clearCacheLevels'), 0, $beUser->getPagePermsClause(1)) . $theStartId);
+                $this->getTypoScriptFrontendController()
+                    ->clearPageCacheContent_pidList(
+                        $beUser->extGetTreeList(
+                            $theStartId,
+                            $this->extGetFeAdminValue(
+                                'cache',
+                                'clearCacheLevels'
+                            ),
+                            0,
+                            $beUser->getPagePermsClause(1)
+                        ) . $theStartId
+                    );
             }
             // Saving
             $beUser->writeUC();
@@ -236,6 +247,32 @@ class AdminPanelView
     }
 
     /**
+     * @param string $key
+     * @param string $content
+     *
+     * @return string
+     */
+    protected function getModule($key, $content)
+    {
+        $output = [];
+
+        if ($this->getBackendUser()->uc['TSFE_adminConfig']['display_top'] && $this->isAdminModuleEnabled($key)) {
+            $output[] = '<div class="typo3-adminPanel-section typo3-adminPanel-section-' . ($this->isAdminModuleOpen($key) ? 'open' : 'closed') . '">';
+            $output[] = '  <div class="typo3-adminPanel-section-title">';
+            $output[] = '    ' . $this->linkSectionHeader($key, $this->extGetLL($key));
+            $output[] = '  </div>';
+            if ($this->isAdminModuleOpen($key)) {
+                $output[] = '<div class="typo3-adminPanel-section-body">';
+                $output[] = '  ' . $content;
+                $output[] = '</div>';
+            }
+            $output[] = '</div>';
+        }
+
+        return implode('', $output);
+    }
+
+    /**
      * Creates and returns the HTML code for the Admin Panel in the TSFE frontend.
      *
      * @throws \UnexpectedValueException
@@ -244,66 +281,88 @@ class AdminPanelView
     public function display()
     {
         $this->getLanguageService()->includeLLFile('EXT:lang/Resources/Private/Language/locallang_tsfe.xlf');
-        $moduleContent = $updateButton = '';
 
-        if ($this->getBackendUser()->uc['TSFE_adminConfig']['display_top']) {
-            if ($this->isAdminModuleEnabled('preview')) {
-                $moduleContent .= $this->getPreviewModule();
-            }
-            if ($this->isAdminModuleEnabled('cache')) {
-                $moduleContent .= $this->getCacheModule();
-            }
-            if ($this->isAdminModuleEnabled('edit')) {
-                $moduleContent .= $this->getEditModule();
-            }
-            if ($this->isAdminModuleEnabled('tsdebug')) {
-                $moduleContent .= $this->getTSDebugModule();
-            }
-            if ($this->isAdminModuleEnabled('info')) {
-                $moduleContent .= $this->getInfoModule();
-            }
-        }
+        $moduleContent = '';
+        $moduleContent .= $this->getModule('preview', $this->getPreviewModule());
+        $moduleContent .= $this->getModule('cache', $this->getCacheModule());
+        $moduleContent .= $this->getModule('edit', $this->getEditModule());
+        $moduleContent .= $this->getModule('tsdebug', $this->getTSDebugModule());
+        $moduleContent .= $this->getModule('info', $this->getInfoModule());
+
         if (is_array($GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['tslib/class.tslib_adminpanel.php']['extendAdminPanel'])) {
             foreach ($GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['tslib/class.tslib_adminpanel.php']['extendAdminPanel'] as $classRef) {
                 $hookObject = GeneralUtility::getUserObj($classRef);
                 if (!$hookObject instanceof AdminPanelViewHookInterface) {
                     throw new \UnexpectedValueException($classRef . ' must implement interface ' . AdminPanelViewHookInterface::class, 1311942539);
                 }
-                $moduleContent .= $hookObject->extendAdminPanel($moduleContent, $this);
+                $content = $hookObject->extendAdminPanel($moduleContent, $this);
+                if ($content) {
+                    $moduleContent .= '<div class="typo3-adminPanel-section typo3-adminPanel-section-open">';
+                    $moduleContent .= '  <div class="typo3-adminPanel-section-body">';
+                    $moduleContent .= '    ' . $content;
+                    $moduleContent .= '  </div>';
+                    $moduleContent .= '</div>';
+                }
             }
         }
-        $row = $this->extGetLL('adminPanelTitle') . ': <span class="typo3-adminPanel-beuser">' . htmlspecialchars($this->getBackendUser()->user['username']) . '</span>';
-        $isVisible = $this->getBackendUser()->uc['TSFE_adminConfig']['display_top'];
-        $cssClassName = 'typo3-adminPanel-panel-' . ($isVisible ? 'open' : 'closed');
-        $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="' . $this->getBackendUser()->uc['TSFE_adminConfig']['display_top'] . '" /></div>' . '</div>';
-        if ($moduleContent && $this->extNeedUpdate) {
-            $updateButton = '<div class="typo3-adminPanel-itemRow updatebutton"><div class="typo3-adminPanel-section-content">
-                                                       <input class="btn btn-default" type="submit" value="' . $this->extGetLL('update') . '" />
-                                       </div></div>';
-        }
-        $query = !GeneralUtility::_GET('id') ? '<input type="hidden" name="id" value="' . $this->getTypoScriptFrontendController()->id . '" />' : '';
 
+        $output = [];
+        $output[] = '<!-- TYPO3 Admin panel start -->';
+        $output[] = '<a id="TSFE_ADMIN_PANEL"></a>';
+        $output[] = '<form id="TSFE_ADMIN_PANEL_FORM" name="TSFE_ADMIN_PANEL_FORM" style="display: none;" 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)">';
+        if (!GeneralUtility::_GET('id')) {
+            $output[] = '<input type="hidden" name="id" value="' . $this->getTypoScriptFrontendController()->id . '" />';
+        }
         // The dummy field is needed for Firefox: to force a page reload on submit
         // which must change the form value with JavaScript (see "onsubmit" attribute of the "form" element")
-        $query .= '<input type="hidden" name="TSFE_ADMIN_PANEL[DUMMY]" value="" />';
+        $output[] = '  <input type="hidden" name="TSFE_ADMIN_PANEL[DUMMY]" value="" />';
         foreach (GeneralUtility::_GET() as $key => $value) {
             if ($key !== 'TSFE_ADMIN_PANEL') {
                 if (is_array($value)) {
-                    $query .= $this->getHiddenFields($key, $value);
+                    $output[] = $this->getHiddenFields($key, $value);
                 } else {
-                    $query .= '<input type="hidden" name="' . htmlspecialchars($key) . '" value="' . htmlspecialchars($value) . '" />';
+                    $output[] = '<input type="hidden" name="' . htmlspecialchars($key) . '" value="' . htmlspecialchars($value) . '" />';
                 }
             }
         }
-        $out = '
-<!--
-       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 . '<div class="typo3-adminPanel">' . $header . $updateButton . $moduleContent . '</div></form>';
+        $output[] = '  <input type="hidden" name="TSFE_ADMIN_PANEL[display_top]" value="0" />';
+        $output[] = '  <input id="typo3AdminPanelEnable" type="checkbox" onchange="document.TSFE_ADMIN_PANEL_FORM.submit();" name="TSFE_ADMIN_PANEL[display_top]" value="1"' . ($this->getBackendUser()->uc['TSFE_adminConfig']['display_top'] ? ' checked="checked"' : '') . '/>';
+        $output[] = '  <input id="typo3AdminPanelCollapse" type="checkbox" value="1" />';
+        $output[] = '  <div class="typo3-adminPanel typo3-adminPanel-state-' . ($this->getBackendUser()->uc['TSFE_adminConfig']['display_top'] ? 'open' : 'closed') . '">';
+        $output[] = '    <div class="typo3-adminPanel-header">';
+        $output[] = '      <span class="typo3-adminPanel-header-title">' . $this->extGetLL('adminPanelTitle') . '</span>';
+        $output[] = '      <span class="typo3-adminPanel-header-user">' . htmlspecialchars($this->getBackendUser()->user['username']) . '</span>';
+        $output[] = '      <label for="typo3AdminPanelEnable" class="typo3-adminPanel-header-enable">';
+        $output[] = '        <span class="typo3-adminPanel-header-enable-enabled">';
+        $output[] = '          ' . $this->iconFactory->getIcon('actions-edit-hide', Icon::SIZE_SMALL)->render('inline');
+        $output[] = '        </span>';
+        $output[] = '        <span class="typo3-adminPanel-header-enable-disabled">';
+        $output[] = '          ' . $this->iconFactory->getIcon('actions-edit-unhide', Icon::SIZE_SMALL)->render('inline');
+        $output[] = '        </span>';
+        $output[] = '      </label>';
+        $output[] = '      <label for="typo3AdminPanelCollapse" class="typo3-adminPanel-header-collapse">';
+        $output[] = '        <span class="typo3-adminPanel-header-collapse-enabled">';
+        $output[] = '          ' . $this->iconFactory->getIcon('actions-view-list-collapse', Icon::SIZE_SMALL)->render('inline');
+        $output[] = '        </span>';
+        $output[] = '        <span class="typo3-adminPanel-header-collapse-disabled">';
+        $output[] = '          ' . $this->iconFactory->getIcon('actions-view-list-expand', Icon::SIZE_SMALL)->render('inline');
+        $output[] = '        </span>';
+        $output[] = '      </label>';
+        $output[] = '    </div>';
+        if ($moduleContent && $this->extNeedUpdate) {
+            $output[] = '<div class="typo3-adminPanel-actions">';
+            $output[] = '  <input class="typo3-adminPanel-btn typo3-adminPanel-btn-dark" type="submit" value="' . $this->extGetLL('update') . '" />';
+            $output[] = '</div>';
+        }
+        $output[] = '    <div class="typo3-adminPanel-body">';
+        $output[] = '      ' . $moduleContent;
+        $output[] = '    </div>';
+        $output[] = '  </div>';
+        $output[] = '</form>';
         if ($this->getBackendUser()->uc['TSFE_adminConfig']['display_top']) {
-            $out .= '<script type="text/javascript" src="' . htmlspecialchars($this->getTypoScriptFrontendController()->absRefPrefix) . ExtensionManagementUtility::siteRelPath('backend') . 'Resources/Public/JavaScript/jsfunc.evalfield.js"></script>';
-            $out .= '<script type="text/javascript">/*<![CDATA[*/' . GeneralUtility::minifyJavaScript('
+            $frontendPathExtBackend = htmlspecialchars($this->getTypoScriptFrontendController()->absRefPrefix) . ExtensionManagementUtility::siteRelPath('backend');
+            $output[] = '<script type="text/javascript" src="' . $frontendPathExtBackend . 'Resources/Public/JavaScript/jsfunc.evalfield.js"></script>';
+            $output[] = '<script type="text/javascript">/*<![CDATA[*/' . GeneralUtility::minifyJavaScript('
                                var evalFunc = new evalFunc();
                                        // TSFEtypo3FormFieldSet()
                                function TSFEtypo3FormFieldSet(theField, evallist, is_in, checkbox, checkboxValue) {    //
@@ -329,19 +388,15 @@ class AdminPanelView
                                                document.TSFE_ADMIN_PANEL_FORM[theField].value = evalFunc.evalObjValue(theFObj, document.TSFE_ADMIN_PANEL_FORM[theField+"_hr"].value);
                                        }
                                        TSFEtypo3FormFieldSet(theField, evallist, is_in, checkbox, checkboxValue);
-                               }') . '/*]]>*/</script><script language="javascript" type="text/javascript">' . $this->extJSCODE . '</script>';
-        }
-        $cssPath = htmlspecialchars($this->getTypoScriptFrontendController()->absRefPrefix . ExtensionManagementUtility::siteRelPath('frontend')) . 'Resources/Public/Css/adminpanel.css';
-        $out .= '<script src="' . GeneralUtility::locationHeaderUrl(ExtensionManagementUtility::siteRelPath('frontend') . 'Resources/Public/JavaScript/AdminPanel.js') . '" type="text/javascript"></script><script type="text/javascript">/*<![CDATA[*/' . 'typo3AdminPanel = new TYPO3AdminPanel();typo3AdminPanel.init("typo3-adminPanel-header", "TSFE_ADMIN_PANEL_FORM");' . '/*]]>*/</script>
-<link type="text/css" rel="stylesheet" href="' . $cssPath . '" media="all" />';
-        $out .= $this->getAdminPanelHeaderData();
-        $out .='
-<!--
-       TYPO3 admin panel end
--->
-';
+                               }') . '/*]]>*/</script>';
+            $output[] = '<script language="javascript" type="text/javascript">' . $this->extJSCODE . '</script>';
+        }
+        $frontendPathExtFrontend = htmlspecialchars($this->getTypoScriptFrontendController()->absRefPrefix) . ExtensionManagementUtility::siteRelPath('frontend');
+        $output[] = '<link type="text/css" rel="stylesheet" href="' . $frontendPathExtFrontend . 'Resources/Public/Css/adminpanel.css" media="all" />';
+        $output[] = $this->getAdminPanelHeaderData();
+        $output[] = '<!-- TYPO3 admin panel end -->';
 
-        return $out;
+        return implode('', $output);
     }
 
     /**
@@ -377,51 +432,85 @@ class AdminPanelView
      */
     protected function getPreviewModule()
     {
-        $out = $this->extGetHead('preview');
+        $output = [];
         if ($this->getBackendUser()->uc['TSFE_adminConfig']['display_preview']) {
             $this->extNeedUpdate = true;
-            $out .= $this->extGetItem('preview_showHiddenPages', '', '<input type="hidden" name="TSFE_ADMIN_PANEL[preview_showHiddenPages]" value="0" /><input type="checkbox" id="preview_showHiddenPages" name="TSFE_ADMIN_PANEL[preview_showHiddenPages]" value="1"' . ($this->getBackendUser()->uc['TSFE_adminConfig']['preview_showHiddenPages'] ? ' checked="checked"' : '') . ' />');
-            $out .= $this->extGetItem('preview_showHiddenRecords', '', '<input type="hidden" name="TSFE_ADMIN_PANEL[preview_showHiddenRecords]" value="0" /><input type="checkbox" id="preview_showHiddenRecords" name="TSFE_ADMIN_PANEL[preview_showHiddenRecords]" value="1"' . ($this->getBackendUser()->uc['TSFE_adminConfig']['preview_showHiddenRecords'] ? ' checked="checked"' : '') . ' />');
-            $out .= $this->extGetItem('preview_showFluidDebug', '', '<input type="hidden" name="TSFE_ADMIN_PANEL[preview_showFluidDebug]" value="0" /><input type="checkbox" id="preview_showFluidDebug" name="TSFE_ADMIN_PANEL[preview_showFluidDebug]" value="1"' . (!empty($this->getBackendUser()->uc['TSFE_adminConfig']['preview_showFluidDebug']) ? ' checked="checked"' : '') . ' />');
+
+            $output[] = '<div class="typo3-adminPanel-form-group">';
+            $output[] = '  <div class="typo3-adminPanel-form-group-checkbox">';
+            $output[] = '    <input type="hidden" name="TSFE_ADMIN_PANEL[preview_showHiddenPages]" value="0" />';
+            $output[] = '    <label for="' . htmlspecialchars('preview_showHiddenPages') . '">';
+            $output[] = '      <input type="checkbox" id="preview_showHiddenPages" name="TSFE_ADMIN_PANEL[preview_showHiddenPages]" value="1"' . ($this->getBackendUser()->uc['TSFE_adminConfig']['preview_showHiddenPages'] ? ' checked="checked"' : '') . ' />';
+            $output[] = '      ' . $this->extGetLL('preview_showHiddenPages');
+            $output[] = '    </label>';
+            $output[] = '  </div>';
+            $output[] = '  <div class="typo3-adminPanel-form-group-checkbox">';
+            $output[] = '    <input type="hidden" name="TSFE_ADMIN_PANEL[preview_showHiddenRecords]" value="0" />';
+            $output[] = '    <label for="' . htmlspecialchars('preview_showHiddenRecords') . '">';
+            $output[] = '      <input type="checkbox" id="preview_showHiddenRecords" name="TSFE_ADMIN_PANEL[preview_showHiddenRecords]" value="1"' . ($this->getBackendUser()->uc['TSFE_adminConfig']['preview_showHiddenRecords'] ? ' checked="checked"' : '') . ' />';
+            $output[] = '      ' . $this->extGetLL('preview_showHiddenRecords');
+            $output[] = '    </label>';
+            $output[] = '  </div>';
+            $output[] = '  <div class="typo3-adminPanel-form-group-checkbox">';
+            $output[] = '    <input type="hidden" name="TSFE_ADMIN_PANEL[preview_showFluidDebug]" value="0" />';
+            $output[] = '    <label for="' . htmlspecialchars('preview_showFluidDebug') . '">';
+            $output[] = '      <input type="checkbox" id="preview_showFluidDebug" name="TSFE_ADMIN_PANEL[preview_showFluidDebug]" value="1"' . ($this->getBackendUser()->uc['TSFE_adminConfig']['preview_showFluidDebug'] ? ' checked="checked"' : '') . ' />';
+            $output[] = '      ' . $this->extGetLL('preview_showFluidDebug');
+            $output[] = '    </label>';
+            $output[] = '  </div>';
+            $output[] = '</div>';
 
             // Simulate date
-            $out .= $this->extGetItem('preview_simulateDate', '<input type="text" id="preview_simulateDate" name="TSFE_ADMIN_PANEL[preview_simulateDate]_hr" onchange="TSFEtypo3FormFieldGet(\'TSFE_ADMIN_PANEL[preview_simulateDate]\', \'datetime\', \'\', 1,0);" /><input type="hidden" name="TSFE_ADMIN_PANEL[preview_simulateDate]" value="' . $this->getBackendUser()->uc['TSFE_adminConfig']['preview_simulateDate'] . '" />');
+            $output[] = '<div class="typo3-adminPanel-form-group">';
+            $output[] = '  <input type="hidden" name="TSFE_ADMIN_PANEL[preview_simulateDate]" value="' . $this->getBackendUser()->uc['TSFE_adminConfig']['preview_simulateDate'] . '" />';
+            $output[] = '  <label for="' . htmlspecialchars('preview_simulateDate') . '">';
+            $output[] = '    ' . $this->extGetLL('preview_simulateDate');
+            $output[] = '  </label>';
+            $output[] = '  <input type="text" id="preview_simulateDate" name="TSFE_ADMIN_PANEL[preview_simulateDate]_hr" onchange="TSFEtypo3FormFieldGet(\'TSFE_ADMIN_PANEL[preview_simulateDate]\', \'datetime\', \'\', 1,0);" />';
+            $output[] = '</div>';
             $this->extJSCODE .= 'TSFEtypo3FormFieldSet("TSFE_ADMIN_PANEL[preview_simulateDate]", "datetime", "", 0, 0);';
-            // Simulate fe_user:
-
-            $options = '';
 
+            // Frontend Usergroups
             $queryBuilder = GeneralUtility::makeInstance(ConnectionPool::class)
                 ->getQueryBuilderForTable('fe_groups');
             $queryBuilder->getRestrictions()
                 ->removeAll()
                 ->add(GeneralUtility::makeInstance(DeletedRestriction::class));
-
-            $result = $queryBuilder->select('fe_groups.uid', 'fe_groups.title')
+            $optionCount = $queryBuilder->count('fe_groups.uid')
                ->from('fe_groups')
                ->from('pages')
                ->where(
                    $queryBuilder->expr()->eq('pages.uid', $queryBuilder->quoteIdentifier('fe_groups.pid')),
                    $this->getBackendUser()->getPagePermsClause(1)
                )
-               ->orderBy('fe_groups.title')
-               ->execute();
-
-            while ($row = $result->fetch()) {
-                $options .= '<option value="' . $row['uid'] . '"'
-                    . ($this->getBackendUser()->uc['TSFE_adminConfig']['preview_simulateUserGroup'] == $row['uid'] ? ' selected="selected"' : '')
-                    . '>' . htmlspecialchars(($row['title'] . ' [' . $row['uid'] . ']')) . '</option>';
-            }
-            if ($options) {
-                $options = '<option value="0">&nbsp;</option>' . $options;
-                $out .= $this->extGetItem(
-                    'preview_simulateUserGroup',
-                    '<select id="preview_simulateUserGroup" name="TSFE_ADMIN_PANEL[preview_simulateUserGroup]">'
-                        . $options . '</select>'
-                );
+               ->execute()
+               ->fetchColumn(0);
+            if ($optionCount > 0) {
+                $result = $queryBuilder->select('fe_groups.uid', 'fe_groups.title')
+                    ->from('fe_groups')
+                    ->from('pages')
+                    ->where(
+                        $queryBuilder->expr()->eq('pages.uid', $queryBuilder->quoteIdentifier('fe_groups.pid')),
+                        $this->getBackendUser()->getPagePermsClause(1)
+                    )
+                    ->orderBy('fe_groups.title')
+                    ->execute();
+                $output[] = '<div class="typo3-adminPanel-form-group">';
+                $output[] = '  <label for="' . htmlspecialchars('preview_simulateUserGroup') . '">';
+                $output[] = '    ' . $this->extGetLL('preview_simulateUserGroup');
+                $output[] = '  </label>';
+                $output[] = '  <select id="preview_simulateUserGroup" name="TSFE_ADMIN_PANEL[preview_simulateUserGroup]">';
+                $output[] = '    <option value="0">&nbsp;</option>';
+                while ($row = $result->fetch()) {
+                    $output[] = '<option value="' . $row['uid'] . '" ' . ($this->getBackendUser()->uc['TSFE_adminConfig']['preview_simulateUserGroup'] == $row['uid'] ? ' selected="selected"' : '') . '>';
+                    $output[] = htmlspecialchars(($row['title'] . ' [' . $row['uid'] . ']'));
+                    $output[] = '</option>';
+                }
+                $output[] = '  </select>';
+                $output[] = '</div>';
             }
         }
-        return $out;
+        return implode('', $output);
     }
 
     /**
@@ -432,33 +521,86 @@ class AdminPanelView
      */
     protected function getCacheModule()
     {
-        $out = $this->extGetHead('cache');
+        $output = [];
         $beUser = $this->getBackendUser();
         if ($beUser->uc['TSFE_adminConfig']['display_cache']) {
             $this->extNeedUpdate = true;
-            $out .= $this->extGetItem('cache_noCache', '', '<input type="hidden" name="TSFE_ADMIN_PANEL[cache_noCache]" value="0" /><input id="cache_noCache" type="checkbox" name="TSFE_ADMIN_PANEL[cache_noCache]" value="1"' . ($beUser->uc['TSFE_adminConfig']['cache_noCache'] ? ' checked="checked"' : '') . ' />');
+
+            $output[] = '<div class="typo3-adminPanel-form-group">';
+            $output[] = '  <div class="typo3-adminPanel-form-group-checkbox">';
+            $output[] = '    <input type="hidden" name="TSFE_ADMIN_PANEL[cache_noCache]" value="0" />';
+            $output[] = '    <label for="' . htmlspecialchars('cache_noCache') . '">';
+            $output[] = '      <input type="checkbox" id="cache_noCache" name="TSFE_ADMIN_PANEL[cache_noCache]" value="1"' . ($this->getBackendUser()->uc['TSFE_adminConfig']['cache_noCache'] ? ' checked="checked"' : '') . ' />';
+            $output[] = '      ' . $this->extGetLL('cache_noCache');
+            $output[] = '    </label>';
+            $output[] = '  </div>';
+            $output[] = '</div>';
+
             $levels = $beUser->uc['TSFE_adminConfig']['cache_clearCacheLevels'];
-            $options = '';
-            $options .= '<option value="0"' . ($levels == 0 ? ' selected="selected"' : '') . '>' . $this->extGetLL('div_Levels_0') . '</option>';
-            $options .= '<option value="1"' . ($levels == 1 ? ' selected="selected"' : '') . '>' . $this->extGetLL('div_Levels_1') . '</option>';
-            $options .= '<option value="2"' . ($levels == 2 ? ' selected="selected"' : '') . '>' . $this->extGetLL('div_Levels_2') . '</option>';
-            $out .= $this->extGetItem('cache_clearLevels', '<select id="cache_clearLevels" name="TSFE_ADMIN_PANEL[cache_clearCacheLevels]">' . $options . '</select>' . '<input type="hidden" name="TSFE_ADMIN_PANEL[cache_clearCacheId]" value="' . $GLOBALS['TSFE']->id . '" /> <input class="btn btn-default" type="submit" value="' . $this->extGetLL('update') . '" />');
+            $output[] = '<div class="typo3-adminPanel-form-group">';
+            $output[] = '  <label for="' . htmlspecialchars('cache_clearCacheLevels') . '">';
+            $output[] = '    ' . $this->extGetLL('cache_clearLevels');
+            $output[] = '  </label>';
+            $output[] = '  <select id="cache_clearCacheLevels" name="TSFE_ADMIN_PANEL[cache_clearCacheLevels]">';
+            $output[] = '    <option value="0"' . ($levels == 0 ? ' selected="selected"' : '') . '>';
+            $output[] = '      ' . $this->extGetLL('div_Levels_0');
+            $output[] = '    </option>';
+            $output[] = '    <option value="1"' . ($levels == 1 ? ' selected="selected"' : '') . '>';
+            $output[] = '      ' . $this->extGetLL('div_Levels_1');
+            $output[] = '    </option>';
+            $output[] = '    <option value="2"' . ($levels == 2 ? ' selected="selected"' : '') . '>';
+            $output[] = '      ' . $this->extGetLL('div_Levels_2');
+            $output[] = '    </option>';
+            $output[] = '  </select>';
+            $output[] = '</div>';
+
+            $output[] = '<div class="typo3-adminPanel-form-group">';
+            $output[] = '  <input type="hidden" name="TSFE_ADMIN_PANEL[cache_clearCacheId]" value="' . $GLOBALS['TSFE']->id . '" />';
+            $output[] = '  <input class="typo3-adminPanel-btn typo3-adminPanel-btn-default" type="submit" value="' . $this->extGetLL('update') . '" />';
+            $output[] = '</div>';
+
             // Generating tree:
             $depth = (int)$this->extGetFeAdminValue('cache', 'clearCacheLevels');
             $outTable = '';
             $tsfe = $this->getTypoScriptFrontendController();
             $beUser->extPageInTreeInfo = [];
-            $beUser->extPageInTreeInfo[] = [$tsfe->page['uid'], htmlspecialchars($tsfe->page['title']), $depth + 1];
-            $beUser->extGetTreeList($tsfe->id, $depth, 0, $beUser->getPagePermsClause(1));
+            $beUser->extPageInTreeInfo[] = [
+                $tsfe->page['uid'],
+                htmlspecialchars($tsfe->page['title']),
+                $depth + 1
+            ];
+            $beUser->extGetTreeList(
+                $tsfe->id,
+                $depth,
+                0,
+                $beUser->getPagePermsClause(1)
+            );
+            $output[] = '<div class="typo3-adminPanel-table-overflow">';
+            $output[] = '<table class="typo3-adminPanel-table">';
+            $output[] = '  <thead>';
+            $output[] = '    <tr>';
+            $output[] = '      <th colspan="2">' . $this->extGetLL('cache_cacheEntries') . '</th>';
+            $output[] = '    </tr>';
+            $output[] = '  </thead>';
+            $output[] = '  <tbody>';
             foreach ($beUser->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>' . $this->iconFactory->getIcon('apps-pagetree-page-default', Icon::SIZE_SMALL)->render() . htmlspecialchars($row[1]) . '</td><td>' . $beUser->extGetNumberOfCachedPages($row[0]) . '</td></tr>';
+                $output[] = '<tr>';
+                $output[] = '  <td>';
+                $output[] = '    <span style="width: ' . ($depth + 1 - $row[2]) * 5 . 'px; height: 1px; display: inline-block;"></span>';
+                $output[] = '    ' . $this->iconFactory->getIcon('apps-pagetree-page-default', Icon::SIZE_SMALL)->render() . htmlspecialchars($row[1]);
+                $output[] = '  </td>';
+                $output[] = '  <td>' . $beUser->extGetNumberOfCachedPages($row[0]) . '</td>';
+                $output[] = '</tr>';
             }
-            $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') . '" />';
+            $output[] = '  <tbody>';
+            $output[] = '</table>';
+            $output[] = '</div>';
 
-            $out .= $this->extGetItem('', $outTable, '', 'typo3-adminPanel-tableRow', 'typo3-adminPanel-table-wrapper');
+            $output[] = '<div class="typo3-adminPanel-form-group">';
+            $output[] = '  <input class="typo3-adminPanel-btn typo3-adminPanel-btn-default" type="submit" name="TSFE_ADMIN_PANEL[action][clearCache]" value="' . $this->extGetLL('cache_doit') . '" />';
+            $output[] = '</div>';
         }
-        return $out;
+        return implode('', $output);
     }
 
     /**
@@ -469,37 +611,58 @@ class AdminPanelView
      */
     protected function getEditModule()
     {
-        $out = $this->extGetHead('edit');
+        $output = [];
         if ($this->getBackendUser()->uc['TSFE_adminConfig']['display_edit']) {
+            $this->extNeedUpdate = true;
+
             // If another page module was specified, replace the default Page module with the new one
             $newPageModule = trim($this->getBackendUser()->getTSConfigVal('options.overridePageModule'));
             $pageModule = BackendUtility::isModuleSetInTBE_MODULES($newPageModule) ? $newPageModule : 'web_layout';
-            $this->extNeedUpdate = true;
+
             if ($this->extFeEditLoaded) {
-                $out .= $this->extGetItem('edit_displayFieldIcons', '',
-                    '<input type="hidden" name="TSFE_ADMIN_PANEL[edit_displayFieldIcons]" value="0" /><input type="checkbox" id="edit_displayFieldIcons" name="TSFE_ADMIN_PANEL[edit_displayFieldIcons]" value="1"' . ($this->getBackendUser()->uc['TSFE_adminConfig']['edit_displayFieldIcons'] ? ' checked="checked"' : '') . ' />');
-                $out .= $this->extGetItem('edit_displayIcons', '',
-                    '<input type="hidden" name="TSFE_ADMIN_PANEL[edit_displayIcons]" value="0" /><input type="checkbox" id="edit_displayIcons" name="TSFE_ADMIN_PANEL[edit_displayIcons]" value="1"' . ($this->getBackendUser()->uc['TSFE_adminConfig']['edit_displayIcons'] ? ' checked="checked"' : '') . ' />');
+                $output[] = '<div class="typo3-adminPanel-form-group">';
+                $output[] = '  <div class="typo3-adminPanel-form-group-checkbox">';
+                $output[] = '    <input type="hidden" name="TSFE_ADMIN_PANEL[edit_displayFieldIcons]" value="0" />';
+                $output[] = '    <label for="' . htmlspecialchars('edit_displayFieldIcons') . '">';
+                $output[] = '      <input type="checkbox" id="edit_displayFieldIcons" name="TSFE_ADMIN_PANEL[edit_displayFieldIcons]" value="1"' . ($this->getBackendUser()->uc['TSFE_adminConfig']['edit_displayFieldIcons'] ? ' checked="checked"' : '') . ' />';
+                $output[] = '      ' . $this->extGetLL('edit_displayFieldIcons');
+                $output[] = '    </label>';
+                $output[] = '  </div>';
+                $output[] = '  <div class="typo3-adminPanel-form-group-checkbox">';
+                $output[] = '    <input type="hidden" name="TSFE_ADMIN_PANEL[edit_displayIcons]" value="0" />';
+                $output[] = '    <label for="' . htmlspecialchars('edit_displayIcons') . '">';
+                $output[] = '      <input type="checkbox" id="edit_displayIcons" name="TSFE_ADMIN_PANEL[edit_displayIcons]" value="1"' . ($this->getBackendUser()->uc['TSFE_adminConfig']['edit_displayIcons'] ? ' checked="checked"' : '') . ' />';
+                $output[] = '      ' . $this->extGetLL('edit_displayIcons');
+                $output[] = '    </label>';
+                $output[] = '  </div>';
+                $output[] = '</div>';
             }
-            $out .= $this->extGetItem('', $this->ext_makeToolBar());
+
+            $output[] = $this->ext_makeToolBar();
+
             if (!GeneralUtility::_GP('ADMCMD_view')) {
-                $out .= $this->extGetItem('', '<a class="btn btn-default" href="#" onclick="' . htmlspecialchars(('
-                                               if (parent.opener && parent.opener.top && parent.opener.top.TS) {
-                                                       parent.opener.top.fsMod.recentIds["web"]=' . (int)$this->getTypoScriptFrontendController()->page['uid'] . ';
-                                                       if (parent.opener.top && parent.opener.top.nav_frame && parent.opener.top.nav_frame.refresh_nav) {
-                                                               parent.opener.top.nav_frame.refresh_nav();
-                                                       }
-                                                       parent.opener.top.goToModule("' . $pageModule . '");
-                                                       parent.opener.top.focus();
-                                               } else {
-                                                       vHWin=window.open(' . GeneralUtility::quoteJSvalue(BackendUtility::getBackendScript()) . ',\'' . md5('Typo3Backend-' . $GLOBALS['TYPO3_CONF_VARS']['SYS']['sitename']) . '\');
-                                                       vHWin.focus();
-                                               }
-                                               return false;
-                                               ')) . '">' . $this->extGetLL('edit_openAB') . '</a>');
+                $onClick = '
+                    if (parent.opener && parent.opener.top && parent.opener.top.TS) {
+                        parent.opener.top.fsMod.recentIds["web"]=' . (int)$this->getTypoScriptFrontendController()->page['uid'] . ';
+                        if (parent.opener.top && parent.opener.top.nav_frame && parent.opener.top.nav_frame.refresh_nav) {
+                            parent.opener.top.nav_frame.refresh_nav();
+                        }
+                        parent.opener.top.goToModule("' . $pageModule . '");
+                        parent.opener.top.focus();
+                    } else {
+                        vHWin=window.open(' . GeneralUtility::quoteJSvalue(BackendUtility::getBackendScript()) . ',\'' . md5('Typo3Backend-' . $GLOBALS['TYPO3_CONF_VARS']['SYS']['sitename']) . '\');
+                        vHWin.focus();
+                    }
+                    return false;
+                ';
+                $output[] = '<div class="typo3-adminPanel-form-group">';
+                $output[] = '  <a class="typo3-adminPanel-btn typo3-adminPanel-btn-default" href="#" onclick="' . htmlspecialchars($onClick) . '">';
+                $output[] = '    ' . $this->extGetLL('edit_openAB');
+                $output[] = '  </a>';
+                $output[] = '</div>';
             }
         }
-        return $out;
+        return implode('', $output);
     }
 
     /**
@@ -510,24 +673,57 @@ class AdminPanelView
      */
     protected function getTSDebugModule()
     {
-        $out = $this->extGetHead('tsdebug');
+        $output = [];
         $beuser = $this->getBackendUser();
         if ($beuser->uc['TSFE_adminConfig']['display_tsdebug']) {
             $this->extNeedUpdate = true;
-            $out .= $this->extGetItem('tsdebug_tree', '', '<input type="hidden" name="TSFE_ADMIN_PANEL[tsdebug_tree]" value="0" /><input type="checkbox" id="tsdebug_tree" name="TSFE_ADMIN_PANEL[tsdebug_tree]" value="1"' . ($beuser->uc['TSFE_adminConfig']['tsdebug_tree'] ? ' checked="checked"' : '') . ' />');
-            $out .= $this->extGetItem('tsdebug_displayTimes', '', '<input type="hidden" name="TSFE_ADMIN_PANEL[tsdebug_displayTimes]" value="0" /><input id="tsdebug_displayTimes" type="checkbox" name="TSFE_ADMIN_PANEL[tsdebug_displayTimes]" value="1"' . ($beuser->uc['TSFE_adminConfig']['tsdebug_displayTimes'] ? ' checked="checked"' : '') . ' />');
-            $out .= $this->extGetItem('tsdebug_displayMessages', '', '<input type="hidden" name="TSFE_ADMIN_PANEL[tsdebug_displayMessages]" value="0" /><input type="checkbox" id="tsdebug_displayMessages" name="TSFE_ADMIN_PANEL[tsdebug_displayMessages]" value="1"' . ($beuser->uc['TSFE_adminConfig']['tsdebug_displayMessages'] ? ' checked="checked"' : '') . ' />');
-            $out .= $this->extGetItem('tsdebug_LR', '', '<input type="hidden" name="TSFE_ADMIN_PANEL[tsdebug_LR]" value="0" /><input type="checkbox" id="tsdebug_LR" name="TSFE_ADMIN_PANEL[tsdebug_LR]" value="1"' . ($beuser->uc['TSFE_adminConfig']['tsdebug_LR'] ? ' checked="checked"' : '') . ' />');
-            $out .= $this->extGetItem('tsdebug_displayContent', '', '<input type="hidden" name="TSFE_ADMIN_PANEL[tsdebug_displayContent]" value="0" /><input type="checkbox" id="tsdebug_displayContent" name="TSFE_ADMIN_PANEL[tsdebug_displayContent]" value="1"' . ($beuser->uc['TSFE_adminConfig']['tsdebug_displayContent'] ? ' checked="checked"' : '') . ' />');
-            $out .= $this->extGetItem('tsdebug_forceTemplateParsing', '', '<input type="hidden" name="TSFE_ADMIN_PANEL[tsdebug_forceTemplateParsing]" value="0" /><input type="checkbox" id="tsdebug_forceTemplateParsing" name="TSFE_ADMIN_PANEL[tsdebug_forceTemplateParsing]" value="1"' . ($beuser->uc['TSFE_adminConfig']['tsdebug_forceTemplateParsing'] ? ' checked="checked"' : '') . ' />');
+
+            $output[] = '<div class="typo3-adminPanel-form-group">';
+            $output[] = '  <div class="typo3-adminPanel-form-group-checkbox">';
+            $output[] = '    <input type="hidden" name="TSFE_ADMIN_PANEL[tsdebug_tree]" value="0" />';
+            $output[] = '    <label for="' . htmlspecialchars('tsdebug_tree') . '">';
+            $output[] = '      <input type="checkbox" id="tsdebug_tree" name="TSFE_ADMIN_PANEL[tsdebug_tree]" value="1"' . ($this->getBackendUser()->uc['TSFE_adminConfig']['tsdebug_tree'] ? ' checked="checked"' : '') . ' />';
+            $output[] = '      ' . $this->extGetLL('tsdebug_tree');
+            $output[] = '    </label>';
+            $output[] = '  </div>';
+            $output[] = '  <div class="typo3-adminPanel-form-group-checkbox">';
+            $output[] = '    <input type="hidden" name="TSFE_ADMIN_PANEL[tsdebug_displayTimes]" value="0" />';
+            $output[] = '    <label for="' . htmlspecialchars('tsdebug_displayTimes') . '">';
+            $output[] = '      <input type="checkbox" id="tsdebug_displayTimes" name="TSFE_ADMIN_PANEL[tsdebug_displayTimes]" value="1"' . ($this->getBackendUser()->uc['TSFE_adminConfig']['tsdebug_displayTimes'] ? ' checked="checked"' : '') . ' />';
+            $output[] = '      ' . $this->extGetLL('tsdebug_displayTimes');
+            $output[] = '    </label>';
+            $output[] = '  </div>';
+            $output[] = '  <div class="typo3-adminPanel-form-group-checkbox">';
+            $output[] = '    <input type="hidden" name="TSFE_ADMIN_PANEL[tsdebug_LR]" value="0" />';
+            $output[] = '    <label for="' . htmlspecialchars('tsdebug_LR') . '">';
+            $output[] = '      <input type="checkbox" id="tsdebug_LR" name="TSFE_ADMIN_PANEL[tsdebug_LR]" value="1"' . ($this->getBackendUser()->uc['TSFE_adminConfig']['tsdebug_LR'] ? ' checked="checked"' : '') . ' />';
+            $output[] = '      ' . $this->extGetLL('tsdebug_LR');
+            $output[] = '    </label>';
+            $output[] = '  </div>';
+            $output[] = '  <div class="typo3-adminPanel-form-group-checkbox">';
+            $output[] = '    <input type="hidden" name="TSFE_ADMIN_PANEL[tsdebug_displayContent]" value="0" />';
+            $output[] = '    <label for="' . htmlspecialchars('tsdebug_displayContent') . '">';
+            $output[] = '      <input type="checkbox" id="tsdebug_displayContent" name="TSFE_ADMIN_PANEL[tsdebug_displayContent]" value="1"' . ($this->getBackendUser()->uc['TSFE_adminConfig']['tsdebug_displayContent'] ? ' checked="checked"' : '') . ' />';
+            $output[] = '      ' . $this->extGetLL('tsdebug_displayContent');
+            $output[] = '    </label>';
+            $output[] = '  </div>';
+            $output[] = '  <div class="typo3-adminPanel-form-group-checkbox">';
+            $output[] = '    <input type="hidden" name="TSFE_ADMIN_PANEL[tsdebug_forceTemplateParsing]" value="0" />';
+            $output[] = '    <label for="' . htmlspecialchars('tsdebug_forceTemplateParsing') . '">';
+            $output[] = '      <input type="checkbox" id="tsdebug_forceTemplateParsing" name="TSFE_ADMIN_PANEL[tsdebug_forceTemplateParsing]" value="1"' . ($this->getBackendUser()->uc['TSFE_adminConfig']['tsdebug_forceTemplateParsing'] ? ' checked="checked"' : '') . ' />';
+            $output[] = '      ' . $this->extGetLL('tsdebug_forceTemplateParsing');
+            $output[] = '    </label>';
+            $output[] = '  </div>';
+            $output[] = '</div>';
+
             $timeTracker = $this->getTimeTracker();
             $timeTracker->printConf['flag_tree'] = $this->extGetFeAdminValue('tsdebug', 'tree');
             $timeTracker->printConf['allTime'] = $this->extGetFeAdminValue('tsdebug', 'displayTimes');
             $timeTracker->printConf['flag_messages'] = $this->extGetFeAdminValue('tsdebug', 'displayMessages');
             $timeTracker->printConf['flag_content'] = $this->extGetFeAdminValue('tsdebug', 'displayContent');
-            $out .= $this->extGetItem('', $timeTracker->printTSlog(), '', 'typo3-adminPanel-tableRow', 'typo3-adminPanel-table-wrapper scroll-table');
+            $output[] = $timeTracker->printTSlog();
         }
-        return $out;
+        return implode('', $output);
     }
 
     /**
@@ -538,8 +734,7 @@ class AdminPanelView
      */
     protected function getInfoModule()
     {
-        $head = $this->extGetHead('info');
-        $out = '';
+        $output = [];
         $tsfe = $this->getTypoScriptFrontendController();
         if ($this->getBackendUser()->uc['TSFE_adminConfig']['display_info']) {
             $tableArr = [];
@@ -575,19 +770,21 @@ class AdminPanelView
             foreach ($tableArr as $key => $arr) {
                 $label = (isset($arr[2]) ? '<strong>' . $arr[0] . '</strong>' : $arr[0]);
                 $value = (string)$arr[1] !== '' ? $arr[1] : '';
-                $table .=
-                    '<tr class="typo3-adminPanel-itemRow ' . ($key % 2 == 0 ? 'line-even' : 'line-odd') . '">
-                                                       <td>' . $label . '</td>
-                                                       <td>' . htmlspecialchars($value) . '</td>
-                                               </tr>';
+                $table .= '
+                    <tr>
+                        <td>' . $label . '</td>
+                        <td>' . htmlspecialchars($value) . '</td>
+                    </tr>';
             }
-            $out .= $table;
-            $out = '<table class="typo3-adminPanel-table">' . $out . '</table>';
-            $out = $this->extGetItem('', $out, '', 'typo3-adminPanel-tableRow', 'typo3-adminPanel-table-wrapper');
+
+            $output[] = '<div class="typo3-adminPanel-table-overflow">';
+            $output[] = '  <table class="typo3-adminPanel-table">';
+            $output[] = '    ' . $table;
+            $output[] = '  </table>';
+            $output[] = '</div>';
         }
 
-        $out = $head . $out;
-        return $out;
+        return implode('', $output);
     }
 
     /*****************************************************
@@ -604,10 +801,7 @@ class AdminPanelView
      */
     public function extGetHead($sectionSuffix)
     {
-        $settingName = 'display_' . $sectionSuffix;
-        $isVisible = $this->getBackendUser()->uc['TSFE_adminConfig'][$settingName];
-        $cssClassName = 'typo3-adminPanel-section-' . ($isVisible ? 'open' : 'closed');
-        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>';
+        return  $this->linkSectionHeader($sectionSuffix, $this->extGetLL($sectionSuffix));
     }
 
     /**
@@ -622,12 +816,15 @@ class AdminPanelView
     public function linkSectionHeader($sectionSuffix, $sectionTitle, $className = '')
     {
         $onclick = 'document.TSFE_ADMIN_PANEL_FORM[' . GeneralUtility::quoteJSvalue('TSFE_ADMIN_PANEL[display_' . $sectionSuffix . ']') . '].value=' . ($this->getBackendUser()->uc['TSFE_adminConfig']['display_' . $sectionSuffix] ? '0' : '1') . ';document.TSFE_ADMIN_PANEL_FORM.submit();return false;';
-        $content = '<div class="typo3-adminPanel-label">
-                                               <a href="javascript:void(0)" onclick="' . htmlspecialchars($onclick) . '"' . ($className ? ' class="fa ' . htmlspecialchars($className) . '"' : '') . '>'
-            . $sectionTitle .
-            '</a>
-               </div>';
-        return $content;
+
+        $output = [];
+        $output[] = '<span class="typo3-adminPanel-section-title-identifier"></span>';
+        $output[] = '<a href="javascript:void(0)" onclick="' . htmlspecialchars($onclick) . '">';
+        $output[] = '  ' . $sectionTitle;
+        $output[] = '</a>';
+        $output[] = '<input type="hidden" name="TSFE_ADMIN_PANEL[display_' . $sectionSuffix . ']" value="' . $this->isAdminModuleOpen($sectionSuffix) . '" />';
+
+        return  implode('', $output);
     }
 
     /**
@@ -645,8 +842,8 @@ class AdminPanelView
     public function extGetItem($title, $content = '', $checkbox = '', $outerDivClass = null, $innerDivClass = null)
     {
         $title = $title ? '<label for="' . htmlspecialchars($title) . '">' . $this->extGetLL($title) . '</label>' : '';
-        $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 . '">';
+        $outerDivClass === null ? $out = '<div>' : $out = '<div class="' . $outerDivClass . '">';
+        $innerDivClass === null ? $out .= '<div>' : $out .= '<div class="' . $innerDivClass . '">';
         $out .= $checkbox . $title . $content . '</div>
                                </div>';
         return $out;
@@ -670,82 +867,147 @@ class AdminPanelView
         $langAllowed = $this->getBackendUser()->checkLanguageAccess($tsfe->sys_language_uid);
         $id = $tsfe->id;
         $returnUrl = GeneralUtility::getIndpEnv('REQUEST_URI');
+        $classes = 'typo3-adminPanel-btn typo3-adminPanel-btn-default';
+        $output = [];
+        $output[] = '<div class="typo3-adminPanel-form-group">';
+        $output[] = '  <div class="typo3-adminPanel-btn-group" role="group">';
+
+        // History
+        $link = BackendUtility::getModuleUrl(
+            'record_history',
+            [
+                'element' => 'pages:' . $id,
+                'returnUrl' => $returnUrl
+            ]
+        );
+        $title = $this->extGetLL('edit_recordHistory');
+        $output[] = '<a class="' . $classes . '" href="' . htmlspecialchars($link) . '#latest" title="' . $title . '">';
+        $output[] = '  ' . $this->iconFactory->getIcon('actions-document-history-open', Icon::SIZE_SMALL)->render();
+        $output[] = '</a>';
 
-        $icon = $this->iconFactory->getIcon('actions-document-history-open', Icon::SIZE_SMALL)->render();
-        $link = BackendUtility::getModuleUrl('record_history', ['element' => 'pages:' . $id, 'returnUrl' => $returnUrl]);
-        $toolBar = '<a class="t3-icon btn btn-default" href="' . htmlspecialchars($link) . '#latest" title="' . $this->extGetLL('edit_recordHistory') . '">' . $icon . '</a>';
+        // New Content
         if ($perms & Permission::CONTENT_EDIT && $langAllowed) {
             $params = '';
             if ($tsfe->sys_language_uid) {
                 $params = '&sys_language_uid=' . $tsfe->sys_language_uid;
             }
-            $icon = $this->iconFactory->getIcon('actions-document-new', Icon::SIZE_SMALL)->render();
             $link = $newContentWizScriptPath . 'id=' . $id . $params . '&returnUrl=' . rawurlencode($returnUrl);
-            $toolBar .= '<a class="t3-icon btn btn-default" href="' . htmlspecialchars($link) . '" title="' . $this->extGetLL('edit_newContentElement') . '"">' . $icon . '</a>';
+            $icon = $this->iconFactory->getIcon('actions-document-new', Icon::SIZE_SMALL)->render();
+            $title = $this->extGetLL('edit_newContentElement');
+            $output[] = '<a class="' . $classes . '" href="' . htmlspecialchars($link) . '" title="' . $title . '">';
+            $output[] = '  ' . $icon;
+            $output[] = '</a>';
         }
+
+        // Move Page
         if ($perms & Permission::PAGE_EDIT) {
+            $link = BackendUtility::getModuleUrl(
+                'move_element',
+                [
+                    'table' => 'pages',
+                    'uid' => $id,
+                    'returnUrl' => $returnUrl
+                ]
+            );
             $icon = $this->iconFactory->getIcon('actions-document-move', Icon::SIZE_SMALL)->render();
-            $link = BackendUtility::getModuleUrl('move_element', ['table' => 'pages', 'uid' => $id, 'returnUrl' => $returnUrl]);
-            $toolBar .= '<a class="t3-icon btn btn-default" href="' . htmlspecialchars($link) . '" title="' . $this->extGetLL('edit_move_page') . '">' . $icon . '</a>';
+            $title = $this->extGetLL('edit_move_page');
+            $output[] = '<a class="' . $classes . '" href="' . htmlspecialchars($link) . '" title="' . $title . '">';
+            $output[] = '  ' . $icon;
+            $output[] = '</a>';
         }
+
+        // New Page
         if ($perms & Permission::PAGE_NEW) {
-            $toolBar .= '<a class="t3-icon btn btn-default" href="' . htmlspecialchars(BackendUtility::getModuleUrl('db_new', ['id' => $id, 'pagesOnly' => 1, 'returnUrl' => $returnUrl])) . '" title="' . $this->extGetLL('edit_newPage') . '">'
-                . $this->iconFactory->getIcon('actions-page-new', Icon::SIZE_SMALL)->render()
-                . '</a>';
+            $link = BackendUtility::getModuleUrl(
+                'db_new',
+                [
+                    'id' => $id,
+                    'pagesOnly' => 1,
+                    'returnUrl' => $returnUrl
+                ]
+            );
+            $icon = $this->iconFactory->getIcon('actions-page-new', Icon::SIZE_SMALL)->render();
+            $title = $this->extGetLL('edit_newPage');
+            $output[] = '<a class="' . $classes . '" href="' . htmlspecialchars($link) . '" title="' . $title . '">';
+            $output[] = '  ' . $icon;
+            $output[] = '</a>';
         }
+
+        // Edit Page
         if ($perms & Permission::PAGE_EDIT) {
+            $link = BackendUtility::getModuleUrl(
+                'record_edit',
+                [
+                    'edit[pages][' . $id . ']' => 'edit',
+                    'noView' => 1,
+                    'returnUrl' => $returnUrl
+                ]
+            );
             $icon = $this->iconFactory->getIcon('actions-page-open', Icon::SIZE_SMALL)->render();
-            $url = BackendUtility::getModuleUrl('record_edit', [
-                'edit[pages][' . $id . ']' => 'edit',
-                'noView' => 1,
-                'returnUrl' => $returnUrl
-            ]);
-            $toolBar .= '<a class="t3-icon btn btn-default" href="' . htmlspecialchars($url) . '">' . $icon . '</a>';
-            if ($tsfe->sys_language_uid && $langAllowed) {
-                $queryBuilder = GeneralUtility::makeInstance(ConnectionPool::class)
-                    ->getQueryBuilderForTable('pages_language_overlay');
-                $queryBuilder->setRestrictions(GeneralUtility::makeInstance(FrontendRestrictionContainer::class));
-                $row = $queryBuilder
-                    ->select('uid', 'pid', 't3ver_state')
-                    ->from('pages_language_overlay')
-                    ->where(
-                        $queryBuilder->expr()->eq(
-                            'pid',
-                            $queryBuilder->createNamedParameter($id, \PDO::PARAM_INT)
-                        ),
-                        $queryBuilder->expr()->eq(
-                            'sys_language_uid',
-                            $queryBuilder->createNamedParameter($tsfe->sys_language_uid, \PDO::PARAM_INT)
-                        )
+            $title = $this->extGetLL('edit_editPageProperties');
+            $output[] = '<a class="' . $classes . '" href="' . htmlspecialchars($link) . '" title="' . $title . '">';
+            $output[] = '  ' . $icon;
+            $output[] = '</a>';
+        }
+
+        // Edit Page Overlay
+        if ($perms & Permission::PAGE_EDIT && $tsfe->sys_language_uid && $langAllowed) {
+            $queryBuilder = GeneralUtility::makeInstance(ConnectionPool::class)
+                ->getQueryBuilderForTable('pages_language_overlay');
+            $queryBuilder->setRestrictions(GeneralUtility::makeInstance(FrontendRestrictionContainer::class));
+            $row = $queryBuilder
+                ->select('uid', 'pid', 't3ver_state')
+                ->from('pages_language_overlay')
+                ->where(
+                    $queryBuilder->expr()->eq(
+                        'pid',
+                        $queryBuilder->createNamedParameter($id, \PDO::PARAM_INT)
+                    ),
+                    $queryBuilder->expr()->eq(
+                        'sys_language_uid',
+                        $queryBuilder->createNamedParameter($tsfe->sys_language_uid, \PDO::PARAM_INT)
                     )
-                    ->setMaxResults(1)
-                    ->execute()
-                    ->fetch();
-
-                $tsfe->sys_page->versionOL('pages_language_overlay', $row);
-                if (is_array($row)) {
-                    $icon = '<span title="' . $this->extGetLL('edit_editPageOverlay', true) . '">'
-                        . $this->iconFactory->getIcon('mimetypes-x-content-page-language-overlay', Icon::SIZE_SMALL)->render() . '</span>';
-                    $url = BackendUtility::getModuleUrl('record_edit', [
+                )
+                ->setMaxResults(1)
+                ->execute()
+                ->fetch();
+            $tsfe->sys_page->versionOL('pages_language_overlay', $row);
+            if (is_array($row)) {
+                $link = BackendUtility::getModuleUrl(
+                    'record_edit',
+                    [
                         'edit[pages_language_overlay][' . $row['uid'] . ']' => 'edit',
                         'noView' => 1,
                         'returnUrl' => $returnUrl
-                    ]);
-                    $toolBar .= '<a href="' . htmlspecialchars($url) . '">' . $icon . '</a>';
-                }
+                    ]
+                );
+                $icon = $this->iconFactory->getIcon('mimetypes-x-content-page-language-overlay', Icon::SIZE_SMALL)->render();
+                $title = $this->extGetLL('edit_editPageOverlay');
+                $output[] = '<a class="' . $classes . '" href="' . htmlspecialchars($link) . '" title="' . $title . '">';
+                $output[] = '  ' . $icon;
+                $output[] = '</a>';
             }
         }
+
+        // Open list view
         if ($this->getBackendUser()->check('modules', 'web_list')) {
-            $urlParams = [
-                'id' => $id,
-                'returnUrl' => GeneralUtility::getIndpEnv('REQUEST_URI')
-            ];
-            $icon = '<span title="' . $this->extGetLL('edit_db_list', false) . '">' . $this->iconFactory->getIcon('actions-system-list-open', Icon::SIZE_SMALL)->render() . '</span>';
-            $toolBar .= '<a class="t3-icon btn btn-default" href="' . htmlspecialchars(BackendUtility::getModuleUrl('web_list', $urlParams)) . '">' . $icon . '</a>';
+            $link = BackendUtility::getModuleUrl(
+                'web_list',
+                [
+                    'id' => $id,
+                    'returnUrl' => GeneralUtility::getIndpEnv('REQUEST_URI')
+                ]
+            );
+            $icon = $this->iconFactory->getIcon('actions-system-list-open', Icon::SIZE_SMALL)->render();
+            $title = $this->extGetLL('edit_db_list');
+            $output[] = '<a class="' . $classes . '" href="' . htmlspecialchars($link) . '" title="' . $title . '">';
+            $output[] = '  ' . $icon;
+            $output[] = '</a>';
         }
 
-        $toolBar = '<div class="toolbar btn-group" role="group">' . $toolBar . '</div>';
-        return $toolBar;
+        $output[] = '  </div>';
+        $output[] = '</div>';
+        return implode('', $output);
     }
 
     /**
index 9c2ff97..e56a418 100644 (file)
@@ -10,4 +10,4 @@
  * 
  * The TYPO3 project - inspiring people to share!
  */
-@font-face{font-family:TYPO3FontAwesome;src:url(../../../../backend/Resources/Public/Fonts/FontAwesome/fontawesome-webfont.eot?v=4.6.3);src:url(../../../../backend/Resources/Public/Fonts/FontAwesome/fontawesome-webfont.eot?#iefix&v=4.6.3) format("embedded-opentype"),url(../../../../backend/Resources/Public/Fonts/FontAwesome/fontawesome-webfont.woff2?v=4.6.3) format("woff2"),url(../../../../backend/Resources/Public/Fonts/FontAwesome/fontawesome-webfont.woff?v=4.6.3) format("woff"),url(../../../../backend/Resources/Public/Fonts/FontAwesome/fontawesome-webfont.ttf?v=4.6.3) format("truetype"),url(../../../../backend/Resources/Public/Fonts/FontAwesome/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular) format("svg");font-weight:400;font-style:normal}#TSFE_ADMIN_PANEL_FORM .fa:before,.frontEndEditIconLinks .fa:before,.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;-webkit-transform:translate(0,0);transform:translate(0,0)}#TSFE_ADMIN_PANEL_FORM .fa-pencil:before,.typo3-feedit-element .fa-pencil:before{content:"\f040"}#TSFE_ADMIN_PANEL_FORM .fa-angle-up:before,.typo3-editPanel .fa-angle-up:before{content:"\f106"}#TSFE_ADMIN_PANEL_FORM .fa-angle-down:before,.typo3-editPanel .fa-angle-down:before{content:"\f107"}#TSFE_ADMIN_PANEL_FORM .fa-toggle-off:before,.typo3-editPanel .fa-toggle-off:before{content:"\f204"}#TSFE_ADMIN_PANEL_FORM .fa-toggle-on:before,.typo3-editPanel .fa-toggle-on:before{content:"\f205"}#TSFE_ADMIN_PANEL_FORM .fa-google-plus-square:before,.typo3-editPanel .fa-google-plus-square:before{content:"\f0d4"}#TSFE_ADMIN_PANEL_FORM .fa-trash:before,.typo3-editPanel .fa-trash:before{content:"\f1f8"}#TSFE_ADMIN_PANEL_FORM .fa-history:before,.typo3-editPanel .fa-history:before{content:"\f1da"}#TSFE_ADMIN_PANEL_FORM .fa-list-alt:before,.typo3-editPanel .fa-list-alt:before{content:"\f022"}#TSFE_ADMIN_PANEL_FORM .fa-plus-square:before,.typo3-feedit-element .fa-plus-square:before{content:"\f0fe"}#TSFE_ADMIN_PANEL_FORM .fa-arrows:before,.typo3-editPanel .fa-arrows:before{content:"\f047"}#TSFE_ADMIN_PANEL_FORM .fa-exclamation-circle:before{content:"\f06a"}#TSFE_ADMIN_PANEL_FORM .fa-exclamation-triangle:before{content:"\f071"}#TSFE_ADMIN_PANEL_FORM .fa-info-circle:before{content:"\f05a"}#TSFE_ADMIN_PANEL_FORM .fa-caret-down:before{content:"\f0d7"}#TSFE_ADMIN_PANEL_FORM .fa-caret-up:before{content:"\f0d8"}#TSFE_ADMIN_PANEL_FORM .fa-bolt:before{content:"\f0e7"}#TSFE_ADMIN_PANEL_FORM :after,#TSFE_ADMIN_PANEL_FORM :before{box-sizing:border-box}.typo3-editPanel{background:#ccc;padding:5px 10px}.typo3-editPanel a{text-decoration:none}.typo3-editPanel-label{display:inline;margin:0 10px}.typo3-editPanel .t3-icon{display:inline-block;position:relative;overflow:hidden}.typo3-feedit-element .btn-default.content-link{background-color:#eee;margin:3px}.typo3-feedit-element-hidden{opacity:.2}#TSFE_ADMIN_PANEL_FORM{display:block;max-width:50%;background-color:#fff;box-shadow:0 3px 15px grey;margin:0;padding:0;z-index:10002;border-top-right-radius:4px;border-top-left-radius:4px}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel{border:1px solid #ccc;border-spacing:0;border-collapse:separate;border-top-right-radius:4px;border-top-left-radius:4px;margin:0;min-width:315px;padding:0;line-height:.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 a,#TSFE_ADMIN_PANEL_FORM table{color:#000;font-family:Verdana,Arial,sans-serif;font-size:12px;text-decoration:none}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-header{line-height:.5}#TSFE_ADMIN_PANEL_FORM #typo3-adminPanel-header{border-top-right-radius:4px;border-top-left-radius:4px;cursor:move;display:inline-block;width:100%;background-color:#222;color:#fff}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-header a{color:#fff}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-header-title{float:left;padding-top:11px;padding-left:15px}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-header-buttonWrapper{display:inline-block;float:right;margin-left:10px}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-panel-closed .typo3-adminPanel-header-button:before,#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-panel-open .typo3-adminPanel-header-button:before{display:inline-block;float:right;padding:10px 15px;font-size:16px;content:"\f106"}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-panel-closed .typo3-adminPanel-header-button:before{content:"\f107"}#TSFE_ADMIN_PANEL_FORM .updatebutton{text-align:right;background-color:#222;width:100%}#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 .typo3-adminPanel-section-title a{display:block;padding-top:5px;padding-bottom:5px;line-height:25px}#TSFE_ADMIN_PANEL_FORM label{display:inline;line-height:16px;font-weight:500}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-title a .typo3-adminPanel-label{padding-top:4px;white-space:nowrap}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-title .wrapper:hover{color:#fff;background-color:#7e7e7e}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-title .wrapper:hover a{color:#fff}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-title .typo3-adminPanel-section-closed,#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-title .typo3-adminPanel-section-open{display:inline-block;width:100%;padding-left:26px}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-title .typo3-adminPanel-section-closed:before,#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-title .typo3-adminPanel-section-open:before{margin-left:-13px;padding-right:13px;font-size:14px;content:"\f0d8"}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-title .typo3-adminPanel-section-closed:before{content:"\f0d7"}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-itemRow .typo3-adminPanel-section-content{padding:7px 15px;line-height:16px}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-content{padding-right:11px}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-content .toolbar span{padding:1px}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-section-content label{padding-right:5px}#TSFE_ADMIN_PANEL_FORM #typo3-adminPanel-tsLog{border:1px solid #7e7e7e;border-spacing:0}#TSFE_ADMIN_PANEL_FORM .clear-cache-icon:before{position:relative;left:34px;top:3px}#TSFE_ADMIN_PANEL_FORM .btn.clear-cache{margin-left:15px;padding-left:25px}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table{width:100%;border-collapse:collapse;border-spacing:0;border:1px solid #ccc}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table tr{margin:0;padding:0;vertical-align:inherit;border-color:inherit}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table td{margin:0;vertical-align:inherit;border-color:inherit;padding:0 15px;text-align:left;white-space:nowrap}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table th{padding:10px 10px 10px 15px;border-bottom:1px solid #aaa;text-align:left;background-color:#ededed}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table th span[style]{color:#fff!important}#TSFE_ADMIN_PANEL_FORM #typo3-adminPanel-tsLog .typo3-adminPanel-logRow-highlight{background-color:#fcd3cf}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table-wrapper{padding:10px 0}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table-wrapper.scroll-table{overflow-x:scroll}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table .line-even,#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table .line-odd{background-color:#f0f0f0;text-align:left;vertical-align:top}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel-table .line-even{background-color:#dedede}#TSFE_ADMIN_PANEL_FORM #typo3-adminPanel-tsLog .stackPointer{color:maroon;vertical-align:top}.t3-icon{display:inline-block;position:relative;vertical-align:middle;text-align:center}.btn .t3-icon{margin:0}#TSFE_ADMIN_PANEL_FORM input,#TSFE_ADMIN_PANEL_FORM select{position:static;padding:0}#TSFE_ADMIN_PANEL_FORM input[type=checkbox]{display:block;float:left;margin-top:1px;margin-left:0;margin-right:5px}#TSFE_ADMIN_PANEL_FORM input[type=text],#TSFE_ADMIN_PANEL_FORM select{display:block;width:100%;margin-top:5px;padding:6px;box-sizing:border-box}#TSFE_ADMIN_PANEL_FORM input{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;margin:0}#TSFE_ADMIN_PANEL_FORM .btn{display:inline-block;margin-bottom:0;padding:6px 8px;border:1px solid transparent;border-radius:2px;font-weight:400;font-size:12px;line-height:1.5;text-align:center;vertical-align:middle;touch-action:manipulation;cursor:pointer;background-image:none;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#TSFE_ADMIN_PANEL_FORM .btn:hover{background-color:#c4c4c4}#TSFE_ADMIN_PANEL_FORM .btn-default{color:#333;background-color:#eee;border-color:#bbb;cursor:pointer}#TSFE_ADMIN_PANEL_FORM .btn-group{position:relative;display:inline-block;vertical-align:middle}#TSFE_ADMIN_PANEL_FORM .btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:0}#TSFE_ADMIN_PANEL_FORM .btn-group>.btn:first-child{margin-left:0}#TSFE_ADMIN_PANEL_FORM input[type=text]{font-size:12px;line-height:1.5;color:#333;background-color:#fefefe;background-image:none;border:1px solid #bbb;border-radius:2px;box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}#TSFE_ADMIN_PANEL_FORM .treeline-icon{position:relative;display:inline-block;margin-right:2px;padding:0;height:18px;width:16px;white-space:nowrap;overflow:hidden;vertical-align:middle}#TSFE_ADMIN_PANEL_FORM .treeline-icon:after,#TSFE_ADMIN_PANEL_FORM .treeline-icon:before{position:absolute;content:'';left:50%}#TSFE_ADMIN_PANEL_FORM .treeline-icon:before{top:0;height:100%;width:2px;margin-left:-1px;border-left:1px dotted #666}#TSFE_ADMIN_PANEL_FORM .treeline-icon:after{border-top:1px dotted #666;height:2px;width:100%;top:50%;margin-top:-1px}#TSFE_ADMIN_PANEL_FORM .treeline-icon-jointop:before{top:50%}#TSFE_ADMIN_PANEL_FORM .treeline-icon-joinbottom:before{top:-50%}#TSFE_ADMIN_PANEL_FORM .treeline-icon-blank,#TSFE_ADMIN_PANEL_FORM .treeline-icon-clear:after,#TSFE_ADMIN_PANEL_FORM .treeline-icon-clear:before,#TSFE_ADMIN_PANEL_FORM .treeline-icon-line:after{display:none}
\ No newline at end of file
+#TSFE_ADMIN_PANEL_FORM *,#TSFE_ADMIN_PANEL_FORM :after,#TSFE_ADMIN_PANEL_FORM :before{box-sizing:border-box}#TSFE_ADMIN_PANEL_FORM *,#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-btn:active,#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-btn:focus,#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-btn:hover,#TSFE_ADMIN_PANEL_FORM :active,#TSFE_ADMIN_PANEL_FORM :focus,#TSFE_ADMIN_PANEL_FORM :hover,.typo3-editPanel .typo3-editPanel-btn:active,.typo3-editPanel .typo3-editPanel-btn:focus,.typo3-editPanel .typo3-editPanel-btn:hover{outline:0}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .icon,.typo3-editPanel-btn .icon,.typo3-editPanel-link .icon{position:relative;display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:-22%}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .icon img,#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .icon svg,.typo3-editPanel-btn .icon img,.typo3-editPanel-btn .icon svg,.typo3-editPanel-link .icon img,.typo3-editPanel-link .icon svg{display:block;height:100%;width:100%;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .icon *,.typo3-editPanel-btn .icon *,.typo3-editPanel-link .icon *{display:block;line-height:inherit}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .icon-markup,.typo3-editPanel-btn .icon-markup,.typo3-editPanel-link .icon-markup{position:absolute;display:block;text-align:center;top:0;left:0;right:0;bottom:0}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .icon-overlay,.typo3-editPanel-btn .icon-overlay,.typo3-editPanel-link .icon-overlay{position:absolute;bottom:0;right:0;height:68.75%;width:68.75%;text-align:center}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .icon-color,.typo3-editPanel-btn .icon-color,.typo3-editPanel-link .icon-color{fill:currentColor}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .icon-spin .icon-markup,.typo3-editPanel-btn .icon-spin .icon-markup,.typo3-editPanel-link .icon-spin .icon-markup{-webkit-animation:icon-spin 2s infinite linear;animation:icon-spin 2s infinite linear}@-webkit-keyframes icon-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes icon-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .icon-state-disabled .icon-markup,.typo3-editPanel-btn .icon-state-disabled .icon-markup,.typo3-editPanel-link .icon-state-disabled .icon-markup{opacity:.5}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .icon-size-small,.typo3-editPanel-btn .icon-size-small,.typo3-editPanel-link .icon-size-small{height:16px;width:16px;line-height:16px}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .icon-size-small .icon-unify,.typo3-editPanel-btn .icon-size-small .icon-unify,.typo3-editPanel-link .icon-size-small .icon-unify{line-height:16px;font-size:14px}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .icon-size-small .icon-overlay .icon-unify,.typo3-editPanel-btn .icon-size-small .icon-overlay .icon-unify,.typo3-editPanel-link .icon-size-small .icon-overlay .icon-unify{line-height:10px;font-size:9px}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .icon-size-default,.typo3-editPanel-btn .icon-size-default,.typo3-editPanel-link .icon-size-default{height:32px;width:32px;line-height:32px}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .icon-size-default .icon-unify,.typo3-editPanel-btn .icon-size-default .icon-unify,.typo3-editPanel-link .icon-size-default .icon-unify{line-height:32px;font-size:28px}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .icon-size-default .icon-overlay .icon-unify,.typo3-editPanel-btn .icon-size-default .icon-overlay .icon-unify,.typo3-editPanel-link .icon-size-default .icon-overlay .icon-unify{line-height:20px;font-size:18px}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .icon-size-large,.typo3-editPanel-btn .icon-size-large,.typo3-editPanel-link .icon-size-large{height:48px;width:48px;line-height:48px}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .icon-size-large .icon-unify,.typo3-editPanel-btn .icon-size-large .icon-unify,.typo3-editPanel-link .icon-size-large .icon-unify{line-height:48px;font-size:42px}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .icon-size-large .icon-overlay .icon-unify,.typo3-editPanel-btn .icon-size-large .icon-overlay .icon-unify,.typo3-editPanel-link .icon-size-large .icon-overlay .icon-unify{line-height:30px;font-size:26px}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .icon-actions-edit-copy-release,#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .icon-actions-edit-cut-release,#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .icon-status-dialog-error,#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .icon-status-status-current,#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .icon-status-status-permission-denied,.typo3-editPanel-btn .icon-actions-edit-copy-release,.typo3-editPanel-btn .icon-actions-edit-cut-release,.typo3-editPanel-btn .icon-status-dialog-error,.typo3-editPanel-btn .icon-status-status-current,.typo3-editPanel-btn .icon-status-status-permission-denied,.typo3-editPanel-link .icon-actions-edit-copy-release,.typo3-editPanel-link .icon-actions-edit-cut-release,.typo3-editPanel-link .icon-status-dialog-error,.typo3-editPanel-link .icon-status-status-current,.typo3-editPanel-link .icon-status-status-permission-denied{color:#c83c3c}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .icon-status-status-sorting-light-asc,#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .icon-status-status-sorting-light-desc,.typo3-editPanel-btn .icon-status-status-sorting-light-asc,.typo3-editPanel-btn .icon-status-status-sorting-light-desc,.typo3-editPanel-link .icon-status-status-sorting-light-asc,.typo3-editPanel-link .icon-status-status-sorting-light-desc{color:#fff}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .icon-status-status-sorting-asc,#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .icon-status-status-sorting-desc,.typo3-editPanel-btn .icon-status-status-sorting-asc,.typo3-editPanel-btn .icon-status-status-sorting-desc,.typo3-editPanel-link .icon-status-status-sorting-asc,.typo3-editPanel-link .icon-status-status-sorting-desc{color:#737373}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .icon-status-dialog-information,.typo3-editPanel-btn .icon-status-dialog-information,.typo3-editPanel-link .icon-status-dialog-information{color:#6daae0}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .icon-status-dialog-ok,#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .icon-status-status-permission-granted,.typo3-editPanel-btn .icon-status-dialog-ok,.typo3-editPanel-btn .icon-status-status-permission-granted,.typo3-editPanel-link .icon-status-dialog-ok,.typo3-editPanel-link .icon-status-status-permission-granted{color:#79a548}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .icon-status-dialog-notification,.typo3-editPanel-btn .icon-status-dialog-notification,.typo3-editPanel-link .icon-status-dialog-notification{color:#333}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .icon-status-dialog-warning,.typo3-editPanel-btn .icon-status-dialog-warning,.typo3-editPanel-link .icon-status-dialog-warning{color:#e8a33d}@font-face{font-family:TYPO3FontAwesome;src:url(../../../../backend/Resources/Public/Fonts/FontAwesome/fontawesome-webfont.eot?v=4.6.3);src:url(../../../../backend/Resources/Public/Fonts/FontAwesome/fontawesome-webfont.eot?#iefix&v=4.6.3) format("embedded-opentype"),url(../../../../backend/Resources/Public/Fonts/FontAwesome/fontawesome-webfont.woff2?v=4.6.3) format("woff2"),url(../../../../backend/Resources/Public/Fonts/FontAwesome/fontawesome-webfont.woff?v=4.6.3) format("woff"),url(../../../../backend/Resources/Public/Fonts/FontAwesome/fontawesome-webfont.ttf?v=4.6.3) format("truetype"),url(../../../../backend/Resources/Public/Fonts/FontAwesome/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular) format("svg");font-weight:400;font-style:normal}#TSFE_ADMIN_PANEL_FORM .fa:before,.typo3-editPanel .fa:before,.typo3-feedit-element .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;-webkit-transform:translate(0,0);transform:translate(0,0)}#TSFE_ADMIN_PANEL_FORM .fa-pencil:before,.typo3-editPanel .fa-pencil:before,.typo3-feedit-element .fa-pencil:before{content:"\f040"}#TSFE_ADMIN_PANEL_FORM .fa-angle-up:before,.typo3-editPanel .fa-angle-up:before,.typo3-feedit-element .fa-angle-up:before{content:"\f106"}#TSFE_ADMIN_PANEL_FORM .fa-angle-down:before,.typo3-editPanel .fa-angle-down:before,.typo3-feedit-element .fa-angle-down:before{content:"\f107"}#TSFE_ADMIN_PANEL_FORM .fa-toggle-off:before,.typo3-editPanel .fa-toggle-off:before,.typo3-feedit-element .fa-toggle-off:before{content:"\f204"}#TSFE_ADMIN_PANEL_FORM .fa-toggle-on:before,.typo3-editPanel .fa-toggle-on:before,.typo3-feedit-element .fa-toggle-on:before{content:"\f205"}#TSFE_ADMIN_PANEL_FORM .fa-google-plus-square:before,.typo3-editPanel .fa-google-plus-square:before,.typo3-feedit-element .fa-google-plus-square:before{content:"\f0d4"}#TSFE_ADMIN_PANEL_FORM .fa-trash:before,.typo3-editPanel .fa-trash:before,.typo3-feedit-element .fa-trash:before{content:"\f1f8"}#TSFE_ADMIN_PANEL_FORM .fa-history:before,.typo3-editPanel .fa-history:before,.typo3-feedit-element .fa-history:before{content:"\f1da"}#TSFE_ADMIN_PANEL_FORM .fa-list-alt:before,.typo3-editPanel .fa-list-alt:before,.typo3-feedit-element .fa-list-alt:before{content:"\f022"}#TSFE_ADMIN_PANEL_FORM .fa-plus-square:before,.typo3-editPanel .fa-plus-square:before,.typo3-feedit-element .fa-plus-square:before{content:"\f0fe"}#TSFE_ADMIN_PANEL_FORM .fa-arrows:before,.typo3-editPanel .fa-arrows:before,.typo3-feedit-element .fa-arrows:before{content:"\f047"}#TSFE_ADMIN_PANEL_FORM .fa-exclamation-circle:before,.typo3-editPanel .fa-exclamation-circle:before,.typo3-feedit-element .fa-exclamation-circle:before{content:"\f06a"}#TSFE_ADMIN_PANEL_FORM .fa-exclamation-triangle:before,.typo3-editPanel .fa-exclamation-triangle:before,.typo3-feedit-element .fa-exclamation-triangle:before{content:"\f071"}#TSFE_ADMIN_PANEL_FORM .fa-info-circle:before,.typo3-editPanel .fa-info-circle:before,.typo3-feedit-element .fa-info-circle:before{content:"\f05a"}#TSFE_ADMIN_PANEL_FORM .fa-caret-down:before,.typo3-editPanel .fa-caret-down:before,.typo3-feedit-element .fa-caret-down:before{content:"\f0d7"}#TSFE_ADMIN_PANEL_FORM .fa-caret-up:before,.typo3-editPanel .fa-caret-up:before,.typo3-feedit-element .fa-caret-up:before{content:"\f0d8"}#TSFE_ADMIN_PANEL_FORM .fa-bolt:before,.typo3-editPanel .fa-bolt:before,.typo3-feedit-element .fa-bolt:before{content:"\f0e7"}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-section-title-identifier: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;-webkit-transform:translate(0,0);transform:translate(0,0)}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel,.typo3-editPanel{background-color:#fafafa;color:#333;font-family:sans-serif;font-size:12px;line-height:1.35em}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel a,.typo3-editPanel a{color:inherit;text-decoration:none}#TSFE_ADMIN_PANEL_FORM{display:block!important;position:fixed;bottom:0;left:0;max-width:100%;max-height:100%;z-index:10002;padding:0;margin:0}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel{border:1px solid #cacaca;max-height:100vh;max-width:100%;min-width:280px;border-left:0;border-bottom:0;border-top-left-radius:2px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column}#TSFE_ADMIN_PANEL_FORM #typo3AdminPanelCollapse,#TSFE_ADMIN_PANEL_FORM #typo3AdminPanelEnable{display:none}#TSFE_ADMIN_PANEL_FORM #typo3AdminPanelEnable:checked+#typo3AdminPanelCollapse+.typo3-adminPanel .typo3-adminPanel-header .typo3-adminPanel-header-enable-enabled{display:inline}#TSFE_ADMIN_PANEL_FORM #typo3AdminPanelEnable:checked+#typo3AdminPanelCollapse+.typo3-adminPanel .typo3-adminPanel-header .typo3-adminPanel-header-enable-disabled{display:none}#TSFE_ADMIN_PANEL_FORM #typo3AdminPanelEnable:checked+#typo3AdminPanelCollapse+.typo3-adminPanel .typo3-adminPanel-header .typo3-adminPanel-header-collapse{display:block}#TSFE_ADMIN_PANEL_FORM #typo3AdminPanelCollapse:checked+.typo3-adminPanel .typo3-adminPanel-actions,#TSFE_ADMIN_PANEL_FORM #typo3AdminPanelCollapse:checked+.typo3-adminPanel .typo3-adminPanel-body{display:none}#TSFE_ADMIN_PANEL_FORM #typo3AdminPanelCollapse:checked+.typo3-adminPanel .typo3-adminPanel-header .typo3-adminPanel-header-collapse-enabled{display:inline}#TSFE_ADMIN_PANEL_FORM #typo3AdminPanelCollapse:checked+.typo3-adminPanel .typo3-adminPanel-header .typo3-adminPanel-header-collapse-disabled{display:none}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-header{position:relative;background-color:#333;color:#fafafa;padding:1em 3em}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-header .typo3-adminPanel-header-user:before{content:':';margin-right:.5em}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-header .typo3-adminPanel-header-collapse,#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-header .typo3-adminPanel-header-enable{position:absolute;cursor:pointer;top:50%;left:0;padding:1em;-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-header .typo3-adminPanel-header-collapse{display:none;left:auto;right:0}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-header .typo3-adminPanel-header-enable-enabled{display:none;color:#79a548}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-header .typo3-adminPanel-header-enable-disabled{color:#c83c3c}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-header .typo3-adminPanel-header-collapse-enabled{display:none}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-actions{text-align:right;padding:0 1em .75em;background-color:#333;color:#fafafa}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-body{height:100%;overflow:auto}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-body>.typo3-adminPanel-section-title:first-child{border-top:none}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-section-title{position:relative;overflow:hidden;border-top:1px solid #bbb;background-color:#eee;padding:.75em 3em .75em 1em}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-section-title:hover{background-color:#ddd}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-section-title a{position:relative;display:block;padding:.75em 3em .75em 1em;margin:-.75em -3em -.75em -1em}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-section-title-identifier{position:absolute;top:50%;right:0;padding:1em;-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-section-title-identifier:before{content:"\f105"}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-section-open .typo3-adminPanel-section-title-identifier:before{content:"\f107 "}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-section-body{padding:.75em 1em}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel label{display:block;font-weight:400;padding:0;margin:0;overflow:hidden}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel input[type=text],#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel select{display:block;width:100%;padding:.5em;border:1px solid #ccc;margin:.5em 0;font-size:inherit}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel input[type=text]:focus,#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel input[type=text]:hover,#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel select:focus,#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel select:hover{border-color:#aaa}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-form-group{margin:1em 0}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-form-group-checkbox,#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-form-group-radio{margin:.5em 0}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-form-group-checkbox label,#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-form-group-radio label{padding-left:20px}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-form-group-checkbox input[type=checkbox],#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-form-group-checkbox input[type=radio],#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-form-group-radio input[type=checkbox],#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-form-group-radio input[type=radio]{float:left;padding:0;margin:1px 0 0 -20px}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-table-overflow{max-width:100%;margin:1em 0;overflow-x:auto}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-table{width:100%;border:1px solid #ccc;border-collapse:collapse;border-spacing:0}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-table td,#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-table th{text-align:left;overflow:hidden;position:relative;vertical-align:top;padding:.75em}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-table thead tr{background-color:rgba(0,0,0,.15)}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-table thead td,#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-table thead th{font-weight:400}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-table tbody tr:nth-of-type(odd){background-color:rgba(0,0,0,.05)}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-table-cell-content{word-wrap:break-word}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-table-cell-nowrap{white-space:nowrap}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-logRow-highlight{background-color:#fcd3cf}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .stackPointer{color:maroon;vertical-align:top}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-btn{display:inline-block;margin-bottom:0;padding:6px 8px;border:1px solid transparent;border-radius:0;font-weight:400;line-height:1.5;text-align:center;vertical-align:middle;touch-action:manipulation;cursor:pointer;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-btn-default{color:#333;background-color:#eee;border-color:#bbb;cursor:pointer}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-btn-default:hover{background-color:#c4c4c4}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-btn-dark{color:#fafafa;background-color:#555;border-color:rgba(0,0,0,.5);cursor:pointer}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-btn-dark:hover{background-color:#444}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-btn-group{position:relative;display:inline-block;vertical-align:middle}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .typo3-adminPanel-btn-group .typo3-adminPanel-btn+.typo3-adminPanel-btn{margin-left:-1px}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .treeline-icon{display:inline-block;margin-right:2px;padding:0;height:18px;width:16px;white-space:nowrap;overflow:hidden;vertical-align:middle}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .treeline-icon:after,#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .treeline-icon:before{position:absolute;content:'';margin-left:7px}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .treeline-icon:before{top:0;height:100%;width:2px;margin-left:7px;border-left:1px dotted #666}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .treeline-icon:after{border-top:1px dotted #666;height:2px;width:8px;margin-top:8px}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .treeline-icon-jointop:before{top:50%}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .treeline-icon-joinbottom:before{height:26px;margin-top:-8px}#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .treeline-icon-blank,#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .treeline-icon-clear:after,#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .treeline-icon-clear:before,#TSFE_ADMIN_PANEL_FORM .typo3-adminPanel .treeline-icon-line:after{display:none}.typo3-feedit-element{border:1px solid #cacaca;margin:1em 0}.typo3-editPanel{display:block!important;border-top:1px solid #cacaca;padding:.5em}.typo3-editPanel .typo3-editPanel-label{margin-left:1.5em;display:inline-block;vertical-align:middle}.typo3-editPanel .typo3-editPanel-btn{display:inline-block!important;margin-bottom:0;padding:6px 8px;line-height:1.5em;border:1px solid transparent;border-radius:0;font-weight:400;text-align:center;vertical-align:middle;touch-action:manipulation;cursor:pointer;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.typo3-editPanel .typo3-editPanel-btn-default{color:#333;background-color:#eee;border-color:#bbb;cursor:pointer}.typo3-editPanel .typo3-editPanel-btn-default:hover{background-color:#c4c4c4}.typo3-editPanel .typo3-editPanel-btn-group{position:relative;display:inline-block;vertical-align:middle}.typo3-editPanel .typo3-editPanel-btn-group .typo3-editPanel-btn+.typo3-editPanel-btn{margin-left:-1px}.typo3-editPanel-btn{display:inline-block!important}.typo3-feedit-element-hidden{border-color:#ebc975}.typo3-feedit-element-hidden .typo3-editPanel{border-top-color:#ebc975;background-color:#f8ecce}.typo3-feedit-element-hidden .typo3-editPanel .typo3-editPanel-btn-default{border-color:#e5b848;background-color:#f2dba1}.typo3-feedit-element-hidden .typo3-editPanel .typo3-editPanel-btn-default:hover{background-color:#eed28b}
\ No newline at end of file
diff --git a/typo3/sysext/frontend/Resources/Public/JavaScript/AdminPanel.js b/typo3/sysext/frontend/Resources/Public/JavaScript/AdminPanel.js
deleted file mode 100644 (file)
index 308b601..0000000
+++ /dev/null
@@ -1,134 +0,0 @@
-/*
- * This file is part of the TYPO3 CMS project.
- *
- * It is free software; you can redistribute it and/or modify it under
- * the terms of the GNU General Public License, either version 2
- * of the License, or any later version.
- *
- * For the full copyright and license information, please read the
- * LICENSE.txt file that was distributed with this source code.
- *
- * The TYPO3 project - inspiring people to share!
- */
-
-/**
- */
-
-var TYPO3AdminPanel = function() {
-       this.boxElement = null;
-       this.dragging = false;
-       this.dragElement = document;
-       this.previousMouseUpHandler = null;
-       this.previousMouseMoveHandler = null;
-       this.mouseOffset = {
-               x: 0,
-               y: 0
-       };
-};
-
-TYPO3AdminPanel.prototype = {
-
-       init: function(headerElementId, boxElementId) {
-               this.boxElement = document.getElementById(boxElementId);
-               this.setInitialPosition();
-               this.setMouseDownHandler(headerElementId);
-       },
-
-       dragStart: function(event) {
-               if (!this.dragging) {
-                       if (!event) {
-                               event = window.event;
-                       }
-                       this.dragging = true;
-                       this.setMouseOffsets(event);
-                       this.setDragHandlers();
-               }
-       },
-
-       dragEnd: function() {
-               if (this.dragging) {
-                       this.dragging = false;
-                       this.dragElement.onmouseup = this.previousMouseUpHandler;
-                       this.dragElement.onmousemove = this.previousMouseMoveHandler;
-                       this.setCookie("admPanelPosX", this.boxElement.style.left);
-                       this.setCookie("admPanelPosY", this.boxElement.style.top);
-               }
-       },
-
-       drag: function(event) {
-               if (this.dragging) {
-                       if (!event) {
-                               event = window.event;
-                       }
-                       this.boxElement.style.left = (event.clientX + this.mouseOffset.x) + "px";
-                       this.boxElement.style.top = (event.clientY + this.mouseOffset.y) + "px";
-               }
-       },
-
-       getCookie: function(name) {
-               var dc = document.cookie;
-               var prefix = name + "=";
-               var begin = dc.indexOf("; " + prefix);
-
-               if (begin == -1) {
-                       begin = dc.indexOf(prefix);
-                       if (begin != 0) {
-                               return null;
-                       }
-               } else {
-                       begin += 2;
-               }
-
-               var end = dc.indexOf(";", begin);
-               if (end == -1) {
-                       end = dc.length;
-               }
-
-               return unescape(dc.substring(begin + prefix.length, end));
-       },
-
-       setCookie: function(name, value) {
-               document.cookie = name + "=" + escape(value);
-       },
-
-       setDragHandlers: function() {
-               var _this = this;
-
-               this.previousMouseUpHandler = this.dragElement.onmouseup;
-               this.dragElement.onmouseup = function() {
-                       _this.dragEnd.apply(_this, arguments);
-               };
-               this.previousMouseMoveHandler = this.dragElement.onmousemove;
-               this.dragElement.onmousemove = function() {
-                       _this.drag.apply(_this, arguments);
-               };
-       },
-
-       setInitialPosition: function() {
-               this.boxElement.style.position = "absolute";
-
-               var pos = this.getCookie("admPanelPosX");
-               if (pos) {
-                       this.boxElement.style.left =  pos;
-               }
-               pos = this.getCookie("admPanelPosY");
-               if (pos) {
-                       this.boxElement.style.top = pos;
-               }
-       },
-
-       setMouseDownHandler: function(headerElementId) {
-               var _this = this, headerElement = document.getElementById(headerElementId);
-               headerElement.onmousedown = function(event) {
-                       _this.dragStart.apply(_this, arguments);
-                       event.preventDefault();
-                       return false;
-               }
-       },
-
-       setMouseOffsets: function(event) {
-               this.mouseOffset.x = this.boxElement.offsetLeft - event.clientX;
-               this.mouseOffset.y = this.boxElement.offsetTop - event.clientY;
-       }
-
-};
index ffe2038..05ff864 100644 (file)
@@ -14,6 +14,8 @@ namespace TYPO3\CMS\Frontend\Tests\Unit\View;
  * The TYPO3 project - inspiring people to share!
  */
 use TYPO3\CMS\Core\Utility\GeneralUtility;
+use TYPO3\CMS\Frontend\Controller\TypoScriptFrontendController;
+use TYPO3\CMS\Lang\LanguageService;
 
 /**
  * Test case
@@ -25,7 +27,8 @@ class AdminPanelViewTest extends \TYPO3\TestingFramework\Core\Unit\UnitTestCase
      */
     protected function setUp()
     {
-        $GLOBALS['LANG'] = $this->createMock(\TYPO3\CMS\Lang\LanguageService::class);
+        $GLOBALS['LANG'] = $this->createMock(LanguageService::class);
+        $GLOBALS['TSFE'] = new TypoScriptFrontendController([], 1, 1);
     }
 
     /**
@@ -89,6 +92,7 @@ class AdminPanelViewTest extends \TYPO3\TestingFramework\Core\Unit\UnitTestCase
             ->setMethods(['extGetLL'])
             ->disableOriginalConstructor()
             ->getMock();
+        $adminPanelMock->initialize();
         $hookMock->expects($this->once())->method('extendAdminPanel')->with($this->isType('string'), $this->isInstanceOf(\TYPO3\CMS\Frontend\View\AdminPanelView::class));
         $adminPanelMock->display();
     }