Trevor Parscal has uploaded a new change for review.
https://gerrit.wikimedia.org/r/157866
Change subject: [WIP] MediaWiki theme
......................................................................
[WIP] MediaWiki theme
Following the latest design (which is a proprietary graphics file on DropBox).
Done:
* Button/ButtonSelectGroup/ButtonGroup
* ToggleSwitch
Todo:
* Input
* Menu
* Popup
* Dialog
* Toolbar/Tool/ToolGroup
* Others
Change-Id: Ieb27c3fd11d5b493823115c87970ac3d76fd41b3
---
M Gruntfile.js
M build/modules.json
M demos/demo.js
M demos/index.html
M src/elements/ClippableElement.js
M src/themes/blank/elements.less
A src/themes/mediawiki/common.less
A src/themes/mediawiki/core.less
A src/themes/mediawiki/elements.less
A src/themes/mediawiki/layouts.less
A src/themes/mediawiki/tools.less
A src/themes/mediawiki/widgets.less
A src/themes/mediawiki/windows.less
13 files changed, 476 insertions(+), 5 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/66/157866/1
diff --git a/Gruntfile.js b/Gruntfile.js
index f7a1e86..3c3b892 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -22,7 +22,8 @@
styleTargets = {
'oojs-ui': moduleUtils.expandResources(
modules['oojs-ui'].styles ),
'oojs-ui-apex': moduleUtils.expandResources(
modules['oojs-ui-apex'].styles ),
- 'oojs-ui-minerva': moduleUtils.expandResources(
modules['oojs-ui-minerva'].styles )
+ 'oojs-ui-minerva': moduleUtils.expandResources(
modules['oojs-ui-minerva'].styles ),
+ 'oojs-ui-mediawiki': moduleUtils.expandResources(
modules['oojs-ui-mediawiki'].styles )
},
lessFiles = {},
concatCssFiles = {},
@@ -56,7 +57,8 @@
code: modules['oojs-ui'].scripts,
styles: [].concat( lessFiles['dist/oojs-ui.css'],
lessFiles['dist/oojs-ui.svg.css'] ),
apex: lessFiles['dist/oojs-ui-apex.css'],
- minerva: lessFiles['dist/oojs-ui-minerva.css']
+ minerva: lessFiles['dist/oojs-ui-minerva.css'],
+ mediawiki: lessFiles['dist/oojs-ui-mediawiki.css']
},
less: {
dist: {
diff --git a/build/modules.json b/build/modules.json
index eead42d..5d8984f 100644
--- a/build/modules.json
+++ b/build/modules.json
@@ -102,5 +102,10 @@
"src/themes/minerva/core.less",
"src/themes/minerva/images/vector.less"
]
+ },
+ "oojs-ui-mediawiki": {
+ "styles": [
+ "src/themes/mediawiki/core.less"
+ ]
}
}
diff --git a/demos/demo.js b/demos/demo.js
index f0198c1..91da382 100644
--- a/demos/demo.js
+++ b/demos/demo.js
@@ -13,7 +13,8 @@
pageMenuMenu = pageMenu.getMenu(),
themeSelect = new OO.ui.ButtonSelectWidget().addItems( [
new OO.ui.ButtonOptionWidget( 'apex', { label: 'Apex' }
),
- new OO.ui.ButtonOptionWidget( 'minerva', { label:
'Minerva' } )
+ new OO.ui.ButtonOptionWidget( 'minerva', { label:
'Minerva' } ),
+ new OO.ui.ButtonOptionWidget( 'mediawiki', { label:
'MediaWiki' } )
] ),
directionSelect = new OO.ui.ButtonSelectWidget().addItems( [
new OO.ui.ButtonOptionWidget( 'ltr', { label: 'LTR' } ),
diff --git a/demos/index.html b/demos/index.html
index 80b1cb9..c932fb5 100644
--- a/demos/index.html
+++ b/demos/index.html
@@ -7,11 +7,13 @@
<link rel="stylesheet" href="../dist/oojs-ui.svg.css"
class="stylesheet-dir-ltr stylesheet-theme-all" disabled>
<link rel="stylesheet" href="../dist/oojs-ui-apex.css"
class="stylesheet-dir-ltr stylesheet-theme-apex" disabled>
<link rel="stylesheet" href="../dist/oojs-ui-minerva.css"
class="stylesheet-dir-ltr stylesheet-theme-minerva" disabled>
+ <link rel="stylesheet" href="../dist/oojs-ui-mediawiki.css"
class="stylesheet-dir-ltr stylesheet-theme-mediawiki" disabled>
<link rel="stylesheet" href="demo.css" class="stylesheet-dir-ltr
stylesheet-theme-all" disabled>
<!-- RTL -->
<link rel="stylesheet" href="../dist/oojs-ui.svg.rtl.css"
class="stylesheet-dir-rtl stylesheet-theme-all" disabled>
<link rel="stylesheet" href="../dist/oojs-ui-apex.rtl.css"
class="stylesheet-dir-rtl stylesheet-theme-apex" disabled>
<link rel="stylesheet" href="../dist/oojs-ui-minerva.rtl.css"
class="stylesheet-dir-rtl stylesheet-theme-minerva" disabled>
+ <link rel="stylesheet" href="../dist/oojs-ui-mediawiki.rtl.css"
class="stylesheet-dir-rtl stylesheet-theme-mediawiki" disabled>
<link rel="stylesheet" href="demo.rtl.css" class="stylesheet-dir-rtl
stylesheet-theme-all" disabled>
<!-- Prevent scaling on mobile devices which cause problems with dialog
sizing -->
<meta name="viewport" content="width=device-width, user-scalable=no">
diff --git a/src/elements/ClippableElement.js b/src/elements/ClippableElement.js
index 34e187c..df37540 100644
--- a/src/elements/ClippableElement.js
+++ b/src/elements/ClippableElement.js
@@ -181,7 +181,7 @@
this.$clippable.css( 'overflowY', '' );
}
- this.clippedHorizontally = clipWidth
+ this.clippedHorizontally = clipWidth;
this.clippedVertically = clipHeight;
return this;
diff --git a/src/themes/blank/elements.less b/src/themes/blank/elements.less
index 10a6263..03c58fa 100644
--- a/src/themes/blank/elements.less
+++ b/src/themes/blank/elements.less
@@ -17,4 +17,3 @@
.theme-oo-ui-popupElement () {}
.theme-oo-ui-titledElement () {}
-
diff --git a/src/themes/mediawiki/common.less b/src/themes/mediawiki/common.less
new file mode 100644
index 0000000..c6397a2
--- /dev/null
+++ b/src/themes/mediawiki/common.less
@@ -0,0 +1,10 @@
+// Base variables and mixins
+@import '../../styles/common';
+
+// Theme variables
+
+// (add variables here)
+
+// Theme mixins
+
+// (add mixins here)
diff --git a/src/themes/mediawiki/core.less b/src/themes/mediawiki/core.less
new file mode 100644
index 0000000..1c83a94
--- /dev/null
+++ b/src/themes/mediawiki/core.less
@@ -0,0 +1,12 @@
+// Base and theme variables and mixins
+@import 'common';
+
+// Theme rules
+@import 'elements';
+@import 'layouts';
+@import 'tools';
+@import 'widgets';
+@import 'windows';
+
+// Base rules
+@import '../../styles/core';
diff --git a/src/themes/mediawiki/elements.less
b/src/themes/mediawiki/elements.less
new file mode 100644
index 0000000..10499ab
--- /dev/null
+++ b/src/themes/mediawiki/elements.less
@@ -0,0 +1,184 @@
+@import 'common';
+
+.theme-oo-ui-buttonElement () {
+ > .oo-ui-buttonElement-button {
+ font-weight: bold;
+
+ > .oo-ui-iconElement-icon {
+ margin-left: 0;
+ }
+
+ > .oo-ui-indicatorElement-indicator {
+ margin-right: -0.75em;
+ }
+ }
+
+ &.oo-ui-indicatorElement > .oo-ui-buttonElement-button >
.oo-ui-indicatorElement-indicator,
+ &.oo-ui-iconElement > .oo-ui-buttonElement-button >
.oo-ui-iconElement-icon {
+ opacity: 0.8;
+ width: 1.9em;
+ height: 1.9em;
+ }
+
+ &-frameless {
+ > .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
+ margin-left: 0.25em;
+ }
+
+ &.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
+ > .oo-ui-iconElement-icon {
+ opacity: 0.2;
+ }
+ > .oo-ui-labelElement-label {
+ color: #ddd;
+ }
+ }
+
+ &.oo-ui-widget-enabled {
+ > .oo-ui-buttonElement-button >
.oo-ui-labelElement-label {
+ color: #757575;
+ }
+
+ &.oo-ui-flaggedElement {
+ &-primary {
+
.mediawiki-framelesss-button-colored(#598AD1, #015CCC);
+ }
+
+ &-constructive {
+
.mediawiki-framelesss-button-colored(#00C697, #008C6D);
+ }
+
+ &-destructive {
+
.mediawiki-framelesss-button-colored(#E81915, #A7170F);
+ }
+ }
+ }
+ }
+
+ &-framed {
+ > .oo-ui-buttonElement-button {
+ margin: 0.1em 0;
+ padding: 0.3em 1em;
+ border-radius: 0.3em;
+
+ .oo-ui-transition(
+ background 0.1s ease-in-out,
+ color 0.1s ease-in-out,
+ box-shadow 0.1s ease-in-out
+ );
+
+ > .oo-ui-labelElement-label {
+ line-height: 1.9em;
+ }
+ }
+
+ &.oo-ui-iconElement {
+ > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon
{
+ margin-left: -0.5em;
+ margin-right: -0.5em;
+ }
+
+ &.oo-ui-labelElement > .oo-ui-buttonElement-button >
.oo-ui-iconElement-icon {
+ margin-left: -0.5em;
+ margin-right: 0.3em;
+ }
+ }
+
+ &.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
+ color: #ddd;
+ background: #fff;
+ border: solid 1px #cdcdcd;
+ }
+
+ &.oo-ui-widget-enabled {
+ > .oo-ui-buttonElement-button {
+ color: #757575;
+ background-color: #fff;
+ border: solid 1px #cdcdcd;
+
+ &:hover,
+ &:focus {
+ box-shadow: inset 0 -0.2em 0 0 #d0d0d0,
0 0.1em 0 0 rgba(0,0,0,0.1);
+ border-color: #aaa;
+ }
+ }
+
+ &.oo-ui-buttonElement-active >
.oo-ui-buttonElement-button,
+ &.oo-ui-buttonElement-pressed >
.oo-ui-buttonElement-button {
+ background-color: #d0d0d0;
+ border-color: #d0d0d0;
+ }
+
+ &.oo-ui-flaggedElement {
+ &-primary {
+
.mediawiki-framed-button-colored(#0274ff, #015ccc);
+ }
+
+ &-constructive {
+
.mediawiki-framed-button-colored(#00Af89, #008c6d);
+ }
+
+ &-destructive {
+
.mediawiki-framed-button-colored(#d11d13, #a7170f);
+ }
+ }
+ }
+ }
+}
+
+.mediawiki-framelesss-button-colored (@neutral, @active) {
+ > .oo-ui-buttonElement-button {
+ &:hover,
+ &:focus {
+ > .oo-ui-labelElement-label {
+ color: @neutral;
+ }
+ }
+
+ > .oo-ui-labelElement-label {
+ color: #777777;
+ }
+ }
+
+ &.oo-ui-buttonElement-active > .oo-ui-buttonElement-button,
+ &.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
+ background-color: @active;
+ }
+}
+
+.mediawiki-framed-button-colored (@neutral, @active ) {
+ > .oo-ui-buttonElement-button {
+ text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
+ color: #fff;
+ background-color: @neutral;
+ border-color: @neutral;
+
+ &:hover,
+ &:focus {
+ box-shadow: inset 0 -0.2em 0 0 @active, 0 0.1em 0 0
rgba(0,0,0,0.1);
+ border-bottom-color: @active;
+ }
+ }
+
+ &.oo-ui-buttonElement-active > .oo-ui-buttonElement-button,
+ &.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
+ background-color: @active;
+ }
+}
+
+.theme-oo-ui-clippableElement () {}
+
+.theme-oo-ui-flaggedElement () {}
+
+.theme-oo-ui-groupElement () {}
+
+.theme-oo-ui-iconElement () {}
+
+.theme-oo-ui-indicatorElement () {}
+
+.theme-oo-ui-labelElement () {}
+
+.theme-oo-ui-popupElement () {}
+
+.theme-oo-ui-titledElement () {}
+
diff --git a/src/themes/mediawiki/layouts.less
b/src/themes/mediawiki/layouts.less
new file mode 100644
index 0000000..3442c68
--- /dev/null
+++ b/src/themes/mediawiki/layouts.less
@@ -0,0 +1,20 @@
+@import 'common';
+
+.theme-oo-ui-layout () {}
+
+.theme-oo-ui-bookletLayout () {}
+
+.theme-oo-ui-fieldLayout () {}
+
+.theme-oo-ui-fieldsetLayout () {}
+
+.theme-oo-ui-formLayout () {}
+
+.theme-oo-ui-gridLayout () {}
+
+.theme-oo-ui-panelLayout () {}
+
+.theme-oo-ui-pageLayout () {}
+
+.theme-oo-ui-stackLayout () {}
+
diff --git a/src/themes/mediawiki/tools.less b/src/themes/mediawiki/tools.less
new file mode 100644
index 0000000..90377a7
--- /dev/null
+++ b/src/themes/mediawiki/tools.less
@@ -0,0 +1,18 @@
+@import 'common';
+
+.theme-oo-ui-toolbar () {}
+
+.theme-oo-ui-tool () {}
+
+.theme-oo-ui-popupTool () {}
+
+.theme-oo-ui-toolGroup () {}
+
+.theme-oo-ui-barToolGroup () {}
+
+.theme-oo-ui-popupToolGroup () {}
+
+.theme-oo-ui-listToolGroup () {}
+
+.theme-oo-ui-menuToolGroup () {}
+
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
new file mode 100644
index 0000000..e29363c
--- /dev/null
+++ b/src/themes/mediawiki/widgets.less
@@ -0,0 +1,207 @@
+@import 'common';
+
+.theme-oo-ui-widget () {}
+
+.theme-oo-ui-lookupInputWidget () {}
+
+.theme-oo-ui-outlineControlsWidget () {}
+
+.theme-oo-ui-toggleWidget () {}
+
+.theme-oo-ui-buttonGroupWidget () {
+ display: inline-block;
+ white-space: nowrap;
+ border-radius: 0.3em;
+
+ .oo-ui-buttonElement-framed {
+ .oo-ui-buttonElement-button {
+ border-radius: 0;
+ margin-bottom: -1px;
+ margin-left: -1px;
+ }
+
+ &:first-child .oo-ui-buttonElement-button {
+ border-bottom-left-radius: 0.3em;
+ border-top-left-radius: 0.3em;
+ margin-left: 0;
+ }
+
+ &:last-child .oo-ui-buttonElement-button {
+ border-bottom-right-radius: 0.3em;
+ border-top-right-radius: 0.3em;
+ }
+ }
+}
+
+.theme-oo-ui-buttonWidget () {}
+
+.theme-oo-ui-actionWidget () {}
+
+.theme-oo-ui-popupButtonWidget () {}
+
+.theme-oo-ui-toggleButtonWidget () {}
+
+.theme-oo-ui-iconWidget () {
+ line-height: 2.5em;
+ height: 1.9em;
+ width: 1.9em;
+
+ &.oo-ui-widget-disabled {
+ opacity: 0.2;
+ }
+}
+
+.theme-oo-ui-indicatorWidget () {
+ line-height: 2.5em;
+ height: 1.9em;
+ width: 1.9em;
+
+ &.oo-ui-widget-disabled {
+ opacity: 0.2;
+ }
+}
+
+.theme-oo-ui-inlineMenuWidget () {}
+
+.theme-oo-ui-inputWidget () {}
+
+.theme-oo-ui-checkboxInputWidget () {}
+
+.theme-oo-ui-textInputWidget () {}
+
+.theme-oo-ui-comboBoxWidget () {}
+
+.theme-oo-ui-labelWidget () {}
+
+.theme-oo-ui-optionWidget () {}
+
+.theme-oo-ui-decoratedOptionWidget () {}
+
+.theme-oo-ui-buttonOptionWidget () {
+ padding: 0;
+ background-color: transparent;
+
+ .oo-ui-buttonElement-button {
+ height: 1.9em;
+ }
+
+ &.oo-ui-iconElement .oo-ui-iconElement-icon,
+ &.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
+ height: 1.9em;
+ margin-top: 0;
+ }
+
+ &.oo-ui-optionWidget-selected,
+ &.oo-ui-optionWidget-pressed,
+ &.oo-ui-optionWidget-highlighted {
+ background-color: transparent;
+ }
+}
+
+.theme-oo-ui-menuItemWidget () {}
+
+.theme-oo-ui-menuSectionItemWidget () {}
+
+.theme-oo-ui-outlineItemWidget () {}
+
+.theme-oo-ui-popupWidget () {}
+
+.theme-oo-ui-searchWidget () {}
+
+.theme-oo-ui-selectWidget () {
+ border-radius: 0.3em;
+
+ .oo-ui-buttonOptionWidget {
+ .oo-ui-buttonElement-button {
+ border-radius: 0;
+ margin-left: -1px;
+ }
+
+ &:first-child .oo-ui-buttonElement-button {
+ border-bottom-left-radius: 0.3em;
+ border-top-left-radius: 0.3em;
+ margin-left: 0;
+ }
+
+ &:last-child .oo-ui-buttonElement-button {
+ border-bottom-right-radius: 0.3em;
+ border-top-right-radius: 0.3em;
+ }
+ }
+}
+
+.theme-oo-ui-buttonSelectWidget () {}
+
+.theme-oo-ui-menuWidget () {}
+
+.theme-oo-ui-textInputMenuWidget () {}
+
+.theme-oo-ui-outlineWidget () {}
+
+.theme-oo-ui-toggleSwitchWidget () {
+ @travelDistance: 2em;
+ height: 2em;
+ width: @travelDistance + 2em;
+ border-radius: 1em;
+ border: 1px #cdcdcd solid;
+
+ &-grip {
+ top: 0.25em;
+ left: 0.25em;
+ width: 1.5em;
+ height: 1.5em;
+ margin-top: -1px;
+ border-radius: 1em;
+ border: 1px #cdcdcd solid;
+ background-color: #fff;
+
+ .oo-ui-transition(left 0.1s ease-in-out, margin-left 0.1s
ease-in-out);
+ }
+
+ &-glow {
+ border-radius: 1em;
+ background-color: #fff;
+
+ .oo-ui-transition(background-color 0.1s ease-in-out);
+ }
+
+ &.oo-ui-toggleWidget-on {
+ .oo-ui-toggleSwitchWidget-grip {
+ left: @travelDistance + 0.25em;
+ margin-left: -2px;
+ }
+ }
+
+ &.oo-ui-toggleWidget-off {
+ .oo-ui-toggleSwitchWidget-glow {
+ display: block;
+ }
+ .oo-ui-toggleSwitchWidget-grip {
+ left: 0.25em;
+ margin-left: 0;
+ }
+ }
+
+ &.oo-ui-widget-enabled {
+ border: 1px #cdcdcd solid;
+
+ &.oo-ui-toggleWidget-on {
+ border-color: #d0d0d0;
+
+ .oo-ui-toggleSwitchWidget-glow {
+ background-color: #d0d0d0;
+ }
+ .oo-ui-toggleSwitchWidget-grip {
+ border-color: #d0d0d0;
+ }
+ }
+
+ &.oo-ui-toggleWidget-off {
+ &:hover,
+ &:hover .oo-ui-toggleSwitchWidget-grip {
+ border-color: #aaa;
+ }
+ }
+ }
+}
+
diff --git a/src/themes/mediawiki/windows.less
b/src/themes/mediawiki/windows.less
new file mode 100644
index 0000000..35c0b40
--- /dev/null
+++ b/src/themes/mediawiki/windows.less
@@ -0,0 +1,11 @@
+@import 'common';
+
+.theme-oo-ui-window () {}
+
+.theme-oo-ui-dialog () {}
+
+.theme-oo-ui-messageDialog () {}
+
+.theme-oo-ui-processDialog () {}
+
+.theme-oo-ui-windowManager () {}
--
To view, visit https://gerrit.wikimedia.org/r/157866
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ieb27c3fd11d5b493823115c87970ac3d76fd41b3
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
