Revisions: Pinned controls, layout tweaks, copy tweaks, misc.

* When you scroll down the diff view, the controls will pin to the top.
* The revisions meta view was cleaned up. Copy changes.
* Loading indicator in the center of the screen (so it follows as you scroll).
* Tooltips "flip" when you cross the center line, so that they don't hit the container edge and wrap for later revisions.
* The "Restore" button's inactive state is handled on render, instead of after.
* Make sure we always have a current revision, even if the timestamp doesn't work out on the most recent one.

See #24804. Props markjaquith, nacin, ocean90, aaroncampbell.

git-svn-id: https://develop.svn.wordpress.org/trunk@24761 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Mark Jaquith
2013-07-22 05:05:45 +00:00
parent 24243ae134
commit 56f1a3fa32
7 changed files with 231 additions and 110 deletions
+26 -10
View File
@@ -976,6 +976,14 @@ th.sorted a span {
padding: 9px 0 0 9px;
}
.revisions .loading-indicator {
margin-right: -90px;
}
body.folded .revisions .loading-indicator {
margin-right: -32px;
}
.revisions-next {
float: left;
}
@@ -984,10 +992,6 @@ th.sorted a span {
float: right;
}
#diff-header {
padding: 5px 5px 5px 200px;
}
.diff-title {
float: right;
}
@@ -1004,7 +1008,7 @@ th.sorted a span {
margin-right: 5px;
}
.diff-header > input.restore-revision {
.diff-meta > input.restore-revision {
margin-left: 0;
margin-right: 10px;
}
@@ -1027,11 +1031,11 @@ th.sorted a span {
.revisions-tooltip {
margin-left: 0;
margin-right: -70px;
-webkit-transition: right 15ms;
-moz-transition: right 15ms;
-ms-transition: right 15ms;
-o-transition: right 15ms;
transition: right 15ms;
}
.revisions-tooltip.flipped {
margin-right: 0;
margin-left: -70px;
}
.ie8 .revisions-tooltip {
@@ -1044,10 +1048,22 @@ th.sorted a span {
margin-right: 35px;
}
.revisions-tooltip.flipped .revisions-tooltip-arrow {
margin-right: 0;
margin-left: 35px;
right: auto;
left: 0;
}
.revisions-tooltip-arrow > span {
right: 20px;
}
.revisions-tooltip.flipped .revisions-tooltip-arrow > span {
right: auto;
left: 20px;
}
.revisions-tooltip img {
float: right;
margin: 2px 0 0 5px;