diff --git a/Build/Resources/Public/Less/Component/avatar.less b/Build/Resources/Public/Less/Component/avatar.less
index 0d1d67f99f9eac6822bec32722a8ea5e8ccce5a5..82254c0388ab5757221abf1fb17683d7a79919b4 100644
--- a/Build/Resources/Public/Less/Component/avatar.less
+++ b/Build/Resources/Public/Less/Component/avatar.less
@@ -85,21 +85,3 @@
height: @avatar-size / 2;
width: @avatar-size / 2;
}
-
-
-//
-// Avatar in dropdowns
-//
-.dropdown-toggle {
- > .avatar {
- height: @avatar-dropdown-size;
- width: @avatar-dropdown-size;
- float: left;
- margin-right: 0.5em;
- margin-top: -@avatar-dropdown-correction;
- }
- .avatar-image {
- height: @avatar-dropdown-size;
- width: @avatar-dropdown-size;
- }
-}
\ No newline at end of file
diff --git a/Build/Resources/Public/Less/Component/dropdown.less b/Build/Resources/Public/Less/Component/dropdown.less
new file mode 100644
index 0000000000000000000000000000000000000000..5ad19a0071b60ecd4398b7c7b970845150a38ce1
--- /dev/null
+++ b/Build/Resources/Public/Less/Component/dropdown.less
@@ -0,0 +1,125 @@
+//
+// Dropdowns
+//
+.dropdown-menu {
+ line-height: 1.45em;
+ border: 0;
+ margin: 0;
+ border-radius: 0;
+ a {
+ display: block;
+ &:hover {
+ text-decoration: none;
+ }
+ }
+ hr {
+ border-top: 1px solid rgba(0,0,0,0.25);
+ margin: 1.25em -15px;
+ }
+ > *:last-child {
+ margin-bottom: 0;
+ }
+ .form-group {
+ margin-bottom: 0.75em;
+ }
+ .form-control {
+ border-color: #aaaaaa;
+ color: inherit;
+ border-radius: 0;
+ background-color: #333333;
+ &:focus {
+ box-shadow: none;
+ border-color: #bbbbbb;
+ }
+ }
+ .btn {
+ border: none;
+ border-radius: 0;
+ padding: 6px 10px;
+ }
+}
+.dropdown-headline {
+ font-size: 1.15em;
+ margin-top: 0;
+ margin-bottom: 0.5em;
+}
+.dropdown-text {
+ a {
+ display: inline-block;
+ }
+}
+div.dropdown-menu {
+ padding: 1.5em;
+}
+.dropdown-list {
+ .list-unstyled();
+ > li {
+ &:extend(.clearfix all);
+ position: relative;
+ }
+ > li + li {
+ margin-top: 0.5em;
+ }
+}
+.dropdown-list-link {
+ display: block;
+ text-decoration: none;
+ &:hover,
+ &:focus {
+ text-decoration: none;
+ }
+}
+
+//
+// Dropdown Table
+//
+.dropdown-table {
+ display: table;
+ width: 100%;
+}
+.dropdown-table-row {
+ display: table-row;
+}
+.dropdown-table-column {
+ display: table-cell;
+ padding-top: 0.25em;
+ padding-bottom: 0.25em;
+ vertical-align: middle;
+}
+.dropdown-table-column-top {
+ vertical-align: top;
+}
+.dropdown-table-icon {
+ width: 16px;
+ padding-right: 0.5em;
+}
+.dropdown-table-title {
+ white-space: nowrap;
+ padding-right: 1.5em;
+}
+.dropdown-table-title-ellipsis {
+ max-width: 230px;
+ overflow: hidden;
+ display: block;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+.dropdown-table-actions {
+ white-space: nowrap;
+ text-align: right;
+}
+.dropdown-table-actions-btn {
+ text-align: center;
+ display: inline-block!important;
+ margin-top: -4px;
+ margin-bottom: -4px;
+ padding: 4px;
+ vertical-align: middle;
+}
+.dropdown-table-actions-btn-close:hover,
+.dropdown-table-actions-btn-edit:hover {
+ background-color: @brand-notice;
+}
+.dropdown-table-actions-btn-delete:hover {
+ background-color: @brand-danger;
+}
diff --git a/Build/Resources/Public/Less/Component/module.less b/Build/Resources/Public/Less/Component/module.less
index ce64d250794aa61e403c2697b9d6609fa885d51c..e033e4a82a66ac7d70a803367739951f8db712af 100644
--- a/Build/Resources/Public/Less/Component/module.less
+++ b/Build/Resources/Public/Less/Component/module.less
@@ -130,6 +130,7 @@
}
.container-small {
max-width: 768px;
+ margin: 0 auto;
}
}
.module-docheader + .module-body {
diff --git a/Build/Resources/Public/Less/Scaffold/_modulemenu.less b/Build/Resources/Public/Less/Scaffold/_modulemenu.less
new file mode 100644
index 0000000000000000000000000000000000000000..3953cee50e0285afe26166dea19b44fd3dc5a2d9
--- /dev/null
+++ b/Build/Resources/Public/Less/Scaffold/_modulemenu.less
@@ -0,0 +1,103 @@
+//
+// Module menu
+//
+
+// Module links
+@modulemenu-item-padding-vertical: 2px;
+@modulemenu-item-padding-horizontal: 4px;
+
+// Module menu wrapper
+.module-wrapper {
+ position: relative;
+ iframe {
+ border: none;
+ }
+}
+
+// Module menu styling
+.modulemenu {
+
+ /// Module menu group
+ .modulemenu-group-container {
+ clear: both;
+ &:extend(.list-unstyled all);
+ }
+ .modulemenu-group {
+ position: relative;
+ padding: 5px 0;
+ border-bottom: 1px solid rgba(0,0,0,0.2);
+ }
+ .modulemenu-group-header,
+ .modulemenu-item-link {
+ &:extend(.clearfix all);
+ position: relative;
+ display: block;
+ cursor: pointer;
+ padding: @modulemenu-item-padding-vertical @modulemenu-item-padding-horizontal;
+ text-decoration: none;
+ }
+ .modulemenu-group-header {
+ user-select: none;
+ text-transform: uppercase;
+ }
+ .modulemenu-item-link {
+ &:focus,
+ &:hover {
+ outline: none;
+ background-color: rgba(0,0,0,0.1);
+ }
+ }
+ .modulemenu-item.active {
+ .modulemenu-item-link {
+ background-color: rgba(0,0,0,0.15);
+ }
+ }
+
+ // Module menu icons
+ .modulemenu-icon {
+ float: left;
+ margin-right: @modulemenu-item-padding-horizontal;
+ .fa {
+ font-size: 0.5em;
+ }
+ }
+
+ // Module menu group and item titles
+ .modulemenu-group-title,
+ .modulemenu-item-title {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ padding-top: 7px;
+ padding-left: @modulemenu-item-padding-horizontal;
+ display: none;
+ overflow: hidden;
+ *zoom: 1;
+ }
+ .modulemenu-group-title {
+ padding-right: 20px;
+ .caret {
+ .rotate(90deg);
+ position: absolute;
+ top: 17px;
+ right: 18px;
+ }
+ }
+
+ // Module Group Expanded
+ .expanded {
+ .modulemenu-group-title {
+ .caret {
+ .rotate(0deg);
+ }
+ }
+ }
+}
+
+
+// Module menu snapped
+.scaffold-modulemenu-expanded {
+ .modulemenu-group-title,
+ .modulemenu-item-title {
+ display: block;
+ }
+}
diff --git a/Build/Resources/Public/Less/Scaffold/_toolbar.less b/Build/Resources/Public/Less/Scaffold/_toolbar.less
new file mode 100644
index 0000000000000000000000000000000000000000..73a104c14e3151a5e0b48b2b5d62131442e67a58
--- /dev/null
+++ b/Build/Resources/Public/Less/Scaffold/_toolbar.less
@@ -0,0 +1,216 @@
+//
+// Toolbar
+//
+@toolbar-item-padding-vertical: 9px;
+@toolbar-item-padding-horizontal: 10px;
+
+@toolbar-color: #ddd;
+@toolbar-height: 45px;
+@toolbar-zindex: @zindex-navbar;
+@toolbar-bg: @navbar-inverse-bg;
+
+@toolbar-navigation-color: @toolbar-color;
+@toolbar-navigation-bg: #2f2f2f;
+@toolbar-navigation-border-color: #111;
+
+@toolbar-dropdown-padding: 16px;
+@toolbar-dropdown-color: @toolbar-navigation-color;
+@toolbar-dropdown-bg: @toolbar-navigation-bg;
+
+@toolbar-dropdown-link-bg: @toolbar-navigation-bg;
+@toolbar-dropdown-link-color: #ddd;
+@toolbar-dropdown-link-hover-bg: #333;
+@toolbar-dropdown-link-hover-color: #fff;
+@toolbar-dropdown-link-active-bg: lighten(@toolbar-dropdown-bg, 15%);
+@toolbar-dropdown-link-active-color: #fff;
+
+@toolbar-navigation-search-bg: @toolbar-navigation-bg;
+@toolbar-navigation-search-hover-bg: @toolbar-dropdown-link-hover-bg;
+@toolbar-navigation-search-focus-bg: @toolbar-dropdown-link-active-bg;
+
+
+.toolbar {
+ padding: 8px;
+ @media (min-width: @scaffold-breakpoint) {
+ padding: 0;
+ }
+ &:after {
+ clear: both;
+ display: table;
+ content: '';
+ }
+}
+
+.toolbar-list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+// Toolbar Item
+.toolbar-item {
+ padding: 4px;
+ position: relative;
+ display: block;
+ float: left;
+ width: 100%;
+ @media (min-width: 600px) {
+ width: 50%;
+ }
+ @media (min-width: 750px) {
+ width: 33.33%;
+ }
+ @media (min-width: @scaffold-breakpoint) {
+ padding: 0;
+ width: auto;
+ margin-left: 1px;
+ }
+}
+
+// Dropdown Menu
+.toolbar-item {
+ .dropdown-menu {
+ width: 350px;
+ }
+ @media (max-width: @scaffold-breakpoint-max) {
+ .dropdown-menu {
+ overflow: auto;
+ padding: @grid-gutter-width / 2;
+ position: fixed;
+ max-height: 90%;
+ max-width: 90%;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+ .dropdown-backdrop {
+ background: rgba(0,0,0,0.65);
+ }
+ }
+
+}
+
+// Toolbar Item
+.toolbar-item-avatar {
+ width: 32px;
+ display: inline-block;
+ .avatar {
+ position: absolute;
+ top: 50%;
+ left: 10px;
+ transform: translate(0,-50%);
+ }
+}
+.toolbar-item-badge {
+ position: absolute;
+ bottom: 4px;
+ right: 4px;
+ padding: 3px 4px;
+ border-radius: 0;
+ font-size: 10px;
+ font-weight: normal;
+ min-width: 16px;
+
+}
+
+// Toolbar Item Link
+.toolbar-item-link {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ border: 1px solid rgba(0,0,0,0.5);
+ position: relative;
+ display: block;
+ text-decoration: none;
+ padding: @toolbar-item-padding-vertical @toolbar-item-padding-horizontal;
+ height: @toolbar-height;
+ line-height: @toolbar-height - (@toolbar-item-padding-vertical * 2);
+ &:hover,
+ &:focus {
+ text-decoration: none;
+ }
+ @media (min-width: @scaffold-breakpoint) {
+ border: none;
+ }
+}
+.open {
+ .toolbar-item-link {
+ background-color: #424242;
+ }
+}
+@media (min-width: @scaffold-breakpoint) {
+ .toolbar-item-title {
+ display: none;
+ }
+}
+
+// Search
+.toolbar-item-search {
+ @media (min-width: @scaffold-breakpoint) {
+ width: 300px;
+ }
+ form {
+ padding: 0;
+ margin: 0;
+ }
+ .toolbar-item-link {
+ padding: 0;
+ margin: 0;
+ height: 0;
+ }
+ .form-group {
+ margin: 0;
+ }
+ .close {
+ color: #ffffff;
+ text-shadow: none;
+ opacity: 1;
+ }
+ .dropdown-menu {
+ @media (max-width: @scaffold-breakpoint-max) {
+ top: 114px;
+ left: 14px;
+ right: 14px;
+ width: auto;
+ max-width: none;
+ max-height: none;
+ transform: none;
+ bottom: 14px;
+ }
+ @media (min-width: @scaffold-breakpoint) {
+ left: auto;
+ right: 0;
+ }
+ }
+ .autocomplete-suggestions {
+ position: static!important;
+ }
+ .autocomplete-suggestion {
+ border: none;
+ }
+ &.open {
+ .toolbar-item-search-form {
+ position: relative;
+ z-index: 991;
+ }
+ }
+}
+.toolbar-item-search-field {
+ color: inherit;
+ background-color: @toolbar-navigation-search-bg;
+ margin: 0;
+ border-radius: 0;
+ border: 1px solid rgba(0,0,0,0.5);
+ @media (min-width: @scaffold-breakpoint) {
+ border: none;
+ }
+ height: @toolbar-height;
+ box-shadow: none;
+ &:hover {
+ background-color: @toolbar-navigation-search-hover-bg;
+ }
+ &:focus {
+ box-shadow: none;
+ background-color: @toolbar-navigation-search-focus-bg;
+ }
+}
diff --git a/Build/Resources/Public/Less/Scaffold/_topbar.less b/Build/Resources/Public/Less/Scaffold/_topbar.less
new file mode 100644
index 0000000000000000000000000000000000000000..fb5d4047b434c484b2d906bec706f2aebfc84de7
--- /dev/null
+++ b/Build/Resources/Public/Less/Scaffold/_topbar.less
@@ -0,0 +1,187 @@
+//
+// Topbar
+// ======
+//
+
+//
+// Variables
+//
+@topbar-bg: @scaffold-topbar-bg;
+@topbar-color: @scaffold-topbar-color;
+@topbar-height: @scaffold-topbar-height;
+@topbar-zindex: @scaffold-topbar-zindex;
+
+@topbar-workspace-bg: #6d860d;
+
+@topbar-toolbar-bg: @scaffold-topbar-toolbar-bg;
+@topbar-toolbar-color: @scaffold-topbar-toolbar-color;
+
+@topbar-button-bg: @topbar-toolbar-bg;
+@topbar-button-hover-bg: lighten(@topbar-button-bg, 3%);
+@topbar-button-active-bg: @scaffold-modulemenu-bg;
+@topbar-button-width: 40px;
+
+@toolbar-item-padding-vertical: 9px;
+@toolbar-item-padding-horizontal: 15px;
+
+
+//
+// Component
+//
+.topbar {
+ background-color: inherit;
+ position: relative;
+ height: @topbar-height;
+ a {
+ color: inherit;
+ text-decoration: none;
+ }
+}
+
+
+//
+// Buttons
+//
+.topbar-button {
+ position: absolute;
+ top: 0;
+ display: inline-block;
+ border: 0;
+ background-color: @topbar-button-bg;
+ height: @topbar-height;
+ width: @topbar-button-width;
+ &:hover {
+ background-color: @topbar-button-hover-bg;
+ }
+ &.topbar-button-modulemenu {
+ left: 0;
+ @media (min-width: @scaffold-breakpoint) {
+ background-color: @topbar-button-active-bg;
+ }
+ }
+ &.topbar-button-navigationcomponent {
+ left: @topbar-button-width;
+ }
+ &.topbar-button-toolbar {
+ right: @topbar-button-width;
+ }
+ &.topbar-button-search {
+ right: 0;
+ }
+}
+.scaffold-modulemenu-expanded {
+ .topbar-button.topbar-button-modulemenu {
+ background-color: @topbar-button-active-bg;
+ }
+}
+.scaffold-content-navigation-expanded {
+ .topbar-button-navigationcomponent {
+ background-color: @topbar-button-active-bg;
+ }
+}
+.scaffold-toolbar-expanded {
+ @media (max-width: @scaffold-breakpoint-max) {
+ .toolbar-item-search {
+ display: none;
+ }
+ }
+ .topbar-button-toolbar {
+ background-color: @topbar-button-active-bg;
+ }
+}
+.scaffold-search-expanded {
+ @media (max-width: @scaffold-breakpoint-max) {
+ .toolbar-item {
+ display: none;
+ }
+ .toolbar-item-search {
+ display: block;
+ width: 100%;
+ }
+ }
+ .topbar-button-search {
+ background-color: @topbar-button-active-bg;
+ }
+}
+
+
+.topbar-button-toolbar,
+.topbar-button-search {
+ display: block;
+}
+@media (min-width: @scaffold-breakpoint) {
+ .topbar-button-toolbar,
+ .topbar-button-search {
+ display: none;
+ }
+}
+
+
+
+//
+// Header
+//
+.topbar-header {
+ padding-left: @topbar-button-width * 2;
+ padding-right: @topbar-button-width * 2;
+}
+.topbar-header-site {
+ position: relative;
+ display: block;
+ @media (min-width: @scaffold-breakpoint) {
+ display: inline-block;
+ }
+ max-width: 100%;
+ height: @topbar-height;
+ line-height: @topbar-height;
+ padding-left: 1em;
+ padding-right: 1em;
+ white-space: nowrap;
+ &:before,
+ &:after {
+ display: block;
+ content: '';
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ width: 1em;
+ }
+ &:before {
+ left: 0;
+ background: linear-gradient(to right, fade(@topbar-bg, 100%) 0%, fade(@topbar-bg, 0%) 100%);
+ }
+ &:after {
+ right: 0;
+ background: linear-gradient(to right, fade(@topbar-bg, 0%) 0%, fade(@topbar-bg, 100%) 100%);
+ }
+}
+.typo3-in-workspace {
+ .topbar-header-site {
+ background-color: @topbar-workspace-bg;
+ &:before {
+ background: linear-gradient(to right, fade(@topbar-workspace-bg, 100%) 0%, fade(@topbar-workspace-bg, 0%) 100%);
+ }
+ &:after {
+ background: linear-gradient(to right, fade(@topbar-workspace-bg, 0%) 0%, fade(@topbar-workspace-bg, 100%) 100%);
+ }
+ }
+}
+.topbar-header-site-logo {
+ height: @topbar-height;
+ display: none;
+ padding-right: 0.5em;
+ @media (min-width: 320px) {
+ display: inline-block;
+ }
+}
+.topbar-header-site-title {
+ line-height: 1.2em;
+ display: inline-block;
+ vertical-align: middle;
+}
+.topbar-header-site-name {
+ display: block;
+}
+.topbar-header-site-version {
+ opacity: 0.5;
+}
diff --git a/Build/Resources/Public/Less/Scaffold/scaffold.less b/Build/Resources/Public/Less/Scaffold/scaffold.less
new file mode 100644
index 0000000000000000000000000000000000000000..e77834d1247dc1950d5eabd318e66636a94b1eec
--- /dev/null
+++ b/Build/Resources/Public/Less/Scaffold/scaffold.less
@@ -0,0 +1,276 @@
+//
+// Scaffold
+// ========
+//
+
+
+//
+// Variables
+//
+@scaffold-breakpoint-max: (@screen-md - 1);
+@scaffold-breakpoint: @screen-md;
+
+@scaffold-overlay-bg: rgba(0,0,0,0.65);
+@scaffold-overlay-zindex: @zindex-modal-background;
+
+@scaffold-bg: #f5f5f5;
+@scaffold-color: #333333;
+@scaffold-secondary-bg: #1f1f1e;
+@scaffold-secondary-color: #f5f5f5;
+
+@scaffold-topbar-bg: @scaffold-secondary-bg;
+@scaffold-topbar-color: @scaffold-secondary-color;
+@scaffold-topbar-height: 45px;
+@scaffold-topbar-zindex: @zindex-navbar;
+
+@scaffold-topbar-toolbar-bg: #222;
+@scaffold-topbar-toolbar-color: #fff;
+
+@scaffold-modulemenu-bg: #424242;
+@scaffold-modulemenu-color: #fff;
+@scaffold-modulemenu-snapped-width: 40px;
+@scaffold-modulemenu-expanded-width: 230px;
+@scaffold-modulemenu-zindex: @zindex-navbar;
+
+@scaffold-toolbar-bg: #424242;
+@scaffold-toolbar-color: #fff;
+@scaffold-toolbar-zindex: @zindex-navbar;
+
+@scaffold-content-navigation-width: 300px;
+
+@scaffold-content-toggle-bg: #333;
+@scaffold-content-toggle-color: #fff;
+
+
+//
+// Prevent Browser Rebounce
+//
+html {
+ height: 100%;
+ overflow: hidden;
+}
+body {
+ height: 100%;
+ overflow: auto;
+}
+
+
+//
+// Component
+//
+.scaffold {
+ background-color: @scaffold-bg;
+ color: @scaffold-color;
+ position: relative;
+ padding-top: @scaffold-topbar-height;
+ height: 100vh;
+}
+
+
+//
+// Topbar
+//
+.scaffold-topbar {
+ background-color: @scaffold-topbar-bg;
+ color: @scaffold-topbar-color;
+ height: @scaffold-topbar-height;
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+}
+
+
+//
+// ModuleMenu
+//
+.scaffold-modulemenu {
+ background-color: @scaffold-modulemenu-bg;
+ color: @scaffold-modulemenu-color;
+ position: fixed;
+ top: @scaffold-topbar-height;
+ left: 0;
+ bottom: 0;
+ width: @scaffold-modulemenu-snapped-width;
+ max-width: 100%;
+ z-index: @scaffold-modulemenu-zindex;
+ overflow: hidden;
+ a {
+ color: fade(@scaffold-modulemenu-color, 70%);
+ &:hover {
+ color: @scaffold-modulemenu-color;
+ }
+ }
+ .active > a {
+ color: @scaffold-modulemenu-color;
+ }
+}
+
+
+//
+// Toolbar
+//
+.scaffold-toolbar {
+ overflow: auto;
+ background-color: @scaffold-toolbar-bg;
+ color: @scaffold-toolbar-color;
+ z-index: @scaffold-toolbar-zindex;
+ position: fixed;
+ top: @scaffold-topbar-height;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ display: none;
+ a {
+ color: fade(@scaffold-toolbar-color, 70%);
+ &:hover {
+ color: @scaffold-toolbar-color;
+ }
+ }
+ .active > a {
+ color: @scaffold-toolbar-color;
+ }
+ @media (min-width: @scaffold-breakpoint) {
+ overflow: visible;
+ background-color: transparent;
+ height: @scaffold-topbar-height;
+ top: 0;
+ left: auto;
+ bottom: auto;
+ display: block;
+ }
+}
+.scaffold-toolbar-expanded,
+.scaffold-search-expanded {
+ .scaffold-toolbar {
+ @media (max-width: @scaffold-breakpoint-max) {
+ display: block;
+ }
+ }
+}
+
+
+//
+// Content
+//
+.scaffold-content {
+ position: fixed!important;
+ top: @scaffold-topbar-height;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ @media (max-width: @scaffold-breakpoint-max) {
+ left: 0!important;
+ }
+}
+.scaffold-content-navigation-iframe,
+.scaffold-content-module-iframe {
+ display: block;
+ border: none;
+ height: 100%;
+ width: 100%;
+}
+.scaffold-content-navigation {
+ display: none;
+ position: absolute!important;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ width: @scaffold-content-navigation-width;
+}
+.scaffold-content-navigation-component {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ // EXTJS PAGETREE FIXES START
+ #typo3-pagetree-treeContainer > div > .x-panel-body {
+ overflow: auto;
+ }
+ // EXTJS PAGETREE FIXES END
+}
+.scaffold-content-module {
+ @media (max-width: @screen-xs-max) {
+ width: 100%;
+ }
+ position: absolute!important;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+}
+
+
+//
+// Content Overlay
+//
+.scaffold-content-overlay {
+ display: none;
+ position: absolute;
+ z-index: @scaffold-overlay-zindex;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: @scaffold-overlay-bg;
+}
+.scaffold-modulemenu-expanded {
+ .scaffold-content-overlay {
+ display: block;
+ @media (min-width: @scaffold-breakpoint) {
+ display: none;
+ }
+ }
+}
+
+
+//
+// Medium Screen
+//
+.scaffold {
+ @media (min-width: @scaffold-breakpoint) {
+ padding-left: @scaffold-modulemenu-snapped-width;
+ }
+ .scaffold-modulemenu {
+ width: @scaffold-modulemenu-snapped-width;
+ @media (max-width: @scaffold-breakpoint-max) {
+ display: none;
+ }
+ }
+}
+.scaffold-modulemenu-expanded {
+ display: block;
+ padding-left: @scaffold-modulemenu-expanded-width;
+ .scaffold-modulemenu {
+ width: @scaffold-modulemenu-expanded-width;
+ @media (max-width: @scaffold-breakpoint-max){
+ display: block;
+ }
+ }
+ .scaffold-content {
+ transform: translate(@scaffold-modulemenu-expanded-width, 0);
+ }
+}
+.scaffold-content-navigation-expanded {
+ .scaffold-content-navigation {
+ display: block;
+ }
+ .scaffold-content-module {
+ left: @scaffold-content-navigation-width;
+ }
+}
+
+@media (min-width: @scaffold-breakpoint){
+ .scaffold {
+ .scaffold-content {
+ left: @scaffold-modulemenu-snapped-width;
+ }
+ }
+ .scaffold-modulemenu-expanded {
+ .scaffold-content {
+ left: @scaffold-modulemenu-expanded-width;
+ transform: none;
+ }
+ }
+}
diff --git a/Build/Resources/Public/Less/TYPO3/_element_docheader.less b/Build/Resources/Public/Less/TYPO3/_element_docheader.less
index 60fb41ff2b188beb82bf9867560ddca1b2ebd31b..4e8154a697e631037698cdda516e8e8200ad1b20 100644
--- a/Build/Resources/Public/Less/TYPO3/_element_docheader.less
+++ b/Build/Resources/Public/Less/TYPO3/_element_docheader.less
@@ -94,94 +94,3 @@
border-bottom: 1px solid #C3C3C3;
}
}
-
-//
-// ExtJS Viewport
-//
-
-
-// override the ExtJS collapse page tree button
-// -------------------------
-
-@module-menu-border-color-lighter: #F5F5F5;
-@module-menu-border-color-light: #C3C3C3;
-
-#typo3-navigationContainer-xcollapsed {
- &:before {
- content: "";
- position: absolute;
- top: 0;
- width: 8px;
- height: 100%;
- background-color: lighten(@module-menu-bg,25%);
- border-right: 1px solid lighten(@module-menu-border-color,20%);
- border-left: 1px solid @module-menu-border-color;
- .box-shadow(3px 0 0 rgba(0,0,0,0.15));
- }
-}
-
-// center collapse button vertical
-.x-panel-body {
- .x-layout-cmini-west .x-layout-mini,
- .x-layout-split-west .x-layout-mini {
- top: 50%;
- margin-top: -40px;
- }
-}
-
-
-// styling for the page tree collapse button
-// this class will be extended from ExtJS CSS Class setup (ExtJS close and open html setup)
-.typo3-btn-collapse-page-tree {
- height: 80px;
- width: 14px;
- border-top-right-radius: 3px;
- border-bottom-right-radius: 3px;
- background: none;
- border: 1px solid @module-menu-border-color-light;
- border-left: 1px solid @module-menu-border-color-lighter;
- display: block;
- font-size: 0;
- .opacity(1);
- &:after {
- font-family: 'FontAwesome';
- content: "\f0d9";
- position: absolute;
- top: 50%;
- display: block;
- width: 100%;
- margin-top: -1px;
- color: #000;
- font-size: 12px;
- vertical-align: middle;
- text-align: center;
- }
-}
-
-// close page tree button
-.x-layout-split-west .x-layout-mini {
- &:extend(.typo3-btn-collapse-page-tree all);
- background-color: @module-menu-border-color-lighter;
- &:hover {
- background-color: darken(@module-menu-border-color-lighter,5%);
- }
-}
-
-// open page tree button
-.x-layout-cmini-west .x-layout-mini {
- &:extend(.typo3-btn-collapse-page-tree all);
- background-color: lighten(@module-menu-bg, 25%);
- margin-left: 7px;
- border: 1px solid lighten(@module-menu-border-color, 20%);
- border-left: 0;
-
- &:hover {
- .opacity(1);
- background-color: lighten(@module-menu-bg,30%);
- }
- &:after {
- margin-top: -9px;
- color: #fff;
- content: "\f0da";
- }
-}
diff --git a/Build/Resources/Public/Less/TYPO3/_element_pagetree.less b/Build/Resources/Public/Less/TYPO3/_element_pagetree.less
index 59c472b05e3915d1a375f845eceda9700f8d6483..943f811f8de1ece6d95a970d738d342226ef3abb 100644
--- a/Build/Resources/Public/Less/TYPO3/_element_pagetree.less
+++ b/Build/Resources/Public/Less/TYPO3/_element_pagetree.less
@@ -1,6 +1,9 @@
//
// Pagetree
//
+#typo3-pagetree-topPanelItems {
+ background-color: #eee;
+}
#typo3-pagetree {
height: 100%;
diff --git a/Build/Resources/Public/Less/TYPO3/_main_body.less b/Build/Resources/Public/Less/TYPO3/_main_body.less
index 92c092c0301b2a369df2ffa1d7368d12108a6fe5..b150be3f3f720752d420087e5ac534541b1a87c1 100644
--- a/Build/Resources/Public/Less/TYPO3/_main_body.less
+++ b/Build/Resources/Public/Less/TYPO3/_main_body.less
@@ -1,7 +1,3 @@
-//
-// Body
-//
-
//
// specific wrappers
//
diff --git a/Build/Resources/Public/Less/TYPO3/_main_form.less b/Build/Resources/Public/Less/TYPO3/_main_form.less
index e997567cccbf87f089df819c20f7ec21e071593e..054a6ab980cc26ffe4fdeacf425471ae37cecd60 100644
--- a/Build/Resources/Public/Less/TYPO3/_main_form.less
+++ b/Build/Resources/Public/Less/TYPO3/_main_form.less
@@ -103,6 +103,22 @@ fieldset[disabled] .form-control {
}
+//
+// Form control icon
+//
+.form-control-icon {
+ position: absolute;
+ top: 50%;
+ left: 15px;
+ transform: translate(0, -50%);
+ z-index: 1;
+ + .form-control,
+ + .form-control-clearable .form-control {
+ padding-left: 3.25em;
+ }
+}
+
+
//
// Form group validation states
//
diff --git a/Build/Resources/Public/Less/TYPO3/_main_scaffolding.less b/Build/Resources/Public/Less/TYPO3/_main_scaffolding.less
deleted file mode 100644
index 2cb66c6328e09bf061145db8ada6248b8b8e1f4f..0000000000000000000000000000000000000000
--- a/Build/Resources/Public/Less/TYPO3/_main_scaffolding.less
+++ /dev/null
@@ -1,26 +0,0 @@
-//
-// TYPO3 backend scaffolding
-//
-
-body#typo3-backend-php {
- margin: 0;
- padding: 0;
-}
-
-#typo3-main-container {
- clear: both;
-}
-
-#typo3-top {
- margin-left: 160px;
-}
-
-iframe {
- width: 100%;
-}
-
-#typo3-side-menu,
-iframe {
- height: 100%;
- overflow: auto;
-}
\ No newline at end of file
diff --git a/Build/Resources/Public/Less/TYPO3/_module_menu.less b/Build/Resources/Public/Less/TYPO3/_module_menu.less
deleted file mode 100644
index 2964bfe409467c32902a9a4a71a3e0b23dd3b9bb..0000000000000000000000000000000000000000
--- a/Build/Resources/Public/Less/TYPO3/_module_menu.less
+++ /dev/null
@@ -1,172 +0,0 @@
-//
-// Module menu
-//
-
-// Module base
-@module-menu-color: #fff;
-@module-menu-bg: #222;
-@module-menu-border-color: #111;
-
-// Module group
-@module-menu-group-color: @module-menu-color;
-@module-menu-group-bg: @module-menu-bg;
-@module-menu-group-expanded-bg: @module-menu-bg;
-
-// Module links
-@module-menu-link-border-radius: 0 @border-radius-small @border-radius-small 0;
-@module-menu-link-color: #aaa;
-@module-menu-link-hover-color: @module-menu-color;
-@module-menu-link-hover-bg: lighten(@module-menu-bg,3%);
-@module-menu-link-active-color: #fff;
-@module-menu-link-active-bg: lighten(@module-menu-bg,15%);
-@module-menu-item-padding-vertical: 4px;
-@module-menu-item-padding-horizontal: 9px;
-
-// Module menu container
-[id="typo3-module-menu"] {
- background: @module-menu-bg;
- color: @module-menu-color;
-}
-
-// Invisible module menu drag handler
-[id="typo3-module-menu-xsplit"] {
- z-index: 10;
- width: 1px;
- background-color: lighten(@module-menu-border-color,10%);
- .box-shadow(2px 0px 3px rgba(0,0,0,0.5));
- &:hover {
- .box-shadow(2px 0px 3px rgba(0,0,0,0.9));
- }
- .x-layout-mini-wrapper {
- left: -7px;
- width: 15px;
- }
-}
-
-// Module menu styling
-[id="typo3-menu"] {
- .list-unstyled();
-
- /// Module menu group
- .typo3-module-menu-group-container {
- clear: both;
- .list-unstyled();
- padding-right: 15px;
- }
- .typo3-module-menu-group {
- .transition(background-color 0.4s ease-in-out);
- position: relative;
- color: @module-menu-group-color;
- background-color: @module-menu-group-bg;
- border-top: 1px solid lighten(@module-menu-border-color,10%);
- border-bottom: 1px solid @module-menu-border-color;
- padding: 5px 0;
- }
- .typo3-module-menu-group.expanded {
- background-color: @module-menu-group-expanded-bg;
- }
- .typo3-module-menu-group-header {
- &:extend(.clearfix all);
- position: relative;
- cursor: pointer;
- display: block;
- padding: @module-menu-item-padding-vertical @module-menu-item-padding-horizontal;
- text-transform: uppercase;
- }
-
- // Module menu item
- .typo3-module-menu-item {
- margin: 1px 0;
- }
-
- // Module menu links
- .typo3-module-menu-item-link {
- &:extend(.clearfix all);
- position: relative;
- cursor: pointer;
- display: block;
- padding: @module-menu-item-padding-vertical @module-menu-item-padding-horizontal;
- color: @module-menu-link-color;
- border-radius: @module-menu-link-border-radius;
- text-decoration: none;
- &:focus,
- &:hover {
- outline: none;
- color: @module-menu-link-hover-color;
- background-color: @module-menu-link-hover-bg;
- }
- }
- .typo3-module-menu-item.active {
- .typo3-module-menu-item-link {
- color: @module-menu-link-active-color;
- background-color: @module-menu-link-active-bg;
- }
- }
-
- // Module menu icons
- .typo3-module-menu-group-icon,
- .typo3-module-menu-item-icon {
- float: left;
- margin-right: 10px;
- }
- .typo3-module-menu-group-icon {
- background-color: transparent;
- > span {
- line-height: @app-icon-height;
- > .t3-icon {
- width: @app-icon-width;
- height: @app-icon-height;
- &:before {
- line-height: @app-icon-height;
- }
- }
- }
- &:after {
- display: none;
- }
- }
-
- // Module menu group and item titles
- .typo3-module-menu-group-title,
- .typo3-module-menu-item-title {
- white-space: nowrap;
- text-overflow: ellipsis;
- padding-top: 7px;
- display: block;
- overflow: hidden;
- *zoom: 1;
- }
- .typo3-module-menu-group-title {
- padding-right: 20px;
- .caret {
- .transition(all 0.25s ease-in-out);
- .rotate(90deg);
- position: absolute;
- top: 15px;
- right: 18px;
- }
- }
-
- // Module Group Expanded
- .expanded {
- .typo3-module-menu-group-title {
- .caret {
- .rotate(0deg);
- }
- }
- }
-}
-
-// Module menu snapped
-.typo3-module-menu-snapped {
- .typo3-module-menu-group-container {
- padding-right: 0;
- }
- .typo3-module-menu-item-link {
- border-radius: 0;
- }
- .typo3-module-menu-group-title,
- .typo3-module-menu-item-title {
- display: none;
- }
-}
diff --git a/Build/Resources/Public/Less/TYPO3/_module_viewpage.less b/Build/Resources/Public/Less/TYPO3/_module_viewpage.less
index 705f812dfcbc6463fa625649f340a7b37a2bc4cc..3651fec3bcb2a4c0730357d814cbdd5f6a7fe275 100644
--- a/Build/Resources/Public/Less/TYPO3/_module_viewpage.less
+++ b/Build/Resources/Public/Less/TYPO3/_module_viewpage.less
@@ -2,56 +2,66 @@
* Style definitions for the whole viewpage module
*/
#typo3-inner-docbody {
- display: block;
- position: absolute;
- height: auto;
- bottom: 0;
- top: 0;
- left: 0;
- right: 0;
- padding: 30px;
+ display: block;
+ position: absolute;
+ height: auto;
+ bottom: 0;
+ top: 0;
+ left: 0;
+ right: 0;
+ padding: 30px;
}
#resizeable {
- height: 100%;
+ height: 100%;
}
#tx_viewpage_iframe {
- -webkit-box-shadow: 0px 0px 15px 0px #888888;
- -moz-box-shadow: 0px 0px 15px 0px #888888;
- box-shadow:0px 0px 15px 0px #888888;
+ -webkit-box-shadow: 0px 0px 15px 0px #888888;
+ -moz-box-shadow: 0px 0px 15px 0px #888888;
+ box-shadow:0px 0px 15px 0px #888888;
}
/**
* adjust jquery-ui resize handles
*/
.ui-resizable-handle {
- border: solid #dadada;
+ border: solid #dadada;
+ position: absolute;
+ font-size: 0.1px;
+ display: block;
+ -ms-touch-action: none;
+ touch-action: none;
+ -webkit-transform: translateX(50%);
+ -moz-transform: translateX(50%);
+ -ms-transform: translateX(50%);
+ -o-transform: translateX(50%);
+ transform: translateX(50%);
}
.ui-resizable-handle:hover {
- border-color: #585858;
+ border-color: #585858;
}
.ui-resizable-s {
- cursor: row-resize;
- height: 2px;
- width: 40%;
- bottom: -15px;
- left: 30%;
- border-width: 2px 0;
+ cursor: row-resize;
+ height: 2px;
+ width: 40%;
+ bottom: -15px;
+ left: 30%;
+ border-width: 2px 0;
}
.ui-resizable-e {
- cursor: col-resize;
- width: 2px;
- right: -15px;
- top: 30%;
- height: 40%;
- border-width: 0 2px;
+ cursor: e-resize;
+ width: 25px;
+ right: -5px;
+ top: 0;
+ height: 100%;
+ border-width: 0 2px;
}
.ui-resizable-se {
- cursor: nwse-resize;
- width: 12px;
- height: 12px;
- right: -15px;
- bottom: -15px;
- background-position: -80px -224px;
- border-width: 0;
+ cursor: nwse-resize;
+ width: 12px;
+ height: 12px;
+ right: -15px;
+ bottom: -15px;
+ background-position: -80px -224px;
+ border-width: 0;
}
diff --git a/Build/Resources/Public/Less/TYPO3/_topbar.less b/Build/Resources/Public/Less/TYPO3/_topbar.less
deleted file mode 100644
index 988f38de4f8b6bfb1fad7c50e7be2df8dd6f5192..0000000000000000000000000000000000000000
--- a/Build/Resources/Public/Less/TYPO3/_topbar.less
+++ /dev/null
@@ -1,415 +0,0 @@
-//
-// Topbar
-//
-
-@topbar-color: #ddd;
-@topbar-height: 45px;
-@topbar-zindex: @zindex-navbar;
-@topbar-bg: @navbar-inverse-bg;
-
-@topbar-navigation-color: @topbar-color;
-@topbar-navigation-bg: #222;
-@topbar-navigation-border-color: #111;
-
-@topbar-dropdown-padding: 16px;
-@topbar-dropdown-color: @topbar-navigation-color;
-@topbar-dropdown-bg: @topbar-navigation-bg;
-
-@topbar-dropdown-link-bg: @topbar-navigation-bg;
-@topbar-dropdown-link-color: #ddd;
-@topbar-dropdown-link-hover-bg: #333;
-@topbar-dropdown-link-hover-color: #fff;
-@topbar-dropdown-link-active-bg: lighten(@topbar-dropdown-bg, 15%);
-@topbar-dropdown-link-active-color: #fff;
-
-@tobar-navigation-search-bg: @topbar-navigation-bg;
-@tobar-navigation-search-hover-bg: @topbar-dropdown-link-hover-bg;
-@tobar-navigation-search-focus-bg: @topbar-dropdown-link-active-bg;
-
-
-// HOTFIX SCAFFOLDING
-[id="typo3-topbar"],
-[id="typo3-topbar"] .x-panel-body {
- min-width: 1000px;
-}
-
-// Topbar
-[id="typo3-topbar"]{
- height: @topbar-height;
- position: relative;
- background-color: @topbar-bg;
- color: @topbar-color;
- .x-panel-bwrap,
- .x-panel-body {
- overflow: visible;
- }
-}
-.typo3-in-workspace [id="typo3-topbar"] {
- background-color: #6d860d;
- .typo3-topbar-site-name {
- color: #fff;
- }
-}
-
-// Container
-.typo3-topbar-container {
- .user-select(none);
- height: @topbar-height;
- position: relative;
-}
-
-// Site
-.typo3-topbar-site {
- display: table;
- padding: 0;
- height: @navbar-height;
- float: left;
-}
-.typo3-topbar-site-logo,
-.typo3-topbar-site-name {
- display: table-cell;
- vertical-align: middle;
- text-align: center;
-}
-.typo3-topbar-site-logo {
- background-color: @topbar-bg;
- width: 51px;
- .box-shadow(2px 0px 0px rgba(0, 0, 0, 0.15));
- &:hover {
- background-color: @tobar-navigation-search-hover-bg;
- }
- > img {
- max-height: 50px;
- }
-}
-.typo3-topbar-site-name {
- cursor: default;
- padding: 0 (@grid-gutter-width / 2);
-}
-
-
-// Shared
-.typo3-topbar-navigation {
- color: @topbar-navigation-color;
- background-color: @topbar-navigation-bg;
- float: right;
- // Shortcut
- .shortcut {
- min-width: 180px;
- }
- .shortcut-form {
- padding: @topbar-dropdown-padding;
- margin: (@topbar-dropdown-padding / 4) -@topbar-dropdown-padding;
- border-top: 1px solid lighten(@topbar-navigation-border-color,15%);
- background-color: lighten(@topbar-navigation-border-color,10%);
- border-bottom: 1px solid @topbar-navigation-border-color;
- }
-}
-
-
-// Navigation Items
-.typo3-topbar-navigation-items {
- height: @topbar-height;
- margin-bottom: 0;
- padding-left: 0;
- list-style: none;
- float: left;
- .icon-color {
- fill: @topbar-navigation-color;
- }
- a {
- color: @topbar-navigation-color;
- text-decoration: none;
- }
- > li {
- float: left;
- height: @topbar-height;
- > a {
- position: relative;
- display: block;
- padding: @navbar-padding-vertical 10px;
- border-left: 1px solid lighten(@topbar-navigation-border-color,10%);
- border-right: 1px solid @topbar-navigation-border-color;
- &:hover,
- &:focus,
- &:active {
- color: @topbar-dropdown-link-hover-color;
- background-color: @topbar-dropdown-link-hover-bg;
- border-left-color: lighten(@topbar-dropdown-link-hover-bg,3%)
- }
- }
- }
- > li.open {
- > a {
- color: @topbar-dropdown-link-active-color;
- background-color: @topbar-dropdown-link-active-bg;
- border-left-color: lighten(@topbar-dropdown-link-active-bg,3%);
- }
- }
-}
-
-// Dropdown
-.typo3-topbar-navigation-items {
- .dropdown {
- min-width: @topbar-height;
- text-align: center;
- > a > .fa {
- font-size: 16px;
- margin: 0;
- display: inline-block;
- position: relative;
- vertical-align: middle;
- width: auto;
- height: auto;
- }
- > a .icon-size-default .icon-unify,
- > a .icon-size-small .icon-unify {
- line-height: 16px;
- font-size: 16px;
- }
- }
- .dropdown-toggle {
- position: relative;
- .badge {
- display: none;
- font-size: 10px;
- min-width: 15px;
- height: 15px;
- position: absolute;
- padding: 0;
- border-radius: @border-radius-small;
- line-height: 15px;
- bottom: 5px;
- right: 5px;
- }
- }
- .live-search-wrapper {
- &+ .dropdown-menu {
- width: 100%;
- .dropdown-list {
- position: relative!important; // Needs to be important to override inline styles of autocomplete
- }
- }
- }
- .dropdown-menu {
- left: auto;
- right: 0;
- margin: 0;
- z-index: 2000;
- padding: (@topbar-dropdown-padding / 2) @topbar-dropdown-padding;
- color: @topbar-dropdown-color;
- background-color: @topbar-dropdown-bg;
- border-color: @topbar-navigation-border-color;
- border-top: 1px solid lighten(@topbar-navigation-border-color, 20%);
- border-left: 0;
- border-right: 0;
- border-radius: 0 0 @border-radius-small @border-radius-small;
- .box-shadow(0px 3px 0px rgba(0, 0, 0, 0.15));
- a {
- color: @topbar-dropdown-link-color;
- white-space: nowrap;
- }
- > *:last-child {
- margin-bottom: 0;
- }
- }
- .dropdown-list {
- .list-unstyled();
- > li {
- &:extend(.clearfix all);
- position: relative;
- &.active .dropdown-list-link {
- background-color: @topbar-dropdown-link-active-bg;
- color: @topbar-dropdown-link-active-color;
- }
- }
- > li + li {
- margin-top: 1px;
- }
- > li.divider + li {
- margin-top: 0;
- }
- .divider {
- border-top: 1px solid @topbar-navigation-border-color;
- background-color: lighten(@topbar-navigation-border-color, 10%);
- margin: (@topbar-dropdown-padding / 2) -@topbar-dropdown-padding;
- padding: 1px 0 0;
- }
- .modlink {
- &:extend(.clearfix all);
- width: 210px;
- .submodule-icon {
- float: left;
- margin-right: 10px;
- }
- .submodule-label {
- white-space: nowrap;
- text-overflow: ellipsis;
- padding-top: 7px;
- display: block;
- overflow: hidden;
- *zoom: 1;
- }
- }
- .dropdown-header {
- font-size: 1em;
- margin-left: -@topbar-dropdown-padding;
- margin-right: -@topbar-dropdown-padding;
- padding: (@topbar-dropdown-padding / 2) @topbar-dropdown-padding;
- }
- .dropdown-intro,
- .dropdown-info {
- color: darken(@topbar-color, 20%);
- margin-left: -@topbar-dropdown-padding;
- margin-right: -@topbar-dropdown-padding;
- padding: (@topbar-dropdown-padding / 2) @topbar-dropdown-padding;
- }
- .dl-horizontal {
- dt {
- width: 140px;
- text-align: left;
- font-weight: normal;
- }
- dd {
- margin-left: 150px;
- width: 170px;
- word-wrap: break-word;
- }
- }
- }
- .dropdown-list-link {
- max-width: 300px;
- overflow: hidden;
- text-overflow: ellipsis;
- display: block;
- text-decoration: none;
- cursor: pointer;
- white-space: nowrap;
- color: @topbar-dropdown-link-color;
- margin-left: -@topbar-dropdown-padding;
- margin-right: -@topbar-dropdown-padding;
- padding: (@topbar-dropdown-padding / 4) @topbar-dropdown-padding;
- &:hover {
- color: @topbar-dropdown-link-hover-color;
- background-color: @topbar-dropdown-link-hover-bg;
- }
- .badge {
- background-color: @brand-danger;
- color: @btn-danger-color;
- }
- small {
- white-space: normal;
- width: 270px;
- display: block;
- padding-left: 21px;
- }
- }
- .dropdown-list-link-edit,
- .dropdown-list-link-delete,
- .dropdown-list-link-close {
- position: absolute;
- top: 0;
- bottom: 0;
- right: -(@topbar-dropdown-padding / 2);
- padding: 0;
- text-align: center;
- line-height: 26px;
- width: 26px;
- height: 26px;
- &:hover {
- background-color: @topbar-dropdown-link-hover-bg;
- }
- }
- .dropdown-list-link-edit {
- right: 18px;
- }
- .dropdown-list-link-delete,
- .dropdown-list-link-close {
- &:hover {
- background-color: @btn-danger-bg;
- }
- }
- .dropdown-link-list-add-close {
- padding-right: 50px;
- }
- .dropdown-link-list-add-editdelete {
- padding-right: 85px;
- }
- .topbar-workspaces-title {
- margin-left: 3px;
- }
-}
-
-// Navigation Search
-.typo3-topbar-navigation-search {
- position: relative;
- padding: 0;
- margin: 0;
- .form-group {
- margin-top: 0;
- margin-bottom: 0;
- &:before {
- content: "\f002";
- font: normal normal normal 14px/1 FontAwesome;
- position: absolute;
- top: 50%;
- left: 15px;
- margin-top: -8px;
- z-index: 1;
- }
-
- button.close {
- opacity: 1;
- color: @topbar-navigation-color;
- text-shadow: none;
- }
- }
- .form-control {
- background-color: @tobar-navigation-search-bg;
- color: @topbar-navigation-color;
- height: @topbar-height;
- width: 300px;
- padding: 14px 30px 13px 35px;
- border: none;
- border-left: 1px solid lighten(@topbar-navigation-border-color, 10%);
- border-radius: 0;
- &:hover {
- border-left-color: lighten(@topbar-navigation-border-color, 15%);
- background-color: @tobar-navigation-search-hover-bg;
- }
- &:focus {
- outline: none;
- border-left-color: lighten(@topbar-navigation-border-color, 25%);
- background-color: @tobar-navigation-search-focus-bg;
- .box-shadow(none);
- }
- + .t3-icon {
- text-align: center;
- position: absolute;
- top: 50%;
- right: 15px;
- margin-right: 0;
- margin-top: -8px;
- }
- }
- .dropdown-menu {
- left: auto!important; // Needs to be important to override inline styes of typeahead
- width: 350px;
- }
- .dropdown-list-link {
- max-width: none;
- .typeahead-highlight {
- font-weight: normal;
- }
- }
-}
-
-// Bookmark dropdown menu
-#typo3-cms-backend-backend-toolbaritems-shortcuttoolbaritem {
- .dropdown-list {
- max-height: (10 * (18px + (@topbar-dropdown-padding / 2) + 1px)); // 18px=12px font with line-height 1.5; 1px margin-top for padding; 10 rows
- overflow: hidden;
- overflow-y: auto;
- padding-right: 10px;
- }
-}
diff --git a/Build/Resources/Public/Less/_minimal.less b/Build/Resources/Public/Less/_minimal.less
index 1b7681dfb1960334561999486135a006c9bf8eac..0a40d76ae008614d8e7d7d09b34b870197671a3c 100644
--- a/Build/Resources/Public/Less/_minimal.less
+++ b/Build/Resources/Public/Less/_minimal.less
@@ -101,10 +101,19 @@
@import "@{path-bower}/bootstrap/less/tooltip.less";
@import "@{path-bower}/bootstrap/less/carousel.less";
+//
+// Scaffold
+//
+@import "Scaffold/scaffold.less";
+@import "Scaffold/_topbar.less";
+@import "Scaffold/_toolbar.less";
+@import "Scaffold/_modulemenu.less";
+
//
// Custom Components
//
@import "Component/autocomplete.less";
+@import "Component/dropdown.less";
@import "Component/avatar.less";
@import "Component/callout.less";
@import "Component/icon.less";
diff --git a/Build/Resources/Public/Less/_variables.less b/Build/Resources/Public/Less/_variables.less
index 709322c5a6a9f7d91f083afac4c6fc8d74fc4b9a..522352449edeec639c0537ca4a5c8515442c532b 100644
--- a/Build/Resources/Public/Less/_variables.less
+++ b/Build/Resources/Public/Less/_variables.less
@@ -200,3 +200,16 @@
// Modal
@zindex-modal: 5000;
+
+@dropdown-bg: #424242;
+@dropdown-border: rgba(0,0,0,.15);
+@dropdown-fallback-border: #ccc;
+@dropdown-divider-bg: #525252;
+@dropdown-link-color: #fff;
+@dropdown-link-hover-color: #fff;
+@dropdown-link-hover-bg: #525252;
+@dropdown-link-active-color: #fff;
+@dropdown-link-active-bg: #525252;
+@dropdown-link-disabled-color: @gray-light;
+@dropdown-header-color: @gray-light;
+@dropdown-caret-color: #000;
diff --git a/Build/Resources/Public/Less/backend.less b/Build/Resources/Public/Less/backend.less
index 93272106f4cd8b55a965a940bedd0843db4dbca3..fe0151d76bc32cdb36bd71d0bcaf79a92281265d 100644
--- a/Build/Resources/Public/Less/backend.less
+++ b/Build/Resources/Public/Less/backend.less
@@ -69,8 +69,6 @@
@import "TYPO3/_main_backend_layout_wizard";
@import "TYPO3/_main_form.less";
@import "TYPO3/_main_linkbrowser.less";
-@import "TYPO3/_main_scaffolding.less";
-@import "TYPO3/_module_menu.less";
@import "TYPO3/_module_database.less";
@import "TYPO3/_module_recycler.less";
@import "TYPO3/_module_scheduler.less";
@@ -78,7 +76,6 @@
@import "TYPO3/_module_web_page.less";
@import "TYPO3/_module_viewpage.less";
@import "TYPO3/_module_workspaces.less";
-@import "TYPO3/_topbar.less";
@import "TYPO3/_debugconsole.less";
@import "TYPO3/_module_web_list_sysnote.less";
diff --git a/Build/Resources/Public/Less/nprogress/nprogress.less b/Build/Resources/Public/Less/nprogress/nprogress.less
index 871e5e556c06720eb877fed5d2d0cfd5e3719df2..a6aa3b52f9f6b9910390592294a69b7b1d341414 100644
--- a/Build/Resources/Public/Less/nprogress/nprogress.less
+++ b/Build/Resources/Public/Less/nprogress/nprogress.less
@@ -20,7 +20,7 @@
left: 0;
width: 100%;
- height: 4px;
+ height: 2px;
}
/* Fancy blur effect */
diff --git a/typo3/sysext/about/Resources/Private/Templates/About/Index.html b/typo3/sysext/about/Resources/Private/Templates/About/Index.html
index fa438b49ca6b5a0c6dd25db397fafecbed2e2394..226e61ebd6352172403fb2ac159e99bc4bd2f940 100644
--- a/typo3/sysext/about/Resources/Private/Templates/About/Index.html
+++ b/typo3/sysext/about/Resources/Private/Templates/About/Index.html
@@ -1,7 +1,7 @@
<f:layout name="Default" />
<f:section name="Content">
- <div class="container container-small">
+ <div class="container-small">
<f:render partial="Logo" arguments="{_all}" />
<f:render partial="About" arguments="{_all}" />
<f:render partial="Donation" arguments="{_all}" />
diff --git a/typo3/sysext/about/Resources/Private/Templates/Modules/Index.html b/typo3/sysext/about/Resources/Private/Templates/Modules/Index.html
index 5bbdd19636c9a799a2940f1cacfe0ed6ae4a5c20..703b0e5117484bff1d20fbc12ddfdcf5fbaba6aa 100644
--- a/typo3/sysext/about/Resources/Private/Templates/Modules/Index.html
+++ b/typo3/sysext/about/Resources/Private/Templates/Modules/Index.html
@@ -2,7 +2,7 @@
<f:layout name="Default" />
<f:section name="Content">
- <div class="container container-small">
+ <div class="container-small">
<f:render partial="Logo" arguments="{_all}" />
<p>
<f:translate key="LLL:EXT:lang/locallang_alt_intro.xlf:introtext2" />
diff --git a/typo3/sysext/backend/Classes/Backend/ToolbarItems/ClearCacheToolbarItem.php b/typo3/sysext/backend/Classes/Backend/ToolbarItems/ClearCacheToolbarItem.php
index 38af53738787d6f989cdc02508590cec0657fdc3..47429506c11ea4744ef232b45ea04b5623fcb540 100644
--- a/typo3/sysext/backend/Classes/Backend/ToolbarItems/ClearCacheToolbarItem.php
+++ b/typo3/sysext/backend/Classes/Backend/ToolbarItems/ClearCacheToolbarItem.php
@@ -122,9 +122,11 @@ class ClearCacheToolbarItem implements ToolbarItemInterface
public function getItem()
{
$title = htmlspecialchars($this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:rm.clearCache_clearCache'));
- return '<span title="' . $title . '">'
- . $this->iconFactory->getIcon('apps-toolbar-menu-cache', Icon::SIZE_SMALL)->render('inline')
- . '</span>';
+ $icon = $this->iconFactory->getIcon('apps-toolbar-menu-cache', Icon::SIZE_SMALL)->render('inline');
+ return '
+ <span class="toolbar-item-icon" title="' . $title . '">' . $icon . '</span>
+ <span class="toolbar-item-title">' . $title . '</span>
+ ';
}
/**
@@ -135,17 +137,30 @@ class ClearCacheToolbarItem implements ToolbarItemInterface
public function getDropDown()
{
$result = [];
- $result[] = '<ul class="dropdown-list">';
+ $result[] = '<h3 class="dropdown-headline">';
+ $result[] = htmlspecialchars($this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:rm.clearCache_clearCache'));
+ $result[] = '</h3>';
+ $result[] = '<hr>';
+ $result[] = '<div class="dropdown-table">';
foreach ($this->cacheActions as $cacheAction) {
$title = $cacheAction['description'] ?: $cacheAction['title'];
- $result[] = '<li>';
- $result[] = '<a class="dropdown-list-link" href="' . htmlspecialchars($cacheAction['href']) . '">';
- $result[] = $cacheAction['icon'] . ' ' . htmlspecialchars($cacheAction['title']);
- $result[] = '<br/><small>' . htmlspecialchars($title) . '</small>';
+
+ $result[] = '<div class="dropdown-table-row">';
+
+ $result[] = '<div class="dropdown-table-column dropdown-table-column-top dropdown-table-icon">';
+ $result[] = $cacheAction['icon'];
+ $result[] = '</div>';
+
+ $result[] = '<div class="dropdown-table-column dropdown-table-column-top dropdown-table-text">';
+ $result[] = '<a href="' . htmlspecialchars($cacheAction['href']) . '">';
+ $result[] = htmlspecialchars($cacheAction['title']);
+ $result[] = '<br><small class="text-muted">' . htmlspecialchars($title) . '</small>';
$result[] = '</a>';
- $result[] = '</li>';
+ $result[] = '</div>';
+
+ $result[] = '</div>';
}
- $result[] = '</ul>';
+ $result[] = '</div>';
return implode(LF, $result);
}
diff --git a/typo3/sysext/backend/Classes/Backend/ToolbarItems/HelpToolbarItem.php b/typo3/sysext/backend/Classes/Backend/ToolbarItems/HelpToolbarItem.php
index bb624a9986b65a2785e5d33461738ce99c23531d..cbbfc867c4248f5ab48b24a773eb516ed8f230f4 100644
--- a/typo3/sysext/backend/Classes/Backend/ToolbarItems/HelpToolbarItem.php
+++ b/typo3/sysext/backend/Classes/Backend/ToolbarItems/HelpToolbarItem.php
@@ -69,7 +69,12 @@ class HelpToolbarItem implements ToolbarItemInterface
*/
public function getItem()
{
- return $this->iconFactory->getIcon('apps-toolbar-menu-help', Icon::SIZE_SMALL)->render('inline');
+ $title = htmlspecialchars($this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.help'));
+ $icon = $this->iconFactory->getIcon('apps-toolbar-menu-help', Icon::SIZE_SMALL)->render('inline');
+ return '
+ <span class="toolbar-item-icon" title="' . $title . '">' . $icon . '</span>
+ <span class="toolbar-item-title">' . $title . '</span>
+ ';
}
/**
@@ -80,25 +85,28 @@ class HelpToolbarItem implements ToolbarItemInterface
public function getDropDown()
{
$dropdown = [];
- $dropdown[] = '<ul class="dropdown-list">';
+ $dropdown[] = '<h3 class="dropdown-headline">' . htmlspecialchars($this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.help')) . '</h3>';
+ $dropdown[] = '<hr>';
+ $dropdown[] = '<div class="dropdown-table">';
foreach ($this->helpModuleMenu->getChildren() as $module) {
/** @var BackendModule $module */
- $moduleIcon = $module->getIcon();
- $dropdown[] ='<li'
+ $dropdown[] = '<div'
+ . ' class="dropdown-table-row"'
. ' id="' . htmlspecialchars($module->getName()) . '"'
- . ' class="typo3-module-menu-item submodule mod-' . htmlspecialchars($module->getName()) . '" '
. ' data-modulename="' . htmlspecialchars($module->getName()) . '"'
. ' data-navigationcomponentid="' . htmlspecialchars($module->getNavigationComponentId()) . '"'
. ' data-navigationframescript="' . htmlspecialchars($module->getNavigationFrameScript()) . '"'
. ' data-navigationframescriptparameters="' . htmlspecialchars($module->getNavigationFrameScriptParameters()) . '"'
. '>';
- $dropdown[] = '<a title="' . htmlspecialchars($module->getDescription()) . '" href="' . htmlspecialchars($module->getLink()) . '" class="dropdown-list-link modlink">';
- $dropdown[] = '<span class="submodule-icon typo3-app-icon"><span><span>' . $moduleIcon . '</span></span></span>';
- $dropdown[] = '<span class="submodule-label">' . htmlspecialchars($module->getTitle()) . '</span>';
+ $dropdown[] = '<div class="dropdown-table-column dropdown-table-icon">' . $module->getIcon() . '</div>';
+ $dropdown[] = '<div class="dropdown-table-column dropdown-table-title">';
+ $dropdown[] = '<a title="' . htmlspecialchars($module->getDescription()) . '" href="' . htmlspecialchars($module->getLink()) . '" class="modlink">';
+ $dropdown[] = htmlspecialchars($module->getTitle());
$dropdown[] = '</a>';
- $dropdown[] = '</li>';
+ $dropdown[] = '</div>';
+ $dropdown[] = '</div>';
}
- $dropdown[] = '</ul>';
+ $dropdown[] = '</div>';
return implode(LF, $dropdown);
}
@@ -109,7 +117,7 @@ class HelpToolbarItem implements ToolbarItemInterface
*/
public function getAdditionalAttributes()
{
- return ['class' => 'typo3-module-menu-group'];
+ return [];
}
/**
@@ -131,4 +139,14 @@ class HelpToolbarItem implements ToolbarItemInterface
{
return 70;
}
+
+ /**
+ * Returns LanguageService
+ *
+ * @return \TYPO3\CMS\Lang\LanguageService
+ */
+ protected function getLanguageService()
+ {
+ return $GLOBALS['LANG'];
+ }
}
diff --git a/typo3/sysext/backend/Classes/Backend/ToolbarItems/LiveSearchToolbarItem.php b/typo3/sysext/backend/Classes/Backend/ToolbarItems/LiveSearchToolbarItem.php
index 644fca975873027854cc7147978131833c0c3c7e..de040e0b3f89a4019b78c2d81b84937f2cbe05c7 100644
--- a/typo3/sysext/backend/Classes/Backend/ToolbarItems/LiveSearchToolbarItem.php
+++ b/typo3/sysext/backend/Classes/Backend/ToolbarItems/LiveSearchToolbarItem.php
@@ -16,6 +16,8 @@ namespace TYPO3\CMS\Backend\Backend\ToolbarItems;
use TYPO3\CMS\Backend\Domain\Repository\Module\BackendModuleRepository;
use TYPO3\CMS\Backend\Toolbar\ToolbarItemInterface;
+use TYPO3\CMS\Core\Imaging\Icon;
+use TYPO3\CMS\Core\Imaging\IconFactory;
use TYPO3\CMS\Core\Page\PageRenderer;
use TYPO3\CMS\Core\Utility\GeneralUtility;
use TYPO3\CMS\Lang\LanguageService;
@@ -25,12 +27,18 @@ use TYPO3\CMS\Lang\LanguageService;
*/
class LiveSearchToolbarItem implements ToolbarItemInterface
{
+ /**
+ * @var IconFactory
+ */
+ protected $iconFactory;
+
/**
* Constructor
*/
public function __construct()
{
$this->getPageRenderer()->loadRequireJsModule('TYPO3/CMS/Backend/LiveSearch');
+ $this->iconFactory = GeneralUtility::makeInstance(IconFactory::class);
}
/**
@@ -58,11 +66,17 @@ class LiveSearchToolbarItem implements ToolbarItemInterface
public function getItem()
{
return '
- <form class="typo3-topbar-navigation-search t3js-topbar-navigation-search live-search-wrapper" role="search">
+ <form class="t3js-topbar-navigation-search toolbar-item-search-form live-search-wrapper" role="search">
<div class="form-group">
- <input type="text" class="form-control t3js-topbar-navigation-search-field" placeholder="' . htmlspecialchars($this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.search')) . '" id="live-search-box" autocomplete="off">
+ <div class="form-control-holder">
+ <div class="form-control-icon">
+ ' . $this->iconFactory->getIcon('apps-toolbar-menu-search', Icon::SIZE_SMALL)->render('inline') . '
+ </div>
+ <input type="text" class="form-control toolbar-item-search-field t3js-topbar-navigation-search-field" placeholder="' . htmlspecialchars($this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.search')) . '" id="live-search-box" autocomplete="off">
+ </div>
</div>
</form>
+ <a href="#" class="dropdown-toggle t3js-toolbar-search-dropdowntoggle" data-toggle="dropdown" aria-expanded="false"></a>
<div class="dropdown-menu" role="menu"></div>
';
}
@@ -74,7 +88,7 @@ class LiveSearchToolbarItem implements ToolbarItemInterface
*/
public function getAdditionalAttributes()
{
- return ['class' => 'dropdown'];
+ return ['class' => 'toolbar-item-search t3js-toolbar-item-search'];
}
/**
diff --git a/typo3/sysext/backend/Classes/Backend/ToolbarItems/ShortcutToolbarItem.php b/typo3/sysext/backend/Classes/Backend/ToolbarItems/ShortcutToolbarItem.php
index 9eabf97a75e76591ae7de9208662bcfba17632be..1f297f297ea5ff931fbb94dae0dd2f9987d0532c 100644
--- a/typo3/sysext/backend/Classes/Backend/ToolbarItems/ShortcutToolbarItem.php
+++ b/typo3/sysext/backend/Classes/Backend/ToolbarItems/ShortcutToolbarItem.php
@@ -130,7 +130,11 @@ class ShortcutToolbarItem implements ToolbarItemInterface
public function getItem()
{
$title = htmlspecialchars($this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.bookmarks'));
- return '<span title="' . $title . '">' . $this->iconFactory->getIcon('apps-toolbar-menu-shortcut', Icon::SIZE_SMALL)->render('inline') . '</span>';
+ $icon = $this->iconFactory->getIcon('apps-toolbar-menu-shortcut', Icon::SIZE_SMALL)->render('inline');
+ return '
+ <span class="toolbar-item-icon" title="' . $title . '">' . $icon . '</span>
+ <span class="toolbar-item-title">' . $title . '</span>
+ ';
}
/**
@@ -141,67 +145,57 @@ class ShortcutToolbarItem implements ToolbarItemInterface
public function getDropDown()
{
$languageService = $this->getLanguageService();
- $shortcutGroup = htmlspecialchars($languageService->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.bookmarksGroup'));
$shortcutEdit = htmlspecialchars($languageService->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.bookmarksEdit'));
$shortcutDelete = htmlspecialchars($languageService->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.bookmarksDelete'));
- $editIcon = '<a href="#" class="dropdown-list-link-edit shortcut-edit" ' . $shortcutEdit . '>'
+ $editIcon = '<a href="#" class="dropdown-table-actions-btn dropdown-table-actions-btn-edit t3js-shortcut-edit" title="' . $shortcutEdit . '">'
. $this->iconFactory->getIcon('actions-open', Icon::SIZE_SMALL)->render('inline') . '</a>';
- $deleteIcon = '<a href="#" class="dropdown-list-link-delete shortcut-delete" title="' . $shortcutDelete . '">'
+ $deleteIcon = '<a href="#" class="dropdown-table-actions-btn dropdown-table-actions-btn-delete t3js-shortcut-delete" title="' . $shortcutDelete . '">'
. $this->iconFactory->getIcon('actions-delete', Icon::SIZE_SMALL)->render('inline') . '</a>';
- $shortcutMenu[] = '<ul class="dropdown-list">';
-
- // Render shortcuts with no group (group id = 0) first
- $noGroupShortcuts = $this->getShortcutsByGroup(0);
- foreach ($noGroupShortcuts as $shortcut) {
- $shortcutMenu[] = '
- <li class="shortcut" data-shortcutid="' . (int)$shortcut['raw']['uid'] . '">
- <a class="dropdown-list-link dropdown-link-list-add-editdelete" href="#" onclick="' . htmlspecialchars($shortcut['action']) . ' return false;">' .
- $shortcut['icon'] . ' ' .
- htmlspecialchars($shortcut['label']) .
- '</a>
- ' . $editIcon . $deleteIcon . '
- </li>';
- }
- // Now render groups and the contained shortcuts
+ $shortcutMenu = [];
+ $shortcutMenu[] = '<h3 class="dropdown-headline">' . htmlspecialchars($this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.bookmarks')) . '</h3>';
+ $shortcutMenu[] = '<hr>';
+
+ // Render groups and the contained shortcuts
$groups = $this->getGroupsFromShortcuts();
- krsort($groups, SORT_NUMERIC);
+ $groupCount = 0;
+ arsort($groups, SORT_NUMERIC);
foreach ($groups as $groupId => $groupLabel) {
- if ($groupId != 0) {
- $shortcutGroup = '';
- if (count($shortcutMenu) > 1) {
- $shortcutGroup .= '<li class="divider"></li>';
+ $shortcuts = $this->getShortcutsByGroup($groupId);
+ if (count($shortcuts) > 0) {
+ if ($groupCount !== 0) {
+ $shortcutMenu[] = '<hr>';
+ }
+ $groupCount++;
+ if ($groupLabel) {
+ $shortcutMenu[] = '<h3 class="dropdown-headline" id="shortcut-group-' . (int)$groupId . '">' . $groupLabel . '</h3>';
}
- $shortcutGroup .= '
- <li class="dropdown-header" id="shortcut-group-' . (int)$groupId . '">
- ' . $groupLabel . '
- </li>';
- $shortcuts = $this->getShortcutsByGroup($groupId);
- $i = 0;
+ $shortcutMenu[] = '<div class="dropdown-table" data-shortcutgroup="' . (int)$groupId . '">';
foreach ($shortcuts as $shortcut) {
- $i++;
- $shortcutGroup .= '
- <li class="shortcut" data-shortcutid="' . (int)$shortcut['raw']['uid'] . '" data-shortcutgroup="' . (int)$groupId . '">
- <a class="dropdown-list-link dropdown-link-list-add-editdelete" href="#" onclick="' . htmlspecialchars($shortcut['action']) . ' return false;">' .
- $shortcut['icon'] . ' ' .
- htmlspecialchars($shortcut['label']) .
- '</a>
- ' . $editIcon . $deleteIcon . '
- </li>';
+ $shortcutItem = '<div class="dropdown-table-row t3js-topbar-shortcut" data-shortcutid="' . (int)$shortcut['raw']['uid'] . '" data-shortcutgroup="' . (int)$groupId . '">';
+ $shortcutItem .= '<div class="dropdown-table-column dropdown-table-icon">';
+ $shortcutItem .= $shortcut['icon'];
+ $shortcutItem .= '</div>';
+ $shortcutItem .= '<div class="dropdown-table-column dropdown-table-title">';
+ $shortcutItem .= '<a class="dropdown-table-title-ellipsis" href="#" onclick="' . htmlspecialchars($shortcut['action']) . ' return false;">';
+ $shortcutItem .= htmlspecialchars($shortcut['label']);
+ $shortcutItem .= '</a>';
+ $shortcutItem .= '</div>';
+ $shortcutItem .= '<div class="dropdown-table-column dropdown-table-actions">' . $editIcon . $deleteIcon . '</div>';
+ $shortcutItem .= '</div>';
+ $shortcutMenu[] = $shortcutItem;
}
- $shortcutMenu[] = $shortcutGroup;
+ $shortcutMenu[] = '</div>';
}
}
- $shortcutMenu[] = '</ul>';
+ $compiledShortcutMenu = implode(LF, $shortcutMenu);
if (count($shortcutMenu) === 2) {
// No shortcuts added yet, show a small help message how to add shortcuts
$title = htmlspecialchars($languageService->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.bookmarks'));
$icon = '<span title="' . $title . '">' . $this->iconFactory->getIcon('actions-system-shortcut-new', Icon::SIZE_SMALL)->render('inline') . '</span>';
$label = str_replace('%icon%', $icon, htmlspecialchars($languageService->sL('LLL:EXT:lang/locallang_misc.xlf:bookmarkDescription')));
- $compiledShortcutMenu = '<p>' . $label . '</p>';
- } else {
- $compiledShortcutMenu = implode(LF, $shortcutMenu);
+ $compiledShortcutMenu .= '<p>' . $label . '</p>';
}
return $compiledShortcutMenu;
@@ -477,6 +471,7 @@ class ShortcutToolbarItem implements ToolbarItemInterface
*/
public function editFormAction(ServerRequestInterface $request, ResponseInterface $response)
{
+ $languageService = $this->getLanguageService();
$parsedBody = $request->getParsedBody();
$queryParams = $request->getQueryParams();
@@ -495,11 +490,14 @@ class ShortcutToolbarItem implements ToolbarItemInterface
// build the form
$content = '
- <form class="shortcut-form" role="form">
+ <form class="shortcut-form" role="form" data-shortcutid="' . (int)$selectedShortcutId . '">
+ <h3 class="dropdown-headline">
+ ' . htmlspecialchars($languageService->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.bookmarksEdit')) . '
+ </h3>
+ <hr>
<div class="form-group">
<input type="text" class="form-control" name="shortcut-title" value="' . htmlspecialchars($selectedShortcut['label']) . '">
</div>';
-
$content .= '
<div class="form-group">
<select class="form-control" name="shortcut-group">';
@@ -509,6 +507,7 @@ class ShortcutToolbarItem implements ToolbarItemInterface
$content .= '
</select>
</div>
+ <hr>
<input type="button" class="btn btn-default shortcut-form-cancel" value="Cancel">
<input type="button" class="btn btn-success shortcut-form-save" value="Save">
</form>';
diff --git a/typo3/sysext/backend/Classes/Backend/ToolbarItems/SystemInformationToolbarItem.php b/typo3/sysext/backend/Classes/Backend/ToolbarItems/SystemInformationToolbarItem.php
index 3c9de2345e42051c771f0d87f457eacdca8e9268..55c66f89507c475ddfa605c684fca3809a475837 100644
--- a/typo3/sysext/backend/Classes/Backend/ToolbarItems/SystemInformationToolbarItem.php
+++ b/typo3/sysext/backend/Classes/Backend/ToolbarItems/SystemInformationToolbarItem.php
@@ -376,7 +376,11 @@ class SystemInformationToolbarItem implements ToolbarItemInterface
{
$title = htmlspecialchars($this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.sysinfo'));
$icon = $this->iconFactory->getIcon('actions-system-list-open', Icon::SIZE_SMALL)->render('inline');
- return '<span title="' . $title . '">' . $icon . '<span id="t3js-systeminformation-counter" class="badge"></span></span>';
+ return '
+ <span class="toolbar-item-icon" title="' . $title . '">' . $icon . '</span>
+ <span class="toolbar-item-title">' . $title . '</span>
+ <span class="toolbar-item-badge t3js-systeminformation-counter badge"></span>
+ ';
}
/**
diff --git a/typo3/sysext/backend/Classes/Backend/ToolbarItems/UserToolbarItem.php b/typo3/sysext/backend/Classes/Backend/ToolbarItems/UserToolbarItem.php
index c6f7fa8c6dd873ea9e0e413c89afafddf7c41f5e..7a38a23b3266572dd3a0da374c1b5a810ba69fdd 100644
--- a/typo3/sysext/backend/Classes/Backend/ToolbarItems/UserToolbarItem.php
+++ b/typo3/sysext/backend/Classes/Backend/ToolbarItems/UserToolbarItem.php
@@ -77,10 +77,10 @@ class UserToolbarItem implements ToolbarItemInterface
}
$html = [];
- $html[] = $icon;
- $html[] = '<span title="' . htmlspecialchars($title) . '">';
+ $html[] = '<span class="toolbar-item-avatar">' . $icon . '</span>';
+ $html[] = '<span class="toolbar-item-name" title="' . htmlspecialchars($title) . '">';
$html[] = htmlspecialchars($label);
- $html[] = '<span class="caret"></span></span>';
+ $html[] = '</span>';
return implode(LF, $html);
}
@@ -96,7 +96,7 @@ class UserToolbarItem implements ToolbarItemInterface
$languageService = $this->getLanguageService();
$dropdown = [];
- $dropdown[] = '<ul class="dropdown-list">';
+ $dropdown[] = '<div class="dropdown-table">';
/** @var BackendModuleRepository $backendModuleRepository */
$backendModuleRepository = GeneralUtility::makeInstance(BackendModuleRepository::class);
@@ -105,33 +105,32 @@ class UserToolbarItem implements ToolbarItemInterface
if ($userModuleMenu != false && $userModuleMenu->getChildren()->count() > 0) {
foreach ($userModuleMenu->getChildren() as $module) {
/** @var BackendModule $module */
- $dropdown[] ='<li'
+ $dropdown[] = '<div'
+ . ' class="dropdown-table-row"'
. ' id="' . htmlspecialchars($module->getName()) . '"'
- . ' class="typo3-module-menu-item submodule mod-' . htmlspecialchars($module->getName()) . '" '
. ' data-modulename="' . htmlspecialchars($module->getName()) . '"'
. ' data-navigationcomponentid="' . htmlspecialchars($module->getNavigationComponentId()) . '"'
. ' data-navigationframescript="' . htmlspecialchars($module->getNavigationFrameScript()) . '"'
. ' data-navigationframescriptparameters="' . htmlspecialchars($module->getNavigationFrameScriptParameters()) . '"'
. '>';
- $dropdown[] = '<a title="' . htmlspecialchars($module->getDescription()) . '" href="' . htmlspecialchars($module->getLink()) . '" class="dropdown-list-link modlink">';
- $dropdown[] = '<span class="submodule-icon typo3-app-icon"><span><span>' . $module->getIcon() . '</span></span></span>';
- $dropdown[] = '<span class="submodule-label">' . htmlspecialchars($module->getTitle()) . '</span>';
+ $dropdown[] = '<div class="dropdown-table-column dropdown-table-icon">' . $module->getIcon() . '</div>';
+ $dropdown[] = '<div class="dropdown-table-column dropdown-table-title">';
+ $dropdown[] = '<a title="' . htmlspecialchars($module->getDescription()) . '" href="' . htmlspecialchars($module->getLink()) . '" class="modlink">';
+ $dropdown[] = htmlspecialchars($module->getTitle());
$dropdown[] = '</a>';
- $dropdown[] = '</li>';
+ $dropdown[] = '</div>';
+ $dropdown[] = '</div>';
}
- $dropdown[] = '<li class="divider"></li>';
}
+ $dropdown[] = '</div>';
+ $dropdown[] = '<hr>';
// Logout button
$buttonLabel = 'LLL:EXT:lang/locallang_core.xlf:' . ($backendUser->user['ses_backuserid'] ? 'buttons.exit' : 'buttons.logout');
- $dropdown[] = '<li class="reset-dropdown">';
$dropdown[] = '<a href="' . htmlspecialchars(BackendUtility::getModuleUrl('logout')) . '" class="btn btn-danger pull-right" target="_top">';
$dropdown[] = $this->iconFactory->getIcon('actions-logout', Icon::SIZE_SMALL)->render('inline') . ' ';
$dropdown[] = htmlspecialchars($languageService->sL($buttonLabel));
$dropdown[] = '</a>';
- $dropdown[] = '</li>';
-
- $dropdown[] = '</ul>';
return implode(LF, $dropdown);
}
@@ -144,8 +143,9 @@ class UserToolbarItem implements ToolbarItemInterface
public function getAdditionalAttributes()
{
$result = [];
+ $result['class'] = 'toolbar-item-user';
if ($this->getBackendUser()->user['ses_backuserid']) {
- $result['class'] = 'su-user';
+ $result['class'] .= ' su-user';
}
return $result;
}
diff --git a/typo3/sysext/backend/Classes/Controller/BackendController.php b/typo3/sysext/backend/Classes/Controller/BackendController.php
index a0861a6f7e4911daed19787a5a365865a17abcc7..b1a3bfad7dfc7bd882ec7a71a50b274ffce12309 100644
--- a/typo3/sysext/backend/Classes/Controller/BackendController.php
+++ b/typo3/sysext/backend/Classes/Controller/BackendController.php
@@ -20,6 +20,7 @@ use TYPO3\CMS\Backend\Domain\Repository\Module\BackendModuleRepository;
use TYPO3\CMS\Backend\Module\ModuleLoader;
use TYPO3\CMS\Backend\Toolbar\ToolbarItemInterface;
use TYPO3\CMS\Backend\Utility\BackendUtility;
+use TYPO3\CMS\Core\Imaging\IconFactory;
use TYPO3\CMS\Core\Page\PageRenderer;
use TYPO3\CMS\Core\Utility\ExtensionManagementUtility;
use TYPO3\CMS\Core\Utility\GeneralUtility;
@@ -93,6 +94,11 @@ class BackendController
*/
protected $pageRenderer;
+ /**
+ * @var IconFactory
+ */
+ protected $iconFactory;
+
/**
* Constructor
*/
@@ -100,6 +106,7 @@ class BackendController
{
$this->getLanguageService()->includeLLFile('EXT:lang/locallang_misc.xlf');
$this->backendModuleRepository = GeneralUtility::makeInstance(BackendModuleRepository::class);
+ $this->iconFactory = GeneralUtility::makeInstance(IconFactory::class);
// Set debug flag for BE development only
$this->debug = (int)$GLOBALS['TYPO3_CONF_VARS']['BE']['debug'] === 1;
@@ -119,10 +126,7 @@ class BackendController
'modulemenu' => 'EXT:backend/Resources/Public/JavaScript/modulemenu.js',
'evalfield' => 'EXT:backend/Resources/Public/JavaScript/jsfunc.evalfield.js',
'backend' => 'EXT:backend/Resources/Public/JavaScript/backend.js',
- 'viewport' => 'EXT:backend/Resources/Public/JavaScript/extjs/viewport.js',
'iframepanel' => 'EXT:backend/Resources/Public/JavaScript/iframepanel.js',
- 'backendcontentiframe' => 'EXT:backend/Resources/Public/JavaScript/extjs/backendcontentiframe.js',
- 'viewportConfiguration' => 'EXT:backend/Resources/Public/JavaScript/extjs/viewportConfiguration.js',
];
$this->pageRenderer->loadRequireJsModule('TYPO3/CMS/Backend/LoginRefresh', 'function(LoginRefresh) {
LoginRefresh.setIntervalTime(' . MathUtility::forceIntegerInRange((int)$GLOBALS['TYPO3_CONF_VARS']['BE']['sessionTimeout'] - 60, 60) . ');
@@ -131,6 +135,9 @@ class BackendController
LoginRefresh.initialize();
}');
+ // load Toolbar class
+ $this->pageRenderer->loadRequireJsModule('TYPO3/CMS/Backend/Toolbar');
+
// load Utility class
$this->pageRenderer->loadRequireJsModule('TYPO3/CMS/Backend/Utility');
@@ -327,9 +334,8 @@ class BackendController
$extOnReadyCode .= 'Ext.state.Manager.getProvider().initState(' . json_encode($states) . ');';
}
- $extOnReadyCode .= '
- TYPO3.Backend = new TYPO3.Viewport(TYPO3.Viewport.configuration)';
$this->pageRenderer->addExtOnReadyCode($extOnReadyCode);
+
// Set document title:
$title = $GLOBALS['TYPO3_CONF_VARS']['SYS']['sitename'] ? $GLOBALS['TYPO3_CONF_VARS']['SYS']['sitename'] . ' [TYPO3 CMS ' . TYPO3_version . ']' : 'TYPO3 CMS ' . TYPO3_version;
// Renders the module page
@@ -406,9 +412,8 @@ class BackendController
// Merge class: Add dropdown class if hasDropDown, add classes from additonal attributes
$classes = [];
- if ($hasDropDown) {
- $classes[] = 'dropdown';
- }
+ $classes[] = 'toolbar-item';
+ $classes[] = 't3js-toolbar-item';
if (isset($additionalAttributes['class'])) {
$classes[] = $additionalAttributes['class'];
unset($additionalAttributes['class']);
@@ -430,7 +435,7 @@ class BackendController
$toolbar[] = '<li ' . implode(' ', $liAttributes) . '>';
if ($hasDropDown) {
- $toolbar[] = '<a href="#" class="dropdown-toggle" data-toggle="dropdown">';
+ $toolbar[] = '<a href="#" class="toolbar-item-link dropdown-toggle" data-toggle="dropdown">';
$toolbar[] = $toolbarItem->getItem();
$toolbar[] = '</a>';
$toolbar[] = '<div class="dropdown-menu" role="menu">';
diff --git a/typo3/sysext/backend/Resources/Private/Templates/Backend/Main.html b/typo3/sysext/backend/Resources/Private/Templates/Backend/Main.html
index c82fc334460f48da44d2b63537d7a731c4bb7454..4300e71fa59a0affcd331660b26ed5744c15c7f2 100644
--- a/typo3/sysext/backend/Resources/Private/Templates/Backend/Main.html
+++ b/typo3/sysext/backend/Resources/Private/Templates/Backend/Main.html
@@ -1,14 +1,55 @@
-<div class="typo3-topbar-container" role="navigation" id="typo3-top-container">
- <div class="typo3-topbar-site">
- <a class="typo3-topbar-site-logo" href="{logoLink}" target="_blank">
- <img src="{logoUrl}" width="{logoWidth}" height="{logoHeight}" title="TYPO3 Content Management System" alt="" />
- </a>
- <span class="typo3-topbar-site-name">{siteName} [{applicationVersion}]</span>
- </div>
- <div class="typo3-topbar-navigation" id="typo3-topbar-navigation">
- <ul class="typo3-topbar-navigation-items" data-typo3-role="typo3-module-menu">
- <f:format.raw>{toolbar}</f:format.raw>
- </ul>
+{namespace core = TYPO3\CMS\Core\ViewHelpers}
+<div class="scaffold t3js-scaffold scaffold-modulemenu-expanded">
+ <div class="scaffold-topbar t3js-scaffold-topbar">
+
+ <div class="topbar">
+ <div class="topbar-header">
+ <button class="topbar-button topbar-button-modulemenu t3js-topbar-button-modulemenu">
+ <core:icon identifier="actions-move-move" alternativeMarkupIdentifier="inline" />
+ </button>
+ <button class="topbar-button topbar-button-navigationcomponent t3js-topbar-button-navigationcomponent">
+ <core:icon identifier="apps-pagetree-category-collapse-all" alternativeMarkupIdentifier="inline" />
+ </button>
+ <a href="{logoLink}" class="topbar-header-site" target="_blank">
+ <span class="topbar-header-site-logo">
+ <img src="{logoUrl}" width="{logoWidth}" height="{logoHeight}" title="TYPO3 Content Management System" alt="" />
+ </span>
+ <span class="topbar-header-site-title">
+ <span class="topbar-header-site-name">{siteName}</span>
+ <span class="topbar-header-site-version">{applicationVersion}</span>
+ </span>
+ </a>
+ <button class="topbar-button topbar-button-toolbar t3js-topbar-button-toolbar">
+ <core:icon identifier="actions-system-extension-configure" alternativeMarkupIdentifier="inline" />
+ </button>
+ <button class="topbar-button topbar-button-search t3js-topbar-button-search">
+ <core:icon identifier="actions-search" alternativeMarkupIdentifier="inline" />
+ </button>
+ </div>
+ </div>
+
+ </div>
+ <div class="scaffold-modulemenu t3js-scaffold-modulemenu">
+ <div class="modulemenu t3js-modulemenu">
+ <f:format.raw>{moduleMenu}</f:format.raw>
+ </div>
+ </div>
+ <div class="scaffold-toolbar t3js-scaffold-toolbar">
+ <div class="toolbar t3js-topbar-toolbar">
+ <ul class="toolbar-list" data-typo3-role="typo3-module-menu">
+ <f:format.raw>{toolbar}</f:format.raw>
+ </ul>
+ </div>
+ </div>
+ <div class="scaffold-content t3js-scaffold-content">
+ <div class="scaffold-content-navigation t3js-scaffold-content-navigation">
+ <div class="scaffold-content-navigation-component" data-component="typo3-navigationIframe">
+ <iframe src="about:blank" id="typo3-navigationContainerIframe" class="scaffold-content-navigation-iframe t3js-scaffold-content-navigation-iframe"></iframe>
+ </div>
+ </div>
+ <div class="scaffold-content-module t3js-scaffold-content-module">
+ <iframe name="contentIframe" id="typo3-contentIframe" class="scaffold-content-module-iframe t3js-scaffold-content-module-iframe"></iframe>
+ </div>
+ <div class="scaffold-content-overlay t3js-scaffold-content-overlay"></div>
</div>
</div>
-<f:format.raw>{moduleMenu}</f:format.raw>
diff --git a/typo3/sysext/backend/Resources/Private/Templates/ModuleMenu/Main.html b/typo3/sysext/backend/Resources/Private/Templates/ModuleMenu/Main.html
index 4ac7d05038bcb8ed11acf9a38e7e2aad521a5db0..2fc216a5677a20eccc673a5e75cab448960656d5 100644
--- a/typo3/sysext/backend/Resources/Private/Templates/ModuleMenu/Main.html
+++ b/typo3/sysext/backend/Resources/Private/Templates/ModuleMenu/Main.html
@@ -1,35 +1,30 @@
-<ul class="nav nav-modules" data-typo3-role="typo3-module-menu" id="typo3-menu">
+{namespace core = TYPO3\CMS\Core\ViewHelpers}
+<ul class="nav nav-modules" data-role="modulemenu" id="menu">
<f:for each="{modules}" as="mainModule">
- <li class="typo3-module-menu-group expanded" id="{mainModule.name}" data-modulename="{mainModule.name}" data-navigationcomponentid="{mainModule.navigationComponentId}" data-navigationframescript="{mainModule.navigationFrameScript}" data-navigationframescriptparameters="{mainModule.navigationFrameScriptParameters}">
- <div class="typo3-module-menu-group-header">
- <span class="typo3-app-icon typo3-module-menu-group-icon">
- <span>
+ <li class="modulemenu-group expanded" id="{mainModule.name}" data-modulename="{mainModule.name}" data-navigationcomponentid="{mainModule.navigationComponentId}" data-navigationframescript="{mainModule.navigationFrameScript}" data-navigationframescriptparameters="{mainModule.navigationFrameScriptParameters}">
+ <div class="modulemenu-group-header">
+ <span class="modulemenu-icon modulemenu-group-icon">
<f:if condition="{mainModule.icon}">
<f:then>
<f:format.raw>{mainModule.icon}</f:format.raw>
</f:then>
<f:else>
- <span><i class="fa fa-bars"></i></span>
+ <core:icon identifier="actions-move-move" size="default" alternativeMarkupIdentifier="inline" />
</f:else>
</f:if>
- </span>
</span>
- <span class="typo3-module-menu-group-title">
+ <span class="modulemenu-group-title">
{mainModule.title} <span class="caret"></span>
</span>
</div>
- <ul class="typo3-module-menu-group-container">
+ <ul class="modulemenu-group-container">
<f:for each="{mainModule.children}" as="subModule">
- <li id="{subModule.name}" class="typo3-module-menu-item t3js-mainmodule" data-modulename="{mainModule.name}" data-navigationcomponentid="{subModule.navigationComponentId}" data-navigationframescript="{subModule.navigationFrameScript}" data-navigationframescriptparameters="{subModule.navigationFrameScriptParameters}">
- <a title="{subModule.description}" href="{subModule.link}" class="typo3-module-menu-item-link">
- <span class="typo3-app-icon typo3-module-menu-item-icon">
- <span>
- <span>
- <f:format.raw>{subModule.icon}</f:format.raw>
- </span>
- </span>
+ <li id="{subModule.name}" class="modulemenu-item t3js-mainmodule" data-modulename="{mainModule.name}" data-navigationcomponentid="{subModule.navigationComponentId}" data-navigationframescript="{subModule.navigationFrameScript}" data-navigationframescriptparameters="{subModule.navigationFrameScriptParameters}">
+ <a title="{subModule.description}" href="{subModule.link}" class="modulemenu-item-link">
+ <span class="modulemenu-icon modulemenu-item-icon">
+ <f:format.raw>{subModule.icon}</f:format.raw>
</span>
- <span class="typo3-module-menu-item-title">
+ <span class="modulemenu-item-title">
{subModule.title}
</span>
</a>
diff --git a/typo3/sysext/backend/Resources/Private/Templates/ToolbarMenu/SystemInformation.html b/typo3/sysext/backend/Resources/Private/Templates/ToolbarMenu/SystemInformation.html
index 1273283426492f50d2f48b0af2b6553cfa604477..fd481b443b57170333b8dc5a4c19ab1ac9a750b5 100644
--- a/typo3/sysext/backend/Resources/Private/Templates/ToolbarMenu/SystemInformation.html
+++ b/typo3/sysext/backend/Resources/Private/Templates/ToolbarMenu/SystemInformation.html
@@ -1,43 +1,45 @@
-<ul class="dropdown-list" data-count="{count}" data-severityclass="{severityBadgeClass}">
- <li class="dropdown-header"><f:translate key="systemmessage.header" /></li>
- <li id="systeminformation_installtool" class="dropdown-intro typo3-module-menu-item submodule mod-system_extinstall" data-modulename="system_extinstall">
- <f:format.raw><f:translate key="systemmessage.intro" arguments="{0: '{installToolUrl}'}" /></f:format.raw>
- </li>
- <li>
- <dl class="dl-horizontal">
- <f:for each="{systemInformation}" as="info">
- <dt title="{info.title}"><f:format.raw>{info.icon}</f:format.raw> {info.title}</dt>
- <dd><f:if condition="{info.status}">
- <f:then>
- <span class="text-{info.status}">{info.value}</span>
- </f:then>
- <f:else>
- {info.value}
- </f:else>
- </f:if></dd>
- </f:for>
- </dl>
- </li>
- <li class="divider"></li>
- <f:if condition="{messages -> f:count()} > 0">
- <f:then>
- <f:for each="{messages}" as="message">
- <f:if condition="{message.module}">
- <f:then>
- <li id="systeminformation_{message.module}" class="t3js-systeminformation-module dropdown-intro typo3-module-menu-item submodule mod-{message.module}" data-modulename="{message.module}">
- <span class="text-{message.status}"><f:format.raw>{message.text}</f:format.raw></span>
- </li>
- </f:then>
- <f:else>
- <li>
- <span class="text-{message.status}"><f:format.raw>{message.text}</f:format.raw></span>
- </li>
- </f:else>
- </f:if>
- </f:for>
- </f:then>
- <f:else>
- <li><span class="text-success"><f:format.nl2br><f:translate key="systemmessage.allgood" /></f:format.nl2br></span></li>
- </f:else>
- </f:if>
-</ul>
+<span class="systeminformationtoolbaritem-container t3js-systeminformation-container" data-count="{count}" data-severityclass="{severityBadgeClass}"></span>
+
+<h3 class="dropdown-headline">
+ <f:translate key="systemmessage.header" />
+</h3>
+<p class="dropdown-text typo3-module-menu-item submodule mod-system_extinstall" data-modulename="system_extinstall">
+ <f:format.raw><f:translate key="systemmessage.intro" arguments="{0: '{installToolUrl}'}" /></f:format.raw>
+</p>
+
+<f:if condition="{systemInformation}">
+ <hr>
+ <div class="dropdown-table">
+ <f:for each="{systemInformation}" as="info">
+ <div class="dropdown-table-row">
+ <div class="dropdown-table-column dropdown-table-icon"><f:format.raw>{info.icon}</f:format.raw></div>
+ <div class="dropdown-table-column dropdown-table-title">{info.title}</div>
+ <div class="dropdown-table-column dropdown-table-value {f:if(condition: info.status, then: 'text-{info.status}')}">{info.value}</div>
+ </div>
+ </f:for>
+ </div>
+</f:if>
+
+<hr>
+
+<f:if condition="{messages -> f:count()} > 0">
+ <f:then>
+ <f:for each="{messages}" as="message">
+ <f:if condition="{message.module}">
+ <f:then>
+ <p id="systeminformation_{message.module}" class="dropdown-text t3js-systeminformation-module typo3-module-menu-item submodule mod-{message.module}" data-modulename="{message.module}">
+ <span class="text-{message.status}"><f:format.raw>{message.text}</f:format.raw></span>
+ </p>
+ </f:then>
+ <f:else>
+ <p class="dropdown-text text-{message.status}">
+ <f:format.raw>{message.text}</f:format.raw>
+ </p>
+ </f:else>
+ </f:if>
+ </f:for>
+ </f:then>
+ <f:else>
+ <p class="dropdown-text text-success"><f:format.nl2br><f:translate key="systemmessage.allgood" /></f:format.nl2br></p>
+ </f:else>
+</f:if>
diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css
index fa1a51000cc81794e05d614f440138e3db27e6e5..cc0751d00041aed5941a26abaff7fda9a0037e93 100644
--- a/typo3/sysext/backend/Resources/Public/Css/backend.css
+++ b/typo3/sysext/backend/Resources/Public/Css/backend.css
@@ -2754,7 +2754,8 @@ ul ol,
ol ol {
margin-bottom: 0;
}
-.list-unstyled {
+.list-unstyled,
+.modulemenu .modulemenu-group-container {
padding-left: 0;
list-style: none;
}
@@ -4836,7 +4837,7 @@ tbody.collapse.in {
list-style: none;
font-size: 12px;
text-align: left;
- background-color: #fff;
+ background-color: #424242;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 2px;
@@ -4851,7 +4852,7 @@ tbody.collapse.in {
height: 1px;
margin: 8px 0;
overflow: hidden;
- background-color: #e5e5e5;
+ background-color: #525252;
}
.dropdown-menu > li > a {
display: block;
@@ -4859,14 +4860,14 @@ tbody.collapse.in {
clear: both;
font-weight: normal;
line-height: 1.5;
- color: #5a5a5a;
+ color: #fff;
white-space: nowrap;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
text-decoration: none;
- color: #4d4d4d;
- background-color: #f5f5f5;
+ color: #fff;
+ background-color: #525252;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
@@ -4874,7 +4875,7 @@ tbody.collapse.in {
color: #fff;
text-decoration: none;
outline: 0;
- background-color: #0078e6;
+ background-color: #525252;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
@@ -7074,210 +7075,898 @@ button.close {
bottom: 20px;
}
}
-.autocomplete {
+html {
+ height: 100%;
+ overflow: hidden;
+}
+body {
+ height: 100%;
+ overflow: auto;
+}
+.scaffold {
+ background-color: #f5f5f5;
+ color: #333333;
position: relative;
+ padding-top: 45px;
+ height: 100vh;
}
-.autocomplete-results {
- z-index: 1000;
+.scaffold-topbar {
+ background-color: #1f1f1e;
+ color: #f5f5f5;
+ height: 45px;
position: absolute;
- margin: 5px 0;
- top: 100%;
+ top: 0;
right: 0;
- border: 1px solid #ddd;
- border-radius: 2px;
- background-color: #fff;
+ left: 0;
+}
+.scaffold-modulemenu {
+ background-color: #424242;
+ color: #fff;
+ position: fixed;
+ top: 45px;
+ left: 0;
+ bottom: 0;
+ width: 40px;
+ max-width: 100%;
+ z-index: 1000;
overflow: hidden;
- box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.25);
}
-.autocomplete-suggestion {
- border-top: 1px solid #ddd;
+.scaffold-modulemenu a {
+ color: rgba(255, 255, 255, 0.7);
}
-.autocomplete-suggestion:first-child {
- border-top: none;
+.scaffold-modulemenu a:hover {
+ color: #fff;
}
-.autocomplete-suggestion-link {
- padding: 5px 13px 5px 28px;
- display: block;
- text-decoration: none;
+.scaffold-modulemenu .active > a {
+ color: #fff;
}
-.autocomplete-selected .autocomplete-suggestion-link,
-.autocomplete-suggestion-link:hover {
- background-color: #fafafa;
- text-decoration: none;
+.scaffold-toolbar {
+ overflow: auto;
+ background-color: #424242;
+ color: #fff;
+ z-index: 1000;
+ position: fixed;
+ top: 45px;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ display: none;
}
-.autocomplete-info {
- padding: 5px 15px;
+.scaffold-toolbar a {
+ color: rgba(255, 255, 255, 0.7);
}
-.avatar {
- position: relative;
- display: inline-block;
- height: 32px;
- width: 32px;
- vertical-align: middle;
+.scaffold-toolbar a:hover {
+ color: #fff;
}
-.avatar-image {
- display: block;
- height: 32px;
- width: 32px;
- overflow: hidden;
- border-radius: 50%;
+.scaffold-toolbar .active > a {
+ color: #fff;
}
-.avatar-image:after {
- display: block;
- content: '';
- position: absolute;
- top: 0;
+@media (min-width: 992px) {
+ .scaffold-toolbar {
+ overflow: visible;
+ background-color: transparent;
+ height: 45px;
+ top: 0;
+ left: auto;
+ bottom: auto;
+ display: block;
+ }
+}
+@media (max-width: 991px) {
+ .scaffold-toolbar-expanded .scaffold-toolbar,
+ .scaffold-search-expanded .scaffold-toolbar {
+ display: block;
+ }
+}
+.scaffold-content {
+ position: fixed!important;
+ top: 45px;
left: 0;
+ right: 0;
+ bottom: 0;
+}
+@media (max-width: 991px) {
+ .scaffold-content {
+ left: 0!important;
+ }
+}
+.scaffold-content-navigation-iframe,
+.scaffold-content-module-iframe {
+ display: block;
+ border: none;
height: 100%;
width: 100%;
- border-radius: 50%;
- border: 1px solid rgba(255, 255, 255, 0.1);
}
-.avatar-image > img {
- width: 100% !important;
- height: auto !important;
+.scaffold-content-navigation {
+ display: none;
+ position: absolute!important;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ width: 300px;
}
-.avatar-icon {
+.scaffold-content-navigation-component {
position: absolute;
+ top: 0;
bottom: 0;
+ left: 0;
right: 0;
- height: 16px;
- width: 16px;
}
-.dropdown-toggle > .avatar {
- height: 28px;
- width: 28px;
- float: left;
- margin-right: 0.5em;
- margin-top: -5px;
+.scaffold-content-navigation-component #typo3-pagetree-treeContainer > div > .x-panel-body {
+ overflow: auto;
}
-.dropdown-toggle .avatar-image {
- height: 28px;
- width: 28px;
+.scaffold-content-module {
+ position: absolute!important;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
}
-.callout {
- background-color: #f0f0f0;
- border-left: 3px solid #ccc;
- margin: 20px 0;
- padding: 20px;
- color: #333;
+@media (max-width: 767px) {
+ .scaffold-content-module {
+ width: 100%;
+ }
}
-.callout .media {
- margin: 0;
+.scaffold-content-overlay {
+ display: none;
+ position: absolute;
+ z-index: 1040;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.65);
}
-.callout .media .fa-stack {
- color: #fff;
+.scaffold-modulemenu-expanded .scaffold-content-overlay {
+ display: block;
}
-.callout .media .fa-stack > .fa:first-child {
- color: #ccc;
+@media (min-width: 992px) {
+ .scaffold-modulemenu-expanded .scaffold-content-overlay {
+ display: none;
+ }
}
-.callout .media-body {
- vertical-align: middle;
+@media (min-width: 992px) {
+ .scaffold {
+ padding-left: 40px;
+ }
}
-.callout-icon {
- margin-top: -2px;
+.scaffold .scaffold-modulemenu {
+ width: 40px;
}
-.callout-title {
- font-size: 1.3em;
- margin: 0 0 0.5em;
+@media (max-width: 991px) {
+ .scaffold .scaffold-modulemenu {
+ display: none;
+ }
}
-.callout-body > *:last-child {
- margin-bottom: 0;
+.scaffold-modulemenu-expanded {
+ display: block;
+ padding-left: 230px;
}
-.callout-success {
- background-color: #d1e2bd;
- border-color: #79a548;
- color: #333;
+.scaffold-modulemenu-expanded .scaffold-modulemenu {
+ width: 230px;
}
-.callout-success .media {
- margin: 0;
+@media (max-width: 991px) {
+ .scaffold-modulemenu-expanded .scaffold-modulemenu {
+ display: block;
+ }
}
-.callout-success .media .fa-stack {
- color: #fff;
+.scaffold-modulemenu-expanded .scaffold-content {
+ transform: translate(230px, 0);
}
-.callout-success .media .fa-stack > .fa:first-child {
- color: #79a548;
+.scaffold-content-navigation-expanded .scaffold-content-navigation {
+ display: block;
}
-.callout-info {
- background-color: #ebf3fb;
- border-color: #6daae0;
- color: #333;
+.scaffold-content-navigation-expanded .scaffold-content-module {
+ left: 300px;
}
-.callout-info .media {
- margin: 0;
+@media (min-width: 992px) {
+ .scaffold .scaffold-content {
+ left: 40px;
+ }
+ .scaffold-modulemenu-expanded .scaffold-content {
+ left: 230px;
+ transform: none;
+ }
}
-.callout-info .media .fa-stack {
- color: #fff;
+.topbar {
+ background-color: inherit;
+ position: relative;
+ height: 45px;
}
-.callout-info .media .fa-stack > .fa:first-child {
- color: #6daae0;
+.topbar a {
+ color: inherit;
+ text-decoration: none;
}
-.callout-warning {
- background-color: #fbefdd;
- border-color: #e8a33d;
- color: #333;
+.topbar-button {
+ position: absolute;
+ top: 0;
+ display: inline-block;
+ border: 0;
+ background-color: #222;
+ height: 45px;
+ width: 40px;
}
-.callout-warning .media {
- margin: 0;
+.topbar-button:hover {
+ background-color: #2a2a2a;
}
-.callout-warning .media .fa-stack {
- color: #fff;
+.topbar-button.topbar-button-modulemenu {
+ left: 0;
}
-.callout-warning .media .fa-stack > .fa:first-child {
- color: #e8a33d;
+@media (min-width: 992px) {
+ .topbar-button.topbar-button-modulemenu {
+ background-color: #424242;
+ }
}
-.callout-danger {
- background-color: #efc7c7;
- border-color: #c83c3c;
- color: #333;
+.topbar-button.topbar-button-navigationcomponent {
+ left: 40px;
}
-.callout-danger .media {
- margin: 0;
+.topbar-button.topbar-button-toolbar {
+ right: 40px;
}
-.callout-danger .media .fa-stack {
- color: #fff;
+.topbar-button.topbar-button-search {
+ right: 0;
}
-.callout-danger .media .fa-stack > .fa:first-child {
- color: #c83c3c;
+.scaffold-modulemenu-expanded .topbar-button.topbar-button-modulemenu {
+ background-color: #424242;
}
-.callout-notice {
- background-color: #f9f9f9;
- border-color: #a0a0a0;
- color: #333;
+.scaffold-content-navigation-expanded .topbar-button-navigationcomponent {
+ background-color: #424242;
}
-.callout-notice .media {
- margin: 0;
+@media (max-width: 991px) {
+ .scaffold-toolbar-expanded .toolbar-item-search {
+ display: none;
+ }
}
-.callout-notice .media .fa-stack {
- color: #fff;
+.scaffold-toolbar-expanded .topbar-button-toolbar {
+ background-color: #424242;
}
-.callout-notice .media .fa-stack > .fa:first-child {
- color: #a0a0a0;
+@media (max-width: 991px) {
+ .scaffold-search-expanded .toolbar-item {
+ display: none;
+ }
+ .scaffold-search-expanded .toolbar-item-search {
+ display: block;
+ width: 100%;
+ }
}
-.icon {
- position: relative;
- display: inline-block;
- overflow: hidden;
- white-space: nowrap;
- vertical-align: -22%;
+.scaffold-search-expanded .topbar-button-search {
+ background-color: #424242;
}
-.icon svg,
-.icon img {
+.topbar-button-toolbar,
+.topbar-button-search {
display: block;
- height: 100%;
- width: 100%;
- transform: translate3d(0, 0, 0);
}
-.icon * {
- display: block;
- line-height: inherit;
+@media (min-width: 992px) {
+ .topbar-button-toolbar,
+ .topbar-button-search {
+ display: none;
+ }
}
-.icon-markup {
- position: absolute;
+.topbar-header {
+ padding-left: 80px;
+ padding-right: 80px;
+}
+.topbar-header-site {
+ position: relative;
display: block;
- text-align: center;
- top: 0;
- left: 0;
+ max-width: 100%;
+ height: 45px;
+ line-height: 45px;
+ padding-left: 1em;
+ padding-right: 1em;
+ white-space: nowrap;
+}
+@media (min-width: 992px) {
+ .topbar-header-site {
+ display: inline-block;
+ }
+}
+.topbar-header-site:before,
+.topbar-header-site:after {
+ display: block;
+ content: '';
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ width: 1em;
+}
+.topbar-header-site:before {
+ left: 0;
+ background: linear-gradient(to right, #1f1f1e 0%, rgba(31, 31, 30, 0) 100%);
+}
+.topbar-header-site:after {
+ right: 0;
+ background: linear-gradient(to right, rgba(31, 31, 30, 0) 0%, #1f1f1e 100%);
+}
+.typo3-in-workspace .topbar-header-site {
+ background-color: #6d860d;
+}
+.typo3-in-workspace .topbar-header-site:before {
+ background: linear-gradient(to right, #6d860d 0%, rgba(109, 134, 13, 0) 100%);
+}
+.typo3-in-workspace .topbar-header-site:after {
+ background: linear-gradient(to right, rgba(109, 134, 13, 0) 0%, #6d860d 100%);
+}
+.topbar-header-site-logo {
+ height: 45px;
+ display: none;
+ padding-right: 0.5em;
+}
+@media (min-width: 320px) {
+ .topbar-header-site-logo {
+ display: inline-block;
+ }
+}
+.topbar-header-site-title {
+ line-height: 1.2em;
+ display: inline-block;
+ vertical-align: middle;
+}
+.topbar-header-site-name {
+ display: block;
+}
+.topbar-header-site-version {
+ opacity: 0.5;
+}
+.toolbar {
+ padding: 8px;
+}
+@media (min-width: 992px) {
+ .toolbar {
+ padding: 0;
+ }
+}
+.toolbar:after {
+ clear: both;
+ display: table;
+ content: '';
+}
+.toolbar-list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+.toolbar-item {
+ padding: 4px;
+ position: relative;
+ display: block;
+ float: left;
+ width: 100%;
+}
+@media (min-width: 600px) {
+ .toolbar-item {
+ width: 50%;
+ }
+}
+@media (min-width: 750px) {
+ .toolbar-item {
+ width: 33.33%;
+ }
+}
+@media (min-width: 992px) {
+ .toolbar-item {
+ padding: 0;
+ width: auto;
+ margin-left: 1px;
+ }
+}
+.toolbar-item .dropdown-menu {
+ width: 350px;
+}
+@media (max-width: 991px) {
+ .toolbar-item .dropdown-menu {
+ overflow: auto;
+ padding: 15px;
+ position: fixed;
+ max-height: 90%;
+ max-width: 90%;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+ .toolbar-item .dropdown-backdrop {
+ background: rgba(0, 0, 0, 0.65);
+ }
+}
+.toolbar-item-avatar {
+ width: 32px;
+ display: inline-block;
+}
+.toolbar-item-avatar .avatar {
+ position: absolute;
+ top: 50%;
+ left: 10px;
+ transform: translate(0, -50%);
+}
+.toolbar-item-badge {
+ position: absolute;
+ bottom: 4px;
+ right: 4px;
+ padding: 3px 4px;
+ border-radius: 0;
+ font-size: 10px;
+ font-weight: normal;
+ min-width: 16px;
+}
+.toolbar-item-link {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ border: 1px solid rgba(0, 0, 0, 0.5);
+ position: relative;
+ display: block;
+ text-decoration: none;
+ padding: 9px 10px;
+ height: 45px;
+ line-height: 27px;
+}
+.toolbar-item-link:hover,
+.toolbar-item-link:focus {
+ text-decoration: none;
+}
+@media (min-width: 992px) {
+ .toolbar-item-link {
+ border: none;
+ }
+}
+.open .toolbar-item-link {
+ background-color: #424242;
+}
+@media (min-width: 992px) {
+ .toolbar-item-title {
+ display: none;
+ }
+}
+@media (min-width: 992px) {
+ .toolbar-item-search {
+ width: 300px;
+ }
+}
+.toolbar-item-search form {
+ padding: 0;
+ margin: 0;
+}
+.toolbar-item-search .toolbar-item-link {
+ padding: 0;
+ margin: 0;
+ height: 0;
+}
+.toolbar-item-search .form-group {
+ margin: 0;
+}
+.toolbar-item-search .close {
+ color: #ffffff;
+ text-shadow: none;
+ opacity: 1;
+}
+@media (max-width: 991px) {
+ .toolbar-item-search .dropdown-menu {
+ top: 114px;
+ left: 14px;
+ right: 14px;
+ width: auto;
+ max-width: none;
+ max-height: none;
+ transform: none;
+ bottom: 14px;
+ }
+}
+@media (min-width: 992px) {
+ .toolbar-item-search .dropdown-menu {
+ left: auto;
+ right: 0;
+ }
+}
+.toolbar-item-search .autocomplete-suggestions {
+ position: static!important;
+}
+.toolbar-item-search .autocomplete-suggestion {
+ border: none;
+}
+.toolbar-item-search.open .toolbar-item-search-form {
+ position: relative;
+ z-index: 991;
+}
+.toolbar-item-search-field {
+ color: inherit;
+ background-color: #2f2f2f;
+ margin: 0;
+ border-radius: 0;
+ border: 1px solid rgba(0, 0, 0, 0.5);
+ height: 45px;
+ box-shadow: none;
+}
+@media (min-width: 992px) {
+ .toolbar-item-search-field {
+ border: none;
+ }
+}
+.toolbar-item-search-field:hover {
+ background-color: #333;
+}
+.toolbar-item-search-field:focus {
+ box-shadow: none;
+ background-color: #555555;
+}
+.module-wrapper {
+ position: relative;
+}
+.module-wrapper iframe {
+ border: none;
+}
+.modulemenu .modulemenu-group-container {
+ clear: both;
+}
+.modulemenu .modulemenu-group {
+ position: relative;
+ padding: 5px 0;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+}
+.modulemenu .modulemenu-group-header,
+.modulemenu .modulemenu-item-link {
+ position: relative;
+ display: block;
+ cursor: pointer;
+ padding: 2px 4px;
+ text-decoration: none;
+}
+.modulemenu .modulemenu-group-header {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ text-transform: uppercase;
+}
+.modulemenu .modulemenu-item-link:focus,
+.modulemenu .modulemenu-item-link:hover {
+ outline: none;
+ background-color: rgba(0, 0, 0, 0.1);
+}
+.modulemenu .modulemenu-item.active .modulemenu-item-link {
+ background-color: rgba(0, 0, 0, 0.15);
+}
+.modulemenu .modulemenu-icon {
+ float: left;
+ margin-right: 4px;
+}
+.modulemenu .modulemenu-icon .fa {
+ font-size: 0.5em;
+}
+.modulemenu .modulemenu-group-title,
+.modulemenu .modulemenu-item-title {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ padding-top: 7px;
+ padding-left: 4px;
+ display: none;
+ overflow: hidden;
+ *zoom: 1;
+}
+.modulemenu .modulemenu-group-title {
+ padding-right: 20px;
+}
+.modulemenu .modulemenu-group-title .caret {
+ transform: rotate(90deg);
+ position: absolute;
+ top: 17px;
+ right: 18px;
+}
+.modulemenu .expanded .modulemenu-group-title .caret {
+ transform: rotate(0deg);
+}
+.scaffold-modulemenu-expanded .modulemenu-group-title,
+.scaffold-modulemenu-expanded .modulemenu-item-title {
+ display: block;
+}
+.autocomplete {
+ position: relative;
+}
+.autocomplete-results {
+ z-index: 1000;
+ position: absolute;
+ margin: 5px 0;
+ top: 100%;
+ right: 0;
+ border: 1px solid #ddd;
+ border-radius: 2px;
+ background-color: #fff;
+ overflow: hidden;
+ box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.25);
+}
+.autocomplete-suggestion {
+ border-top: 1px solid #ddd;
+}
+.autocomplete-suggestion:first-child {
+ border-top: none;
+}
+.autocomplete-suggestion-link {
+ padding: 5px 13px 5px 28px;
+ display: block;
+ text-decoration: none;
+}
+.autocomplete-selected .autocomplete-suggestion-link,
+.autocomplete-suggestion-link:hover {
+ background-color: #fafafa;
+ text-decoration: none;
+}
+.autocomplete-info {
+ padding: 5px 15px;
+}
+.dropdown-menu {
+ line-height: 1.45em;
+ border: 0;
+ margin: 0;
+ border-radius: 0;
+}
+.dropdown-menu a {
+ display: block;
+}
+.dropdown-menu a:hover {
+ text-decoration: none;
+}
+.dropdown-menu hr {
+ border-top: 1px solid rgba(0, 0, 0, 0.25);
+ margin: 1.25em -15px;
+}
+.dropdown-menu > *:last-child {
+ margin-bottom: 0;
+}
+.dropdown-menu .form-group {
+ margin-bottom: 0.75em;
+}
+.dropdown-menu .form-control {
+ border-color: #aaaaaa;
+ color: inherit;
+ border-radius: 0;
+ background-color: #333333;
+}
+.dropdown-menu .form-control:focus {
+ box-shadow: none;
+ border-color: #bbbbbb;
+}
+.dropdown-menu .btn {
+ border: none;
+ border-radius: 0;
+ padding: 6px 10px;
+}
+.dropdown-headline {
+ font-size: 1.15em;
+ margin-top: 0;
+ margin-bottom: 0.5em;
+}
+.dropdown-text a {
+ display: inline-block;
+}
+div.dropdown-menu {
+ padding: 1.5em;
+}
+.dropdown-list {
+ padding-left: 0;
+ list-style: none;
+}
+.dropdown-list > li {
+ position: relative;
+}
+.dropdown-list > li + li {
+ margin-top: 0.5em;
+}
+.dropdown-list-link {
+ display: block;
+ text-decoration: none;
+}
+.dropdown-list-link:hover,
+.dropdown-list-link:focus {
+ text-decoration: none;
+}
+.dropdown-table {
+ display: table;
+ width: 100%;
+}
+.dropdown-table-row {
+ display: table-row;
+}
+.dropdown-table-column {
+ display: table-cell;
+ padding-top: 0.25em;
+ padding-bottom: 0.25em;
+ vertical-align: middle;
+}
+.dropdown-table-column-top {
+ vertical-align: top;
+}
+.dropdown-table-icon {
+ width: 16px;
+ padding-right: 0.5em;
+}
+.dropdown-table-title {
+ white-space: nowrap;
+ padding-right: 1.5em;
+}
+.dropdown-table-title-ellipsis {
+ max-width: 230px;
+ overflow: hidden;
+ display: block;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+.dropdown-table-actions {
+ white-space: nowrap;
+ text-align: right;
+}
+.dropdown-table-actions-btn {
+ text-align: center;
+ display: inline-block !important;
+ margin-top: -4px;
+ margin-bottom: -4px;
+ padding: 4px;
+ vertical-align: middle;
+}
+.dropdown-table-actions-btn-close:hover,
+.dropdown-table-actions-btn-edit:hover {
+ background-color: #333;
+}
+.dropdown-table-actions-btn-delete:hover {
+ background-color: #c83c3c;
+}
+.avatar {
+ position: relative;
+ display: inline-block;
+ height: 32px;
+ width: 32px;
+ vertical-align: middle;
+}
+.avatar-image {
+ display: block;
+ height: 32px;
+ width: 32px;
+ overflow: hidden;
+ border-radius: 50%;
+}
+.avatar-image:after {
+ display: block;
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ border-radius: 50%;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+}
+.avatar-image > img {
+ width: 100% !important;
+ height: auto !important;
+}
+.avatar-icon {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ height: 16px;
+ width: 16px;
+}
+.callout {
+ background-color: #f0f0f0;
+ border-left: 3px solid #ccc;
+ margin: 20px 0;
+ padding: 20px;
+ color: #333;
+}
+.callout .media {
+ margin: 0;
+}
+.callout .media .fa-stack {
+ color: #fff;
+}
+.callout .media .fa-stack > .fa:first-child {
+ color: #ccc;
+}
+.callout .media-body {
+ vertical-align: middle;
+}
+.callout-icon {
+ margin-top: -2px;
+}
+.callout-title {
+ font-size: 1.3em;
+ margin: 0 0 0.5em;
+}
+.callout-body > *:last-child {
+ margin-bottom: 0;
+}
+.callout-success {
+ background-color: #d1e2bd;
+ border-color: #79a548;
+ color: #333;
+}
+.callout-success .media {
+ margin: 0;
+}
+.callout-success .media .fa-stack {
+ color: #fff;
+}
+.callout-success .media .fa-stack > .fa:first-child {
+ color: #79a548;
+}
+.callout-info {
+ background-color: #ebf3fb;
+ border-color: #6daae0;
+ color: #333;
+}
+.callout-info .media {
+ margin: 0;
+}
+.callout-info .media .fa-stack {
+ color: #fff;
+}
+.callout-info .media .fa-stack > .fa:first-child {
+ color: #6daae0;
+}
+.callout-warning {
+ background-color: #fbefdd;
+ border-color: #e8a33d;
+ color: #333;
+}
+.callout-warning .media {
+ margin: 0;
+}
+.callout-warning .media .fa-stack {
+ color: #fff;
+}
+.callout-warning .media .fa-stack > .fa:first-child {
+ color: #e8a33d;
+}
+.callout-danger {
+ background-color: #efc7c7;
+ border-color: #c83c3c;
+ color: #333;
+}
+.callout-danger .media {
+ margin: 0;
+}
+.callout-danger .media .fa-stack {
+ color: #fff;
+}
+.callout-danger .media .fa-stack > .fa:first-child {
+ color: #c83c3c;
+}
+.callout-notice {
+ background-color: #f9f9f9;
+ border-color: #a0a0a0;
+ color: #333;
+}
+.callout-notice .media {
+ margin: 0;
+}
+.callout-notice .media .fa-stack {
+ color: #fff;
+}
+.callout-notice .media .fa-stack > .fa:first-child {
+ color: #a0a0a0;
+}
+.icon {
+ position: relative;
+ display: inline-block;
+ overflow: hidden;
+ white-space: nowrap;
+ vertical-align: -22%;
+}
+.icon svg,
+.icon img {
+ display: block;
+ height: 100%;
+ width: 100%;
+ transform: translate3d(0, 0, 0);
+}
+.icon * {
+ display: block;
+ line-height: inherit;
+}
+.icon-markup {
+ position: absolute;
+ display: block;
+ text-align: center;
+ top: 0;
+ left: 0;
right: 0;
bottom: 0;
}
@@ -7501,6 +8190,7 @@ button.close {
}
.module-body .container-small {
max-width: 768px;
+ margin: 0 auto;
}
.module-docheader + .module-body {
padding-top: 89px;
@@ -7579,17 +8269,16 @@ button.close {
.panel-body:after,
.modal-header:after,
.modal-footer:after,
+.modulemenu .modulemenu-group-header:after,
+.modulemenu .modulemenu-item-link:after,
+.dropdown-list > li:after,
.module-docheader:after,
.module-docheader .module-docheader-bar:after,
.panel-heading:after,
.pagination-block:after,
.typo3-login-copyright-link:after,
.form-irre-header-body dl dd:after,
-[id="typo3-menu"] .typo3-module-menu-group-header:after,
-[id="typo3-menu"] .typo3-module-menu-item-link:after,
.t3-page-ce .t3-page-ce-header:after,
-.typo3-topbar-navigation-items .dropdown-list > li:after,
-.typo3-topbar-navigation-items .dropdown-list .modlink:after,
#typo3-debug-console .topbar:after,
.distribution-holder:after,
.distribution-detail:after {
@@ -8125,7 +8814,8 @@ button.close {
left: auto;
right: 7px;
}
-.bootstrap-datetimepicker-widget .list-unstyled {
+.bootstrap-datetimepicker-widget .list-unstyled,
+.bootstrap-datetimepicker-widget .modulemenu .modulemenu-group-container {
margin: 0;
}
.bootstrap-datetimepicker-widget a[data-action] {
@@ -8679,7 +9369,7 @@ button.close {
top: 0;
left: 0;
width: 100%;
- height: 4px;
+ height: 2px;
}
/* Fancy blur effect */
#nprogress .peg {
@@ -9142,74 +9832,6 @@ div#contentMenu1 {
padding-bottom: 3px;
border-bottom: 1px solid #C3C3C3;
}
-#typo3-navigationContainer-xcollapsed:before {
- content: "";
- position: absolute;
- top: 0;
- width: 8px;
- height: 100%;
- background-color: #626262;
- border-right: 1px solid #444444;
- border-left: 1px solid #111;
- box-shadow: 3px 0 0 rgba(0, 0, 0, 0.15);
-}
-.x-panel-body .x-layout-cmini-west .x-layout-mini,
-.x-panel-body .x-layout-split-west .x-layout-mini {
- top: 50%;
- margin-top: -40px;
-}
-.typo3-btn-collapse-page-tree,
-.x-layout-split-west .x-layout-mini,
-.x-layout-cmini-west .x-layout-mini {
- height: 80px;
- width: 14px;
- border-top-right-radius: 3px;
- border-bottom-right-radius: 3px;
- background: none;
- border: 1px solid #C3C3C3;
- border-left: 1px solid #F5F5F5;
- display: block;
- font-size: 0;
- opacity: 1;
- filter: alpha(opacity=100);
-}
-.typo3-btn-collapse-page-tree:after,
-.x-layout-split-west .x-layout-mini:after,
-.x-layout-cmini-west .x-layout-mini:after {
- font-family: 'FontAwesome';
- content: "\f0d9";
- position: absolute;
- top: 50%;
- display: block;
- width: 100%;
- margin-top: -1px;
- color: #000;
- font-size: 12px;
- vertical-align: middle;
- text-align: center;
-}
-.x-layout-split-west .x-layout-mini {
- background-color: #F5F5F5;
-}
-.x-layout-split-west .x-layout-mini:hover {
- background-color: #e8e8e8;
-}
-.x-layout-cmini-west .x-layout-mini {
- background-color: #626262;
- margin-left: 7px;
- border: 1px solid #444444;
- border-left: 0;
-}
-.x-layout-cmini-west .x-layout-mini:hover {
- opacity: 1;
- filter: alpha(opacity=100);
- background-color: #6f6f6f;
-}
-.x-layout-cmini-west .x-layout-mini:after {
- margin-top: -9px;
- color: #fff;
- content: "\f0da";
-}
.alert-notice {
background-color: #333;
border-color: transparent;
@@ -9398,6 +10020,9 @@ div#contentMenu1 {
.modal-image-manipulation .modal-panel-body img {
max-width: 100%;
}
+#typo3-pagetree-topPanelItems {
+ background-color: #eee;
+}
#typo3-pagetree {
height: 100%;
}
@@ -11874,6 +12499,17 @@ label .icon img {
fieldset[disabled] .form-control {
color: #737373;
}
+.form-control-icon {
+ position: absolute;
+ top: 50%;
+ left: 15px;
+ transform: translate(0, -50%);
+ z-index: 1;
+}
+.form-control-icon + .form-control,
+.form-control-icon + .form-control-clearable .form-control {
+ padding-left: 3.25em;
+}
.form-group.has-error label:before {
font-family: FontAwesome;
font-size: 12px;
@@ -12165,167 +12801,28 @@ select.icon-select option {
.checkbox-inline.radio label,
.radio-inline.checkbox label,
.checkbox-inline.checkbox label {
- white-space: nowrap;
- }
-}
-textarea.formengine-textarea {
- resize: none;
-}
-.link-browser-section {
- border-bottom: 1px solid #d7d7d7;
- margin: 0 15px 15px 15px;
-}
-.link-browser-section.link-browser-current-link,
-.link-browser-section.link-browser-tabs {
- padding-bottom: 0;
- border-bottom: none;
-}
-.link-browser-section.link-browser-pagetree h3,
-.link-browser-section.link-browser-filetree h3 {
- margin-top: 0;
-}
-.link-browser-section:last-child {
- padding-bottom: 0;
- border: none;
-}
-body#typo3-backend-php {
- margin: 0;
- padding: 0;
-}
-#typo3-main-container {
- clear: both;
-}
-#typo3-top {
- margin-left: 160px;
-}
-iframe {
- width: 100%;
-}
-#typo3-side-menu,
-iframe {
- height: 100%;
- overflow: auto;
-}
-[id="typo3-module-menu"] {
- background: #222;
- color: #fff;
-}
-[id="typo3-module-menu-xsplit"] {
- z-index: 10;
- width: 1px;
- background-color: #2b2b2b;
- box-shadow: 2px 0px 3px rgba(0, 0, 0, 0.5);
-}
-[id="typo3-module-menu-xsplit"]:hover {
- box-shadow: 2px 0px 3px rgba(0, 0, 0, 0.9);
-}
-[id="typo3-module-menu-xsplit"] .x-layout-mini-wrapper {
- left: -7px;
- width: 15px;
-}
-[id="typo3-menu"] {
- padding-left: 0;
- list-style: none;
-}
-[id="typo3-menu"] .typo3-module-menu-group-container {
- clear: both;
- padding-left: 0;
- list-style: none;
- padding-right: 15px;
-}
-[id="typo3-menu"] .typo3-module-menu-group {
- transition: background-color 0.4s ease-in-out;
- position: relative;
- color: #fff;
- background-color: #222;
- border-top: 1px solid #2b2b2b;
- border-bottom: 1px solid #111;
- padding: 5px 0;
-}
-[id="typo3-menu"] .typo3-module-menu-group.expanded {
- background-color: #222;
-}
-[id="typo3-menu"] .typo3-module-menu-group-header {
- position: relative;
- cursor: pointer;
- display: block;
- padding: 4px 9px;
- text-transform: uppercase;
-}
-[id="typo3-menu"] .typo3-module-menu-item {
- margin: 1px 0;
-}
-[id="typo3-menu"] .typo3-module-menu-item-link {
- position: relative;
- cursor: pointer;
- display: block;
- padding: 4px 9px;
- color: #aaa;
- border-radius: 0 2px 2px 0;
- text-decoration: none;
-}
-[id="typo3-menu"] .typo3-module-menu-item-link:focus,
-[id="typo3-menu"] .typo3-module-menu-item-link:hover {
- outline: none;
- color: #fff;
- background-color: #2a2a2a;
-}
-[id="typo3-menu"] .typo3-module-menu-item.active .typo3-module-menu-item-link {
- color: #fff;
- background-color: #484848;
-}
-[id="typo3-menu"] .typo3-module-menu-group-icon,
-[id="typo3-menu"] .typo3-module-menu-item-icon {
- float: left;
- margin-right: 10px;
-}
-[id="typo3-menu"] .typo3-module-menu-group-icon {
- background-color: transparent;
-}
-[id="typo3-menu"] .typo3-module-menu-group-icon > span {
- line-height: 32px;
-}
-[id="typo3-menu"] .typo3-module-menu-group-icon > span > .t3-icon {
- width: 32px;
- height: 32px;
-}
-[id="typo3-menu"] .typo3-module-menu-group-icon > span > .t3-icon:before {
- line-height: 32px;
-}
-[id="typo3-menu"] .typo3-module-menu-group-icon:after {
- display: none;
-}
-[id="typo3-menu"] .typo3-module-menu-group-title,
-[id="typo3-menu"] .typo3-module-menu-item-title {
- white-space: nowrap;
- text-overflow: ellipsis;
- padding-top: 7px;
- display: block;
- overflow: hidden;
- *zoom: 1;
-}
-[id="typo3-menu"] .typo3-module-menu-group-title {
- padding-right: 20px;
+ white-space: nowrap;
+ }
}
-[id="typo3-menu"] .typo3-module-menu-group-title .caret {
- transition: all 0.25s ease-in-out;
- transform: rotate(90deg);
- position: absolute;
- top: 15px;
- right: 18px;
+textarea.formengine-textarea {
+ resize: none;
}
-[id="typo3-menu"] .expanded .typo3-module-menu-group-title .caret {
- transform: rotate(0deg);
+.link-browser-section {
+ border-bottom: 1px solid #d7d7d7;
+ margin: 0 15px 15px 15px;
}
-.typo3-module-menu-snapped .typo3-module-menu-group-container {
- padding-right: 0;
+.link-browser-section.link-browser-current-link,
+.link-browser-section.link-browser-tabs {
+ padding-bottom: 0;
+ border-bottom: none;
}
-.typo3-module-menu-snapped .typo3-module-menu-item-link {
- border-radius: 0;
+.link-browser-section.link-browser-pagetree h3,
+.link-browser-section.link-browser-filetree h3 {
+ margin-top: 0;
}
-.typo3-module-menu-snapped .typo3-module-menu-group-title,
-.typo3-module-menu-snapped .typo3-module-menu-item-title {
- display: none;
+.link-browser-section:last-child {
+ padding-bottom: 0;
+ border: none;
}
.query-builder .form-inline > .form-control-clearable {
display: inline;
@@ -12582,6 +13079,12 @@ iframe {
*/
.ui-resizable-handle {
border: solid #dadada;
+ position: absolute;
+ font-size: 0.1px;
+ display: block;
+ -ms-touch-action: none;
+ touch-action: none;
+ transform: translateX(50%);
}
.ui-resizable-handle:hover {
border-color: #585858;
@@ -12595,11 +13098,11 @@ iframe {
border-width: 2px 0;
}
.ui-resizable-e {
- cursor: col-resize;
- width: 2px;
- right: -15px;
- top: 30%;
- height: 40%;
+ cursor: e-resize;
+ width: 25px;
+ right: -5px;
+ top: 0;
+ height: 100%;
border-width: 0 2px;
}
.ui-resizable-se {
@@ -12650,363 +13153,6 @@ span.item-state-deleted {
display: inline-block;
padding: 4px 4px;
}
-[id="typo3-topbar"],
-[id="typo3-topbar"] .x-panel-body {
- min-width: 1000px;
-}
-[id="typo3-topbar"] {
- height: 45px;
- position: relative;
- background-color: #111;
- color: #ddd;
-}
-[id="typo3-topbar"] .x-panel-bwrap,
-[id="typo3-topbar"] .x-panel-body {
- overflow: visible;
-}
-.typo3-in-workspace [id="typo3-topbar"] {
- background-color: #6d860d;
-}
-.typo3-in-workspace [id="typo3-topbar"] .typo3-topbar-site-name {
- color: #fff;
-}
-.typo3-topbar-container {
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- height: 45px;
- position: relative;
-}
-.typo3-topbar-site {
- display: table;
- padding: 0;
- height: 45px;
- float: left;
-}
-.typo3-topbar-site-logo,
-.typo3-topbar-site-name {
- display: table-cell;
- vertical-align: middle;
- text-align: center;
-}
-.typo3-topbar-site-logo {
- background-color: #111;
- width: 51px;
- box-shadow: 2px 0px 0px rgba(0, 0, 0, 0.15);
-}
-.typo3-topbar-site-logo:hover {
- background-color: #333;
-}
-.typo3-topbar-site-logo > img {
- max-height: 50px;
-}
-.typo3-topbar-site-name {
- cursor: default;
- padding: 0 15px;
-}
-.typo3-topbar-navigation {
- color: #ddd;
- background-color: #222;
- float: right;
-}
-.typo3-topbar-navigation .shortcut {
- min-width: 180px;
-}
-.typo3-topbar-navigation .shortcut-form {
- padding: 16px;
- margin: 4px -16px;
- border-top: 1px solid #373737;
- background-color: #2b2b2b;
- border-bottom: 1px solid #111;
-}
-.typo3-topbar-navigation-items {
- height: 45px;
- margin-bottom: 0;
- padding-left: 0;
- list-style: none;
- float: left;
-}
-.typo3-topbar-navigation-items .icon-color {
- fill: #ddd;
-}
-.typo3-topbar-navigation-items a {
- color: #ddd;
- text-decoration: none;
-}
-.typo3-topbar-navigation-items > li {
- float: left;
- height: 45px;
-}
-.typo3-topbar-navigation-items > li > a {
- position: relative;
- display: block;
- padding: 13.5px 10px;
- border-left: 1px solid #2b2b2b;
- border-right: 1px solid #111;
-}
-.typo3-topbar-navigation-items > li > a:hover,
-.typo3-topbar-navigation-items > li > a:focus,
-.typo3-topbar-navigation-items > li > a:active {
- color: #fff;
- background-color: #333;
- border-left-color: #3b3b3b;
-}
-.typo3-topbar-navigation-items > li.open > a {
- color: #fff;
- background-color: #484848;
- border-left-color: #505050;
-}
-.typo3-topbar-navigation-items .dropdown {
- min-width: 45px;
- text-align: center;
-}
-.typo3-topbar-navigation-items .dropdown > a > .fa {
- font-size: 16px;
- margin: 0;
- display: inline-block;
- position: relative;
- vertical-align: middle;
- width: auto;
- height: auto;
-}
-.typo3-topbar-navigation-items .dropdown > a .icon-size-default .icon-unify,
-.typo3-topbar-navigation-items .dropdown > a .icon-size-small .icon-unify {
- line-height: 16px;
- font-size: 16px;
-}
-.typo3-topbar-navigation-items .dropdown-toggle {
- position: relative;
-}
-.typo3-topbar-navigation-items .dropdown-toggle .badge {
- display: none;
- font-size: 10px;
- min-width: 15px;
- height: 15px;
- position: absolute;
- padding: 0;
- border-radius: 2px;
- line-height: 15px;
- bottom: 5px;
- right: 5px;
-}
-.typo3-topbar-navigation-items .live-search-wrapper + .dropdown-menu {
- width: 100%;
-}
-.typo3-topbar-navigation-items .live-search-wrapper + .dropdown-menu .dropdown-list {
- position: relative!important;
-}
-.typo3-topbar-navigation-items .dropdown-menu {
- left: auto;
- right: 0;
- margin: 0;
- z-index: 2000;
- padding: 8px 16px;
- color: #ddd;
- background-color: #222;
- border-color: #111;
- border-top: 1px solid #444444;
- border-left: 0;
- border-right: 0;
- border-radius: 0 0 2px 2px;
- box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.15);
-}
-.typo3-topbar-navigation-items .dropdown-menu a {
- color: #ddd;
- white-space: nowrap;
-}
-.typo3-topbar-navigation-items .dropdown-menu > *:last-child {
- margin-bottom: 0;
-}
-.typo3-topbar-navigation-items .dropdown-list {
- padding-left: 0;
- list-style: none;
-}
-.typo3-topbar-navigation-items .dropdown-list > li {
- position: relative;
-}
-.typo3-topbar-navigation-items .dropdown-list > li.active .dropdown-list-link {
- background-color: #484848;
- color: #fff;
-}
-.typo3-topbar-navigation-items .dropdown-list > li + li {
- margin-top: 1px;
-}
-.typo3-topbar-navigation-items .dropdown-list > li.divider + li {
- margin-top: 0;
-}
-.typo3-topbar-navigation-items .dropdown-list .divider {
- border-top: 1px solid #111;
- background-color: #2b2b2b;
- margin: 8px -16px;
- padding: 1px 0 0;
-}
-.typo3-topbar-navigation-items .dropdown-list .modlink {
- width: 210px;
-}
-.typo3-topbar-navigation-items .dropdown-list .modlink .submodule-icon {
- float: left;
- margin-right: 10px;
-}
-.typo3-topbar-navigation-items .dropdown-list .modlink .submodule-label {
- white-space: nowrap;
- text-overflow: ellipsis;
- padding-top: 7px;
- display: block;
- overflow: hidden;
- *zoom: 1;
-}
-.typo3-topbar-navigation-items .dropdown-list .dropdown-header {
- font-size: 1em;
- margin-left: -16px;
- margin-right: -16px;
- padding: 8px 16px;
-}
-.typo3-topbar-navigation-items .dropdown-list .dropdown-intro,
-.typo3-topbar-navigation-items .dropdown-list .dropdown-info {
- color: #aaaaaa;
- margin-left: -16px;
- margin-right: -16px;
- padding: 8px 16px;
-}
-.typo3-topbar-navigation-items .dropdown-list .dl-horizontal dt {
- width: 140px;
- text-align: left;
- font-weight: normal;
-}
-.typo3-topbar-navigation-items .dropdown-list .dl-horizontal dd {
- margin-left: 150px;
- width: 170px;
- word-wrap: break-word;
-}
-.typo3-topbar-navigation-items .dropdown-list-link {
- max-width: 300px;
- overflow: hidden;
- text-overflow: ellipsis;
- display: block;
- text-decoration: none;
- cursor: pointer;
- white-space: nowrap;
- color: #ddd;
- margin-left: -16px;
- margin-right: -16px;
- padding: 4px 16px;
-}
-.typo3-topbar-navigation-items .dropdown-list-link:hover {
- color: #fff;
- background-color: #333;
-}
-.typo3-topbar-navigation-items .dropdown-list-link .badge {
- background-color: #c83c3c;
- color: #fff;
-}
-.typo3-topbar-navigation-items .dropdown-list-link small {
- white-space: normal;
- width: 270px;
- display: block;
- padding-left: 21px;
-}
-.typo3-topbar-navigation-items .dropdown-list-link-edit,
-.typo3-topbar-navigation-items .dropdown-list-link-delete,
-.typo3-topbar-navigation-items .dropdown-list-link-close {
- position: absolute;
- top: 0;
- bottom: 0;
- right: -8px;
- padding: 0;
- text-align: center;
- line-height: 26px;
- width: 26px;
- height: 26px;
-}
-.typo3-topbar-navigation-items .dropdown-list-link-edit:hover,
-.typo3-topbar-navigation-items .dropdown-list-link-delete:hover,
-.typo3-topbar-navigation-items .dropdown-list-link-close:hover {
- background-color: #333;
-}
-.typo3-topbar-navigation-items .dropdown-list-link-edit {
- right: 18px;
-}
-.typo3-topbar-navigation-items .dropdown-list-link-delete:hover,
-.typo3-topbar-navigation-items .dropdown-list-link-close:hover {
- background-color: #c83c3c;
-}
-.typo3-topbar-navigation-items .dropdown-link-list-add-close {
- padding-right: 50px;
-}
-.typo3-topbar-navigation-items .dropdown-link-list-add-editdelete {
- padding-right: 85px;
-}
-.typo3-topbar-navigation-items .topbar-workspaces-title {
- margin-left: 3px;
-}
-.typo3-topbar-navigation-search {
- position: relative;
- padding: 0;
- margin: 0;
-}
-.typo3-topbar-navigation-search .form-group {
- margin-top: 0;
- margin-bottom: 0;
-}
-.typo3-topbar-navigation-search .form-group:before {
- content: "\f002";
- font: normal normal normal 14px/1 FontAwesome;
- position: absolute;
- top: 50%;
- left: 15px;
- margin-top: -8px;
- z-index: 1;
-}
-.typo3-topbar-navigation-search .form-group button.close {
- opacity: 1;
- color: #ddd;
- text-shadow: none;
-}
-.typo3-topbar-navigation-search .form-control {
- background-color: #222;
- color: #ddd;
- height: 45px;
- width: 300px;
- padding: 14px 30px 13px 35px;
- border: none;
- border-left: 1px solid #2b2b2b;
- border-radius: 0;
-}
-.typo3-topbar-navigation-search .form-control:hover {
- border-left-color: #373737;
- background-color: #333;
-}
-.typo3-topbar-navigation-search .form-control:focus {
- outline: none;
- border-left-color: #515151;
- background-color: #484848;
- box-shadow: none;
-}
-.typo3-topbar-navigation-search .form-control + .t3-icon {
- text-align: center;
- position: absolute;
- top: 50%;
- right: 15px;
- margin-right: 0;
- margin-top: -8px;
-}
-.typo3-topbar-navigation-search .dropdown-menu {
- left: auto!important;
- width: 350px;
-}
-.typo3-topbar-navigation-search .dropdown-list-link {
- max-width: none;
-}
-.typo3-topbar-navigation-search .dropdown-list-link .typeahead-highlight {
- font-weight: normal;
-}
-#typo3-cms-backend-backend-toolbaritems-shortcuttoolbaritem .dropdown-list {
- max-height: 270px;
- overflow: hidden;
- overflow-y: auto;
- padding-right: 10px;
-}
#typo3-debug-console {
background-color: #f5f5f5;
width: 100%;
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/DebugConsole.js b/typo3/sysext/backend/Resources/Public/JavaScript/DebugConsole.js
index ae7c1e65bbe6f050e0499b8bbebe403cbe4cfc38..7ef7c118635e3b6482463e723a74a227c665fe52 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/DebugConsole.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/DebugConsole.js
@@ -122,7 +122,7 @@ define(['jquery'], function ($) {
* Attach the Debugger Console to the viewport
*/
DebugConsole.attachToViewport = function() {
- var $viewport = $('#typo3-contentContainer');
+ var $viewport = $('.t3js-scaffold-content');
if ($viewport.has(DebugConsole.$consoleDom).length === 0) {
$viewport.append(DebugConsole.$consoleDom);
}
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/LiveSearch.js b/typo3/sysext/backend/Resources/Public/JavaScript/LiveSearch.js
index c7f2cf75a8559c530c670a65678f72c9eaaa2a74..32d8cee916e33475bb2e3a07dd8f28a87845eaa7 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/LiveSearch.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/LiveSearch.js
@@ -20,8 +20,11 @@ define(['jquery', 'jquery/autocomplete', 'TYPO3/CMS/Backend/jquery.clearable'],
'use strict';
var containerSelector = '#typo3-cms-backend-backend-toolbaritems-livesearchtoolbaritem';
+ var toolbarItem = '.t3js-toolbar-item-search';
+ var dropdownToggle = '.t3js-toolbar-search-dropdowntoggle';
var searchFieldSelector = '.t3js-topbar-navigation-search-field';
var formSelector = '.t3js-topbar-navigation-search';
+ var autocompleteContainer = '.t3js-toolbar-search-autocomplete';
var url = TYPO3.settings.ajaxUrls['livesearch'];
var category = '';
@@ -32,18 +35,19 @@ define(['jquery', 'jquery/autocomplete', 'TYPO3/CMS/Backend/jquery.clearable'],
paramName: 'q',
dataType: 'json',
minChars: 2,
+ width: '100%',
groupBy: 'typeLabel',
- containerClass: 'dropdown-list',
+ containerClass: 'autocomplete-suggestions ' + autocompleteContainer.substr(1, autocompleteContainer.length),
appendTo: containerSelector + ' .dropdown-menu',
forceFixPosition: false,
preserveInput: true,
showNoSuggestionNotice: true,
triggerSelectOnValidInput: false,
preventBadQueries: false,
- noSuggestionNotice: '<div class="dropdown-info">' + TYPO3.LLL.liveSearch.listEmptyText + '</div>'
- + '<div class="search-list-help-content"><strong>' + TYPO3.LLL.liveSearch.helpTitle + '</strong>'
- + '<p>' + TYPO3.LLL.liveSearch.helpDescription + '<br>' + TYPO3.LLL.liveSearch.helpDescriptionPages + '</p>'
- + '</div>',
+ noSuggestionNotice: '<h3 class="dropdown-headline">' + TYPO3.LLL.liveSearch.listEmptyText + '</h3>'
+ + '<p>' + TYPO3.LLL.liveSearch.helpTitle + '</p>'
+ + '<hr>'
+ + '<p>' + TYPO3.LLL.liveSearch.helpDescription + '<br>' + TYPO3.LLL.liveSearch.helpDescriptionPages + '</p>',
// put the AJAX results in the right format
transformResult: function(response) {
return {
@@ -62,30 +66,47 @@ define(['jquery', 'jquery/autocomplete', 'TYPO3/CMS/Backend/jquery.clearable'],
var html = '';
// add a divider if it's not the first group
if (i > 0) {
- html = '<div class="divider"></div>';
+ html = '<hr>';
}
- return html + '<div class="dropdown-header">' + category + '</div>';
+ return html + '<h3 class="dropdown-headline">' + category + '</h3>';
},
// Rendering of each item
formatResult: function(suggestion, value) {
- return '<a class="dropdown-list-link" href="#" data-pageid="' + suggestion.data.pageId + '" data-target="' + suggestion.data.editLink + '">' +
- suggestion.data.iconHTML + ' ' + suggestion.data.title +
- '</a>';
+ return ''
+ + '<div class="dropdown-table">'
+ + '<div class="dropdown-table-row">'
+ + '<div class="dropdown-table-column dropdown-table-icon">' + suggestion.data.iconHTML + '</div>'
+ + '<div class="dropdown-table-column dropdown-table-title">'
+ + '<a class="dropdown-table-title-ellipsis dropdown-list-link" href="#" data-pageid="' + suggestion.data.pageId + '" data-target="' + suggestion.data.editLink + '">'
+ + suggestion.data.title
+ + '</a>'
+ + '</div>'
+ + '</div>'
+ + '</div>'
+ + '';
},
- onSearchComplete: function() {
- $(containerSelector).addClass('open');
+ onSearchComplete: function(query, suggestions) {
+ if (!$(toolbarItem).hasClass('open') && $(searchFieldSelector).val().length > 1) {
+ $(dropdownToggle).dropdown('toggle');
+ $(searchFieldSelector).focus();
+ }
},
beforeRender: function(container) {
// Unset height, width and z-index again, should be fixed by the plugin at a later point
- container.attr('style', '').append('<div class="divider"></div><div>' +
+ container.attr('style', '').append('<hr><div>' +
'<a href="#" class="btn btn-primary pull-right t3js-live-search-show-all">' +
TYPO3.LLL.liveSearch.showAllResults +
'</a>' +
'</div>');
- $(containerSelector).addClass('open');
+ if (!$(toolbarItem).hasClass('open')) {
+ $(dropdownToggle).dropdown('toggle');
+ $(searchFieldSelector).focus();
+ }
},
onHide: function() {
- $(containerSelector).removeClass('open');
+ if ($(toolbarItem).hasClass('open')) {
+ $(dropdownToggle).dropdown('toggle');
+ }
}
});
@@ -93,15 +114,19 @@ define(['jquery', 'jquery/autocomplete', 'TYPO3/CMS/Backend/jquery.clearable'],
$(containerSelector).on('click', '.t3js-live-search-show-all', function(evt) {
evt.preventDefault();
TYPO3.ModuleMenu.App.showModule('web_list', 'id=0&search_levels=-1&search_field=' + encodeURIComponent($(searchFieldSelector).val()));
+ $(searchFieldSelector).val('').trigger('change');
});
$(containerSelector).on('click', '.dropdown-list-link', function(evt) {
evt.preventDefault();
jump($(this).data('target'), 'web_list', 'web', $(this).data('pageid'));
+ $(searchFieldSelector).val('').trigger('change');
});
$(searchFieldSelector).clearable({
onClear: function() {
- $(containerSelector).removeClass('open');
+ if ($(toolbarItem).hasClass('open')) {
+ $(dropdownToggle).dropdown('toggle');
+ }
}
});
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar.js b/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar.js
new file mode 100644
index 0000000000000000000000000000000000000000..05340c9facd9eb8ed1b261bd6581affbbd8b8863
--- /dev/null
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar.js
@@ -0,0 +1,60 @@
+/*
+ * 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!
+ */
+
+/**
+ * Module: TYPO3/CMS/Backend/Toolbar
+ * Toolbar component of the TYPO3 backend
+ * @exports TYPO3/CMS/Backend/Toolbar
+ */
+require(
+ [
+ 'jquery',
+ 'TYPO3/CMS/Backend/Icons',
+ 'TYPO3/CMS/Backend/modulemenu'
+ ],
+ function ($) {
+
+ TYPO3.Toolbar = {};
+ TYPO3.Toolbar.App = {
+ initialize: function () {
+ this.initializeEvents();
+ },
+ initializeEvents: function () {
+ $('.t3js-toolbar-item').parent().on('hidden.bs.dropdown', function () {
+ $('.scaffold')
+ .removeClass('scaffold-toolbar-expanded')
+ .removeClass('scaffold-search-expanded');
+ });
+ $(document).on('click', '.toolbar-item [data-modulename]', function (evt) {
+ var moduleName = $(this).data('modulename');
+ TYPO3.ModuleMenu.App.showModule(moduleName);
+ evt.preventDefault();
+ });
+ $(document).on('click', '.t3js-topbar-button-toolbar', function () {
+ $('.scaffold')
+ .removeClass('scaffold-modulemenu-expanded')
+ .removeClass('scaffold-search-expanded')
+ .toggleClass('scaffold-toolbar-expanded');
+ });
+ $(document).on('click', '.t3js-topbar-button-search', function () {
+ $('.scaffold')
+ .removeClass('scaffold-modulemenu-expanded')
+ .removeClass('scaffold-toolbar-expanded')
+ .toggleClass('scaffold-search-expanded');
+ });
+ }
+ };
+ // start the module menu app
+ TYPO3.Toolbar.App.initialize();
+ }
+);
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/ClearCacheMenu.js b/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/ClearCacheMenu.js
index 55158a87c14899fcee8b7ecb68e2b7c40c09bae2..b3ff39b1b7c48e33160bd4fea3cf218af580e522 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/ClearCacheMenu.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/ClearCacheMenu.js
@@ -28,7 +28,7 @@ define(['jquery', 'TYPO3/CMS/Backend/Icons', 'TYPO3/CMS/Backend/Notification'],
options: {
containerSelector: '#typo3-cms-backend-backend-toolbaritems-clearcachetoolbaritem',
menuItemSelector: '.dropdown-menu a',
- toolbarIconSelector: '.dropdown-toggle span.icon'
+ toolbarIconSelector: '.toolbar-item-icon .t3js-icon',
}
};
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/ShortcutMenu.js b/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/ShortcutMenu.js
index b2ff220a45683889683142ca80064761603a23e3..91145a99221938474e629a06c786f682a3c5142c 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/ShortcutMenu.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/ShortcutMenu.js
@@ -33,9 +33,11 @@ define(['jquery',
containerSelector: '#typo3-cms-backend-backend-toolbaritems-shortcuttoolbaritem',
toolbarIconSelector: '.dropdown-toggle span.icon',
toolbarMenuSelector: '.dropdown-menu',
- shortcutItemSelector: '.dropdown-menu .shortcut',
- shortcutDeleteSelector: '.shortcut-delete',
- shortcutEditSelector: '.shortcut-edit',
+
+ shortcutItemSelector: '.t3js-topbar-shortcut',
+ shortcutDeleteSelector: '.t3js-shortcut-delete',
+ shortcutEditSelector: '.t3js-shortcut-edit',
+
shortcutFormTitleSelector: 'input[name="shortcut-title"]',
shortcutFormGroupSelector: 'select[name="shortcut-group"]',
shortcutFormSaveSelector: '.shortcut-form-save',
@@ -59,22 +61,22 @@ define(['jquery',
},
cache: false
}).done(function(data) {
- $shortcutRecord.html(data);
+ $(ShortcutMenu.options.containerSelector).find(ShortcutMenu.options.toolbarMenuSelector).html(data);
});
};
/**
* Save the data from the in-place-editor for a shortcut
*
- * @param {Object} $shortcutRecord
+ * @param {Object} $shortcutForm
*/
- ShortcutMenu.saveShortcutForm = function($shortcutRecord) {
+ ShortcutMenu.saveShortcutForm = function($shortcutForm) {
$.ajax({
url: TYPO3.settings.ajaxUrls['shortcut_saveform'],
data: {
- shortcutId: $shortcutRecord.data('shortcutid'),
- shortcutTitle: $shortcutRecord.find(ShortcutMenu.options.shortcutFormTitleSelector).val(),
- shortcutGroup: $shortcutRecord.find(ShortcutMenu.options.shortcutFormGroupSelector).val()
+ shortcutId: $shortcutForm.data('shortcutid'),
+ shortcutTitle: $shortcutForm.find(ShortcutMenu.options.shortcutFormTitleSelector).val(),
+ shortcutGroup: $shortcutForm.find(ShortcutMenu.options.shortcutFormGroupSelector).val()
},
type: 'post',
cache: false
@@ -186,18 +188,24 @@ define(['jquery',
evt.preventDefault();
evt.stopImmediatePropagation();
ShortcutMenu.deleteShortcut($(this).closest(ShortcutMenu.options.shortcutItemSelector));
+ }).on('click', ShortcutMenu.options.shortcutFormGroupSelector, function(evt) {
+ evt.preventDefault();
+ evt.stopImmediatePropagation();
}).on('click', ShortcutMenu.options.shortcutEditSelector, function(evt) {
evt.preventDefault();
evt.stopImmediatePropagation();
ShortcutMenu.editShortcut($(this).closest(ShortcutMenu.options.shortcutItemSelector));
}).on('click', ShortcutMenu.options.shortcutFormSaveSelector, function(evt) {
- ShortcutMenu.saveShortcutForm($(this).closest(ShortcutMenu.options.shortcutItemSelector));
+ evt.preventDefault();
+ evt.stopImmediatePropagation();
+ ShortcutMenu.saveShortcutForm($(this).closest(ShortcutMenu.options.shortcutFormSelector));
}).on('submit', ShortcutMenu.options.shortcutFormSelector, function(evt) {
evt.preventDefault();
evt.stopImmediatePropagation();
- ShortcutMenu.saveShortcutForm($(this).closest(ShortcutMenu.options.shortcutItemSelector));
- }).on('click', ShortcutMenu.options.shortcutFormCancelSelector, function() {
- // re-render the menu on canceling the update of a shortcut
+ ShortcutMenu.saveShortcutForm($(this).closest(ShortcutMenu.options.shortcutFormSelector));
+ }).on('click', ShortcutMenu.options.shortcutFormCancelSelector, function(evt) {
+ evt.preventDefault();
+ evt.stopImmediatePropagation();
ShortcutMenu.refreshMenu();
});
};
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/SystemInformationMenu.js b/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/SystemInformationMenu.js
index 9db960503236b7b6074fb79aef7f159e18a47f69..bf03794c4110f83fba2ce3108fcfcc41baac803a 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/SystemInformationMenu.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/SystemInformationMenu.js
@@ -26,12 +26,12 @@ define(['jquery', 'TYPO3/CMS/Backend/Icons', 'TYPO3/CMS/Backend/Storage'], funct
var SystemInformationMenu = {
identifier: {
containerSelector: '#typo3-cms-backend-backend-toolbaritems-systeminformationtoolbaritem',
- toolbarIconSelector: '.dropdown-toggle span.icon',
+ toolbarIconSelector: '.toolbar-item-icon .t3js-icon',
menuContainerSelector: '.dropdown-menu',
moduleLinks: '.t3js-systeminformation-module'
},
elements: {
- $counter: $('#t3js-systeminformation-counter')
+ $counter: $('.t3js-systeminformation-counter')
}
};
@@ -77,15 +77,15 @@ define(['jquery', 'TYPO3/CMS/Backend/Icons', 'TYPO3/CMS/Backend/Storage'], funct
* Updates the counter
*/
SystemInformationMenu.updateCounter = function() {
- var $ul = $(SystemInformationMenu.identifier.containerSelector).find(SystemInformationMenu.identifier.menuContainerSelector).find('ul'),
- count = $ul.data('count'),
- badgeClass = $ul.data('severityclass');
+ var $container = $(SystemInformationMenu.identifier.containerSelector).find(SystemInformationMenu.identifier.menuContainerSelector).find('.t3js-systeminformation-container'),
+ count = $container.data('count'),
+ badgeClass = $container.data('severityclass');
SystemInformationMenu.elements.$counter.text(count).toggle(parseInt(count) > 0);
SystemInformationMenu.elements.$counter.removeClass();
if (badgeClass !== '') {
- SystemInformationMenu.elements.$counter.addClass('badge ' + badgeClass);
+ SystemInformationMenu.elements.$counter.addClass('toolbar-item-badge badge ' + badgeClass);
}
};
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/Utility.js b/typo3/sysext/backend/Resources/Public/JavaScript/Utility.js
index 95757656229884788ff36b60a8138380f2e5d79f..bc69091bc49a887746ae278c85d38613b3fa0c5a 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/Utility.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/Utility.js
@@ -46,6 +46,9 @@ define(['jquery'], function($) {
* @returns {String}
*/
Utility.getParameterFromUrl = function(url, parameter) {
+ if (typeof url.split !== 'function') {
+ return '';
+ }
var parts = url.split('?'),
value = '';
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/Viewport.js b/typo3/sysext/backend/Resources/Public/JavaScript/Viewport.js
new file mode 100644
index 0000000000000000000000000000000000000000..49a7db53942ab2b22975b2f4f4203cfbf8587be1
--- /dev/null
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/Viewport.js
@@ -0,0 +1,138 @@
+/*
+ * 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!
+ */
+
+/**
+ * Module: TYPO3/CMS/Backend/Viewport
+ * Handles the main logic of the TYPO3 backend viewport
+ * @exports TYPO3/CMS/Backend/Viewport
+ */
+define(
+ 'TYPO3/CMS/Backend/Viewport',
+ [
+ 'jquery'
+ ],
+ function ($) {
+ 'use strict';
+
+ TYPO3.Backend = {
+ initialize: function() {
+ TYPO3.Backend.doLayout();
+ $(document).on('resize', TYPO3.Backend.doLayout);
+ },
+ /**
+ * This function is triggered whenever a re-layouting of component is needed
+ */
+ doLayout: function () {
+ TYPO3.Backend.NavigationContainer.cleanup();
+ TYPO3.Backend.NavigationContainer.calculateScrollbar();
+ if (Ext.getCmp('typo3-pagetree') !== undefined) {
+ Ext.getCmp('typo3-pagetree').doLayout();
+ }
+ },
+ Loader: {
+ start: function() {
+ require(['nprogress'], function(NProgress) {
+ NProgress.configure({parent: '.t3js-scaffold-content-module', showSpinner: false});
+ NProgress.start();
+ });
+ },
+ finish: function() {
+ require(['nprogress'], function(NProgress) {
+ NProgress.done();
+ });
+ }
+ },
+ NavigationContainer: {
+ toggle: function () {
+ $('.t3js-scaffold').toggleClass('scaffold-content-navigation-expanded')
+ },
+ cleanup: function() {
+ $('.t3js-scaffold-modulemenu').removeAttr('style');
+ $('t3js-scaffold-content').removeAttr('style');
+ },
+ hide: function () {
+ $('.t3js-scaffold').removeClass('scaffold-content-navigation-expanded');
+ $('.t3js-scaffold-content-module').removeAttr('style');
+ },
+ show: function (component) {
+ if(component !== undefined) {
+ $('.t3js-scaffold').addClass('scaffold-content-navigation-expanded');
+ }
+ $('.t3js-scaffold-content-navigation [data-component]').hide();
+ $('.t3js-scaffold-content-navigation [data-component=' + component + ']').show();
+ },
+ setUrl: function(urlToLoad) {
+ $('.t3js-scaffold').addClass('scaffold-content-navigation-expanded');
+ $('.t3js-scaffold-content-navigation-iframe').attr('src', urlToLoad);
+ },
+ getUrl: function() {
+ return $('.t3js-scaffold-content-navigation-iframe').attr('src');
+ },
+ refresh: function() {
+ console.log('refresh navi');
+ },
+ calculateScrollbar: function (){
+ TYPO3.Backend.NavigationContainer.cleanup();
+ var $scaffold = $('.t3js-scaffold');
+ var $moduleMenuContainer = $('.t3js-scaffold-modulemenu');
+ var $contentContainer = $('.t3js-scaffold-content');
+ var $moduleMenu = $('.t3js-modulemenu');
+ $moduleMenuContainer.css('overflow', 'auto');
+ var moduleMenuContainerWidth = $moduleMenuContainer.outerWidth();
+ var moduleMenuWidth = $moduleMenu.outerWidth();
+ $moduleMenuContainer.removeAttr('style').css('overflow', 'hidden');
+ if ($scaffold.hasClass('scaffold-modulemenu-expanded') === false) {
+ $moduleMenuContainer.width(moduleMenuContainerWidth + (moduleMenuContainerWidth - moduleMenuWidth));
+ $contentContainer.css('left', moduleMenuContainerWidth + (moduleMenuContainerWidth - moduleMenuWidth))
+ } else {
+ $moduleMenuContainer.removeAttr('style');
+ $contentContainer.removeAttr('style');
+ }
+ $moduleMenuContainer.css('overflow', 'auto');
+ }
+ },
+ /**
+ * Contentcontainer
+ */
+ ContentContainer: {
+ setUrl: function (urlToLoad) {
+ TYPO3.Backend.Loader.start();
+ $('.t3js-scaffold-content-module-iframe')
+ .attr('src', urlToLoad)
+ .one('load', function() {
+ TYPO3.Backend.Loader.finish();
+ });
+ },
+ getUrl: function() {
+ return $('.t3js-scaffold-content-navigation-iframe').attr('src');
+ },
+ refresh: function() {
+ console.log('refresh content');
+ },
+ getIdFromUrl: function() {
+ if(this.getUrl) {
+ return TYPO3.Utility.getParameterFromUrl(this.getUrl, 'id');
+ } else {
+ return 0;
+ }
+ }
+ }
+ };
+
+ // start the module menu app
+ TYPO3.Backend.initialize();
+ return TYPO3.Backend;
+ }
+);
+
+
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/extjs/backendcontentiframe.js b/typo3/sysext/backend/Resources/Public/JavaScript/extjs/backendcontentiframe.js
deleted file mode 100644
index a2557e68e7327b6b6d7cbd1fd26ec21fb726a033..0000000000000000000000000000000000000000
--- a/typo3/sysext/backend/Resources/Public/JavaScript/extjs/backendcontentiframe.js
+++ /dev/null
@@ -1,54 +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!
- */
-
-Ext.ns('TYPO3');
-
-TYPO3.backendContentIframePanel = Ext.extend(TYPO3.iframePanel ,{
- setUrl: function(source) {
- var card;
- var wrapper;
- wrapper = Ext.getCmp('typo3-contentContainerWrapper');
- this.url = source;
- if(wrapper) {
- card = Ext.getCmp('typo3-card-' + TYPO3.ModuleMenu.App.loadedModule);
- if((card != undefined) && (source.search('extjspaneldummy.html') > -1)) {
- wrapper.getLayout().setActiveItem('typo3-card-' + TYPO3.ModuleMenu.App.loadedModule);
- if (typeof wrapper.getComponent(('typo3-card-' + TYPO3.ModuleMenu.App.loadedModule)).setUrl === 'function') {
- wrapper.getComponent(('typo3-card-' + TYPO3.ModuleMenu.App.loadedModule)).setUrl(source);
- }
- } else {
- wrapper.getLayout().setActiveItem(this.id);
- this.body.dom.src = source;
- this.startLoader();
- }
- }
- },
-
- getUrl: function () {
- var wrapper;
- var card;
- wrapper = Ext.getCmp('typo3-contentContainerWrapper');
-
- if(wrapper) {
- card = wrapper.getLayout().activeItem;
- if(card.id == this.id) {
- return this.body.dom.src;
- } else if(typeof card.getUrl == 'function') {
- return card.getUrl();
- } else {
- return this.url;
- }
- }
- }
-});
-Ext.reg('backendContentIframePanel', TYPO3.backendContentIframePanel);
\ No newline at end of file
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/extjs/components/pagetree/javascript/actions.js b/typo3/sysext/backend/Resources/Public/JavaScript/extjs/components/pagetree/javascript/actions.js
index 75ad1c0fdca8e83aacef052e6c6d8a5e56beb6fb..b74bb2c8ad5fcb754b8faa929e7488a5c90ce9b3 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/extjs/components/pagetree/javascript/actions.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/extjs/components/pagetree/javascript/actions.js
@@ -282,9 +282,9 @@ TYPO3.Components.PageTree.Actions = {
}
TYPO3.Components.PageTree.Configuration.temporaryMountPoint = response;
- TYPO3.Backend.NavigationContainer.PageTree.addTemporaryMountPointIndicator();
+ Ext.getCmp('typo3-pagetree-tree').app.addTemporaryMountPointIndicator();
- var selectedNode = TYPO3.Backend.NavigationContainer.PageTree.getSelected();
+ var selectedNode = Ext.getCmp('typo3-pagetree-tree').app.getSelected();
tree.stateId = 'Pagetree' + TYPO3.Components.PageTree.Configuration.temporaryMountPoint;
tree.refreshTree(function() {
var nodeIsSelected = false;
@@ -314,7 +314,7 @@ TYPO3.Components.PageTree.Actions = {
*/
editPageProperties: function(node) {
node.select();
- var returnUrl = TYPO3.Backend.ContentContainer.src;
+ var returnUrl = TYPO3.Backend.ContentContainer.getUrl();
if (returnUrl.indexOf('returnUrl') !== -1) {
returnUrl = TYPO3.Utility.getParameterFromUrl(returnUrl, 'returnUrl');
} else {
@@ -719,14 +719,6 @@ TYPO3.Components.PageTree.Actions = {
node.select();
if (tree.stateHash) {
tree.stateHash.lastSelectedNode = node.id;
- } else {
- TYPO3.Components.PageTree.Commands.addRootlineOfNodeToStateHash(
- TYPO3.Backend.NavigationContainer.PageTree.mainTree.stateId,
- node.attributes.nodeData.id, function(stateHash) {
- TYPO3.Backend.NavigationContainer.PageTree.mainTree.stateHash = stateHash;
- TYPO3.Backend.NavigationContainer.PageTree.mainTree.refreshTree();
- }
- );
}
fsMod.recentIds['web'] = node.attributes.nodeData.id;
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/extjs/components/pagetree/javascript/app.js b/typo3/sysext/backend/Resources/Public/JavaScript/extjs/components/pagetree/javascript/app.js
index 19844e89ad3e6a28a5c692a5961c06d793f6be9e..bb9970d1d21a476ada965bb8f67946099e7e87f0 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/extjs/components/pagetree/javascript/app.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/extjs/components/pagetree/javascript/app.js
@@ -42,6 +42,13 @@ TYPO3.Components.PageTree.App = Ext.extend(Ext.Panel, {
*/
layout:'fit',
+ /**
+ * Monitor resize
+ *
+ * @type {Boolean}
+ */
+ monitorResize: true,
+
/**
* Active tree
*
@@ -85,18 +92,19 @@ TYPO3.Components.PageTree.App = Ext.extend(Ext.Panel, {
stateId: 'Pagetree' + TYPO3.Components.PageTree.Configuration.temporaryMountPoint,
stateEvents: [],
autoScroll: true,
- autoHeight: false,
- plugins: new Ext.ux.state.TreePanel(),
+ autoHeight: true,
+ autoWidth: true,
+ plugins: [new Ext.ux.state.TreePanel()],
commandProvider: TYPO3.Components.PageTree.Actions,
contextMenuProvider: TYPO3.Components.PageTree.ContextMenuDataProvider,
treeDataProvider: TYPO3.Components.PageTree.DataProvider,
+ monitorResize: true,
app: this,
listeners: {
resize: {
fn: function() {
- var treeContainer = Ext.getCmp(this.id + '-treeContainer');
- Ext.getCmp(this.id + '-filteringTree').setSize(treeContainer.getSize());
- treeContainer.doLayout();
+ this.doLayout(true);
+ TYPO3.Backend.doLayout();
},
scope: this,
buffer: 250
@@ -151,6 +159,7 @@ TYPO3.Components.PageTree.App = Ext.extend(Ext.Panel, {
this.add({
layout: 'border',
border: false,
+ monitorResize: true,
items: [
topPanelItems,
{
@@ -158,6 +167,7 @@ TYPO3.Components.PageTree.App = Ext.extend(Ext.Panel, {
id: this.id + '-treeContainer',
region: 'center',
layout: 'fit',
+ monitorResize: true,
items: [this.mainTree, filteringTree]
},
deletionDropZone
@@ -175,9 +185,6 @@ TYPO3.Components.PageTree.App = Ext.extend(Ext.Panel, {
}
this.doLayout();
- this.ownerCt.on('resize', function() {
- this.doLayout();
- });
}, this);
TYPO3.Components.PageTree.App.superclass.initComponent.apply(this, arguments);
@@ -207,7 +214,7 @@ TYPO3.Components.PageTree.App = Ext.extend(Ext.Panel, {
border: false,
id: this.id + '-indicatorBar-temporaryMountPoint',
cls: this.id + '-indicatorBar-item',
-
+ scope: this,
listeners: {
afterrender: {
fn: function() {
@@ -411,16 +418,19 @@ TYPO3.Components.PageTree.App = Ext.extend(Ext.Panel, {
*
* @return {TYPO3.Components.PageTree.App}
*/
-TYPO3.ModuleMenu.App.registerNavigationComponent('typo3-pagetree', function() {
- TYPO3.Backend.NavigationContainer.PageTree = new TYPO3.Components.PageTree.App();
-
- // compatibility code
- top.nav = TYPO3.Backend.NavigationContainer.PageTree;
- top.nav_frame = TYPO3.Backend.NavigationContainer.PageTree;
- top.content.nav_frame = TYPO3.Backend.NavigationContainer.PageTree;
-
- return TYPO3.Backend.NavigationContainer.PageTree;
-});
+require(
+ [
+ 'TYPO3/CMS/Backend/modulemenu'
+ ],
+ function () {
+ // extjs loading bugfix
+ window.setTimeout(function() {
+ TYPO3.ModuleMenu.App.registerNavigationComponent('typo3-pagetree', function () {
+ return new TYPO3.Components.PageTree.App();
+ });
+ }, 5000);
+ }
+);
// XTYPE Registration
Ext.reg('TYPO3.Components.PageTree.App', TYPO3.Components.PageTree.App);
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/extjs/components/pagetree/javascript/toppanel.js b/typo3/sysext/backend/Resources/Public/JavaScript/extjs/components/pagetree/javascript/toppanel.js
index 1b2c16bae923a972df41c43347f2b41d78ab1b12..c3706935d090e8257ecde08f0efbb10685e4cd59 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/extjs/components/pagetree/javascript/toppanel.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/extjs/components/pagetree/javascript/toppanel.js
@@ -40,7 +40,7 @@ TYPO3.Components.PageTree.TopPanel = Ext.extend(Ext.Panel, {
*
* @type {Boolean}
*/
- border: false,
+ border: true,
/**
* Toolbar Object
@@ -248,14 +248,11 @@ TYPO3.Components.PageTree.TopPanel = Ext.extend(Ext.Panel, {
textField.setHideTrigger(false);
this.tree.hide();
- this.app.ownerCt.getEl().mask('', 'x-mask-loading-message');
- this.app.ownerCt.getEl().addClass('t3-mask-loading');
this.filteringTree.show().refreshTree(function() {
if (selectedNode) {
this.app.select(selectedNode.attributes.nodeData.id, false);
}
textField.focus();
- this.app.ownerCt.getEl().unmask();
}, this);
}
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/extjs/viewport.js b/typo3/sysext/backend/Resources/Public/JavaScript/extjs/viewport.js
deleted file mode 100644
index fd0c74d530aa2efd9494e06e828841eaf93c53b4..0000000000000000000000000000000000000000
--- a/typo3/sysext/backend/Resources/Public/JavaScript/extjs/viewport.js
+++ /dev/null
@@ -1,148 +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!
- */
-
-Ext.ns('TYPO3');
-
- // override splitregion to fit the splitbars in our design
-Ext.override(Ext.layout.BorderLayout.SplitRegion, {
- render : function(ct, p) {
- Ext.layout.BorderLayout.SplitRegion.superclass.render.call(this, ct, p);
-
- var ps = this.position;
-
- this.splitEl = ct.createChild({
- cls: "x-layout-split x-layout-split-" + ps, html: " ",
- id: this.panel.id + '-xsplit'
- });
-
- if (this.enableChildSplit) {
- this.splitChildEl = this.splitEl.createChild({
- cls: 'x-layout-mini-wrapper'
- });
-
- }
- if (this.collapseMode == 'mini') {
- this.miniSplitEl = this.splitEl.createChild({
- cls: "x-layout-mini x-layout-mini-" + ps, html: " "
- });
- this.miniSplitEl.addClassOnOver('x-layout-mini-over');
- this.miniSplitEl.on('click', this.onCollapseClick, this, {stopEvent:true});
- this.miniSplitEl.dom.title = this.collapsible ? this.collapsibleSplitClickTip : this.splitTip;
- }
-
- var s = this.splitSettings[ps];
-
- if (this.enableChildSplit) {
- this.split = new Ext.SplitBar(this.splitChildEl.dom, p.el, s.orientation);
- } else {
- this.split = new Ext.SplitBar(this.splitEl.dom, p.el, s.orientation);
- }
- this.split.tickSize = this.tickSize;
- this.split.placement = s.placement;
- this.split.getMaximumSize = this[s.maxFn].createDelegate(this);
- this.split.minSize = this.minSize || this[s.minProp];
- this.split.on("beforeapply", this.onSplitMove, this);
- this.split.useShim = this.useShim === true;
- this.maxSize = this.maxSize || this[s.maxProp];
-
- if (p.hidden) {
- this.splitEl.hide();
- }
-
- if (this.useSplitTips) {
- this.splitEl.dom.title = this.collapsible ? this.collapsibleSplitTip : this.splitTip;
- }
- if (this.collapsible) {
- this.splitEl.on("dblclick", this.onCollapseClick, this);
- }
- }
-});
-/**
- * Extends the viewport with some functionality for TYPO3.
- */
-TYPO3.Viewport = Ext.extend(Ext.Viewport, {
- /**
- * Contains the navigation widgets in a simple array and identified by an unique idea
- *
- * @see registerNavigationWidget()
- * @var object
- */
- navigationWidgetContainer: {},
-
- /**
- * Contains the meta informations of the navigation widgets
- *
- * @see registerNavigationWidget()
- * @var object
- */
- navigationWidgetMetaData: {},
-
- /**
- * The topbar area
- *
- * @var Ext.Panel
- */
- Topbar: null,
-
- /**
- * The content area
- *
- * @var Ext.Panel
- */
- ContentContainer: null,
-
- /**
- * The navigation frame area
- *
- * @var Ext.Panel
- */
- NavigationContainer: null,
-
- /**
- * The iframe navigation component
- *
- * @var TYPO3.iframePanel
- */
- NavigationIframe: null,
-
- /**
- * The module menu area
- *
- * @var Ext.Panel
- */
- ModuleMenuContainer: null,
-
- /**
- * Initializes the ExtJS viewport with the given configuration.
- *
- * @return void
- */
- initComponent: function() {
- // adjust the module menu and the height of the topbar
- this.initialConfig.items[0].height = TYPO3.configuration.topBarHeight;
-
- var moduleMenu = this.initialConfig.items[1];
- moduleMenu.width = TYPO3.configuration.moduleMenuWidth;
-
- // call parent constructor
- TYPO3.Viewport.superclass.initComponent.apply(this, arguments);
-
- this.ContentContainer = Ext.getCmp('typo3-contentContainer');
- this.NavigationContainer = Ext.getCmp('typo3-navigationContainer');
- this.NavigationIframe = Ext.getCmp('typo3-navigationIframe');
- this.Topbar = Ext.getCmp('typo3-topbar');
- this.ModuleMenuContainer = Ext.getCmp('typo3-module-menu');
- }
-});
-
-Ext.reg('typo3Viewport', TYPO3.Viewport);
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/extjs/viewportConfiguration.js b/typo3/sysext/backend/Resources/Public/JavaScript/extjs/viewportConfiguration.js
deleted file mode 100644
index 9c85edfbf87017c6f659e9dd2f6dda04d16a0ab0..0000000000000000000000000000000000000000
--- a/typo3/sysext/backend/Resources/Public/JavaScript/extjs/viewportConfiguration.js
+++ /dev/null
@@ -1,149 +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!
- */
-
-Ext.ns('TYPO3');
-
-/**
- * The Cards Configuration for the BE Module Cards
- *
- * New items need to be appended here
- * cards id needs to be prepended with typo3-card- the rest of the id is the
- * be module name as passed it is normally in TYPO3
- * Cards shouldn't be simple iframes for performance reasons
- */
-
-TYPO3.Viewport.ContentCards = {
- // Add a card to either the config or if already rendered to the wrapper
- addContentCard: function(name,config) {
- config.id = 'typo3-card-' + name;
- if (Ext.ready) {
- Ext.getCmp('typo3-contentContainerWrapper').add(config);
- } else {
- this.cards.push(config);
- }
- },
- cards: [
- // add the old card to be compatible
- {
- id: 'typo3-contentContainer',
- border: false,
- xtype: 'backendContentIframePanel',
- name: 'content'
- }
- ]
-};
-
-/**
- * The backend viewport configuration
- */
-TYPO3.Viewport.configuration = {
- layout: 'border',
- id: 'typo3-viewport',
- renderTo: Ext.getBody(),
- border: false,
- items: [
- {
- layout: 'absolute',
- region: 'north',
- id: 'typo3-topbar',
- height: 45,
- contentEl: 'typo3-top-container',
- border: false
- },
- {
- layout: 'fit',
- region: 'west',
- id: 'typo3-module-menu',
- contentEl: 'typo3-menu',
- collapsible: false,
- collapseMode: null,
- floatable: true,
- minWidth: 50,
- maxWidth: 250,
- hideCollapseTool: true,
- split: true,
- useSplitTips: true,
- splitTip: top.TYPO3.LLL.viewPort.tooltipModuleMenuSplit,
- enableChildSplit: true,
- border: false,
- autoScroll: true,
- listeners: {
- resize: function(cmp, adjWidth, adjHeight, rawWidth, rawHeight) {
- var containerWidth = adjWidth,
- moduleMenuWidth = document.getElementById('typo3-menu').clientWidth,
- moduleMenuMinWidth = 100,
- moduleMenuSnappedWidth = 50,
- moduleMenuSnappingClass = 'typo3-module-menu-snapped',
- forceSnapMode = (containerWidth <= moduleMenuMinWidth);
- if (forceSnapMode){
- cmp.addClass(moduleMenuSnappingClass);
- snappedWidth = moduleMenuSnappedWidth + containerWidth - moduleMenuWidth;
- cmp.setWidth(snappedWidth);
- if(snappedWidth !== containerWidth && TYPO3.Backend){
- TYPO3.Backend.syncSize();
- }
- } else{
- this.removeClass(moduleMenuSnappingClass);
- }
- }
- }
- },
- {
- region: 'center',
- layout: 'border',
- border: false,
- items: [
- {
- region: 'west',
- layout: 'fit',
- id: 'typo3-navigationContainer',
- width: 300,
- minWidth: 250,
- maxWidth: 500,
- floatable: true,
- animCollapse: false,
- split: true,
- enableChildSplit: true,
- collapsible: true,
- collapseMode: 'mini',
- useSplitTips: true,
- collapsibleSplitTip: top.TYPO3.LLL.viewPort.tooltipNavigationContainerSplitDrag,
- collapsibleSplitClickTip: top.TYPO3.LLL.viewPort.tooltipNavigationContainerSplitClick,
- hideCollapseTool: true,
- hidden: true,
- border: false,
- name: 'navigation',
- autoScroll: true,
- items: [
- {
- id: 'typo3-navigationIframe',
- border: false,
- hidden: true,
- xtype: 'iframePanel',
- name: 'navigation'
- }
- ]
- },
- {
- id: 'typo3-contentContainerWrapper',
- name: 'content',
- border: false,
- xtype: 'panel',
- region: 'center',
- layout: 'card',
- items: TYPO3.Viewport.ContentCards.cards
- }
- ]
- }
- ]
-};
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/iframepanel.js b/typo3/sysext/backend/Resources/Public/JavaScript/iframepanel.js
index 5a9a250911403bb0fbe32e7696ae377298775841..4fe35b550860099eb9a90f280a1623a4828f3be3 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/iframepanel.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/iframepanel.js
@@ -86,7 +86,7 @@ TYPO3.iframePanel = Ext.extend(Ext.Panel, {
startLoader: function() {
if (this.showLoadingIndicator) {
require(['nprogress'], function(NProgress) {
- NProgress.configure({parent: '#typo3-contentContainer', showSpinner: false});
+ NProgress.configure({parent: '.t3js-scaffold-content-module', showSpinner: false});
NProgress.start();
});
}
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/modulemenu.js b/typo3/sysext/backend/Resources/Public/JavaScript/modulemenu.js
index c01a76c2ca2293ddf95cd80e300ac4a92808caa3..96e078d8661a305cb2f9ba60ca98a26f830b3384 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/modulemenu.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/modulemenu.js
@@ -15,275 +15,299 @@
/**
* Class to render the module menu and handle the BE navigation
*/
-
-
-Ext.ns('TYPO3', 'ModuleMenu');
-
-TYPO3.ModuleMenu = {};
-
-TYPO3.ModuleMenu.App = {
- loadedModule: null,
- loadedNavigationComponentId: '',
- availableNavigationComponents: {},
-
- initialize: function() {
- var me = this;
-
- // load the start module
- if (top.startInModule && top.startInModule[0] && TYPO3.jQuery('#' + top.startInModule[0]).length > 0) {
- me.showModule(top.startInModule[0], top.startInModule[1]);
- } else {
- // fetch first module
- me.showModule(TYPO3.jQuery('.t3js-mainmodule:first').attr('id'));
+require(
+ [
+ 'jquery',
+ 'TYPO3/CMS/Backend/Icons',
+ 'TYPO3/CMS/Backend/Viewport'
+ ],
+ function ($, Icons) {
+ if (typeof TYPO3.ModuleMenu !== 'undefined') {
+ return TYPO3.ModuleMenu.App;
}
+ TYPO3.ModuleMenu = {};
+ TYPO3.ModuleMenu.App = {
+ loadedModule: null,
+ loadedNavigationComponentId: '',
+ availableNavigationComponents: {},
+
+ initialize: function () {
+ var me = this;
+
+ // load the start module
+ if (top.startInModule && top.startInModule[0] && $('#' + top.startInModule[0]).length > 0) {
+ me.showModule(top.startInModule[0], top.startInModule[1]);
+ } else {
+ // fetch first module
+ me.showModule($('.t3js-mainmodule:first').attr('id'));
+ }
- // check if there are collapsed items in the users' configuration
- require(['TYPO3/CMS/Backend/Storage'], function() {
- var collapsedMainMenuItems = me.getCollapsedMainMenuItems();
- TYPO3.jQuery.each(collapsedMainMenuItems, function(key, itm) {
- if (itm !== true) {
- return;
+ // check if module menu should be collapsed or not
+ var state = Ext.state.Manager.getProvider().get('typo3-module-menu');
+ if (state && state.collapsed) {
+ TYPO3.ModuleMenu.App.toggleMenu(state.collapsed);
}
- var $group = TYPO3.jQuery('#' + key);
- if ($group.length > 0) {
- var $groupContainer = $group.find('.typo3-module-menu-group-container');
- $group.addClass('collapsed').removeClass('expanded');
- $groupContainer.hide().promise().done(function() {
- TYPO3.Backend.doLayout();
+
+ // check if there are collapsed items in the users' configuration
+ require(['TYPO3/CMS/Backend/Storage'], function () {
+ var collapsedMainMenuItems = me.getCollapsedMainMenuItems();
+ $.each(collapsedMainMenuItems, function (key, itm) {
+ if (itm !== true) {
+ return;
+ }
+ var $group = $('#' + key);
+ if ($group.length > 0) {
+ var $groupContainer = $group.find('.modulemenu-group-container');
+ $group.addClass('collapsed').removeClass('expanded');
+ TYPO3.Backend.NavigationContainer.cleanup();
+ $groupContainer.hide().promise().done(function () {
+ TYPO3.Backend.doLayout();
+ });
+ }
});
- }
- });
- me.initializeEvents();
- });
- },
-
- initializeEvents: function() {
- var me = this;
- TYPO3.jQuery(document).on('click', '.typo3-module-menu-group .typo3-module-menu-group-header', function() {
- var $group = TYPO3.jQuery(this).parent('.typo3-module-menu-group');
- var $groupContainer = $group.find('.typo3-module-menu-group-container');
- if ($group.hasClass('expanded')) {
- me.addCollapsedMainMenuItem($group.attr('id'));
- $group.addClass('collapsed').removeClass('expanded');
- $groupContainer.stop().slideUp().promise().done(function() {
- TYPO3.Backend.doLayout();
+ me.initializeEvents();
});
- } else {
- me.removeCollapseMainMenuItem($group.attr('id'));
- $group.addClass('expanded').removeClass('collapsed');
- $groupContainer.stop().slideDown().promise().done(function() {
+ },
+
+ initializeEvents: function () {
+ var me = this;
+ $(document).on('click', '.modulemenu-group .modulemenu-group-header', function () {
+ var $group = $(this).parent('.modulemenu-group');
+ var $groupContainer = $group.find('.modulemenu-group-container');
+
+ TYPO3.Backend.NavigationContainer.cleanup();
+ if ($group.hasClass('expanded')) {
+ me.addCollapsedMainMenuItem($group.attr('id'));
+ $group.addClass('collapsed').removeClass('expanded');
+ $groupContainer.stop().slideUp().promise().done(function () {
+ TYPO3.Backend.doLayout();
+ });
+ } else {
+ me.removeCollapseMainMenuItem($group.attr('id'));
+ $group.addClass('expanded').removeClass('collapsed');
+ $groupContainer.stop().slideDown().promise().done(function () {
+ TYPO3.Backend.doLayout();
+ });
+ }
+
+ });
+ // register clicking on sub modules
+ $(document).on('click', '.modulemenu-item,.t3-menuitem-submodule', function (evt) {
+ evt.preventDefault();
+ me.showModule($(this).attr('id'));
TYPO3.Backend.doLayout();
});
- }
- });
- // register clicking on sub modules
- TYPO3.jQuery(document).on('click', '.typo3-module-menu-item,.t3-menuitem-submodule', function(evt) {
- evt.preventDefault();
- me.showModule(TYPO3.jQuery(this).attr('id'));
- });
- },
-
- /* fetch the data for a submodule */
- getRecordFromName: function(name) {
- var $subModuleElement = TYPO3.jQuery('#' + name);
- return {
- name: name,
- navigationComponentId: $subModuleElement.data('navigationcomponentid'),
- navigationFrameScript: $subModuleElement.data('navigationframescript'),
- navigationFrameScriptParam: $subModuleElement.data('navigationframescriptparameters'),
- link: $subModuleElement.find('a').attr('href')
- };
- },
-
- showModule: function(mod, params) {
- params = params || '';
- params = this.includeId(mod, params);
- var record = this.getRecordFromName(mod);
- this.loadModuleComponents(record, params);
- },
-
- loadModuleComponents: function(record, params) {
- var mod = record.name;
- if (record.navigationComponentId) {
- this.loadNavigationComponent(record.navigationComponentId);
- TYPO3.Backend.NavigationIframe.getEl().parent().setStyle('overflow', 'auto');
- } else if (record.navigationFrameScript) {
- TYPO3.Backend.NavigationContainer.show();
- this.loadNavigationComponent('typo3-navigationIframe');
- this.openInNavFrame(record.navigationFrameScript, record.navigationFrameScriptParam);
- TYPO3.Backend.NavigationIframe.getEl().parent().setStyle('overflow', 'hidden');
- } else {
- TYPO3.Backend.NavigationContainer.hide();
- }
-
- this.highlightModuleMenuItem(mod);
- this.loadedModule = mod;
- this.openInContentFrame(record.link, params);
-
- // compatibility
- top.currentSubScript = record.link;
- top.currentModuleLoaded = mod;
-
- TYPO3.Backend.doLayout();
- },
-
- includeId: function(mod, params) {
- //get id
- var section = mod.split('_')[0];
- if (top.fsMod.recentIds[section]) {
- params = 'id=' + top.fsMod.recentIds[section] + '&' + params;
- }
-
- return params;
- },
-
- loadNavigationComponent: function(navigationComponentId) {
- if (navigationComponentId === this.loadedNavigationComponentId) {
- if (TYPO3.Backend.NavigationContainer.hidden) {
- TYPO3.Backend.NavigationContainer.show();
- }
-
- return;
- }
-
- if (this.loadedNavigationComponentId !== '') {
- Ext.getCmp(this.loadedNavigationComponentId).hide();
- }
+ $(document).on('click', '.t3js-topbar-button-modulemenu',
+ function (evt) {
+ evt.preventDefault();
+ TYPO3.ModuleMenu.App.toggleMenu();
+ }
+ );
+ $(document).on('click', '.t3js-scaffold-content-overlay',
+ function (evt) {
+ evt.preventDefault();
+ TYPO3.ModuleMenu.App.toggleMenu(true);
+ }
+ );
+ $(document).on('click', '.t3js-topbar-button-navigationcomponent',
+ function (evt) {
+ evt.preventDefault();
+ TYPO3.Backend.NavigationContainer.toggle();
+ }
+ );
+
+ },
+ toggleMenu: function (collapse) {
+ TYPO3.Backend.NavigationContainer.cleanup();
+
+ var $mainContainer = $('.t3js-scaffold');
+ var expandedClass = 'scaffold-modulemenu-expanded';
+
+ if (typeof collapse === 'undefined') {
+ collapse = $mainContainer.hasClass(expandedClass);
+ }
+ if (collapse) {
+ $mainContainer.removeClass(expandedClass);
+ } else {
+ $mainContainer.addClass(expandedClass);
+ $('.scaffold').removeClass('scaffold-search-expanded');
+ $('.scaffold').removeClass('scaffold-toolbar-expanded');
+ }
- var component = Ext.getCmp(navigationComponentId);
- if (typeof component !== 'object') {
- if (typeof this.availableNavigationComponents[navigationComponentId] !== 'function') {
- throw 'The navigation component "' + navigationComponentId + '" is not available ' +
- 'or has no valid callback function';
- }
+ // @todo remove once we have a new state manager
+ Ext.state.Manager.set(
+ 'typo3-module-menu',
+ {
+ collapsed: collapse
+ }
+ );
+
+ TYPO3.Backend.doLayout();
+ },
+
+ /* fetch the data for a submodule */
+ getRecordFromName: function (name) {
+ var $subModuleElement = $('#' + name);
+ return {
+ name: name,
+ navigationComponentId: $subModuleElement.data('navigationcomponentid'),
+ navigationFrameScript: $subModuleElement.data('navigationframescript'),
+ navigationFrameScriptParam: $subModuleElement.data('navigationframescriptparameters'),
+ link: $subModuleElement.find('a').attr('href')
+ };
+ },
+
+ showModule: function (mod, params) {
+ params = params || '';
+ params = this.includeId(mod, params);
+ var record = this.getRecordFromName(mod);
+ this.loadModuleComponents(record, params);
+ },
+
+ loadModuleComponents: function (record, params) {
+ var mod = record.name;
+ if (record.navigationComponentId) {
+ this.loadNavigationComponent(record.navigationComponentId);
+ } else if (record.navigationFrameScript) {
+ TYPO3.Backend.NavigationContainer.show('typo3-navigationIframe');
+ this.openInNavFrame(record.navigationFrameScript, record.navigationFrameScriptParam);
+ } else {
+ TYPO3.Backend.NavigationContainer.hide();
+ }
- component = this.availableNavigationComponents[navigationComponentId]();
- TYPO3.Backend.NavigationContainer.add(component);
- }
+ this.highlightModuleMenuItem(mod);
+ this.loadedModule = mod;
+ this.openInContentFrame(record.link, params);
- component.show()
+ // compatibility
+ top.currentSubScript = record.link;
+ top.currentModuleLoaded = mod;
- // backwards compatibility
- top.nav = component;
+ TYPO3.Backend.doLayout();
+ },
- TYPO3.Backend.NavigationContainer.show();
- this.loadedNavigationComponentId = navigationComponentId;
- },
+ includeId: function (mod, params) {
+ if (typeof mod === 'undefined') {
+ return params;
+ }
+ //get id
+ var section = mod.split('_')[0];
+ if (top.fsMod.recentIds[section]) {
+ params = 'id=' + top.fsMod.recentIds[section] + '&' + params;
+ }
- registerNavigationComponent: function(componentId, initCallback) {
- this.availableNavigationComponents[componentId] = initCallback;
- },
+ return params;
+ },
- openInNavFrame: function(url, params) {
- var navUrl = url + (params ? (url.indexOf('?') !== -1 ? '&' : '?') + params : '');
- var currentUrl = this.relativeUrl(TYPO3.Backend.NavigationIframe.getUrl());
- if (currentUrl !== navUrl) {
- TYPO3.Backend.NavigationIframe.setUrl(navUrl);
- }
- },
-
- openInContentFrame: function(url, params) {
- if (top.nextLoadModuleUrl) {
- TYPO3.Backend.ContentContainer.setUrl(top.nextLoadModuleUrl);
- top.nextLoadModuleUrl = '';
- } else {
- var urlToLoad = url + (params ? (url.indexOf('?') !== -1 ? '&' : '?') + params : '')
- TYPO3.Backend.ContentContainer.setUrl(urlToLoad);
- }
- },
-
- highlightModuleMenuItem: function(module, mainModule) {
- TYPO3.jQuery('.typo3-module-menu-item.active').removeClass('active');
- TYPO3.jQuery('#' + module).addClass('active');
- },
-
- relativeUrl: function(url) {
- return url.replace(TYPO3.configuration.siteUrl + 'typo3/', '');
- },
-
- // refresh the HTML by fetching the menu again
- refreshMenu: function() {
- TYPO3.jQuery.ajax(TYPO3.settings.ajaxUrls['modulemenu']).done(function(result) {
- TYPO3.jQuery('#typo3-menu').replaceWith(result.menu);
- if (top.currentModuleLoaded) {
- TYPO3.ModuleMenu.App.highlightModuleMenuItem(top.currentModuleLoaded);
+ loadNavigationComponent: function (navigationComponentId) {
+ TYPO3.Backend.NavigationContainer.show(navigationComponentId);
+ if (navigationComponentId === this.loadedNavigationComponentId) {
+ return;
+ }
+ if (this.loadedNavigationComponentId !== '') {
+ Ext.getCmp(this.loadedNavigationComponentId).hide();
+ }
+ if ($('.t3js-scaffold-content-navigation [data-component="' + navigationComponentId + '"]').length < 1) {
+ $('.t3js-scaffold-content-navigation')
+ .append('<div class="scaffold-content-navigation-component" data-component="' + navigationComponentId + '" id="navigationComponent-' + navigationComponentId + '"></div>');
+ }
+ var component = Ext.getCmp(navigationComponentId);
+ if (typeof component === 'undefined') {
+ /** @todo fix hard coded pagetree **/
+ component = new TYPO3.Components.PageTree.App();
+ component.render('navigationComponent-' + navigationComponentId);
+ }
+ TYPO3.Backend.NavigationContainer.show(navigationComponentId);
+ this.loadedNavigationComponentId = navigationComponentId;
+ },
+
+ registerNavigationComponent: function (componentId, initCallback) {
+ this.availableNavigationComponents[componentId] = initCallback;
+ },
+
+ openInNavFrame: function (url, params) {
+ var navUrl = url + (params ? (url.indexOf('?') !== -1 ? '&' : '?') + params : '');
+ var currentUrl = this.relativeUrl(TYPO3.Backend.NavigationContainer.getUrl());
+ if (currentUrl !== navUrl) {
+ TYPO3.Backend.NavigationContainer.refresh();
+ }
+ TYPO3.Backend.NavigationContainer.setUrl(url);
+ },
+
+ openInContentFrame: function (url, params) {
+ if (top.nextLoadModuleUrl) {
+ TYPO3.Backend.ContentContainer.setUrl(top.nextLoadModuleUrl);
+ top.nextLoadModuleUrl = '';
+ } else {
+ var urlToLoad = url + (params ? (url.indexOf('?') !== -1 ? '&' : '?') + params : '');
+ TYPO3.Backend.ContentContainer.setUrl(urlToLoad);
+ }
+ },
+
+ highlightModuleMenuItem: function (module, mainModule) {
+ $('.modulemenu-item.active').removeClass('active');
+ $('#' + module).addClass('active');
+ },
+
+ relativeUrl: function (url) {
+ if (url) {
+ return url.replace(TYPO3.configuration.siteUrl + 'typo3/', '');
+ } else {
+ return '';
+ }
+ },
+
+ // refresh the HTML by fetching the menu again
+ refreshMenu: function () {
+ $.ajax(TYPO3.settings.ajaxUrls['modulemenu']).done(function (result) {
+ $('#typo3-menu').replaceWith(result.menu);
+ if (top.currentModuleLoaded) {
+ TYPO3.ModuleMenu.App.highlightModuleMenuItem(top.currentModuleLoaded);
+ }
+ TYPO3.Backend.doLayout();
+ });
+ },
+
+ reloadFrames: function () {
+ TYPO3.Backend.NavigationContainer.refresh();
+ TYPO3.Backend.ContentContainer.refresh();
+ },
+
+ /**
+ * fetches all module menu elements in the local storage that should be collapsed
+ * @returns {*}
+ */
+ getCollapsedMainMenuItems: function () {
+ if (TYPO3.Storage.Persistent.isset('modulemenu')) {
+ return JSON.parse(TYPO3.Storage.Persistent.get('modulemenu'));
+ } else {
+ return {};
+ }
+ },
+
+ /**
+ * adds a module menu item to the local storage
+ * @param item
+ */
+ addCollapsedMainMenuItem: function (item) {
+ var existingItems = this.getCollapsedMainMenuItems();
+ existingItems[item] = true;
+ TYPO3.Storage.Persistent.set('modulemenu', JSON.stringify(existingItems));
+ },
+
+ /**
+ * removes a module menu item from the local storage
+ * @param item
+ */
+ removeCollapseMainMenuItem: function (item) {
+ var existingItems = this.getCollapsedMainMenuItems();
+ delete existingItems[item];
+ TYPO3.Storage.Persistent.set('modulemenu', JSON.stringify(existingItems));
}
- TYPO3.Backend.doLayout();
- });
- },
-
- reloadFrames: function() {
- TYPO3.Backend.NavigationIframe.refresh();
- TYPO3.Backend.ContentContainer.refresh();
- },
-
- /**
- * fetches all module menu elements in the local storage that should be collapsed
- * @returns {*}
- */
- getCollapsedMainMenuItems: function() {
- if (TYPO3.Storage.Persistent.isset('modulemenu')) {
- return JSON.parse(TYPO3.Storage.Persistent.get('modulemenu'));
- } else {
- return {};
- }
- },
-
- /**
- * adds a module menu item to the local storage
- * @param item
- */
- addCollapsedMainMenuItem: function(item) {
- var existingItems = this.getCollapsedMainMenuItems();
- existingItems[item] = true;
- TYPO3.Storage.Persistent.set('modulemenu', JSON.stringify(existingItems));
- },
-
- /**
- * removes a module menu item from the local storage
- * @param item
- */
- removeCollapseMainMenuItem: function(item) {
- var existingItems = this.getCollapsedMainMenuItems();
- delete existingItems[item];
- TYPO3.Storage.Persistent.set('modulemenu', JSON.stringify(existingItems));
- }
-
-};
-
-
-Ext.onReady(function() {
- TYPO3.ModuleMenu.App.initialize();
-
- // keep backward compatibility
- top.list = TYPO3.Backend.ContentContainer;
- top.list_frame = top.list.getIframe();
- top.nav_frame = TYPO3.Backend.NavigationContainer.PageTree;
-
- // not in use anymore
- top.TYPO3ModuleMenu = TYPO3.ModuleMenu.App;
- top.content = {
- nav_frame: TYPO3.Backend.NavigationContainer.PageTree,
- list_frame: TYPO3.Backend.ContentContainer.getIframe(),
- location: TYPO3.Backend.ContentContainer.getIframe().location,
- document: TYPO3.Backend.ContentContainer.getIframe()
+ };
+ // start the module menu app
+ TYPO3.ModuleMenu.App.initialize();
+ return TYPO3.ModuleMenu;
}
-});
-
-
-/*******************************************************************************
-*
-* Backwards compatibility handling down here
-*
-******************************************************************************/
-
-/**
-* Highlight module:
-*/
-var currentlyHighLightedId = '';
-var currentlyHighLighted_restoreValue = '';
-var currentlyHighLightedMain = '';
-function highlightModuleMenuItem(trId, mainModule) {
- TYPO3.ModuleMenu.App.highlightModule(trId, mainModule);
-}
+);
diff --git a/typo3/sysext/core/Documentation/Changelog/master/Breaking-52877-RemoveExtJSViewport.rst b/typo3/sysext/core/Documentation/Changelog/master/Breaking-52877-RemoveExtJSViewport.rst
new file mode 100644
index 0000000000000000000000000000000000000000..6a639fca544cd352d7bcb55391be640a9a009de2
--- /dev/null
+++ b/typo3/sysext/core/Documentation/Changelog/master/Breaking-52877-RemoveExtJSViewport.rst
@@ -0,0 +1,34 @@
+.. include:: ../../Includes.txt
+
+========================================
+Breaking: #52877 - Remove ExtJS Viewport
+========================================
+
+See :forge:`52877`
+
+Description
+===========
+
+The ExtJS component `TYPO3.Viewport` has been removed from the TYPO3 Core, `Ext.layout` and `Ext.Viewport` are no longer
+used in the backend viewport.
+
+
+Impact
+======
+
+- Calling the removed ExtJS components `TYPO3.Viewport` or `TYPO3.backendContentIframePanel` will result in an error
+- The ability to stack content with cards with `TYPO3.Viewport.ContentCards` is no longer supported
+
+
+Affected Installations
+======================
+
+Any TYPO3 installations using custom extensions based on ExtJS which rely on the above mentioned components.
+
+
+Migration
+=========
+
+There is no migration available.
+
+.. index:: Backend, JavaScript
diff --git a/typo3/sysext/core/Tests/Acceptance/Support/Helper/Topbar.php b/typo3/sysext/core/Tests/Acceptance/Support/Helper/Topbar.php
index 4a38aa1c816798188bba74ae351ff068c4bcc640..f3595919d936ee481e62529f7fbae01748a835ec 100644
--- a/typo3/sysext/core/Tests/Acceptance/Support/Helper/Topbar.php
+++ b/typo3/sysext/core/Tests/Acceptance/Support/Helper/Topbar.php
@@ -24,7 +24,7 @@ class Topbar
*
* @var string
*/
- public static $containerSelector = '#typo3-top-container';
+ public static $containerSelector = '.t3js-scaffold-topbar';
/**
* Selector for the dropdown container
diff --git a/typo3/sysext/install/Resources/Public/Css/install.css b/typo3/sysext/install/Resources/Public/Css/install.css
index a5c172cc18b69f017e9f86b591b7d669c32ff25d..52866a9b19b8836f8350bbb60b6c5cbb7b2156c8 100644
--- a/typo3/sysext/install/Resources/Public/Css/install.css
+++ b/typo3/sysext/install/Resources/Public/Css/install.css
@@ -2752,7 +2752,8 @@ ul ol,
ol ol {
margin-bottom: 0;
}
-.list-unstyled {
+.list-unstyled,
+.modulemenu .modulemenu-group-container {
padding-left: 0;
list-style: none;
}
@@ -4834,7 +4835,7 @@ tbody.collapse.in {
list-style: none;
font-size: 12px;
text-align: left;
- background-color: #fff;
+ background-color: #424242;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 2px;
@@ -4849,7 +4850,7 @@ tbody.collapse.in {
height: 1px;
margin: 8px 0;
overflow: hidden;
- background-color: #e5e5e5;
+ background-color: #525252;
}
.dropdown-menu > li > a {
display: block;
@@ -4857,14 +4858,14 @@ tbody.collapse.in {
clear: both;
font-weight: normal;
line-height: 1.5;
- color: #5a5a5a;
+ color: #fff;
white-space: nowrap;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
text-decoration: none;
- color: #4d4d4d;
- background-color: #f5f5f5;
+ color: #fff;
+ background-color: #525252;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
@@ -4872,7 +4873,7 @@ tbody.collapse.in {
color: #fff;
text-decoration: none;
outline: 0;
- background-color: #0078e6;
+ background-color: #525252;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
@@ -7065,6 +7066,589 @@ button.close {
bottom: 20px;
}
}
+html {
+ height: 100%;
+ overflow: hidden;
+}
+body {
+ height: 100%;
+ overflow: auto;
+}
+.scaffold {
+ background-color: #f5f5f5;
+ color: #333333;
+ position: relative;
+ padding-top: 45px;
+ height: 100vh;
+}
+.scaffold-topbar {
+ background-color: #1f1f1e;
+ color: #f5f5f5;
+ height: 45px;
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+}
+.scaffold-modulemenu {
+ background-color: #424242;
+ color: #fff;
+ position: fixed;
+ top: 45px;
+ left: 0;
+ bottom: 0;
+ width: 40px;
+ max-width: 100%;
+ z-index: 1000;
+ overflow: hidden;
+}
+.scaffold-modulemenu a {
+ color: rgba(255, 255, 255, 0.7);
+}
+.scaffold-modulemenu a:hover {
+ color: #fff;
+}
+.scaffold-modulemenu .active > a {
+ color: #fff;
+}
+.scaffold-toolbar {
+ overflow: auto;
+ background-color: #424242;
+ color: #fff;
+ z-index: 1000;
+ position: fixed;
+ top: 45px;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ display: none;
+}
+.scaffold-toolbar a {
+ color: rgba(255, 255, 255, 0.7);
+}
+.scaffold-toolbar a:hover {
+ color: #fff;
+}
+.scaffold-toolbar .active > a {
+ color: #fff;
+}
+@media (min-width: 992px) {
+ .scaffold-toolbar {
+ overflow: visible;
+ background-color: transparent;
+ height: 45px;
+ top: 0;
+ left: auto;
+ bottom: auto;
+ display: block;
+ }
+}
+@media (max-width: 991px) {
+ .scaffold-toolbar-expanded .scaffold-toolbar,
+ .scaffold-search-expanded .scaffold-toolbar {
+ display: block;
+ }
+}
+.scaffold-content {
+ position: fixed!important;
+ top: 45px;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
+@media (max-width: 991px) {
+ .scaffold-content {
+ left: 0!important;
+ }
+}
+.scaffold-content-navigation-iframe,
+.scaffold-content-module-iframe {
+ display: block;
+ border: none;
+ height: 100%;
+ width: 100%;
+}
+.scaffold-content-navigation {
+ display: none;
+ position: absolute!important;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ width: 300px;
+}
+.scaffold-content-navigation-component {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+.scaffold-content-navigation-component #typo3-pagetree-treeContainer > div > .x-panel-body {
+ overflow: auto;
+}
+.scaffold-content-module {
+ position: absolute!important;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+}
+@media (max-width: 767px) {
+ .scaffold-content-module {
+ width: 100%;
+ }
+}
+.scaffold-content-overlay {
+ display: none;
+ position: absolute;
+ z-index: 1040;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.65);
+}
+.scaffold-modulemenu-expanded .scaffold-content-overlay {
+ display: block;
+}
+@media (min-width: 992px) {
+ .scaffold-modulemenu-expanded .scaffold-content-overlay {
+ display: none;
+ }
+}
+@media (min-width: 992px) {
+ .scaffold {
+ padding-left: 40px;
+ }
+}
+.scaffold .scaffold-modulemenu {
+ width: 40px;
+}
+@media (max-width: 991px) {
+ .scaffold .scaffold-modulemenu {
+ display: none;
+ }
+}
+.scaffold-modulemenu-expanded {
+ display: block;
+ padding-left: 230px;
+}
+.scaffold-modulemenu-expanded .scaffold-modulemenu {
+ width: 230px;
+}
+@media (max-width: 991px) {
+ .scaffold-modulemenu-expanded .scaffold-modulemenu {
+ display: block;
+ }
+}
+.scaffold-modulemenu-expanded .scaffold-content {
+ transform: translate(230px, 0);
+}
+.scaffold-content-navigation-expanded .scaffold-content-navigation {
+ display: block;
+}
+.scaffold-content-navigation-expanded .scaffold-content-module {
+ left: 300px;
+}
+@media (min-width: 992px) {
+ .scaffold .scaffold-content {
+ left: 40px;
+ }
+ .scaffold-modulemenu-expanded .scaffold-content {
+ left: 230px;
+ transform: none;
+ }
+}
+.topbar {
+ background-color: inherit;
+ position: relative;
+ height: 45px;
+}
+.topbar a {
+ color: inherit;
+ text-decoration: none;
+}
+.topbar-button {
+ position: absolute;
+ top: 0;
+ display: inline-block;
+ border: 0;
+ background-color: #222;
+ height: 45px;
+ width: 40px;
+}
+.topbar-button:hover {
+ background-color: #2a2a2a;
+}
+.topbar-button.topbar-button-modulemenu {
+ left: 0;
+}
+@media (min-width: 992px) {
+ .topbar-button.topbar-button-modulemenu {
+ background-color: #424242;
+ }
+}
+.topbar-button.topbar-button-navigationcomponent {
+ left: 40px;
+}
+.topbar-button.topbar-button-toolbar {
+ right: 40px;
+}
+.topbar-button.topbar-button-search {
+ right: 0;
+}
+.scaffold-modulemenu-expanded .topbar-button.topbar-button-modulemenu {
+ background-color: #424242;
+}
+.scaffold-content-navigation-expanded .topbar-button-navigationcomponent {
+ background-color: #424242;
+}
+@media (max-width: 991px) {
+ .scaffold-toolbar-expanded .toolbar-item-search {
+ display: none;
+ }
+}
+.scaffold-toolbar-expanded .topbar-button-toolbar {
+ background-color: #424242;
+}
+@media (max-width: 991px) {
+ .scaffold-search-expanded .toolbar-item {
+ display: none;
+ }
+ .scaffold-search-expanded .toolbar-item-search {
+ display: block;
+ width: 100%;
+ }
+}
+.scaffold-search-expanded .topbar-button-search {
+ background-color: #424242;
+}
+.topbar-button-toolbar,
+.topbar-button-search {
+ display: block;
+}
+@media (min-width: 992px) {
+ .topbar-button-toolbar,
+ .topbar-button-search {
+ display: none;
+ }
+}
+.topbar-header {
+ padding-left: 80px;
+ padding-right: 80px;
+}
+.topbar-header-site {
+ position: relative;
+ display: block;
+ max-width: 100%;
+ height: 45px;
+ line-height: 45px;
+ padding-left: 1em;
+ padding-right: 1em;
+ white-space: nowrap;
+}
+@media (min-width: 992px) {
+ .topbar-header-site {
+ display: inline-block;
+ }
+}
+.topbar-header-site:before,
+.topbar-header-site:after {
+ display: block;
+ content: '';
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ width: 1em;
+}
+.topbar-header-site:before {
+ left: 0;
+ background: linear-gradient(to right, #1f1f1e 0%, rgba(31, 31, 30, 0) 100%);
+}
+.topbar-header-site:after {
+ right: 0;
+ background: linear-gradient(to right, rgba(31, 31, 30, 0) 0%, #1f1f1e 100%);
+}
+.typo3-in-workspace .topbar-header-site {
+ background-color: #6d860d;
+}
+.typo3-in-workspace .topbar-header-site:before {
+ background: linear-gradient(to right, #6d860d 0%, rgba(109, 134, 13, 0) 100%);
+}
+.typo3-in-workspace .topbar-header-site:after {
+ background: linear-gradient(to right, rgba(109, 134, 13, 0) 0%, #6d860d 100%);
+}
+.topbar-header-site-logo {
+ height: 45px;
+ display: none;
+ padding-right: 0.5em;
+}
+@media (min-width: 320px) {
+ .topbar-header-site-logo {
+ display: inline-block;
+ }
+}
+.topbar-header-site-title {
+ line-height: 1.2em;
+ display: inline-block;
+ vertical-align: middle;
+}
+.topbar-header-site-name {
+ display: block;
+}
+.topbar-header-site-version {
+ opacity: 0.5;
+}
+.toolbar {
+ padding: 8px;
+}
+@media (min-width: 992px) {
+ .toolbar {
+ padding: 0;
+ }
+}
+.toolbar:after {
+ clear: both;
+ display: table;
+ content: '';
+}
+.toolbar-list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+.toolbar-item {
+ padding: 4px;
+ position: relative;
+ display: block;
+ float: left;
+ width: 100%;
+}
+@media (min-width: 600px) {
+ .toolbar-item {
+ width: 50%;
+ }
+}
+@media (min-width: 750px) {
+ .toolbar-item {
+ width: 33.33%;
+ }
+}
+@media (min-width: 992px) {
+ .toolbar-item {
+ padding: 0;
+ width: auto;
+ margin-left: 1px;
+ }
+}
+.toolbar-item .dropdown-menu {
+ width: 350px;
+}
+@media (max-width: 991px) {
+ .toolbar-item .dropdown-menu {
+ overflow: auto;
+ padding: 15px;
+ position: fixed;
+ max-height: 90%;
+ max-width: 90%;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+ .toolbar-item .dropdown-backdrop {
+ background: rgba(0, 0, 0, 0.65);
+ }
+}
+.toolbar-item-avatar {
+ width: 32px;
+ display: inline-block;
+}
+.toolbar-item-avatar .avatar {
+ position: absolute;
+ top: 50%;
+ left: 10px;
+ transform: translate(0, -50%);
+}
+.toolbar-item-badge {
+ position: absolute;
+ bottom: 4px;
+ right: 4px;
+ padding: 3px 4px;
+ border-radius: 0;
+ font-size: 10px;
+ font-weight: normal;
+ min-width: 16px;
+}
+.toolbar-item-link {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ border: 1px solid rgba(0, 0, 0, 0.5);
+ position: relative;
+ display: block;
+ text-decoration: none;
+ padding: 9px 10px;
+ height: 45px;
+ line-height: 27px;
+}
+.toolbar-item-link:hover,
+.toolbar-item-link:focus {
+ text-decoration: none;
+}
+@media (min-width: 992px) {
+ .toolbar-item-link {
+ border: none;
+ }
+}
+.open .toolbar-item-link {
+ background-color: #424242;
+}
+@media (min-width: 992px) {
+ .toolbar-item-title {
+ display: none;
+ }
+}
+@media (min-width: 992px) {
+ .toolbar-item-search {
+ width: 300px;
+ }
+}
+.toolbar-item-search form {
+ padding: 0;
+ margin: 0;
+}
+.toolbar-item-search .toolbar-item-link {
+ padding: 0;
+ margin: 0;
+ height: 0;
+}
+.toolbar-item-search .form-group {
+ margin: 0;
+}
+.toolbar-item-search .close {
+ color: #ffffff;
+ text-shadow: none;
+ opacity: 1;
+}
+@media (max-width: 991px) {
+ .toolbar-item-search .dropdown-menu {
+ top: 114px;
+ left: 14px;
+ right: 14px;
+ width: auto;
+ max-width: none;
+ max-height: none;
+ transform: none;
+ bottom: 14px;
+ }
+}
+@media (min-width: 992px) {
+ .toolbar-item-search .dropdown-menu {
+ left: auto;
+ right: 0;
+ }
+}
+.toolbar-item-search .autocomplete-suggestions {
+ position: static!important;
+}
+.toolbar-item-search .autocomplete-suggestion {
+ border: none;
+}
+.toolbar-item-search.open .toolbar-item-search-form {
+ position: relative;
+ z-index: 991;
+}
+.toolbar-item-search-field {
+ color: inherit;
+ background-color: #2f2f2f;
+ margin: 0;
+ border-radius: 0;
+ border: 1px solid rgba(0, 0, 0, 0.5);
+ height: 45px;
+ box-shadow: none;
+}
+@media (min-width: 992px) {
+ .toolbar-item-search-field {
+ border: none;
+ }
+}
+.toolbar-item-search-field:hover {
+ background-color: #333;
+}
+.toolbar-item-search-field:focus {
+ box-shadow: none;
+ background-color: #555555;
+}
+.module-wrapper {
+ position: relative;
+}
+.module-wrapper iframe {
+ border: none;
+}
+.modulemenu .modulemenu-group-container {
+ clear: both;
+}
+.modulemenu .modulemenu-group {
+ position: relative;
+ padding: 5px 0;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+}
+.modulemenu .modulemenu-group-header,
+.modulemenu .modulemenu-item-link {
+ position: relative;
+ display: block;
+ cursor: pointer;
+ padding: 2px 4px;
+ text-decoration: none;
+}
+.modulemenu .modulemenu-group-header {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ text-transform: uppercase;
+}
+.modulemenu .modulemenu-item-link:focus,
+.modulemenu .modulemenu-item-link:hover {
+ outline: none;
+ background-color: rgba(0, 0, 0, 0.1);
+}
+.modulemenu .modulemenu-item.active .modulemenu-item-link {
+ background-color: rgba(0, 0, 0, 0.15);
+}
+.modulemenu .modulemenu-icon {
+ float: left;
+ margin-right: 4px;
+}
+.modulemenu .modulemenu-icon .fa {
+ font-size: 0.5em;
+}
+.modulemenu .modulemenu-group-title,
+.modulemenu .modulemenu-item-title {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ padding-top: 7px;
+ padding-left: 4px;
+ display: none;
+ overflow: hidden;
+ *zoom: 1;
+}
+.modulemenu .modulemenu-group-title {
+ padding-right: 20px;
+}
+.modulemenu .modulemenu-group-title .caret {
+ transform: rotate(90deg);
+ position: absolute;
+ top: 17px;
+ right: 18px;
+}
+.modulemenu .expanded .modulemenu-group-title .caret {
+ transform: rotate(0deg);
+}
+.scaffold-modulemenu-expanded .modulemenu-group-title,
+.scaffold-modulemenu-expanded .modulemenu-item-title {
+ display: block;
+}
.autocomplete {
position: relative;
}
@@ -7099,6 +7683,122 @@ button.close {
.autocomplete-info {
padding: 5px 15px;
}
+.dropdown-menu {
+ line-height: 1.45em;
+ border: 0;
+ margin: 0;
+ border-radius: 0;
+}
+.dropdown-menu a {
+ display: block;
+}
+.dropdown-menu a:hover {
+ text-decoration: none;
+}
+.dropdown-menu hr {
+ border-top: 1px solid rgba(0, 0, 0, 0.25);
+ margin: 1.25em -15px;
+}
+.dropdown-menu > *:last-child {
+ margin-bottom: 0;
+}
+.dropdown-menu .form-group {
+ margin-bottom: 0.75em;
+}
+.dropdown-menu .form-control {
+ border-color: #aaaaaa;
+ color: inherit;
+ border-radius: 0;
+ background-color: #333333;
+}
+.dropdown-menu .form-control:focus {
+ box-shadow: none;
+ border-color: #bbbbbb;
+}
+.dropdown-menu .btn {
+ border: none;
+ border-radius: 0;
+ padding: 6px 10px;
+}
+.dropdown-headline {
+ font-size: 1.15em;
+ margin-top: 0;
+ margin-bottom: 0.5em;
+}
+.dropdown-text a {
+ display: inline-block;
+}
+div.dropdown-menu {
+ padding: 1.5em;
+}
+.dropdown-list {
+ padding-left: 0;
+ list-style: none;
+}
+.dropdown-list > li {
+ position: relative;
+}
+.dropdown-list > li + li {
+ margin-top: 0.5em;
+}
+.dropdown-list-link {
+ display: block;
+ text-decoration: none;
+}
+.dropdown-list-link:hover,
+.dropdown-list-link:focus {
+ text-decoration: none;
+}
+.dropdown-table {
+ display: table;
+ width: 100%;
+}
+.dropdown-table-row {
+ display: table-row;
+}
+.dropdown-table-column {
+ display: table-cell;
+ padding-top: 0.25em;
+ padding-bottom: 0.25em;
+ vertical-align: middle;
+}
+.dropdown-table-column-top {
+ vertical-align: top;
+}
+.dropdown-table-icon {
+ width: 16px;
+ padding-right: 0.5em;
+}
+.dropdown-table-title {
+ white-space: nowrap;
+ padding-right: 1.5em;
+}
+.dropdown-table-title-ellipsis {
+ max-width: 230px;
+ overflow: hidden;
+ display: block;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+.dropdown-table-actions {
+ white-space: nowrap;
+ text-align: right;
+}
+.dropdown-table-actions-btn {
+ text-align: center;
+ display: inline-block !important;
+ margin-top: -4px;
+ margin-bottom: -4px;
+ padding: 4px;
+ vertical-align: middle;
+}
+.dropdown-table-actions-btn-close:hover,
+.dropdown-table-actions-btn-edit:hover {
+ background-color: #333;
+}
+.dropdown-table-actions-btn-delete:hover {
+ background-color: #c83c3c;
+}
.avatar {
position: relative;
display: inline-block;
@@ -7135,17 +7835,6 @@ button.close {
height: 16px;
width: 16px;
}
-.dropdown-toggle > .avatar {
- height: 28px;
- width: 28px;
- float: left;
- margin-right: 0.5em;
- margin-top: -5px;
-}
-.dropdown-toggle .avatar-image {
- height: 28px;
- width: 28px;
-}
.callout {
background-color: #f0f0f0;
border-left: 3px solid #ccc;
@@ -7492,6 +8181,7 @@ button.close {
}
.module-body .container-small {
max-width: 768px;
+ margin: 0 auto;
}
.module-docheader + .module-body {
padding-top: 89px;
@@ -7570,6 +8260,9 @@ button.close {
.panel-body:after,
.modal-header:after,
.modal-footer:after,
+.modulemenu .modulemenu-group-header:after,
+.modulemenu .modulemenu-item-link:after,
+.dropdown-list > li:after,
.module-docheader:after,
.module-docheader .module-docheader-bar:after,
.panel-heading:after,
diff --git a/typo3/sysext/lang/locallang_core.xlf b/typo3/sysext/lang/locallang_core.xlf
index c4444811c59e5608bf53f0c8333c9db943fded79..2a74c611ebb141a201074b3b26dfc4c16d2cf3d5 100644
--- a/typo3/sysext/lang/locallang_core.xlf
+++ b/typo3/sysext/lang/locallang_core.xlf
@@ -1197,6 +1197,9 @@ Do you want to refresh it now?</source>
<trans-unit id="toolbarItems.bookmarkSavedMessage">
<source>The bookmark was saved.</source>
</trans-unit>
+ <trans-unit id="toolbarItems.help">
+ <source>Help</source>
+ </trans-unit>
<trans-unit id="toolbarItems.search">
<source>Search</source>
</trans-unit>
diff --git a/typo3/sysext/opendocs/Classes/Backend/ToolbarItems/OpendocsToolbarItem.php b/typo3/sysext/opendocs/Classes/Backend/ToolbarItems/OpendocsToolbarItem.php
index 11a822c9300111b0278a377289696320d29d4659..4a0e8540eeef2ef8c96974ae03a8a105b65cdacd 100644
--- a/typo3/sysext/opendocs/Classes/Backend/ToolbarItems/OpendocsToolbarItem.php
+++ b/typo3/sysext/opendocs/Classes/Backend/ToolbarItems/OpendocsToolbarItem.php
@@ -87,12 +87,12 @@ class OpendocsToolbarItem implements ToolbarItemInterface
{
$numDocs = count($this->openDocs);
$title = htmlspecialchars($this->getLanguageService()->getLL('toolbaritem'));
-
- $opendocsMenu = [];
- $opendocsMenu[] = '<span title="' . $title . '">' . $this->iconFactory->getIcon('apps-toolbar-menu-opendocs', Icon::SIZE_SMALL)->render('inline') . '</span>';
- $opendocsMenu[] = '<span class="badge" id="tx-opendocs-counter">' . $numDocs . '</span>';
-
- return implode(LF, $opendocsMenu);
+ $icon = $this->iconFactory->getIcon('apps-toolbar-menu-opendocs', Icon::SIZE_SMALL)->render('inline');
+ return '
+ <span class="toolbar-item-icon" title="' . $title . '">' . $icon . '</span>
+ <span class="toolbar-item-title">' . $title . '</span>
+ <span class="toolbar-item-badge badge" id="tx-opendocs-counter">' . $numDocs . '</span>
+ ';
}
/**
@@ -106,26 +106,40 @@ class OpendocsToolbarItem implements ToolbarItemInterface
$openDocuments = $this->openDocs;
$recentDocuments = $this->recentDocs;
$entries = [];
+
+ $entries[] = '<h3 class="dropdown-headline">';
+ $entries[] = htmlspecialchars($this->getLanguageService()->getLL('toolbaritem'));
+ $entries[] = '</h3>';
+ $entries[] = '<hr>';
+
if (!empty($openDocuments)) {
- $entries[] = '<li class="dropdown-header">' . htmlspecialchars($languageService->getLL('open_docs')) . '</li>';
+ $entries[] = '<h3 class="dropdown-headline">';
+ $entries[] = htmlspecialchars($languageService->getLL('open_docs'));
+ $entries[] = '</h3>';
+ $entries[] = '<div class="dropdown-table">';
$i = 0;
foreach ($openDocuments as $md5sum => $openDocument) {
$i++;
$entries[] = $this->renderMenuEntry($openDocument, $md5sum, false, $i == 1);
}
- $entries[] = '<li class="divider"></li>';
+ $entries[] = '</div>';
+ $entries[] = '<hr>';
}
// If there are "recent documents" in the list, add them
if (!empty($recentDocuments)) {
- $entries[] = '<li class="dropdown-header">' . htmlspecialchars($languageService->getLL('recent_docs')) . '</li>';
+ $entries[] = '<h3 class="dropdown-headline">';
+ $entries[] = htmlspecialchars($languageService->getLL('recent_docs'));
+ $entries[] = '</h3>';
+ $entries[] = '<div class="dropdown-table">';
$i = 0;
foreach ($recentDocuments as $md5sum => $recentDocument) {
$i++;
$entries[] = $this->renderMenuEntry($recentDocument, $md5sum, true, $i == 1);
}
+ $entries[] = '</div>';
}
if (!empty($entries)) {
- $content = '<ul class="dropdown-list">' . implode('', $entries) . '</ul>';
+ $content = implode('', $entries);
} else {
$content = '<p>' . htmlspecialchars($languageService->getLL('no_docs')) . '</p>';
}
@@ -152,9 +166,7 @@ class OpendocsToolbarItem implements ToolbarItemInterface
}
$label = htmlspecialchars(strip_tags(htmlspecialchars_decode($document[0])));
$icon = $this->iconFactory->getIconForRecord($table, $record, Icon::SIZE_SMALL)->render();
- $link = BackendUtility::getModuleUrl('record_edit')
- . '&' . $document[2]
- . '&returnUrl=' . rawurlencode(BackendUtility::getModuleUrl('web_list') . '&id=' . (int)$document[3]['pid']);
+ $link = BackendUtility::getModuleUrl('record_edit') . '&' . $document[2];
$pageId = (int)$document[3]['uid'];
if ($document[3]['table'] !== 'pages') {
$pageId = (int)$document[3]['pid'];
@@ -163,18 +175,33 @@ class OpendocsToolbarItem implements ToolbarItemInterface
if (!$isRecentDoc) {
$title = htmlspecialchars($this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:rm.closeDoc'));
// Open document
- $closeIcon = $this->iconFactory->getIcon('actions-close', Icon::SIZE_SMALL)->render('inline');
- $entry = '
- <li class="opendoc">
- <a href="#" class="dropdown-list-link dropdown-link-list-add-close" onclick="' . htmlspecialchars($onClickCode) . '" target="content">' . $icon . ' ' . $label . '</a>
- <a href="#" class="dropdown-list-link-close" data-opendocsidentifier="' . $md5sum . '" title="' . $title . '">' . $closeIcon . '</a>
- </li>';
+ $entry = '<div class="dropdown-table-row t3js-topbar-opendocs-item">';
+ $entry .= '<div class="dropdown-table-column dropdown-table-icon">';
+ $entry .= $icon;
+ $entry .= '</div>';
+ $entry .= '<div class="dropdown-table-column dropdown-table-title">';
+ $entry .= '<a class="dropdown-table-title-ellipsis" href="#" onclick="' . htmlspecialchars($onClickCode) . '" target="contentIframe">';
+ $entry .= $label;
+ $entry .= '</a>';
+ $entry .= '</div>';
+ $entry .= '<div class="dropdown-table-column dropdown-table-actions">';
+ $entry .= '<a href="#" class="dropdown-table-actions-btn dropdown-table-actions-btn-close t3js-topbar-opendocs-close" data-opendocsidentifier="' . $md5sum . '" title="' . $title . '">';
+ $entry .= $this->iconFactory->getIcon('actions-close', Icon::SIZE_SMALL)->render('inline');
+ $entry .= '</a>';
+ $entry .= '</div>';
+ $entry .= '</div>';
} else {
// Recently used document
- $entry = '
- <li>
- <a href="#" class="dropdown-list-link" onclick="' . htmlspecialchars($onClickCode) . '" target="content">' . $icon . ' ' . $label . '</a>
- </li>';
+ $entry = '<div class="dropdown-table-row t3js-topbar-recentdoc">';
+ $entry .= '<div class="dropdown-table-column dropdown-table-icon">';
+ $entry .= $icon;
+ $entry .= '</div>';
+ $entry .= '<div class="dropdown-table-column dropdown-table-title">';
+ $entry .= '<a class="dropdown-table-title-ellipsis" href="#" onclick="' . htmlspecialchars($onClickCode) . '" target="contentIframe">';
+ $entry .= $label;
+ $entry .= '</a>';
+ $entry .= '</div>';
+ $entry .= '</div>';
}
return $entry;
}
diff --git a/typo3/sysext/opendocs/Resources/Public/JavaScript/Toolbar/OpendocsMenu.js b/typo3/sysext/opendocs/Resources/Public/JavaScript/Toolbar/OpendocsMenu.js
index 1bd9836b116d1038a89bb088119b6a56ade14ef3..da228a78fd42dd0148607be99db10a8b61739346 100644
--- a/typo3/sysext/opendocs/Resources/Public/JavaScript/Toolbar/OpendocsMenu.js
+++ b/typo3/sysext/opendocs/Resources/Public/JavaScript/Toolbar/OpendocsMenu.js
@@ -22,18 +22,17 @@ define(['jquery', 'TYPO3/CMS/Backend/Icons'], function($, Icons) {
/**
*
- * @type {{options: {containerSelector: string, hashDataAttributeName: string, closeSelector: string, menuContainerSelector: string, menuItemSelector: string, toolbarIconSelector: string, openDocumentsItemsSelector: string, counterSelector: string}}}
+ * @type {{options: {containerSelector: string, hashDataAttributeName: string, closeSelector: string, menuContainerSelector: string, toolbarIconSelector: string, openDocumentsItemsSelector: string, counterSelector: string}}}
* @exports TYPO3/CMS/Opendocs/OpendocsMenu
*/
var OpendocsMenu = {
options: {
containerSelector: '#typo3-cms-opendocs-backend-toolbaritems-opendocstoolbaritem',
hashDataAttributeName: 'opendocsidentifier',
- closeSelector: '.dropdown-list-link-close',
+ closeSelector: '.t3js-topbar-opendocs-close',
menuContainerSelector: '.dropdown-menu',
- menuItemSelector: '.dropdown-menu li a',
- toolbarIconSelector: '.dropdown-toggle span.icon',
- openDocumentsItemsSelector: 'li.opendoc',
+ toolbarIconSelector: '.toolbar-item-icon .t3js-icon',
+ openDocumentsItemsSelector: '.t3js-topbar-opendocs-item',
counterSelector: '#tx-opendocs-counter'
}
};
@@ -110,6 +109,7 @@ define(['jquery', 'TYPO3/CMS/Backend/Icons'], function($, Icons) {
* closes the menu (e.g. when clicked on an item)
*/
OpendocsMenu.toggleMenu = function() {
+ $('.scaffold').removeClass('scaffold-toolbar-expanded');
$(OpendocsMenu.options.containerSelector).toggleClass('open');
};
diff --git a/typo3/sysext/sys_action/Classes/Backend/ToolbarItems/ActionToolbarItem.php b/typo3/sysext/sys_action/Classes/Backend/ToolbarItems/ActionToolbarItem.php
index f57d05e2e177795ce4256a30d5a96f20b6318b1b..b934fdf2a42229950a1e19967cf17c278704766a 100644
--- a/typo3/sysext/sys_action/Classes/Backend/ToolbarItems/ActionToolbarItem.php
+++ b/typo3/sysext/sys_action/Classes/Backend/ToolbarItems/ActionToolbarItem.php
@@ -57,7 +57,11 @@ class ActionToolbarItem implements ToolbarItemInterface
public function getItem()
{
$title = htmlspecialchars($this->getLanguageService()->getLL('action_toolbaritem'));
- return '<span title="' . $title . '">' . $this->iconFactory->getIcon('apps-toolbar-menu-actions', Icon::SIZE_SMALL)->render('inline') . '</span>';
+ $icon = $this->iconFactory->getIcon('apps-toolbar-menu-actions', Icon::SIZE_SMALL)->render('inline');
+ return '
+ <span class="toolbar-item-icon" title="' . $title . '">' . $icon . '</span>
+ <span class="toolbar-item-title">' . $title . '</span>
+ ';
}
/**
@@ -68,15 +72,22 @@ class ActionToolbarItem implements ToolbarItemInterface
public function getDropDown()
{
$actionMenu = [];
- $actionMenu[] = '<ul class="dropdown-list">';
+ $actionMenu[] = '<h3 class="dropdown-headline">' . htmlspecialchars($this->getLanguageService()->getLL('sys_action')) . '</h3>';
+ $actionMenu[] = '<hr>';
+ $actionMenu[] = '<div class="dropdown-table">';
foreach ($this->actionEntries as $linkConf) {
- $actionMenu[] = '<li>';
- $actionMenu[] = '<a href="' . htmlspecialchars($linkConf[1]) . '" target="content" class="dropdown-list-link">';
- $actionMenu[] = $linkConf[2] . ' ' . htmlspecialchars($linkConf[0]);
+ $actionMenu[] = '<div class="dropdown-table-row">';
+ $actionMenu[] = '<div class="dropdown-table-column dropdown-table-icon">';
+ $actionMenu[] = $linkConf[2];
+ $actionMenu[] = '</div>';
+ $actionMenu[] = '<div class="dropdown-table-column dropdown-table-title">';
+ $actionMenu[] = '<a class="t3js-topbar-link" href="' . htmlspecialchars($linkConf[1]) . '" target="contentIframe">';
+ $actionMenu[] = htmlspecialchars($linkConf[0]);
$actionMenu[] = '</a>';
- $actionMenu[] = '</li>';
+ $actionMenu[] = '</div>';
+ $actionMenu[] = '</div>';
}
- $actionMenu[] = '</ul>';
+ $actionMenu[] = '</div>';
return implode(LF, $actionMenu);
}
diff --git a/typo3/sysext/workspaces/Classes/Backend/ToolbarItems/WorkspaceSelectorToolbarItem.php b/typo3/sysext/workspaces/Classes/Backend/ToolbarItems/WorkspaceSelectorToolbarItem.php
index 1491053608e51130f761c3da4d65b99ebbe7574b..1e909a5a8fa0d690caed0784bd4f55e6dda5c7ec 100644
--- a/typo3/sysext/workspaces/Classes/Backend/ToolbarItems/WorkspaceSelectorToolbarItem.php
+++ b/typo3/sysext/workspaces/Classes/Backend/ToolbarItems/WorkspaceSelectorToolbarItem.php
@@ -71,9 +71,12 @@ class WorkspaceSelectorToolbarItem implements ToolbarItemInterface
if (empty($this->availableWorkspaces)) {
return '';
}
-
- return '<span title="' . htmlspecialchars($this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.workspace')) . '">'
- . $this->iconFactory->getIcon('apps-toolbar-menu-workspace', Icon::SIZE_SMALL)->render('inline') . '</span>';
+ $title = htmlspecialchars($this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.workspace'));
+ $icon = $this->iconFactory->getIcon('apps-toolbar-menu-workspace', Icon::SIZE_SMALL)->render('inline');
+ return '
+ <span class="toolbar-item-icon" title="' . $title . '">' . $icon . '</span>
+ <span class="toolbar-item-title">' . $title . '</span>
+ ';
}
/**
@@ -98,33 +101,59 @@ class WorkspaceSelectorToolbarItem implements ToolbarItemInterface
foreach ($this->availableWorkspaces as $workspaceId => $label) {
$workspaceId = (int)$workspaceId;
$iconState = ($workspaceId === $activeWorkspace ? $stateCheckedIcon : $stateUncheckedIcon);
- $classValue = ($workspaceId === $activeWorkspace ? ' class="selected"' : '');
+ $classValue = ($workspaceId === $activeWorkspace ? 'selected' : '');
$sectionName = ($index++ === 0 ? 'top' : 'items');
- $workspaceSections[$sectionName][] = '<li' . $classValue . '>'
- . '<a href="' . htmlspecialchars(\TYPO3\CMS\Backend\Utility\BackendUtility::getModuleUrl('main', ['changeWorkspace' => $workspaceId])) . '" data-workspaceid="' . $workspaceId . '" class="dropdown-list-link tx-workspaces-switchlink">'
- . $iconState . ' ' . htmlspecialchars($label)
- . '</a></li>';
+ $workspaceSections[$sectionName][] = '
+ <div class="dropdown-table-row t3js-workspace-item ' . $classValue . '">
+ <div class="dropdown-table-column dropdown-table-icon">
+ ' . $iconState . '
+ </div>
+ <div class="dropdown-table-column">
+ <a href="' . htmlspecialchars(\TYPO3\CMS\Backend\Utility\BackendUtility::getModuleUrl('main', ['changeWorkspace' => $workspaceId])) . '" data-workspaceid="' . $workspaceId . '" class="t3js-workspaces-switchlink">
+ ' . htmlspecialchars($label) . '
+ </a>
+ </div>
+ </div>
+ ';
}
if (!empty($workspaceSections['top'])) {
// Add the "Go to workspace module" link
// if there is at least one icon on top and if the access rights are there
if ($backendUser->check('modules', 'web_WorkspacesWorkspaces')) {
- $workspaceSections['top'][] = '<li><a target="content" data-module="web_WorkspacesWorkspaces" class="dropdown-list-link tx-workspaces-modulelink">'
- . $stateUncheckedIcon . ' ' . htmlspecialchars($languageService->getLL('bookmark_workspace'))
- . '</a></li>';
+ $workspaceSections['top'][] = '
+ <div class="dropdown-table-row">
+ <div class="dropdown-table-column dropdown-table-icon">
+ ' . $stateUncheckedIcon . '
+ </div>
+ <div class="dropdown-table-column">
+ <a href="#" target="contentIframe" data-module="web_WorkspacesWorkspaces" class="t3js-workspaces-modulelink">
+ ' . htmlspecialchars($languageService->getLL('bookmark_workspace')) . '
+ </a>
+ </div>
+ </div>
+ ';
}
} else {
// no items on top (= no workspace to work in)
- $workspaceSections['top'][] = '<li>' . $stateUncheckedIcon . ' ' . htmlspecialchars($languageService->getLL('bookmark_noWSfound')) . '</li>';
+ $workspaceSections['top'][] = '
+ <div class="dropdown-table-row">
+ <div class="dropdown-table-column dropdown-table-icon">
+ ' . $stateUncheckedIcon . '
+ </div>
+ <div class="dropdown-table-column">
+ ' . htmlspecialchars($languageService->getLL('bookmark_noWSfound')) . '
+ </div>
+ </div>
+ ';
}
$workspaceMenu = [
- '<ul class="dropdown-list">' ,
- implode(LF, $workspaceSections['top']),
- (!empty($workspaceSections['items']) ? '<li class="divider"></li>' : ''),
- implode(LF, $workspaceSections['items']),
- '</ul>'
+ '<h3 class="dropdown-headline">' . htmlspecialchars($this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:toolbarItems.workspace')) . '</h3>',
+ '<hr>',
+ '<div class="dropdown-table">' . implode(LF, $workspaceSections['top']) . '</div>',
+ (!empty($workspaceSections['items']) ? '<hr>' : ''),
+ '<div class="dropdown-table">' . implode(LF, $workspaceSections['items']) . '</div>',
];
return implode(LF, $workspaceMenu);
diff --git a/typo3/sysext/workspaces/Resources/Public/JavaScript/Toolbar/WorkspacesMenu.js b/typo3/sysext/workspaces/Resources/Public/JavaScript/Toolbar/WorkspacesMenu.js
index 184c85e76b274d2dc228d63f24009e68f1ab9b0a..bc4e17d616ca47d9e0113393482bd2b649467c6f 100644
--- a/typo3/sysext/workspaces/Resources/Public/JavaScript/Toolbar/WorkspacesMenu.js
+++ b/typo3/sysext/workspaces/Resources/Public/JavaScript/Toolbar/WorkspacesMenu.js
@@ -27,12 +27,12 @@ define(['jquery'], function($) {
var WorkspacesMenu = {
options: {
containerSelector: '#typo3-cms-workspaces-backend-toolbaritems-workspaceselectortoolbaritem',
- menuItemSelector: '.dropdown-menu li a.tx-workspaces-switchlink',
+ menuItemSelector: '.t3js-workspaces-switchlink',
activeMenuItemSelector: '.dropdown-menu .selected',
toolbarItemSelector: '.dropdown-toggle',
workspaceBodyClass: 'typo3-in-workspace', // attached to <body> when in a workspace
- workspacesTitleInToolbarClass: 'topbar-workspaces-title',
- workspaceModuleLinkSelector: '.tx-workspaces-modulelink'
+ workspacesTitleInToolbarClass: 'toolbar-item-name',
+ workspaceModuleLinkSelector: '.t3js-workspaces-modulelink'
}
};
@@ -123,8 +123,8 @@ define(['jquery'], function($) {
// add "selected" class and checkmark
var $activeElement = $(WorkspacesMenu.options.menuItemSelector + '[data-workspaceid=' + id + ']', WorkspacesMenu.options.containerSelector);
- $activeElement.find('i').removeClass(stateInactiveClass).addClass(stateActiveClass);
- $activeElement.parent().addClass('selected');
+ $activeElement.parent().parent().find('i').removeClass(stateInactiveClass).addClass(stateActiveClass);
+ $activeElement.parent().parent().addClass('selected');
};
/**