Skip to content

Commit a0dcc84

Browse files
JoxitJoxit
authored
feat(riot-mui): upgrade riot mui and all dependencies (#279)
I [forked riot-mui](https://github.com/Joxit/riot-5-mui) in 2021 to be compatible with [riot.js 5+](https://riot.js.org/) because they change a lot of stuff. This was bundled in 2.0.0 of docker-registry-ui (see #176) Now im improving riot-mui's DX to be more component oriented and add new features in the library. Major changes: * CTRL + click on buttons (catalog <=> taglist; taglist <=> tag-history) * Fix history multi-arch tabs * Fix tag list pagination (creation date missing) This is still a work in progress but I'm integrating this in Docker-Registry-UI. It will help to have new features like dark mode or custom UI. Stay tuned!
2 parents 017f662 + 1e08561 commit a0dcc84

21 files changed

+277
-251
lines changed

‎package.json‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"name": "docker-registry-ui",
33
"version": "2.3.3",
4+
"type": "module",
45
"scripts": {
56
"format": "npm run format-html && npm run format-js && npm run format-riot",
67
"format-html": "find src rollup rollup.config.js -name '*.html' -exec prettier --config .prettierrc -w --parser html {} \\;",
@@ -18,28 +19,28 @@
1819
"license": "AGPL-3.0",
1920
"description": "A web UI for private docker registry",
2021
"devDependencies": {
21-
"@babel/core": "^7.17.9",
22-
"@babel/preset-env": "^7.16.0",
23-
"@riotjs/compiler": "^6.1.3",
22+
"@babel/core": "^7.20.5",
23+
"@babel/preset-env": "^7.20.2",
24+
"@riotjs/compiler": "^6.4.2",
2425
"@riotjs/observable": "^4.1.1",
25-
"@riotjs/route": "^8.0.1",
26-
"@rollup/plugin-babel": "^5.2.2",
27-
"@rollup/plugin-commonjs": "^21.1.0",
28-
"@rollup/plugin-html": "^0.2.4",
29-
"@rollup/plugin-json": "^4.1.0",
30-
"@rollup/plugin-node-resolve": "^13.2.1",
31-
"core-js": "^3.22.0",
32-
"node-sass": "^7.0.1",
33-
"prettier": "^2.6.2",
34-
"riot": "^6.1.2",
35-
"riot-mui": "github:joxit/riot-5-mui#4d68d7f",
36-
"rollup": "^2.70.2",
26+
"@riotjs/route": "^8.0.2",
27+
"@rollup/plugin-babel": "^6.0.3",
28+
"@rollup/plugin-commonjs": "^23.0.3",
29+
"@rollup/plugin-html": "^1.0.1",
30+
"@rollup/plugin-json": "^5.0.2",
31+
"@rollup/plugin-node-resolve": "^15.0.1",
32+
"core-js": "^3.26.1",
33+
"node-sass": "^8.0.0",
34+
"prettier": "^2.8.0",
35+
"riot": "^7.1.0",
36+
"riot-mui": "github:joxit/riot-5-mui#a9b0ce4",
37+
"rollup": "^3.5.1",
3738
"rollup-plugin-app-utils": "^1.0.6",
3839
"rollup-plugin-commonjs": "^10.1.0",
3940
"rollup-plugin-copy": "^3.4.0",
4041
"rollup-plugin-riot": "^6.0.0",
41-
"rollup-plugin-scss": "^3.0.0",
42-
"rollup-plugin-serve": "^1.1.0",
42+
"rollup-plugin-scss": "^4.0.0",
43+
"rollup-plugin-serve": "^2.0.2",
4344
"rollup-plugin-styles": "^4.0.0",
4445
"rollup-plugin-terser": "^7.0.2"
4546
}

‎rollup.config.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@ import { babel } from '@rollup/plugin-babel';
77
import scss from 'rollup-plugin-scss';
88
import serve from 'rollup-plugin-serve';
99
import html from '@rollup/plugin-html';
10-
import htmlUseref from './rollup/html-useref';
10+
import htmlUseref from './rollup/html-useref.js';
1111
import json from '@rollup/plugin-json';
1212
import copy from 'rollup-plugin-copy';
13-
import copyTransform from './rollup/copy-transform';
14-
import license from './rollup/license';
15-
import checkOutput from './rollup/check-output';
13+
import copyTransform from './rollup/copy-transform.js';
14+
import license from './rollup/license.js';
15+
import checkOutput from './rollup/check-output.js';
1616

1717
const useServe = process.env.ROLLUP_SERVE === 'true';
1818
const output = useServe ? '.serve' : 'dist';
@@ -22,7 +22,7 @@ const plugins = [
2222
json(),
2323
nodeResolve(),
2424
commonjs(),
25-
scss({ output: `./${output}/docker-registry-ui.css`, outputStyle: 'compressed' }),
25+
scss({ fileName: `docker-registry-ui.css`, outputStyle: 'compressed' }),
2626
babel({ babelHelpers: 'bundled', presets: [['@babel/env', { useBuiltIns: 'usage', corejs: { version: '2' } }]] }),
2727
copy({
2828
targets: [

‎src/components/catalog/catalog-element.riot‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
2121
if="{!props.filterResults || state.nImages > 0 || matchSearch(props.filterResults, state.image)}"
2222
>
2323
<material-card class="list highlight" expanded="{state.expanded}" onclick="{ onClick }">
24-
<material-waves center="true" color="#ddd"></material-waves>
24+
<a if="{ state.image }" href="{ router.taglist(state.image) }">
25+
<material-waves center="true" color="#ddd"></material-waves>
26+
</a>
27+
<material-waves if="{ state.images }" center="true" color="#ddd"></material-waves>
2528
<span>
2629
<i class="material-icons">send</i>
2730
{ state.image || state.repo }
@@ -76,9 +79,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
7679
},
7780
onClick() {
7881
const state = this.state;
79-
if (!state.repo) {
80-
router.taglist(state.image);
81-
} else {
82+
if (state.repo) {
8283
this.update({
8384
expanded: !this.state.expanded,
8485
expanding: true,
@@ -112,6 +113,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
112113
oReq.send();
113114
},
114115
matchSearch,
116+
router,
115117
};
116118
</script>
117119
<!-- End of tag -->

‎src/components/dialogs/add-registry-url.riot‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,16 @@
1616
-->
1717
<add-registry-url>
1818
<material-popup opened="{ props.opened }" onClick="{ props.onClose }">
19-
<div slot="title">Add your Server ?</div>
20-
<div slot="content">
21-
<material-input onkeyup="{ onKeyUp }" placeholder="Server URL"></material-input>
19+
<div class="material-popup-title">Add your Server ?</div>
20+
<div class="material-popup-content">
21+
<material-input onkeyup="{ onKeyUp }" label="Server URL" label-color="#666" valid="{ registryUrlValidator }"></material-input>
2222
<span>Write your URL without /v2</span>
2323
</div>
24-
<div slot="action">
25-
<material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ add }">
24+
<div class="material-popup-action">
25+
<material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ add }" color="#000" inverted>
2626
Add
2727
</material-button>
28-
<material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ props.onClose }">
28+
<material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ props.onClose }" color="#000" inverted>
2929
Cancel
3030
</material-button>
3131
</div>
@@ -55,6 +55,9 @@
5555
this.props.onClose();
5656
setTimeout(() => router.updateUrlQueryParam(url), 100);
5757
},
58+
registryUrlValidator(input) {
59+
return /^https?:\/\//.test(input) && !/\/v2\/?$/.test(input)
60+
}
5861
};
5962
</script>
6063
</add-registry-url>

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

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,18 @@
1515
along with this program. If not, see <http://www.gnu.org/licenses/>.
1616
-->
1717
<change-registry-url>
18-
<material-popup opened="{ props.opened }" onClick="{ props.onClick }">
19-
<div slot="title">Change your Server ?</div>
20-
<div slot="content">
18+
<material-popup opened="{ props.opened }" onClick="{ props.onClose }">
19+
<div class="material-popup-title">Change your Server ?</div>
20+
<div class="material-popup-content">
2121
<select>
2222
<option each="{ url in getRegistryServers() }" value="{ url }">{ url }</option>
2323
</select>
2424
</div>
25-
<div slot="action">
26-
<material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ change }">
25+
<div class="material-popup-action">
26+
<material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ change }" color="#000" inverted>
2727
Change
2828
</material-button>
29-
<material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ props.onClose }">
29+
<material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ props.onClose }" color="#000" inverted>
3030
Cancel
3131
</material-button>
3232
</div>
@@ -62,6 +62,7 @@
6262
background: 0 0;
6363
border: none;
6464
font-weight: 400;
65+
font-size: 1em;
6566
line-height: 24px;
6667
height: 24px;
6768
border-bottom: 1px solid #2f6975;

