jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/338317 )
Change subject: Hub theme widget re-design
......................................................................
Hub theme widget re-design
Bug: T157630
Change-Id: I670fce13f2a39d350460f27ac57b0d1ca0521104
---
M extension.json
M i18n/en.json
M i18n/qqq.json
M includes/CollaborationHubContentEditor.php
M includes/SpecialCreateCollaborationHub.php
D modules/ext.CollaborationKit.colour.js
D modules/ext.CollaborationKit.colourbrowser.styles.less
M modules/ext.CollaborationKit.edit.styles.less
D modules/ext.CollaborationKit.hubimage.js
A modules/ext.CollaborationKit.hubtheme.js
A modules/ext.CollaborationKit.hubtheme.styles.less
R modules/ext.CollaborationKit.iconbrowser.js
12 files changed, 580 insertions(+), 449 deletions(-)
Approvals:
Harej: Looks good to me, approved
jenkins-bot: Verified
diff --git a/extension.json b/extension.json
index d2bc720..213e22c 100644
--- a/extension.json
+++ b/extension.json
@@ -96,7 +96,7 @@
"styles": "ext.CollaborationKit.edit.styles.less"
},
"ext.CollaborationKit.iconbrowser": {
- "scripts": "ext.CollaborationKit.icon.js",
+ "scripts": "ext.CollaborationKit.iconbrowser.js",
"dependencies": [
"oojs-ui",
"oojs-ui.styles.icons-movement",
@@ -112,36 +112,26 @@
],
"styles": "ext.CollaborationKit.iconbrowser.styles.less"
},
- "ext.CollaborationKit.hubimagebrowser": {
- "scripts": "ext.CollaborationKit.hubimage.js",
+ "ext.CollaborationKit.hubtheme": {
+ "scripts": "ext.CollaborationKit.hubtheme.js",
"dependencies": [
"oojs-ui",
- "oojs-ui.styles.icons-movement",
+ "oojs-ui.styles.icons-editing-core",
+ "oojs-ui.styles.icons-moderation",
"mediawiki.widgets",
"mediawiki.widgets.UserInputWidget",
"mediawiki.widgets.MediaSearch",
- "mediawiki.api"
+ "mediawiki.api",
+ "ext.CollaborationKit.icons"
],
"messages": [
+ "collaborationkit-hubedit-hubtheme",
+ "collaborationkit-hubedit-hubtheme-help",
"collaborationkit-hubimage-browser",
"collaborationkit-hubimage-select",
- "collaborationkit-hubimage-launchbutton",
- "cancel"
- ]
- },
- "ext.CollaborationKit.colourbrowser": {
- "scripts": "ext.CollaborationKit.colour.js",
- "dependencies": [
- "oojs-ui",
- "oojs-ui.styles.icons-movement",
- "mediawiki.widgets",
- "mediawiki.widgets.UserInputWidget"
- ],
- "messages": [
+ "cancel",
"collaborationkit-colour-browser",
"collaborationkit-colour-select",
- "collaborationkit-colour-launchbutton",
- "cancel",
"collaborationkit-darkred",
"collaborationkit-red",
"collaborationkit-darkgrey",
@@ -166,7 +156,9 @@
"collaborationkit-khaki",
"collaborationkit-black"
],
- "styles":
"ext.CollaborationKit.colourbrowser.styles.less"
+ "styles": [
+ "ext.CollaborationKit.hubtheme.styles.less"
+ ]
},
"ext.CollaborationKit.list.edit": {
"scripts": "ext.CollaborationKit.list.edit.js",
diff --git a/i18n/en.json b/i18n/en.json
index f52fe47..47258de 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -87,10 +87,8 @@
"collaborationkit-icon-launchbutton": "Browse icons",
"collaborationkit-icon-browser": "Icon browser",
"collaborationkit-icon-select": "Select",
- "collaborationkit-colour-launchbutton": "Browse colors",
"collaborationkit-colour-browser": "Color browser",
"collaborationkit-colour-select": "Select",
- "collaborationkit-hubimage-launchbutton": "Browse images",
"collaborationkit-hubimage-browser": "Media browser",
"collaborationkit-hubimage-select": "Select",
"collaborationkit-subpage-toc-label": "Part of a project:",
@@ -124,6 +122,8 @@
"collaborationkit-createhub-title-help": "Where to create the
Collaboration Hub",
"collaborationkit-createhub-title-placeholder": "New Project",
"collaborationkit-hubedit-displayname-help": "Used to refer to the
project on other pages. Only needed if different from the page title.",
+ "collaborationkit-hubedit-hubtheme": "Hub theme",
+ "collaborationkit-hubedit-hubtheme-help": "The hub's visual identity,
including an identifying picture and a main colour.",
"collaborationkit-hubedit-image-help": "An image or icon to represent
the project",
"collaborationkit-hubedit-introduction-placeholder": "Introduce your
project here! Tell us what you want to do.",
"collaborationkit-hubedit-footer-help": "Appears beneath the included
features. Recommended location for categories, navigation templates, etc.",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index adcc79e..1fbaa1e 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -90,10 +90,8 @@
"collaborationkit-icon-launchbutton": "Button label for button that
launches the feature icon browser",
"collaborationkit-icon-browser": "Header label for the icon browser",
"collaborationkit-icon-select": "Button for selecting an icon in the
icon browser\n{{Identical|Select}}",
- "collaborationkit-colour-launchbutton": "Button label for button that
launches the hub colour browser",
"collaborationkit-colour-browser": "Header label for the hub colour
browser",
"collaborationkit-colour-select": "Button for selecting a colour in the
hub colour browser\n{{Identical|Select}}",
- "collaborationkit-hubimage-launchbutton": "Button label for button that
launches the hub image browser",
"collaborationkit-hubimage-browser": "Header label for the hub image
browser",
"collaborationkit-hubimage-select": "Button for selecting an image in
the hub image browser\n{{Identical|Select}}",
"collaborationkit-subpage-toc-label": "Label for the toc on a
Collaboration Hub subpage",
@@ -127,6 +125,8 @@
"collaborationkit-createhub-title-help": "Help text for title input on
Special:CreateCollaborationHub",
"collaborationkit-createhub-title-placeholder": "Placeholder text for
title input on Special:CreateCollaborationHub\n{{Identical|Project}}",
"collaborationkit-hubedit-displayname-help": "Help text for display
name input on Special:CreateCollaborationHub and the custom Hub editor",
+ "collaborationkit-hubedit-hubtheme": "Label above JavaScript widget for
selecting the 'hub theme', including an image and colour",
+ "collaborationkit-hubedit-hubtheme-help": "Help text for hub theme
widget on Special:CreateCollaborationHub and the custom Hub editor",
"collaborationkit-hubedit-image-help": "Help text for image input on
Special:CreateCollaborationHub and the custom Hub editor",
"collaborationkit-hubedit-introduction-placeholder": "Placeholder text
for introduction input on Special:CreateCollaborationHub and custom Hub editor",
"collaborationkit-hubedit-footer-help": "Help text for footer input on
custom Hub editor",
diff --git a/includes/CollaborationHubContentEditor.php
b/includes/CollaborationHubContentEditor.php
index c27957e..fb7c4a2 100644
--- a/includes/CollaborationHubContentEditor.php
+++ b/includes/CollaborationHubContentEditor.php
@@ -22,8 +22,7 @@
$out = $this->getContext()->getOutput();
$out->addModules( [
'mediawiki.htmlform',
- 'ext.CollaborationKit.colourbrowser',
- 'ext.CollaborationKit.hubimagebrowser'
+ 'ext.CollaborationKit.hubtheme'
] );
$out->addModuleStyles( [
'ext.CollaborationKit.edit.styles',
diff --git a/includes/SpecialCreateCollaborationHub.php
b/includes/SpecialCreateCollaborationHub.php
index f6ed6b6..437b355 100644
--- a/includes/SpecialCreateCollaborationHub.php
+++ b/includes/SpecialCreateCollaborationHub.php
@@ -21,8 +21,7 @@
public function execute( $par ) {
$out = $this->getContext()->getOutput();
$out->addModules( [
- 'ext.CollaborationKit.colourbrowser',
- 'ext.CollaborationKit.hubimagebrowser'
+ 'ext.CollaborationKit.hubtheme'
] );
$out->addModuleStyles( 'ext.CollaborationKit.edit.styles' );
$out->addJsConfigVars( 'wgCollaborationKitColourList',
CollaborationHubContent::getThemeColours() );
diff --git a/modules/ext.CollaborationKit.colour.js
b/modules/ext.CollaborationKit.colour.js
deleted file mode 100644
index 18df988..0000000
--- a/modules/ext.CollaborationKit.colour.js
+++ /dev/null
@@ -1,155 +0,0 @@
-( function ( $, mw, OO ) {
- var setupPage, getColourBlock, ProcessDialog, openItUp;
-
- /**
- * Get a colour block for inserting into page
- *
- * @param {string} colorName Name of colour
- * @return {jQuery} A div showing the colour
- */
- getColourBlock = function ( colorName ) {
- return $( '<div></div>' )
- .addClass( 'mw-ck-colourblock' )
- .addClass( 'mw-ck-colour-' + colorName )
- .attr( 'title', mw.msg( 'collaborationkit-' + colorName
) );
- };
-
- /**
- * Subclass ProcessDialog.
- *
- * @param {Object} config
- */
- ProcessDialog = function ( config ) {
- ProcessDialog.super.call( this, config );
- };
- OO.inheritClass( ProcessDialog, OO.ui.ProcessDialog );
-
- // Specify a static title and actions.
- ProcessDialog.static.title = mw.msg( 'collaborationkit-colour-browser'
);
- ProcessDialog.static.name = 'collabkit-colourselect';
- ProcessDialog.static.actions = [
- { action: 'save', label: mw.msg(
'collaborationkit-colour-select' ), flags: 'primary' },
- { label: mw.msg( 'cancel' ), flags: 'safe' }
- ];
-
- /**
- * Use the initialize() method to add content to the dialog's $body,
- * to initialize widgets, and to set up event handlers.
- */
- ProcessDialog.prototype.initialize = function () {
- var colourList, radioChoices, className;
-
- ProcessDialog.super.prototype.initialize.apply( this, arguments
);
-
- this.content = new OO.ui.PanelLayout( { padded: true, expanded:
false } );
-
- colourList = mw.config.get( 'wgCollaborationKitColourList' );
-
- radioChoices = [];
- for ( i = 0; i < colourList.length; i++ ) {
- radioChoices.push( new OO.ui.RadioOptionWidget( {
- label: getColourBlock( colourList[ i ] ),
- data: colourList[ i ]
- } ) );
- }
-
- this.radioSelect = new OO.ui.RadioSelectWidget( {
- name: 'colourChoice',
- items: radioChoices,
- classes: [ 'mw-ck-colourchoice-container' ]
- } );
-
- this.radioSelect.selectItemByData( $( '.mw-ck-colour-input
select' ).val() );
-
- this.content.$element.append( this.radioSelect.$element );
-
- this.$body.append( this.content.$element );
- };
-
- /**
- * In the event "Select" is pressed
- *
- */
- ProcessDialog.prototype.getActionProcess = function ( action ) {
- var dialog, toAppend, openItUp, windowManager, processDialog,
colourBrowserButton;
-
- dialog = this;
- if ( action ) {
- return new OO.ui.Process( function () {
- var toAppend, $newColour;
- toAppend =
dialog.radioSelect.getSelectedItem().getData();
- $newColour = getColourBlock( toAppend );
-
- // Generate preview
- $( '.colourPreview .mw-ck-colourblock' )
- .replaceWith( $newColour );
- $( '.colourPreview .mw-ck-colourname' ).text(
- mw.msg( 'collaborationkit-' + toAppend )
- );
-
- // Set form value
- $( 'div.mw-ck-colour-input select
option[value=' + toAppend + ']' )
- .attr( 'selected', 'selected' );
-
- dialog.close( { action: action } );
- } );
- }
- // Fallback to parent handler.
- return ProcessDialog.super.prototype.getActionProcess.call(
this, action );
- };
-
- /**
- * Get dialog height.
- *
- * @return {int} Dialog height
- */
- ProcessDialog.prototype.getBodyHeight = function () {
- return this.content.$element.outerHeight( true );
- };
-
- /**
- * Create and append the window manager.
- */
- openItUp = function () {
- windowManager = new OO.ui.WindowManager();
- $( 'body' ).append( windowManager.$element );
-
- // Create a new dialog window.
- processDialog = new ProcessDialog( {
- size: 'medium'
- } );
-
- // Add windows to window manager using the addWindows() method.
- windowManager.addWindows( [ processDialog ] );
-
- // Open the window.
- windowManager.openWindow( processDialog );
- };
-
- /**
- * Initial setup function run when DOM loaded.
- */
- setupPage = function () {
- var curColour;
- colourBrowserButton = new OO.ui.ButtonWidget();
- colourBrowserButton.setLabel( mw.msg(
'collaborationkit-colour-launchbutton' ) );
- colourBrowserButton.on( 'click', openItUp );
-
- curColour = $( 'div.mw-ck-colour-input select option:selected'
).val();
-
- $( '.mw-ck-colour-input .oo-ui-dropdownWidget' ).css(
'display', 'none' );
- $( '.mw-ck-colour-input .mw-ck-colour-input' ).append(
- $( '<div class="colourPreview
mw-ck-colourblock-container"></div>' )
- .append( getColourBlock( curColour ) )
- .append(
- $( '<div
class="mw-ck-colourname"></div>' )
- .text( mw.msg(
'collaborationkit-' + curColour ) )
- )
- .append( $( '<div
class="colourBrowserButton"></div>' )
- .append( colourBrowserButton.$element )
- )
- );
- };
-
- $( setupPage );
-} )( jQuery, mediaWiki, OO );
diff --git a/modules/ext.CollaborationKit.colourbrowser.styles.less
b/modules/ext.CollaborationKit.colourbrowser.styles.less
deleted file mode 100644
index 9cd774d..0000000
--- a/modules/ext.CollaborationKit.colourbrowser.styles.less
+++ /dev/null
@@ -1,107 +0,0 @@
-@import "ext.CollaborationKit.mixins.less";
-
-.mw-ck-colourblock-container {
- margin-top:10px;
- margin-bottom:10px;
-}
-
-.oo-ui-optionWidget-selected .mw-ck-colourblock {
- border: 2px solid #2a4b8d;
- width: 46px;
- height: 46px;
- -webkit-box-shadow: 0 0 5px 0px rgba(42,75,141,1);
- -moz-box-shadow: 0 0 5px 0px rgba(42,75,141,1);
- box-shadow: 0 0 5px 0px rgba(42,75,141,1);
-}
-
-.colourBrowserButton {
- margin-top: 0.5em;
-}
-
-.mw-ck-colourblock {
- width: 50px;
- height: 50px;
-}
-
-.mw-ck-colourchoice-container {
- text-align: center;
-}
-
-.mw-ck-colourchoice-container .oo-ui-optionWidget {
- display: inline-block;
-}
-
-.mw-ck-colourchoice-container .oo-ui-radioInputWidget.oo-ui-radioInputWidget {
- display: none;
-}
-
-.mw-ck-colour-darkred {
- background-color: @darkred;
-}
-.mw-ck-colour-red {
- background-color: @red;
-}
-.mw-ck-colour-darkgrey {
- background-color: @darkgrey;
-}
-.mw-ck-colour-lightgrey {
- background-color: @lightgrey;
-}
-.mw-ck-colour-skyblue {
- background-color: @skyblue;
-}
-.mw-ck-colour-blue {
- background-color: @blue;
-}
-.mw-ck-colour-bluegrey {
- background-color: @bluegrey;
-}
-.mw-ck-colour-navyblue {
- background-color: @navyblue;
-}
-.mw-ck-colour-darkblue {
- background-color: @darkblue;
-}
-.mw-ck-colour-aquamarine {
- background-color: @aquamarine;
-}
-.mw-ck-colour-violet {
- background-color: @violet;
-}
-.mw-ck-colour-purple {
- background-color: @purple;
-}
-.mw-ck-colour-mauve {
- background-color: @mauve;
-}
-.mw-ck-colour-lightmauve {
- background-color: @lightmauve;
-}
-.mw-ck-colour-salmon {
- background-color: @salmon;
-}
-.mw-ck-colour-orange {
- background-color: @orange;
-}
-.mw-ck-colour-yellow {
- background-color: @yellow;
-}
-.mw-ck-colour-gold {
- background-color: @gold;
-}
-.mw-ck-colour-pastelyellow {
- background-color: @pastelyellow;
-}
-.mw-ck-colour-forestgreen {
- background-color: @forestgreen;
-}
-.mw-ck-colour-brightgreen {
- background-color: @brightgreen;
-}
-.mw-ck-colour-khaki {
- background-color: @khaki;
-}
-/* Black is special */
-.mw-ck-colour-black {
- background-color: #000;
-}
diff --git a/modules/ext.CollaborationKit.edit.styles.less
b/modules/ext.CollaborationKit.edit.styles.less
index 5b7e77c..3c138b2 100644
--- a/modules/ext.CollaborationKit.edit.styles.less
+++ b/modules/ext.CollaborationKit.edit.styles.less
@@ -10,18 +10,13 @@
}
.mw-htmlform-ooui-wrapper,
.mw-collabkit-modifiededitform {
- label .oo-ui-labelElement-label {
+ .oo-ui-fieldLayout-header label.oo-ui-labelElement-label {
font-weight: bold;
}
- .mw-ck-title-input,
- .mw-ck-display-input,
- .mw-ck-icon-input,
- .mw-ck-hub-image-input {
-
&.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-top >
.oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header,
- &.oo-ui-textInputWidget {
- max-width: 40em;
- }
- }
+}
+
+.mw-ck-hub-topform {
+ max-width: 50em;
}
.ck-customeditor-borders( @color ) {
@@ -40,17 +35,30 @@
}
.mw-ck-namespace-input {
- width: 15em;
+ width: 35.5%;
display: inline-table !important;
}
+.mw-ck-namespace-input-js {
+ width: 100%;
+ display: flex !important;
+
+ .oo-ui-fieldLayout-body {
+ width: 35.5%;
+ }
+}
+
.mw-ck-title-input {
- width: 24.75em;
+ width: 64%;
display: inline-table !important;
padding-left: 0.25em;
margin-top: 0 !important;
}
+.mw-ck-title-input .oo-ui-fieldLayout-body {
+ width: 100%;
+}
+
.mw-ck-theme-darkred {
.ck-customeditor-borders( @darkred );
}
diff --git a/modules/ext.CollaborationKit.hubimage.js
b/modules/ext.CollaborationKit.hubimage.js
deleted file mode 100644
index a5718a4..0000000
--- a/modules/ext.CollaborationKit.hubimage.js
+++ /dev/null
@@ -1,146 +0,0 @@
-( function ( $, mw, OO ) {
-
- /**
- * Subclass ProcessDialog.
- *
- * @param {Object} config
- */
- function ProcessDialog( config ) {
- ProcessDialog.super.call( this, config );
- }
- OO.inheritClass( ProcessDialog, OO.ui.ProcessDialog );
-
- // Specify a static title and actions.
- ProcessDialog.static.title = mw.msg(
'collaborationkit-hubimage-browser' );
- ProcessDialog.static.name = 'collabkit-hubimage';
- ProcessDialog.static.actions = [
- { action: 'save', label: mw.msg(
'collaborationkit-hubimage-select' ), flags: 'primary' },
- { label: mw.msg( 'cancel' ), flags: 'safe' }
- ];
-
- /**
- * Use the initialize() method to add content to the dialog's $body,
- * to initialize widgets, and to set up event handlers.
- */
- ProcessDialog.prototype.initialize = function () {
- var defaultSearchTerm, nsPrefix;
-
- nsPrefix = mw.config.get( 'wgFormattedNamespaces' )[ 6 ] + ':';
-
- ProcessDialog.super.prototype.initialize.apply( this, arguments
);
-
- // Default image order of preference:
- // Display name > Page title > Nothing
-
- defaultSearchTerm = '';
-
- if ( mw.config.get( 'wgTitle' ) !== undefined ) {
- defaultSearchTerm = mw.config.get( 'wgTitle' );
- }
- if ( $( 'input[name=wptitle]' ).val() !== '' && $(
'input[name=wptitle]' ).val() !== undefined ) {
- defaultSearchTerm = $( 'input[name=wptitle]' ).val();
- }
- if ( $( 'input[name=wpdisplay_name]' ).val() !== '' && $(
'input[name=wpdisplay_name]' ).val() !== undefined ) {
- defaultSearchTerm = $( 'input[name=wpdisplay_name]'
).val();
- }
- if ( $( 'input[name=wpCollabHubDisplayName]' ).val() !== '' &&
$( 'input[name=wpCollabHubDisplayName]' ).val() !== undefined ) {
- defaultSearchTerm = $(
'input[name=wpCollabHubDisplayName]' ).val();
- }
-
- this.content = new mw.widgets.MediaSearchWidget();
- this.content.getQuery().setValue( defaultSearchTerm );
- this.$body.append( this.content.$element );
- };
-
- /**
- * In the event "Select" is pressed
- *
- */
- ProcessDialog.prototype.getActionProcess = function ( action ) {
- var dialog, openItUp, windowManager, processDialog,
- currentImageFilename, currentImage,
hubimageBrowserButton;
-
- dialog = this;
- if ( action ) {
- return new OO.ui.Process( function () {
- fileObj =
dialog.content.getResults().getSelectedItem();
- if ( fileObj === null ) {
- return dialog.close();
- }
- fileObj = fileObj.getData();
- fileUrl = fileObj.thumburl;
- fileTitle = new mw.Title( fileObj.title );
- fileTitle = fileTitle.title + '.' +
fileTitle.ext;
-
- // Generate preview
- $( 'img.hubimagePreview' )
- .attr( 'style', 'display:block' )
- .attr( 'src', fileUrl )
- .attr( 'width', '200px' )
- .css( 'margin-bottom', '10px' );
-
- // Set form value
- $( '.mw-ck-hub-image-input input' ).val(
fileTitle );
-
- dialog.close( { action: action } );
- } );
- }
- // Fallback to parent handler.
- return ProcessDialog.super.prototype.getActionProcess.call(
this, action );
- };
-
- /**
- * Get dialog height.
- */
- ProcessDialog.prototype.getBodyHeight = function () {
- return 600;
- };
-
- /**
- * Create and append the window manager.
- */
- openItUp = function () {
- windowManager = new OO.ui.WindowManager();
- $( 'body' ).append( windowManager.$element );
-
- // Create a new dialog window.
- processDialog = new ProcessDialog( {
- size: 'large'
- } );
-
- // Add windows to window manager using the addWindows() method.
- windowManager.addWindows( [ processDialog ] );
-
- // Open the window.
- windowManager.openWindow( processDialog );
- };
-
- hubimageBrowserButton = new OO.ui.ButtonWidget();
- hubimageBrowserButton.setLabel( mw.msg(
'collaborationkit-hubimage-launchbutton' ) );
- hubimageBrowserButton.on( 'click', openItUp );
-
- $( 'div.mw-ck-hub-image-input input' ).css( 'display', 'none' );
- $( 'div.mw-ck-hub-image-input div.oo-ui-textInputWidget' )
- .append( '<img class="hubimagePreview" style="width:200px;
background:#eee; height:200px; margin-bottom:10px; display:block;" /><div
class="hubimageBrowserButton">' )
- .append( hubimageBrowserButton.$element )
- .append( '</div>' );
- // Load current hub image
- if ( $( 'div.mw-ck-hub-image-input input' ).val() !== '' ) {
- currentImageFilename = 'File:' + $( 'div.mw-ck-hub-image-input
input' ).val();
- currentImage = new mw.Api()
- .get( {
- action: 'query',
- titles: currentImageFilename,
- prop: 'imageinfo',
- iiprop: 'url',
- formatversion: 2,
- iiurlwidth: 200
- } )
- .done( function ( data ) {
- $( 'img.hubimagePreview' )
- .attr( 'src', data.query.pages[ 0
].imageinfo[ 0 ].thumburl )
- .css( 'height', 'auto' );
- }
- );
- }
-} )( jQuery, mediaWiki, OO );
diff --git a/modules/ext.CollaborationKit.hubtheme.js
b/modules/ext.CollaborationKit.hubtheme.js
new file mode 100644
index 0000000..ff67e0c
--- /dev/null
+++ b/modules/ext.CollaborationKit.hubtheme.js
@@ -0,0 +1,349 @@
+( function ( $, mw, OO ) {
+
+ var getColourBlock, getThumbnail, ImageProcessDialog,
ColourProcessDialog, openColourBrowser;
+
+ /**
+ * Get a colour block for inserting into page
+ *
+ * @param {string} colorName Name of colour
+ * @return {jQuery.Promise} Promise with API result
+ */
+ getColourBlock = function ( colorName ) {
+ return $( '<div></div>' )
+ .addClass( 'mw-ck-colourblock' )
+ .addClass( 'mw-ck-colour-' + colorName )
+ .attr( 'title', mw.msg( 'collaborationkit-' + colorName
) );
+ };
+
+ /**
+ * Get an image thumbnail with 150px width
+ *
+ * @param {string} filename
+ * @return {jQuery} promise
+ */
+ getThumbnail = function ( filename ) {
+ return new mw.Api()
+ .get( {
+ action: 'query',
+ titles: filename,
+ prop: 'imageinfo',
+ iiprop: 'url',
+ formatversion: 2,
+ iiurlwidth: 150
+ }
+ );
+ };
+
+ /**
+ * Subclass ProcessDialog for selecting a colour.
+ *
+ * @param {Object} config
+ */
+ ColourProcessDialog = function ( config ) {
+ ColourProcessDialog.super.call( this, config );
+ };
+ OO.inheritClass( ColourProcessDialog, OO.ui.ProcessDialog );
+
+ // Specify a static title and actions.
+ ColourProcessDialog.static.title = mw.msg(
'collaborationkit-colour-browser' );
+ ColourProcessDialog.static.name = 'collabkit-colourselect';
+ ColourProcessDialog.static.actions = [
+ { action: 'save', label: mw.msg(
'collaborationkit-colour-select' ), flags: 'primary' },
+ { label: mw.msg( 'cancel' ), flags: 'safe' }
+ ];
+
+ /**
+ * Use the initialize() method to add content to the dialog's $body,
+ * to initialize widgets, and to set up event handlers.
+ */
+ ColourProcessDialog.prototype.initialize = function () {
+ var colourList, radioChoices, className;
+
+ ColourProcessDialog.super.prototype.initialize.apply( this,
arguments );
+
+ this.content = new OO.ui.PanelLayout( { padded: true, expanded:
false } );
+
+ colourList = mw.config.get( 'wgCollaborationKitColourList' );
+
+ radioChoices = [];
+ for ( i = 0; i < colourList.length; i++ ) {
+ radioChoices.push( new OO.ui.RadioOptionWidget( {
+ label: getColourBlock( colourList[ i ] ),
+ data: colourList[ i ]
+ } ) );
+ }
+
+ this.radioSelect = new OO.ui.RadioSelectWidget( {
+ name: 'colourChoice',
+ items: radioChoices,
+ classes: [ 'mw-ck-colourchoice-container' ]
+ } );
+
+ this.radioSelect.selectItemByData( $( '.mw-ck-colour-input
select' ).val() );
+
+ this.content.$element.append( this.radioSelect.$element );
+
+ this.$body.append( this.content.$element );
+ };
+
+ /**
+ * In the event "Select" is pressed
+ *
+ */
+ ColourProcessDialog.prototype.getActionProcess = function ( action ) {
+ var dialog, toAppend, openColourBrowser, windowManager,
colourBrowserButton, oldColour;
+
+ oldColour = $( 'div.mw-ck-colour-input select option:selected'
).val();
+ dialog = this;
+ if ( action ) {
+ return new OO.ui.Process( function () {
+ var toAppend, $newColour;
+ toAppend =
dialog.radioSelect.getSelectedItem().getData();
+
+ // Generate preview
+ $( '.colourPreview .mw-ck-colourblock' )
+ .attr( 'title', mw.msg(
'collaborationkit-' + toAppend ) )
+ .removeClass()
+ .addClass( 'colourPreview
mw-ck-colourblock mw-ck-colour-' + toAppend );
+
+ $( '.hubimagePreview' )
+ .attr( 'class', 'hubimagePreview
mw-ck-icon mw-ck-icon-puzzlepiece mw-ck-icon-puzzlepiece-' + toAppend );
+
+ $( 'body' )
+ .removeClass( 'mw-ck-theme-' +
oldColour )
+ .addClass( 'mw-ck-theme-' + toAppend );
+
+ // Set form value
+ $( 'div.mw-ck-colour-input select
option[value=' + toAppend + ']' )
+ .attr( 'selected', 'selected' );
+
+ dialog.close( { action: action } );
+ } );
+ }
+ // Fallback to parent handler.
+ return
ColourProcessDialog.super.prototype.getActionProcess.call( this, action );
+ };
+
+ /**
+ * Get dialog height.
+ *
+ * @return {int} Dialog height
+ */
+ ColourProcessDialog.prototype.getBodyHeight = function () {
+ return this.content.$element.outerHeight( true );
+ };
+
+ /**
+ * Create and append the window manager.
+ */
+ openColourBrowser = function () {
+ windowManager = new OO.ui.WindowManager();
+ $( 'body' ).append( windowManager.$element );
+
+ // Create a new dialog window.
+ processDialog = new ColourProcessDialog( {
+ size: 'medium'
+ } );
+
+ // Add windows to window manager using the addWindows() method.
+ windowManager.addWindows( [ processDialog ] );
+
+ // Open the window.
+ windowManager.openWindow( processDialog );
+ };
+
+ /**
+ * Subclass ProcessDialog.
+ *
+ * @param {Object} config
+ */
+ ImageProcessDialog = function ( config ) {
+ ImageProcessDialog.super.call( this, config );
+ };
+ OO.inheritClass( ImageProcessDialog, OO.ui.ProcessDialog );
+
+ // Specify a static title and actions.
+ ImageProcessDialog.static.title = mw.msg(
'collaborationkit-hubimage-browser' );
+ ImageProcessDialog.static.name = 'collabkit-hubimage';
+ ImageProcessDialog.static.actions = [
+ { action: 'save', label: mw.msg(
'collaborationkit-hubimage-select' ), flags: 'primary' },
+ { label: mw.msg( 'cancel' ), flags: 'safe' }
+ ];
+
+ /**
+ * Use the initialize() method to add content to the dialog's $body,
+ * to initialize widgets, and to set up event handlers.
+ */
+ ImageProcessDialog.prototype.initialize = function () {
+ var defaultSearchTerm, nsPrefix;
+
+ nsPrefix = mw.config.get( 'wgFormattedNamespaces' )[ 6 ] + ':';
+
+ ImageProcessDialog.super.prototype.initialize.apply( this,
arguments );
+
+ // Default image order of preference:
+ // Display name > Page title > Nothing
+
+ defaultSearchTerm = '';
+
+ if ( mw.config.get( 'wgTitle' ) !== undefined ) {
+ defaultSearchTerm = mw.config.get( 'wgTitle' );
+ }
+ if ( $( 'input[name=wptitle]' ).val() !== '' && $(
'input[name=wptitle]' ).val() !== undefined ) {
+ defaultSearchTerm = $( 'input[name=wptitle]' ).val();
+ }
+ if ( $( 'input[name=wpdisplay_name]' ).val() !== '' && $(
'input[name=wpdisplay_name]' ).val() !== undefined ) {
+ defaultSearchTerm = $( 'input[name=wpdisplay_name]'
).val();
+ }
+ if ( $( 'input[name=wpCollabHubDisplayName]' ).val() !== '' &&
$( 'input[name=wpCollabHubDisplayName]' ).val() !== undefined ) {
+ defaultSearchTerm = $(
'input[name=wpCollabHubDisplayName]' ).val();
+ }
+
+ this.content = new mw.widgets.MediaSearchWidget();
+ this.content.getQuery().setValue( defaultSearchTerm );
+ this.$body.append( this.content.$element );
+ };
+
+ /**
+ * In the event "Select" is pressed
+ *
+ */
+ ImageProcessDialog.prototype.getActionProcess = function ( action ) {
+ var dialog, openImageBrowser, windowManager, processDialog,
fileTitle,
+ currentImageFilename, currentImage,
hubimageBrowserButton;
+
+ dialog = this;
+ if ( action ) {
+ return new OO.ui.Process( function () {
+ fileObj =
dialog.content.getResults().getSelectedItem();
+ if ( fileObj === null ) {
+ return dialog.close();
+ }
+ getThumbnail( fileObj.getData().title )
+ .done( function ( data ) {
+ fileUrl = data.query.pages[ 0
].imageinfo[ 0 ].thumburl;
+ fileHeight = data.query.pages[
0 ].imageinfo[ 0 ].thumbheight;
+ fileTitleObj = new mw.Title(
fileObj.getData().title );
+ fileTitle = fileTitleObj.title
+ '.' + fileTitleObj.ext;
+
+ // Generate preview
+ $( 'div.hubimagePreview' )
+ .css( 'background',
'url("' + fileUrl + '")' )
+ .css( 'height',
fileHeight + 'px' );
+
+ // Set form value
+ $( '.mw-ck-hub-image-input
input' ).val( fileTitle );
+ dialog.close( { action: action
} );
+ } );
+ } );
+ }
+ // Fallback to parent handler.
+ return
ImageProcessDialog.super.prototype.getActionProcess.call( this, action );
+ };
+
+ /**
+ * Get dialog height.
+ */
+ ImageProcessDialog.prototype.getBodyHeight = function () {
+ return 600;
+ };
+
+ /**
+ * Create and append the window manager.
+ */
+ openImageBrowser = function () {
+ windowManager = new OO.ui.WindowManager();
+ $( 'body' ).append( windowManager.$element );
+
+ // Create a new dialog window.
+ processDialog = new ImageProcessDialog( {
+ size: 'large'
+ } );
+
+ // Add windows to window manager using the addWindows() method.
+ windowManager.addWindows( [ processDialog ] );
+
+ // Open the window.
+ windowManager.openWindow( processDialog );
+ };
+
+ /**
+ * Initial setup function run when DOM loaded.
+ */
+ setupPage = function () {
+ var curColour, colourBrowserButton, currentImage,
currentImageFilename, $hubthemeWidget;
+
+ // Defining buttons
+ colourBrowserButton = new OO.ui.ButtonWidget( {
+ icon: 'search',
+ framed: false,
+ classes: [ 'mw-ck-hubtheme-widget-inlinebutton' ]
+ } );
+ colourBrowserButton.on( 'click', openColourBrowser );
+
+ hubimageBrowserButton = new OO.ui.ButtonWidget( {
+ icon: 'search',
+ framed: false,
+ classes: [ 'mw-ck-hubtheme-widget-inlinebutton' ]
+ } );
+ hubimageBrowserButton.on( 'click', openImageBrowser );
+
+ // Ascertaining default/pre-selected values
+ curColour = $( 'div.mw-ck-colour-input select option:selected'
).val();
+
+ if ( $( 'div.mw-ck-hub-image-input input' ).val() !== '' ) {
+ currentImageFilename = 'File:' + $(
'div.mw-ck-hub-image-input input' ).val();
+ getThumbnail( currentImageFilename )
+ .done( function ( data ) {
+ $( 'div.hubimagePreview' )
+ .css( 'background', 'url("' +
data.query.pages[ 0 ].imageinfo[ 0 ].thumburl + '")' )
+ .css( 'height',
data.query.pages[ 0 ].imageinfo[ 0 ].thumbheight + 'px' );
+ } );
+ }
+
+ // Hiding HTML form elements
+ $( '.mw-ck-colour-input' ).css( 'display', 'none' );
+ $( '.mw-ck-hub-image-input' ).css( 'display', 'none' );
+
+ // Setting up
+ $( '.mw-htmlform-ooui-header' ).append( '<div
class="mw-ck-hub-topform"></div>' );
+ $( '.mw-collabkit-modifiededitform' ).prepend( '<div
class="mw-ck-hub-topform"></div>' );
+
+ $hubthemeWidget = $( '<div
class="mw-ck-hubtheme-widget"></div>' )
+ .append( $( '<div
class="oo-ui-fieldLayout-header"></div>' )
+ .append( new OO.ui.LabelWidget( {
+ label: mw.msg(
'collaborationkit-hubedit-hubtheme' )
+ } ).$element )
+ .append( new OO.ui.PopupButtonWidget( {
+ classes: [
'mw-ck-hubtheme-widget-help', 'oo-ui-fieldLayout-help' ],
+ framed: false,
+ icon: 'info',
+ popup: {
+ $content: $( '<span></span>'
).append( mw.msg( 'collaborationkit-hubedit-hubtheme-help' ) ),
+ padded: true
+ }
+ } ).$element )
+ )
+ .append( $( '<div class="hubimagePreview mw-ck-icon
mw-ck-icon-puzzlepiece" />' )
+ .addClass( 'mw-ck-icon-puzzlepiece-' +
curColour )
+ .append( hubimageBrowserButton.$element )
+ )
+ .append( $( '<div class="colourPreview
mw-ck-colourblock-container"></div>' )
+ .append( getColourBlock( curColour )
+ .append( colourBrowserButton.$element )
+ )
+ );
+
+ $( '.mw-ck-hub-topform' ).append( $hubthemeWidget );
+ $( '.mw-ck-hub-topform' ).append( '<div
class="mw-ck-hub-name"></div>' );
+ $( '.mw-htmlform-field-HTMLSelectField.mw-ck-namespace-input' )
+ .attr( 'class', 'mw-htmlform-field-HTMLSelectField
mw-ck-namespace-input-js' )
+ .append( $(
'.mw-htmlform-field-HTMLTextField.mw-ck-title-input' ) );
+ $( '.mw-ck-hub-name' )
+ .append( $(
'.mw-htmlform-field-HTMLSelectField.mw-ck-namespace-input-js' ) )
+ .append( $(
'.mw-htmlform-field-HTMLTextField.mw-ck-display-input' ) );
+ };
+
+ $( setupPage );
+
+} )( jQuery, mediaWiki, OO );
diff --git a/modules/ext.CollaborationKit.hubtheme.styles.less
b/modules/ext.CollaborationKit.hubtheme.styles.less
new file mode 100644
index 0000000..bb67d05
--- /dev/null
+++ b/modules/ext.CollaborationKit.hubtheme.styles.less
@@ -0,0 +1,192 @@
+@import "ext.CollaborationKit.mixins.less";
+
+.mw-ck-hub-topform {
+ display: flex;
+ width: 100%;
+ max-width: 50em;
+}
+
+.mw-ck-hubtheme-widget {
+ float: left;
+ display: inline-table;
+ padding-right: 2em;
+}
+
+.mw-collabkit-modifiededitform {
+ .mw-ck-hubtheme-widget .oo-ui-fieldLayout-header {
+ padding-bottom: 0.3125em;
+ }
+}
+
+.mw-ck-hubtheme-widget-help {
+ float: right;
+}
+
+.mw-ck-hubtheme-widget-inlinebutton {
+ width: 35px;
+ height: 35px;
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ background: #fff;
+ opacity: 0.75;
+ border: solid 1px #a2a9b1;
+ border-right: none;
+ border-bottom: none;
+ border-radius: 0 2px 2px 0;
+
+ a span {
+ width: 35px !important;
+ height: 35px !important;
+ }
+
+ &:hover,
+ &:active {
+ border: solid 1px #72777d;
+ border-right: none;
+ border-bottom: none;
+ opacity: 0.9;
+ }
+}
+
+.hubimagePreview {
+ width: 150px;
+ height: 150px;
+ margin-bottom: 1.5em;
+ border: solid 1px #a2a9b1;
+ background-color: #f9f9f9;
+ border-radius: 3px;
+}
+
+.hubimagePreview .mw-ck-hubtheme-widget-inlinebutton {
+ border-radius: 3px 0 2px 0;
+}
+
+.hubimagePreview,
+.colourPreview {
+ position: relative;
+}
+
+.hubimagePreview:hover,
+.hubimagePreview:active,
+.mw-ck-colourblock-container:hover,
+.mw-ck-colourblock-container:active {
+ border: solid 1px #72777d;
+}
+
+.mw-ck-colourblock-container {
+ border: solid 1px #a2a9b1;
+ border-radius: 3px;
+ position: relative;
+}
+
+.mw-ck-hub-name {
+ flex-grow: 1;
+}
+
+.mw-ck-colourblock-container {
+ margin-top: .75em;
+ margin-bottom: .5em;
+}
+
+.oo-ui-optionWidget-selected .mw-ck-colourblock {
+ border: 2px solid #2a4b8d;
+ width: 146px;
+ height: 26px;
+ -webkit-box-shadow: 0 0 5px 0px rgba(42,75,141,1);
+ -moz-box-shadow: 0 0 5px 0px rgba(42,75,141,1);
+ box-shadow: 0 0 5px 0px rgba(42,75,141,1);
+}
+
+.colourBrowserButton {
+ margin-top: 0.5em;
+}
+
+.mw-ck-colourblock {
+ margin: 0;
+ border-radius: 2px;
+ width: 150px;
+ height: 35px;
+}
+
+.mw-ck-colourchoice-container {
+ text-align: center;
+
+ .oo-ui-optionWidget {
+ display: inline-block;
+ }
+ .oo-ui-radioInputWidget.oo-ui-radioInputWidget {
+ display: none;
+ }
+}
+
+.mw-ck-colour-darkred {
+ background-color: @darkred;
+}
+.mw-ck-colour-red {
+ background-color: @red;
+}
+.mw-ck-colour-darkgrey {
+ background-color: @darkgrey;
+}
+.mw-ck-colour-lightgrey {
+ background-color: @lightgrey;
+}
+.mw-ck-colour-skyblue {
+ background-color: @skyblue;
+}
+.mw-ck-colour-blue {
+ background-color: @blue;
+}
+.mw-ck-colour-bluegrey {
+ background-color: @bluegrey;
+}
+.mw-ck-colour-navyblue {
+ background-color: @navyblue;
+}
+.mw-ck-colour-darkblue {
+ background-color: @darkblue;
+}
+.mw-ck-colour-aquamarine {
+ background-color: @aquamarine;
+}
+.mw-ck-colour-violet {
+ background-color: @violet;
+}
+.mw-ck-colour-purple {
+ background-color: @purple;
+}
+.mw-ck-colour-mauve {
+ background-color: @mauve;
+}
+.mw-ck-colour-lightmauve {
+ background-color: @lightmauve;
+}
+.mw-ck-colour-salmon {
+ background-color: @salmon;
+}
+.mw-ck-colour-orange {
+ background-color: @orange;
+}
+.mw-ck-colour-yellow {
+ background-color: @yellow;
+}
+.mw-ck-colour-gold {
+ background-color: @gold;
+}
+.mw-ck-colour-pastelyellow {
+ background-color: @pastelyellow;
+}
+.mw-ck-colour-forestgreen {
+ background-color: @forestgreen;
+}
+.mw-ck-colour-brightgreen {
+ background-color: @brightgreen;
+}
+.mw-ck-colour-khaki {
+ background-color: @khaki;
+}
+/* Black is special */
+.mw-ck-colour-black {
+ background-color: #000;
+}
diff --git a/modules/ext.CollaborationKit.icon.js
b/modules/ext.CollaborationKit.iconbrowser.js
similarity index 100%
rename from modules/ext.CollaborationKit.icon.js
rename to modules/ext.CollaborationKit.iconbrowser.js
--
To view, visit https://gerrit.wikimedia.org/r/338317
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I670fce13f2a39d350460f27ac57b0d1ca0521104
Gerrit-PatchSet: 18
Gerrit-Project: mediawiki/extensions/CollaborationKit
Gerrit-Branch: master
Gerrit-Owner: Harej <jamesmh...@gmail.com>
Gerrit-Reviewer: Harej <jamesmh...@gmail.com>
Gerrit-Reviewer: Isarra <zhoris...@gmail.com>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
