github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

Seperate treeview plugin and fix control sidebar for the fixed layout

pull/1498/head
Abdullah Almsaeed 2017-02-25 14:52:04 -05:00
parent a7d49bd656
commit 3c672fe9aa
8 changed files with 169 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
build/less/AdminLTE-without-plugins.less
View File

@ -42,6 +42,7 @@
@import "carousel.less"; @import "carousel.less";
@import "modal.less"; @import "modal.less";
@import "social-widgets.less"; @import "social-widgets.less";
@import "treeview.less";
//PAGES //PAGES
//------ //------
@import "mailbox.less"; @import "mailbox.less";

1
build/less/AdminLTE.less
View File

@ -42,6 +42,7 @@
@import "carousel.less"; @import "carousel.less";
@import "modal.less"; @import "modal.less";
@import "social-widgets.less"; @import "social-widgets.less";
@import "treeview.less";
//PAGES //PAGES
//------ //------
@import "mailbox.less"; @import "mailbox.less";

68
build/less/control-sidebar.less
View File

@ -1,15 +1,15 @@
/* /*
* Component: Control sidebar. By default, this is the right sidebar. * Component: Control sidebar. By default, this is the right sidebar.
*/ */
//The sidebar's background control class // The sidebar's background control class
//This is a hack to make the background visible while scrolling // This is a hack to make the background visible while scrolling
.control-sidebar-bg { .control-sidebar-bg {
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;
bottom: 0; bottom: 0;
} }
//Transitions // Transitions
.control-sidebar-bg, .control-sidebar-bg,
.control-sidebar { .control-sidebar {
top: 0; top: 0;
@ -18,20 +18,20 @@
.transition(right @transition-speed ease-in-out); .transition(right @transition-speed ease-in-out);
} }
//The sidebar // The sidebar
.control-sidebar { .control-sidebar {
position: absolute; position: absolute;
padding-top: @navbar-height; padding-top: @navbar-height;
z-index: 1010; z-index: 1010;
//Fix position after header collapse // Fix position after header collapse
@media (max-width: @screen-sm) { @media (max-width: @screen-sm) {
padding-top: @navbar-height + 50; padding-top: @navbar-height + 50;
} }
//Tab panes // Tab panes
> .tab-content { > .tab-content {
padding: 10px 15px; padding: 10px 15px;
} }
//Open state with slide over content effect // Open state with slide over content effect
&.control-sidebar-open { &.control-sidebar-open {
&, &,
+ .control-sidebar-bg { + .control-sidebar-bg {
@ -40,7 +40,7 @@
} }
} }
//Open without slide over content // Open without slide over content
.control-sidebar-open { .control-sidebar-open {
.control-sidebar-bg, .control-sidebar-bg,
.control-sidebar { .control-sidebar {
@ -55,7 +55,17 @@
} }
} }
//Control sidebar tabs // Fixed Layout
.fixed {
.control-sidebar {
position: fixed;
height: 100%;
overflow-y: auto;
padding-bottom: 50px;
}
}
// Control sidebar tabs
.nav-tabs.control-sidebar-tabs { .nav-tabs.control-sidebar-tabs {
> li { > li {
&:first-of-type > a { &:first-of-type > a {
@ -68,7 +78,7 @@
> a { > a {
.border-radius(0); .border-radius(0);
//Hover and active states // Hover and active states
&, &,
&:hover { &:hover {
border-top: none; border-top: none;
@ -80,7 +90,7 @@
font-size: 16px; font-size: 16px;
} }
} }
//Active state // Active state
&.active { &.active {
> a { > a {
&, &,
@ -94,7 +104,7 @@
} }
} }
} }
//Remove responsiveness on small screens // Remove responsiveness on small screens
@media (max-width: @screen-sm) { @media (max-width: @screen-sm) {
display: table; display: table;
> li { > li {
@ -103,7 +113,7 @@
} }
} }
//Headings in the sidebar content // Headings in the sidebar content
.control-sidebar-heading { .control-sidebar-heading {
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
@ -111,14 +121,14 @@
margin-bottom: 10px; margin-bottom: 10px;
} }
//Subheadings // Subheadings
.control-sidebar-subheading { .control-sidebar-subheading {
display: block; display: block;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
} }
//Control Sidebar Menu // Control Sidebar Menu
.control-sidebar-menu { .control-sidebar-menu {
list-style: none; list-style: none;
padding: 0; padding: 0;
@ -155,22 +165,22 @@
} }
} }
//Dark skin // Dark skin
.control-sidebar-dark { .control-sidebar-dark {
color: @sidebar-dark-color; color: @sidebar-dark-color;
// Background // Background
&, &,
+ .control-sidebar-bg { + .control-sidebar-bg {
background: @sidebar-dark-bg; background: @sidebar-dark-bg;
} }
// Sidebar tabs // Sidebar tabs
.nav-tabs.control-sidebar-tabs { .nav-tabs.control-sidebar-tabs {
border-bottom: darken(@sidebar-dark-bg, 3%); border-bottom: darken(@sidebar-dark-bg, 3%);
> li { > li {
> a { > a {
background: darken(@sidebar-dark-bg, 5%); background: darken(@sidebar-dark-bg, 5%);
color: @sidebar-dark-color; color: @sidebar-dark-color;
//Hover and active states // Hover and active states
&, &,
&:hover, &:hover,
&:focus { &:focus {
@ -186,7 +196,7 @@
color: #fff; color: #fff;
} }
} }
//Active state // Active state
&.active { &.active {
> a { > a {
&, &,
@ -200,12 +210,12 @@
} }
} }
} }
//Heading & subheading // Heading & subheading
.control-sidebar-heading, .control-sidebar-heading,
.control-sidebar-subheading { .control-sidebar-subheading {
color: #fff; color: #fff;
} }
//Sidebar list // Sidebar list
.control-sidebar-menu { .control-sidebar-menu {
> li { > li {
> a { > a {
@ -222,23 +232,23 @@
} }
} }
//Light skin // Light skin
.control-sidebar-light { .control-sidebar-light {
color: lighten(@sidebar-light-color, 10%); color: lighten(@sidebar-light-color, 10%);
// Background // Background
&, &,
+ .control-sidebar-bg { + .control-sidebar-bg {
background: @sidebar-light-bg; background: @sidebar-light-bg;
border-left: 1px solid @gray-lte; border-left: 1px solid @gray-lte;
} }
// Sidebar tabs // Sidebar tabs
.nav-tabs.control-sidebar-tabs { .nav-tabs.control-sidebar-tabs {
border-bottom: @gray-lte; border-bottom: @gray-lte;
> li { > li {
> a { > a {
background: darken(@sidebar-light-bg, 5%); background: darken(@sidebar-light-bg, 5%);
color: @sidebar-light-color; color: @sidebar-light-color;
//Hover and active states // Hover and active states
&, &,
&:hover, &:hover,
&:focus { &:focus {
@ -251,7 +261,7 @@
background: darken(@sidebar-light-bg, 3%); background: darken(@sidebar-light-bg, 3%);
} }
} }
//Active state // Active state
&.active { &.active {
> a { > a {
&, &,
@ -265,12 +275,12 @@
} }
} }
} }
//Heading & subheading // Heading & subheading
.control-sidebar-heading, .control-sidebar-heading,
.control-sidebar-subheading { .control-sidebar-subheading {
color: #111; color: #111;
} }
//Sidebar list // Sidebar list
.control-sidebar-menu { .control-sidebar-menu {
margin-left: -14px; margin-left: -14px;
> li { > li {

16
build/less/core.less
View File

@ -44,26 +44,26 @@ body {
.content-wrapper, .content-wrapper,
.right-side, .right-side,
.main-footer { .main-footer {
//Using disposable variable to join statements with a comma // Using disposable variable to join statements with a comma
@transition-rule: @transition-speed @transition-fn, @transition-rule: @transition-speed @transition-fn,
margin @transition-speed @transition-fn; margin @transition-speed @transition-fn;
.transition-transform(@transition-rule); .transition-transform(@transition-rule);
margin-left: @sidebar-width; margin-left: @sidebar-width;
z-index: 820; z-index: 820;
//Top nav layout // Top nav layout
.layout-top-nav & { .layout-top-nav & {
margin-left: 0; margin-left: 0;
} }
@media (max-width: @screen-xs-max) { @media (max-width: @screen-xs-max) {
margin-left: 0; margin-left: 0;
} }
//When opening the sidebar on large screens // When opening the sidebar on large screens
.sidebar-collapse & { .sidebar-collapse & {
@media (min-width: @screen-sm) { @media (min-width: @screen-sm) {
margin-left: 0; margin-left: 0;
} }
} }
//When opening the sidebar on small screens // When opening the sidebar on small screens
.sidebar-open & { .sidebar-open & {
@media (max-width: @screen-xs-max) { @media (max-width: @screen-xs-max) {
.translate(@sidebar-width, 0); .translate(@sidebar-width, 0);
@ -109,16 +109,20 @@ body {
max-width: 100%; max-width: 100%;
} }
} }
.wrapper {
overflow: hidden;
}
} }
body.hold-transition { .hold-transition {
.content-wrapper, .content-wrapper,
.right-side, .right-side,
.main-footer, .main-footer,
.main-sidebar, .main-sidebar,
.left-side, .left-side,
.main-header .navbar, .main-header .navbar,
.main-header .logo { .main-header .logo,
.menu-open .fa-angle-left {
/* Fix for IE */ /* Fix for IE */
.transition(none); .transition(none);
} }

35
build/less/mixins.less
View File

@ -74,22 +74,12 @@
} }
//Different radius each side //Different radius each side
.border-radius(@top-left; .border-radius(@top-left, @top-right, @bottom-left, @bottom-right)
@top-right
;
@bottom-left
;
@bottom-right
)
{ {
border-top-left-radius: @top-left border-top-left-radius: @top-left;
; border-top-right-radius: @top-right;
border-top-right-radius: @top-right border-bottom-right-radius: @bottom-right;
; border-bottom-left-radius: @bottom-left;
border-bottom-right-radius: @bottom-right
;
border-bottom-left-radius: @bottom-left
;
} }
//Gradient background //Gradient background
@ -140,9 +130,13 @@
border-left: 3px solid transparent; border-left: 3px solid transparent;
} }
//Hover and active states //Hover and active states
&:hover > a, &.active > a { &:hover > a,
&.active > a,
&.menu-open > a {
color: @sidebar-dark-hover-color; color: @sidebar-dark-hover-color;
background: @sidebar-dark-hover-bg; background: @sidebar-dark-hover-bg;
}
&.active > a {
border-left-color: @link-hover-border-color; border-left-color: @link-hover-border-color;
} }
//First Level Submenu //First Level Submenu
@ -159,7 +153,7 @@
} }
} }
//All submenus //All submenus
.treeview-menu { .sidebar-menu .treeview-menu {
> li { > li {
> a { > a {
color: @sidebar-dark-submenu-color; color: @sidebar-dark-submenu-color;
@ -211,7 +205,10 @@
} }
.content-wrapper, .content-wrapper,
.main-footer { .main-footer {
border-left: 1px solid @gray-lte; //border-left: 1px solid @gray-lte;
}
.main-sidebar {
border-right: 1px solid @gray-lte;
} }
//User Panel (resides in the sidebar) //User Panel (resides in the sidebar)
.user-panel { .user-panel {
@ -261,7 +258,7 @@
} }
} }
//All submenus //All submenus
.treeview-menu { .sidebar-menu .treeview-menu {
> li { > li {
> a { > a {
color: @sidebar-light-submenu-color; color: @sidebar-light-submenu-color;

90
build/less/sidebar-mini.less
View File

@ -42,49 +42,11 @@
} }
> .treeview-menu { > .treeview-menu {
//Add some padding to the treeview menu // Add some padding to the treeview menu
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
} }
//Show menu items on hover
&:hover {
> a {
//overflow: visible;
}
> a > span:not(.pull-right),//:not(.pull-right-container),
> .treeview-menu {
display: block !important;
position: absolute;
width: @sidebar-width - 50;
left: 50px;
}
//position the header & treeview menus
> a > span {
top: 0;
margin-left: -3px;
padding: 12px 5px 12px 20px;
background-color: inherit;
}
> a > .pull-right-container {
//display: block!important;
position: relative!important;
float: right;
width: auto!important;
left: 200px - 20px!important;
top: -22px!important;
z-index: 900;
> .label:not(:first-of-type) {
display: none;
}
}
> .treeview-menu {
top: 44px;
margin-left: 0;
}
}
} }
} }
@ -124,6 +86,56 @@
} }
} }
// Show menu items on hover
.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse {
.sidebar-menu > li:hover {
> a {
//overflow: visible;
}
> a > span:not(.pull-right), //:not(.pull-right-container),
> .treeview-menu {
display: block !important;
position: absolute;
width: @sidebar-width - 50;
left: 50px;
}
//position the header & treeview menus
> a > span {
top: 0;
margin-left: -3px;
padding: 12px 5px 12px 20px;
background-color: inherit;
}
> a > .pull-right-container {
//display: block!important;
position: relative !important;
float: right;
width: auto !important;
left: 200px - 20px !important;
top: -22px !important;
z-index: 900;
> .label:not(:first-of-type) {
display: none;
}
}
> .treeview-menu {
top: 44px;
margin-left: 0;
}
}
}
.sidebar-expanded-on-hover {
.main-footer,
.content-wrapper {
margin-left: 50px;
}
.main-sidebar {
box-shadow: @sidebar-expanded-shadow;
}
}
//A fix for text overflow while transitioning from sidebar mini to full sidebar //A fix for text overflow while transitioning from sidebar mini to full sidebar
.sidebar-menu, .sidebar-menu,
.main-sidebar .user-panel, .main-sidebar .user-panel,

39
build/less/sidebar.less
View File

@ -119,6 +119,7 @@
height: auto; height: auto;
padding: 0; padding: 0;
margin-right: 10px; margin-right: 10px;
.transition(transform .5s ease);
} }
li > a > .fa-angle-left { li > a > .fa-angle-left {
position: absolute; position: absolute;
@ -126,44 +127,14 @@
right: 10px; right: 10px;
margin-top: -8px; margin-top: -8px;
} }
li.active {
.menu-open {
> a > .fa-angle-left, > a > .fa-angle-left,
> a > .pull-right-container > .fa-angle-left { > a > .pull-right-container > .fa-angle-left {
.rotate(-90deg); .rotate(-90deg);
} }
> .treeview-menu {
display: block;
}
} }
.active > .treeview-menu {
// Tree view menu display: block;
.treeview-menu {
display: none;
list-style: none;
padding: 0;
margin: 0;
padding-left: 5px;
.treeview-menu {
padding-left: 20px;
}
> li {
margin: 0;
> a {
padding: 5px 5px 5px 15px;
display: block;
font-size: 14px;
> .fa,
> .glyphicon,
> .ion {
width: 20px;
}
> .pull-right-container > .fa-angle-left,
> .pull-right-container > .fa-angle-down,
> .fa-angle-left,
> .fa-angle-down {
width: auto;
}
}
}
} }
} }

89
build/less/variables.less
View File

@ -1,22 +1,22 @@
//AdminLTE 2 Variables.less // AdminLTE 2 Variables.less
//========================= // =========================
//PATHS // PATHS
//-------------------------------------------------------- // --------------------------------------------------------
@boxed-layout-bg-image-path: "../img/boxed-bg.jpg"; @boxed-layout-bg-image-path: "../img/boxed-bg.jpg";
//COLORS // COLORS
//-------------------------------------------------------- // --------------------------------------------------------
//Primary // Primary
@light-blue: #3c8dbc; @light-blue: #3c8dbc;
//Danger // Danger
@red: #dd4b39; @red: #dd4b39;
//Success // Success
@green: #00a65a; @green: #00a65a;
//Info // Info
@aqua: #00c0ef; @aqua: #00c0ef;
//Warning // Warning
@yellow: #f39c12; @yellow: #f39c12;
@blue: #0073b7; @blue: #0073b7;
@navy: #001F3F; @navy: #001F3F;
@ -30,27 +30,27 @@
@black: #111; @black: #111;
@gray-lte: #d2d6de; @gray-lte: #d2d6de;
//LAYOUT // LAYOUT
//-------------------------------------------------------- // --------------------------------------------------------
//Side bar and logo width // Side bar and logo width
@sidebar-width: 230px; @sidebar-width: 230px;
//Boxed layout maximum width // Boxed layout maximum width
@boxed-layout-max-width: 1024px; @boxed-layout-max-width: 1024px;
//When the logo should go to the top of the screen // When the logo should go to the top of the screen
@screen-header-collapse: @screen-xs-max; @screen-header-collapse: @screen-xs-max;
//Link colors (Aka: <a> tags) // Link colors (Aka: <a> tags)
@link-color: @light-blue; @link-color: @light-blue;
@link-hover-color: lighten(@link-color, 15%); @link-hover-color: lighten(@link-color, 15%);
//Body background (Affects main content background only) // Body background (Affects main content background only)
@body-bg: #ecf0f5; @body-bg: #ecf0f5;
//SIDEBAR SKINS // SIDEBAR SKINS
//-------------------------------------------------------- // --------------------------------------------------------
//Dark sidebar // Dark sidebar
@sidebar-dark-bg: #222d32; @sidebar-dark-bg: #222d32;
@sidebar-dark-hover-bg: darken(@sidebar-dark-bg, 2%); @sidebar-dark-hover-bg: darken(@sidebar-dark-bg, 2%);
@sidebar-dark-color: lighten(@sidebar-dark-bg, 60%); @sidebar-dark-color: lighten(@sidebar-dark-bg, 60%);
@ -59,7 +59,7 @@
@sidebar-dark-submenu-color: lighten(@sidebar-dark-submenu-bg, 40%); @sidebar-dark-submenu-color: lighten(@sidebar-dark-submenu-bg, 40%);
@sidebar-dark-submenu-hover-color: #fff; @sidebar-dark-submenu-hover-color: #fff;
//Light sidebar // Light sidebar
@sidebar-light-bg: #f9fafc; @sidebar-light-bg: #f9fafc;
@sidebar-light-hover-bg: lighten(#f0f0f1, 1.5%); @sidebar-light-hover-bg: lighten(#f0f0f1, 1.5%);
@sidebar-light-color: #444; @sidebar-light-color: #444;
@ -68,55 +68,58 @@
@sidebar-light-submenu-color: #777; @sidebar-light-submenu-color: #777;
@sidebar-light-submenu-hover-color: #000; @sidebar-light-submenu-hover-color: #000;
//CONTROL SIDEBAR // sidebar-expanded-on-hover
//-------------------------------------------------------- @sidebar-expanded-shadow: 3px 0 8px rgba(0,0,0,.125);
// CONTROL SIDEBAR
// --------------------------------------------------------
@control-sidebar-width: @sidebar-width; @control-sidebar-width: @sidebar-width;
//BOXES // BOXES
//-------------------------------------------------------- // --------------------------------------------------------
@box-border-color: #f4f4f4; @box-border-color: #f4f4f4;
@box-border-radius: 3px; @box-border-radius: 3px;
@box-footer-bg: #fff; @box-footer-bg: #fff;
@box-boxshadow: 0 1px 1px rgba(0, 0, 0, .1); @box-boxshadow: 0 1px 1px rgba(0, 0, 0, .1);
@box-padding: 10px; @box-padding: 10px;
//Box variants // Box variants
@box-default-border-top-color: #d2d6de; @box-default-border-top-color: #d2d6de;
//BUTTONS // BUTTONS
//-------------------------------------------------------- // --------------------------------------------------------
@btn-boxshadow: none; @btn-boxshadow: none;
//PROGRESS BARS // PROGRESS BARS
//-------------------------------------------------------- // --------------------------------------------------------
@progress-bar-border-radius: 1px; @progress-bar-border-radius: 1px;
@progress-bar-sm-border-radius: 1px; @progress-bar-sm-border-radius: 1px;
@progress-bar-xs-border-radius: 1px; @progress-bar-xs-border-radius: 1px;
//FORMS // FORMS
//-------------------------------------------------------- // --------------------------------------------------------
@input-radius: 0; @input-radius: 0;
//BUTTONS // BUTTONS
//-------------------------------------------------------- // --------------------------------------------------------
//Border radius for non flat buttons // Border radius for non flat buttons
@btn-border-radius: 3px; @btn-border-radius: 3px;
//DIRECT CHAT // DIRECT CHAT
//-------------------------------------------------------- // --------------------------------------------------------
@direct-chat-height: 250px; @direct-chat-height: 250px;
@direct-chat-default-msg-bg: @gray-lte; @direct-chat-default-msg-bg: @gray-lte;
@direct-chat-default-font-color: #444; @direct-chat-default-font-color: #444;
@direct-chat-default-msg-border-color: @gray-lte; @direct-chat-default-msg-border-color: @gray-lte;
//CHAT WIDGET // CHAT WIDGET
//-------------------------------------------------------- // --------------------------------------------------------
@attachment-border-radius: 3px; @attachment-border-radius: 3px;
//TRANSITIONS SETTINGS // TRANSITIONS SETTINGS
//-------------------------------------------------------- // --------------------------------------------------------
//Transition global options // Transition global options
@transition-speed: .3s; @transition-speed: .3s;
@transition-fn: ease-in-out; @transition-fn: ease-in-out;