jenkins-bot has submitted this change and it was merged.
Change subject: Fix focus state styling on wikitext and VE editors
......................................................................
Fix focus state styling on wikitext and VE editors
* Border colour should match inset colour
* VE focus box should go around whole target
Change-Id: I7eaf40dbd0675a6e7b4f47873a1a22b2ce4e12ea
---
M modules/editor/editors/visualeditor/ext.flow.editors.visualeditor.js
M modules/editor/editors/visualeditor/mw.flow.ve.Target.less
M modules/styles/board/editor-switcher.less
3 files changed, 17 insertions(+), 2 deletions(-)
Approvals:
Mooeypoo: Looks good to me, approved
jenkins-bot: Verified
diff --git
a/modules/editor/editors/visualeditor/ext.flow.editors.visualeditor.js
b/modules/editor/editors/visualeditor/ext.flow.editors.visualeditor.js
index e839608..ca0f95c 100644
--- a/modules/editor/editors/visualeditor/ext.flow.editors.visualeditor.js
+++ b/modules/editor/editors/visualeditor/ext.flow.editors.visualeditor.js
@@ -77,13 +77,21 @@
'mw-content-' + mw.config.get( 'wgVisualEditor'
).pageLanguageDir
);
+ // Pass surface focus state to parent
+ surface.getView()
+ .on( 'focus', $.proxy( function () {
+ this.target.$element.addClass(
'flow-ui-focused' );
+ }, this ) )
+ .on( 'blur', $.proxy( function () {
+ this.target.$element.removeClass(
'flow-ui-focused' );
+ }, this ) );
+
// focus VE instance if textarea had focus
if ( !$focusedElement.length || this.$node.is( $focusedElement
) ) {
surface.getView().focus();
}
$veNode = surface.$element.find( '.ve-ce-documentNode' );
- $veNode.addClass( 'mw-ui-input' );
// HACK: simulate a keyup event on the original node, so the
validation code will
// pick up changes in the new node
diff --git a/modules/editor/editors/visualeditor/mw.flow.ve.Target.less
b/modules/editor/editors/visualeditor/mw.flow.ve.Target.less
index 90c52b4..7d42ac9 100644
--- a/modules/editor/editors/visualeditor/mw.flow.ve.Target.less
+++ b/modules/editor/editors/visualeditor/mw.flow.ve.Target.less
@@ -1,4 +1,5 @@
@import 'mediawiki.mixins';
+@import 'mediawiki.ui/variables';
.flow-component {
.ve-init-target {
@@ -11,6 +12,11 @@
// Return to .mw-body-content font-size
// TODO: Make this theme specific
font-size: 0.875/0.8em;
+ }
+
+ &.flow-ui-focused {
+ border-color: @colorProgressive;
+ box-shadow: inset 0 0 0 2px @colorProgressive;
}
}
@@ -30,7 +36,7 @@
// The -40 matches the padding-bottom on .ve-ce-documentNode to
put the toolbar inside
// the editing area. The 2px of positive margin gives room for
the blue border of the
// documentNode (via .mw-ui-input)
- margin: -42px 2px 0 2px;
+ margin: -42px 2px 1px 2px;
}
// Due to this being floated, it needs a matching top margin to still
display inside the bar
diff --git a/modules/styles/board/editor-switcher.less
b/modules/styles/board/editor-switcher.less
index 32b20ec..4457981 100644
--- a/modules/styles/board/editor-switcher.less
+++ b/modules/styles/board/editor-switcher.less
@@ -15,6 +15,7 @@
// Undo border & box-shadow on textarea and re-apply it on the
// div that contains textarea + legal text + switch button
&.flow-ui-focused {
+ border-color: @colorProgressive;
box-shadow: inset 0 0 0 2px @colorProgressive;
}
.oo-ui-textInputWidget textarea {
--
To view, visit https://gerrit.wikimedia.org/r/220454
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I7eaf40dbd0675a6e7b4f47873a1a22b2ce4e12ea
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Flow
Gerrit-Branch: master
Gerrit-Owner: Esanders <[email protected]>
Gerrit-Reviewer: Catrope <[email protected]>
Gerrit-Reviewer: Esanders <[email protected]>
Gerrit-Reviewer: Mattflaschen <[email protected]>
Gerrit-Reviewer: Mooeypoo <[email protected]>
Gerrit-Reviewer: Pginer <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
