vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Improvements for the image tracks in the tags view

Browse source 
1) Change to show solid dots (instead of open ones) if we are collapsing into a single track due to track count being > 5
2) Add a hover tooltip on track dots to show the tags associated with that image
3) Change the tag selection menu to only show images that are visible currently
4) Refactor the tracks code to massively reduce the amount of ng-repeats thus making the loading much faster when there are many, many tags

Fixes https://jira.coreos.com/browse/QUAY-949
This commit is contained in:
Joseph Schorr 2018-05-23 16:14:27 -04:00
parent 52a53f5ce2
commit b106a31b05
4 changed files with 182 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

50
static/css/directives/repo-view/repo-panel-tags.css
View file

@ -28,6 +28,22 @@
cursor: pointer;
}
.repo-panel-tags-element .image-track-filled-dot {
display: inline-block;
position: absolute;
top: 15px;
left: 2px;
width: 12px;
height: 12px;
background: white;
z-index: 300;
border-radius: 50%;
cursor: pointer;
}
.repo-panel-tags-element .image-track-line {
position: absolute;
top: 0px;
@ -208,4 +224,38 @@
.repo-panel-tags-element .disabled-option,
.repo-panel-tags-element .disabled-option a {
color: #ccc;
}
.repo-panel-tags-element .image-tag-tooltip {
padding-bottom: 4px;
}
.repo-panel-tags-element .image-tag-tooltip .image-tag-tooltip-header {
padding: 4px;
padding-left: 10px;
padding-right: 10px;
border-radius: 4px;
margin-bottom: 10px;
}
.repo-panel-tags-element .image-tag-tooltip .image-tag-tooltip-tags {
list-style: none;
padding: 10px;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 4px;
}
.repo-panel-tags-element .image-tag-tooltip .image-tag-tooltip-tags .fa-tag {
margin-right: 8px;
color: #ccc;
vertical-align: middle;
}
.repo-panel-tags-element .image-tag-tooltip .image-tag-tooltip-tags-more {
color: #aaa;
font-size: 14px;
margin-bottom: 4px;
text-align: center;
padding: 4px;
}