[TASK] Adjust ExtJS Viewport 61/44561/2
authorBenjamin Kott <benjamin.kott@outlook.com>
Thu, 5 Nov 2015 22:13:51 +0000 (23:13 +0100)
committerAlexander Opitz <opitz.alexander@googlemail.com>
Fri, 6 Nov 2015 10:04:13 +0000 (11:04 +0100)
Resolves: #71356
Releases: master
Change-Id: Ibb193e1a098de03c101ee391aa4b71f7f97cbfa7
Reviewed-on: https://review.typo3.org/44561
Reviewed-by: Michael Oehlhof <typo3@oehlhof.de>
Tested-by: Michael Oehlhof <typo3@oehlhof.de>
Reviewed-by: Daniel Goerz <ervaude@gmail.com>
Tested-by: Daniel Goerz <ervaude@gmail.com>
Reviewed-by: Alexander Opitz <opitz.alexander@googlemail.com>
Tested-by: Alexander Opitz <opitz.alexander@googlemail.com>
Build/Resources/Public/Less/Component/icon.less
Build/Resources/Public/Less/TYPO3/_element_buttons.less
Build/Resources/Public/Less/TYPO3/_element_docheader.less
Build/Resources/Public/Less/TYPO3/_element_pagetree.less
Build/Resources/Public/Less/TYPO3/_element_tree.less
Build/Resources/Public/Less/TYPO3/_module_menu.less
typo3/sysext/backend/Resources/Public/JavaScript/extjs/components/pagetree/javascript/app.js
typo3/sysext/backend/Resources/Public/JavaScript/extjs/viewportConfiguration.js
typo3/sysext/t3skin/Resources/Public/Css/backend.css
typo3/sysext/t3skin/extjs/xtheme-t3skin.css

index ac4f499..dab6163 100644 (file)
@@ -65,6 +65,9 @@
        width: 68.75%;
        text-align: center;
 }
+.icon-color {
+       fill: currentColor;
+}
 
 //
 // Icon Animation
index 7cc6894..936e7e3 100644 (file)
                }
        }
 }
-
-.btn-danger,
-.btn-success,
-.btn-warning,
-.btn-info {
-       .icon-color {
-               fill: currentColor;
-       }
-}
index 8fcdcc0..491dcfe 100644 (file)
 // ExtJS Viewport
 //
 
-//
-// Collapsed tree frame is not invisible, but 5px wide.
-// If no tree frame is in use, an empty container is shown instead
-//
-
-#typo3-navigationContainer-xsplit,
-#typo3-navigationContainer-xcollapsed {
-       background: @body-bg url(../../Public/Images/docheader-split-background.png) left top repeat-x;
-}
-
 
 // override the ExtJS collapse page tree button
 // -------------------------
 @module-menu-border-color-light: #C3C3C3;
 
 #typo3-navigationContainer-xcollapsed {
