Changeset 20749

Timestamp:

05/09/2012 03:56:40 AM (13 years ago)

Author:

azaozz

Message:

Auto-fold the admin menu with CSS, fixes #20642

Location:

trunk/wp-admin

Files:

• css/colors-classic.dev.css (modified) (2 diffs)
• css/colors-fresh.dev.css (modified) (2 diffs)
• css/wp-admin-rtl.dev.css (modified) (2 diffs)
• css/wp-admin.dev.css (modified) (2 diffs)
• js/common.dev.js (modified) (2 diffs)

trunk/wp-admin/css/colors-classic.dev.css

@@ -1442 +1442 @@
 .folded #collapse-button div {
     background-position: 0 -108px;
+}
+
+/* Auto-folding of the admin menu */
+@media only screen and (max-width: 900px) {
+    #adminmenu li.menu-top {
+        border-top-color: #ffffff;
+        border-bottom-color: #cae6ff;
+    }
+
+    #adminmenu li.wp-has-current-submenu,
+    #adminmenu li.current.menu-top {
+        background-color: #5589AA; /* Fallback */
+        background-image: -ms-linear-gradient(bottom, #5589AA, #619bbb); /* IE10 */
+        background-image: -moz-linear-gradient(bottom, #5589AA, #619bbb); /* Firefox */
+        background-image: -o-linear-gradient(bottom, #5589AA, #619bbb); /* Opera */
+        background-image: -webkit-gradient(linear, left bottom, left top, from(#5589AA), to(#619bbb)); /* old Webkit */
+        background-image: -webkit-linear-gradient(bottom, #5589AA, #619bbb); /* new Webkit */
+        background-image: linear-gradient(bottom, #5589AA, #619bbb); /* proposed W3C Markup */
+    }
+
+    #adminmenu li.menu-top li:hover a {
+        background-image: none;
+    }
+
+    #adminmenu li.wp-has-current-submenu,
+    #adminmenu li.current.menu-top {
+        border-top-color: #5A8FAD;
+        border-bottom-color: #5589AA;
+    }
+
+    #adminmenu .wp-has-current-submenu .wp-submenu-wrap {
+        -moz-box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 );
+        -webkit-box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 );
+        box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 );
+    }
+
+    #collapse-button div {
+        background-position: 0 -108px;
+    }
 }
 
@@ -2438 +2477 @@
 }
 
+/* Auto-folding of the admin menu for RTL */
+@media only screen and (max-width: 900px) {
+    .rtl #adminmenu .wp-has-current-submenu .wp-submenu-wrap{
+        -moz-box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 );
+        -webkit-box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 );
+        box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 );
+    }
+
+    .rtl #collapse-button div {
+        background-position: 0 -72px;
+    }
+}
+
 /* edit image */
 .rtl .meta-box-sortables .postbox:hover .handlediv {

trunk/wp-admin/css/colors-fresh.dev.css

@@ -1108 +1108 @@
     background-image: linear-gradient(bottom, #dfdfdf, #fff); /* proposed W3C Markup */
 }
+
 #collapse-menu:hover #collapse-button {
     border-color: #aaa;
 }
+
 #collapse-button div {
     background: transparent url(../images/arrows.png) no-repeat 0 -72px;
 }
+
 .folded #collapse-button div {
     background-position: 0 -108px;
