[TASK] Optimize module menu 96/34496/5
authorBenjamin Kott <benjamin.kott@outlook.com>
Sun, 23 Nov 2014 14:51:07 +0000 (15:51 +0100)
committerBenjamin Mack <benni@typo3.org>
Mon, 24 Nov 2014 08:39:36 +0000 (09:39 +0100)
* implement snapping mode when blow 100px
* adjust active status based
* adjust colors
* cleanup less

Resolves: #63271
Releases: master
Change-Id: I8ba517f1342be5d51d432f6454db444dcfa5f0c6
Reviewed-on: http://review.typo3.org/34496
Reviewed-by: Georg Ringer <georg.ringer@gmail.com>
Tested-by: Georg Ringer <georg.ringer@gmail.com>
Reviewed-by: Benjamin Mack <benni@typo3.org>
Tested-by: Benjamin Mack <benni@typo3.org>
typo3/js/extjs/viewportConfiguration.js
typo3/sysext/backend/Resources/Public/JavaScript/modulemenu.js
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_module_menu.less
typo3/sysext/t3skin/Resources/Private/Styles/bootstrap/variables.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css

index 5d53907..ffa7aaf 100644 (file)
@@ -72,13 +72,35 @@ TYPO3.Viewport.configuration = {
                        collapsible: false,
                        collapseMode: null,
                        floatable: true,
+                       minWidth: 50,
+                       maxWidth: 400,
                        hideCollapseTool: true,
                        split: true,
                        useSplitTips: true,
                        splitTip: top.TYPO3.LLL.viewPort.tooltipModuleMenuSplit,
                        enableChildSplit: true,
                        border: false,
-                       autoScroll: true
+                       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',
index 5a13ab8..0348751 100644 (file)
@@ -46,7 +46,9 @@ TYPO3.ModuleMenu.App = {
                        if ($group.length > 0) {
                                var $groupContainer = $group.find('.typo3-module-menu-group-container');
                                $group.addClass('collapsed').removeClass('expanded');
-                               $groupContainer.slideUp('fast');
+                               $groupContainer.hide().promise().done(function() {
+                                       TYPO3.Backend.doLayout();
+                               });
                        }
                });
                me.initializeEvents();
@@ -60,11 +62,15 @@ TYPO3.ModuleMenu.App = {
                        if ($group.hasClass('expanded')) {
                                me.addCollapsedMainMenuItem($group.attr('id'));
                                $group.addClass('collapsed').removeClass('expanded');
-                               $groupContainer.slideUp();
+                               $groupContainer.slideUp().promise().done(function() {
+                                       TYPO3.Backend.doLayout();
+                               });
                        } else {
                                me.removeCollapseMainMenuItem($group.attr('id'));
                                $group.addClass('expanded').removeClass('collapsed');
-                               $groupContainer.slideDown();
+                               $groupContainer.slideDown().promise().done(function() {
+                                       TYPO3.Backend.doLayout();
+                               });
                        }
                });
                // register clicking on sub modules
index 785e01b..64a4128 100644 (file)
 /* - - - - - - - - - - - - - - - - - - - - -
 Module menu
 - - - - - - - - - - - - - - - - - - - - - */
-@module-menu-height: 32px;
-@module-menu-padding-horizontal: @navbar-padding-horizontal;
-@module-menu-padding-vertical: floor((@module-menu-height - @line-height-computed) / 2);
 
-#typo3-module-menu {
-       background: @navbar-inverse-bg;
-       color: @navbar-inverse-color;
+// Module icons
+@module-menu-icon-border-radius: @border-radius-small;
+@module-menu-icon-height: 28px;
+@module-menu-icon-width: 28px;
+@module-menu-icon-font-size: 21px;
+
+// Module base
+@module-menu-color: #ddd;
+@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: #666;
+@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: 5px;
+@module-menu-item-padding-horizontal: 10px;
+
+
+[id="typo3-module-menu"] {
+       background: @module-menu-bg;
+       color: @module-menu-color;
 }
