[MediaWiki-commits] [Gerrit] mediawiki...Flow[master]: Fix adjacent input widget border radii
jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/338794 )
Change subject: Fix adjacent input widget border radii
..
Fix adjacent input widget border radii
This does not address the issue with message boxes
above the first input.
Bug: T116573
Change-Id: Ia14c0d8f82b9c46349bfde11f91b28d941c5cb48
---
M modules/flow/ui/widgets/mw.flow.ui.NewTopicWidget.js
M modules/styles/flow/widgets/editor/mw.flow.ui.editor-monobook.less
M modules/styles/flow/widgets/editor/mw.flow.ui.editor-vector.less
M modules/styles/flow/widgets/mw.flow.ui.NewTopicWidget.less
4 files changed, 26 insertions(+), 1 deletion(-)
Approvals:
Catrope: Looks good to me, approved
jenkins-bot: Verified
diff --git a/modules/flow/ui/widgets/mw.flow.ui.NewTopicWidget.js
b/modules/flow/ui/widgets/mw.flow.ui.NewTopicWidget.js
index 9fba33c..927c19f 100644
--- a/modules/flow/ui/widgets/mw.flow.ui.NewTopicWidget.js
+++ b/modules/flow/ui/widgets/mw.flow.ui.NewTopicWidget.js
@@ -257,6 +257,7 @@
mw.flow.ui.NewTopicWidget.prototype.toggleExpanded = function (
expanded ) {
this.expanded = expanded !== undefined ? expanded :
!this.expanded;
+ this.$element.toggleClass( 'flow-ui-newTopicWidget-expanded',
this.expanded );
this.editor.toggle( this.expanded );
this.anonWarning.toggle( this.expanded );
this.canNotEdit.toggle( this.expanded );
diff --git a/modules/styles/flow/widgets/editor/mw.flow.ui.editor-monobook.less
b/modules/styles/flow/widgets/editor/mw.flow.ui.editor-monobook.less
index 193a343..bb200fd 100644
--- a/modules/styles/flow/widgets/editor/mw.flow.ui.editor-monobook.less
+++ b/modules/styles/flow/widgets/editor/mw.flow.ui.editor-monobook.less
@@ -61,11 +61,16 @@
}
}
+.flow-ui-newTopicWidget-title.oo-ui-textInputWidget input {
+ border-radius: 0.25em/1.5;
+}
+
.flow-editor,
.flow-ui-editorSwitcherWidget {
// Undo border & box-shadow on textarea and re-apply it on the
// div that contains textarea + legal text + switch button
border: 1px solid #ccc;
+ border-radius: 0.25em;
}
.flow-editor.flow-ui-focused,
diff --git a/modules/styles/flow/widgets/editor/mw.flow.ui.editor-vector.less
b/modules/styles/flow/widgets/editor/mw.flow.ui.editor-vector.less
index 483a16f..174514a 100644
--- a/modules/styles/flow/widgets/editor/mw.flow.ui.editor-vector.less
+++ b/modules/styles/flow/widgets/editor/mw.flow.ui.editor-vector.less
@@ -79,6 +79,7 @@
-moz-transition: border 0.2s cubic-bezier( 0.39, 0.575, 0.565, 1 ),
box-shadow 0.2s cubic-bezier( 0.39, 0.575, 0.565, 1 );
-o-transition: border 0.2s cubic-bezier( 0.39, 0.575, 0.565, 1 ),
box-shadow 0.2s cubic-bezier( 0.39, 0.575, 0.565, 1 );
transition: border 0.2s cubic-bezier( 0.39, 0.575, 0.565, 1 ),
box-shadow 0.2s cubic-bezier( 0.39, 0.575, 0.565, 1 );
+ border-radius: 2px;
}
.flow-editor.flow-ui-focused,
diff --git a/modules/styles/flow/widgets/mw.flow.ui.NewTopicWidget.less
b/modules/styles/flow/widgets/mw.flow.ui.NewTopicWidget.less
index dff1da4..f6d23e8 100644
--- a/modules/styles/flow/widgets/mw.flow.ui.NewTopicWidget.less
+++ b/modules/styles/flow/widgets/mw.flow.ui.NewTopicWidget.less
@@ -7,6 +7,11 @@
max-width: none;
input {
+ .flow-ui-newTopicWidget-expanded & {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+
// Match heading styles
font-size: 1.5em;
font-weight: bold;
@@ -21,7 +26,6 @@
padding: 0.3em 0.3em 0.3em 0.6em;
display: block;
vertical-align: middle;
- border-radius: 2px;
font-family: inherit;
-webkit-transition: border 0.2s cubic-bezier( 0.39,
0.575, 0.565, 1 ), box-shadow 0.2s cubic-bezier( 0.39, 0.575, 0.565, 1 );
-moz-transition: border 0.2s cubic-bezier( 0.39, 0.575,
0.565, 1 ), box-shadow 0.2s cubic-bezier( 0.39, 0.575, 0.565, 1 );
@@ -50,4 +54,18 @@
}
}
}
+
+ &-editor {
+ .flow-editor,
+ .flow-ui-editorSwitcherWidget {
+ margin-top: -1px;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+ .flow-editor.flow-ui-focused,
+ .flow-ui-editorSwitcherWidget-focused {
+ /* Force above the title widget so border isn't cropped
*/
+ position: relative;
+ }
+ }
}
--
To view, visit https://gerrit.wikimedia.org/r/338794
To unsubscribe,
[MediaWiki-commits] [Gerrit] mediawiki...Flow[master]: Fix adjacent input widget border radii
Esanders has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/338794 )
Change subject: Fix adjacent input widget border radii
..
Fix adjacent input widget border radii
This does not address the issue with message boxes
above the first input.
Bug: T116573
Change-Id: Ia14c0d8f82b9c46349bfde11f91b28d941c5cb48
---
M modules/flow/ui/widgets/mw.flow.ui.NewTopicWidget.js
M modules/styles/flow/widgets/editor/mw.flow.ui.editor-monobook.less
M modules/styles/flow/widgets/editor/mw.flow.ui.editor-vector.less
M modules/styles/flow/widgets/mw.flow.ui.NewTopicWidget.less
4 files changed, 26 insertions(+), 1 deletion(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Flow
refs/changes/94/338794/1
diff --git a/modules/flow/ui/widgets/mw.flow.ui.NewTopicWidget.js
b/modules/flow/ui/widgets/mw.flow.ui.NewTopicWidget.js
index 9fba33c..927c19f 100644
--- a/modules/flow/ui/widgets/mw.flow.ui.NewTopicWidget.js
+++ b/modules/flow/ui/widgets/mw.flow.ui.NewTopicWidget.js
@@ -257,6 +257,7 @@
mw.flow.ui.NewTopicWidget.prototype.toggleExpanded = function (
expanded ) {
this.expanded = expanded !== undefined ? expanded :
!this.expanded;
+ this.$element.toggleClass( 'flow-ui-newTopicWidget-expanded',
this.expanded );
this.editor.toggle( this.expanded );
this.anonWarning.toggle( this.expanded );
this.canNotEdit.toggle( this.expanded );
diff --git a/modules/styles/flow/widgets/editor/mw.flow.ui.editor-monobook.less
b/modules/styles/flow/widgets/editor/mw.flow.ui.editor-monobook.less
index 193a343..bb200fd 100644
--- a/modules/styles/flow/widgets/editor/mw.flow.ui.editor-monobook.less
+++ b/modules/styles/flow/widgets/editor/mw.flow.ui.editor-monobook.less
@@ -61,11 +61,16 @@
}
}
+.flow-ui-newTopicWidget-title.oo-ui-textInputWidget input {
+ border-radius: 0.25em/1.5;
+}
+
.flow-editor,
.flow-ui-editorSwitcherWidget {
// Undo border & box-shadow on textarea and re-apply it on the
// div that contains textarea + legal text + switch button
border: 1px solid #ccc;
+ border-radius: 0.25em;
}
.flow-editor.flow-ui-focused,
diff --git a/modules/styles/flow/widgets/editor/mw.flow.ui.editor-vector.less
b/modules/styles/flow/widgets/editor/mw.flow.ui.editor-vector.less
index 483a16f..174514a 100644
--- a/modules/styles/flow/widgets/editor/mw.flow.ui.editor-vector.less
+++ b/modules/styles/flow/widgets/editor/mw.flow.ui.editor-vector.less
@@ -79,6 +79,7 @@
-moz-transition: border 0.2s cubic-bezier( 0.39, 0.575, 0.565, 1 ),
box-shadow 0.2s cubic-bezier( 0.39, 0.575, 0.565, 1 );
-o-transition: border 0.2s cubic-bezier( 0.39, 0.575, 0.565, 1 ),
box-shadow 0.2s cubic-bezier( 0.39, 0.575, 0.565, 1 );
transition: border 0.2s cubic-bezier( 0.39, 0.575, 0.565, 1 ),
box-shadow 0.2s cubic-bezier( 0.39, 0.575, 0.565, 1 );
+ border-radius: 2px;
}
.flow-editor.flow-ui-focused,
diff --git a/modules/styles/flow/widgets/mw.flow.ui.NewTopicWidget.less
b/modules/styles/flow/widgets/mw.flow.ui.NewTopicWidget.less
index 39a4a99..88c8626 100644
--- a/modules/styles/flow/widgets/mw.flow.ui.NewTopicWidget.less
+++ b/modules/styles/flow/widgets/mw.flow.ui.NewTopicWidget.less
@@ -9,6 +9,11 @@
max-width: none;
input {
+ .flow-ui-newTopicWidget-expanded & {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+
// Match heading styles
font-size: 1.5em;
font-weight: bold;
@@ -23,7 +28,6 @@
padding: 0.3em 0.3em 0.3em 0.6em;
display: block;
vertical-align: middle;
- border-radius: 2px;
font-family: inherit;
-webkit-transition: border 0.2s cubic-bezier( 0.39,
0.575, 0.565, 1 ), box-shadow 0.2s cubic-bezier( 0.39, 0.575, 0.565, 1 );
-moz-transition: border 0.2s cubic-bezier( 0.39, 0.575,
0.565, 1 ), box-shadow 0.2s cubic-bezier( 0.39, 0.575, 0.565, 1 );
@@ -38,4 +42,18 @@
/* stylelint-enable indentation */
}
}
+
+ &-editor {
+ .flow-editor,
+ .flow-ui-editorSwitcherWidget {
+ margin-top: -1px;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+ .flow-editor.flow-ui-focused,
+ .flow-ui-editorSwitcherWidget-focused {
+ /* Force above the title widget so border isn't cropped
*/
+ position: relative;
+ }
+ }
}
--
To view, visit
