Trevor Parscal has uploaded a new change for review.
https://gerrit.wikimedia.org/r/146296
Change subject: [WIP] Get OOUI working with mobile again
......................................................................
[WIP] Get OOUI working with mobile again
Change-Id: I174a2e9b17872b6124a99a546fd8fbefe75fa3f1
---
M build/modules.json
M src/Error.js
M src/WindowManager.js
M src/dialogs/MessageDialog.js
M src/layouts/BookletLayout.js
M src/layouts/PanelLayout.js
M src/styles/Window.less
M src/styles/WindowManager.less
A src/styles/dialogs/MessageDialog.less
A src/styles/dialogs/ProcessDialog.less
M src/styles/layouts/PanelLayout.less
M src/themes/agora/Dialog.less
D src/themes/agora/Window.less
A src/themes/agora/WindowManager.less
A src/themes/agora/dialogs/MessageDialog.less
A src/themes/agora/dialogs/ProcessDialog.less
A src/themes/agora/widgets/LookupWidget.less
M src/themes/apex/Window.less
M src/themes/apex/WindowManager.less
M src/themes/apex/dialogs/MessageDialog.less
M src/themes/apex/dialogs/ProcessDialog.less
M src/themes/apex/layouts/PanelLayout.less
M src/widgets/PopupWidget.js
23 files changed, 502 insertions(+), 176 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/96/146296/1
diff --git a/build/modules.json b/build/modules.json
index 97a9a1f..eee20ca 100644
--- a/build/modules.json
+++ b/build/modules.json
@@ -92,6 +92,8 @@
"src/styles/ToolGroup.less",
"src/styles/Window.less",
"src/styles/WindowManager.less",
+ "src/styles/dialogs/MessageDialog.less",
+ "src/styles/dialogs/ProcessDialog.less",
"src/styles/elements/ButtonedElement.less",
"src/styles/elements/ClippableElement.less",
"src/styles/elements/LabeledElement.less",
@@ -171,7 +173,9 @@
"oojs-ui-agora": {
"styles": [
"src/themes/agora/Dialog.less",
- "src/themes/agora/Window.less",
+ "src/themes/agora/WindowManager.less",
+ "src/themes/agora/dialogs/MessageDialog.less",
+ "src/themes/agora/dialogs/ProcessDialog.less",
"src/themes/agora/elements/ButtonedElement.less",
"src/themes/agora/layouts/BookletLayout.less",
"src/themes/agora/widgets/OptionWidget.less",
diff --git a/src/Error.js b/src/Error.js
index 5a8e8d8..ee09c32 100644
--- a/src/Error.js
+++ b/src/Error.js
@@ -15,7 +15,7 @@
// Properties
this.message = message instanceof jQuery ? message : String( message );
- this.recoverable = config.recoverable === undefined ? true :
!!config.recoverable;
+ this.recoverable = config.recoverable === undefined ||
!!config.recoverable;
};
/* Setup */
diff --git a/src/WindowManager.js b/src/WindowManager.js
index 98482cd..80e1586 100644
--- a/src/WindowManager.js
+++ b/src/WindowManager.js
@@ -53,7 +53,7 @@
// Properties
this.factory = config.factory;
- this.modal = config.modal === undefined ? true : !!config.modal;
+ this.modal = config.modal === undefined || !!config.modal;
this.windows = {};
this.opening = null;
this.opened = null;
@@ -617,6 +617,7 @@
}
this.$element.toggleClass( 'oo-ui-windowManager-fullscreen', size ===
'full' );
+ this.$element.toggleClass( 'oo-ui-windowManager-floating', size !==
'full' );
win.setDimensions( sizes[size] );
return this;
diff --git a/src/dialogs/MessageDialog.js b/src/dialogs/MessageDialog.js
index d4632ed..7e8dde0 100644
--- a/src/dialogs/MessageDialog.js
+++ b/src/dialogs/MessageDialog.js
@@ -151,7 +151,7 @@
'$': this.$, 'scrollable': true, 'classes': [
'oo-ui-messageDialog-container' ]
} );
this.text = new OO.ui.PanelLayout( {
- '$': this.$, 'padded': true, 'classes': [
'oo-ui-messageDialog-text' ]
+ '$': this.$, 'padded': true, 'expanded': false, 'classes': [
'oo-ui-messageDialog-text' ]
} );
this.message = new OO.ui.LabelWidget( {
'$': this.$, 'classes': [ 'oo-ui-messageDialog-message' ]
diff --git a/src/layouts/BookletLayout.js b/src/layouts/BookletLayout.js
index 424a70d..778acc4 100644
--- a/src/layouts/BookletLayout.js
+++ b/src/layouts/BookletLayout.js
@@ -23,7 +23,7 @@
this.pages = {};
this.ignoreFocus = false;
this.stackLayout = new OO.ui.StackLayout( { '$': this.$, 'continuous':
!!config.continuous } );
- this.autoFocus = config.autoFocus === undefined ? true :
!!config.autoFocus;
+ this.autoFocus = config.autoFocus === undefined || !!config.autoFocus;
this.outlineVisible = false;
this.outlined = !!config.outlined;
if ( this.outlined ) {
diff --git a/src/layouts/PanelLayout.js b/src/layouts/PanelLayout.js
index 8352d29..bbf3750 100644
--- a/src/layouts/PanelLayout.js
+++ b/src/layouts/PanelLayout.js
@@ -6,8 +6,9 @@
*
* @constructor
* @param {Object} [config] Configuration options
- * @cfg {boolean} [scrollable] Allow vertical scrolling
- * @cfg {boolean} [padded] Pad the content from the edges
+ * @cfg {boolean} [scrollable=false] Allow vertical scrolling
+ * @cfg {boolean} [padded=false] Pad the content from the edges
+ * @cfg {boolean} [expanded=true] Expand size to fill the entire parent element
*/
OO.ui.PanelLayout = function OoUiPanelLayout( config ) {
// Config initialization
@@ -25,6 +26,10 @@
if ( config.padded ) {
this.$element.addClass( 'oo-ui-panelLayout-padded' );
}
+
+ if ( config.expanded === undefined || config.expanded ) {
+ this.$element.addClass( 'oo-ui-panelLayout-expanded' );
+ }
};
/* Setup */
diff --git a/src/styles/Window.less b/src/styles/Window.less
index 2d2db1a..62a33db 100644
--- a/src/styles/Window.less
+++ b/src/styles/Window.less
@@ -3,9 +3,13 @@
.oo-ui-window {
line-height: 1em;
- &-frame > .oo-ui-frame {
- width: 100%;
- height: 100%;
+ > &-frame {
+ .oo-ui-box-sizing(border-box);
+
+ > .oo-ui-frame {
+ width: 100%;
+ height: 100%;
+ }
}
&-head,
diff --git a/src/styles/WindowManager.less b/src/styles/WindowManager.less
index 523d5b7..b04b55a 100644
--- a/src/styles/WindowManager.less
+++ b/src/styles/WindowManager.less
@@ -30,4 +30,11 @@
}
}
}
+
+ &-fullscreen > .oo-ui-dialog > .oo-ui-window-frame {
+ width: 100%;
+ height: 100%;
+ top: 0;
+ bottom: 0;
+ }
}
diff --git a/src/styles/dialogs/MessageDialog.less
b/src/styles/dialogs/MessageDialog.less
new file mode 100644
index 0000000..1f03bc7
--- /dev/null
+++ b/src/styles/dialogs/MessageDialog.less
@@ -0,0 +1,41 @@
+.oo-ui-messageDialog {
+ &-actions {
+ &-horizontal {
+ display: table;
+ table-layout: fixed;
+ width: 100%;
+
+ .oo-ui-actionWidget {
+ display: table-cell;
+ width: 1%;
+ }
+ }
+
+ &-vertical {
+ display: block;
+
+ .oo-ui-actionWidget {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+
+ .oo-ui-actionWidget {
+ position: relative;
+ text-align: center;
+
+ .oo-ui-buttonedElement-button {
+ display: block;
+ }
+
+ .oo-ui-labeledElement-label {
+ position: relative;
+ top: auto;
+ bottom: auto;
+ display: inline;
+ white-space: nowrap;
+ }
+ }
+ }
+}
diff --git a/src/styles/dialogs/ProcessDialog.less
b/src/styles/dialogs/ProcessDialog.less
new file mode 100644
index 0000000..5948232
--- /dev/null
+++ b/src/styles/dialogs/ProcessDialog.less
@@ -0,0 +1,49 @@
+.oo-ui-processDialog {
+ &-location {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ &-title {
+ display: inline;
+ }
+
+ &-actions {
+ &-safe,
+ &-primary,
+ &-other {
+ .oo-ui-actionWidget {
+ white-space: nowrap;
+ }
+ }
+
+ &-safe,
+ &-primary {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ }
+
+ &-safe {
+ left: 0;
+ }
+
+ &-primary {
+ right: 0;
+ }
+ }
+
+ &-errors {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ padding: 3em 3em 1.5em 3em;
+ z-index: 2;
+ overflow-x: hidden;
+ overflow-y: auto;
+ }
+}
diff --git a/src/styles/layouts/PanelLayout.less
b/src/styles/layouts/PanelLayout.less
index b648b3e..61fe171 100644
--- a/src/styles/layouts/PanelLayout.less
+++ b/src/styles/layouts/PanelLayout.less
@@ -1,6 +1,15 @@
.oo-ui-panelLayout {
+ position: relative;
&-scrollable {
overflow-y: auto;
}
+
+ &-expanded {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ }
}
diff --git a/src/themes/agora/Dialog.less b/src/themes/agora/Dialog.less
index 3e23701..524192e 100644
--- a/src/themes/agora/Dialog.less
+++ b/src/themes/agora/Dialog.less
@@ -1,54 +1,39 @@
+@import '../../styles/mixins';
@import 'mixins';
@import 'variables';
.oo-ui-dialog {
-
&-content {
- .oo-ui-window-closeButton {
- position: absolute;
- left: 0;
- top: 0;
- }
-
- .oo-ui-window-icon {
- margin-left: @window-header-height;
- }
-
- .oo-ui-window {
- &-body {
+ > .oo-ui-window {
+ &-head,
+ &-body,
+ &-foot {
position: absolute;
- top: @window-header-height;
- bottom: 0;
left: 0;
right: 0;
- overflow-y: auto;
+ overflow: hidden;
+ .oo-ui-box-sizing(border-box);
+ }
+
+ &-head {
+ z-index: 1;
+ top: 0;
+ }
+
+ &-body {
+ z-index: 2;
+ top: 0;
+ bottom: 0;
}
&-foot {
- position: absolute;
- top: 0;
- right: 0;
- height: @window-header-height;
-
- .oo-ui-buttonedElement-button {
- height: 100%;
-
- .oo-ui-labeledElement-label {
- display: inline-block;
- // don't use display: none for
accessibility reasons
- width: 0;
- text-indent: -9999px;
- }
- }
+ z-index: 1;
+ bottom: 0;
}
- }
- }
- &-medium {
- .oo-ui-window-frame {
- top: 0;
- bottom: 0;
- background-color: white;
+ &-overlay {
+ z-index: 3;
+ }
}
}
}
diff --git a/src/themes/agora/Window.less b/src/themes/agora/Window.less
deleted file mode 100644
index b14e098..0000000
--- a/src/themes/agora/Window.less
+++ /dev/null
@@ -1,25 +0,0 @@
-@import '../../styles/mixins';
-@import 'mixins';
-@import 'variables';
-
-.oo-ui-window {
- &-head {
- height: @window-header-height;
- border-bottom: 1px solid @color-shadow;
- .oo-ui-box-sizing(border-box);
- }
-
- &-body {
- padding: 2em @window-header-height;
- }
-
- &-icon {
- .icon();
-
- border-left: 1px solid @color-shadow;
- }
-
- &-title {
- line-height: @window-header-height;
- }
-}
diff --git a/src/themes/agora/WindowManager.less
b/src/themes/agora/WindowManager.less
new file mode 100644
index 0000000..ebd588e
--- /dev/null
+++ b/src/themes/agora/WindowManager.less
@@ -0,0 +1,33 @@
+@import '../../styles/mixins';
+
+.oo-ui-windowManager {
+ &-modal > .oo-ui-dialog {
+ background-color: rgba(255,255,255,0.5);
+ opacity: 0;
+
+ .oo-ui-transition(opacity 250ms ease-in-out);
+
+ > .oo-ui-window-frame {
+ top: 1em;
+ bottom: 1em;
+ background-color: #fff;
+
+ .oo-ui-transform(scale(0.5));
+ .oo-ui-transition(all 250ms ease-in-out);
+ }
+
+ &.oo-ui-window-ready {
+ opacity: 1;
+
+ > .oo-ui-window-frame {
+ .oo-ui-transform(scale(1));
+ }
+ }
+ }
+
+ &-modal&-floating > .oo-ui-dialog > .oo-ui-window-frame {
+ border: solid 1px #ccc;
+ border-radius: 0.5em;
+ box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.3);
+ }
+}
diff --git a/src/themes/agora/dialogs/MessageDialog.less
b/src/themes/agora/dialogs/MessageDialog.less
new file mode 100644
index 0000000..5657a7f
--- /dev/null
+++ b/src/themes/agora/dialogs/MessageDialog.less
@@ -0,0 +1,100 @@
+.oo-ui-messageDialog {
+ &-title,
+ &-message {
+ display: block;
+ text-align: center;
+ padding-top: 0.5em;
+ }
+
+ &-title {
+ font-size: 1.5em;
+ line-height: 1em;
+ color: #000;
+ }
+
+ &-message {
+ font-size: 0.9em;
+ line-height: 1.25em;
+ color: #666;
+
+ &-verbose {
+ font-size: 1.1em;
+ line-height: 1.5em;
+ text-align: left;
+ }
+ }
+
+ &-actions {
+ &-horizontal {
+ .oo-ui-actionWidget {
+ border-right: solid 1px #e5e5e5;
+
+ &:last-child {
+ border-right-width: 0;
+ }
+ }
+ }
+
+ &-vertical {
+ .oo-ui-actionWidget {
+ border-bottom: solid 1px #e5e5e5;
+
+ &:last-child {
+ border-bottom-width: 0;
+ }
+ }
+ }
+
+ .oo-ui-actionWidget {
+ .oo-ui-labeledElement-label {
+ text-align: center;
+ line-height: 3.4em;
+ padding: 0 2em;
+ }
+
+ &:hover {
+ background-color: rgba(0,0,0,0.05);
+ }
+
+ &:active {
+ background-color: rgba(0,0,0,0.1);
+ }
+
+ &.oo-ui-flaggableElement {
+ &-primary {
+ &:hover {
+ background-color:
rgba(8,126,204,0.05);
+ }
+
+ &:active {
+ background-color:
rgba(8,126,204,0.1);
+ }
+
+ .oo-ui-labeledElement-label {
+ font-weight: bold;
+ }
+ }
+
+ &-constructive {
+ &:hover {
+ background-color:
rgba(118,171,54,0.05);
+ }
+
+ &:active {
+ background-color:
rgba(118,171,54,0.1);
+ }
+ }
+
+ &-destructive {
+ &:hover {
+ background-color:
rgba(212,83,83,0.05);
+ }
+
+ &:active {
+ background-color:
rgba(212,83,83,0.1);
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/themes/agora/dialogs/ProcessDialog.less
b/src/themes/agora/dialogs/ProcessDialog.less
new file mode 100644
index 0000000..4515972
--- /dev/null
+++ b/src/themes/agora/dialogs/ProcessDialog.less
@@ -0,0 +1,183 @@
+@import '../../../styles/mixins';
+@import '../mixins';
+@import '../variables';
+
+@window-header-inner-height: @window-header-height - 1.5em;
+
+.oo-ui-processDialog {
+ &-content {
+ .oo-ui-window-head {
+ height: @window-header-height;
+ border-bottom: 1px solid @color-shadow;
+ .oo-ui-box-sizing(border-box);
+ }
+ .oo-ui-window-body {
+ top: @window-header-height;
+ padding: 2em 0;
+ }
+ }
+
+ &-navigation {
+ position: relative;
+ height: @window-header-height;
+ padding: 0 1em;
+ }
+
+ &-location {
+ padding: 0.25em 0;
+ height: @window-header-height;
+ cursor: default;
+ text-align: center;
+ }
+
+ &-title {
+ font-weight: bold;
+ line-height: @window-header-inner-height;
+ }
+
+ &-actions {
+ &-safe,
+ &-primary,
+ &-other {
+ .oo-ui-actionWidget {
+ .oo-ui-buttonedElement-button {
+ padding-top: 0.75em;
+ padding-bottom: 0.75em;
+ min-width: @window-header-inner-height;
+ min-height: @window-header-inner-height;
+ }
+
+ .oo-ui-labeledElement-label {
+ line-height:
@window-header-inner-height;
+ padding: 0 1em;
+ }
+
+ .oo-ui-iconedElement-icon {
+ position: absolute;
+ margin-top: -0.125em;
+ }
+
+ &.oo-ui-buttonedElement-framed
.oo-ui-buttonedElement-button {
+ padding: 0;
+ vertical-align: middle;
+ }
+ }
+ }
+
+ &-safe,
+ &-primary {
+ &.oo-ui-buttonedElement-framed
.oo-ui-buttonedElement-button {
+ margin: 0.75em;
+ }
+
+ .oo-ui-actionWidget {
+ &:hover {
+ background-color: rgba(0,0,0,0.05);
+ }
+
+ &:active {
+ background-color: rgba(0,0,0,0.1);
+ }
+
+ &.oo-ui-flaggableElement {
+ &-primary {
+ &:hover {
+ background-color:
rgba(8,126,204,0.05);
+ }
+
+ &:active {
+ background-color:
rgba(8,126,204,0.1);
+ }
+
+ .oo-ui-labeledElement-label {
+ font-weight: bold;
+ }
+ }
+
+ &-constructive {
+ &:hover {
+ background-color:
rgba(118,171,54,0.05);
+ }
+
+ &:active {
+ background-color:
rgba(118,171,54,0.1);
+ }
+ }
+
+ &-destructive {
+ &:hover {
+ background-color:
rgba(212,83,83,0.05);
+ }
+
+ &:active {
+ background-color:
rgba(212,83,83,0.1);
+ }
+ }
+ }
+ }
+ }
+
+ &-safe {
+ .oo-ui-actionWidget.oo-ui-iconedElement {
+ .oo-ui-iconedElement-icon {
+ left: 0.5em;
+ }
+
+ .oo-ui-labeledElement-label {
+ padding-left: 2.25em;
+ }
+ }
+ }
+
+ &-primary {
+ .oo-ui-actionWidget.oo-ui-iconedElement {
+ .oo-ui-iconedElement-icon {
+ right: 0.5em;
+ }
+
+ .oo-ui-labeledElement-label {
+ padding-right: 2.25em;
+ }
+ }
+ }
+
+ &-other:not(:empty) {
+ padding: 0.75em;
+
+ .oo-ui-actionWidget {
+ margin: 0 0.75em 0 0;
+ border: solid 1px #ccc;
+ border-radius: 0.25em;
+ }
+ }
+ }
+
+ > .oo-ui-window-frame {
+ min-height: 5em;
+ }
+
+ &-errors {
+ background-color: rgba(255,255,255,0.9);
+ padding: 3em 3em 1.5em 3em;
+ text-align: center;
+
+ .oo-ui-buttonWidget {
+ margin: 2em 1em 2em 1em;
+ }
+
+ &-title {
+ font-size: 1.5em;
+ color: #000;
+ margin-bottom: 2em;
+ }
+ }
+
+ &-error {
+ text-align: left;
+ margin: 1em;
+ padding: 1em;
+ border: solid 1px #ff9e9e;
+ background-color: #fff7f7;
+ border-radius: 0.25em;
+ }
+}
diff --git a/src/themes/agora/widgets/LookupWidget.less
b/src/themes/agora/widgets/LookupWidget.less
new file mode 100644
index 0000000..c6c544a
--- /dev/null
+++ b/src/themes/agora/widgets/LookupWidget.less
@@ -0,0 +1,5 @@
+.oo-ui-lookupWidget{
+ &-menu {
+ background-color: #fff;
+ }
+}
\ No newline at end of file
diff --git a/src/themes/apex/Window.less b/src/themes/apex/Window.less
index d9c5430..cc6866d 100644
--- a/src/themes/apex/Window.less
+++ b/src/themes/apex/Window.less
@@ -1,10 +1,6 @@
@import '../../styles/mixins';
.oo-ui-window {
- > .oo-ui-window-frame {
- .oo-ui-box-sizing(border-box);
- }
-
&-content {
background: transparent;
}
diff --git a/src/themes/apex/WindowManager.less
b/src/themes/apex/WindowManager.less
index 7f3a584..ebd588e 100644
--- a/src/themes/apex/WindowManager.less
+++ b/src/themes/apex/WindowManager.less
@@ -2,18 +2,15 @@
.oo-ui-windowManager {
&-modal > .oo-ui-dialog {
- background-color: #fff;
background-color: rgba(255,255,255,0.5);
opacity: 0;
+
.oo-ui-transition(opacity 250ms ease-in-out);
> .oo-ui-window-frame {
top: 1em;
bottom: 1em;
background-color: #fff;
- border: solid 1px #ccc;
- border-radius: 0.5em;
- box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.3);
.oo-ui-transform(scale(0.5));
.oo-ui-transition(all 250ms ease-in-out);
@@ -28,13 +25,9 @@
}
}
- &-fullscreen > .oo-ui-dialog > .oo-ui-window-frame {
- width: 100%;
- height: 100%;
- top: 0;
- bottom: 0;
- border: none;
- border-radius: 0;
- box-shadow: none;
+ &-modal&-floating > .oo-ui-dialog > .oo-ui-window-frame {
+ border: solid 1px #ccc;
+ border-radius: 0.5em;
+ box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.3);
}
}
diff --git a/src/themes/apex/dialogs/MessageDialog.less
b/src/themes/apex/dialogs/MessageDialog.less
index c2bba60..5516aae 100644
--- a/src/themes/apex/dialogs/MessageDialog.less
+++ b/src/themes/apex/dialogs/MessageDialog.less
@@ -1,49 +1,38 @@
.oo-ui-messageDialog {
- &-text.oo-ui-panelLayout {
- bottom: auto;
+ &-content {
+ .oo-ui-window-body {
+ box-shadow: 0 0 0.66em rgba(0,0,0,0.25);
+ }
+ }
+
+ &-title,
+ &-message {
+ display: block;
+ text-align: center;
+ padding-top: 0.5em;
}
&-title {
- display: block;
font-size: 1.5em;
+ line-height: 1em;
color: #000;
- padding-top: 0;
- text-align: center;
}
&-message {
- display: block;
font-size: 0.9em;
line-height: 1.25em;
color: #666;
- text-align: center;
&-verbose {
- text-align: left;
font-size: 1.1em;
line-height: 1.5em;
- }
- }
-
- &-content > .oo-ui-window {
- &-body {
- bottom: 3.4em;
- box-shadow: 0 0 0.66em rgba(0,0,0,0.25);
- }
- &-foot {
- min-height: 3.4em;
+ text-align: left;
}
}
&-actions {
&-horizontal {
- width: 100%;
- display: table;
- table-layout: fixed;
-
.oo-ui-actionWidget {
- display: table-cell;
- width: 1%;
border-right: solid 1px #e5e5e5;
&:last-child {
@@ -53,12 +42,7 @@
}
&-vertical {
- display: block;
-
.oo-ui-actionWidget {
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
border-bottom: solid 1px #e5e5e5;
&:last-child {
@@ -68,10 +52,11 @@
}
.oo-ui-actionWidget {
- position: relative;
- height: 3.4em;
- padding: 0;
- text-align: center;
+ .oo-ui-labeledElement-label {
+ text-align: center;
+ line-height: 3.4em;
+ padding: 0 2em;
+ }
&:hover {
background-color: rgba(0,0,0,0.05);
@@ -115,20 +100,6 @@
background-color:
rgba(212,83,83,0.1);
}
}
- }
-
- .oo-ui-buttonedElement-button {
- display: block;
- }
-
- .oo-ui-labeledElement-label {
- position: relative;
- top: auto;
- bottom: auto;
- display: inline;
- line-height: 3.4em;
- white-space: nowrap;
- padding: 0 2em;
}
}
}
diff --git a/src/themes/apex/dialogs/ProcessDialog.less
b/src/themes/apex/dialogs/ProcessDialog.less
index 23b7001..1806315 100644
--- a/src/themes/apex/dialogs/ProcessDialog.less
+++ b/src/themes/apex/dialogs/ProcessDialog.less
@@ -1,12 +1,10 @@
-@import '../../../styles/mixins';
-
.oo-ui-processDialog {
- &-content > .oo-ui-window {
- &-head {
+ &-content {
+ .oo-ui-window-head {
height: 3.4em;
}
- &-body {
+ .oo-ui-window-body {
top: 3.4em;
box-shadow: 0 0 0.66em rgba(0,0,0,0.25);
}
@@ -16,21 +14,13 @@
position: relative;
height: 3.4em;
padding: 0 1em;
- .oo-ui-unselectable();
}
&-location {
padding: 0.75em 0;
height: 1.9em;
- overflow: hidden;
cursor: default;
- text-overflow: ellipsis;
- white-space: nowrap;
text-align: center;
-
- .oo-ui-labelWidget {
- display: inline;
- }
}
&-title {
@@ -43,8 +33,6 @@
&-primary,
&-other {
.oo-ui-actionWidget {
- white-space: nowrap;
-
.oo-ui-buttonedElement-button {
padding-top: 0.75em;
padding-bottom: 0.75em;
@@ -71,10 +59,6 @@
&-safe,
&-primary {
- position: absolute;
- top: 0;
- bottom: 0;
-
&.oo-ui-buttonedElement-framed
.oo-ui-buttonedElement-button {
margin: 0.75em;
}
@@ -127,8 +111,6 @@
}
&-safe {
- left: 0;
-
.oo-ui-actionWidget.oo-ui-iconedElement {
.oo-ui-iconedElement-icon {
left: 0.5em;
@@ -141,8 +123,6 @@
}
&-primary {
- right: 0;
-
.oo-ui-actionWidget.oo-ui-iconedElement {
.oo-ui-iconedElement-icon {
right: 0.5em;
@@ -168,17 +148,8 @@
}
&-errors {
- display: none;
- position: absolute;
background-color: rgba(255,255,255,0.9);
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
padding: 3em 3em 1.5em 3em;
- z-index: 2;
- overflow-x: hidden;
- overflow-y: auto;
text-align: center;
.oo-ui-buttonWidget {
diff --git a/src/themes/apex/layouts/PanelLayout.less
b/src/themes/apex/layouts/PanelLayout.less
index 8a98204..e1d918f 100644
--- a/src/themes/apex/layouts/PanelLayout.less
+++ b/src/themes/apex/layouts/PanelLayout.less
@@ -1,10 +1,4 @@
.oo-ui-panelLayout {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
-
&-padded {
padding: 1.25em;
}
diff --git a/src/widgets/PopupWidget.js b/src/widgets/PopupWidget.js
index 83544c2..806b78b 100644
--- a/src/widgets/PopupWidget.js
+++ b/src/widgets/PopupWidget.js
@@ -39,7 +39,7 @@
this.autoClose = !!config.autoClose;
this.$autoCloseIgnore = config.$autoCloseIgnore;
this.transitionTimeout = null;
- this.anchor = false;
+ this.anchor = null;
this.width = config.width !== undefined ? config.width : 320;
this.height = config.height !== undefined ? config.height : null;
this.align = config.align || 'center';
@@ -50,7 +50,7 @@
this.closeButton.connect( this, { 'click': 'onCloseButtonClick' } );
// Initialization
- this.toggleAnchor( config.anchor !== undefined ? !!config.anchor : true
);
+ this.toggleAnchor( config.anchor === undefined || config.anchor );
this.$body.addClass( 'oo-ui-popupWidget-body' );
this.$anchor.addClass( 'oo-ui-popupWidget-anchor' );
this.$head
--
To view, visit https://gerrit.wikimedia.org/r/146296
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I174a2e9b17872b6124a99a546fd8fbefe75fa3f1
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Trevor Parscal <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
