Merge "WebFonts integration with ULS display settings."

2012-08-15 06:01:13 +00:00
parent 8f7382b242 e62b50c9d8
commit 103269694f
11 changed files with 228 additions and 75 deletions
--- a/resources/css/ext.languagesettings.css
+++ b/resources/css/ext.languagesettings.css
@@ -1,44 +1,14 @@
-#uls-current-language-nav {
-	/* @embed */
-	background: url('../images/cog-16x16-ltr.png') no-repeat scroll right top transparent;
+#uls-current-language-nav { /* @embed */
+	background: url('../images/cog-16x16-ltr.png') no-repeat scroll right
+		top transparent;
 	cursor: pointer;
 }

-#language-settings-dialog {
-	display: none; /* hidden initially */
-
-	/* XXX pretty random position values, just to make it visible */
-	bottom: 100px;
-	left: 200px;
-
-	/* From here on - from .uls-menu */
-	position: fixed;
-	z-index: 1000;
-	display: none;
-	min-width: 800px; /* changed */
-	margin-top: 1px;
-	width: 45%;
-	/* Styling */
-	background-color: #ffffff;
-	border: 1px solid #ccc;
-	border: 1px solid rgba(0, 0, 0, 0.2);
-	*border-right-width: 2px;
-	*border-bottom-width: 2px;
-	-webkit-border-radius: 5px;
-	-moz-border-radius: 5px;
-	border-radius: 5px;
-	-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-	-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-	-webkit-background-clip: padding-box;
-	-moz-background-clip: padding;
-	background-clip: padding-box;
-}
-
 /* From uls-menu, unchanged */
 #uls-current-language-nav a {
 	color: #0088CC;
 }
+
 #uls-current-language-nav h1 {
 	font-weight: normal;
 	padding-top: 1.25em;
@@ -49,6 +19,7 @@
 	padding-left: 15px;
 	color: #777;
 }
+
 #uls-current-language-nav h2 {
 	font-size: 16pt;
 	line-height: 1.5em;
@@ -58,6 +29,7 @@
 	border-bottom: none;
 	color: #777;
 }