-#typo3-menu {
+[id="typo3-menu"] {
        .list-unstyled();
-       background-color: darken(@navbar-inverse-bg,5%);
-       margin-bottom: ceil(@module-menu-padding-vertical * 2);
+       &:after {
+               content: '';
+               position: absolute;
+               top: 0;
+               right: 0;
+               height: 100%;
+               width: 1px;
+               background-color: darken(@module-menu-group-bg,10%);
+       }
+
+       /// Module menu group
        .typo3-module-menu-group-container {
+               clear: both;
                .list-unstyled();
-               > li {
-                       margin: 1px 0;
-               }
+               padding-right: 15px;
        }
        .typo3-module-menu-group {
-               .transition(all 0.4s ease-in-out);
+               .transition(background-color 0.4s ease-in-out);
                position: relative;
-               background-color: @navbar-inverse-bg;
-               padding: 4px 0 5px;
-               border-left: 3px solid lighten(@navbar-inverse-bg, 10%);
-               margin: 1px 0;
+               color: @module-menu-group-color;
+               background-color: @module-menu-group-bg;
+               border-bottom: 1px solid @module-menu-border-color;
+               padding: 5px 0;
        }
        .typo3-module-menu-group.expanded {
-               background-color: darken(@navbar-inverse-bg, 3%);
-               border-left-color: lighten(@navbar-inverse-bg, 25%);
+               background-color: @module-menu-group-expanded-bg;
        }
        .typo3-module-menu-group-header {
                .clearfix();
                position: relative;
                cursor: pointer;
                display: block;
-               padding: 3px 10px 3px 7px;
+               padding: @module-menu-item-padding-vertical @module-menu-item-padding-horizontal;
                text-transform: uppercase;
        }
+
+       // Module menu item
        .typo3-module-menu-item {
-               &:hover {
-                       color: @navbar-inverse-link-hover-color;
-                       background-color: @navbar-inverse-link-hover-bg;
-               }
-               &.active {
-                       position: relative;
-                       background-color: lighten(@navbar-inverse-bg, 10%);
-                       a {
-                               color: @navbar-inverse-link-active-color;
-                               background-color: @navbar-inverse-link-active-bg;
-                       }
-                       &:after {
-                               display: block;
-                               content: '';
-                               position: absolute;
-                               right: 0;
-                               top: 50%;
-                               margin-top: -8px;
-                               border: 8px solid transparent;
-                               border-right: 8px solid white;
-                       }
-               }
+               margin: 1px 0;
        }
+
+       // Module menu links
        .typo3-module-menu-item-link {
                .clearfix();
+               position: relative;
+               cursor: pointer;
                display: block;
-               padding: 2px 10px 2px 7px;
-               color: @navbar-inverse-link-color;
+               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;
                &:hover {
-                       text-decoration: none;
-                       color: @navbar-inverse-link-hover-color;
+                       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 {
                position: relative;
                display: block;
                padding: 0px;
-               height: 32px;
-               width: 32px;
+               height: @module-menu-icon-width;
+               width: @module-menu-icon-height;
                margin-right: 10px;
                float: left;
                overflow: hidden;
-               border-radius: @border-radius-small;
+               border-radius: @module-menu-icon-border-radius;
                > span {
                        display: table;
                        height: 100%;
@@ -108,19 +134,21 @@ Module menu
                        }
                }
                img {
-                       max-height: 32px;
-                       max-width: 32px;
+                       max-height: @module-menu-icon-width;
+                       max-width: @module-menu-icon-width;
                }
-       }
-       .typo3-module-menu-group-icon {
                .fa {
-                       font-size: 1.6em;
+                       font-size: @module-menu-icon-font-size;
                        vertical-align: middle;
                }
        }
+
+       // Module menu group and item titles
        .typo3-module-menu-group-title,
        .typo3-module-menu-item-title {
-               padding-top: 8px;
+               white-space: nowrap;
+               text-overflow: ellipsis;
+               padding-top: 6px;
                display: block;
                overflow: hidden;
                *zoom: 1;
@@ -129,28 +157,30 @@ Module menu
                padding-right: 20px;
                .caret {
                        .transition(all 0.25s ease-in-out);
+                       .rotate(90deg);
                        position: absolute;
                        top: 17px;
-                       right: 20px;
+                       right: 18px;
                }
        }
+
        // Module Group Expanded
        .expanded {
-               .typo3-module-menu-group-header {
-                       color: @navbar-inverse-link-active-color;
-               }
                .typo3-module-menu-group-title {
                        .caret {
-                               .rotate(-180deg);
+                               .rotate(0deg);
                        }
                }
        }
-       // Navigation Snapped
-       // Not used in use right now
-       &.nav-snapped {
-               .typo3-module-menu-group-title,
-               .typo3-module-menu-item-title {
-                       display: none;
-               }
+}
+
+// Module menu snapped
+.typo3-module-menu-snapped {
+       .typo3-module-menu-group-container {
+               padding-right: 0;
+       }
+       .typo3-module-menu-group-title,
+       .typo3-module-menu-item-title {
+               display: none;
        }
 }
\ No newline at end of file
index 7d7dc3d..7b6415c 100644 (file)
 // Inverted navbar
 // Reset inverted navbar basics
 @navbar-inverse-color:                      #999;
-@navbar-inverse-bg:                         #222;
+@navbar-inverse-bg:                         #111;
 @navbar-inverse-border:                     none;
 
 // Inverted navbar links
index 803250b..ca68262 100644 (file)
@@ -3374,7 +3374,7 @@ fieldset[disabled] .navbar-default .btn-link:focus {
   color: #cccccc;
 }
 .navbar-inverse {
-  background-color: #222222;
+  background-color: #111111;
   border-color: none;
 }
 .navbar-inverse .navbar-brand {
@@ -3420,7 +3420,7 @@ fieldset[disabled] .navbar-default .btn-link:focus {
 }
 .navbar-inverse .navbar-collapse,
 .navbar-inverse .navbar-form {
-  border-color: #101010;
+  border-color: #000000;
 }
 .navbar-inverse .navbar-nav > .open > a,
 .navbar-inverse .navbar-nav > .open > a:hover,
@@ -11192,169 +11192,170 @@ Loadingbar and Animations
 /* - - - - - - - - - - - - - - - - - - - - -
 Module menu
 - - - - - - - - - - - - - - - - - - - - - */
-#typo3-module-menu {
+[id="typo3-module-menu"] {
   background: #222222;
-  color: #999999;
+  color: #dddddd;
 }
-#typo3-menu {
+[id="typo3-menu"] {
   padding-left: 0;
   list-style: none;
-  background-color: #151515;
-  margin-bottom: 14px;
 }
-#typo3-menu .typo3-module-menu-group-container {
+[id="typo3-menu"]:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: 1px;
+  background-color: #080808;
+}
+[id="typo3-menu"] .typo3-module-menu-group-container {
+  clear: both;
   padding-left: 0;
   list-style: none;
+  padding-right: 15px;
 }
-#typo3-menu .typo3-module-menu-group-container > li {
-  margin: 1px 0;
-}
-#typo3-menu .typo3-module-menu-group {
-  -webkit-transition: all 0.4s ease-in-out;
-  -o-transition: all 0.4s ease-in-out;
-  transition: all 0.4s ease-in-out;
+[id="typo3-menu"] .typo3-module-menu-group {
+  -webkit-transition: background-color 0.4s ease-in-out;
+  -o-transition: background-color 0.4s ease-in-out;
+  transition: background-color 0.4s ease-in-out;
   position: relative;
+  color: #dddddd;
   background-color: #222222;
-  padding: 4px 0 5px;
-  border-left: 3px solid #3c3c3c;
-  margin: 1px 0;
+  border-bottom: 1px solid #111111;
+  padding: 5px 0;
 }
-#typo3-menu .typo3-module-menu-group.expanded {
-  background-color: #1a1a1a;
-  border-left-color: #626262;
+[id="typo3-menu"] .typo3-module-menu-group.expanded {
+  background-color: #222222;
 }
-#typo3-menu .typo3-module-menu-group-header {
+[id="typo3-menu"] .typo3-module-menu-group-header {
   position: relative;
   cursor: pointer;
   display: block;
-  padding: 3px 10px 3px 7px;
+  padding: 5px 10px;
   text-transform: uppercase;
 }
-#typo3-menu .typo3-module-menu-group-header:before,
-#typo3-menu .typo3-module-menu-group-header:after {
+[id="typo3-menu"] .typo3-module-menu-group-header:before,
+[id="typo3-menu"] .typo3-module-menu-group-header:after {
   content: " ";
   display: table;
 }
-#typo3-menu .typo3-module-menu-group-header:after {
+[id="typo3-menu"] .typo3-module-menu-group-header:after {
   clear: both;
 }
-#typo3-menu .typo3-module-menu-group-header:before,
-#typo3-menu .typo3-module-menu-group-header:after {
+[id="typo3-menu"] .typo3-module-menu-group-header:before,
+[id="typo3-menu"] .typo3-module-menu-group-header:after {
   content: " ";
   display: table;
 }
-#typo3-menu .typo3-module-menu-group-header:after {
+[id="typo3-menu"] .typo3-module-menu-group-header:after {
   clear: both;
 }
-#typo3-menu .typo3-module-menu-item:hover {
-  color: #c8c8c8;
-  background-color: #323232;
+[id="typo3-menu"] .typo3-module-menu-item {
+  margin: 1px 0;
 }
-#typo3-menu .typo3-module-menu-item.active {
+[id="typo3-menu"] .typo3-module-menu-item-link {
   position: relative;
-  background-color: #3c3c3c;
-}
-#typo3-menu .typo3-module-menu-item.active a {
-  color: #ffffff;
-  background-color: #4e4e4e;
-}
-#typo3-menu .typo3-module-menu-item.active:after {
-  display: block;
-  content: '';
-  position: absolute;
-  right: 0;
-  top: 50%;
-  margin-top: -8px;
-  border: 8px solid transparent;
-  border-right: 8px solid white;
-}
-#typo3-menu .typo3-module-menu-item-link {
+  cursor: pointer;
   display: block;
