diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 813daa932..be3167d10 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -2,11 +2,11 @@ "files": [ { "path": "./dist/css/adminlte.css", - "maxSize": "84.5 kB" + "maxSize": "89.5 kB" }, { "path": "./dist/css/adminlte.min.css", - "maxSize": "80.9 kB" + "maxSize": "84.9 kB" }, { "path": "./dist/css/alt/adminlte.components.css", @@ -18,11 +18,11 @@ }, { "path": "./dist/css/alt/adminlte.core.css", - "maxSize": "49.4 kB" + "maxSize": "54.4 kB" }, { "path": "./dist/css/alt/adminlte.core.min.css", - "maxSize": "46.3 kB" + "maxSize": "50.8 kB" }, { "path": "./dist/css/alt/adminlte.extra-components.css", @@ -50,7 +50,7 @@ }, { "path": "./dist/js/adminlte.js", - "maxSize": "15 kB" + "maxSize": "15.7 kB" }, { "path": "./dist/js/adminlte.min.js", diff --git a/build/js/AdminLTE.js b/build/js/AdminLTE.js index a6906ca98..c8b8e94a7 100644 --- a/build/js/AdminLTE.js +++ b/build/js/AdminLTE.js @@ -9,6 +9,7 @@ import IFrame from './IFrame' import Layout from './Layout' import PushMenu from './PushMenu' import SidebarSearch from './SidebarSearch' +import NavbarSearch from './NavbarSearch' import Toasts from './Toasts' import TodoList from './TodoList' import Treeview from './Treeview' @@ -25,6 +26,7 @@ export { Layout, PushMenu, SidebarSearch, + NavbarSearch, Toasts, TodoList, Treeview diff --git a/build/js/ControlSidebar.js b/build/js/ControlSidebar.js index 4cfc751c0..eaa62ce7f 100644 --- a/build/js/ControlSidebar.js +++ b/build/js/ControlSidebar.js @@ -152,8 +152,31 @@ class ControlSidebar { }) } + _isNavbarFixed() { + const $body = $('body') + return ( + $body.hasClass(CLASS_NAME_NAVBAR_FIXED) || + $body.hasClass(CLASS_NAME_NAVBAR_SM_FIXED) || + $body.hasClass(CLASS_NAME_NAVBAR_MD_FIXED) || + $body.hasClass(CLASS_NAME_NAVBAR_LG_FIXED) || + $body.hasClass(CLASS_NAME_NAVBAR_XL_FIXED) + ) + } + + _isFooterFixed() { + const $body = $('body') + return ( + $body.hasClass(CLASS_NAME_FOOTER_FIXED) || + $body.hasClass(CLASS_NAME_FOOTER_SM_FIXED) || + $body.hasClass(CLASS_NAME_FOOTER_MD_FIXED) || + $body.hasClass(CLASS_NAME_FOOTER_LG_FIXED) || + $body.hasClass(CLASS_NAME_FOOTER_XL_FIXED) + ) + } + _fixScrollHeight() { const $body = $('body') + const $controlSidebar = $(this._config.target) if (!$body.hasClass(CLASS_NAME_LAYOUT_FIXED)) { return @@ -170,23 +193,10 @@ class ControlSidebar { top: $(window).scrollTop() } - const navbarFixed = ( - $body.hasClass(CLASS_NAME_NAVBAR_FIXED) || - $body.hasClass(CLASS_NAME_NAVBAR_SM_FIXED) || - $body.hasClass(CLASS_NAME_NAVBAR_MD_FIXED) || - $body.hasClass(CLASS_NAME_NAVBAR_LG_FIXED) || - $body.hasClass(CLASS_NAME_NAVBAR_XL_FIXED) - ) && $(SELECTOR_HEADER).css('position') === 'fixed' + const navbarFixed = this._isNavbarFixed() && $(SELECTOR_HEADER).css('position') === 'fixed' - const footerFixed = ( - $body.hasClass(CLASS_NAME_FOOTER_FIXED) || - $body.hasClass(CLASS_NAME_FOOTER_SM_FIXED) || - $body.hasClass(CLASS_NAME_FOOTER_MD_FIXED) || - $body.hasClass(CLASS_NAME_FOOTER_LG_FIXED) || - $body.hasClass(CLASS_NAME_FOOTER_XL_FIXED) - ) && $(SELECTOR_FOOTER).css('position') === 'fixed' + const footerFixed = this._isFooterFixed() && $(SELECTOR_FOOTER).css('position') === 'fixed' - const $controlSidebar = $(this._config.target) const $controlsidebarContent = $(`${this._config.target}, ${this._config.target} ${SELECTOR_CONTROL_SIDEBAR_CONTENT}`) if (positions.top === 0 && positions.bottom === 0) { @@ -216,12 +226,22 @@ class ControlSidebar { } else { $controlSidebar.css('top', heights.header) } + + if (footerFixed && navbarFixed) { + $controlsidebarContent.css('height', '100%') + $controlSidebar.css('height', '') + } else if (footerFixed || navbarFixed) { + $controlsidebarContent.css('height', '100%') + $controlsidebarContent.css('height', '') + } } _fixHeight() { const $body = $('body') + const $controlSidebar = $(`${this._config.target} ${SELECTOR_CONTROL_SIDEBAR_CONTENT}`) if (!$body.hasClass(CLASS_NAME_LAYOUT_FIXED)) { + $controlSidebar.attr('style', '') return } @@ -233,19 +253,12 @@ class ControlSidebar { let sidebarHeight = heights.window - heights.header - if ( - $body.hasClass(CLASS_NAME_FOOTER_FIXED) || - $body.hasClass(CLASS_NAME_FOOTER_SM_FIXED) || - $body.hasClass(CLASS_NAME_FOOTER_MD_FIXED) || - $body.hasClass(CLASS_NAME_FOOTER_LG_FIXED) || - $body.hasClass(CLASS_NAME_FOOTER_XL_FIXED) - ) { + if (this._isFooterFixed()) { if ($(SELECTOR_FOOTER).css('position') === 'fixed') { sidebarHeight = heights.window - heights.header - heights.footer } } - const $controlSidebar = $(`${this._config.target} ${SELECTOR_CONTROL_SIDEBAR_CONTENT}`) $controlSidebar.css('height', sidebarHeight) if (typeof $.fn.overlayScrollbars !== 'undefined') { diff --git a/build/js/SiteSearch.js b/build/js/NavbarSearch.js similarity index 50% rename from build/js/SiteSearch.js rename to build/js/NavbarSearch.js index d0c4e4f95..5822d17fd 100644 --- a/build/js/SiteSearch.js +++ b/build/js/NavbarSearch.js @@ -1,6 +1,6 @@ /** * -------------------------------------------- - * AdminLTE SiteSearch.js + * AdminLTE NavbarSearch.js * License MIT * -------------------------------------------- */ @@ -12,19 +12,18 @@ import $ from 'jquery' * ==================================================== */ -const NAME = 'SiteSearch' -const DATA_KEY = 'lte.site-search' +const NAME = 'NavbarSearch' +const DATA_KEY = 'lte.navbar-search' const JQUERY_NO_CONFLICT = $.fn[NAME] -const SELECTOR_TOGGLE_BUTTON = '[data-widget="site-search"]' -const SELECTOR_SEARCH_BLOCK = '.site-search-block' -const SELECTOR_SEARCH_BACKDROP = '.site-search-backdrop' -const SELECTOR_SEARCH_INPUT = '.site-search-block .form-control' +const SELECTOR_TOGGLE_BUTTON = '[data-widget="navbar-search"]' +const SELECTOR_SEARCH_BLOCK = '.navbar-search-block' +const SELECTOR_SEARCH_INPUT = '.navbar-search-block .form-control' -const CLASS_NAME_OPEN = 'site-search-open' +const CLASS_NAME_OPEN = 'navbar-search-open' const Default = { - transitionSpeed: 300 + resetOnClose: true } /** @@ -32,25 +31,25 @@ const Default = { * ==================================================== */ -class SiteSearch { +class NavbarSearch { constructor(_element, _options) { - this.element = _element - this.options = $.extend({}, Default, _options) + this._element = _element + this._config = $.extend({}, Default, _options) } // Public open() { - $(SELECTOR_SEARCH_BLOCK).slideDown(this.options.transitionSpeed) - $(SELECTOR_SEARCH_BACKDROP).show(0) + $(SELECTOR_SEARCH_BLOCK).css('display', 'flex').hide().fadeIn().addClass(CLASS_NAME_OPEN) $(SELECTOR_SEARCH_INPUT).focus() - $(SELECTOR_SEARCH_BLOCK).addClass(CLASS_NAME_OPEN) } close() { - $(SELECTOR_SEARCH_BLOCK).slideUp(this.options.transitionSpeed) - $(SELECTOR_SEARCH_BACKDROP).hide(0) - $(SELECTOR_SEARCH_BLOCK).removeClass(CLASS_NAME_OPEN) + $(SELECTOR_SEARCH_BLOCK).fadeOut().removeClass(CLASS_NAME_OPEN) + + if (this._config.resetOnClose) { + $(SELECTOR_SEARCH_INPUT).val('') + } } toggle() { @@ -68,11 +67,11 @@ class SiteSearch { let data = $(this).data(DATA_KEY) if (!data) { - data = new SiteSearch(this, options) + data = new NavbarSearch(this, options) $(this).data(DATA_KEY, data) } - if (!/toggle|close/.test(options)) { + if (!/toggle|close|open/.test(options)) { throw new Error(`Undefined method ${options}`) } @@ -90,16 +89,11 @@ $(document).on('click', SELECTOR_TOGGLE_BUTTON, event => { let button = $(event.currentTarget) - if (button.data('widget') !== 'site-search') { + if (button.data('widget') !== 'navbar-search') { button = button.closest(SELECTOR_TOGGLE_BUTTON) } - SiteSearch._jQueryInterface.call(button, 'toggle') -}) - -$(document).on('click', SELECTOR_SEARCH_BACKDROP, event => { - const backdrop = $(event.currentTarget) - SiteSearch._jQueryInterface.call(backdrop, 'close') + NavbarSearch._jQueryInterface.call(button, 'toggle') }) /** @@ -107,11 +101,11 @@ $(document).on('click', SELECTOR_SEARCH_BACKDROP, event => { * ==================================================== */ -$.fn[NAME] = SiteSearch._jQueryInterface -$.fn[NAME].Constructor = SiteSearch +$.fn[NAME] = NavbarSearch._jQueryInterface +$.fn[NAME].Constructor = NavbarSearch $.fn[NAME].noConflict = function () { $.fn[NAME] = JQUERY_NO_CONFLICT - return SiteSearch._jQueryInterface + return NavbarSearch._jQueryInterface } -export default SiteSearch +export default NavbarSearch diff --git a/build/js/SidebarSearch.js b/build/js/SidebarSearch.js index 3e8fc5844..2949e239b 100644 --- a/build/js/SidebarSearch.js +++ b/build/js/SidebarSearch.js @@ -101,7 +101,7 @@ class SidebarSearch { this._addNotFound() } else { endResults.each((i, result) => { - $(SELECTOR_SEARCH_RESULTS_GROUP).append(this._renderItem(escape(result.name), escape(result.link), escape(result.path))) + $(SELECTOR_SEARCH_RESULTS_GROUP).append(this._renderItem(escape(result.name), escape(result.link), result.path)) }) } @@ -160,6 +160,7 @@ class SidebarSearch { _renderItem(name, link, path) { path = path.join(` ${this.options.arrowSign} `) + name = unescape(name) if (this.options.highlightName || this.options.highlightPath) { const searchValue = $(SELECTOR_SEARCH_INPUT).val().toLowerCase() @@ -169,7 +170,7 @@ class SidebarSearch { name = name.replace( regExp, str => { - return `${str}` + return `${str}` } ) } @@ -178,20 +179,26 @@ class SidebarSearch { path = path.replace( regExp, str => { - return `${str}` + return `${str}` } ) } } - return ` -
- ${name} -
-
- ${path} -
- ` + const groupItemElement = $('', { + href: link, + class: 'list-group-item' + }) + const searchTitleElement = $('
', { + class: 'search-title' + }).html(name) + const searchPathElement = $('
', { + class: 'search-path' + }).html(path) + + groupItemElement.append(searchTitleElement).append(searchPathElement) + + return groupItemElement } _addNotFound() { @@ -243,9 +250,7 @@ $(document).on('keyup', SELECTOR_SEARCH_INPUT, event => { return } - let timer = 0 - clearTimeout(timer) - timer = setTimeout(() => { + setTimeout(() => { SidebarSearch._jQueryInterface.call($(SELECTOR_DATA_WIDGET), 'search') }, 100) }) diff --git a/build/scss/_layout.scss b/build/scss/_layout.scss index 3381f335c..b1798f293 100644 --- a/build/scss/_layout.scss +++ b/build/scss/_layout.scss @@ -566,7 +566,6 @@ body:not(.layout-fixed) { .main-sidebar { bottom: 0; float: none; - height: 100vh; left: 0; position: fixed; top: 0; @@ -575,7 +574,6 @@ body:not(.layout-fixed) { .control-sidebar { bottom: 0; float: none; - height: 100vh; position: fixed; top: 0; diff --git a/build/scss/_main-header.scss b/build/scss/_main-header.scss index 262797eb1..ad13b2cef 100644 --- a/build/scss/_main-header.scss +++ b/build/scss/_main-header.scss @@ -94,7 +94,7 @@ .form-control-navbar, .btn-navbar { background-color: $main-header-dark-form-control-bg; - border: $main-header-dark-form-control-border; + border-color: $main-header-dark-form-control-border-color; } .form-control-navbar { @@ -110,7 +110,7 @@ &, + .input-group-append .btn-navbar { background-color: $main-header-dark-form-control-focused-bg; - border: $main-header-dark-form-control-focused-border !important; + border-color: $main-header-dark-form-control-focused-border-color !important; color: $main-header-dark-form-control-focused-color; } } @@ -121,7 +121,7 @@ .form-control-navbar, .btn-navbar { background-color: $main-header-light-form-control-bg; - border: $main-header-light-form-control-border; + border-color: $main-header-light-form-control-border-color; } .form-control-navbar { @@ -137,9 +137,45 @@ &, + .input-group-append .btn-navbar { background-color: $main-header-light-form-control-focused-bg; - border: $main-header-light-form-control-focused-border !important; + border-color: $main-header-light-form-control-focused-border-color !important; color: $main-header-light-form-control-focused-color; } } } } + +// Navbar Search +.navbar-search-block { + position: absolute; + padding: 0 $nav-link-padding-x; + left: 0; + top: 0; + right: 0; + bottom: 0; + z-index: 10; + display: none; + justify-content: center; + flex-direction: column; + + @each $color, $value in $theme-colors { + @if $color != dark and $color != light { + .navbar-#{$color} & { + background-color: $value; + } + } + } + + @each $color, $value in $colors { + .navbar-#{$color} & { + background-color: $value; + } + } + + &.navbar-search-open { + display: flex; + } + + .input-group { + width: 100%; + } +} diff --git a/build/scss/_main-sidebar.scss b/build/scss/_main-sidebar.scss index 643491d7b..e8b65283a 100644 --- a/build/scss/_main-sidebar.scss +++ b/build/scss/_main-sidebar.scss @@ -983,6 +983,7 @@ // Sidebar inline input-group fix .sidebar .form-inline .input-group { width: 100%; + flex-wrap: nowrap; } .sidebar nav .form-inline { margin-bottom: .2rem; diff --git a/build/scss/_navs.scss b/build/scss/_navs.scss index a90c20d08..39e0083e9 100644 --- a/build/scss/_navs.scss +++ b/build/scss/_navs.scss @@ -90,16 +90,12 @@ @each $color, $value in $theme-colors { @if $color != dark and $color != light { - .navbar-#{$color} { - background-color: $value; - } + @include navbar-variant($color, $value); } } @each $color, $value in $colors { - .navbar-#{$color} { - background-color: $value; - } + @include navbar-variant($color, $value); } .dark-mode { diff --git a/build/scss/_variables.scss b/build/scss/_variables.scss index 2482b0cf1..a0c441874 100644 --- a/build/scss/_variables.scss +++ b/build/scss/_variables.scss @@ -82,18 +82,18 @@ $main-header-height-sm: calc(#{$main-header-height-sm-inner} + #{$main-header-bo // Main header skins -$main-header-dark-form-control-bg: rgba(255, 255, 255, .2) !default; -$main-header-dark-form-control-focused-bg: rgba(255, 255, 255, .6) !default; -$main-header-dark-form-control-focused-color: $gray-800 !default; -$main-header-dark-form-control-border: 0 !default; -$main-header-dark-form-control-focused-border: 0 !default; -$main-header-dark-placeholder-color: rgba(255, 255, 255, .6) !default; +$main-header-dark-form-control-bg: $gray-800 !default; +$main-header-dark-form-control-focused-bg: $gray-700 !default; +$main-header-dark-form-control-focused-color: $gray-400 !default; +$main-header-dark-form-control-border-color: $gray-600 !default; +$main-header-dark-form-control-focused-border-color: $gray-600 !default; +$main-header-dark-placeholder-color: rgba($white, .6) !default; -$main-header-light-form-control-bg: darken($gray-100, 2%) !default; -$main-header-light-form-control-focused-bg: $gray-200 !default; -$main-header-light-form-control-focused-color: $gray-800 !default; -$main-header-light-form-control-border: 0 !default; -$main-header-light-form-control-focused-border: 0 !default; +$main-header-light-form-control-bg: darken($gray-200, 5%) !default; +$main-header-light-form-control-focused-bg: darken($gray-200, 7.5%) !default; +$main-header-light-form-control-focused-color: $gray-400 !default; +$main-header-light-form-control-border-color: $gray-400 !default; +$main-header-light-form-control-focused-border-color: darken($gray-400, 2.5%) !default; $main-header-light-placeholder-color: rgba(0, 0, 0, .6) !default; // MAIN FOOTER diff --git a/build/scss/mixins/_accent.scss b/build/scss/mixins/_accent.scss index 7efad373f..b72e533bf 100644 --- a/build/scss/mixins/_accent.scss +++ b/build/scss/mixins/_accent.scss @@ -11,7 +11,8 @@ $pagination-active-border-color: $color; .btn-link, - a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-link):not(.btn) { + a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-link):not(.btn), + .nav-tabs .nav-link { color: $link-color; @include hover () { diff --git a/build/scss/mixins/_navbar.scss b/build/scss/mixins/_navbar.scss index 77271cfc3..d1ab8befe 100644 --- a/build/scss/mixins/_navbar.scss +++ b/build/scss/mixins/_navbar.scss @@ -3,32 +3,60 @@ // // Navbar Variant -@mixin navbar-variant($color, $font-color: rgba(255, 255, 255, .8), $hover-color: #f6f6f6, $hover-bg: rgba(0, 0, 0, .1)) { - background-color: $color; +@mixin navbar-variant($name, $color) { + .navbar-#{$name} { + background-color: $color; + color: color-yiq($color); - .nav > li > a { - color: $font-color; - } + &.navbar-light { + .form-control-navbar { + &::placeholder { + color: rgba($gray-800, .8); + } + &, + + .input-group-append > .btn-navbar { + background-color: lighten($color, 4%); + border-color: lighten($color, 9%); + color: rgba($gray-800, .8); + } - .nav > li > a:hover, - .nav > li > a:active, - .nav > li > a:focus, - .nav .open > a, - .nav .open > a:hover, - .nav .open > a:focus, - .nav > .active > a { - background-color: $hover-bg; - color: $hover-color; - } + &:focus { + &::placeholder { + color: $gray-800; + } + &, + + .input-group-append .btn-navbar { + background-color: lighten($color, 5%); + border-color: lighten($color, 9%) !important; + color: $gray-800; + } + } + } + } + &.navbar-dark { + .form-control-navbar { + &::placeholder { + color: rgba($white, .8); + } + &, + + .input-group-append > .btn-navbar { + background-color: darken($color, 4%); + border-color: darken($color, 9%); + color: rgba($white, .8); + } - // Add color to the sidebar toggle button - .sidebar-toggle { - color: $font-color; - - &:hover, - &:focus { - background-color: $hover-bg; - color: $hover-color; + &:focus { + &::placeholder { + color: $white; + } + &, + + .input-group-append .btn-navbar { + background-color: darken($color, 5%); + border-color: darken($color, 9%) !important; + color: $white; + } + } + } } } } diff --git a/dist/js/demo.js b/dist/js/demo.js index ae4c79d05..609ad1707 100644 --- a/dist/js/demo.js +++ b/dist/js/demo.js @@ -10,6 +10,44 @@ (function ($) { 'use strict' + function capitalizeFirstLetter(string) { + return string.charAt(0).toUpperCase() + string.slice(1) + } + + function createSkinBlock(colors, callback, noneSelected) { + var $block = $('', { + type: 'checkbox', + value: 1, + checked: $('body').hasClass('dark-mode'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('body').addClass('dark-mode') + } else { + $('body').removeClass('dark-mode') + } + }) + var $dark_mode_container = $('
', { class: 'mb-4' }).append($dark_mode_checkbox).append('Dark Mode') + $container.append($dark_mode_container) + + $container.append('
Header Options
') + var $header_fixed_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('body').hasClass('layout-navbar-fixed'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('body').addClass('layout-navbar-fixed') + } else { + $('body').removeClass('layout-navbar-fixed') + } + }) + var $header_fixed_container = $('
', { class: 'mb-1' }).append($header_fixed_checkbox).append('Fixed') + $container.append($header_fixed_container) + + var $dropdown_legacy_offset_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('.main-header').hasClass('dropdown-legacy'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('.main-header').addClass('dropdown-legacy') + } else { + $('.main-header').removeClass('dropdown-legacy') + } + }) + var $dropdown_legacy_offset_container = $('
', { class: 'mb-1' }).append($dropdown_legacy_offset_checkbox).append('Dropdown Legacy Offset') + $container.append($dropdown_legacy_offset_container) + + var $no_border_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('.main-header').hasClass('border-bottom-0'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('.main-header').addClass('border-bottom-0') + } else { + $('.main-header').removeClass('border-bottom-0') + } + }) + var $no_border_container = $('
', { class: 'mb-4' }).append($no_border_checkbox).append('No border') + $container.append($no_border_container) + + $container.append('
Sidebar Options
') + + var $sidebar_collapsed_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('body').hasClass('sidebar-collapse'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('body').addClass('sidebar-collapse') + $(window).trigger('resize') + } else { + $('body').removeClass('sidebar-collapse') + $(window).trigger('resize') + } + }) + var $sidebar_collapsed_container = $('
', { class: 'mb-1' }).append($sidebar_collapsed_checkbox).append('Collapsed') + $container.append($sidebar_collapsed_container) + + $(document).on('collapsed.lte.pushmenu', '[data-widget="pushmenu"]', function () { + $sidebar_collapsed_checkbox.prop('checked', true) + }) + $(document).on('shown.lte.pushmenu', '[data-widget="pushmenu"]', function () { + $sidebar_collapsed_checkbox.prop('checked', false) + }) + + var $sidebar_fixed_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('body').hasClass('layout-fixed'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('body').addClass('layout-fixed') + $(window).trigger('resize') + } else { + $('body').removeClass('layout-fixed') + $(window).trigger('resize') + } + }) + var $sidebar_fixed_container = $('
', { class: 'mb-1' }).append($sidebar_fixed_checkbox).append('Fixed') + $container.append($sidebar_fixed_container) + + var $sidebar_mini_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('body').hasClass('sidebar-mini'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('body').addClass('sidebar-mini') + } else { + $('body').removeClass('sidebar-mini') + } + }) + var $sidebar_mini_container = $('
', { class: 'mb-1' }).append($sidebar_mini_checkbox).append('Sidebar Mini') + $container.append($sidebar_mini_container) + + var $sidebar_mini_md_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('body').hasClass('sidebar-mini-md'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('body').addClass('sidebar-mini-md') + } else { + $('body').removeClass('sidebar-mini-md') + } + }) + var $sidebar_mini_md_container = $('
', { class: 'mb-1' }).append($sidebar_mini_md_checkbox).append('Sidebar Mini MD') + $container.append($sidebar_mini_md_container) + + var $sidebar_mini_xs_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('body').hasClass('sidebar-mini-xs'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('body').addClass('sidebar-mini-xs') + } else { + $('body').removeClass('sidebar-mini-xs') + } + }) + var $sidebar_mini_xs_container = $('
', { class: 'mb-1' }).append($sidebar_mini_xs_checkbox).append('Sidebar Mini XS') + $container.append($sidebar_mini_xs_container) + + var $flat_sidebar_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('.nav-sidebar').hasClass('nav-flat'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('.nav-sidebar').addClass('nav-flat') + } else { + $('.nav-sidebar').removeClass('nav-flat') + } + }) + var $flat_sidebar_container = $('
', { class: 'mb-1' }).append($flat_sidebar_checkbox).append('Nav Flat Style') + $container.append($flat_sidebar_container) + + var $legacy_sidebar_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('.nav-sidebar').hasClass('nav-legacy'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('.nav-sidebar').addClass('nav-legacy') + } else { + $('.nav-sidebar').removeClass('nav-legacy') + } + }) + var $legacy_sidebar_container = $('
', { class: 'mb-1' }).append($legacy_sidebar_checkbox).append('Nav Legacy Style') + $container.append($legacy_sidebar_container) + + var $compact_sidebar_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('.nav-sidebar').hasClass('nav-compact'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('.nav-sidebar').addClass('nav-compact') + } else { + $('.nav-sidebar').removeClass('nav-compact') + } + }) + var $compact_sidebar_container = $('
', { class: 'mb-1' }).append($compact_sidebar_checkbox).append('Nav Compact') + $container.append($compact_sidebar_container) + + var $child_indent_sidebar_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('.nav-sidebar').hasClass('nav-child-indent'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('.nav-sidebar').addClass('nav-child-indent') + } else { + $('.nav-sidebar').removeClass('nav-child-indent') + } + }) + var $child_indent_sidebar_container = $('
', { class: 'mb-1' }).append($child_indent_sidebar_checkbox).append('Nav Child Indent') + $container.append($child_indent_sidebar_container) + + var $child_hide_sidebar_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('.nav-sidebar').hasClass('nav-collapse-hide-child'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('.nav-sidebar').addClass('nav-collapse-hide-child') + } else { + $('.nav-sidebar').removeClass('nav-collapse-hide-child') + } + }) + var $child_hide_sidebar_container = $('
', { class: 'mb-1' }).append($child_hide_sidebar_checkbox).append('Nav Child Hide on Collapse') + $container.append($child_hide_sidebar_container) + + var $no_expand_sidebar_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('.main-sidebar').hasClass('sidebar-no-expand'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('.main-sidebar').addClass('sidebar-no-expand') + } else { + $('.main-sidebar').removeClass('sidebar-no-expand') + } + }) + var $no_expand_sidebar_container = $('
', { class: 'mb-4' }).append($no_expand_sidebar_checkbox).append('Disable Hover/Focus Auto-Expand') + $container.append($no_expand_sidebar_container) + + $container.append('
Footer Options
') + var $footer_fixed_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('body').hasClass('layout-footer-fixed'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('body').addClass('layout-footer-fixed') + } else { + $('body').removeClass('layout-footer-fixed') + } + }) + var $footer_fixed_container = $('
', { class: 'mb-4' }).append($footer_fixed_checkbox).append('Fixed') + $container.append($footer_fixed_container) + + $container.append('
Small Text Options
') + + var $text_sm_body_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('body').hasClass('text-sm'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('body').addClass('text-sm') + } else { + $('body').removeClass('text-sm') + } + }) + var $text_sm_body_container = $('
', { class: 'mb-1' }).append($text_sm_body_checkbox).append('Body') + $container.append($text_sm_body_container) + + var $text_sm_header_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('.main-header').hasClass('text-sm'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('.main-header').addClass('text-sm') + } else { + $('.main-header').removeClass('text-sm') + } + }) + var $text_sm_header_container = $('
', { class: 'mb-1' }).append($text_sm_header_checkbox).append('Navbar') + $container.append($text_sm_header_container) + + var $text_sm_brand_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('.brand-link').hasClass('text-sm'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('.brand-link').addClass('text-sm') + } else { + $('.brand-link').removeClass('text-sm') + } + }) + var $text_sm_brand_container = $('
', { class: 'mb-1' }).append($text_sm_brand_checkbox).append('Brand') + $container.append($text_sm_brand_container) + + var $text_sm_sidebar_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('.nav-sidebar').hasClass('text-sm'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('.nav-sidebar').addClass('text-sm') + } else { + $('.nav-sidebar').removeClass('text-sm') + } + }) + var $text_sm_sidebar_container = $('
', { class: 'mb-1' }).append($text_sm_sidebar_checkbox).append('Sidebar Nav') + $container.append($text_sm_sidebar_container) + + var $text_sm_footer_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('.main-footer').hasClass('text-sm'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('.main-footer').addClass('text-sm') + } else { + $('.main-footer').removeClass('text-sm') + } + }) + var $text_sm_footer_container = $('
', { class: 'mb-4' }).append($text_sm_footer_checkbox).append('Footer') + $container.append($text_sm_footer_container) + + // Color Arrays + var navbar_dark_skins = [ 'navbar-primary', 'navbar-secondary', @@ -42,232 +420,6 @@ 'navbar-orange' ] - $container.append( - '
Customize AdminLTE
' - ) - - var $no_border_checkbox = $('', { - type: 'checkbox', - value: 1, - checked: $('.main-header').hasClass('border-bottom-0'), - class: 'mr-1' - }).on('click', function () { - if ($(this).is(':checked')) { - $('.main-header').addClass('border-bottom-0') - } else { - $('.main-header').removeClass('border-bottom-0') - } - }) - var $no_border_container = $('
', { class: 'mb-1' }).append($no_border_checkbox).append('No Navbar border') - $container.append($no_border_container) - - var $text_sm_body_checkbox = $('', { - type: 'checkbox', - value: 1, - checked: $('body').hasClass('text-sm'), - class: 'mr-1' - }).on('click', function () { - if ($(this).is(':checked')) { - $('body').addClass('text-sm') - } else { - $('body').removeClass('text-sm') - } - }) - var $text_sm_body_container = $('
', { class: 'mb-1' }).append($text_sm_body_checkbox).append('Body small text') - $container.append($text_sm_body_container) - - var $text_sm_header_checkbox = $('', { - type: 'checkbox', - value: 1, - checked: $('.main-header').hasClass('text-sm'), - class: 'mr-1' - }).on('click', function () { - if ($(this).is(':checked')) { - $('.main-header').addClass('text-sm') - } else { - $('.main-header').removeClass('text-sm') - } - }) - var $text_sm_header_container = $('
', { class: 'mb-1' }).append($text_sm_header_checkbox).append('Navbar small text') - $container.append($text_sm_header_container) - - var $text_sm_sidebar_checkbox = $('', { - type: 'checkbox', - value: 1, - checked: $('.nav-sidebar').hasClass('text-sm'), - class: 'mr-1' - }).on('click', function () { - if ($(this).is(':checked')) { - $('.nav-sidebar').addClass('text-sm') - } else { - $('.nav-sidebar').removeClass('text-sm') - } - }) - var $text_sm_sidebar_container = $('
', { class: 'mb-1' }).append($text_sm_sidebar_checkbox).append('Sidebar nav small text') - $container.append($text_sm_sidebar_container) - - var $text_sm_footer_checkbox = $('', { - type: 'checkbox', - value: 1, - checked: $('.main-footer').hasClass('text-sm'), - class: 'mr-1' - }).on('click', function () { - if ($(this).is(':checked')) { - $('.main-footer').addClass('text-sm') - } else { - $('.main-footer').removeClass('text-sm') - } - }) - var $text_sm_footer_container = $('
', { class: 'mb-1' }).append($text_sm_footer_checkbox).append('Footer small text') - $container.append($text_sm_footer_container) - - var $flat_sidebar_checkbox = $('', { - type: 'checkbox', - value: 1, - checked: $('.nav-sidebar').hasClass('nav-flat'), - class: 'mr-1' - }).on('click', function () { - if ($(this).is(':checked')) { - $('.nav-sidebar').addClass('nav-flat') - } else { - $('.nav-sidebar').removeClass('nav-flat') - } - }) - var $flat_sidebar_container = $('
', { class: 'mb-1' }).append($flat_sidebar_checkbox).append('Sidebar nav flat style') - $container.append($flat_sidebar_container) - - var $legacy_sidebar_checkbox = $('', { - type: 'checkbox', - value: 1, - checked: $('.nav-sidebar').hasClass('nav-legacy'), - class: 'mr-1' - }).on('click', function () { - if ($(this).is(':checked')) { - $('.nav-sidebar').addClass('nav-legacy') - } else { - $('.nav-sidebar').removeClass('nav-legacy') - } - }) - var $legacy_sidebar_container = $('
', { class: 'mb-1' }).append($legacy_sidebar_checkbox).append('Sidebar nav legacy style') - $container.append($legacy_sidebar_container) - - var $compact_sidebar_checkbox = $('', { - type: 'checkbox', - value: 1, - checked: $('.nav-sidebar').hasClass('nav-compact'), - class: 'mr-1' - }).on('click', function () { - if ($(this).is(':checked')) { - $('.nav-sidebar').addClass('nav-compact') - } else { - $('.nav-sidebar').removeClass('nav-compact') - } - }) - var $compact_sidebar_container = $('
', { class: 'mb-1' }).append($compact_sidebar_checkbox).append('Sidebar nav compact') - $container.append($compact_sidebar_container) - - var $child_indent_sidebar_checkbox = $('', { - type: 'checkbox', - value: 1, - checked: $('.nav-sidebar').hasClass('nav-child-indent'), - class: 'mr-1' - }).on('click', function () { - if ($(this).is(':checked')) { - $('.nav-sidebar').addClass('nav-child-indent') - } else { - $('.nav-sidebar').removeClass('nav-child-indent') - } - }) - var $child_indent_sidebar_container = $('
', { class: 'mb-1' }).append($child_indent_sidebar_checkbox).append('Sidebar nav child indent') - $container.append($child_indent_sidebar_container) - - var $child_hide_sidebar_checkbox = $('', { - type: 'checkbox', - value: 1, - checked: $('.nav-sidebar').hasClass('nav-collapse-hide-child'), - class: 'mr-1' - }).on('click', function () { - if ($(this).is(':checked')) { - $('.nav-sidebar').addClass('nav-collapse-hide-child') - } else { - $('.nav-sidebar').removeClass('nav-collapse-hide-child') - } - }) - var $child_hide_sidebar_container = $('
', { class: 'mb-1' }).append($child_hide_sidebar_checkbox).append('Sidebar nav child hide on collapse') - $container.append($child_hide_sidebar_container) - - var $no_expand_sidebar_checkbox = $('', { - type: 'checkbox', - value: 1, - checked: $('.main-sidebar').hasClass('sidebar-no-expand'), - class: 'mr-1' - }).on('click', function () { - if ($(this).is(':checked')) { - $('.main-sidebar').addClass('sidebar-no-expand') - } else { - $('.main-sidebar').removeClass('sidebar-no-expand') - } - }) - var $no_expand_sidebar_container = $('
', { class: 'mb-1' }).append($no_expand_sidebar_checkbox).append('Main Sidebar disable hover/focus auto expand') - $container.append($no_expand_sidebar_container) - - var $text_sm_brand_checkbox = $('', { - type: 'checkbox', - value: 1, - checked: $('.brand-link').hasClass('text-sm'), - class: 'mr-1' - }).on('click', function () { - if ($(this).is(':checked')) { - $('.brand-link').addClass('text-sm') - } else { - $('.brand-link').removeClass('text-sm') - } - }) - var $text_sm_brand_container = $('
', { class: 'mb-1' }).append($text_sm_brand_checkbox).append('Brand small text') - $container.append($text_sm_brand_container) - - var $dark_mode_checkbox = $('', { - type: 'checkbox', - value: 1, - checked: $('body').hasClass('dark-mode'), - class: 'mr-1' - }).on('click', function () { - if ($(this).is(':checked')) { - $('body').addClass('dark-mode') - } else { - $('body').removeClass('dark-mode') - } - }) - var $dark_mode_container = $('
', { class: 'mb-4' }).append($dark_mode_checkbox).append('Dark Mode') - $container.append($dark_mode_container) - - $container.append('
Navbar Variants
') - - var $navbar_variants = $('
', { - class: 'd-flex' - }) - var navbar_all_colors = navbar_dark_skins.concat(navbar_light_skins) - var $navbar_variants_colors = createSkinBlock(navbar_all_colors, function () { - var color = $(this).data('color') - var $main_header = $('.main-header') - $main_header.removeClass('navbar-dark').removeClass('navbar-light') - navbar_all_colors.forEach(function (color) { - $main_header.removeClass(color) - }) - - if (navbar_dark_skins.indexOf(color) > -1) { - $main_header.addClass('navbar-dark') - } else { - $main_header.addClass('navbar-light') - } - - $main_header.addClass(color) - }) - - $navbar_variants.append($navbar_variants_colors) - - $container.append($navbar_variants) - var sidebar_colors = [ 'bg-primary', 'bg-warning', @@ -341,6 +493,51 @@ 'sidebar-light-olive' ] + // Navbar Variants + + $container.append('
Navbar Variants
') + + var $navbar_variants = $('
', { + class: 'd-flex' + }) + var navbar_all_colors = navbar_dark_skins.concat(navbar_light_skins) + var $navbar_variants_colors = createSkinBlock(navbar_all_colors, function () { + var color = $(this).data('color') + var $main_header = $('.main-header') + $main_header.removeClass('navbar-dark').removeClass('navbar-light') + navbar_all_colors.forEach(function (color) { + $main_header.removeClass(color) + }) + + $(this).parent().removeClass().addClass('custom-select mb-3 text-light border-0 ') + + if (navbar_dark_skins.indexOf(color) > -1) { + $main_header.addClass('navbar-dark') + $(this).parent().addClass(color).addClass('text-light') + } else { + $main_header.addClass('navbar-light') + $(this).parent().addClass(color) + } + + $main_header.addClass(color) + }) + + var active_navbar_color = null + $('.main-header')[0].classList.forEach(function (className) { + if (navbar_all_colors.indexOf(className) > -1 && active_navbar_color === null) { + active_navbar_color = className.replace('navbar-', 'bg-') + } + }) + + $navbar_variants_colors.find('option.' + active_navbar_color).prop('selected', true) + $navbar_variants_colors.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_navbar_color) + + $navbar_variants.append($navbar_variants_colors) + + $container.append($navbar_variants) + + // Sidebar Colors + $container.append('
Accent Color Variants
') var $accent_variants = $('
', { class: 'd-flex' @@ -355,39 +552,83 @@ }) $body.addClass(accent_class) - })) + }, true)) + + var active_accent_color = null + $('body')[0].classList.forEach(function (className) { + if (accent_colors.indexOf(className) > -1 && active_accent_color === null) { + active_accent_color = className.replace('navbar-', 'bg-') + } + }) + + // $accent_variants.find('option.' + active_accent_color).prop('selected', true) + // $accent_variants.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_accent_color) $container.append('
Dark Sidebar Variants
') var $sidebar_variants_dark = $('
', { class: 'd-flex' }) $container.append($sidebar_variants_dark) - $container.append(createSkinBlock(sidebar_colors, function () { + var $sidebar_dark_variants = createSkinBlock(sidebar_colors, function () { var color = $(this).data('color') var sidebar_class = 'sidebar-dark-' + color.replace('bg-', '') var $sidebar = $('.main-sidebar') sidebar_skins.forEach(function (skin) { $sidebar.removeClass(skin) + $sidebar_light_variants.removeClass(skin.replace('sidebar-dark-', 'bg-')).removeClass('text-light') }) + $(this).parent().removeClass().addClass('custom-select mb-3 text-light border-0').addClass(color) + + $sidebar_light_variants.find('option').prop('selected', false) $sidebar.addClass(sidebar_class) - })) + }, true) + $container.append($sidebar_dark_variants) + + var active_sidebar_dark_color = null + $('.main-sidebar')[0].classList.forEach(function (className) { + var color = className.replace('sidebar-dark-', 'bg-') + if (sidebar_colors.indexOf(color) > -1 && active_sidebar_dark_color === null) { + active_sidebar_dark_color = color + } + }) + + $sidebar_dark_variants.find('option.' + active_sidebar_dark_color).prop('selected', true) + $sidebar_dark_variants.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_sidebar_dark_color) $container.append('
Light Sidebar Variants
') var $sidebar_variants_light = $('
', { class: 'd-flex' }) $container.append($sidebar_variants_light) - $container.append(createSkinBlock(sidebar_colors, function () { + var $sidebar_light_variants = createSkinBlock(sidebar_colors, function () { var color = $(this).data('color') var sidebar_class = 'sidebar-light-' + color.replace('bg-', '') var $sidebar = $('.main-sidebar') sidebar_skins.forEach(function (skin) { $sidebar.removeClass(skin) + $sidebar_dark_variants.removeClass(skin.replace('sidebar-light-', 'bg-')).removeClass('text-light') }) + $(this).parent().removeClass().addClass('custom-select mb-3 text-light border-0').addClass(color) + + $sidebar_dark_variants.find('option').prop('selected', false) $sidebar.addClass(sidebar_class) - })) + }, true) + $container.append($sidebar_light_variants) + + var active_sidebar_light_color = null + $('.main-sidebar')[0].classList.forEach(function (className) { + var color = className.replace('sidebar-light-', 'bg-') + if (sidebar_colors.indexOf(color) > -1 && active_sidebar_light_color === null) { + active_sidebar_light_color = color + } + }) + + if (active_sidebar_light_color !== null) { + $sidebar_light_variants.find('option.' + active_sidebar_light_color).prop('selected', true) + $sidebar_light_variants.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_sidebar_light_color) + } var logo_skins = navbar_all_colors $container.append('
Brand Logo Variants
') @@ -404,57 +645,40 @@ $logo.removeClass(skin) }) }) - $container.append(createSkinBlock(logo_skins, function () { + + var $brand_variants = createSkinBlock(logo_skins, function () { var color = $(this).data('color') var $logo = $('.brand-link') + + if (color === 'navbar-light' || color === 'navbar-white') { + $logo.addClass('text-black') + } else { + $logo.removeClass('text-black') + } + logo_skins.forEach(function (skin) { $logo.removeClass(skin) }) + + if (color) { + $(this).parent().removeClass().addClass('custom-select mb-3 border-0').addClass(color).addClass(color !== 'navbar-light' && color !== 'navbar-white' ? 'text-light' : '') + } else { + $(this).parent().removeClass().addClass('custom-select mb-3 border-0') + } + $logo.addClass(color) - }).append($clear_btn)) + }, true).append($clear_btn) + $container.append($brand_variants) - function createSkinBlock(colors, callback) { - var $block = $('
', { - class: 'd-flex flex-wrap mb-3' - }) - - colors.forEach(function (color) { - var $color = $('
', { - class: (typeof color === 'object' ? color.join(' ') : color).replace('navbar-', 'bg-').replace('accent-', 'bg-') + ' elevation-2' - }) - - $block.append($color) - - $color.data('color', color) - - $color.css({ - width: '40px', - height: '20px', - borderRadius: '25px', - marginRight: 10, - marginBottom: 10, - opacity: 0.8, - cursor: 'pointer' - }) - - $color.hover(function () { - $(this).css({ opacity: 1 }).removeClass('elevation-2').addClass('elevation-4') - }, function () { - $(this).css({ opacity: 0.8 }).removeClass('elevation-4').addClass('elevation-2') - }) - - if (callback) { - $color.on('click', callback) - } - }) - - return $block - } - - $('.product-image-thumb').on('click', function () { - var image_element = $(this).find('img') - $('.product-image').prop('src', $(image_element).attr('src')) - $('.product-image-thumb.active').removeClass('active') - $(this).addClass('active') + var active_brand_color = null + $('.brand-link')[0].classList.forEach(function (className) { + if (logo_skins.indexOf(className) > -1 && active_brand_color === null) { + active_brand_color = className.replace('navbar-', 'bg-') + } }) + + if (active_brand_color) { + $brand_variants.find('option.' + active_brand_color).prop('selected', true) + $brand_variants.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_brand_color) + } })(jQuery) diff --git a/dist/js/pages/dashboard.js b/dist/js/pages/dashboard.js index 9408c5814..56539f25b 100644 --- a/dist/js/pages/dashboard.js +++ b/dist/js/pages/dashboard.js @@ -166,7 +166,7 @@ $(function () { // This will get the first returned node in the jQuery collection. // eslint-disable-next-line no-unused-vars - var salesChart = new Chart(salesChartCanvas, { + var salesChart = new Chart(salesChartCanvas, { // lgtm[js/unused-local-variable] type: 'line', data: salesChartData, options: salesChartOptions @@ -197,7 +197,7 @@ $(function () { // Create pie or douhnut chart // You can switch between pie and douhnut using the method below. // eslint-disable-next-line no-unused-vars - var pieChart = new Chart(pieChartCanvas, { + var pieChart = new Chart(pieChartCanvas, { // lgtm[js/unused-local-variable] type: 'doughnut', data: pieData, options: pieOptions @@ -259,11 +259,9 @@ $(function () { // This will get the first returned node in the jQuery collection. // eslint-disable-next-line no-unused-vars - var salesGraphChart = new Chart(salesGraphChartCanvas, { + var salesGraphChart = new Chart(salesGraphChartCanvas, { // lgtm[js/unused-local-variable] type: 'line', data: salesGraphChartData, options: salesGraphChartOptions }) }) - -// lgtm [js/unused-local-variable] diff --git a/docs/_config.yml b/docs/_config.yml index a9eef2800..31f8c6c04 100644 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -71,6 +71,8 @@ navigation: url: javascript/expandable-tables.html - title: IFrame url: javascript/iframe.html + - title: Navbar Search + url: javascript/navbar-search.html - title: Browser Support url: browser-support.html icon: fab fa-chrome @@ -83,6 +85,9 @@ navigation: - title: Upgrade Guide url: upgrade-guide.html icon: fas fa-hand-point-up + - title: Contributing Guide + url: contributing.html + icon: fas fa-hands-helping - title: FAQ url: faq.html icon: fas fa-question-circle diff --git a/docs/components/main-header.md b/docs/components/main-header.md index e5e0242d4..be4ce19c2 100644 --- a/docs/components/main-header.md +++ b/docs/components/main-header.md @@ -570,5 +570,5 @@ Top navbar example can be found in this [demo page](https://adminlte.io/themes/d > ##### Tip! > To get a bigger dropdown menu you can add `.dropdown-menu-lg` or `.dropdown-menu-xl` to `.dropdown-menu`. -> You can also get the legacy dropdown offset with adding `.dropdown-offset-legacy` to `.main-header`. +> You can also get the legacy dropdown offset with adding `.dropdown-legacy` to `.main-header`. {: .quote-info} diff --git a/docs/contributing.md b/docs/contributing.md new file mode 100644 index 000000000..b04e6acdd --- /dev/null +++ b/docs/contributing.md @@ -0,0 +1,47 @@ +--- +layout: page +title: Contributing Guide +--- + +Contributions are always **welcome and recommended**! Here is how for beginner's: [Get started with open source click here](https://youtu.be/GbqSvJs-6W4) + +1. Contribution Requirements : + * When you contribute, you agree to give a non-exclusive license to AdminLTE.io to use that contribution in any context as we (AdminLTE.io) see appropriate. + * If you use content provided by another party, it must be appropriately licensed using an [open source](https://opensource.org/licenses) license. + * Contributions are only accepted through GitHub pull requests. + * Finally, contributed code must work in all supported browsers (see above for browser support). +2. Installation : + * Fork the repository ([here is the guide](https://help.github.com/articles/fork-a-repo/)). + * Clone to your machine + + ```bash + git clone https://github.com/YOUR_USERNAME/AdminLTE.git + ``` + * Create a new branch +3. Compile dist files (Development) : + * To compile the dist files you need Node.js 10 or higher/npm (node package manager) + * Delete ./package-lock.json file + * `npm install` (install npm deps) + * `npm run dev` (developer mode, autocompile with browsersync support for live demo) + * Make your changes only in ./buid Folder OR package.json OR ./dist/js/demo.js OR in any html files which nessary to contribute + * Do not changes in ./dist/css/ AND ./dist/js/ Because its compiled files + * `npm run production` (compile css/js files and test every pages are perfectly working fine, before creating pull request) +4. Create a pull request + +### Online one-click setup for contributing + +You can use Gitpod(an online IDE which is free for Open Source) for working on issues or making Prs. With a single click it will launch a workspace and automatically: + +- clone the `AdminLTE` repo. +- install the dependencies. +- run `yarn dev` to start the server. + +[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/from-referrer/) + +### Compile dist files + +To compile the dist files you need Node.js/npm, clone/download the repo then: + +1. `npm install` (install npm deps) +2. _Optional:_ `npm run dev` (developer mode, autocompile with browsersync support for live demo) +3. `npm run production` (compile css/js files) diff --git a/docs/dependencies.md b/docs/dependencies.md index 8f91ba1c1..14a084016 100644 --- a/docs/dependencies.md +++ b/docs/dependencies.md @@ -8,9 +8,9 @@ title: Dependencies & Plugins AdminLTE depends on two main frameworks. The downloadable package contains both of these libraries, so you don't have to manually download them. {: .lead} -- [Bootstrap 4](https://getbootstrap.com/) -- [jQuery 3.3.1+](https://jquery.com/) -- [Popper.js 1.14.7+](https://popper.js.org/) +- [Bootstrap 4.5](https://getbootstrap.com/) +- [jQuery 3.5.1+](https://jquery.com/) +- [Popper.js 1.16.1+](https://popper.js.org/) - [All other plugins are listed below](#plugins) #### Plugins diff --git a/docs/index.md b/docs/index.md index b990bf9c1..23e0cd186 100644 --- a/docs/index.md +++ b/docs/index.md @@ -38,3 +38,7 @@ composer require "almasaeed2010/adminlte=~3.0" ```bash git clone https://github.com/ColorlibHQ/AdminLTE.git ``` + +### From CDN + +[https://www.jsdelivr.com/package/npm/admin-lte](https://www.jsdelivr.com/package/npm/admin-lte) \ No newline at end of file diff --git a/docs/javascript/navbar-search.md b/docs/javascript/navbar-search.md new file mode 100644 index 000000000..70965194f --- /dev/null +++ b/docs/javascript/navbar-search.md @@ -0,0 +1,94 @@ +--- +layout: page +title: Navbar Search Plugin +--- + +The navbar search plugin provides the functionality to show/hide a search input across the whole header. + +##### Usage + +This plugin can be activated as a jQuery plugin or using the data API. + +###### Data API +{: .text-bold } + +Activate the plugin by adding the following data-attribue `data-widget="navbar-search"` to the `.navbar-search-block` inside the header. You can use the HTML Markup below for a quick start. + +###### jQuery +{: .text-bold } + +The jQuery API provides more customizable options that allows the developer to pre-process the request before rendering and post-process it after rendering. + +```js +("[data-widget="navbar-search"]").SiteSearch(options) +``` + +##### HTML Markup +Place this HTML Markup after inside the header. +```html + + + +
+
+
+ +
+ + +
+
+
+
+``` + +Or you can place the search button inside the navbar as nav-item with this markup: +```html +
  • + + + +
    +
    +
    + +
    + + +
    +
    +
    +
    +
    • +``` + +##### Options +{: .mt-4} + +|--- +| Name | Type | Default | Description +|-|-|-|- +| resetOnClose | Boolean | false | Reset Input on Close/Hide. +{: .table .table-bordered .bg-light} + + +##### Methods +{: .mt-4} + +|--- +| Method | Description +|-|- +|toggle | Toggles the search block. +|close | Closes the search block. +|open | Opens the search block. +{: .table .table-bordered .bg-light} + +Example: `$('[data-widget="navbar-search"]').SiteSearch('toggle')` diff --git a/docs/layout.md b/docs/layout.md index ea380d844..7249db42c 100644 --- a/docs/layout.md +++ b/docs/layout.md @@ -21,7 +21,7 @@ The layout consists of four major parts: > You cannot use both layout-boxed and layout-navbar-fixed or layout-footer-fixed at the same time. Anything else can be mixed together. {: .quote-danger} -AdminLTE 3.0 provides a set of options to apply to your main layout. Each one of these classes can be added to the body tag to get the desired goal. +AdminLTE 3.1 provides a set of options to apply to your main layout. Each one of these classes can be added to the body tag to get the desired goal. - Fixed Sidebar: use the class `.layout-fixed` to get a fixed sidebar. - Fixed Navbar: use the class `.layout-navbar-fixed` to get a fixed navbar. @@ -51,7 +51,7 @@ You can also use the following classes for responsive changes with placing #### Color Variations -AdminLTE 3.0 provides a set of color variations to apply to your sidebar (light & dark) & navbar. You can combine any available color with these class prefixes: +AdminLTE 3.1 provides a set of color variations to apply to your sidebar (light & dark) & navbar. You can combine any available color with these class prefixes: - `.navbar-*` - `.sidebar-dark-*` diff --git a/iframe.html b/iframe.html index 4ae72be98..6eafdfec5 100644 --- a/iframe.html +++ b/iframe.html @@ -32,20 +32,30 @@ - -
    -
    - -
    - -
    -
    -
    - - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -     - -
    -
    - -
    - -
    -
    -
    -