From 9b120bb6d5b94f288cd1aeb30b599563ae8aaedc Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Tue, 1 Jan 2019 22:46:23 +0100
Subject: [PATCH 1/5] [feat #56] Update catalog, use material-cards instead of
 list

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

diff --git a/src/style.css b/src/style.css
index 64d9880..ff97e3f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -99,11 +99,12 @@ h2 {
   list-style: none;
 }
 
-.list.highlight > li:hover {
+.list.highlight:hover {
   background-color: #eee;
   cursor: pointer;
 }
 
+.list > span,
 .list > li {
   box-sizing: border-box;
   line-height: 1;
@@ -112,6 +113,7 @@ h2 {
   overflow: hidden;
 }
 
+.list > span i.material-icons,
 .list > li i.material-icons {
   margin-right: 32px;
   height: 24px;
@@ -121,6 +123,7 @@ h2 {
   color: #757575;
 }
 
+.list > span,
 .list > li > span {
   height: 100%;
   text-decoration: none;
@@ -133,6 +136,11 @@ h2 {
   align-items: center;
 }
 
+material-card.list {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
 .material-card-title-action {
   -webkit-align-items: center;
   -ms-flex-align: center;
@@ -345,6 +353,7 @@ select {
   text-align: center;
 }
 
+catalog material-card,
 tag-history material-card {
   min-height: auto;
 }
diff --git a/src/tags/catalog.tag b/src/tags/catalog.tag
index d31e732..4e7a15d 100644
--- a/src/tags/catalog.tag
+++ b/src/tags/catalog.tag
@@ -26,16 +26,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     <div hide="{ registryUI.catalog.loadend }" class="spinner-wrapper">
       <material-spinner></material-spinner>
     </div>
-    <ul class="list highlight" show="{ registryUI.catalog.loadend }">
-      <li each="{ item in registryUI.catalog.repositories }" onclick="registryUI.taglist.go('{item}');">
-        <span>
-          <i class="material-icons">send</i>
-          { item }
-        </span>
-      </li>
-    </ul>
   </material-card>
-
+  <material-card each="{ item in registryUI.catalog.repositories }" class="list highlight" onclick="registryUI.taglist.go('{item}');">
+    <span>
+      <i class="material-icons">send</i>
+      { item }
+    </span>
+  </material-card>
   <script>
     registryUI.catalog.instance = this;
     registryUI.catalog.display = function() {

From ac5a70c9dff82edd3d599c8285d5f83f90194ba5 Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Wed, 2 Jan 2019 20:55:52 +0100
Subject: [PATCH 2/5] [feat #56] Create new tag `catalog-elements` with wave
 effect

---
 src/index.html               |  1 +
 src/tags/catalog-element.tag | 36 ++++++++++++++++++++++++++++++++++++
 src/tags/catalog.tag         |  7 +------
 3 files changed, 38 insertions(+), 6 deletions(-)
 create mode 100644 src/tags/catalog-element.tag

diff --git a/src/index.html b/src/index.html
index 6b78a9d..f44ad0f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -39,6 +39,7 @@
   <!-- endbuild -->
   <!-- build:js scripts/docker-registry-ui.js -->
   <script src="tags/catalog.tag" type="riot/tag"></script>
+  <script src="tags/catalog-element.tag" type="riot/tag"></script>
   <script src="tags/tag-history-button.tag" type="riot/tag"></script>
   <script src="tags/tag-history.tag" type="riot/tag"></script>
   <script src="tags/tag-history-element.tag" type="riot/tag"></script>
diff --git a/src/tags/catalog-element.tag b/src/tags/catalog-element.tag
new file mode 100644
index 0000000..97ef654
--- /dev/null
+++ b/src/tags/catalog-element.tag
@@ -0,0 +1,36 @@
+<!--
+Copyright (C) 2016-2018 Jones Magloire @Joxit
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+<catalog-element>
+  <!-- Begin of tag -->
+  <material-card class="list highlight" onclick="registryUI.taglist.go('{item}');" item="{item}">
+    <material-waves onmousedown="{launch}" center="true" color="#ddd" />
+    <span>
+      <i class="material-icons">send</i>
+      { opts.item }
+    </span>
+  </material-card>
+  <script>
+    this.on('mount', function() {
+      const card = this.tags['material-card'];
+      // Launch waves
+      card.launch = function(e) {
+        card.tags['material-waves'].trigger('launch',e);
+      }
+    })
+  </script>
+  <!-- End of tag -->
+</catalog-element>
diff --git a/src/tags/catalog.tag b/src/tags/catalog.tag
index 4e7a15d..29d9be9 100644
--- a/src/tags/catalog.tag
+++ b/src/tags/catalog.tag
@@ -27,12 +27,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       <material-spinner></material-spinner>
     </div>
   </material-card>
-  <material-card each="{ item in registryUI.catalog.repositories }" class="list highlight" onclick="registryUI.taglist.go('{item}');">
-    <span>
-      <i class="material-icons">send</i>
-      { item }
-    </span>
-  </material-card>
+  <catalog-element each="{ item in registryUI.catalog.repositories }" />
   <script>
     registryUI.catalog.instance = this;
     registryUI.catalog.display = function() {

From 605e8a8d8e3334881b678303bad62804ef43160e Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Thu, 3 Jan 2019 23:33:59 +0100
Subject: [PATCH 3/5] [feat #56] Add level aggregation with animation

---
 src/style.css                | 18 ++++++++++++++++++
 src/tags/catalog-element.tag | 23 +++++++++++++++++++++--
 src/tags/catalog.tag         | 15 ++++++++++++++-
 3 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/src/style.css b/src/style.css
index ff97e3f..13cbb49 100644
--- a/src/style.css
+++ b/src/style.css
@@ -314,6 +314,7 @@ material-popup .popup {
 footer {
   width: 100%;
   position: fixed;
+  z-index: 75;
   bottom: 0;
 }
 
@@ -407,3 +408,20 @@ material-button:hover material-waves {
 material-card material-button {
   background-color: inherit;
 }
+
+catalog-element material-card {
+  z-index: 2;
+  position: relative;
+}
+
+catalog-element catalog-element material-card {
+  transition: all 350ms cubic-bezier(.4,0,.2,1);
+  z-index: 1;
+  position: relative;
+}
+
+catalog-element catalog-element.showing material-card,
+catalog-element catalog-element.hide material-card {
+  margin-top: -50px;
+  opacity: 0;
+}
\ No newline at end of file
diff --git a/src/tags/catalog-element.tag b/src/tags/catalog-element.tag
index 97ef654..acc6507 100644
--- a/src/tags/catalog-element.tag
+++ b/src/tags/catalog-element.tag
@@ -16,20 +16,39 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <catalog-element>
   <!-- Begin of tag -->
-  <material-card class="list highlight" onclick="registryUI.taglist.go('{item}');" item="{item}">
+  <material-card class="list highlight" item="{item}">
     <material-waves onmousedown="{launch}" center="true" color="#ddd" />
     <span>
       <i class="material-icons">send</i>
-      { opts.item }
+      { typeof opts.item === "string" ? opts.item : opts.item.repo }
     </span>
   </material-card>
+  <catalog-element hide="{typeof opts.item === "string"}" class="{hide: !show, showing: showing}" each="{item in item.images}" />
   <script>
     this.on('mount', function() {
+      const self = this;
       const card = this.tags['material-card'];
+      if (!card) {
+        return;
+      }
       // Launch waves
       card.launch = function(e) {
         card.tags['material-waves'].trigger('launch',e);
       }
+      if (this.item.images && this.item.images.length === 1) {
+        this.item = this.item.images[0];
+      }
+      card.root.onclick = function(e) {
+        if (!self.item.repo) {
+          registryUI.taglist.go(self.item);
+        } else {
+          self.show = !self.show;
+          self.update({show: self.show, showing: true});
+          setTimeout(function() {
+            self.update({show: self.show, showing: false});
+          }, 50)
+        }
+      }
     })
   </script>
   <!-- End of tag -->
diff --git a/src/tags/catalog.tag b/src/tags/catalog.tag
index 29d9be9..51538a9 100644
--- a/src/tags/catalog.tag
+++ b/src/tags/catalog.tag
@@ -20,7 +20,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     <div class="material-card-title-action">
       <h2>
         Repositories of { registryUI.name() }
-        <div class="item-count">{ registryUI.catalog.repositories.length } images</div>
+        <div class="item-count">{ registryUI.catalog.length } images</div>
       </h2>
     </div>
     <div hide="{ registryUI.catalog.loadend }" class="spinner-wrapper">
@@ -38,6 +38,19 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         if (this.status == 200) {
           registryUI.catalog.repositories = JSON.parse(this.responseText).repositories || [];
           registryUI.catalog.repositories.sort();
+          registryUI.catalog.length = registryUI.catalog.repositories.length;         registryUI.catalog.repositories = registryUI.catalog.repositories.reduce(function(acc, e) {
+            const slash = e.indexOf('/');
+            if (slash > 0) {
+              const repoName = e.substring(0, slash) + '/';
+              if (acc.length == 0 || acc[acc.length - 1].repo != repoName) {
+                acc.push({repo: repoName, images: []});
+              }
+              acc[acc.length - 1].images.push(e);
+              return acc;
+            }
+            acc.push(e);
+            return acc;
+          }, []);
         } else if (this.status == 404) {
           registryUI.snackbar('Server not found', true);
         } else {

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 4/5] [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)
         }
       }

From a36809408c48f27237ff785292a06c9b03b93863 Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Mon, 7 Jan 2019 07:41:08 +0100
Subject: [PATCH 5/5] [feat #56] Add image count for aggregated images

---
 src/style.css                | 15 +++++++++++++--
 src/tags/catalog-element.tag |  5 ++++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/style.css b/src/style.css
index 7c31d9c..a2038a1 100644
--- a/src/style.css
+++ b/src/style.css
@@ -123,16 +123,27 @@ h2 {
   color: #757575;
 }
 
-.list > span i.material-icons.right.animated {
+.list > span .right i.material-icons.animated {
   transition: all 350ms cubic-bezier(.4,0,.2,1);
   margin-right: 10px;
+}
+
+.list > span .right {
   position: absolute;
+  align-self: end;
+  display: flex;
+  align-items: center;
   right: 0;
 }
-.list > span i.material-icons.right.animated.expanded {
+
+.list > span i.material-icons.animated.expanded {
   transform: rotate(180deg);
 }
 
+.list > span .item-count {
+  font-size: 0.75em;
+}
+
 .list > span,
 .list > li > span {
   height: 100%;
diff --git a/src/tags/catalog-element.tag b/src/tags/catalog-element.tag
index 9385c4b..89f74df 100644
--- a/src/tags/catalog-element.tag
+++ b/src/tags/catalog-element.tag
@@ -21,7 +21,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     <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>
+      <div hide="{typeof opts.item === "string"}" class="item-count right">
+        { opts.item.images && opts.item.images.length } images
+        <i class="material-icons animated {expanded: opts.expanded}">expand_more</i>
+      </div>
     </span>
   </material-card>
   <catalog-element hide="{typeof opts.item === "string"}" class="animated {hide: !expanded, expanding: expanding}" each="{item in item.images}" />