+}
+
+/* Auto-folding of the admin menu */
+@media only screen and (max-width: 900px) {
+    #adminmenu li.menu-top {
+        border-top-color: #f9f9f9;
+        border-bottom-color: #dfdfdf;
+    }
+
+    #adminmenu li.wp-has-current-submenu,
+    #adminmenu li.current.menu-top {
+        background-color: #777; /* Fallback */
+        background-image: -ms-linear-gradient(bottom, #6d6d6d, #808080); /* IE10 */
+        background-image: -moz-linear-gradient(bottom, #6d6d6d, #808080); /* Firefox */
+        background-image: -o-linear-gradient(bottom, #6d6d6d, #808080); /* Opera */
+        background-image: -webkit-gradient(linear, left bottom, left top, from(#6d6d6d), to(#808080)); /* old Webkit */
+        background-image: -webkit-linear-gradient(bottom, #6d6d6d, #808080); /* new Webkit */
+        background-image: linear-gradient(bottom, #6d6d6d, #808080); /* proposed W3C Markup */
+    }
+
+    #adminmenu li.menu-top li:hover a {
+        background-image: none;
+    }
+
+    #adminmenu li.wp-has-current-submenu,
+    #adminmenu li.current.menu-top {
+        border-top-color: #808080;
+        border-bottom-color: #6d6d6d;
+    }
+
+    #adminmenu .wp-has-current-submenu .wp-submenu-wrap {
+        -moz-box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 );
+        -webkit-box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 );
+        box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.4 );
+    }
+
+    #collapse-button div {
+        background-position: 0 -108px;
+    }
 }
 
@@ -2027 +2069 @@
 }
 
+/* Auto-folding of the admin menu for RTL */
+@media only screen and (max-width: 900px) {
+    .rtl #adminmenu .wp-has-current-submenu .wp-submenu-wrap{
+        -moz-box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 );
+        -webkit-box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 );
+        box-shadow: -2px 2px 5px rgba( 0, 0, 0, 0.4 );
+    }
+
+    .rtl #collapse-button div {
+        background-position: 0 -72px;
+    }
+}
+
 /* Edit Image */
 .rtl .meta-box-sortables .postbox:hover .handlediv {

trunk/wp-admin/css/wp-admin-rtl.dev.css

@@ -353 +353 @@
 }
 
-#adminmenu li .wp-submenu,
-.folded #adminmenu .wp-has-current-submenu .wp-submenu {
+#adminmenu li .wp-submenu {
     left: auto;
     right: 146px;
@@ -499 +498 @@
 }
 
+/* Auto-folding of the admin menu */
+@media only screen and (max-width: 900px) {
+    #adminmenu li .wp-submenu,
+    #adminmenu .wp-has-current-submenu .wp-submenu {
+        left: auto;
+        right: 26px;
+    }
+
+    #adminmenu li.focused.wp-has-current-submenu .wp-submenu,
+    #adminmenu .wp-has-current-submenu .wp-submenu.sub-open {
+        padding: 0 0 8px 8px;
+    }
+
+    .folded #adminmenu .wp-not-current-submenu li a {
+        padding-left: 0;
+        padding-right: 12px;
+    }
+
+    #adminmenu li li,
+    #adminmenu li li a {
+        padding-left: inherit;
+        padding-right: 0
+    }
+
+    .wp-menu-arrow {
+        -moz-transform:    translate( -27px );
+        -webkit-transform: translate( -27px );
+        -o-transform:      translate( -27px );
+        -ms-transform:     translate( -27px );
+        transform:         translate( -27px );
+    }
+
+    #adminmenu .wp-submenu ul {
+        border-width: 0 1px 0 0;
+    }
+
+    #adminmenu .wp-submenu a {
+        padding-left: 0;
+        padding-right: 10px;
+    }
+
+    #adminmenu a.wp-has-submenu {
+        margin-left: 0;
+        margin-right: 40px;
+    }
+
+    body #wpcontent {
+        margin-left: 0;
+        margin-right: 52px;
+    }
+
+    body .wp-admin #footer {
+        margin-left: 15px;
+        margin-right: 52px;
+    }
+}
 
 /* List table styles */

trunk/wp-admin/css/wp-admin.dev.css

@@ -1726 +1726 @@
 }
 
