From d0b7e7ddeb90b76ae11617f734933f68ac0599dc Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Mon, 24 Dec 2018 19:07:29 +0100
Subject: [PATCH] =?UTF-8?q?[material-button]=C2=A0Add=20material-button=20?=
 =?UTF-8?q?for=20all=20effective=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/material-icons.css          | 11 ++++-
 src/style.css                   | 31 ++++++++----
 src/tags/app.tag                |  5 ++
 src/tags/catalog.tag            |  5 +-
 src/tags/copy-to-clipboard.tag  |  4 +-
 src/tags/remove-image.tag       | 84 +++++++++++++++++----------------
 src/tags/tag-history-button.tag |  6 +--
 src/tags/tag-history.tag        | 10 +++-
 src/tags/taglist.tag            |  7 +--
 9 files changed, 96 insertions(+), 67 deletions(-)

diff --git a/src/material-icons.css b/src/material-icons.css
index ae2b2dd..fff516d 100644
--- a/src/material-icons.css
+++ b/src/material-icons.css
@@ -11,7 +11,9 @@
        url(fonts/MaterialIcons-Regular.ttf) format('truetype');
 }
 
-.material-icons {
+material-button .content i.material-icons,
+material-button[rounded=true] .content i.material-icons,
+i.material-icons {
   font-family: 'Material Icons';
   font-weight: normal;
   font-style: normal;
@@ -36,4 +38,9 @@
 
   /* Support for IE. */
   font-feature-settings: 'liga';
-}
\ No newline at end of file
+}
+
+material-button .content i.material-icons,
+material-button[rounded=true] .content i.material-icons {
+  margin: auto;
+}
diff --git a/src/style.css b/src/style.css
index d3f1951..66e3161 100644
--- a/src/style.css
+++ b/src/style.css
@@ -175,16 +175,21 @@ material-card table th {
   text-align: left;
 }
 
+material-card material-button:hover,
 material-card table tbody tr:hover {
   background-color: #eee;
 }
 
+material-card material-button,
+material-card table tbody tr {
+  transition-duration: .28s;
+  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+  transition-property: background-color;
+}
+
 material-card table tbody tr {
   position: relative;
   height: 48px;
-  transition-duration: .28s;
-  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-  transition-property: background-color;
 }
 
 material-card table td {
@@ -223,6 +228,7 @@ material-card table th.material-card-th-sorted-descending:before {
   content: "\e5db";
 }
 
+material-button .content i.material-icons,
 .material-icons {
   color: #777;
 }
@@ -339,10 +345,6 @@ select {
   text-align: center;
 }
 
-.copy-to-clipboard a:hover {
-  cursor: pointer;
-}
-
 tag-history material-card {
   min-height: auto;
 }
@@ -382,4 +384,17 @@ tag-history-element.id div.value {
 tag-history-button button {
   background: none;
   border: none;
-}
\ No newline at end of file
+}
+
+material-button {
+  max-height: 30px;
+  max-width: 30px;
+}
+
+material-button:hover material-waves {
+  background: none;
+}
+
+material-card material-button {
+  background-color: inherit;
+}
diff --git a/src/tags/app.tag b/src/tags/app.tag
index 957b3b6..bd5ef4e 100644
--- a/src/tags/app.tag
+++ b/src/tags/app.tag
@@ -231,6 +231,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
       return Math.ceil(bytes / Math.pow(1024, i)) + ' ' + sizes[i];
     };
+
+    registryUI.taglist.go = function(image) {
+      route('taglist/' + image);
+    };
+
     route.start(true);
   </script>
 </app>
\ No newline at end of file
diff --git a/src/tags/catalog.tag b/src/tags/catalog.tag
index c1a1bc4..d31e732 100644
--- a/src/tags/catalog.tag
+++ b/src/tags/catalog.tag
@@ -27,7 +27,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       <material-spinner></material-spinner>
     </div>
     <ul class="list highlight" show="{ registryUI.catalog.loadend }">
-      <li each="{ item in registryUI.catalog.repositories }" onclick="registryUI.catalog.go('{item}');">
+      <li each="{ item in registryUI.catalog.repositories }" onclick="registryUI.taglist.go('{item}');">
         <span>
           <i class="material-icons">send</i>
           { item }
@@ -63,9 +63,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       oReq.open('GET', registryUI.url() + '/v2/_catalog?n=100000');
       oReq.send();
     };
