From af17b0b152b74824383bcc6a847db8c902eac7b9 Mon Sep 17 00:00:00 2001 From: "James D. Forrester" Date: Thu, 27 Mar 2014 14:49:35 -0700 Subject: [PATCH] Update OOjs UI to v0.1.0-pre (23fb1b6144) New changes: 41e01ca Add documentation explaining what's going on in GroupWidget de8cd1d intro/outro: Keep local reference to OO inside closure 8bc207e Localisation updates from https://translatewiki.net. 5e1422e [BREAKING CHANGE] Use registry for tool group types 5d3ac51 Basic toolbar demo ad53af5 Styling for disabled toolgroups 3529d6f Force visible label for MenuToolGroups Change-Id: Ifdda408c17e257ffb3de2474bd64f5e2689e94d6 --- resources/oojs-ui/i18n/es.json | 1 + resources/oojs-ui/i18n/et.json | 1 + resources/oojs-ui/i18n/kk-cyrl.json | 1 + resources/oojs-ui/i18n/qu.json | 4 +- resources/oojs-ui/oojs-ui-apex.css | 57 +++++++++++++++----- resources/oojs-ui/oojs-ui.js | 83 +++++++++++++++++++++++------ resources/oojs-ui/oojs-ui.svg.css | 17 ++++-- 7 files changed, 131 insertions(+), 33 deletions(-) diff --git a/resources/oojs-ui/i18n/es.json b/resources/oojs-ui/i18n/es.json index 0d822bc81b..eb531386b1 100644 --- a/resources/oojs-ui/i18n/es.json +++ b/resources/oojs-ui/i18n/es.json @@ -19,5 +19,6 @@ "ooui-dialog-action-close": "Cerrar", "ooui-outline-control-move-down": "Mover abajo", "ooui-outline-control-move-up": "Mover arriba", + "ooui-outline-control-remove": "Eliminar elemento", "ooui-toolbar-more": "Más" } \ No newline at end of file diff --git a/resources/oojs-ui/i18n/et.json b/resources/oojs-ui/i18n/et.json index 4af8dbe768..aa780e4631 100644 --- a/resources/oojs-ui/i18n/et.json +++ b/resources/oojs-ui/i18n/et.json @@ -8,5 +8,6 @@ "ooui-dialog-action-close": "Sule", "ooui-outline-control-move-down": "Liiguta üksust allapoole", "ooui-outline-control-move-up": "Liiguta üksust ülespoole", + "ooui-outline-control-remove": "Eemalda üksus", "ooui-toolbar-more": "Veel" } \ No newline at end of file diff --git a/resources/oojs-ui/i18n/kk-cyrl.json b/resources/oojs-ui/i18n/kk-cyrl.json index 4c27b074b3..df37fe3a64 100644 --- a/resources/oojs-ui/i18n/kk-cyrl.json +++ b/resources/oojs-ui/i18n/kk-cyrl.json @@ -7,5 +7,6 @@ "ooui-dialog-action-close": "Жабу", "ooui-outline-control-move-down": "Элементті төмен жылжыту", "ooui-outline-control-move-up": "Элементті жоғары жылжыту", + "ooui-outline-control-remove": "Элементті алып тастау", "ooui-toolbar-more": "толығырақ" } \ No newline at end of file diff --git a/resources/oojs-ui/i18n/qu.json b/resources/oojs-ui/i18n/qu.json index 9a412f5868..d98b0e4539 100644 --- a/resources/oojs-ui/i18n/qu.json +++ b/resources/oojs-ui/i18n/qu.json @@ -1,11 +1,13 @@ { "@metadata": { "authors": [ - "AlimanRuna" + "AlimanRuna", + "Jduranboger" ] }, "ooui-dialog-action-close": "Wichq'ay", "ooui-outline-control-move-down": "Qallawata uraykuchiy", "ooui-outline-control-move-up": "Qallawata huqariy", + "ooui-outline-control-remove": "P'anqa sutikunata qichuy", "ooui-toolbar-more": "Aswan" } \ No newline at end of file diff --git a/resources/oojs-ui/oojs-ui-apex.css b/resources/oojs-ui/oojs-ui-apex.css index 338edd3c96..091f4fc594 100644 --- a/resources/oojs-ui/oojs-ui-apex.css +++ b/resources/oojs-ui/oojs-ui-apex.css @@ -86,11 +86,11 @@ transition: border-color 300ms ease-in-out; } -.oo-ui-toolGroup:hover { +.oo-ui-toolGroup.oo-ui-widget-enabled:hover { border-color: rgba(0, 0, 0, 0.1); } -.oo-ui-toolGroup .oo-ui-tool-link .oo-ui-tool-title { +.oo-ui-toolGroup.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title { color: #000; } @@ -318,11 +318,15 @@ border-bottom-right-radius: 0.25em; } -.oo-ui-barToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover { +.oo-ui-barToolGroup .oo-ui-tool-link .oo-ui-iconedElement-icon { + opacity: 0.8; +} + +.oo-ui-barToolGroup.oo-ui-widget-enabled .oo-ui-tool.oo-ui-widget-enabled:hover { border-color: rgba(0, 0, 0, 0.2); } -.oo-ui-barToolGroup .oo-ui-tool-active.oo-ui-widget-enabled { +.oo-ui-barToolGroup.oo-ui-widget-enabled .oo-ui-tool-active.oo-ui-widget-enabled { background: #f8fbfd; background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #f1f7fb), color-stop(100%, #ffffff)); background-image: -webkit-linear-gradient(top, #f1f7fb 0%, #ffffff 100%); @@ -335,26 +339,26 @@ box-shadow: inset 0 0.07em 0.07em 0 rgba(0, 0, 0, 0.07); } -.oo-ui-barToolGroup .oo-ui-tool-active.oo-ui-widget-enabled + .oo-ui-tool-active.oo-ui-widget-enabled { +.oo-ui-barToolGroup.oo-ui-widget-enabled .oo-ui-tool-active.oo-ui-widget-enabled + .oo-ui-tool-active.oo-ui-widget-enabled { border-left-color: rgba(0, 0, 0, 0.1); } -.oo-ui-barToolGroup .oo-ui-tool-link .oo-ui-iconedElement-icon { - opacity: 0.8; -} - -.oo-ui-barToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-iconedElement-icon { +.oo-ui-barToolGroup.oo-ui-widget-enabled .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-iconedElement-icon { opacity: 0.2; } -.oo-ui-barToolGroup .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-iconedElement-icon { +.oo-ui-barToolGroup.oo-ui-widget-enabled .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-iconedElement-icon { opacity: 0.8; } -.oo-ui-barToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover .oo-ui-tool-link .oo-ui-iconedElement-icon { +.oo-ui-barToolGroup.oo-ui-widget-enabled .oo-ui-tool.oo-ui-widget-enabled:hover .oo-ui-tool-link .oo-ui-iconedElement-icon { opacity: 1; } +.oo-ui-barToolGroup.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-iconedElement-icon { + opacity: 0.2; +} + .oo-ui-listToolGroup.oo-ui-popupToolGroup-active { border-color: rgba(0, 0, 0, 0.2); } @@ -405,11 +409,16 @@ opacity: 0.2; } +.oo-ui-listToolGroup.oo-ui-widget-disabled .oo-ui-indicatedElement-indicator, +.oo-ui-listToolGroup.oo-ui-widget-disabled .oo-ui-iconedElement-icon { + opacity: 0.2; +} + .oo-ui-menuToolGroup { border-color: rgba(0, 0, 0, 0.1); } -.oo-ui-menuToolGroup:hover { +.oo-ui-menuToolGroup.oo-ui-widget-enabled:hover { border-color: rgba(0, 0, 0, 0.2); } @@ -417,10 +426,30 @@ border-color: rgba(0, 0, 0, 0.25); } -.oo-ui-menuToolGroup .oo-ui-tool:hover { +.oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover { background-color: #e1f3ff; } +.oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-tool-title { + color: #ccc; +} + +.oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-iconedElement-icon { + opacity: 0.2; +} + +.oo-ui-menuToolGroup.oo-ui-widget-disabled { + color: #ccc; + text-shadow: 0 1px 1px #fff; + background-color: #f3f3f3; + border-color: #ddd; +} + +.oo-ui-menuToolGroup.oo-ui-widget-disabled .oo-ui-indicatedElement-indicator, +.oo-ui-menuToolGroup.oo-ui-widget-disabled .oo-ui-iconedElement-icon { + opacity: 0.2; +} + .oo-ui-popupToolGroup-handle .oo-ui-indicatedElement-indicator, .oo-ui-popupToolGroup-handle .oo-ui-iconedElement-icon { opacity: 0.8; diff --git a/resources/oojs-ui/oojs-ui.js b/resources/oojs-ui/oojs-ui.js index b964a12e96..937ff33caa 100644 --- a/resources/oojs-ui/oojs-ui.js +++ b/resources/oojs-ui/oojs-ui.js @@ -1,14 +1,14 @@ /*! - * OOjs UI v0.1.0-pre (e9e435be5e) + * OOjs UI v0.1.0-pre (23fb1b6144) * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2014 OOjs Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: Thu Mar 27 2014 11:42:46 GMT-0700 (PDT) + * Date: Thu Mar 27 2014 14:49:30 GMT-0700 (PDT) */ -( function () { +( function ( OO ) { 'use strict'; /** @@ -2932,11 +2932,12 @@ OO.ui.Tool.prototype.destroy = function () { * * @constructor * @param {OO.ui.ToolFactory} toolFactory Factory for creating tools + * @param {OO.ui.ToolGroupFactory} toolGroupFactory Factory for creating tool groups * @param {Object} [config] Configuration options * @cfg {boolean} [actions] Add an actions section opposite to the tools * @cfg {boolean} [shadow] Add a shadow below the toolbar */ -OO.ui.Toolbar = function OoUiToolbar( toolFactory, config ) { +OO.ui.Toolbar = function OoUiToolbar( toolFactory, toolGroupFactory, config ) { // Configuration initialization config = config || {}; @@ -2949,6 +2950,7 @@ OO.ui.Toolbar = function OoUiToolbar( toolFactory, config ) { // Properties this.toolFactory = toolFactory; + this.toolGroupFactory = toolGroupFactory; this.groups = []; this.tools = {}; this.$bar = this.$( '
' ); @@ -2992,6 +2994,15 @@ OO.ui.Toolbar.prototype.getToolFactory = function () { return this.toolFactory; }; +/** + * Get the tool group factory. + * + * @return {OO.Factory} Tool group factory + */ +OO.ui.Toolbar.prototype.getToolGroupFactory = function () { + return this.toolGroupFactory; +}; + /** * Handles mouse down events. * @@ -3031,13 +3042,7 @@ OO.ui.Toolbar.prototype.initialize = function () { OO.ui.Toolbar.prototype.setup = function ( groups ) { var i, len, type, group, items = [], - // TODO: Use a registry instead - defaultType = 'bar', - constructors = { - 'bar': OO.ui.BarToolGroup, - 'list': OO.ui.ListToolGroup, - 'menu': OO.ui.MenuToolGroup - }; + defaultType = 'bar'; // Cleanup previous groups this.reset(); @@ -3054,9 +3059,10 @@ OO.ui.Toolbar.prototype.setup = function ( groups ) { group.label = 'ooui-toolbar-more'; } } - type = constructors[group.type] ? group.type : defaultType; + // Check type has been registered + type = this.getToolGroupFactory().lookup( group.type ) ? group.type : defaultType; items.push( - new constructors[type]( this, $.extend( { '$': this.$ }, group ) ) + this.getToolGroupFactory().create( type, this, $.extend( { '$': this.$ }, group ) ) ); } this.addItems( items ); @@ -3517,6 +3523,43 @@ OO.ui.ToolGroup.prototype.destroy = function () { } this.$element.remove(); }; +/** + * Factory for tools. + * + * @class + * @extends OO.Factory + * @constructor + */ +OO.ui.ToolGroupFactory = function OoUiToolGroupFactory() { + // Parent constructor + OO.Factory.call( this ); + + var i, l, + defaultClasses = this.constructor.static.getDefaultClasses(); + + // Register default toolgroups + for ( i = 0, l = defaultClasses.length; i < l; i++ ) { + this.register( defaultClasses[i] ); + } +}; + +/* Inheritance */ + +OO.inheritClass( OO.ui.ToolGroupFactory, OO.Factory ); + +/* Static Methods */ + +/** + * Get a default set of classes to be registered on construction + * @return {Function[]} Default classes + */ +OO.ui.ToolGroupFactory.static.getDefaultClasses = function () { + return [ + OO.ui.BarToolGroup, + OO.ui.ListToolGroup, + OO.ui.MenuToolGroup + ]; +}; /** * Layout made of a fieldset and optional legend. * @@ -4558,6 +4601,8 @@ OO.inheritClass( OO.ui.BarToolGroup, OO.ui.ToolGroup ); OO.ui.BarToolGroup.static.titleTooltips = true; OO.ui.BarToolGroup.static.accelTooltips = true; + +OO.ui.BarToolGroup.static.name = 'bar'; /** * Popup list of tools with an icon and optional label. * @@ -4719,6 +4764,8 @@ OO.inheritClass( OO.ui.ListToolGroup, OO.ui.PopupToolGroup ); /* Static Properties */ OO.ui.ListToolGroup.static.accelTooltips = true; + +OO.ui.ListToolGroup.static.name = 'list'; /** * Drop down menu layout of tools as selectable menu items. * @@ -4752,6 +4799,8 @@ OO.inheritClass( OO.ui.MenuToolGroup, OO.ui.PopupToolGroup ); OO.ui.MenuToolGroup.static.accelTooltips = true; +OO.ui.MenuToolGroup.static.name = 'menu'; + /* Methods */ /** @@ -4772,7 +4821,7 @@ OO.ui.MenuToolGroup.prototype.onUpdateState = function () { } } - this.setLabel( labelTexts.join( ', ' ) ); + this.setLabel( labelTexts.join( ', ' ) || ' ' ); }; /** * UserInterface popup tool. @@ -4835,6 +4884,8 @@ OO.ui.PopupTool.prototype.onUpdateState = function () { /** * Group widget. * + * Mixin for OO.ui.Widget subclasses. + * * Use together with OO.ui.ItemWidget to make disabled state inheritable. * * @class @@ -4869,6 +4920,8 @@ OO.ui.GroupWidget.prototype.setDisabled = function ( disabled ) { var i, len; // Parent method + // Note this is calling OO.ui.Widget; we're assuming the class this is mixed into + // is a subclass of OO.ui.Widget. OO.ui.Widget.prototype.setDisabled.call( this, disabled ); // During construction, #setDisabled is called before the OO.ui.GroupElement constructor @@ -7982,4 +8035,4 @@ OO.ui.ToggleSwitchWidget.prototype.onClick = function ( e ) { this.setValue( !this.value ); } }; -}() ); +}( OO ) ); diff --git a/resources/oojs-ui/oojs-ui.svg.css b/resources/oojs-ui/oojs-ui.svg.css index 1cc6189d65..887da4d697 100644 --- a/resources/oojs-ui/oojs-ui.svg.css +++ b/resources/oojs-ui/oojs-ui.svg.css @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.1.0-pre (e9e435be5e) + * OOjs UI v0.1.0-pre (23fb1b6144) * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2014 OOjs Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: Thu Mar 27 2014 11:42:46 GMT-0700 (PDT) + * Date: Thu Mar 27 2014 14:49:30 GMT-0700 (PDT) */ /* Textures */ @@ -501,7 +501,6 @@ display: block; height: 1.5em; padding: 0.25em; - cursor: pointer; } .oo-ui-barToolGroup .oo-ui-tool-link .oo-ui-iconedElement-icon { @@ -523,6 +522,10 @@ display: none; } +.oo-ui-barToolGroup.oo-ui-widget-enabled .oo-ui-tool-link { + cursor: pointer; +} + .oo-ui-listToolGroup .oo-ui-toolGroup-tools { padding: 0.25em; } @@ -569,6 +572,10 @@ background-image: /* @embed */ url(images/icons/check.png); } +.oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link { + cursor: default; +} + .oo-ui-popupToolGroup { position: relative; height: 2em; @@ -608,6 +615,10 @@ line-height: 2.6em; } +.oo-ui-popupToolGroup.oo-ui-widget-disabled .oo-ui-popupToolGroup-handle { + cursor: default; +} + .oo-ui-popupToolGroup.oo-ui-iconedElement .oo-ui-popupToolGroup-handle .oo-ui-labeledElement-label { margin-left: 3em; } -- 2.20.1