-  padding: 2px 10px 2px 7px;
-  color: #999999;
+  padding: 5px 10px;
+  color: #666666;
+  border-radius: 0 2px 2px 0;
+  text-decoration: none;
 }
-#typo3-menu .typo3-module-menu-item-link:before,
-#typo3-menu .typo3-module-menu-item-link:after {
+[id="typo3-menu"] .typo3-module-menu-item-link:before,
+[id="typo3-menu"] .typo3-module-menu-item-link:after {
   content: " ";
   display: table;
 }
-#typo3-menu .typo3-module-menu-item-link:after {
+[id="typo3-menu"] .typo3-module-menu-item-link:after {
   clear: both;
 }
-#typo3-menu .typo3-module-menu-item-link:before,
-#typo3-menu .typo3-module-menu-item-link:after {
+[id="typo3-menu"] .typo3-module-menu-item-link:before,
+[id="typo3-menu"] .typo3-module-menu-item-link:after {
   content: " ";
   display: table;
 }
-#typo3-menu .typo3-module-menu-item-link:after {
+[id="typo3-menu"] .typo3-module-menu-item-link:after {
   clear: both;
 }
-#typo3-menu .typo3-module-menu-item-link:hover {
-  text-decoration: none;
-  color: #c8c8c8;
+[id="typo3-menu"] .typo3-module-menu-item-link:hover {
+  color: #dddddd;
+  background-color: #2a2a2a;
+}
+[id="typo3-menu"] .typo3-module-menu-item.active .typo3-module-menu-item-link {
+  color: #ffffff;
+  background-color: #484848;
 }