+/* Auto-folding of the admin menu */
+@media only screen and (max-width: 900px) {
+    #wpcontent,
+    #footer {
+        margin-left: 52px;
+    }
+
+    #adminmenuback,
+    #adminmenuwrap,
+    #adminmenu,
+    #adminmenu li.menu-top {
+        width: 32px;
+    }
+
+    #adminmenu .wp-has-current-submenu .wp-submenu {
+        display: none;
+        position: absolute;
+        width: 145px;
+        z-index: 999;
+        overflow: hidden;
+    }
+
+    #adminmenu .wp-has-current-submenu .wp-submenu.sub-open {
+        display: block;
+    }
+
+    #adminmenu li .wp-submenu,
+    #adminmenu .wp-has-current-submenu .wp-submenu {
+        top: -5px;
+        left: 26px;
+    }
+
+    #adminmenu li.focused.wp-has-current-submenu .wp-submenu,
+    #adminmenu .wp-has-current-submenu .wp-submenu.sub-open {
+        padding: 0 8px 8px 0;
+    }
+
+    #adminmenu div.wp-submenu-head {
+        display: block;
+    }
+
+    #adminmenu a.menu-top,
+    #adminmenu div.wp-menu-toggle {
+        display: none;
+    }
+
+    #adminmenu div.wp-menu-image {
+        width: 30px;
+    }
+
+    #adminmenu .wp-not-current-submenu li a {
+        padding-left: 12px;
+    }
+
+    #adminmenu li li {
+        margin-left: 0;
+    }
+
+    #adminmenu li li a {
+        padding-left: 0;
+    }
+
+    .wp-menu-arrow {
+        -moz-transform:    translate( 33px );
+        -webkit-transform: translate( 33px );
+        -o-transform:      translate( 33px );
+        -ms-transform:     translate( 33px );
+        transform:         translate( 33px );
+    }
+
+    #adminmenu li.menu-top:hover .wp-menu-arrow {
+        display: none;
+    }
+
+    #adminmenu li.current:hover .wp-menu-arrow,
+    #adminmenu li.menu-top.wp-menu-open:hover .wp-menu-arrow {
+        display: block;
+        z-index: 125;
+    }
+
+    #adminmenu li.menu-top {
+        border-width: 1px 0;
+        border-style: solid none;
+    }
+
+    #adminmenu .wp-submenu .wp-submenu-wrap {
+        margin-top: 3px;
+    }
+
+    #adminmenu .wp-has-current-submenu {
+        margin-bottom: 1px;
+    }
+
+    #adminmenu .wp-has-current-submenu.menu-top-last {
+        margin-bottom: 0;
+    }
+
+    #adminmenu .wp-has-current-submenu .wp-submenu-wrap {
+        margin-top: 4px;
+    }
+
+    #adminmenu .wp-submenu ul {
+        border-width: 0 0 0 1px;
+        border-style: solid;
+    }
+
+    #adminmenu .wp-submenu a {
+        padding-left: 10px;
+    }
+
+    #adminmenu a.wp-has-submenu {
+        margin-left: 40px;
+    }
+
+    #collapse-menu {
+        display: none;
+    }
+}
 
 /* List table styles */
@@ -2084 +2202 @@
   9.0 - Dashboard
 ------------------------------------------------------------------------------*/
+
+#dashboard-widgets-wrap {
+    margin: 0 -8px;
+}
 
 #wpbody-content .metabox-holder {

trunk/wp-admin/js/common.dev.js

@@ -161 +161 @@
 $(document).ready( function() {
     var lastClicked = false, checks, first, last, checked, menu = $('#adminmenu'),
-        pageInput = $('input.current-page'), currentPage = pageInput.val(), folded, refresh;
+        pageInput = $('input.current-page'), currentPage = pageInput.val(), refresh;
 
     // admin menu
@@ -355 +355 @@
     }
 
-    // auto-fold the menu when screen is under 900px
-    $(window).bind('resize.autofold', function(){
-        if ( getUserSetting('mfold') == 'f' )
-            return;
-
-        var width = $(window).width();
-
-        // fold admin menu
-        if ( width <= 900 ) {
-            if ( !folded ) {
-                $(document.body).addClass('folded');
-                folded = true;
-            }
-        } else {
-            if ( folded ) {
-                $(document.body).removeClass('folded');
-                folded = false;
-            }
-        }
-
-    }).triggerHandler('resize');
-
 });