fix(riot-v5): fix catalog-element with multi items

This commit is contained in:
Joxit 2021-03-19 22:14:58 +01:00
parent 669c3399d0
commit 962592c54a
No known key found for this signature in database
GPG key ID: F526592B8E012263
2 changed files with 30 additions and 27 deletions

View file

@ -1,5 +1,5 @@
<!-- <!--
Copyright (C) 2016-2019 Jones Magloire @Joxit Copyright (C) 2016-2021 Jones Magloire @Joxit
This program is free software: you can redistribute it and/or modify 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 it under the terms of the GNU Affero General Public License as published by
@ -17,36 +17,40 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<catalog-element> <catalog-element>
<!-- Begin of tag --> <!-- Begin of tag -->
<div class="content"> <div class="content">
<material-card class="list highlight" item="{props.item}" expanded="{state.expanded}"> <material-card class="list highlight" expanded="{state.expanded}" onclick="{ onClick }">
<material-waves onmousedown="{this.triggerLaunch}" center="true" color="#ddd" setLaunchListener="{ setLaunchListener }" /> <material-waves onmousedown="{this.triggerLaunch}" center="true" color="#ddd"
setLaunchListener="{ setLaunchListener }" />
<span> <span>
<i class="material-icons">send</i> <i class="material-icons">send</i>
{ typeof props.item === "string" ? props.item : props.item.repo } { state.image || state.repo }
<div if="{typeof props.item !== 'string'}" class="item-count right"> <div if="{state.images}" class="item-count right">
{ props.item.images && props.item.images.length } images { state.images.length } images
<i class="material-icons animated {state.expanded ? 'expanded' : ''}">expand_more</i> <i class="material-icons animated {state.expanded ? 'expanded' : ''}">expand_more</i>
</div> </div>
</span> </span>
</material-card> </material-card>
<catalog-element if="{typeof props.item !== 'string'}" <catalog-element if="{ state.images }"
class="animated {!state.expanded ? 'hide' : ''} {state.expanding ? 'expanding' : ''}" class="animated {!state.expanded ? 'hide' : ''} {state.expanding ? 'expanding' : ''}"
each="{item in props.item.images}" item="{ item }" /> each="{item in state.images}" item="{ item }" />
</div> </div>
<script> <script>
import router from '../../scripts/router'; import router from '../../scripts/router';
export default { export default {
onMounted(props) { onBeforeMount(props, state) {
const card = this.$('material-card');
if (!card) {
return;
}
if (props.item.images && props.item.images.length === 1) { if (props.item.images && props.item.images.length === 1) {
props.item = props.item.images[0]; state.image = props.item.images[0];
} else if (typeof props.item === 'string') {
state.image = props.item;
} else if (props.item.images && props.item.repo) {
state.images = props.item.images;
state.repo = props.item.repo;
} }
card.onclick = (e) => { },
if (!props.item.repo) { onClick() {
router.taglist(props.item); const state = this.state;
if (!state.repo) {
router.taglist(state.image);
} else { } else {
this.update({ this.update({
expanded: !this.state.expanded, expanded: !this.state.expanded,
@ -58,7 +62,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
}); });
}, 50) }, 50)
} }
}
}, },
setLaunchListener(cb) { setLaunchListener(cb) {
this.triggerLaunch = cb; this.triggerLaunch = cb;

View file

@ -1,5 +1,5 @@
<!-- <!--
Copyright (C) 2016-2019 Jones Magloire @Joxit Copyright (C) 2016-2021 Jones Magloire @Joxit
This program is free software: you can redistribute it and/or modify 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 it under the terms of the GNU Affero General Public License as published by