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

Implement updated UI for displaying the signing status of a tag, now that we support multiple delegations

Browse source 
The icon now represents the status of the multiple delegations, and we show each delegation in the "Expanded" view.
This commit is contained in:
Joseph Schorr 2017-05-16 17:07:09 -04:00
parent 7c6196f78a
commit b7f88d2df2
9 changed files with 368 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -43,7 +43,7 @@
.repo-panel-tags-element .image-track-line.start {
top: 18px;
height: 25px;
height: 28px;
display: block;
}
@ -144,6 +144,10 @@
padding-top: 0px;
}
.repo-panel-tags-element .signing-delegations-list {
margin-top: 8px;
}
@media (max-width: 1000px) {
.repo-panel-tags-element .image-track {
display: none;

12
static/css/directives/ui/manifest-label-list.css
View file

@ -1,5 +1,17 @@
.manifest-label-list-element {
padding-left: 6px;
display: inline-block;
position: relative;
}
.manifest-label-list-element:before {
content: "\f02c";
font-family: FontAwesome;
position: absolute;
left: -22px;
top: 0px;
font-size: 15px;
color: #888;
}
.manifest-label-list-element .none {

156
static/css/directives/ui/tag-signing-display.css
View file

@ -2,10 +2,11 @@
text-align: center;
display: inline-block;
cursor: default;
position: relative;
}
.tag-signing-display-element .fa {
font-size: 18px;
font-size: 24px;
}
.tag-signing-display-element .fa.fa-question-circle {
@ -22,34 +23,145 @@
color: #9B9B9B;
}
.tag-signing-display-element .signing-valid .okay,
.tag-signing-display-element .signing-valid .expires-soon {
.tag-signing-display-element .signing-valid.okay-release {
color: #2FC98E;
}
.tag-signing-display-element .signing-valid .expires-soon {
position: relative;
.tag-signing-display-element .signing-valid.okay {
color: #5f9dd0;
}
.tag-signing-display-element .signing-valid .expires-soon:after {
border-radius: 50%;
width: 6px;
height: 6px;
position: absolute;
bottom: 0px;
right: 0px;
z-index: 1;
display: inline-block;
content: " ";
background-color: #FCA657;
}
.tag-signing-display-element .signing-valid .expired {
.tag-signing-display-element .signing-valid.partial-okay {
color: #FCA657;
}
.tag-signing-display-element .signing-invalid {
color: #D64456;
}
}
.tag-signing-display-element .indicator {
position: relative;
}
.tag-signing-display-element .expiring-soon {
border-radius: 100%;
background-color: #ffe0c4;
position: absolute;
right: 0px;
bottom: 0px;
width: 8px;
height: 8px;
z-index: 2;
}
.tag-signing-display-element .expired {
border-radius: 100%;
background-color: #ffcad1;
position: absolute;
right: 0px;
bottom: 0px;
width: 8px;
height: 8px;
z-index: 3;
}
.tag-signing-display-element .invalid {
border-radius: 100%;
background-color: #ffcad1;
position: absolute;
right: 0px;
bottom: 0px;
width: 8px;
height: 8px;
z-index: 4;
}
.tag-signing-display-element.extended {
display: block;
position: relative;
}
.tag-signing-display-element.extended .fa {
color: #888 !important;
font-size: 16px;
}
.tag-signing-display-element.extended .indicator {
font-size: 16px;
position: absolute;
left: -22px;
top: 4px;
}
.tag-signing-display-element.extended .delegations {
margin: 0px;
padding: 0px;
text-align: left;
padding-left: 6px;
padding-top: 6px;
}
.tag-signing-display-element.extended .delegations td {
padding: 4px;
border: 0px;
}
.tag-signing-display-element.extended .delegations .delegation {
padding: 4px;
background-color: #eee;
border-radius: 4px;
font-size: 13px;
padding-right: 6px;
display: inline-block;
}
.tag-signing-display-element.extended .delegations .delegation:before {
content: "\f00c";
font-family: FontAwesome;
margin-right: 2px;
margin-left: 2px;
display: inline-block;
font-size: 10px;
}
.tag-signing-display-element.extended .delegations .delegation.okay {
background-color: #bdf1dd;
}
.tag-signing-display-element.extended .delegations .delegation.okay:before {
color: #2FC98E;
}
.tag-signing-display-element.extended .delegations .delegation.warning {
background-color: #ffe0c4;
}
.tag-signing-display-element.extended .delegations .delegation.warning:before {
content: "\f12a";
color: #FCA657;
}
.tag-signing-display-element.extended .delegations .delegation.error {
background-color: #ffcad1;
}
.tag-signing-display-element.extended .delegations .delegation.error:before {
content: "\f00d";
color: #D64456;
}
.tag-signing-display-element.extended .delegations .delegation-name {
font-size: 14px;
}
.tag-signing-display-element.extended .delegations .delegation-info {
display: inline-block;
white-space: nowrap;
vertical-align: middle;
margin-left: 4px;
font-size: 12px;
}