JGonera has uploaded a new change for review.
https://gerrit.wikimedia.org/r/92012
Change subject: Introduce OverlayNew
......................................................................
Introduce OverlayNew
This is the class that will be used for overlays overhaul, starting with
image upload overlay.
It also reverts the changes introduced in c5c6558 and provides an
alternative fix for Thank you button styling. Removing scoping from
current button styling would cause a lot of redundant CSS in new
overlays.
Change-Id: Icec386e9a8e7a4cc3ad18ecd81ca734439df76db
---
M includes/Resources.php
M includes/specials/SpecialMobileDiff.php
A javascripts/common/OverlayNew.js
A less/common/OverlayNew.less
M less/common/buttons.less
A less/common/images/cancel.png
A templates/OverlayNew.html
7 files changed, 154 insertions(+), 39 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/12/92012/1
diff --git a/includes/Resources.php b/includes/Resources.php
index 6e8873d..d2a9f91 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -323,9 +323,11 @@
'mobile.beta.common',
),
'styles' => array(
+ 'less/common/OverlayNew.less',
'less/modules/talk.less',
),
'scripts' => array(
+ 'javascripts/common/OverlayNew.js',
'javascripts/modules/mf-toggle-dynamic.js',
'javascripts/modules/talk/talk.js',
'javascripts/modules/notifications/notifications.js',
@@ -336,6 +338,9 @@
'javascripts/modules/tutorials/LeadPhotoTutorialOverlay.js',
'javascripts/modules/tutorials/newbieUploads.js',
),
+ 'templates' => array(
+ 'OverlayNew',
+ ),
'position' => 'bottom',
'messages' => array(
// for mf-toggle-dynamic.js
diff --git a/includes/specials/SpecialMobileDiff.php
b/includes/specials/SpecialMobileDiff.php
index 8aa5b8c..1aceee1 100644
--- a/includes/specials/SpecialMobileDiff.php
+++ b/includes/specials/SpecialMobileDiff.php
@@ -206,7 +206,7 @@
$output->addHtml(
Html::openElement( 'div', array( 'id' =>
'mw-mf-userinfo',
- 'class' => 'position-fixed' ) )
+ 'class' => 'buttonBar position-fixed' ) )
);
$userId = $this->rev->getUser();
diff --git a/javascripts/common/OverlayNew.js b/javascripts/common/OverlayNew.js
new file mode 100644
index 0000000..45b4242
--- /dev/null
+++ b/javascripts/common/OverlayNew.js
@@ -0,0 +1,12 @@
+// FIXME: merge with Overlay and remove when OverlayNew gets to stable
+( function( M ) {
+
+ var Overlay = M.require( 'Overlay' ),
+ OverlayNew = Overlay.extend( {
+ className: 'overlay',
+ template: M.template.get( 'OverlayNew' ),
+ } );
+
+ M.define( 'OverlayNew', OverlayNew );
+
+}( mw.mobileFrontend ) );
diff --git a/less/common/OverlayNew.less b/less/common/OverlayNew.less
new file mode 100644
index 0000000..044ae88
--- /dev/null
+++ b/less/common/OverlayNew.less
@@ -0,0 +1,78 @@
+// FIXME: merge with overlays.less when OverlayNew gets to stable
+@import "../mixins.less";
+
+@headerMargin: .4em;
+
+.overlay-enabled {
+ .overlay {
+ // use height instead of bottom 0 so that overlay expands when
there's
+ // more content, don't use min-height because of
+ //
http://stackoverflow.com/questions/3808512/the-inherited-height-of-a-child-div-from-a-parent-with-a-min-height-attribute
+ height: 100%;
+ }
+}
+
+.overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ background: #fff;
+ z-index: 4;
+
+ .overlay-header {
+ margin: @headerMargin @headerMargin 0;
+ border-bottom: 1px solid #cacaca;
+ overflow: hidden;
+
+ button, h2 {
+ display: inline-block;
+ line-height: 1;
+ padding: 1em .6em;
+ }
+
+ button {
+ border-radius: 0;
+ // needed for proper horizontal icon/text centering in
both LTR and RTL
+ min-width: (3em + @headerMargin);
+ }
+
+ .left {
+ float: left;
+ // needed for proper horizontal icon/text centering in
both LTR and RTL
+ margin-left: -@headerMargin;
+ border-right: 1px solid #cacaca;
+ }
+
+ .right {
+ float: right;
+
+ button {
+ float: left;
+
+ &:last-child {
+ // needed for proper horizontal
icon/text centering in both LTR and RTL
+ margin-right: -@headerMargin;
+ border-left: 1px solid #cacaca;
+ }
+ }
+ }
+
+ .icon {
+ text-indent: -9999px;
+ background: 50% .5em no-repeat;
+
+ &.cancel {
+ background-image: url(images/cancel.png);
+ }
+ }
+
+ h2 {
+ float: left;
+ // FIXME: should not be necessary, scope other h2s to
.content
+ font-size: 1em;
+ // XXX
+ font-weight: bold;
+ }
+ }
+}
diff --git a/less/common/buttons.less b/less/common/buttons.less
index cae4979..adadbac 100644
--- a/less/common/buttons.less
+++ b/less/common/buttons.less
@@ -10,47 +10,54 @@
line-height: 1;
cursor: pointer;
margin: 0;
- padding: .8em 1.2em;
- text-align: center;
- border: 1px #33589f solid;
- color: white;
- .vertical-gradient( #3670C8, @blueBase );
+}
- &:hover {
- .vertical-gradient( #4c84da, #3f77d7 );
- }
-
- &:active {
- .vertical-gradient( #2d5ea9, #2a549c );
- }
-
- &:visited {
- color: #fff;
- }
-
- &:disabled {
- @disabledColor: lighten( desaturate( #3f77d7, 15% ), 10% );
- color: lighten( #3f77d7, 30% );;
- .vertical-gradient( @disabledColor,@disabledColor );
- border-color: darken( @disabledColor, 5% );
- }
-
- &.cancel {
- background: #777;
- border: 1px #666 solid;
- }
-
- &.inline {
- display: inline;
- padding: 0;
- line-height: inherit;
- color: #002bb8;
- background: none;
- border: none;
- text-shadow: none;
+.content, .buttonBar {
+ .button,
+ button,
+ input[type=submit] {
+ padding: .8em 1.2em;
+ text-align: center;
+ border: 1px #33589f solid;
+ color: white;
+ .vertical-gradient( #3670C8, @blueBase );
&:hover {
- text-decoration: underline;
+ .vertical-gradient( #4c84da, #3f77d7 );
+ }
+
+ &:active {
+ .vertical-gradient( #2d5ea9, #2a549c );
+ }
+
+ &:visited {
+ color: #fff;
+ }
+
+ &:disabled {
+ @disabledColor: lighten( desaturate( #3f77d7, 15% ),
10% );
+ color: lighten( #3f77d7, 30% );;
+ .vertical-gradient( @disabledColor,@disabledColor );
+ border-color: darken( @disabledColor, 5% );
+ }
+
+ &.cancel {
+ background: #777;
+ border: 1px #666 solid;
+ }
+
+ &.inline {
+ display: inline;
+ padding: 0;
+ line-height: inherit;
+ color: #002bb8;
+ background: none;
+ border: none;
+ text-shadow: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
}
}
}
diff --git a/less/common/images/cancel.png b/less/common/images/cancel.png
new file mode 100644
index 0000000..c7b1183
--- /dev/null
+++ b/less/common/images/cancel.png
Binary files differ
diff --git a/templates/OverlayNew.html b/templates/OverlayNew.html
new file mode 100644
index 0000000..8354d3c
--- /dev/null
+++ b/templates/OverlayNew.html
@@ -0,0 +1,13 @@
+<div class="overlay-header">
+ <button class="cancel icon left">{{closeMsg}}</button>
+ {{#heading}}
+ <h2>{{heading}}</h2>
+ {{/heading}}
+ <div class="right">
+ {{#headerButtons}}
+ <button class="{{className}}">{{msg}}</button>
+ {{/headerButtons}}
+ </div>
+</div>
+{{{content}}}
+{{>content}}
--
To view, visit https://gerrit.wikimedia.org/r/92012
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Icec386e9a8e7a4cc3ad18ecd81ca734439df76db
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: JGonera <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
