MarkTraceur has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/312128

Change subject: [WIP] Add 'orientation' config to PopupWidget
......................................................................

[WIP] Add 'orientation' config to PopupWidget

Puts the chevron on the bottom of the popup if 'orientation' is 'down'.

WIP because the popup is still below the origin...I don't know the best way
and I'm hoping to shop for someone who can help.

Change-Id: Iede5e0fd57580d976e62cf0e03d95851492e914c
---
M demos/pages/widgets.js
M src/themes/apex/widgets.less
M src/themes/mediawiki/widgets.less
M src/widgets/PopupWidget.js
4 files changed, 83 insertions(+), 0 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/28/312128/1

diff --git a/demos/pages/widgets.js b/demos/pages/widgets.js
index 538de63..6b2a568 100644
--- a/demos/pages/widgets.js
+++ b/demos/pages/widgets.js
@@ -1741,6 +1741,24 @@
                                                        label: 'More 
information',
                                                        $content: $( '<p>Extra 
information here.</p>' ),
                                                        padded: true,
+                                                       align: 'force-left',
+                                                       orientation: 'down'
+                                               }
+                                       } ),
+                                       {
+                                               label: 'PopupButtonWidget 
(frameless, with popup head, align: force-left, orientation: down)\u200E',
+                                               align: 'top'
+                                       }
+                               ),
+                               new OO.ui.FieldLayout(
+                                       new OO.ui.PopupButtonWidget( {
+                                               icon: 'info',
+                                               framed: false,
+                                               popup: {
+                                                       head: true,
+                                                       label: 'More 
information',
+                                                       $content: $( '<p>Extra 
information here.</p>' ),
+                                                       padded: true,
                                                        align: 'force-right'
                                                }
                                        } ),
diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less
index f9f875b..aeabad9 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -839,6 +839,20 @@
                        border-bottom-color: #fff;
                        border-width: @anchor-size;
                }
+
+               .oo-ui-popupWidget-anchor-down {
+                       transform: rotate( 180deg );
+                       top: initial;
+                       bottom: 0;
+
+                       &:after {
+                               top: -@anchor-size + 1px;
+                       }
+
+                       &:before {
+                               top: -@anchor-size - 1px;
+                       }
+               }
        }
 
        &-transitioning .oo-ui-popupWidget-popup {
diff --git a/src/themes/mediawiki/widgets.less 
b/src/themes/mediawiki/widgets.less
index 8d1009f..16a4cf2 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -1299,6 +1299,20 @@
                        border-bottom-color: @border-color-disabled-filled;
                        border-width: @anchor-size;
                }
+
+               .oo-ui-popupWidget-anchor-down {
+                       transform: rotate( 180deg );
+                       top: initial;
+                       bottom: 0;
+
+                       &:after {
+                               top: -@anchor-size + 1px;
+                       }
+
+                       &:before {
+                               top: -@anchor-size - 1px;
+                       }
+               }
        }
 
        &-transitioning .oo-ui-popupWidget-popup {
diff --git a/src/widgets/PopupWidget.js b/src/widgets/PopupWidget.js
index 332d3e6..a0fb3b8 100644
--- a/src/widgets/PopupWidget.js
+++ b/src/widgets/PopupWidget.js
@@ -34,6 +34,9 @@
  *  in the given language, which means it will flip to the correct positioning 
in right-to-left languages.
  *  Using 'forward' will also result in a logical alignment where the body of 
the popup leans towards the end of the
  *  sentence in the given language.
+ * @cfg {string} [orientation='up'] Orientation of the anchor: `up` or `down`. 
This is the direction the anchor will
+ *  point from the popup - `down` will put the anchor at the bottom of the 
popup. Note: You need to position the
+ *  popup to be above its container.
  * @cfg {jQuery} [$container] Constrain the popup to the boundaries of the 
specified container.
  *  See the [OOjs UI docs on MediaWiki][3] for an example.
  *  [3]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Popups#containerExample
@@ -79,6 +82,7 @@
        this.width = config.width !== undefined ? config.width : 320;
        this.height = config.height !== undefined ? config.height : null;
        this.setAlignment( config.align );
+       this.setOrientation( config.orientation );
        this.onMouseDownHandler = this.onMouseDown.bind( this );
        this.onDocumentKeyDownHandler = this.onDocumentKeyDown.bind( this );
 
@@ -304,6 +308,7 @@
        var popupOffset, originOffset, containerLeft, containerWidth, 
containerRight,
                popupLeft, popupRight, overlapLeft, overlapRight, anchorWidth,
                align = this.align,
+               orientation = this.orientation,
                widget = this;
 
        if ( !this.$container ) {
@@ -368,6 +373,15 @@
        // Position body relative to anchor
        this.$popup.css( 'margin-left', popupOffset );
 
+       // If orientation is "down", put the anchor on the bottom and shift the 
body.
+       if ( orientation === 'down' ) {
+               this.$anchor
+                       .addClass( 'oo-ui-popupWidget-anchor-down' );
+       } else {
+               this.$anchor
+                       .removeClass( 'oo-ui-popupWidget-anchor-down' );
+       }
+
        if ( transition ) {
                // Prevent transitioning after transition is complete
                this.transitionTimeout = setTimeout( function () {
@@ -400,6 +414,20 @@
 };
 
 /**
+ * Set anchor orientation
+ *
+ * @param {string} orientation Orientation of the anchor, `up` or `down`.
+ */
+OO.ui.PopupWidget.prototype.setOrientation = function ( orientation ) {
+       // Validate
+       if ( [ 'up', 'down' ].indexOf( orientation ) > -1 ) {
+               this.orientation = orientation;
+       } else {
+               this.orientation = 'up';
+       }
+};
+
+/**
  * Get popup alignment
  *
  * @return {string} align Alignment of the popup, `center`, `force-left`, 
`force-right`,
@@ -408,3 +436,12 @@
 OO.ui.PopupWidget.prototype.getAlignment = function () {
        return this.align;
 };
+
+/**
+ * Get anchor orientation
+ *
+ * @return {string} orientation Orientation of the anchor, `up` or `down`.
+ */
+OO.ui.PopupWidget.prototype.getOrientation = function () {
+       return this.orientation;
+};

-- 
To view, visit https://gerrit.wikimedia.org/r/312128
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: Iede5e0fd57580d976e62cf0e03d95851492e914c
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: MarkTraceur <mholmqu...@wikimedia.org>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to