Catrope has uploaded a new change for review. https://gerrit.wikimedia.org/r/164516
Change subject: Make slug animations work again ...................................................................... Make slug animations work again Done in a kind of hacky way by re-wrapping the paragraph as a fake slug. I'm open to better suggestions. Change-Id: Ia59d3e3ad47f16381c8b386279d9a3d7648da842 --- M src/ce/styles/nodes/ve.ce.BranchNode.css M src/ce/ve.ce.Surface.js 2 files changed, 24 insertions(+), 6 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/VisualEditor/VisualEditor refs/changes/16/164516/1 diff --git a/src/ce/styles/nodes/ve.ce.BranchNode.css b/src/ce/styles/nodes/ve.ce.BranchNode.css index b9dfdf1..e7c9d3a 100644 --- a/src/ce/styles/nodes/ve.ce.BranchNode.css +++ b/src/ce/styles/nodes/ve.ce.BranchNode.css @@ -4,7 +4,8 @@ * @copyright 2011-2014 VisualEditor Team and others; see http://ve.mit-license.org */ -.ve-ce-branchNode-blockSlugWrapper { +.ve-ce-branchNode-blockSlugWrapper, +.ve-ce-branchNode-blockSlugWrapper-former { background-color: transparent; outline: transparent dashed 1px; outline-offset: 10px; @@ -14,25 +15,29 @@ transition: background-color 400ms ease-out, outline-color 400ms ease-out, outline-offset 400ms ease-out; } -.ve-ce-branchNode-blockSlugWrapper .ve-ce-branchNode-blockSlug { +.ve-ce-branchNode-blockSlugWrapper .ve-ce-branchNode-blockSlug, +.ve-ce-branchNode-blockSlugWrapper-former p { -webkit-transition: font-size 200ms ease-out, margin 200ms ease-out; -moz-transition: font-size 200ms ease-out, margin 200ms ease-out; -o-transition: font-size 200ms ease-out, margin 200ms ease-out; transition: font-size 200ms ease-out, margin 200ms ease-out; } -.ve-ce-branchNode-blockSlugWrapper-unfocused { +.ve-ce-branchNode-blockSlugWrapper-unfocused, +.ve-ce-branchNode-blockSlugWrapper-former-unfocused { margin: 0 0 -0.2em 0; outline-offset: 0; } -.ve-ce-branchNode-blockSlugWrapper-unfocused:hover { +.ve-ce-branchNode-blockSlugWrapper-unfocused:hover, +.ve-ce-branchNode-blockSlugWrapper-former-unfocused { outline-color: #ccc; /* rgba(#f1f7fb, 0.5) */ background-color: rgba(241, 247, 251, 0.75); } -.ve-ce-branchNode-blockSlugWrapper-unfocused .ve-ce-branchNode-blockSlug { +.ve-ce-branchNode-blockSlugWrapper-unfocused .ve-ce-branchNode-blockSlug, +.ve-ce-branchNode-blockSlugWrapper-former-unfocused p { font-size: 0.8em; margin: 0.2em 0; } diff --git a/src/ce/ve.ce.Surface.js b/src/ce/ve.ce.Surface.js index a6f5bdb..0acd359 100644 --- a/src/ce/ve.ce.Surface.js +++ b/src/ce/ve.ce.Surface.js @@ -1652,7 +1652,7 @@ * @see ve.ce.SurfaceObserver#pollOnce */ ve.ce.Surface.prototype.onSlugEnter = function () { - var fragment, offset, + var fragment, offset, $paragraph, $wrapper, model = this.getModel(), doc = model.getDocument(); @@ -1668,6 +1668,19 @@ ] ), new ve.Range( offset + 1 ) ); this.slugFragment = fragment; + + // Clear wrappers from previous former slugs + this.$element.find( '.ve-ce-branchNode-blockSlugWrapper-former' ).remove(); + // Style paragraph as an unfocused slug, then remove unfocused class to trigger transtion + // The order is important: if we set -former before -former-unfocused, we'll get two transitions + $paragraph = this.getDocument().getBranchNodeFromOffset( offset + 1 ).$element; + $paragraph.wrap( this.$( '<div>' ).addClass( 've-ce-branchNode-blockSlugWrapper-former-unfocused' ) ); + this.onModelSelect( model.getSelection() ); + $wrapper = $paragraph.parent(); + // Enable transitions + $wrapper.addClass( 've-ce-branchNode-blockSlugWrapper-former' ); + // Remove unfocused again to trigger transition + $wrapper.removeClass( 've-ce-branchNode-blockSlugWrapper-former-unfocused' ); }; /** -- To view, visit https://gerrit.wikimedia.org/r/164516 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: Ia59d3e3ad47f16381c8b386279d9a3d7648da842 Gerrit-PatchSet: 1 Gerrit-Project: VisualEditor/VisualEditor Gerrit-Branch: master Gerrit-Owner: Catrope <[email protected]> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
