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

[feat #56] Add expand_more icon for aggregated images

Browse source
This commit is contained in:
Joxit 2019-01-04 22:02:22 +01:00
parent 605e8a8d8e
commit 7e2e4b6010
2 changed files with 16 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/style.css
View file

@ -123,6 +123,16 @@ h2 {
color: #757575;
}
.list > span i.material-icons.right.animated {
transition: all 350ms cubic-bezier(.4,0,.2,1);
margin-right: 10px;
position: absolute;
right: 0;
}
.list > span i.material-icons.right.animated.expanded {
transform: rotate(180deg);
}
.list > span,
.list > li > span {
height: 100%;

11
src/tags/catalog-element.tag
View file

@ -16,14 +16,15 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<catalog-element>
<!-- Begin of tag -->
<material-card class="list highlight" item="{item}">
<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 }
<i hide="{typeof opts.item === "string"}" class="material-icons right animated {expanded: opts.expanded}">expand_more</i>
</span>
</material-card>
<catalog-element hide="{typeof opts.item === "string"}" class="{hide: !show, showing: showing}" each="{item in item.images}" />
<catalog-element hide="{typeof opts.item === "string"}" class="animated {hide: !expanded, expanding: expanding}" each="{item in item.images}" />
<script>
this.on('mount', function() {
const self = this;
@ -42,10 +43,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
if (!self.item.repo) {
registryUI.taglist.go(self.item);
} else {
self.show = !self.show;
self.update({show: self.show, showing: true});
self.expanded = !self.expanded;
self.update({expanded: self.expanded, expanding: true});
setTimeout(function() {
self.update({show: self.show, showing: false});
self.update({expanded: self.expanded, expanding: false});
}, 50)
}
}