From 7e2e4b60100b3377865fb9c9abcb7676d2f9f44b Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Fri, 4 Jan 2019 22:02:22 +0100
Subject: [PATCH] [feat #56] Add `expand_more` icon for aggregated images

---
 src/style.css                | 10 ++++++++++
 src/tags/catalog-element.tag | 11 ++++++-----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/style.css b/src/style.css
index 13cbb49..7c31d9c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -123,6 +123,16 @@ h2 {
   color: #757575;
 }
 
+.list > span i.material-icons.right.animated {
+  transition: all 350ms cubic-bezier(.4,0,.2,1);
+  margin-right: 10px;
+  position: absolute;
+  right: 0;
+}
+.list > span i.material-icons.right.animated.expanded {
+  transform: rotate(180deg);
+}
+
 .list > span,
 .list > li > span {
   height: 100%;
diff --git a/src/tags/catalog-element.tag b/src/tags/catalog-element.tag
index acc6507..9385c4b 100644
--- a/src/tags/catalog-element.tag
+++ b/src/tags/catalog-element.tag
@@ -16,14 +16,15 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <catalog-element>
   <!-- Begin of tag -->
-  <material-card class="list highlight" item="{item}">
+  <material-card class="list highlight" item="{item}" expanded="{expanded}">
     <material-waves onmousedown="{launch}" center="true" color="#ddd" />
     <span>
       <i class="material-icons">send</i>
       { typeof opts.item === "string" ? opts.item : opts.item.repo }
+      <i hide="{typeof opts.item === "string"}" class="material-icons right animated {expanded: opts.expanded}">expand_more</i>
     </span>
   </material-card>
-  <catalog-element hide="{typeof opts.item === "string"}" class="{hide: !show, showing: showing}" each="{item in item.images}" />
+  <catalog-element hide="{typeof opts.item === "string"}" class="animated {hide: !expanded, expanding: expanding}" each="{item in item.images}" />
   <script>
     this.on('mount', function() {
       const self = this;
@@ -42,10 +43,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         if (!self.item.repo) {
           registryUI.taglist.go(self.item);
         } else {
-          self.show = !self.show;
-          self.update({show: self.show, showing: true});
+          self.expanded = !self.expanded;
+          self.update({expanded: self.expanded, expanding: true});
           setTimeout(function() {
-            self.update({show: self.show, showing: false});
+            self.update({expanded: self.expanded, expanding: false});
           }, 50)
         }
       }