feat(inte): add toggle buttons animation

Mezcalito · May 24, 2024 · 877f4d0 · 877f4d0
1 parent 28924ed
commit 877f4d0
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 8 deletions.
diff --git a/assets/dist/controller.js b/assets/dist/controller.js
@@ -9,8 +9,8 @@ class DisplayController extends Controller {
             card.classList.toggle('display-grid', this.modeValue === 'grid');
         });
         this.listTarget.classList.toggle('c-content__cards--grid', this.modeValue === 'grid');
-        this.listButtonTarget.classList.toggle('c-toggle-buttons__active', this.modeValue === 'list');
-        this.gridButtonTarget.classList.toggle('c-toggle-buttons__active', this.modeValue === 'grid');
+        this.listButtonTarget.classList.toggle('c-toggle-buttons__action--active', this.modeValue === 'list');
+        this.gridButtonTarget.classList.toggle('c-toggle-buttons__action--active', this.modeValue === 'grid');
     }
 }
 DisplayController.values = {

diff --git a/assets/dist/styles.css b/assets/dist/styles.css
@@ -533,7 +533,11 @@ body {
   padding: 1rem;
 }
 
-.c-toggle-buttons__active {
+.c-toggle-buttons__action {
+  transition: background-color var(--transition-in-out);
+}
+
+.c-toggle-buttons__action--active {
   background-color: var(--toggle-button-active-bg);
 }
 

diff --git a/assets/src/controllers/display_controller.ts b/assets/src/controllers/display_controller.ts
@@ -23,7 +23,7 @@ export class DisplayController extends Controller {
             card.classList.toggle('display-grid', this.modeValue === 'grid');
         });
         this.listTarget.classList.toggle('c-content__cards--grid', this.modeValue === 'grid');
-        this.listButtonTarget.classList.toggle('c-toggle-buttons__active', this.modeValue === 'list');
-        this.gridButtonTarget.classList.toggle('c-toggle-buttons__active', this.modeValue === 'grid');
+        this.listButtonTarget.classList.toggle('c-toggle-buttons__action--active', this.modeValue === 'list');
+        this.gridButtonTarget.classList.toggle('c-toggle-buttons__action--active', this.modeValue === 'grid');
     }
 }
diff --git a/assets/src/scss/05_components/_components.toggle-buttons.scss b/assets/src/scss/05_components/_components.toggle-buttons.scss
@@ -8,6 +8,10 @@
   }
 }
 
-.c-toggle-buttons__active {
+.c-toggle-buttons__action {
+  transition: background-color var(--transition-in-out);
+}
+
+.c-toggle-buttons__action--active {
   background-color: var(--toggle-button-active-bg);
 }
diff --git a/templates/components/content.html.twig b/templates/components/content.html.twig
@@ -65,7 +65,7 @@
         </div>
 
         <div class='c-toggle-buttons u-hidden@until-md'>
-            <button class='c-toggle-buttons__active' data-action="mezcalito--ux-filemanager--display#changeMode" data-mezcalito--ux-filemanager--display-mode-param="list" data-mezcalito--ux-filemanager--display-target='listButton'>
+            <button class='c-toggle-buttons__action c-toggle-buttons__action--active' data-action="mezcalito--ux-filemanager--display#changeMode" data-mezcalito--ux-filemanager--display-mode-param="list" data-mezcalito--ux-filemanager--display-target='listButton'>
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
                     <path d="M6 4.79995H13.3333" stroke="#128438" stroke-width="1.336" stroke-linecap="round" stroke-linejoin="round"/>
                     <path d="M6 8.79995H13.3333" stroke="#128438" stroke-width="1.336" stroke-linecap="round" stroke-linejoin="round"/>
@@ -75,7 +75,7 @@
                     <path d="M3.33325 12.8V12.8066" stroke="#128438" stroke-width="1.336" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
             </button>
-            <button data-action="mezcalito--ux-filemanager--display#changeMode" data-mezcalito--ux-filemanager--display-mode-param="grid" data-mezcalito--ux-filemanager--display-target='gridButton'>
+            <button class='c-toggle-buttons__action' data-action="mezcalito--ux-filemanager--display#changeMode" data-mezcalito--ux-filemanager--display-mode-param="grid" data-mezcalito--ux-filemanager--display-target='gridButton'>
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
                     <path d="M2.66675 4.13332C2.66675 3.95651 2.73699 3.78694 2.86201 3.66191C2.98703 3.53689 3.1566 3.46665 3.33341 3.46665H6.00008C6.17689 3.46665 6.34646 3.53689 6.47149 3.66191C6.59651 3.78694 6.66675 3.95651 6.66675 4.13332V6.79999C6.66675 6.9768 6.59651 7.14637 6.47149 7.27139C6.34646 7.39641 6.17689 7.46665 6.00008 7.46665H3.33341C3.1566 7.46665 2.98703 7.39641 2.86201 7.27139C2.73699 7.14637 2.66675 6.9768 2.66675 6.79999V4.13332Z" stroke="#128438" stroke-width="1.336" stroke-linecap="round" stroke-linejoin="round"/>
                     <path d="M9.33325 4.13332C9.33325 3.95651 9.40349 3.78694 9.52851 3.66191C9.65354 3.53689 9.82311 3.46665 9.99992 3.46665H12.6666C12.8434 3.46665 13.013 3.53689 13.138 3.66191C13.263 3.78694 13.3333 3.95651 13.3333 4.13332V6.79999C13.3333 6.9768 13.263 7.14637 13.138 7.27139C13.013 7.39641 12.8434 7.46665 12.6666 7.46665H9.99992C9.82311 7.46665 9.65354 7.39641 9.52851 7.27139C9.40349 7.14637 9.33325 6.9768 9.33325 6.79999V4.13332Z" stroke="#128438" stroke-width="1.336" stroke-linecap="round" stroke-linejoin="round"/>