Revisions UI update:

* Style status loading as a regular update message like on the other screens
 * Move compare two checkbox to diff header to avoid an overlap on long post titles
 * Restore color shades for the scope of changes visualisation 
 * Show tooltips while moving the slider handle
 * Diff header styling
 * Move color declarations to classic/fresh stylesheets
 * Sync admin color stylesheets

props jrbeilke for initial patch. see #23935.

git-svn-id: https://develop.svn.wordpress.org/trunk@24119 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Dominik Schilling (ocean90)
2013-04-28 10:56:57 +00:00
parent 57b9f9ecab
commit 800d88397a
5 changed files with 145 additions and 87 deletions
+36 -23
View File
@@ -3548,7 +3548,7 @@ table.diff col.content.diffsplit {
}
table.diff col.diffsplit.middle {
width: 4%;
width: auto;
}
table.diff col.ltype {
@@ -3571,7 +3571,7 @@ table.diff .diff-addedline ins {
text-decoration: none;
}
#revision-diff-container {
#revisions-diff {
position: relative;
}
@@ -3579,24 +3579,20 @@ table.diff .diff-addedline ins {
position: absolute;
top: 0;
right: 0;
padding-top: 15px;
padding: 9px 9px 0 0;
}
#loading-status {
position: absolute;
top: 0;
right: 170px;
line-height: 30px;
display: none;
margin: 9px 0 0;
}
#loading-status .spinner {
float: left;
display: inline-block;
float: none;
margin: -4px 0;
}
#revision-interact {
border-bottom: 1px solid #dfdfdf;
padding: 20px 0;
}
@@ -3613,7 +3609,7 @@ table.diff .diff-addedline ins {
float: left;
}
#diff-slider{
#diff-slider {
width: 70%;
margin: 0 auto;
}
@@ -3622,6 +3618,19 @@ table.diff .diff-addedline ins {
width: 95%;
}
#diff-slider .ui-slider-tooltip {
display: none;
position: absolute;
bottom: 20px;
margin-left: -4em;
}
#diff-slider .ui-state-active .ui-slider-tooltip,
#diff-slider .ui-state-focus .ui-slider-tooltip,
#diff-slider .ui-state-hover .ui-slider-tooltip {
display: block;
}
#diff-title-to strong {
display: none;
}
@@ -3647,6 +3656,11 @@ table.diff .diff-addedline ins {
font-size: 13px;
}
#diff-header {
-webkit-border-radius: 3px;
border-radius: 3px;
}
.diff-header {
height: 35px;
line-height: 35px;
@@ -3688,8 +3702,6 @@ table.diff .diff-addedline ins {
.comparing-two-revisions #diff-title-from,
.left-model-loading #loading-status,
.right-model-loading #loading-status,
.left-model-loading #loading-status .spinner,
.right-model-loading #loading-status .spinner,
.comparing-two-revisions #diff-header-from {
display: block;
}
@@ -3705,31 +3717,26 @@ table.diff .diff-addedline ins {
.revision-tick.scope-of-changes-vsmall {
width: 1px;
background-color: #aaa;
}
.revision-tick.scope-of-changes-small {
width: 2px;
background-color: #aaa;
margin-left: -1px;
}
.revision-tick.scope-of-changes-med {
width: 3px;
margin-left: -2px;
background-color: #666;
}
.revision-tick.scope-of-changes-large {
width: 4px;
margin-left: -3px;
background-color: #333;
}
.revision-tick.scope-of-changes-vlarge {
margin-left: -3px;
width: 4px;
background-color: #111;
left: 1;
}
@@ -3747,7 +3754,8 @@ table.diff .diff-addedline ins {
float: none;
}
.ui-tooltip-content img {
.ui-tooltip-content img,
.ui-slider-tooltip img {
float: left;
margin-right: 5px;
}
@@ -3755,7 +3763,8 @@ table.diff .diff-addedline ins {
/* jQuery UI Tooltip 1.10.1 */
.ui-tooltip {
.ui-tooltip,
.ui-slider-tooltip {
padding: 8px;
position: absolute;
z-index: 9999;
@@ -3763,15 +3772,19 @@ table.diff .diff-addedline ins {
min-width: 130px;
}
body .ui-tooltip {
body .ui-tooltip,
body .ui-slider-tooltip {
border-width: 1px;
}
.ui-tooltip, .arrow:after {
.ui-tooltip,
.ui-slider-tooltip,
.arrow:after {
border: 1px solid #d7d7d7;
}
.ui-tooltip {
.ui-tooltip,
.ui-slider-tooltip {
padding: 5px 10px;
}