From 81c4dfe848d8e884dae2b7c429b0793b1506ea16 Mon Sep 17 00:00:00 2001 From: Santhosh Thottingal Date: Thu, 23 Jan 2014 03:50:40 +0000 Subject: [PATCH] Refactor the css so that embedded images are optimally loaded Change-Id: If19d20fb22afafbf62c355394dcda825a0151ac6 --- Resources.php | 8 ++ UniversalLanguageSelector.hooks.php | 8 +- resources/css/ext.uls.css | 115 +-------------------- resources/css/ext.uls.inputsettings.css | 27 +++++ resources/css/ext.uls.interlanguage.css | 23 +++++ resources/css/ext.uls.languagesettings.css | 15 +++ resources/css/ext.uls.pt.css | 61 +++++++++++ 7 files changed, 142 insertions(+), 115 deletions(-) create mode 100644 resources/css/ext.uls.interlanguage.css create mode 100644 resources/css/ext.uls.pt.css diff --git a/Resources.php b/Resources.php index db18e836..81dafcb6 100644 --- a/Resources.php +++ b/Resources.php @@ -249,6 +249,14 @@ $wgResourceModules['jquery.webfonts'] = array( 'targets' => array( 'desktop', 'mobile' ), ) + $resourcePaths; +$wgResourceModules['ext.uls.pt'] = array( + 'styles' => 'resources/css/ext.uls.pt.css', +) + $resourcePaths; + +$wgResourceModules['ext.uls.interlanguage'] = array( + 'styles' => 'resources/css/ext.uls.interlanguage.css', +) + $resourcePaths; + // A module named rangy is defined in VisualExtension with more features of rangy. // Here we need only the core library. This module is loaded dynamically from // client when rangy is undefined. If VE is present rangy will be defined, the module diff --git a/UniversalLanguageSelector.hooks.php b/UniversalLanguageSelector.hooks.php index 79402a7a..cdf4c6a5 100644 --- a/UniversalLanguageSelector.hooks.php +++ b/UniversalLanguageSelector.hooks.php @@ -45,7 +45,7 @@ class UniversalLanguageSelectorHooks { * Hook: BeforePageDisplay */ public static function addModules( $out, $skin ) { - global $wgULSGeoService, $wgULSEventLogging; + global $wgULSPosition, $wgULSGeoService, $wgULSEventLogging; $user = $out->getUser(); if ( !$user->getBoolOption( 'uls-enable') ) { @@ -76,6 +76,12 @@ class UniversalLanguageSelectorHooks { $out->addModules( 'ext.uls.interface' ); } + if ( $wgULSPosition === 'personal' ) { + $out->addModules( 'ext.uls.pt' ); + } else { + $out->addModules( 'ext.uls.interlanguage' ); + } + return true; } diff --git a/resources/css/ext.uls.css b/resources/css/ext.uls.css index 206d2f76..f831c0b9 100644 --- a/resources/css/ext.uls.css +++ b/resources/css/ext.uls.css @@ -1,77 +1,3 @@ -/* - * The trigger can be placed in the personal toolbar near the username - * or near the interlanguage links. - */ - -/* - * A hack to load the icon before the rest of the module is lazy-loaded. - * Copied from jquuery.uls.css with the path changed. - */ -.uls-trigger { - /* @embed */ - background: transparent url('../../lib/jquery.uls/images/icon-language.png') no-repeat scroll left center; - /* @embed */ - background-image: -webkit-linear-gradient(transparent, transparent), url('../../lib/jquery.uls/images/icon-language.svg'); - /* @embed */ - background-image: -moz-linear-gradient(transparent, transparent), url('../../lib/jquery.uls/images/icon-language.svg'); - /* @embed */ - background-image: linear-gradient(transparent, transparent), url('../../lib/jquery.uls/images/icon-language.svg'); - padding-left: 30px; -} - -#pt-uls a.uls-trigger { - padding-left: 30px; - /* Fix alignment in vector: https://bugzilla.wikimedia.org/59239 */ - line-height: 1; -} - -#p-lang .uls-settings-trigger { - /* @embed */ - background: transparent url('../images/cog-sprite.png') no-repeat right top; - /* @embed */ - background-image: -webkit-linear-gradient(transparent, transparent), url('../images/cog-sprite.svg'); - /* @embed */ - background-image: -moz-linear-gradient(transparent, transparent), url('../images/cog-sprite.svg'); - /* @embed */ - background-image: linear-gradient(transparent, transparent), url('../images/cog-sprite.svg'); - height: 16px; - width: 14px; - float: right; - cursor: pointer; -} - -.skin-vector #p-lang .uls-settings-trigger { - /* Put it in the middle of the first row of the section title */ - margin-top: 3px; -} - -#p-lang .uls-settings-trigger:hover { - background-position: right -16px; -} - -/* Opera for some inexplicable reason confuses right and left padding with */ -/* RTL text direction here (bug 45142). x:-o-prefocus won't match anything, */ -/* but will make other browsers ignore this rule. */ -x:-o-prefocus, body.rtl li#pt-uls { - /* @noflip */ - direction: ltr; -} - -#settings-block { - border-top: 1px solid #C9C9C9; - background: #f8f8f8; - background: -webkit-gradient(linear, left top, left bottom, from(#FBFBFB), to(#F0F0F0)); - background: -webkit-linear-gradient(top, #FBFBFB, #F0F0F0); - background: -moz-linear-gradient(top, #FBFBFB, #F0F0F0); - background: -o-linear-gradient(top, #FBFBFB, #F0F0F0); - background: linear-gradient(#FBFBFB, #F0F0F0); - padding-left: 10px; - line-height: 1.2em; - -webkit-border-radius: 0 0 5px 5px; - -moz-border-radius: 0 0 5px 5px; - border-radius: 0 0 5px 5px; -} - .uls-menu a { cursor: pointer; } @@ -96,18 +22,6 @@ x:-o-prefocus, body.rtl li#pt-uls { position: absolute; } -#settings-block div.display-settings-block, -#settings-block div.input-settings-block { - display: inline-block; - margin: 8px 15px; - color: #565656; -} - -#settings-block div.display-settings-block:hover, -#settings-block div.input-settings-block:hover { - color: #252525; -} - .uls-ui-languages button { width: 23%; text-overflow: ellipsis; @@ -129,31 +43,4 @@ button.uls-more-languages { div.display-settings-block:hover .settings-text { color: #252525; -} - -/* Ime menu customizations */ -.ime-perime-help { - display: none; -} - -.ime-checked .ime-perime-help { - display: inline-block; - width: 20px; - height: 100%; - position: absolute; - top: 0; - bottom: 0; - right: 0; - opacity: 0.75; - padding: 0; - /* @embed */ - background: transparent url('../images/help.png') left center no-repeat; - /* @embed */ - background-image: -webkit-linear-gradient(transparent, transparent), url('../images/help.svg'); - /* @embed */ - background-image: linear-gradient(transparent, transparent), url('../images/help.svg'); -} - -.ime-checked .ime-perime-help:hover { - opacity: 1; -} +} \ No newline at end of file diff --git a/resources/css/ext.uls.inputsettings.css b/resources/css/ext.uls.inputsettings.css index f4c954a7..4f711c4b 100644 --- a/resources/css/ext.uls.inputsettings.css +++ b/resources/css/ext.uls.inputsettings.css @@ -125,3 +125,30 @@ div.input-settings-block { .uls-input-settings .uls-ime-help { margin-left: 10px; } + +/* Ime menu customizations */ +.ime-perime-help { + display: none; +} + +.ime-checked .ime-perime-help { + display: inline-block; + width: 20px; + height: 100%; + position: absolute; + top: 0; + bottom: 0; + right: 0; + opacity: 0.75; + padding: 0; + /* @embed */ + background: transparent url('../images/help.png') left center no-repeat; + /* @embed */ + background-image: -webkit-linear-gradient(transparent, transparent), url('../images/help.svg'); + /* @embed */ + background-image: linear-gradient(transparent, transparent), url('../images/help.svg'); +} + +.ime-checked .ime-perime-help:hover { + opacity: 1; +} diff --git a/resources/css/ext.uls.interlanguage.css b/resources/css/ext.uls.interlanguage.css new file mode 100644 index 00000000..4dad9668 --- /dev/null +++ b/resources/css/ext.uls.interlanguage.css @@ -0,0 +1,23 @@ +#p-lang .uls-settings-trigger { + /* @embed */ + background: transparent url('../images/cog-sprite.png') no-repeat right top; + /* @embed */ + background-image: -webkit-linear-gradient(transparent, transparent), url('../images/cog-sprite.svg'); + /* @embed */ + background-image: -moz-linear-gradient(transparent, transparent), url('../images/cog-sprite.svg'); + /* @embed */ + background-image: linear-gradient(transparent, transparent), url('../images/cog-sprite.svg'); + height: 16px; + width: 14px; + float: right; + cursor: pointer; +} + +.skin-vector #p-lang .uls-settings-trigger { + /* Put it in the middle of the first row of the section title */ + margin-top: 3px; +} + +#p-lang .uls-settings-trigger:hover { + background-position: right -16px; +} diff --git a/resources/css/ext.uls.languagesettings.css b/resources/css/ext.uls.languagesettings.css index 5e706ab7..6b2fa7c2 100644 --- a/resources/css/ext.uls.languagesettings.css +++ b/resources/css/ext.uls.languagesettings.css @@ -1,3 +1,18 @@ +#settings-block { + border-top: 1px solid #C9C9C9; + background: #f8f8f8; + background: -webkit-gradient(linear, left top, left bottom, from(#FBFBFB), to(#F0F0F0)); + background: -webkit-linear-gradient(top, #FBFBFB, #F0F0F0); + background: -moz-linear-gradient(top, #FBFBFB, #F0F0F0); + background: -o-linear-gradient(top, #FBFBFB, #F0F0F0); + background: linear-gradient(#FBFBFB, #F0F0F0); + padding-left: 10px; + line-height: 1.2em; + -webkit-border-radius: 0 0 5px 5px; + -moz-border-radius: 0 0 5px 5px; + border-radius: 0 0 5px 5px; +} + .uls-menu h3 { border-bottom: medium none; font-size: 14pt; diff --git a/resources/css/ext.uls.pt.css b/resources/css/ext.uls.pt.css new file mode 100644 index 00000000..a160fd22 --- /dev/null +++ b/resources/css/ext.uls.pt.css @@ -0,0 +1,61 @@ +/* + * The trigger can be placed in the personal toolbar near the username + * or near the interlanguage links. + */ + +/* + * A hack to load the icon before the rest of the module is lazy-loaded. + * Copied from jquery.uls.css with the path changed. + */ +.uls-trigger { + /* @embed */ + background: transparent url('../../lib/jquery.uls/images/icon-language.png') no-repeat scroll left center; + /* @embed */ + background-image: -webkit-linear-gradient(transparent, transparent), url('../../lib/jquery.uls/images/icon-language.svg'); + /* @embed */ + background-image: -moz-linear-gradient(transparent, transparent), url('../../lib/jquery.uls/images/icon-language.svg'); + /* @embed */ + background-image: linear-gradient(transparent, transparent), url('../../lib/jquery.uls/images/icon-language.svg'); + padding-left: 30px; +} + +#pt-uls a.uls-trigger { + padding-left: 30px; + /* Fix alignment in vector: https://bugzilla.wikimedia.org/59239 */ + line-height: 1; +} + +/* Opera for some inexplicable reason confuses right and left padding with */ +/* RTL text direction here (bug 45142). x:-o-prefocus won't match anything, */ +/* but will make other browsers ignore this rule. */ +x:-o-prefocus, body.rtl li#pt-uls { + /* @noflip */ + direction: ltr; +} + +#settings-block { + border-top: 1px solid #C9C9C9; + background: #f8f8f8; + background: -webkit-gradient(linear, left top, left bottom, from(#FBFBFB), to(#F0F0F0)); + background: -webkit-linear-gradient(top, #FBFBFB, #F0F0F0); + background: -moz-linear-gradient(top, #FBFBFB, #F0F0F0); + background: -o-linear-gradient(top, #FBFBFB, #F0F0F0); + background: linear-gradient(#FBFBFB, #F0F0F0); + padding-left: 10px; + line-height: 1.2em; + -webkit-border-radius: 0 0 5px 5px; + -moz-border-radius: 0 0 5px 5px; + border-radius: 0 0 5px 5px; +} + +#settings-block div.display-settings-block, +#settings-block div.input-settings-block { + display: inline-block; + margin: 8px 15px; + color: #565656; +} + +#settings-block div.display-settings-block:hover, +#settings-block div.input-settings-block:hover { + color: #252525; +}