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] [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() {