‎src/components/dialogs/confirm-delete-image.riot‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,17 @@
1616
-->
1717
<confirm-delete-image>
1818
<material-popup opened="{ props.opened }" onClick="{ props.onClick }">
19-
<div slot="title">These images will be deleted</div>
20-
<div slot="content">
19+
<div class="material-popup-title">These images will be deleted</div>
20+
<div class="material-popup-content">
2121
<ul>
2222
<li each="{ image in displayImagesToDelete(props.toDelete, props.tags) }">{ image.name }:{ image.tag }</li>
2323
</ul>
2424
</div>
25-
<div slot="action">
26-
<material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ deleteImages }">
25+
<div class="material-popup-action">
26+
<material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ deleteImages }" color="#000" inverted>
2727
Delete
2828
</material-button>
29-
<material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ props.onClick }">
29+
<material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ props.onClick }" color="#000" inverted>
3030
Cancel
3131
</material-button>
3232
</div>

‎src/components/dialogs/dialogs-menu.riot‎

Lines changed: 22 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -35,15 +35,23 @@
3535
on-notify="{ props.onNotify }"
3636
on-server-change="{ props.onServerChange }"
3737
></remove-registry-url>
38-
<div class="container">
39-
<material-button onClick="{ onClick }" waves-center="true" rounded="true" waves-opacity="0.6" waves-duration="600">
38+
<div class="material-dropdown-wrapper">
39+
<material-button
40+
onClick="{ onClick }"
41+
waves-center="true"
42+
waves-opacity="0.6"
43+
waves-duration="600"
44+
color="rgba(0,0,0,0)"
45+
text-color="#fff"
46+
icon
47+
>
4048
<i class="material-icons">more_vert</i>
4149
</material-button>
42-
<material-dropdown-list
50+
<material-dropdown
4351
items="{ dropdownItems.filter(item => item.ro || !props.readOnlyRegistries) }"
44-
onSelect="{ onDropdownSelect }"
52+
on-click="{ onDropdownSelect }"
4553
opened="{ state.isDropdownOpened }"
46-
/>
54+
></material-dropdown>
4755
</div>
4856
<div class="overlay" onclick="{ onClick }" if="{ state.isDropdownOpened }"></div>
4957
<script>
@@ -74,9 +82,9 @@
7482
ro: false,
7583
},
7684
],
77-
onDropdownSelect(key, item) {
85+
onDropdownSelect(event) {
7886
this.update({
79-
[item.name]: true,
87+
[event.target.item]: true,
8088
isDropdownOpened: false,
8189
});
8290
},
@@ -96,15 +104,17 @@
96104
};
97105
</script>
98106
<style>
99-
:host > .container {
100-
position: absolute;
101-
top: 0px;
102-
right: 16px;
107+
:host > .material-dropdown-wrapper {
103108
color: #000;
104109
list-style-type: disc;
105110
margin-block-start: 0.7em;
106111
}
107112
113+
:host .material-dropdown-wrapper material-dropdown .material-dropdown-container {
114+
right: 0;
115+
top: 2em;
116+
}
117+
108118
:host .overlay {
109119
position: fixed;
110120
height: 100%;
@@ -114,33 +124,15 @@
114124
z-index: 10;
115125
}
116126
117-
:host material-button {
118-
background: rgba(255, 255, 255, 0);
127+
:host material-button button {
119128
float: right;
120129
z-index: 2;
121130
}
122131
123132
:host material-button .content i.material-icons {
124-
color: #fff;
125133
font-size: 24px;
126134
}
127135
128-
:host material-dropdown-list {
129-
display: inline-block;
130-
position: relative;
131-
}
132-
133-
:host material-dropdown-list ul.dropdown-content {
134-
min-width: 156px;
135-
padding: 8px 0;
136-
margin: 0;
137-
}
138-
139-
:host material-dropdown-list ul.dropdown-content li span {
140-
font-size: 1rem;
141-
line-height: 1.2em;
142-
}
143-
144136
:host material-popup * {
145137
line-height: 1em;
146138
}

‎src/components/dialogs/remove-registry-url.riot‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,18 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
1616
-->
1717
<remove-registry-url>
1818
<material-popup opened="{ props.opened }" onClick="{ props.onClose }">
19-
<div slot="title">Remove your Registry Server ?</div>
20-
<div slot="content">
19+
<div class="material-popup-title">Remove your Registry Server ?</div>
20+
<div class="material-popup-content">
2121
<ul class="list">
2222
<li each="{ url in getRegistryServers() }">
2323
<span>
2424
<material-button
25-
onClick="{ remove }"
25+
onClick="{ remove(url) }"
2626
url="{ url }"
27-
rounded="true"
2827
waves-color="rgba(158,158,158,.4)"
2928
waves-center="true"
29+
inverted
30+
icon
3031
>
3132
<i class="material-icons">delete</i>
3233
</material-button>
@@ -35,19 +36,21 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
3536
</li>
3637
</ul>
3738
</div>
38-
<div slot="action">
39-
<material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ props.onClose }">
39+
<div class="material-popup-action">
40+
<material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ props.onClose }" color="#000" inverted>
4041
Close
4142
</material-button>
4243
</div>
4344
</material-popup>
4445
<script>
4546
import { getRegistryServers, removeRegistryServers } from '../../scripts/utils';
4647
export default {
47-
remove(event) {
48-
const url = event.currentTarget.attributes.url && event.currentTarget.attributes.url.value;
49-
removeRegistryServers(url);
50-
setTimeout(() => this.update(), 100);
48+
remove(url) {
49+
return (event) => {
50+
console.log(url, event)
51+
removeRegistryServers(url);
52+
setTimeout(() => this.update(), 100);
53+
}
5154
},
5255
getRegistryServers,
5356
};

0 commit comments

Comments
 (0)