+
 .uls-menu h3 {
 	font-size: 14pt;
 	line-height: 1.5em;
@@ -78,12 +50,45 @@
 	border-left: 3px solid transparent;
 	display: block;
 	font-size: 12pt;
-	background: url(http://dl.dropbox.com/u/30377416/i18n/icons/WMF-Agora-Display_settings-grey.png) no-repeat scroll 15px center transparent;
 }

-.menu-section.active{
+.menu-section.active {
 	color: black;
 	background-color: #F6F6F6;
 	border-left-color: #3366BB;
-	background-image: url(http://dl.dropbox.com/u/30377416/i18n/icons/WMF-Agora-Display_settings-blue.svg);
 }
+
+button.toggle.button {
+	background: #eee;
+	color: black;
+	cursor: pointer;
+	border-top: solid 2px #eaeaea;
+	border-left: solid 2px #eaeaea;
+	border-bottom: solid 2px #777;
+	border-right: solid 2px #777;
+	padding: 5px 5px;
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	border-radius: 3px;
+	text-align: center;
+	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+
+button.toggle.button.down {
+	background: #bbb;
+	border-top: solid 2px #777;
+	border-left: solid 2px #777;
+	border-bottom: solid 2px #eaeaea;
+	border-right: solid 2px #eaeaea;
+}
+
+.language-settings-buttons {
+	border-top: solid 2px #aaa;
+	padding: 10px;
+	margin-top: 10px;
+}
+
+label.checkbox input[type="checkbox"] {
+	padding-left: -20px;
+	float: left;
+}
--- a/resources/css/ext.uls.css
+++ b/resources/css/ext.uls.css
@@ -2,18 +2,80 @@ div#settings-block {
 	border-left: 1px solid #C9C9C9;
 	padding-left: 10px;
 }
-div#display-settings-block {
+
+div#display-settings-block { 
 	/* @embed */
 	background: url('../images/display.png');
 	background-repeat: no-repeat;
 	background-size: 20px auto;
 	padding-left: 25px;
 	cursor: pointer;
+	background-color: #F6F6F6;
 }
+
 .settings-title {
 	font-size: 11pt;
 }
+
 .settings-text {
 	color: #555555;
 	font-size: 9pt;
+}
+
+button.button {
+	display: inline-block;
+	padding: 0.4065em 1.2195em 0.4065em;
+	font: bold 0.813em Arial, sans-serif;
+	line-height: 1;
+	color: black;
+	text-align: center;
+	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+	cursor: pointer;
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	border-radius: 3px;
+}
+
+button.button.blue {
+	background-color: #3366bb;
+	color: white;
+	background-image: -moz-linear-gradient(top, #3670c8, #3366bb);
+	background-image: -ms-linear-gradient(top, #3670c8, #3366bb);
+	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3670c8),
+		color-stop(100%, #3366bb) );
+	background-image: -webkit-linear-gradient(top, #3670c8, #3366bb);
+	background-image: linear-gradient(#3670c8, #3366bb);
+	border: 1px #33589f solid;
+	-ms-filter:
+		"progid:DXImageTransform.Microsoft.gradient(startColorstr='#3670c8', endColorstr='#3366bb', GradientType=0)";
+	filter: progid:dximagetransform.microsoft.gradient(startColorstr='#3670c8',
+		endColorstr='#3366bb', GradientType=0 );
+}
+
+button.button.blue:hover {
+	background-color: #3f77d7;
+	background-image: -moz-linear-gradient(top, #4c84da, #3f77d7);
+	background-image: -ms-linear-gradient(top, #4c84da, #3f77d7);
+	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4c84da),
+		color-stop(100%, #3f77d7) );
+	background-image: -webkit-linear-gradient(top, #4c84da, #3f77d7);
+	background-image: linear-gradient(#4c84da, #3f77d7);
+	-ms-filter:
+		"progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c84da', endColorstr='#3f77d7', GradientType=0)";
+	filter: progid:dximagetransform.microsoft.gradient(startColorstr='#4c84da',
+		endColorstr='#3f77d7', GradientType=0 );
+}
+
+button.button.blue:active {
+	background-color: #2a549c;
+	background-image: -moz-linear-gradient(top, #2d5ea9, #2a549c);
+	background-image: -ms-linear-gradient(top, #2d5ea9, #2a549c);
+	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2d5ea9),
+		color-stop(100%, #2a549c) );
+	background-image: -webkit-linear-gradient(top, #2d5ea9, #2a549c);
+	background-image: linear-gradient(#2d5ea9, #2a549c);
+	-ms-filter:
+		"progid:DXImageTransform.Microsoft.gradient(startColorstr='#2d5ea9', endColorstr='#2a549c', GradientType=0)";
+	filter: progid:dximagetransform.microsoft.gradient(startColorstr='#2d5ea9',
+		endColorstr='#2a549c', GradientType=0 );
 }
--- a/resources/js/ext.uls.displaysettings.js
+++ b/resources/js/ext.uls.displaysettings.js
@@ -19,30 +19,56 @@

 ( function( $ ) {
 	"use strict";
-	var template = '<div><h3>Display Settings</h3></div>' +
-		'<div><h4>Select Language</h4></div>' +
-		'<div>' +
-			'<button>English</button>' +
-			'<button>Deutsch</button>' +
-			'<button>עברית</button>' +
-			'<button class="uls-trigger">...</button>' +
-		'</div>' +
-		'<div><h4>Font Settings</h4></div>' +
-		'<div>' +
-			'<input type="checkbox" id="webfonts-enable-checkbox" />' +
-			'<label for="webfonts-enable-checkbox">Download fonts automatically when needed</label>' +
-		'</div>' +
-		'<div><h5>Select your preferred fonts to use</h5></div>' +
-		'<div>Fonts for English<select></select></div>' +
-		'<div>Fonts for Spanish<select></select></div>' +
-		'<div class="language-settings-buttons"><button>Cancel</button><button>Apply changes</button></div>';
+	var template = '<div><h3>Display Settings</h3></div>'
+			+ '<div><h4>Select Language</h4></div>'
+			+ '<div class="row">'
+			+ '<button class="two columns toggle button down">English</button>'
+			+ '<button class="two columns offset-by-one toggle button">Deutsch</button>'
+			+ '<button class="two columns offset-by-one toggle button">עברית</button>'
+			+ '<button id="uls-more-languages" class="two columns offset-by-one toggle button"">...</button>'
+			+ '</div>'
+			+ '<div class="row"><h4>Font Settings</h4></div>'
+			+ '<div  class="row">'
+			+ '<label class="checkbox"><input type="checkbox" checked id="webfonts-enable-checkbox" />'
+			+ '<b>Download fonts automatically when needed</b> '
+			+ 'Web fonts will be downloaded when text in special scripts is displayed. '
+			+ '<a href="#">More Information</a>'
+			+ '</span></label>'
+			+ '</div>'
+			+ '<div class="row"><h5>Select your preferred fonts to use</h5></div>'
+			+ '<div class="row">'
+			+ '<div class="six columns">Fonts for English</div>'
+			+ '<select class="three columns end uls-font-select"></select></div>'
+			+ '</div>'
+			+ '<div class="row"></div>'
+			+ '<div class="row language-settings-buttons">'
+			+ '<button class="three columns offset-by-three blue button">Cancel</button>'
+			+ '<button  class="four columns offset-by-one active blue button">Apply changes</button>'
+			+ '</div>'; // FIXME too much hardcoding.

 	var displaySettings = {
+		name: "Display",
+		description: "Set the fonts for languages",
+
 		render: function() {
 			return template;
 		},
-		name: "Display",
-		description: "Set the fonts for languages"
+
+		listen: function() {
+			var $webfonts = $( 'body' ).data( 'webfonts' );
+			var fonts = $webfonts.list( 'en' ); // FIXME
+			var $fontSelector = $( 'select.uls-font-select' );
+			$.each( fonts, function( key, font ) {
+				$fontSelector.append( $( "<option></option>" )
+					.attr( "value", font ).text( font ) );
+			} );
+			$( "button.toggle.button" ).click( function() {
+				$( "button.toggle.button" ).removeClass( "down" );
+				$( this ).addClass( "down" );
+			} );
+			// $( '#uls-more-languages' ).uls({
+			// });
+		}
 	};

 	$.fn.languagesettings.modules = $.extend( $.fn.languagesettings.modules, {
--- a/resources/js/ext.uls.init.js
+++ b/resources/js/ext.uls.init.js
@@ -57,8 +57,12 @@
 		$.fn.uls.Constructor.prototype = $.extend( {}, $.fn.uls.Constructor.prototype, {
 			render: function() {
 				var $displaySettings = displaySettings();
+				var that = this;
 				this.$menu.find( "div#settings-block" ).append( $displaySettings );
 				$displaySettings.languagesettings();
+				$displaySettings.on( 'click', function() {
+					that.hide();
+				} );
 			}
 		} );

--- a/resources/js/ext.uls.languagesettings.js
+++ b/resources/js/ext.uls.languagesettings.js
@@ -21,7 +21,7 @@
 	"use strict";

 	var closeRow = '<div class="row" id="languagesettings-close">' +
-		'<span class="icon-close"></span>' +
+		'<span id="languagesettings-close" class="icon-close"></span>' +
 		'</div>';
 	var settingsMenu = '<div class="four columns">' +
 		'<h1>Language settings</h1>' + // TODO i18n
@@ -61,17 +61,17 @@
 			var that = this;
 			// Register all event listeners to the ULS here.
 			that.$element.on( "click", $.proxy( that.click, that ) );
-			$( ".icon-close" ).on( "click", $.proxy( that.click, that ) );
+			$( "#languagesettings-close" ).on( "click", $.proxy( that.click, that ) );
 		},

 		render: function() {
 			// Get the name of all registered modules and list them in left side menu.
 			var modules = $.fn.languagesettings.modules;
-			var firstModuleName = this.options.defaultModule;
+			var firstModule = modules[this.options.defaultModule];
 			for ( var moduleName in modules ) {
 				if ( modules.hasOwnProperty( moduleName ) ) {
-					if ( !firstModuleName ) {
-						firstModuleName = moduleName;
+					if ( !firstModule ) {
+						firstModule = modules[moduleName];
 					}
 					// Call render function on the current setting module.
 					this.renderModule( moduleName );
@@ -79,9 +79,8 @@
 			}

 			// Show the default module
-			$( "#languagesettings-settings-panel" ).html(
-				$.fn.languagesettings.modules[firstModuleName].render()
-			);
+			$( "#languagesettings-settings-panel" ).html( firstModule.render() );
+			firstModule.listen();
 		},

 		renderModule: function( moduleName ) {
@@ -95,7 +94,7 @@
 				.addClass( "settings-text" )
 				.text( module.description );
 			var $settingsLink = $( "<div>" )
-				.addClass( moduleName + "-settings-block" )
+				.addClass( moduleName + "-settings-block menu-section" )
 				.prop( "id", moduleName + "-settings-block" )
 				.data( "module", module )
 				.append( $settingsTitle )
@@ -104,7 +103,10 @@
 			$settingsMenuItems.append( $settingsLink );

 			$settingsLink.on( "click", function() {
-				$settingsPanel.html( $( this ).data( "module" ).render() );
+				var module = $( this ).data( "module" );
+				$settingsPanel.html( module.render() );
+				module.listen();
+				$( this ).addClass( 'active' );
 			} );
 		},

@@ -112,7 +114,17 @@
 			if ( !this.initialized ) {
 				this.render();
 				this.initialized = true;
+				var pos = $.extend( {}, this.$element.offset(), {
+					height: this.$element[0].offsetHeight
+				} );
+				// FIXME this is not exactly correct. position may not
+				// be relative to the trigger.
+				this.$window.css( {
+					top: pos.top + pos.height,
+					left: '25%'
+				} );
 			}
+
 			this.shown = true;
 			this.$window.show();
 		},
--- a/resources/js/ext.uls.webfonts.js
+++ b/resources/js/ext.uls.webfonts.js
@@ -0,0 +1,33 @@
+/**
+ * ULS-Webfonts integration
+ *
+ * Copyright (C) 2012 Alolita Sharma, Amir Aharoni, Arun Ganesh, Brandon Harris,
+ * Niklas Laxström, Pau Giner, Santhosh Thottingal, Siebrand Mazeland and other
+ * contributors. See CREDITS for a list.
+ *
+ * UniversalLanguageSelector is dual licensed GPLv2 or later and MIT. You don't
+ * have to do anything special to choose one license or the other and you don't
+ * have to notify anyone which license you are using. You are free to use
+ * UniversalLanguageSelector in commercial projects as long as the copyright
+ * header is left intact. See files GPL-LICENSE and MIT-LICENSE for details.
+ *
+ * @file
+ * @ingroup Extensions
+ * @licence GNU General Public Licence 2.0 or later
+ * @licence MIT License
+ */
+( function($, mw) {
+	"use strict";
+	$( document ).ready( function() {
+		// FIXME Dummy repository
+		$( 'body' ).webfonts( {
+			repository : {
+				base : '../data/fonts/',
+				fonts : {},
+				languages : {
+					'en' : [ 'Sans', 'Serif' ]
+				}
+			}
+		} );
+	} );
+} )( jQuery );