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

Redo UI of the tag history timeline and add restoration

Browse source
This commit is contained in:
Joseph Schorr 2017-03-03 18:41:26 -05:00
parent e90cab4d77
commit 25db46c341
8 changed files with 256 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

2
static/css/directives/ui/image-link.css
View file

@ -1,7 +1,7 @@
.image-link {
display: inline-block;
white-space: nowrap;
width: 130px;
width: 120px;
}
.image-link a {

125
static/css/directives/ui/repo-tag-history.css
View file

@ -1,7 +1,73 @@
.repo-tag-history-element .history-list {
margin: 10px;
border-left: 2px solid #eee;
margin-right: 150px;
}
.repo-tag-history-element .co-table thead {
margin-bottom: 20px;
}
.repo-tag-history-element .co-table tbody td {
border-bottom: 0px;
}
.repo-tag-history-element .co-table td.revert-col {
font-size: 12px;
}
.repo-tag-history-element .co-table td.revert-col .tag-span {
padding-left: 4px;
padding-right: 4px;
}
.repo-tag-history-element .co-table td.icon-col {
border-bottom: 0px;
width: 32px;
height: 32px;
text-align: center;
line-height: 32px;
vertical-align: middle;
padding: 0px;
position: relative;
}
.repo-tag-history-element .co-table td.history-col {
width: 520px;
}
.repo-tag-history-element .co-table td.datetime-col {
width: 250px;
}
.repo-tag-history-element .co-table td.icon-col:after {
content: " ";
display: inline-block;
position: absolute;
top: 0px;
bottom: 0px;
left: 15px;
width: 2px;
background-color: #ddd;
z-index: 1;
}
.repo-tag-history-element .co-table td.icon-col .history-icon {
position: absolute;
top: 7px;
left: 0px;
z-index: 2;
}
.repo-tag-history-element .co-table td.icon-col .datetime-icon {
position: absolute;
top: 13px;
left: 9px;
z-index: 2;
background-color: white;
}
.repo-tag-history-element .history-row {
font-size: 13px;
color: #aaa;
}
.repo-tag-history-element .history-entry {
@ -12,10 +78,12 @@
transition: all 350ms ease-in-out;
}
.repo-tag-history-element .history-entry .history-text {
transition: transform 350ms ease-in-out, opacity 350ms ease-in-out;
.repo-tag-history-element .history-entry .history-description,
.repo-tag-history-element .history-entry .history-datetime,
.repo-tag-history-element .history-entry .history-revert {
transition: height 350ms ease-in-out, opacity 350ms ease-in-out;
overflow: hidden;
height: 40px;
height: 24px;
}
.repo-tag-history-element .co-filter-box {
@ -42,7 +110,17 @@
margin-top: 10px;
}
.repo-tag-history-element .history-entry.filtered-mismatch .history-text {
.repo-tag-history-element .history-entry.filtered-mismatch .history-datetime {
height: 18px;
opacity: 0;
}
.repo-tag-history-element .history-entry.filtered-mismatch .history-revert {
height: 18px;
opacity: 0;
}
.repo-tag-history-element .history-entry.filtered-mismatch .history-description {
height: 18px;
opacity: 0;
}
@ -64,19 +142,12 @@
content: "\f073";
font-family: FontAwesome;
position: absolute;
width: 12px;
height: 12px;
top: 1px;
left: -9px;
background: white;
}
.repo-tag-history-element .history-entry .history-icon {
position: absolute;
left: -17px;
top: -4px;
border-radius: 50%;
width: 32px;
height: 32px;
@ -100,6 +171,11 @@
font-family: FontAwesome;
}
.repo-tag-history-element .history-entry.recreate .history-icon:before {
content: "\f10d";
font-family: core-icons;
}
.repo-tag-history-element .history-entry.revert .history-icon:before {
content: "\f0e2";
font-family: FontAwesome;
@ -122,6 +198,10 @@
background-color: #98df8a;
}
.repo-tag-history-element .history-entry.current.recreate .history-icon {
background-color: #ba8adf;
}
.repo-tag-history-element .history-entry.current.delete .history-icon {
background-color: #ff9896;
}
@ -135,21 +215,23 @@
border-radius: 4px;
padding: 2px;
background: #eee;
padding-left: 6px;
padding-right: 6px;
color: black;
cursor: default;
}
.repo-tag-history-element .history-entry .tag-span span {
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
}
.repo-tag-history-element .history-entry .tag-span.checked {
background: #F6FCFF;
}
.repo-tag-history-element .history-entry .tag-span:before {
content: "\f02b";
font-family: FontAwesome;
margin-left: 4px;
margin-right: 4px;
}
.repo-tag-history-element .history-entry .image-link {
margin-left: 6px;
}
@ -159,6 +241,5 @@
}
.repo-tag-history-element .history-entry .history-datetime {
font-size: 12px;
color: #ccc;
font-size: 14px;
}