admin-lte 4.0.0-alpha3 → 4.0.0-beta1

package/src/scss/_variables.scss

@@ -1,16 +1,17 @@
+//
 // Custom AdminLTE Variables
+//
 
 // Prefix for :root CSS variables and others.
 $lte-prefix:                      lte- !default;
 
 // TRANSITIONS SETTINGS
 // --------------------------------------------------------
-
 // Transition global options
 $lte-transition-speed:            .3s !default;
 $lte-transition-fn:               ease-in-out !default;
 
-// Sidebar
+// SIDEBAR
 // --------------------------------------------------------
 $lte-sidebar-width:               250px !default;
 $lte-sidebar-breakpoint:          lg !default;
@@ -58,11 +59,13 @@ $lte-app-header-link-padding-y:       $navbar-padding-y !default;
 $lte-app-header-height:               ($nav-link-height + ($lte-app-header-link-padding-y * 2)) !default;
 $lte-app-header-height-compact:       ($nav-link-height-compact + ($lte-app-header-link-padding-y * 2)) !default;
 
-// Content padding
+// CONTENT PADDING
+// --------------------------------------------------------
 $lte-content-padding-y:           0 !default;
 $lte-content-padding-x:           .5rem !default;
 
 // MAIN CONTENT
+// --------------------------------------------------------
 $lte-app-content-bottom-area-height-sm: 3.5rem !default;
 $lte-app-content-bottom-area-height-md: 6rem !default;
 $lte-app-content-bottom-area-height-lg: 9rem !default;
@@ -88,8 +91,7 @@ $lte-brand-link-padding-x:         $lte-sidebar-padding-x !default;
 $lte-brand-link-padding-x-compact: $lte-sidebar-padding-x-compact !default;
 $lte-brand-link-border-buttom:    1px !default;
 
