From d5f6930cb49175cdad0077e8e4fea3f28fa8cb7b Mon Sep 17 00:00:00 2001 From: Santhosh Thottingal Date: Tue, 5 Apr 2016 11:48:42 +0530 Subject: [PATCH] Correct the position the arrow of selector and add shadow The pointer arrow of the ULS was not aligned with the 'x more' trigger and it missed shadow. This commit fixes it. Notably, we replace the old arrow with a box rotated 45 degree so that we can apply the shadow very easily. Bug: T130633 Change-Id: I4d36f3ee9fcfea932e10208518a03e7b246a7abe --- resources/css/ext.uls.compactlinks.css | 45 ++++++++++++++++---------- resources/js/ext.uls.compactlinks.js | 38 ++++++++++++++-------- 2 files changed, 52 insertions(+), 31 deletions(-) diff --git a/resources/css/ext.uls.compactlinks.css b/resources/css/ext.uls.compactlinks.css index 6d2e5f1e..b940a442 100644 --- a/resources/css/ext.uls.compactlinks.css +++ b/resources/css/ext.uls.compactlinks.css @@ -13,28 +13,39 @@ background-image: url( ../images/compact-links-trigger.svg ); background-size: 17px; background-repeat: no-repeat; - background-position: 9% 8%; + background-position: left 4px center; margin: 4px 0; + text-align: left; } -.interlanguage-uls-menu:after, .interlanguage-uls-menu:before { - right: 100%; - content: " "; + background: none repeat scroll 0 0 #FCFCFC; + border-left: 1px solid rgba( 0, 0, 0, 0.2 ); + border-top: 1px solid rgba( 0, 0, 0, 0.2 ); + box-shadow: -2px -2px 2px rgba( 0, 0, 0, 0.1 ); + content: ""; + height: 24px; + width: 24px; + left: -13px; position: absolute; - border: 1px solid black; + /* The dialog middle is positioned 250px away from the center of the trigger. Substract 12 for + * half of the box height to center middle of the box rather than the top. The remaining 2 are + * either for top-margin of the menu and border of this box, or because we use do not account + * for the margin of the trigger when we use $.fn.outerWidth without true as a parameter. + */ + top: 236px; + transform: rotate( -45deg ); + -webkit-transform: rotate( -45deg ); + -moz-transform: rotate( -45deg ); + -o-transform: rotate( -45deg ); + -ms-transform: rotate( -45deg ); + background-clip: padding-box; } -.interlanguage-uls-menu:after { - border-color: transparent; - border-right-color: #FCFCFC; - border-width: 20px; - top: 250px; -} - -.interlanguage-uls-menu:before { - border-color: transparent; - border-right-color: #555555; - border-width: 20px; - top: 250px; +body.rtl .interlanguage-uls-menu:before { + transform: rotate( 45deg ); + -webkit-transform: rotate( 45deg ); + -moz-transform: rotate( 45deg ); + -o-transform: rotate( 45deg ); + -ms-transform: rotate( 45deg ); } diff --git a/resources/js/ext.uls.compactlinks.js b/resources/js/ext.uls.compactlinks.js index 27c4491d..e51d0889 100644 --- a/resources/js/ext.uls.compactlinks.js +++ b/resources/js/ext.uls.compactlinks.js @@ -95,8 +95,6 @@ var languages, compactLinks = this, dir = $( 'html' ).prop( 'dir' ), - interlanguageListLeft, - interlanguageListWidth, ulsLanguageList = {}; languages = $.map( compactLinks.interlanguageList, function ( language, languageCode ) { @@ -105,9 +103,6 @@ return languageCode; } ); - // Calculate the left and width values - interlanguageListLeft = compactLinks.$interlanguageList.offset().left; - interlanguageListWidth = compactLinks.$interlanguageList.width(); // Attach ULS to the trigger compactLinks.$trigger.uls( { onReady: function () { @@ -127,14 +122,33 @@ location.href = compactLinks.interlanguageList[ language ].href; }, onVisible: function () { - // Calculate the positioning of the panel - // according to the position of the trigger icon + var offset, height, width, triangleWidth; + // The panel is positioned carefully so that our pointy triangle, + // which is implemented as a square box rotated 45 degrees with + // rotation origin in the middle. See the corresponding style file. + + // These are for the trigger + offset = compactLinks.$trigger.offset(); + width = compactLinks.$trigger.outerWidth(); + height = compactLinks.$trigger.outerHeight(); + + // Triangle width is: Math.sqrt( 2 * Math.pow( 25, 2 ) ) / 2 =~ 17.7; + // Box width = 24 + 1 for border. + // The resulting value is rounded up 20 to have a small space between. + triangleWidth = 20; + if ( dir === 'rtl' ) { - this.left = interlanguageListLeft - this.$menu.width(); + this.left = offset.left - this.$menu.outerWidth() - triangleWidth; } else { - this.left = interlanguageListLeft + interlanguageListWidth; + this.left = offset.left + width + triangleWidth; } - this.$menu.css( 'left', this.left ); + // Offset -250px from the middle of the trigger + this.top = offset.top + ( height / 2 ) - 250; + + this.$menu.css( { + left: this.left, + top: this.top + } ); }, languageDecorator: function ( $languageLink, language ) { // set href according to language @@ -142,10 +156,6 @@ }, // Use compact version of ULS compact: true, - // Top position of the language selector. Top it 250px above to take care of - // caret pointing the trigger. See .interlanguage-uls-menu:after style definition - top: compactLinks.$trigger.offset().top - compactLinks.$trigger.height() / 2 - 250, - // List of languages to be shown languages: ulsLanguageList, // Show common languages quickList: compactLinks.filterByCommonLanguages( languages )