lisone/AdminLTE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

minor bug fixes

Browse Source
This commit is contained in:
Daniel
2023-02-20 18:54:04 +05:30
parent 1d24d1dc30
commit c30b554b00
9 changed files with 183 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/scss/_app-sidebar.scss
View File

@@ -3,8 +3,8 @@
--#{$lte-prefix}sidebar-color: #{$lte-sidebar-color};
--#{$lte-prefix}sidebar-hover-color: #{$lte-sidebar-hover-color};
--#{$lte-prefix}sidebar-active-color: #{$lte-sidebar-active-color};
--#{$lte-prefix}sidebar-menu-active-bg: #{$primary};
--#{$lte-prefix}sidebar-menu-active-color: #{color-contrast($primary)};
--#{$lte-prefix}sidebar-menu-active-bg: #{$lte-sidebar-menu-active-bg};
--#{$lte-prefix}sidebar-menu-active-color: #{$lte-sidebar-menu-active-color};
--#{$lte-prefix}sidebar-submenu-bg: #{$lte-sidebar-submenu-bg};
--#{$lte-prefix}sidebar-submenu-color: #{$lte-sidebar-submenu-color};
--#{$lte-prefix}sidebar-submenu-hover-color: #{$lte-sidebar-submenu-hover-color};
@@ -40,9 +40,9 @@
}
}
> .nav-link.active {
> .nav-link.active:not(:hover) {
color: var(--#{$lte-prefix}sidebar-menu-active-color) !important;
// background-color: var(--#{$lte-prefix}sidebar-menu-active-bg) !important;
background-color: var(--#{$lte-prefix}sidebar-menu-active-bg) !important;
}
// Hover and active states
@@ -50,7 +50,7 @@
&:hover > .nav-link,
> .nav-link:focus {
color: var(--#{$lte-prefix}sidebar-hover-color);
// background-color: var(--#{$lte-prefix}sidebar-hover-bg);
background-color: var(--#{$lte-prefix}sidebar-hover-bg);
}
// First Level Submenu
@@ -183,8 +183,8 @@
--#{$lte-prefix}sidebar-color: #{$lte-sidebar-color-dark};
--#{$lte-prefix}sidebar-hover-color: #{$lte-sidebar-hover-color-dark};
--#{$lte-prefix}sidebar-active-color: #{$lte-sidebar-active-color-dark};
--#{$lte-prefix}sidebar-menu-active-bg: #{$primary};
--#{$lte-prefix}sidebar-menu-active-color: #{color-contrast($primary)};
--#{$lte-prefix}sidebar-menu-active-bg: #{$lte-sidebar-menu-active-bg-dark};
--#{$lte-prefix}sidebar-menu-active-color: #{$lte-sidebar-menu-active-color-dark};
--#{$lte-prefix}sidebar-submenu-bg: #{$lte-sidebar-submenu-bg-dark};
--#{$lte-prefix}sidebar-submenu-color: #{$lte-sidebar-submenu-color-dark};
--#{$lte-prefix}sidebar-submenu-hover-color: #{$lte-sidebar-submenu-hover-color-dark};

6
src/scss/_variables-dark.scss
View File

@@ -5,10 +5,12 @@ $lte-sidebar-hover-bg-dark: rgba(255, 255, 255, .1) !default;
$lte-sidebar-color-dark: #c2c7d0 !default;
$lte-sidebar-hover-color-dark: $white !default;
$lte-sidebar-active-color-dark: $white !default;
$lte-sidebar-menu-active-bg-dark: transparent !default;
$lte-sidebar-menu-active-color-dark: $white !default;
$lte-sidebar-submenu-bg-dark: transparent !default;
$lte-sidebar-submenu-color-dark: $lte-sidebar-color-dark !default;
$lte-sidebar-submenu-color-dark: #c2c7d0 !default;
$lte-sidebar-submenu-hover-color-dark: $white !default;
$lte-sidebar-submenu-hover-bg-dark: $lte-sidebar-hover-bg-dark !default;
$lte-sidebar-submenu-hover-bg-dark: rgba(255, 255, 255, .1) !default;
$lte-sidebar-submenu-active-color-dark: $white !default;
$lte-sidebar-submenu-active-bg-dark: rgba(255, 255, 255, .1) !default;
$lte-sidebar-header-color-dark: tint-color(#c2c7d0, 5%) !default;

8
src/scss/_variables.scss
View File

@@ -28,12 +28,14 @@ $lte-sidebar-hover-bg: rgba($black, .1) !default;
$lte-sidebar-color: $gray-800 !default;
$lte-sidebar-hover-color: $gray-900 !default;
$lte-sidebar-active-color: $black !default;
$lte-sidebar-menu-active-bg: transparent !default;
$lte-sidebar-menu-active-color: $black !default;
$lte-sidebar-submenu-bg: transparent !default;
$lte-sidebar-submenu-color: #777 !default;
$lte-sidebar-submenu-hover-color: $black !default;
$lte-sidebar-submenu-hover-bg: $lte-sidebar-hover-bg !default;
$lte-sidebar-submenu-active-color: $lte-sidebar-hover-color !default;
$lte-sidebar-submenu-active-bg: $lte-sidebar-submenu-hover-bg !default;
$lte-sidebar-submenu-hover-bg: rgba($black, .1) !default;
$lte-sidebar-submenu-active-color: $gray-900 !default;
$lte-sidebar-submenu-active-bg: rgba($black, .1) !default;
$lte-sidebar-header-color: shade-color($gray-800, 5%) !default;
// SIDEBAR MINI

23
src/ts/direct-chat.ts
View File

@@ -30,26 +30,26 @@ const CLASS_NAME_DIRECT_CHAT_OPEN = 'direct-chat-contacts-open'
*/
class DirectChat {
_element: HTMLElement | undefined
_element: HTMLElement
_config: undefined
constructor(element: HTMLElement | undefined, config: undefined) {
constructor(element: HTMLElement, config: undefined) {
this._element = element
this._config = config
}
toggle(): void {
if (this._element?.classList.contains(CLASS_NAME_DIRECT_CHAT_OPEN)) {
if (this._element.classList.contains(CLASS_NAME_DIRECT_CHAT_OPEN)) {
const event = new Event(EVENT_COLLAPSED)
this._element?.classList.remove(CLASS_NAME_DIRECT_CHAT_OPEN)
this._element.classList.remove(CLASS_NAME_DIRECT_CHAT_OPEN)
this._element?.dispatchEvent(event)
this._element.dispatchEvent(event)
} else {
const event = new Event(EVENT_EXPANDED)
this._element?.classList.add(CLASS_NAME_DIRECT_CHAT_OPEN)
this._element.classList.add(CLASS_NAME_DIRECT_CHAT_OPEN)
this._element?.dispatchEvent(event)
this._element.dispatchEvent(event)
}
}
}
@@ -67,9 +67,12 @@ domReady(() => {
btn.addEventListener('click', event => {
event.preventDefault()
const target = event.target as HTMLElement
const chatPane = target?.closest(SELECTOR_DIRECT_CHAT) as HTMLElement | undefined
const data = new DirectChat(chatPane, undefined)
data.toggle()
const chatPane = target.closest(SELECTOR_DIRECT_CHAT) as HTMLElement | undefined
if (chatPane) {
const data = new DirectChat(chatPane, undefined)
data.toggle()
}
})
}
})

31
src/ts/treeview.ts
View File

@@ -46,48 +46,40 @@ type Config = {
class Treeview {
_element: HTMLElement
_config: Config
_navItem: HTMLElement | undefined
_childNavItem: HTMLElement | undefined | undefined
_childNavItem: HTMLElement | undefined
constructor(element: HTMLElement, config: Config) {
this._element = element
this._config = { ...Default, ...config }
this._navItem = this._element?.closest(SELECTOR_NAV_ITEM) as HTMLElement | undefined
this._childNavItem = this._navItem?.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
this._childNavItem = this._element.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
}
open(): void {
const event = new Event(EVENT_EXPANDED)
if (this._navItem) {
this._navItem.classList.add(CLASS_NAME_MENU_OPEN)
}
this._element.classList.add(CLASS_NAME_MENU_OPEN)
if (this._childNavItem) {
slideDown(this._childNavItem, this._config.animationSpeed)
}
this._element?.dispatchEvent(event)
this._element.dispatchEvent(event)
}
close(): void {
const event = new Event(EVENT_COLLAPSED)
window.setTimeout(() => {
if (this._navItem) {
this._navItem.classList.remove(CLASS_NAME_MENU_OPEN)
}
}, this._config.animationSpeed)
this._element.classList.remove(CLASS_NAME_MENU_OPEN)
if (this._childNavItem) {
slideUp(this._childNavItem, this._config.animationSpeed)
}
this._element?.dispatchEvent(event)
this._element.dispatchEvent(event)
}
toggle(): void {
if (this._navItem?.classList.contains(CLASS_NAME_MENU_OPEN)) {
if (this._element.classList.contains(CLASS_NAME_MENU_OPEN)) {
this.close()
} else {
this.open()
@@ -106,10 +98,13 @@ domReady(() => {
for (const btn of button) {
btn.addEventListener('click', event => {
const treeviewMenu = event.target as HTMLElement
const target = event.target as HTMLElement
const targetItem = target.closest(SELECTOR_NAV_ITEM) as HTMLElement | undefined
const data = new Treeview(treeviewMenu, Default)
data.toggle()
if (targetItem) {
const data = new Treeview(targetItem, Default)
data.toggle()
}
})
}
})