-
-// Cards
+// CARDS
 // --------------------------------------------------------
 $lte-card-shadow: 0 0 1px rgba(var(--#{$prefix}body-color-rgb), .125), 0 1px 3px rgba(var(--#{$prefix}body-color-rgb), .2) !default;
 $lte-card-title-font-size: 1.1rem !default;
@@ -99,6 +101,10 @@ $lte-card-title-font-weight: $font-weight-normal !default;
 // --------------------------------------------------------
 $lte-progress-bar-border-radius: 1px !default;
 
+// CALLOUTS
+// --------------------------------------------------------
+$lte-callout-link-font-weight: $alert-link-font-weight !default;
+
 // DIRECT CHAT
 // --------------------------------------------------------
 $lte-direct-chat-default-msg-bg: var(--#{$prefix}secondary-bg) !default;

package/src/scss/adminlte.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v4.0.0-alpha2
+ *   AdminLTE v4.0.0-beta1
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>
  *   License: Open source - MIT <https://opensource.org/licenses/MIT>
@@ -60,7 +60,6 @@
 // Bootstrap Utilities
 @import "bootstrap/scss/utilities/api";
 
-
 // AdminLTE Configuration
 // ---------------------------------------------------
 @import "variables";

package/src/scss/pages/_lockscreen.scss

@@ -18,6 +18,7 @@
 
     a {
       color: var(--#{$prefix}emphasis-color);
+      text-decoration: none;
     }
   }
 

package/src/scss/pages/_login_and_register.scss

@@ -11,6 +11,7 @@
 
   a {
     color: var(--#{$prefix}secondary-color);
+    text-decoration: none;
   }
 }
 

package/src/scss/parts/_extra-components.scss

@@ -6,3 +6,4 @@
 @import "../info-box";
 @import "../timeline";
 @import "../direct-chat";
+@import "../toasts";

package/src/ts/adminlte.ts

@@ -3,11 +3,13 @@ import PushMenu from './push-menu'
 import Treeview from './treeview'
 import DirectChat from './direct-chat'
 import CardWidget from './card-widget'
+import FullScreen from './fullscreen'
 
 export {
   Layout,
   PushMenu,
   Treeview,
   DirectChat,
-  CardWidget
+  CardWidget,
+  FullScreen
 }

package/src/ts/card-widget.ts

@@ -1,7 +1,8 @@
 /**
  * --------------------------------------------
- * AdminLTE card-widget.ts
- * License MIT
+ * @file AdminLTE card-widget.ts
+ * @description Card widget for AdminLTE.
+ * @license MIT
  * --------------------------------------------
  */
 

package/src/ts/direct-chat.ts

@@ -1,7 +1,8 @@
 /**
  * --------------------------------------------
- * AdminLTE direct-chat.ts
- * License MIT
+ * @file AdminLTE direct-chat.ts
+ * @description Direct chat for AdminLTE.
+ * @license MIT
  * --------------------------------------------
  */
 

package/src/ts/fullscreen.ts

@@ -0,0 +1,110 @@
+/**
+ * --------------------------------------------
+ * @file AdminLTE fullscreen.ts
+ * @description Fullscreen plugin for AdminLTE.
+ * @license MIT
+ * --------------------------------------------
+ */
+
+import {
+  onDOMContentLoaded
+} from './util/index'
+
+/**
+ * Constants
+ * ============================================================================
+ */
+const DATA_KEY = 'lte.fullscreen'
+const EVENT_KEY = `.${DATA_KEY}`
+const EVENT_MAXIMIZED = `maximized${EVENT_KEY}`
+const EVENT_MINIMIZED = `minimized${EVENT_KEY}`
+
+const SELECTOR_FULLSCREEN_TOGGLE = '[data-lte-toggle="fullscreen"]'
+const SELECTOR_MAXIMIZE_ICON = '[data-lte-icon="maximize"]'
+const SELECTOR_MINIMIZE_ICON = '[data-lte-icon="minimize"]'
+
+/**
+ * Class Definition.
+ * ============================================================================
+ */
+class FullScreen {
+  _element: HTMLElement
+  _config: undefined
+
+  constructor(element: HTMLElement, config?: undefined) {
+    this._element = element
+    this._config = config
+  }
+
+  inFullScreen(): void {
+    const event = new Event(EVENT_MAXIMIZED)
+
+    const iconMaximize = document.querySelector<HTMLElement>(SELECTOR_MAXIMIZE_ICON)
+    const iconMinimize = document.querySelector<HTMLElement>(SELECTOR_MINIMIZE_ICON)
+
+    void document.documentElement.requestFullscreen()
+
+    if (iconMaximize) {
+      iconMaximize.style.display = 'none'
+    }
+
+    if (iconMinimize) {
+      iconMinimize.style.display = 'block'
+    }
+
+    this._element.dispatchEvent(event)
+  }
+
+  outFullscreen(): void {
+    const event = new Event(EVENT_MINIMIZED)
+
+    const iconMaximize = document.querySelector<HTMLElement>(SELECTOR_MAXIMIZE_ICON)
+    const iconMinimize = document.querySelector<HTMLElement>(SELECTOR_MINIMIZE_ICON)
+
+    void document.exitFullscreen()
+
+    if (iconMaximize) {
+      iconMaximize.style.display = 'block'
+    }
+
+    if (iconMinimize) {
+      iconMinimize.style.display = 'none'
+    }
+
+    this._element.dispatchEvent(event)
+  }
+
+  toggleFullScreen(): void {
+    if (document.fullscreenEnabled) {
+      if (document.fullscreenElement) {
+        this.outFullscreen()
+      } else {
+        this.inFullScreen()
+      }
+    }
+  }
+}
+
+/**
+ * Data Api implementation
+ * ============================================================================
+ */
+onDOMContentLoaded(() => {
+  const buttons = document.querySelectorAll(SELECTOR_FULLSCREEN_TOGGLE)
+
+  buttons.forEach(btn => {
+    btn.addEventListener('click', event => {
+      event.preventDefault()
+
+      const target = event.target as HTMLElement
+      const button = target.closest(SELECTOR_FULLSCREEN_TOGGLE) as HTMLElement | undefined
+
+      if (button) {
+        const data = new FullScreen(button, undefined)
+        data.toggleFullScreen()
+      }
+    })
+  })
+})
+
+export default FullScreen

package/src/ts/layout.ts

@@ -1,7 +1,8 @@
 /**
  * --------------------------------------------
- * AdminLTE layout.ts
- * License MIT
+ * @file AdminLTE layout.ts
+ * @description Layout for AdminLTE.
+ * @license MIT
  * --------------------------------------------
  */
 

package/src/ts/push-menu.ts

@@ -1,7 +1,8 @@
 /**
  * --------------------------------------------
- * AdminLTE push-menu.ts
- * License MIT
+ * @file AdminLTE push-menu.ts
+ * @description Push menu for AdminLTE.
+ * @license MIT
  * --------------------------------------------
  */
 

package/src/ts/treeview.ts

@@ -1,7 +1,8 @@
 /**
  * --------------------------------------------
- * AdminLTE treeview.ts
- * License MIT
+ * @file AdminLTE treeview.ts
+ * @description Treeview plugin for AdminLTE.
+ * @license MIT
  * --------------------------------------------
  */
 
@@ -32,11 +33,13 @@ const SELECTOR_TREEVIEW_MENU = '.nav-treeview'
 const SELECTOR_DATA_TOGGLE = '[data-lte-toggle="treeview"]'
 
 const Default = {
-  animationSpeed: 300
+  animationSpeed: 300,
+  accordion: true
 }
 
 type Config = {
   animationSpeed: number;
+  accordion: boolean;
 }
 
 /**
@@ -56,6 +59,20 @@ class Treeview {
   open(): void {
     const event = new Event(EVENT_EXPANDED)
 
+    if (this._config.accordion) {
+      const openMenuList = this._element.parentElement?.querySelectorAll(`${SELECTOR_NAV_ITEM}.${CLASS_NAME_MENU_OPEN}`)
+
+      openMenuList?.forEach(openMenu => {
+        if (openMenu !== this._element.parentElement) {
+          openMenu.classList.remove(CLASS_NAME_MENU_OPEN)
+          const childElement = openMenu?.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
+          if (childElement) {
+            slideUp(childElement, this._config.animationSpeed)
+          }
+        }
+      })
+    }
+
     this._element.classList.add(CLASS_NAME_MENU_OPEN)
 
     const childElement = this._element?.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined

package/src/ts/util/index.ts

@@ -83,7 +83,7 @@ const slideDown = (target: HTMLElement, duration = 500) => {
   }, duration)
 }
 
-/* TOOGLE */
+/* TOGGLE */
 const slideToggle = (target: HTMLElement, duration = 500) => {
   if (window.getComputedStyle(target).display === 'none') {
     slideDown(target, duration)

package/.idea/AdminLTE.iml

@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <sourceFolder url="file://$MODULE_DIR$/spec" isTestSource="true" />
-      <sourceFolder url="file://$MODULE_DIR$/tests" isTestSource="true" />
-      <excludeFolder url="file://$MODULE_DIR$/.cache" />
-      <excludeFolder url="file://$MODULE_DIR$/.temp" />
-      <excludeFolder url="file://$MODULE_DIR$/dist" />
-      <excludeFolder url="file://$MODULE_DIR$/docs_html" />
-      <excludeFolder url="file://$MODULE_DIR$/vendor/composer" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.idea/codeStyles/Project.xml

@@ -1,53 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <code_scheme name="Project" version="173">
-    <DBN-PSQL>
-      <case-options enabled="true">
-        <option name="KEYWORD_CASE" value="lower" />
-        <option name="FUNCTION_CASE" value="lower" />
-        <option name="PARAMETER_CASE" value="lower" />
-        <option name="DATATYPE_CASE" value="lower" />
-        <option name="OBJECT_CASE" value="preserve" />
-      </case-options>
-      <formatting-settings enabled="false" />
-    </DBN-PSQL>
-    <DBN-SQL>
-      <case-options enabled="true">
-        <option name="KEYWORD_CASE" value="lower" />
-        <option name="FUNCTION_CASE" value="lower" />
-        <option name="PARAMETER_CASE" value="lower" />
-        <option name="DATATYPE_CASE" value="lower" />
-        <option name="OBJECT_CASE" value="preserve" />
-      </case-options>
-      <formatting-settings enabled="false">
-        <option name="STATEMENT_SPACING" value="one_line" />
-        <option name="CLAUSE_CHOP_DOWN" value="chop_down_if_statement_long" />
-        <option name="ITERATION_ELEMENTS_WRAPPING" value="chop_down_if_not_single" />
-      </formatting-settings>
-    </DBN-SQL>
-    <JSCodeStyleSettings version="0">
-      <option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
-      <option name="FORCE_SEMICOLON_STYLE" value="true" />
-      <option name="SPACE_BEFORE_GENERATOR_MULT" value="true" />
-      <option name="USE_DOUBLE_QUOTES" value="false" />
-      <option name="FORCE_QUOTE_STYlE" value="true" />
-      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
-      <option name="VAR_DECLARATION_WRAP" value="2" />
-      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
-      <option name="SPACES_WITHIN_IMPORTS" value="true" />
-    </JSCodeStyleSettings>
-    <codeStyleSettings language="JavaScript">
-      <option name="BLOCK_COMMENT_ADD_SPACE" value="true" />
-      <option name="KEEP_BLANK_LINES_IN_CODE" value="1" />
-      <option name="ALIGN_MULTILINE_PARAMETERS" value="false" />
-      <option name="ALIGN_MULTILINE_FOR" value="false" />
-      <option name="IF_BRACE_FORCE" value="3" />
-      <option name="DOWHILE_BRACE_FORCE" value="3" />
-      <option name="WHILE_BRACE_FORCE" value="3" />
-      <option name="FOR_BRACE_FORCE" value="3" />
-      <indentOptions>
-        <option name="INDENT_SIZE" value="2" />
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-  </code_scheme>
-</component>

package/.idea/codeStyles/codeStyleConfig.xml

@@ -1,5 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <state>
-    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
-  </state>
-</component>