-    registryUI.catalog.go = function(image) {
-      route('taglist/' + image);
-    };
     registryUI.catalog.display();
   </script>
   <!-- End of tag -->
diff --git a/src/tags/copy-to-clipboard.tag b/src/tags/copy-to-clipboard.tag
index f12f7cc..65ab2c4 100644
--- a/src/tags/copy-to-clipboard.tag
+++ b/src/tags/copy-to-clipboard.tag
@@ -16,9 +16,9 @@
 -->
 <copy-to-clipboard>
   <input ref="input" style="display: none; width: 1px; height: 1px;" value="{ this.dockerCmd }">
-  <a onclick="{ this.copy }" title="Copy pull command.">
+  <material-button waves-center="true" rounded="true" waves-color="#ddd" onclick="{ this.copy }" title="Copy pull command.">
     <i class="material-icons">content_copy</i>
-  </a>
+  </material-button>
   <script type="text/javascript">
     this.dockerCmd = 'docker pull ' + registryUI.cleanName() + '/' + opts.image.name + ':' + opts.image.tag;
     this.copy = function () {
diff --git a/src/tags/remove-image.tag b/src/tags/remove-image.tag
index 25456af..3ea4565 100644
--- a/src/tags/remove-image.tag
+++ b/src/tags/remove-image.tag
@@ -15,49 +15,51 @@ 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/>.
 -->
 <remove-image>
-  <a href="#" title="This will delete the image."
-     onclick="registryUI.removeImage.remove('{ opts.image.name }', '{ opts.image.tag }')">
+  <material-button waves-center="true" rounded="true" waves-color="#ddd" title="This will delete the image.">
     <i class="material-icons">delete</i>
-  </a>
+  </material-button>
   <script type="text/javascript">
-    registryUI.removeImage = registryUI.removeImage || {};
-
-    registryUI.removeImage.remove = function(name, tag) {
-      const oReq = new Http();
-      oReq.addEventListener('loadend', function() {
-        registryUI.taglist.refresh();
-        if (this.status == 200) {
-          if (!this.hasHeader('Docker-Content-Digest')) {
-            registryUI.errorSnackbar('You need to add Access-Control-Expose-Headers: [\'Docker-Content-Digest\'] in your server configuration.');
-            return;
-          }
-          const digest = this.getResponseHeader('Docker-Content-Digest');
-          const oReq = new Http();
-          oReq.addEventListener('loadend', function() {
-            if (this.status == 200 || this.status == 202) {
-              registryUI.taglist.refresh();
-              registryUI.snackbar('Deleting ' + name + ':' + tag + ' image. Run `registry garbage-collect config.yml` on your registry');
-            } else if (this.status == 404) {
-              registryUI.errorSnackbar('Digest not found');
-            } else {
-              registryUI.snackbar(this.responseText);
+    const self = this;
+    this.on('mount', function() {
+      this.tags['material-button'].root.onclick = function() {
+        const name = self.opts.image.name;
+        const tag = self.opts.image.tag;
+        const oReq = new Http();
+        oReq.addEventListener('loadend', function() {
+          registryUI.taglist.go(name);
+          if (this.status == 200) {
+            if (!this.hasHeader('Docker-Content-Digest')) {
+              registryUI.errorSnackbar('You need to add Access-Control-Expose-Headers: [\'Docker-Content-Digest\'] in your server configuration.');
+              return;
             }
-          });
-          oReq.open('DELETE', registryUI.url() + '/v2/' + name + '/manifests/' + digest);
-          oReq.setRequestHeader('Accept', 'application/vnd.docker.distribution.manifest.v2+json');
-          oReq.addEventListener('error', function() {
-            registryUI.errorSnackbar('An error occurred when deleting image. Check if your server accept DELETE methods Access-Control-Allow-Methods: [\'DELETE\'].');
-          });
-          oReq.send();
-        } else if (this.status == 404) {
-          registryUI.errorSnackbar('Manifest for ' + name + ':' + tag + ' not found');
-        } else {
-          registryUI.snackbar(this.responseText);
-        }
-      });
-      oReq.open('HEAD', registryUI.url() + '/v2/' + name + '/manifests/' + tag);
-      oReq.setRequestHeader('Accept', 'application/vnd.docker.distribution.manifest.v2+json');
-      oReq.send();
-    };
+            const digest = this.getResponseHeader('Docker-Content-Digest');
+            const oReq = new Http();
+            oReq.addEventListener('loadend', function() {
+              if (this.status == 200 || this.status == 202) {
+                registryUI.taglist.display()
+                registryUI.snackbar('Deleting ' + name + ':' + tag + ' image. Run `registry garbage-collect config.yml` on your registry');
+              } else if (this.status == 404) {
+                registryUI.errorSnackbar('Digest not found');
+              } else {
+                registryUI.snackbar(this.responseText);
+              }
+            });
+            oReq.open('DELETE', registryUI.url() + '/v2/' + name + '/manifests/' + digest);
+            oReq.setRequestHeader('Accept', 'application/vnd.docker.distribution.manifest.v2+json');
+            oReq.addEventListener('error', function() {
+              registryUI.errorSnackbar('An error occurred when deleting image. Check if your server accept DELETE methods Access-Control-Allow-Methods: [\'DELETE\'].');
+            });
+            oReq.send();
+          } else if (this.status == 404) {
+            registryUI.errorSnackbar('Manifest for ' + name + ':' + tag + ' not found');
+          } else {
+            registryUI.snackbar(this.responseText);
+          }
+        });
+        oReq.open('HEAD', registryUI.url() + '/v2/' + name + '/manifests/' + tag);
+        oReq.setRequestHeader('Accept', 'application/vnd.docker.distribution.manifest.v2+json');
+        oReq.send();
+      };
+    });
   </script>
 </remove-image>
diff --git a/src/tags/tag-history-button.tag b/src/tags/tag-history-button.tag
index 08ffab6..b0476b8 100644
--- a/src/tags/tag-history-button.tag
+++ b/src/tags/tag-history-button.tag
@@ -15,13 +15,13 @@ 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/>.
 -->
 <tag-history-button>
-  <button ref="button" title="This will show the history of given tag">
+  <material-button ref="button" title="This will show the history of given tag" waves-center="true" rounded="true" waves-color="#ddd">
     <i class="material-icons">history</i>
-  </button>
+  </material-button>
   <script>
   this.on('mount', function() {
     const self = this;
-    this.refs.button.onclick = function() {
+    this.refs.button.root.onclick = function() {
       registryUI.taghistory._image = self.opts.image;
       registryUI.taghistory.go(self.opts.image.name, self.opts.image.tag);
     };
diff --git a/src/tags/tag-history.tag b/src/tags/tag-history.tag
index ccdc60e..78eed6d 100644
--- a/src/tags/tag-history.tag
+++ b/src/tags/tag-history.tag
@@ -17,9 +17,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 <tag-history>
   <material-card ref="tag-history-tag" class="tag-history">
     <div class="material-card-title-action">
-      <a href="#!taglist/{registryUI.taghistory.image}">
+      <material-button waves-center="true" rounded="true" waves-color="#ddd">
         <i class="material-icons">arrow_back</i>
-      </a>
+      </material-button>
       <h2>
         History of { registryUI.taghistory.image }:{ registryUI.taghistory.tag } <i class="material-icons">history</i>
       </h2>
@@ -125,6 +125,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       image.on('blobs', processBlobs);
     };
 
+    this.on('mount', function() {
+      self.refs['tag-history-tag'].tags['material-button'].root.onclick = function() {
+        registryUI.taglist.go(registryUI.taghistory.image);
+      };
+    });
+
     registryUI.taghistory.display();
     self.update();
   </script>
diff --git a/src/tags/taglist.tag b/src/tags/taglist.tag
index b1d1e1f..be47e94 100644
--- a/src/tags/taglist.tag
+++ b/src/tags/taglist.tag
@@ -18,9 +18,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   <!-- Begin of tag -->
   <material-card ref="taglist-tag" class="taglist">
     <div class="material-card-title-action">
-      <a href="#!" onclick="registryUI.home();">
+      <material-button waves-center="true" rounded="true" waves-color="#ddd" onclick="registryUI.home();">
         <i class="material-icons">arrow_back</i>
-      </a>
+      </material-button>
       <h2>
         Tags of { registryUI.name() + '/' + registryUI.taglist.name }
         <div class="item-count">{ registryUI.taglist.tags.length } tags</div>
@@ -116,9 +116,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       }
       registryUI.taglist.instance.update();
     };
-    registryUI.taglist.refresh = function() {
-      route(registryUI.taglist.name);
-    };
   </script>
   <!-- End of tag -->
 </taglist>
\ No newline at end of file