JGonera has uploaded a new change for review.
https://gerrit.wikimedia.org/r/132352
Change subject: Add more Agora dialogs styling
......................................................................
Add more Agora dialogs styling
* Move more size/margin/padding related styles from generals styles to
Apex.
* Make dialog content in Agora scrollable.
* Add Agora-specific icons.
Change-Id: I17b80b8cf8953d774f0e47bab640d7160d26cfd0
---
M Gruntfile.js
M build/modules.json
M src/styles/Dialog.less
M src/styles/elements/ButtonedElement.less
M src/styles/layouts/BookletLayout.less
M src/themes/agora/Dialog.less
A src/themes/agora/Icons.less
M src/themes/agora/Window.less
A src/themes/agora/images/icons/check.svg
A src/themes/agora/layouts/BookletLayout.less
M src/themes/apex/Dialog.less
M src/themes/apex/elements/ButtonedElement.less
M src/themes/apex/layouts/BookletLayout.less
13 files changed, 89 insertions(+), 22 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/52/132352/1
diff --git a/Gruntfile.js b/Gruntfile.js
index e646c2d..41e4352 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -67,6 +67,11 @@
strip: 'src/styles/images',
dest: 'dist/images'
},
+ imagesAgora: {
+ src: 'src/themes/agora/images/**/*.*',
+ strip: 'src/themes/agora/images',
+ dest: 'dist/themes/agora/images'
+ },
i18n: {
src: 'i18n/*.json',
dest: 'dist'
diff --git a/build/modules.json b/build/modules.json
index 96739a8..94e33c2 100644
--- a/build/modules.json
+++ b/build/modules.json
@@ -152,11 +152,13 @@
"src/themes/agora/Dialog.less",
"src/themes/agora/Window.less",
"src/themes/agora/elements/ButtonedElement.less",
+ "src/themes/agora/layouts/BookletLayout.less",
"src/themes/agora/widgets/OptionWidget.less",
"src/themes/agora/widgets/ButtonOptionWidget.less",
"src/themes/agora/widgets/MenuItemWidget.less",
"src/themes/agora/widgets/MenuSectionItemWidget.less",
- "src/themes/agora/widgets/TextInputWidget.less"
+ "src/themes/agora/widgets/TextInputWidget.less",
+ "src/themes/agora/Icons.less"
]
}
}
diff --git a/src/styles/Dialog.less b/src/styles/Dialog.less
index b2713de..72b19cb 100644
--- a/src/styles/Dialog.less
+++ b/src/styles/Dialog.less
@@ -37,13 +37,8 @@
.oo-ui-window {
&-foot {
- bottom: 0;
- height: 4.8em;
- padding: 1em;
-
.oo-ui-buttonedElement-framed {
float: left;
- margin: 0.125em 0.25em;
}
.oo-ui-flaggableElement-primary,
diff --git a/src/styles/elements/ButtonedElement.less
b/src/styles/elements/ButtonedElement.less
index faf7d37..a6fb0f7 100644
--- a/src/styles/elements/ButtonedElement.less
+++ b/src/styles/elements/ButtonedElement.less
@@ -45,8 +45,6 @@
.oo-ui-buttonedElement-framed {
.oo-ui-buttonedElement-button {
display: inline-block;
- margin: 0.1em 0;
- padding: 0.2em 0.8em;
vertical-align: top;
text-align: center;
@@ -54,18 +52,6 @@
display: inline-block;
vertical-align: middle;
line-height: 1.9em;
- }
- }
-
- &.oo-ui-iconedElement {
- .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon {
- margin-left: -0.5em;
- margin-right: -0.5em;
- }
-
- &.oo-ui-labeledElement .oo-ui-buttonedElement-button >
.oo-ui-iconedElement-icon {
- margin-left: -0.5em;
- margin-right: 0.3em;
}
}
diff --git a/src/styles/layouts/BookletLayout.less
b/src/styles/layouts/BookletLayout.less
index a27f0db..16c4d86 100644
--- a/src/styles/layouts/BookletLayout.less
+++ b/src/styles/layouts/BookletLayout.less
@@ -7,7 +7,6 @@
}
.oo-ui-panelLayout {
- padding: 1.5em;
width: 100%;
.oo-ui-box-sizing(border-box);
diff --git a/src/themes/agora/Dialog.less b/src/themes/agora/Dialog.less
index 28cd68a..3e23701 100644
--- a/src/themes/agora/Dialog.less
+++ b/src/themes/agora/Dialog.less
@@ -16,7 +16,30 @@
.oo-ui-window {
&-body {
- position: relative;
+ position: absolute;
+ top: @window-header-height;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ overflow-y: auto;
+ }
+
+ &-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;
+ }
+ }
}
}
}
diff --git a/src/themes/agora/Icons.less b/src/themes/agora/Icons.less
new file mode 100644
index 0000000..24d8d59
--- /dev/null
+++ b/src/themes/agora/Icons.less
@@ -0,0 +1,11 @@
+@import '../../styles/mixins';
+@import 'variables';
+
+/* Icons */
+
+.oo-ui-icon {
+ &-check {
+ .oo-ui-background-image('themes/agora/images/icons/check.svg');
+ background: @color-progressive;
+ }
+}
diff --git a/src/themes/agora/Window.less b/src/themes/agora/Window.less
index cd95a61..b14e098 100644
--- a/src/themes/agora/Window.less
+++ b/src/themes/agora/Window.less
@@ -1,3 +1,4 @@
+@import '../../styles/mixins';
@import 'mixins';
@import 'variables';
@@ -5,6 +6,7 @@
&-head {
height: @window-header-height;
border-bottom: 1px solid @color-shadow;
+ .oo-ui-box-sizing(border-box);
}
&-body {
diff --git a/src/themes/agora/images/icons/check.svg
b/src/themes/agora/images/icons/check.svg
new file mode 100644
index 0000000..6a91939
--- /dev/null
+++ b/src/themes/agora/images/icons/check.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version:
6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px"
+ width="44.075px" height="44.076px" viewBox="0 0 44.075 44.076"
enable-background="new 0 0 44.075 44.076" xml:space="preserve">
+<polygon fill="#FFFFFF" points="41.673,12.657 15.385,37.159 15.201,36.961
10.037,31.424 2.402,23.239 8.057,17.962 15.693,26.157
+ 36.319,6.917 "/>
+</svg>
diff --git a/src/themes/agora/layouts/BookletLayout.less
b/src/themes/agora/layouts/BookletLayout.less
new file mode 100644
index 0000000..045d545
--- /dev/null
+++ b/src/themes/agora/layouts/BookletLayout.less
@@ -0,0 +1,7 @@
+.oo-ui-bookletLayout {
+ &-stackLayout {
+ .oo-ui-panelLayout {
+ padding: 0 0 1em;
+ }
+ }
+}
diff --git a/src/themes/apex/Dialog.less b/src/themes/apex/Dialog.less
index 3d9d37f..931da86 100644
--- a/src/themes/apex/Dialog.less
+++ b/src/themes/apex/Dialog.less
@@ -99,6 +99,15 @@
box-shadow: 0 0 0.66em rgba(0,0,0,0.25);
z-index: 2;
}
+ &-foot {
+ bottom: 0;
+ height: 4.8em;
+ padding: 1em;
+
+ .oo-ui-buttonedElement-framed {
+ margin: 0.125em 0.25em;
+ }
+ }
&-overlay {
z-index: 3;
}
diff --git a/src/themes/apex/elements/ButtonedElement.less
b/src/themes/apex/elements/ButtonedElement.less
index a3459a9..82e8728 100644
--- a/src/themes/apex/elements/ButtonedElement.less
+++ b/src/themes/apex/elements/ButtonedElement.less
@@ -47,6 +47,8 @@
.oo-ui-buttonedElement-framed {
.oo-ui-buttonedElement-button {
+ margin: 0.1em 0;
+ padding: 0.2em 0.8em;
border-radius: 0.3em;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
border: 1px #c9c9c9 solid;
@@ -67,6 +69,18 @@
}
}
+ &.oo-ui-iconedElement {
+ .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon {
+ margin-left: -0.5em;
+ margin-right: -0.5em;
+ }
+
+ &.oo-ui-labeledElement .oo-ui-buttonedElement-button >
.oo-ui-iconedElement-icon {
+ margin-left: -0.5em;
+ margin-right: 0.3em;
+ }
+ }
+
&.oo-ui-flaggableElement {
&-primary .oo-ui-buttonedElement-button {
border: solid 1px #a6cee1;
diff --git a/src/themes/apex/layouts/BookletLayout.less
b/src/themes/apex/layouts/BookletLayout.less
index 26a3b39..a62f1ab 100644
--- a/src/themes/apex/layouts/BookletLayout.less
+++ b/src/themes/apex/layouts/BookletLayout.less
@@ -1,6 +1,12 @@
@import '../../../styles/mixins';
.oo-ui-bookletLayout {
+ &-stackLayout {
+ .oo-ui-panelLayout {
+ padding: 1.5em;
+ }
+ }
+
&-outlinePanel {
border-right: solid 1px #ddd;
--
To view, visit https://gerrit.wikimedia.org/r/132352
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I17b80b8cf8953d774f0e47bab640d7160d26cfd0
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: JGonera <jgon...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
