bryce/mediawiki-extensions-UniversalLanguageSelector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix directionality of ULS CLL and languageselect callouts

Browse Source 
when appearing on right side of screen

Languageselect was mostly fixed in 354378, but I forgot the
settings ones, so the triangle just disappears when
switching dialogs currently. This follows up on that and
properly fixes it.

Sidebar callouts now appear toward content regardless of
where they're appearing from, or the language
directionality. Triangles are now consistently alligned to
the top of the callout (same position in languageselect and
compact language links) to avoid issues with it appearing
over a scrollbar.

Sideways callout triangles (carets) are consolidated into a
single rendering approach and mixin across compact language
links and toolbox language selector.

Bug: T161586
Change-Id: I7717e26525ac527ede486796f49083ed40ee7d4f
This commit is contained in:
Isarra
2017-05-20 16:41:33 +00:00
committed by Derk-Jan Hartman
parent fa0ad11222
commit 86c636fd0a
7 changed files with 73 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
resources/js/ext.uls.interface.js
View File

@@ -346,41 +346,31 @@
languageSettingsOptions = {
defaultModule: 'display',
onVisible: function () {
var caretRadius, caretPosition,
$caretBefore = $( '<span>' ).addClass( 'caret-before' ),
$caretAfter = $( '<span>' ).addClass( 'caret-after' ),
$caretWrapper = $( '<span>' ),
var caretRadius,
ulsTriggerHeight = this.$element.height(),
ulsTriggerWidth = this.$element.width(),
ulsTriggerOffset = this.$element.offset();
// Add the callout caret triangle
// pointing to the trigger icon
this.$window.addClass( 'callout' );
this.$window.prepend( $caretWrapper.prepend( $caretBefore, $caretAfter ) );
// Calculate the positioning of the panel
// according to the position of the trigger icon
caretRadius = parseInt( $caretBefore.css( 'border-top-width' ), 10 );
// Same as border width in mixins.less, or near enough
caretRadius = 12;
if ( ulsTriggerOffset.left > $( window ).width() / 2 ) {
this.left = ulsTriggerOffset.left - this.$window.width() - caretRadius;
$caretWrapper.addClass( 'caret-right' );
caretPosition = $caretBefore.position();
this.$window.removeClass( 'selector-left' ).addClass( 'selector-right' );
} else {
this.left = ulsTriggerOffset.left + ulsTriggerWidth + caretRadius;
$caretWrapper.addClass( 'caret-left' );
caretPosition = $caretAfter.position();
this.$window.removeClass( 'selector-right' ).addClass( 'selector-left' );
}
// The top of the dialog is aligned in relation to
// the middle of the trigger, so that middle of the
// caret aligns with it. 2 is for border and margin.
// caret aligns with it. 17 is a random number.
this.top = ulsTriggerOffset.top +
( ulsTriggerHeight / 2 ) -
( caretRadius + caretPosition.top + 2 );
( caretRadius + 17 );
this.position();
}