-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Revisions #4: Add revisions list and revisions diff viewer #14927
Conversation
87badc6
to
21b3006
Compare
27b769d
to
4ca1184
Compare
Now that #14943 is merged, CircleCI is green, it's also rebased on the latest master |
8e5f936
to
4d30ae6
Compare
Updates
|
I did a design review. Looks REALLY good so far. I have some minor notes:
I'm sure we can iterate and improve this further, but I think it's already a huge improvement, so let's try to ship this. :) |
Updated, should we keep the hover color coming from using
AFAIK, this should only happen when there is no "word changes" detected between 2 revisions, for instance if you change a number or punctuation (which aren't counted as words by I'm not sure whether it's worth it to introduce a "less-strict" count words for revisions (making it inconsistent with the word count at the bottom of the editor) though?
Missed it during the split from the WIP PR :/, it's fixed: |
Are we sure inheriting from buttons is a good idea? Anyhow, the design is meant to be like the accordions styling: Notice the hover turns the text blue. Sorry, I recognize it wasn't evident from the mockups.
Odd. I had it on the first revision too, which was fairly big. If it's "smaller" we could just say "Minor changes" (in |
probably not, considering how much we're "tweaking" it, I've updated it and the rest of the CSS to more closely match what can be found in an accordion: 2 nitpick questions:
Oops, my bad, it will also occur on the first revisions, right now it's defaulting to no change but we can very easily change that to consider that every word is actually "added" from what essentially was a blank page before. Since I would like to keep this PR on UI code alone, I'll cut another PR to fix it. I've also added "minor changes" for all cases where we don't have "word diff" to not break the rhythm: |
Yes, good point. Try adding some to your discretion and let's review seeing the screenshots :)
Good point too, let's do that.
Sounds good. It's valuable as sometimes the bulk is added immediately and sometimes it's jut a few words. :)
Excellent. 👍 |
Cool! |
21b3006
to
899b0e1
Compare
@bperson This PR needs a rebase |
@bperson This PR needs a rebase |
b40d9df
to
5122f83
Compare
899b0e1
to
bd82ebc
Compare
@bperson This PR needs a rebase |
5122f83
to
0d1618b
Compare
bd82ebc
to
8b1e3ee
Compare
@bperson This PR needs a rebase |
1ecf66b
to
d532714
Compare
client/post-editor/post-editor.jsx
Outdated
}, | ||
|
||
loadRevision: function( revision ) { | ||
this.toggleNestedSidebar( NESTED_SIDEBAR_NONE ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this.toggleNestedSidebar
does not exist since the rebase
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Missed it in the rebase. Fixed.
62657a8
to
6de7aa2
Compare
@mcsf Here's a demo of the issue I showed you: If you start typing in the content portion of the editor from the start, the draft gets saved with the initial content, a post id gets placed in the URL bar, etc, but it looks like no revision exists until a subsequent save. This seems like an editor bug that's outside this PR & playing with this just surfaced it. I'm documenting here, so we're sure to follow up with this in a separate issue since there's a possibility of data loss since the initial contents don't make it into the list of revisions. |
Did you already open the new issue? Seems a rough edge that as you mention might have impact even outside the revisions discussion. |
6de7aa2
to
ad4121b
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just added a few comments - nothing blocking though :)
<div className="editor-revisions-list__header"> | ||
<Button | ||
className="editor-revisions-list__load-revision" | ||
compact={ true } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We could lose ={ true }
, since true
would be the implied value of compact
without a given value.
this.props.revisions.length > 0 && | ||
isWithinBreakpoint( '>660px' ) | ||
) { | ||
this.props.selectRevision( this.props.revisions[ 0 ].id ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could we use _.first
here?
We could call it in place or outside of the conditional to give us something like:
const firstRevision = first( revisions );
if (
...
!! firstRevision &&
...
) {
selectRevision( firstRevision.id );
}
Also, will there ever chance of .id
being undefined?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Very subjective, but when I applied this suggestion I didn't really like it. :) Maybe because the usage of first
is so local, or because of the const
that gets introduced, requiring a !!
cast, instead of just relying on length
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fair fair :P
<span className="editor-revisions-list__date"> | ||
<PostTime date={ this.props.revision.date } /> | ||
</span> | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks like the span below could come up empty if isObject( this.props.revision.author )
is falsey.
In those cases would a nbsp
cause some off-centring? Perhaps the nbsp
would be better off inside of that conditional
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good spotting, but local testing doesn't show any centring issues. I'll leave as-is.
// NOTE: Make sure we scroll back to the top AND trigger a scroll | ||
// event no matter the scroll position we're coming from. | ||
// ( used to force-reset TinyMCE toolbar ) | ||
window.scrollTo( 0, 1 ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
smart :)
<FeaturedImage | ||
site={ site } | ||
post={ this.state.post } | ||
maxWidth={ 1462 } /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I see that this was existing - but should we generally use constants for values like this? 1462 looks arbitrary here - a constant could give it some meaning & context.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Indeed, this should be better explained. I traced it back to 10818-gh-calypso-pre-oss
😅 . As the saying goes, patches welcome . (In any case, doesn't belong in this PR; not to mention that the way GitHub renders the diff, it'd be very hard to spot that change in here.)
Note: This builds on top of #14242, so it's not merge-able yet4th chunk coming from my WIP PR to introduce post revisions in calypso: #13367, this is mostly UI code to introduce a list of revisions in the post editor sidebar, a diff viewer replacing the main editor with a diff view of the revision currently selected and some code to enable "loading" a revision in the editor.
testing
screenshots