feat(riot-v5): add dialogs menu needs material-dropdown-list update

src/components/dialogs/dialogs-menu.riot

@@ -0,0 +1,90 @@
+<!--
+ Copyright (C) 2016-2021 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/>.
+-->
+<dialogs-menu>
+  <material-button onClick="{ onClick }" waves-center="true" rounded="true" waves-opacity="0.6" waves-duration="600">
+    <i class="material-icons">more_vert</i>
+  </material-button>
+  <material-dropdown-list items="{ dropdownItems }" onSelect="{ onDropdownSelect }"
+    opened="{ state.isDropdownOpened }" />
+  <div class="overlay" onclick="{ onClick }" if="{ state.isDropdownOpened }"></div>
+  <script>
+    export default {
+      dropdownItems: [{
+        title: 'Add URL',
+        name: 'add-registry-url'
+      }, {
+        title: 'Change URL',
+        name: 'change-registry-url'
+      }, {
+        title: 'Remove URL',
+        name: 'remove-registry-url'
+      }],
+      onDropdownSelect(key, item) {},
+      onClick() {
+        this.update({
+          isDropdownOpened: !this.state.isDropdownOpened
+        })
+      }
+    }
+  </script>
+  <style>
+    :host {
+      position: absolute;
+      top: 0px;
+      right: 16px;
+      color: #000;
+      list-style-type: disc;
+      margin-block-start: 0.7em;
+    }
+
+    :host .overlay {
+      position: fixed;
+      height: 100%;
+      width: 100%;
+      top: 0;
+      right: 0;
+      z-index: 1;
+    }
+
+    :host material-button {
+      background: rgba(255, 255, 255, 0);
+      float: right;
+      z-index: 2;
+    }
+
+    :host material-button .content i.material-icons {
+      color: #fff;
+      font-size: 24px;
+    }
+
+    :host material-dropdown-list {
+      display: inline-block;
+      position: relative;
+    }
+
+    :host material-dropdown-list ul.dropdown-content {
+      min-width: 156px;
+      padding: 8px 0;
+      margin: 0;
+    }
+
+    :host material-dropdown-list ul.dropdown-content li span {
+      font-size: 1rem;
+      line-height: 1.2em;
+    }
+  </style>
+</dialogs-menu>

src/components/docker-registry-ui.riot

@@ -18,6 +18,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   <header>
     <material-navbar>
       <div class="logo">Docker Registry UI</div>
+      <dialogs-menu></dialogs-menu>
     </material-navbar>
   </header>
   <main>
@@ -63,6 +64,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     import Catalog from './catalog/catalog.riot';
     import TagList from './tag-list/tag-list.riot';
     import TagHistory from './tag-history/tag-history.riot';
+    import DialogsMenu from './dialogs/dialogs-menu.riot';
     import {
       stripHttps
     } from '../scripts/utils';
@@ -73,6 +75,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         Catalog,
         TagList,
         TagHistory,
+        DialogsMenu,
         Router,
         Route
       },

src/index.js

@@ -8,6 +8,7 @@ import {
   MaterialCheckbox,
   MaterialTabs,
   MaterialSnackbar,
+  MaterialDropdownList
 } from 'riot-mui';
 
 import DockerRegistryUI from './components/docker-registry-ui.riot';
@@ -22,6 +23,7 @@ register('material-button', MaterialButton);
 register('material-checkbox', MaterialCheckbox);
 register('material-snackbar', MaterialSnackbar);
 register('material-tabs', MaterialTabs);
+register('material-dropdown-list', MaterialDropdownList);
 
 const createApp = component(DockerRegistryUI);
 const tags = document.getElementsByTagName('docker-registry-ui');

src/style.scss

@@ -22,6 +22,7 @@
 @import 'riot-mui/src/material-elements/material-checkbox/material-checkbox.scss';
 @import 'riot-mui/src/material-elements/material-tabs/material-tabs.scss';
 @import 'riot-mui/src/material-elements/material-snackbar/material-snackbar.scss';
+@import 'riot-mui/src/material-elements/material-dropdown-list/material-dropdown-list.scss';
 
 @import './roboto.scss';
 @import './material-icons.scss';
@@ -117,6 +118,10 @@ material-navbar {
   height: 64px;
 }
 
+material-navbar nav-wrapper {
+  display: flex;
+}
+
 .logo {
   padding: 0 16px 0 72px;
   text-decoration: none;
@@ -321,59 +326,6 @@ material-snackbar .toast {
   height: auto;
 }
 
-menu {
-  position: absolute;
-  top: 0px;
-  right: 16px;
-  color: #000;
-}
-
-menu .overlay {
-  position: fixed;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  right: 0;
-  z-index: 1;
-}
-
-#menu-control-button {
-  background: rgba(255, 255, 255, 0);
-  float: right;
-}
-
-#menu-control-button i {
-  color: #fff;
-  font-size: 24px;
-}
-
-#menu-control-dropdown {
-  display: inline-block;
-  position: relative;
-}
-
-.dropdown {
-  min-width: 124px;
-  padding: 8px 0;
-  margin: 0;
-}
-
-dropdown-item, #menu-control-dropdown p {
-  padding: 0 16px;
-  margin: auto;
-  line-height: 48px;
-  height: 48px;
-  cursor: pointer;
-}
-
-#menu-control-dropdown p:hover {
-  background-color: #eee;
-}
-
-#menu-control-dropdown p:active, .material-button-active:active {
-  background-color: #e0e0e0;
-}
-
 material-popup material-button,
 pagination material-button {
   background-color: #fff;

src/tags/dialogs/menu.riot

@@ -1,45 +0,0 @@
-<!--
- Copyright (C) 2016-2019 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/>.
--->
-<menu>
-  <material-button id="menu-control-button" onclick="registryUI.menuTag.toggle();" waves-center="true" rounded="true" waves-opacity="0.6" waves-duration="600">
-    <i class="material-icons">more_vert</i>
-  </material-button>
-  <material-dropdown id="menu-control-dropdown">
-    <p onclick="registryUI.addTag.show(); registryUI.menuTag.close();">Add URL</p>
-    <p onclick="registryUI.changeTag.show(); registryUI.menuTag.close();">Change URL</p>
-    <p onclick="registryUI.removeTag.show(); registryUI.menuTag.close();">Remove URL</p>
-  </material-dropdown>
-  <div class="overlay" onclick="registryUI.menuTag.close();" show="{ registryUI.menuTag.isOpen && registryUI.menuTag.isOpen() }"></div>
-  <script type="text/javascript">
-    registryUI.menuTag = registryUI.menuTag || {};
-    registryUI.menuTag.update = this.update;
-    this.one('mount', function(args) {
-      const self = this;
-      registryUI.menuTag.close = function() {
-        self.tags['material-dropdown'].close();
-        self.update();
-      }
-      registryUI.menuTag.isOpen = function() {
-        return self.tags['material-dropdown'].opened;
-      }
-      registryUI.menuTag.toggle = function() {
-        self.tags['material-dropdown'].opened ? self.tags['material-dropdown'].close() : self.tags['material-dropdown'].open();
-        self.update();
-      };
-    });
-  </script>
-</menu>