feat(riot-v5): upgrade change-registry-url dialog

src/components/dialogs/change-registry-url.riot

@@ -0,0 +1,79 @@
+<!--
+ 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/>.
+-->
+<change-registry-url>
+  <material-popup opened="{ props.opened }" onClick="{ props.onClick }">
+    <div slot="title">Change your Server ?</div>
+    <div slot="content">
+      <select>
+        <option each="{ url in getRegistryServers() }" value="{ url }">{ url }</option>
+      </select>
+    </div>
+    <div slot="action">
+      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ change }">
+        Change
+      </material-button>
+      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ props.onClose }">
+        Cancel
+      </material-button>
+    </div>
+  </material-popup>
+  <script>
+    import {
+      getRegistryServers,
+      updateHistory
+    } from '../../scripts/utils';
+    import router from '../../scripts/router';
+    export default {
+      change(event) {
+        const select = this.$('select');
+        if (!select || !select.value || select.value.length === 0) {
+          return this.props.onNotify('The select field is empty. Please add an url.', true);
+        }
+        if (!select.value.startsWith('http')) {
+          return this.props.onNotify('The select field should start with http:// or https://.', true);
+        }
+        const url = select.value.trim().replace(/\/*$/, '');
+        const registryServer = getRegistryServers().filter(e => e !== url);
+        localStorage.setItem('registryServer', JSON.stringify([url].concat(registryServer)));
+        router.home()
+        this.props.onServerChange(url);
+        this.props.onClose()
+        setTimeout(() => updateHistory(url), 100);
+      },
+      getRegistryServers
+    }
+  </script>
+  <style>
+    :host select {
+      position: relative;
+      outline: 0;
+      box-shadow: none;
+      padding: 0;
+      width: 100%;
+      background: 0 0;
+      border: none;
+      font-weight: 400;
+      line-height: 24px;
+      height: 24px;
+      border-bottom: 1px solid #2f6975;
+      appearance: none;
+      -moz-appearance: none;
+      -webkit-appearance: none;
+      margin: 1.5em 0;
+    }
+  </style>
+</change-registry-url>

src/components/dialogs/dialogs-menu.riot

@@ -23,12 +23,16 @@
   <div class="overlay" onclick="{ onClick }" if="{ state.isDropdownOpened }"></div>
   <add-registry-url opened="{ state['add-registry-url'] }" on-close="{ onClose('add-registry-url') }"
     on-notify="{ props.onNotify }" on-server-change="{ props.onServerChange }"></add-registry-url>
+  <change-registry-url opened="{ state['change-registry-url'] }" on-close="{ onClose('change-registry-url') }"
+    on-notify="{ props.onNotify }" on-server-change="{ props.onServerChange }"></change-registry-url>
   <script>
     import AddRegistryUrl from './add-registry-url.riot';
+    import ChangeRegistryUrl from './change-registry-url.riot';
 
     export default {
       components: {
-        AddRegistryUrl
+        AddRegistryUrl,
+        ChangeRegistryUrl
       },
       dropdownItems: [{
         title: 'Add URL',

src/style.scss

@@ -358,27 +358,6 @@ material-footer {
   padding: 0.5em 1em;
 }
 
-.select-padding {
-  padding: 20px 0;
-}
-
-select {
-  position: relative;
-  outline: 0;
-  box-shadow: none;
-  padding: 0;
-  width: 100%;
-  background: 0 0;
-  border: none;
-  font-weight: 400;
-  line-height: 24px;
-  height: 24px;
-  border-bottom: 1px solid #2f6975;
-  appearance: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-}
-
 .copy-to-clipboard {
   padding-left: 5px;
 }

src/tags/dialogs/change.riot

@@ -1,61 +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/>.
--->
-<change>
-  <material-popup>
-    <div class="material-popup-title">Change your Server ?</div>
-    <div class="material-popup-content">
-      <div class="select-padding">
-        <select class="mdl-textfield__input mdl-textfield__select" name="server-list" ref="server-list">
-          <option each="{ url in registryUI.getRegistryServer() }" value={url}>{url}</option>
-        </select>
-      </div>
-    </div>
-    <div class="material-popup-action">
-      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="registryUI.changeTag.change();">Change</material-button>
-      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="registryUI.changeTag.close();">Cancel</material-button>
-    </div>
-  </material-popup>
-  <script type="text/javascript">
-    registryUI.changeTag = registryUI.changeTag || {};
-    this.one('mount', function () {
-      registryUI.changeTag.dialog = this.tags['material-popup'];
-      registryUI.changeTag.dialog.getServerUrl = function () {
-        return this.refs['server-list']
-          ? this.refs['server-list'].value
-          : '';
-      };
-      registryUI.changeTag.dialog.on('updated', function () {
-        if (this.refs['server-list']) {
-          this.refs['server-list'].value = registryUI.url();
-        }
-      });
-    });
-    registryUI.changeTag.show = function () {
-      registryUI.changeTag.dialog.open();
-    };
-    registryUI.changeTag.change = function () {
-      if (registryUI.changeTag.dialog.getServerUrl().length > 0) {
-        registryUI.changeServer(registryUI.changeTag.dialog.getServerUrl());
-      }
-      registryUI.home();
-      registryUI.changeTag.dialog.close();
-    };
-    registryUI.changeTag.close = function () {
-      registryUI.changeTag.dialog.close();
-    };
-  </script>
-</change>