mirrors/docker-registry-ui
1
0
Fork 0
mirror of https://github.com/Joxit/docker-registry-ui.git synced 2025-04-26 23:19:54 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(riot-v5): upgrade catalog-element

Browse source
This commit is contained in:
Joxit 2021-03-04 22:33:12 +01:00
parent fb80283dd9
commit 142727e8ac
No known key found for this signature in database
GPG key ID: F526592B8E012263
3 changed files with 70 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

67
src/components/catalog/catalog-element.riot Normal file
View file

@ -0,0 +1,67 @@
<!--
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/>.
-->
<catalog-element>
<!-- Begin of tag -->
<div class="content">
<material-card class="list highlight" item="{props.item}" expanded="{state.expanded}">
<material-waves onmousedown="{this.triggerLaunch}" center="true" color="#ddd" setLaunchListener="{ setLaunchListener }" />
<span>
<i class="material-icons">send</i>
{ typeof props.item === "string" ? props.item : props.item.repo }
<div if="{typeof props.item !== 'string'}" class="item-count right">
{ props.item.images && props.item.images.length } images
<i class="material-icons animated {state.expanded ? 'expanded' : ''}">expand_more</i>
</div>
</span>
</material-card>
<catalog-element if="{typeof props.item !== 'string'}"
class="animated {!state.expanded ? 'hide' : ''} {state.expanding ? 'expanding' : ''}"
each="{item in props.item.images}" item="{ item }" />
</div>
<script>
export default {
onMounted(props) {
const card = this.$('material-card');
if (!card) {
return;
}
if (props.item.images && props.item.images.length === 1) {
props.item = props.item.images[0];
}
card.onclick = (e) => {
if (!props.item.repo) {
// registryUI.taglist.go(props.item);
} else {
this.update({
expanded: !this.state.expanded,
expanding: true
});
setTimeout(() => {
this.update({
expanding: false
});
}, 50)
}
}
},
setLaunchListener(cb) {
this.triggerLaunch = cb;
}
}
</script>
<!-- End of tag -->
</catalog-element>

5
src/components/catalog/catalog.riot
View file

@ -30,7 +30,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<script>
import MaterialCard from 'riot-mui/src/material-elements/material-card/material-card.riot';
import MaterialSpinner from 'riot-mui/src/material-elements/material-spinner/material-spinner.riot';
import CatalogElement from './catalog-element.riot'
import {
Http
} from '../../scripts/http';
@ -38,7 +38,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
export default {
components: {
MaterialCard,
MaterialSpinner
MaterialSpinner,
CatalogElement
},
state: {
name: '',

61
src/tags/catalog-element.riot
View file

@ -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/>.
-->
<catalog-element>
<!-- Begin of tag -->
<div class="content">
<material-card class="list highlight" item="{item}" expanded="{expanded}">
<material-waves onmousedown="{launch}" center="true" color="#ddd" />
<span>
<i class="material-icons">send</i>
{ typeof opts.item === "string" ? opts.item : opts.item.repo }
<div if="{typeof opts.item !== "string"}" class="item-count right">
{ opts.item.images && opts.item.images.length } images
<i class="material-icons animated {expanded: opts.expanded}">expand_more</i>
</div>
</span>
</material-card>
<catalog-element if="{typeof opts.item !== "string"}" class="animated {hide: !expanded, expanding: expanding}" each="{item in item.images}" />
</div>
<script type="text/javascript">
this.on('mount', function() {
const self = this;
const card = this.tags['material-card'];
if (!card) {
return;
}
// Launch waves
card.launch = function(e) {
card.tags['material-waves'].trigger('launch',e);
}
if (this.item.images && this.item.images.length === 1) {
this.item = this.item.images[0];
}
card.root.onclick = function(e) {
if (!self.item.repo) {
registryUI.taglist.go(self.item);
} else {
self.expanded = !self.expanded;
self.update({expanded: self.expanded, expanding: true});
setTimeout(function() {
self.update({expanded: self.expanded, expanding: false});
}, 50)
}
}
})
</script>
<!-- End of tag -->
</catalog-element>