-#typo3-menu .typo3-module-menu-group-icon,
-#typo3-menu .typo3-module-menu-item-icon {
+[id="typo3-menu"] .typo3-module-menu-group-icon,
+[id="typo3-menu"] .typo3-module-menu-item-icon {
   position: relative;
   display: block;
   padding: 0px;
-  height: 32px;
-  width: 32px;
+  height: 28px;
+  width: 28px;
   margin-right: 10px;
   float: left;
   overflow: hidden;
   border-radius: 2px;
 }
-#typo3-menu .typo3-module-menu-group-icon > span,
-#typo3-menu .typo3-module-menu-item-icon > span {
+[id="typo3-menu"] .typo3-module-menu-group-icon > span,
+[id="typo3-menu"] .typo3-module-menu-item-icon > span {
   display: table;
   height: 100%;
   width: 100%;
 }
-#typo3-menu .typo3-module-menu-group-icon > span > span,
-#typo3-menu .typo3-module-menu-item-icon > span > span {
+[id="typo3-menu"] .typo3-module-menu-group-icon > span > span,
+[id="typo3-menu"] .typo3-module-menu-item-icon > span > span {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
 }
-#typo3-menu .typo3-module-menu-group-icon img,
-#typo3-menu .typo3-module-menu-item-icon img {
-  max-height: 32px;
-  max-width: 32px;
+[id="typo3-menu"] .typo3-module-menu-group-icon img,
+[id="typo3-menu"] .typo3-module-menu-item-icon img {
+  max-height: 28px;
+  max-width: 28px;
 }
