[4.0] Remove Fade effect

Faster login Solves stutter bug #25904 Solves internet explorer bug #26005
joomla · Feb 8, 2020 · 2e3b4ee · 2e3b4ee
1 parent 0e68210
commit 2e3b4ee
Show file tree

Hide file tree

Showing 12 changed files with 0 additions and 174 deletions.
diff --git a/administrator/templates/atum/index.php b/administrator/templates/atum/index.php
@@ -66,19 +66,6 @@
 $this->getWebAssetManager()
 	->addInlineScript('cssVars();', ['position' => 'after'], ['type' => 'module'], ['css-vars-ponyfill']);
 
-// Opacity must be set before displaying the DOM, so don't move to a CSS file
-$css = '
-	.container-main > * {
-		opacity: 0;
-	}
-	.sidebar-wrapper > * {
-		opacity: 0;
-	}
-';
-
-$this->getWebAssetManager()
-	->addInlineStyle($css);
-
 $monochrome = (bool) $this->params->get('monochrome');
 
 HTMLHelper::getServiceRegistry()->register('atum', 'JHtmlAtum');

diff --git a/administrator/templates/atum/login.php b/administrator/templates/atum/login.php
@@ -62,19 +62,6 @@
 $this->getWebAssetManager()
 	->addInlineScript('cssVars();', ['position' => 'after'], ['type' => 'module'], ['css-vars-ponyfill']);
 
-// Opacity must be set before displaying the DOM, so don't move to a CSS file
-$css = '
-	.container-main > * {
-		opacity: 0;
-	}
-	.sidebar-wrapper > * {
-		opacity: 0;
-	}
-';
-
-$this->getWebAssetManager()
-	->addInlineStyle($css);
-
 $monochrome = (bool) $this->params->get('monochrome');
 
 HTMLHelper::getServiceRegistry()->register('atum', 'JHtmlAtum');

diff --git a/administrator/templates/atum/scss/_mixin.scss b/administrator/templates/atum/scss/_mixin.scss
diff --git a/administrator/templates/atum/scss/_variables.scss b/administrator/templates/atum/scss/_variables.scss
@@ -245,9 +245,6 @@ $breadcrumb-bg:                    var(--white);
 $link-color:                       var(--atum-link-color);
 $link-hover-color:                 var(--atum-link-hover-color);
 
-// Time for fade effect
-$fadetime:                         1s;
-
 // Z-Index list
 $zindex-negative:                  -1;
 $zindex-actions:                   auto;

diff --git a/administrator/templates/atum/scss/blocks/_global.scss b/administrator/templates/atum/scss/blocks/_global.scss
@@ -172,24 +172,6 @@ body .container-main {
   text-align: right !important;
 }
 
-// Fadeeffect for login page
-.load-fadein {
-  @include fadein-page;
-}
-
-.load-fadeout {
-  @include fadeout-page;
-}
-
-// Fix blinking of fade effect
-.container-main.fade-done > * {
-  opacity: 1;
-}
-
-.sidebar-wrapper.fade-done > * {
-  opacity: 1;
-}
-
 // dashboard items
 .menu-quicktask,
 .menu-badge {

diff --git a/administrator/templates/atum/scss/blocks/_sidebar.scss b/administrator/templates/atum/scss/blocks/_sidebar.scss
@@ -64,30 +64,18 @@
     &.transit-narrow {
       flex: 1 0 $sidebar-width;
       transition: flex 3s;
-
-      @include media-breakpoint-down(sm) {
-        @include fadeout-page;
-      }
     }
 
     &.transit-narrow-closed {
       flex: 1 0 $sidebar-width-closed;
       transition: flex 3s;
-
-      @include media-breakpoint-down(sm) {
-        @include fadeout-page;
-      }
     }
   }
 
   &.transit-wider {
     flex: 1 0 33%;
     max-width: $sidebar-width-login;
     transition: all 3s;
-
-    @include media-breakpoint-down(sm) {
-      @include fadein-page;
-    }
   }
 
   .sidebar-toggle {
@@ -463,10 +451,6 @@
       flex: 1 0 33%;
       max-width: $sidebar-width-login;
       transition: flex 3s;
-
-      @include media-breakpoint-down(sm) {
-        @include fadein-page;
-      }
     }
   }
 

diff --git a/administrator/templates/atum/scss/template.scss b/administrator/templates/atum/scss/template.scss
@@ -4,9 +4,6 @@
 // Atum Variables
 @import "variables";
 
-// Mixins
-@import "mixin";
-
 // Bootstrap other
 @import "vendor/bootstrap";
 

