Fixes laggy popup animation. Fixes missing feedback when deleting tag.

Also adds close buttons missing on some popups.
kalvn · Nov 22, 2018 · 5e8dcd0 · 5e8dcd0
1 parent 94f900a
commit 5e8dcd0
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 6 deletions.
diff --git a/material/build/scripts.min.js b/material/build/scripts.min.js
diff --git a/material/build/styles.min.css b/material/build/styles.min.css
diff --git a/material/page.header.html b/material/page.header.html
@@ -31,6 +31,7 @@
                                 <i class="mdi mdi-dots-vertical"></i>
                             </button>
                             <div id="popup-plugin" class="popup popup-plugin hidden">
+                                <div class="popup-title">Plugins<button class="popup-close"><i class="mdi mdi-close"></i></button></div>
                                 <div class="popup-body">
                                     {loop="$plugins_header.buttons_toolbar"}
                                     <ul>
@@ -82,7 +83,7 @@
                             <i class="mdi mdi-rss"></i>
                         </button>
                         <div id="popup-rss" class="popup popup-rss hidden">
-                            <div class="popup-title">{'RSS Feed'|t}</div>
+                            <div class="popup-title">{'RSS Feed'|t}<button class="popup-close"><i class="mdi mdi-close"></i></button></div>
                             <div class="popup-body">
                                 <ul>
                                     <li><a href="{$feedurl}?do=rss{$searchcrits}" class="ripple">{'RSS Feed'|t}</a></li>

diff --git a/material/scss/components/_animations.scss b/material/scss/components/_animations.scss
@@ -87,4 +87,18 @@
         opacity: 1;
         transform: translateY(0);
     }
+}
+.animate-compress-height-50 {
+    animation: compress-height-50 $animation-speed-long ease forwards;
+    overflow: hidden;
+}
+@keyframes compress-height-50 {
+    0% {
+        opacity: 1;
+        max-height: 50px;
+    }
+    100%{
+        opacity: 0;
+        max-height: 0;
+    }
 }
diff --git a/material/scss/components/_form.scss b/material/scss/components/_form.scss
@@ -215,7 +215,10 @@ label.active{
 [type="checkbox"]:not(:checked),
 [type="checkbox"]:checked {
     position: absolute;
-    left: -9999px;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    cursor: pointer;
 }
 
 

diff --git a/material/scss/components/_values.scss b/material/scss/components/_values.scss
@@ -109,3 +109,4 @@ $radius-s: 2px;
 
 // Animations speed.
 $animation-speed: .25s;
+$animation-speed-long: 1s;
diff --git a/material/src/main.js b/material/src/main.js
@@ -221,7 +221,10 @@
                             token: token
                         },
                         success: function(){
-                            el.closest('.list-item').remove();
+                            var $toBeRemoved = el.closest('.list-item-flex');
+                            animations.compressHeight($toBeRemoved, null, function () {
+                                $toBeRemoved.remove();
+                            });
                         },
                         error: function(){
                             displayModal('Error', 'Oops! something went wrong...', 'alert');
@@ -688,6 +691,16 @@
             }
 
             this.animation('show-slide-from-bottom', element, realCallbackBegin, callbackEnd);
+        },
+        compressHeight: function (element, callbackBegin, callbackEnd) {
+            var realCallbackEnd = function(){
+                element.addClass('hidden');
+                if(typeof callbackEnd === 'function'){
+                    callbackEnd();
+                }
+            }
+
+            this.animation('compress-height-50', element, callbackBegin, realCallbackEnd);
         }
     };
Original file line number	Diff line number	Diff line change
Expand Up		@@ -109,3 +109,4 @@ $radius-s: 2px;

		// Animations speed.
		$animation-speed: .25s;
		$animation-speed-long: 1s;