-#typo3-menu .typo3-module-menu-group-icon .fa {
-  font-size: 1.6em;
+[id="typo3-menu"] .typo3-module-menu-group-icon .fa,
+[id="typo3-menu"] .typo3-module-menu-item-icon .fa {
+  font-size: 21px;
   vertical-align: middle;
 }
-#typo3-menu .typo3-module-menu-group-title,
-#typo3-menu .typo3-module-menu-item-title {
-  padding-top: 8px;
+[id="typo3-menu"] .typo3-module-menu-group-title,
+[id="typo3-menu"] .typo3-module-menu-item-title {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding-top: 6px;
   display: block;
   overflow: hidden;
   *zoom: 1;
 }
-#typo3-menu .typo3-module-menu-group-title {
+[id="typo3-menu"] .typo3-module-menu-group-title {
   padding-right: 20px;
 }
-#typo3-menu .typo3-module-menu-group-title .caret {
+[id="typo3-menu"] .typo3-module-menu-group-title .caret {
   -webkit-transition: all 0.25s ease-in-out;
   -o-transition: all 0.25s ease-in-out;
   transition: all 0.25s ease-in-out;
+  -webkit-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  transform: rotate(90deg);
   position: absolute;
   top: 17px;
-  right: 20px;
+  right: 18px;
 }
-#typo3-menu .expanded .typo3-module-menu-group-header {
-  color: #ffffff;
+[id="typo3-menu"] .expanded .typo3-module-menu-group-title .caret {
+  -webkit-transform: rotate(0deg);
+  -ms-transform: rotate(0deg);
+  -o-transform: rotate(0deg);
+  transform: rotate(0deg);
 }
-#typo3-menu .expanded .typo3-module-menu-group-title .caret {
-  -webkit-transform: rotate(-180deg);
-  -ms-transform: rotate(-180deg);
-  -o-transform: rotate(-180deg);
-  transform: rotate(-180deg);
+.typo3-module-menu-snapped .typo3-module-menu-group-container {
+  padding-right: 0;
 }
-#typo3-menu.nav-snapped .typo3-module-menu-group-title,
-#typo3-menu.nav-snapped .typo3-module-menu-item-title {
+.typo3-module-menu-snapped .typo3-module-menu-group-title,
+.typo3-module-menu-snapped .typo3-module-menu-item-title {
   display: none;
 }
 /**
@@ -11373,7 +11374,7 @@ Module menu
 Topbar
 - - - - - - - - - - - - - - - - - - - - - */
 #typo3-topbar {
-  background-color: #222222;
+  background-color: #111111;
   z-index: 200;
 }
 #typo3-topbar div {
@@ -11407,7 +11408,7 @@ Topbar
 }
 #typo3-topbar #typo3-top-container #typo3-toolbar > li.dropdown {
   color: #999999;
-  background-color: #353535;
+  background-color: #242424;
 }
 #typo3-topbar #typo3-top-container #typo3-toolbar > li.dropdown > a {
   text-align: center;