-       width: 24px!important;
        &:before {
                content: "";
                position: absolute;
 // close page tree button
 .x-layout-split-west .x-layout-mini {
        &:extend(.typo3-btn-collapse-page-tree all);
-       margin-left: -2px;
        background-color: @module-menu-border-color-lighter;
        &:hover {
                background-color: darken(@module-menu-border-color-lighter,5%);
index e5f638b..789a771 100644 (file)
@@ -56,7 +56,7 @@
 
        .x-tree-node {
                .x-tree-node-el {
-                       margin-right: 0;
+                       margin-right: 3px;
                        border-top: 1px solid transparent;
                        border-bottom: 1px solid transparent;
                        border-left: 1px solid transparent;
                .x-tree-selected {
                        border-bottom: 1px solid #d7d7d7;
                        border-top: 1px solid #d7d7d7;
-                       border-left: 1px solid #d7d7d7;
+                       border-right: 1px solid #d7d7d7;
                }
 
                .x-tree-node-over {
-                       background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAABCAYAAAAb4BS0AAAAGElEQVR42gENAPL/AMjIyEzIyMizyMjI/zhvCQelaHPPAAAAAElFTkSuQmCC");
-                       background-position: right;
-                       background-repeat: repeat-y;
                        background-color: #f2f2f2;
                        border-top-right-radius: 3px;
                        border-bottom-right-radius: 3px;
index 02c399b..7a89614 100644 (file)
@@ -432,6 +432,9 @@ body#ext-backend-Modules-FileSystemNavigationFrame-index-php {
 
 #ext-backend-Modules-FileSystemNavigationFrame-index-php #typo3-docbody,
 #typo3-pagetree-treeContainer {
-       border-right: 1px solid @navigation-border;
        background-color: @navigation-bg;
 }
+.x-layout-split {
+       width: 1px;
+       background-color: #c3c3c3;
+}
index cb3b12b..0b4258d 100644 (file)
@@ -19,7 +19,7 @@
 @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: 3px;
+@module-menu-item-padding-vertical: 4px;
 @module-menu-item-padding-horizontal: 9px;
 
 // Module menu container
index c483913..144c051 100644 (file)
@@ -142,6 +142,7 @@ TYPO3.Components.PageTree.App = Ext.extend(Ext.Panel, {
 
                        this.add({
                                layout: 'border',
+                               border: false,
                                items: [
                                        topPanelItems,
                                        {
@@ -269,7 +270,7 @@ TYPO3.Components.PageTree.App = Ext.extend(Ext.Panel, {
         */
        afterTopPanelItemAdded: function(component) {
                var topPanelItems = Ext.getCmp(this.id + '-topPanelItems');
-               topPanelItems.setHeight(topPanelItems.getHeight() + component.getHeight() + 3);
+               topPanelItems.setHeight(topPanelItems.getHeight() + component.getHeight());
                this.doLayout();
        },
 
@@ -281,7 +282,7 @@ TYPO3.Components.PageTree.App = Ext.extend(Ext.Panel, {
         */
        removeIndicator: function(component) {
                var topPanelItems = Ext.getCmp(this.id + '-topPanelItems');
-               topPanelItems.setHeight(topPanelItems.getHeight() - component.getHeight() - 3);
+               topPanelItems.setHeight(topPanelItems.getHeight() - component.getHeight());
                Ext.getCmp(this.id + '-indicatorBar').remove(component);
                this.doLayout();
        },
index 5ca36c9..9c85edf 100644 (file)
@@ -56,7 +56,7 @@ TYPO3.Viewport.configuration = {
                        layout: 'absolute',
                        region: 'north',
                        id: 'typo3-topbar',
-                       height: 42,
+                       height: 45,
                        contentEl: 'typo3-top-container',
                        border: false
                },
@@ -69,7 +69,7 @@ TYPO3.Viewport.configuration = {
                        collapseMode: null,
                        floatable: true,
                        minWidth: 50,
-                       maxWidth: 400,
+                       maxWidth: 250,
                        hideCollapseTool: true,
                        split: true,
                        useSplitTips: true,
@@ -82,7 +82,7 @@ TYPO3.Viewport.configuration = {
                                        var containerWidth = adjWidth,
                                                moduleMenuWidth = document.getElementById('typo3-menu').clientWidth,
                                                moduleMenuMinWidth = 100,
-                                               moduleMenuSnappedWidth = 46,
+                                               moduleMenuSnappedWidth = 50,
                                                moduleMenuSnappingClass = 'typo3-module-menu-snapped',
                                                forceSnapMode = (containerWidth <= moduleMenuMinWidth);
                                        if (forceSnapMode){
@@ -108,7 +108,8 @@ TYPO3.Viewport.configuration = {
                                        layout: 'fit',
                                        id: 'typo3-navigationContainer',
                                        width: 300,
-                                       minWidth: 20,
+                                       minWidth: 250,
+                                       maxWidth: 500,
                                        floatable: true,
                                        animCollapse: false,
                                        split: true,
@@ -134,21 +135,13 @@ TYPO3.Viewport.configuration = {
                                        ]
                                },
                                {
+                                       id: 'typo3-contentContainerWrapper',
+                                       name: 'content',
+                                       border: false,
+                                       xtype: 'panel',
                                        region: 'center',
-                                       layout: 'border',
-                                       items: [
-                                               {
-                                                       id: 'typo3-contentContainerWrapper',
-                                                       border: false,
-                                                       layout: 'fit',
-                                                       name: 'content',
-                                                       region: 'center',
-                                                       xtype: 'panel',
-                                                       layout: 'card',
-                                                       activeItem: 0,
-                                                       items: TYPO3.Viewport.ContentCards.cards
-                                               }
-                                       ]
+                                       layout: 'card',
+                                       items: TYPO3.Viewport.ContentCards.cards
                                }
                        ]
                }
index d332d3c..781e966 100644 (file)
@@ -7724,6 +7724,9 @@ button.close {
   width: 68.75%;
   text-align: center;
 }
+.icon-color {
+  fill: currentColor;
+}
 .icon-spin .icon-markup {
   -webkit-animation: icon-spin 2s infinite linear;
   animation: icon-spin 2s infinite linear;
@@ -9542,13 +9545,6 @@ div#contentMenu1 {
   padding-bottom: 3px;
   border-bottom: 1px solid #C3C3C3;
 }
-#typo3-navigationContainer-xsplit,
-#typo3-navigationContainer-xcollapsed {
-  background: #ffffff url(../../Public/Images/docheader-split-background.png) left top repeat-x;
-}
-#typo3-navigationContainer-xcollapsed {
-  width: 24px!important;
-}
 #typo3-navigationContainer-xcollapsed:before {
   content: "";
   position: absolute;
@@ -9596,7 +9592,6 @@ div#contentMenu1 {
   text-align: center;
 }
 .x-layout-split-west .x-layout-mini {
-  margin-left: -2px;
   background-color: #f5f5f5;
 }
 .x-layout-split-west .x-layout-mini:hover {
@@ -9878,7 +9873,7 @@ ul.typo3-messages {
   background: none;
 }
 #typo3-pagetree .x-tree-node .x-tree-node-el {
-  margin-right: 0;
+  margin-right: 3px;
   border-top: 1px solid transparent;
   border-bottom: 1px solid transparent;
   border-left: 1px solid transparent;
@@ -9887,12 +9882,9 @@ ul.typo3-messages {
 #typo3-pagetree .x-tree-node .x-tree-selected {
   border-bottom: 1px solid #d7d7d7;
   border-top: 1px solid #d7d7d7;
-  border-left: 1px solid #d7d7d7;
+  border-right: 1px solid #d7d7d7;
 }
 #typo3-pagetree .x-tree-node .x-tree-node-over {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAABCAYAAAAb4BS0AAAAGElEQVR42gENAPL/AMjIyEzIyMizyMjI/zhvCQelaHPPAAAAAElFTkSuQmCC");
-  background-position: right;
-  background-repeat: repeat-y;
   background-color: #f2f2f2;
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
@@ -11497,9 +11489,12 @@ body#ext-backend-Modules-FileSystemNavigationFrame-index-php {
 }
 #ext-backend-Modules-FileSystemNavigationFrame-index-php #typo3-docbody,
 #typo3-pagetree-treeContainer {
-  border-right: 1px solid #c3c3c3;
   background-color: #f5f5f5;
 }
+.x-layout-split {
+  width: 1px;
+  background-color: #c3c3c3;
+}
 .pagination .t3-icon {
   margin: 0;
 }
@@ -11589,12 +11584,6 @@ a.badge-danger:focus {
 .btn-checkbox input[type=checkbox]:checked + .fa:before {
   content: "\f00c";
 }
-.btn-danger .icon-color,
-.btn-success .icon-color,
-.btn-warning .icon-color,
-.btn-info .icon-color {
-  fill: currentColor;
-}
 .dropzone {
   position: relative;
   cursor: pointer;
@@ -12656,7 +12645,7 @@ iframe {
   position: relative;
   cursor: pointer;
   display: block;
-  padding: 3px 9px;
+  padding: 4px 9px;
   text-transform: uppercase;
 }
 [id="typo3-menu"] .typo3-module-menu-group-header:before,
@@ -12682,7 +12671,7 @@ iframe {
   position: relative;
   cursor: pointer;
   display: block;
-  padding: 3px 9px;
+  padding: 4px 9px;
   color: #aaaaaa;
   border-radius: 0 2px 2px 0;
   text-decoration: none;
index 8b726f5..68bca79 100644 (file)
@@ -2100,11 +2100,6 @@ body.x-body-masked .x-window-plain .x-window-mc {
        color: #606060;
 }
 
-/* Tree frame split bar */
-#typo3-navigationContainer-xsplit {
-       width: 0;
-}
-
 /* Collapse icon */
 #typo3-navigationContainer-xsplit .x-layout-mini-west,
 #typo3-navigationContainer-xcollapsed .x-layout-mini-west {
@@ -2126,7 +2121,8 @@ body.x-body-masked .x-window-plain .x-window-mc {
 }
 
 #typo3-navigationContainer-xcollapsed {
-       width: 10px !important;
+       overflow: visible;
+       width: 9px!important;
 }
 
 /**