[feat #56] Create new tag catalog-elements with wave effect

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>

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>

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