diff --git a/administrator/templates/atum/scss/vendor/choicesjs/choices.scss b/administrator/templates/atum/scss/vendor/choicesjs/choices.scss
@@ -4,8 +4,6 @@
 @import "../../variables";
 
 // Mixins
-@import "../../mixin";
-
 @import "../../../../../../media/vendor/bootstrap/scss/variables";
 @import "../../../../../../media/vendor/bootstrap/scss/mixins";
 

diff --git a/administrator/templates/atum/scss/vendor/joomla-custom-elements/joomla-alert.scss b/administrator/templates/atum/scss/vendor/joomla-custom-elements/joomla-alert.scss
@@ -4,8 +4,6 @@
 @import "../../variables";
 
 // Mixins
-@import "../../mixin";
-
 @import "../../../../../../media/vendor/bootstrap/scss/variables";
 @import "../../../../../../media/vendor/bootstrap/scss/mixins";
 

diff --git a/administrator/templates/atum/scss/vendor/joomla-custom-elements/joomla-tab.scss b/administrator/templates/atum/scss/vendor/joomla-custom-elements/joomla-tab.scss
@@ -4,8 +4,6 @@
 @import "../../variables";
 
 // Mixins
-@import "../../mixin";
-
 @import "../../../../../../media/vendor/bootstrap/scss/variables";
 @import "../../../../../../media/vendor/bootstrap/scss/mixins";
 

diff --git a/build/media_source/templates/atum/js/template.es6.js b/build/media_source/templates/atum/js/template.es6.js
@@ -38,44 +38,6 @@
     }
   }
 
-  /**
-   * Method that add a fade effect and transition on sidebar and content side
-   * after login and logout
-   *
-   * @since   4.0.0
-   */
-  function fade(fadeAction, transitAction) {
-    const sidebar = doc.querySelector('.sidebar-wrapper');
-    const sidebarChildren = sidebar ? sidebar.children : [];
-    const sideChildrenLength = sidebarChildren.length;
-    const contentMain = doc.querySelector('.container-main');
-    const contentChildren = contentMain ? contentMain.children : [];
-    const contChildrenLength = contentChildren.length;
-
-    for (let i = 0; i < sideChildrenLength; i += 1) {
-      sidebarChildren[i].classList.add(`load-fade${fadeAction}`);
-    }
-    for (let i = 0; i < contChildrenLength; i += 1) {
-      contentChildren[i].classList.add(`load-fade${fadeAction}`);
-    }
-    if (sidebar) {
-      if (transitAction) {
-        // Transition class depends on the width of the sidebar
-        if (storageEnabled
-          && localStorage.getItem('atum-sidebar') === 'closed') {
-          sidebar.classList.add(`transit-${transitAction}-closed`);
-          changeLogo('small');
-        } else {
-          sidebar.classList.add(`transit-${transitAction}`);
-        }
-      }
-      sidebar.classList.toggle('fade-done', fadeAction !== 'out');
-    }
-    if (contentMain) {
-      contentMain.classList.toggle('fade-done', fadeAction !== 'out');
-    }
-  }
-
   /**
    * toggle arrow icon between down and up depending on position of the nav header
    *
@@ -216,29 +178,6 @@
     }
   }
 
-  /**
-   * Trigger fade out on login and logout
-   *
-   * @since   4.0.0
-   */
-  function fadeLoginLogout() {
-    // Fade out login form when login was successful
-    const loginForm = doc.getElementById('form-login');
-    if (loginForm) {
-      loginForm.addEventListener('joomla:login', () => {
-        fade('out', 'narrow');
-      });
-    } else {
-      // Fade out dashboard on logout
-      const logoutBtn = doc.querySelector('.header-items a[href*="task=logout"]');
-      if (logoutBtn) {
-        logoutBtn.addEventListener('click', () => {
-          fade('out', 'wider');
-        });
-      }
-    }
-  }
-
   /**
    * Change appearance for mobile devices
    *
@@ -328,8 +267,6 @@
 
   doc.addEventListener('DOMContentLoaded', () => {
     changeSVGLogoColor();
-    fade('in');
-    fadeLoginLogout();
     headerItemsInDropdown();
     reactToResize();
     subheadScrolling();

diff --git a/installation/template/scss/template.scss b/installation/template/scss/template.scss
@@ -11,7 +11,6 @@ $fa-font-path: "../../../media/vendor/fontawesome-free/webfonts";
 @import "../../../media/vendor/fontawesome-free/scss/brands";
 
 // Backend Template stuff
-@import "../../../administrator/templates/atum/scss/mixin";
 @import "../../../administrator/templates/atum/scss/blocks/global";
 @import "../../../administrator/templates/atum/scss/blocks/header";
 @import "../../../administrator/templates/atum/scss/vendor/bootstrap/custom-forms";