[riot-mui] Add riot-mui in taglist (#17)

src/style.css

@@ -46,7 +46,8 @@ html > body {
   word-break: break-all;
 }
 
-.mdl-logo a {
+.mdl-logo a,
+.material-card-title-action a {
   color: inherit;
   text-decoration: none;
   font-weight: inherit;
@@ -122,3 +123,92 @@ h2 {
   -ms-flex-align: center;
   align-items: center;
 }
+
+.material-card-title-action {
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: block;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 16px;
+}
+
+.material-card-title-action h2 {
+  margin: 0;
+}
+
+material-card table {
+  width: 100%;
+  border: none;
+  position: relative;
+  border: 1px solid rgba(0,0,0,.12);
+  border-collapse: collapse;
+  white-space: nowrap;
+  font-size: 13px;
+  background-color: #fff;
+  border: none;
+}
+
+material-card table th {
+  font-size: 18px;
+  vertical-align: bottom;
+  line-height: 24px;
+  height: 48px;
+  color: rgba(0,0,0,.54);
+  box-sizing: border-box;
+  padding: 0 18px 12px 18px;
+  text-align: right;
+}
+
+.material-card-th-left {
+  text-align: left;
+}
+
+material-card table tbody tr:hover {
+  background-color: #eee;
+}
+
+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 {
+  font-size: 16px;
+  position: relative;
+  height: 48px;
+  border-top: 1px solid rgba(0,0,0,.12);
+  border-bottom: 1px solid rgba(0,0,0,.12);
+  padding: 12px 18px;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: right;
+}
+material-card table th.material-card-th-sorted-ascending:hover,
+material-card table th.material-card-th-sorted-descending:hover {
+  cursor: pointer;
+}
+material-card table th.material-card-th-sorted-ascending:hover:before,
+material-card table th.material-card-th-sorted-descending:hover:before {
+  color: rgba(0,0,0,.26);
+}
+
+material-card table th.material-card-th-sorted-ascending:before,
+material-card table th.material-card-th-sorted-descending:before {
+  font-family: 'Material Icons';
+  font-weight: 400;
+  font-style: normal;
+  line-height: 1;
+  font-size: 16px;
+  content: "\e5d8";
+  margin-right: 5px;
+  vertical-align: sub;
+}
+material-card table th.material-card-th-sorted-descending:before {
+  content: "\e5db";
+}

src/tags/taglist.tag

@@ -16,40 +16,35 @@
 -->
 <taglist>
   <!-- Begin of tag -->
-  <div ref="taglist-tag" class="taglist">
+  <material-card ref="taglist-tag" class="taglist">
-    <div class="section-centerd mdl-card mdl-shadow--2dp mdl-cell--6-col">
+    <div class="material-card-title-action">
-      <div class="mdl-card__title">
       <a href="#" onclick="registryUI.taglist.back();">
-          <i class="material-icons mdl-list__item-icon">arrow_back</i>
+        <i class="material-icons">arrow_back</i>
       </a>
-        <h2 class="mdl-card__title-text">Tags of { registryUI.url() + '/' + registryUI.taglist.name }</h2>
+      <h2>Tags of { registryUI.url() + '/' + registryUI.taglist.name }</h2>
     </div>
-      <div ref="taglist-spinner" hide="{ registryUI.taglist.loadend }" class="mdl-spinner mdl-js-spinner section-centerd is-active"></div>
+    <div hide="{ registryUI.taglist.loadend }" class="spinner-wrapper">
-      <table class="mdl-data-table mdl-js-data-table full-table" show="{ registryUI.taglist.loadend }" style="border: none;">
+      <material-spinner></material-spinner>
+    </div>
+    <table show="{ registryUI.taglist.loadend }" style="border: none;">
       <thead>
         <tr>
-            <th class="mdl-data-table__cell--non-numeric">Repository</th>
+          <th class="material-card-th-left">Repository</th>
-            <th class="{ registryUI.taglist.asc ? 'mdl-data-table__header--sorted-ascending' : 'mdl-data-table__header--sorted-descending' }" onclick="registryUI.taglist.reverse();">Tag</th>
+          <th class="{ registryUI.taglist.asc ? 'material-card-th-sorted-ascending' : 'material-card-th-sorted-descending' }" onclick="registryUI.taglist.reverse();">Tag</th>
-            <th show="{ registryUI.isImageRemoveActivated }" ></th>
+          <th show="{ registryUI.isImageRemoveActivated }"></th>
         </tr>
       </thead>
       <tbody>
         <tr each="{ item in registryUI.taglist.tags }">
-            <td class="mdl-data-table__cell--non-numeric">{ registryUI.taglist.name }</td>
+          <td class="material-card-th-left">{ registryUI.taglist.name }</td>
           <td>{ item }</td>
-            <td show="{ registryUI.isImageRemoveActivated }" >
+          <td show="{ registryUI.isImageRemoveActivated }">
-              <remove-image name={ registryUI.taglist.name } tag={ item } />
+            <remove-image name={ registryUI.taglist.name } tag={ item }/>
           </td>
         </tr>
       </tbody>
     </table>
-    </div>
+  </material-card>
-    <div ref="error-snackbar" aria-live="assertive" aria-atomic="true" aria-relevant="text" class="mdl-js-snackbar mdl-snackbar">
-      <div class="mdl-snackbar__text"></div>
-      <button class="mdl-snackbar__action" type="button"></button>
-    </div>
-  </div>
-
   <script>
     registryUI.taglist.instance = this;
     registryUI.taglist.display = function () {
@@ -60,31 +55,18 @@
         var oReq = new Http();
         registryUI.taglist.name = name;
         registryUI.taglist.instance.update();
-        registryUI.taglist.createSnackbar = function (msg) {
-          var snackbar = registryUI.taglist.instance['error-snackbar'];
-          registryUI.taglist.error = msg;
-          var data = {
-            message: registryUI.taglist.error,
-            timeout: 100000,
-            actionHandler: function () {
-              snackbar.classList.remove('mdl-snackbar--active');
-            },
-            actionText: 'Undo'
-          };
-          snackbar.MaterialSnackbar.showSnackbar(data);
-        };
         oReq.addEventListener('load', function () {
           if (this.status == 200) {
             registryUI.taglist.tags = JSON.parse(this.responseText).tags || [];
             registryUI.taglist.tags.sort();
           } else if (this.status == 404) {
-            registryUI.taglist.createSnackbar('Server not found');
+            registryUI.snackbar('Server not found', true);
           } else {
-            registryUI.taglist.createSnackbar(this.responseText);
+            registryUI.snackbar(this.responseText, true);
           }
         });
         oReq.addEventListener('error', function () {
-          registryUI.taglist.createSnackbar('An error occured');
+          registryUI.snackbar('An error occured', true);
         });
         oReq.addEventListener('loadend', function () {
           registryUI.taglist.loadend = true;
@@ -97,9 +79,6 @@
     };
     registryUI.taglist.display();
     registryUI.taglist.instance.update();
-    this.on('updated', function () {
-      componentHandler.upgradeElements(this.refs['taglist-tag']);
-    });
 
     registryUI.taglist.reverse = function () {
       if (registryUI.taglist.asc) {