mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
ENHANCEMENT: Collapsed main menu view (SSO-7)
This commit is contained in:
Julian Seidenberg
parent
d378a86c49
commit
9fb1b32e01
@ -165,9 +165,10 @@ li.class-ErrorPage > a .jstree-pageicon { background-position: 0 -112px; }
|
||||
.cms-menu.collapsed .cms-header span { display: none; }
|
||||
.cms-menu.collapsed .cms-menu-list { overflow-x: hidden; overflow-y: auto; }
|
||||
.cms-menu.collapsed .cms-menu-list li span.text { display: none; }
|
||||
.cms-menu.collapsed .cms-menu-list li ul { display: none !important; }
|
||||
.cms-menu.collapsed .cms-menu-list li ul { display: none; }
|
||||
.cms-menu.collapsed.cms-panel .cms-panel-content { display: block; }
|
||||
|
||||
.cms-menu-list li { /* Style applied to the menu flyout only when the collapsed setting */ }
|
||||
.cms-menu-list li a { display: block; height: 24px; line-height: 24px; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-shadow: #bfcad2 1px 1px 0; color: #1f1f1f; padding: 7px 5px 7px 8px; background-color: #b0bec7; cursor: pointer; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b0bec7), color-stop(100%, #8ca1ae)); background-image: -webkit-linear-gradient(#b0bec7, #8ca1ae); background-image: -moz-linear-gradient(#b0bec7, #8ca1ae); background-image: -o-linear-gradient(#b0bec7, #8ca1ae); background-image: -ms-linear-gradient(#b0bec7, #8ca1ae); background-image: linear-gradient(#b0bec7, #8ca1ae); border-top: 1px solid #ced7dc; border-bottom: 1px solid #748d9d; }
|
||||
.cms-menu-list li a:hover { text-decoration: none; background-color: #b6c3cb; border-bottom: 1px solid #8399a7; color: #2c2c2c; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bfcad2), color-stop(100%, #b0bec7)); background-image: -webkit-linear-gradient(#bfcad2, #b0bec7); background-image: -moz-linear-gradient(#bfcad2, #b0bec7); background-image: -o-linear-gradient(#bfcad2, #b0bec7); background-image: -ms-linear-gradient(#bfcad2, #b0bec7); background-image: linear-gradient(#bfcad2, #b0bec7); }
|
||||
.cms-menu-list li a:focus, .cms-menu-list li a:active { border-top: 1px solid #a1b2bc; text-decoration: none; background-color: #a1b2bc; color: #393939; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #92a5b2), color-stop(100%, #a1b2bc)); background-image: -webkit-linear-gradient(#92a5b2, #a1b2bc); background-image: -moz-linear-gradient(#92a5b2, #a1b2bc); background-image: -o-linear-gradient(#92a5b2, #a1b2bc); background-image: -ms-linear-gradient(#92a5b2, #a1b2bc); background-image: linear-gradient(#92a5b2, #a1b2bc); }
|
||||
@ -175,13 +176,18 @@ li.class-ErrorPage > a .jstree-pageicon { background-position: 0 -112px; }
|
||||
.cms-menu-list li a .text { display: block; }
|
||||
.cms-menu-list li ul { display: none; }
|
||||
.cms-menu-list li.current a { color: white; text-shadow: #1e5270 0 -1px 0; border-top: 1px solid #55a4d2; border-bottom: 1px solid #1e5270; background-color: #338dc1; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #338dc1), color-stop(100%, #287099)); background-image: -webkit-linear-gradient(#338dc1, #287099); background-image: -moz-linear-gradient(#338dc1, #287099); background-image: -o-linear-gradient(#338dc1, #287099); background-image: -ms-linear-gradient(#338dc1, #287099); background-image: linear-gradient(#338dc1, #287099); }
|
||||
.cms-menu-list li.current ul { border-top: 1px solid #1e5270; display: block; }
|
||||
.cms-menu-list li.current ul { border-top: none; display: block; }
|
||||
.cms-menu-list li.current li { background-color: #287099; }
|
||||
.cms-menu-list li.current li a { font-size: 11px; padding: 0 10px 0 40px; height: 32px; line-height: 32px; color: #e2f0f7; background: none; border-top: 1px solid #338dc1; border-bottom: 1px solid #1e5270; }
|
||||
.cms-menu-list li.current li a.current, .cms-menu-list li.current li a:hover { background: #2e7ead; border-top: 1px solid #2e7ead; color: white; }
|
||||
.cms-menu-list li.current li a:focus { background: #236184; border-top: 1px solid #1e5270; color: white; }
|
||||
.cms-menu-list li.current li.current a { font-weight: bold; color: white; }
|
||||
.cms-menu-list li.current li.first a { border-top: none; }
|
||||
.cms-menu-list li ul.collapsed-flyout { display: block; }
|
||||
.cms-menu-list li ul.collapsed-flyout li a { font-size: 11px; padding: 0 10px 0 40px; height: 32px; line-height: 32px; }
|
||||
.cms-menu-list li ul.collapsed-flyout li a.current, .cms-menu-list li ul.collapsed-flyout li a:hover { font-weight: bold; }
|
||||
.cms-menu-list li ul.collapsed-flyout li.current a { font-weight: bold; }
|
||||
.cms-menu-list li ul.collapsed-flyout li.first a { border-top: 1px solid #92a5b2; }
|
||||
.cms-menu-list.collapsed li .text { display: none; }
|
||||
.cms-menu-list.collapsed li > li { display: none; }
|
||||
|
||||
@ -447,6 +453,9 @@ form.member-profile-form .formattingHelpText li { font-size: 11px; color: #333;
|
||||
.cms-panel .toggle-expand { width: 40px; }
|
||||
.cms-panel.collapsed .cms-panel-content { display: none; }
|
||||
.cms-panel.collapsed .cms-panel-header { -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); position: relative; top: 80px; border: none; padding: 0; }
|
||||
.cms-panel .child-triangle { width: 0; height: 0; border-right: 3px dashed #1f1f1f; border-top: 3px solid transparent; border-left: 3px solid transparent; border-bottom: 3px dashed #1f1f1f; position: absolute; right: 1px; margin-top: -8px; display: none; /* To be shown by javascript, see LeftAndMain.Panel.js */ }
|
||||
.cms-panel .collapsed-flyout { display: block !important; left: 41px; margin-top: -40px; position: fixed; width: 191px; }
|
||||
.cms-panel .collapsed-flyout li a span { display: block !important; }
|
||||
|
||||
.cms-content .cms-panel.collapsed { cursor: pointer; }
|
||||
|
||||
|
||||
@ -57,6 +57,34 @@
|
||||
|
||||
togglePanel: function(bool) {
|
||||
// if((!bool && this.hasClass('collapsed')) || (bool && !this.hasClass('collapsed'))) return;
|
||||
|
||||
//apply or unapply the flyout formatting
|
||||
$('.cms-panel-content ul li.link, .cms-panel-content ul li.opened').each(function(){
|
||||
if (bool) { //expand
|
||||
$(this).children('ul').removeClass('collapsed-flyout').addClass('collapsed');
|
||||
} else { //collapse
|
||||
|
||||
$(this).children('ul').addClass('collapsed-flyout').removeClass('collapsed');
|
||||
}
|
||||
});
|
||||
if (bool) { //expand
|
||||
//show the flyout
|
||||
$('.collapsed').find('li').show();
|
||||
|
||||
//hide all the triangle
|
||||
$('.cms-menu-list').find('.child-triangle').hide();
|
||||
} else { //collapse
|
||||
//hide the flyout only if it is not the current section
|
||||
$('.collapsed-flyout').find('li').each(function() {
|
||||
//if (!$(this).hasClass('current'))
|
||||
$(this).hide();
|
||||
});
|
||||
|
||||
//show all the triangles
|
||||
var par = $('.cms-menu-list ul.collapsed-flyout').parent();
|
||||
if (par.children('.child-triangle').length == 0) par.append('<span class="child-triangle"></span>').fadeIn();
|
||||
par.children('.child-triangle').fadeIn();
|
||||
}
|
||||
|
||||
this.toggleClass('collapsed', !bool);
|
||||
var newWidth = bool ? this.getWidthExpanded() : this.getWidthCollapsed();
|
||||
@ -84,6 +112,26 @@
|
||||
this.togglePanel(false);
|
||||
}
|
||||
});
|
||||
|
||||
/** Toggle the flyout panel to appear/disappear when mouse over */
|
||||
$('.cms-menu-list li').entwine({
|
||||
toggleFlyout: function(bool) {
|
||||
fly = $(this);
|
||||
if (fly.children('ul').first().hasClass('collapsed-flyout')) {
|
||||
if (bool) { //expand
|
||||
fly.children('ul').find('li').fadeIn('fast');
|
||||
} else { //collapse
|
||||
fly.children('ul').find('li').hide();
|
||||
}
|
||||
}
|
||||
},
|
||||
onmouseenter: function(){
|
||||
$(this).toggleFlyout(true);
|
||||
},
|
||||
onmouseleave: function(){
|
||||
$(this).toggleFlyout(false);
|
||||
}
|
||||
});
|
||||
|
||||
$('.cms-panel *').entwine({
|
||||
getPanel: function() {
|
||||
|
||||
@ -47,10 +47,10 @@
|
||||
display: none;
|
||||
}
|
||||
li ul {
|
||||
display: none !important;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.cms-panel .cms-panel-content {
|
||||
display: block; // override panel defaults
|
||||
}
|
||||
@ -122,7 +122,7 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.current {
|
||||
&.current { //need to apply current stlye to flyout also (at least line height)
|
||||
a {
|
||||
color: $color-text-light;
|
||||
text-shadow: darken($color-menu-button, 20%) 0 -1px 0;
|
||||
@ -136,7 +136,7 @@
|
||||
}
|
||||
|
||||
ul {
|
||||
border-top: 1px solid darken($color-menu-button, 20%);
|
||||
border-top: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -178,6 +178,33 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Style applied to the menu flyout only when the collapsed setting */
|
||||
ul.collapsed-flyout {
|
||||
display: block;
|
||||
|
||||
li {
|
||||
a {
|
||||
font-size: $font-base-size - 1;
|
||||
padding: 0 10px 0 40px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
|
||||
&.current,
|
||||
&:hover {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
&.current a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.first a {
|
||||
border-top: 1px solid darken($color-base, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.collapsed {
|
||||
|
||||
@ -791,7 +791,32 @@ form.member-profile-form {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.child-triangle {
|
||||
width:0;
|
||||
height:0;
|
||||
border-right:3px dashed $color-text-dark;
|
||||
border-top:3px solid transparent;
|
||||
border-left:3px solid transparent;
|
||||
border-bottom:3px dashed $color-text-dark;
|
||||
position: absolute;
|
||||
right: 1px;
|
||||
margin-top: -8px;
|
||||
display: none; /* To be shown by javascript, see LeftAndMain.Panel.js */
|
||||
}
|
||||
|
||||
.collapsed-flyout {
|
||||
display: block !important;
|
||||
left: 41px;
|
||||
margin-top: -40px;
|
||||
position: fixed;
|
||||
width: 191px;
|
||||
|
||||
li a span {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.cms-content .cms-panel.collapsed {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user