Harej has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/338317 )
Change subject: [WIP] Hub theme widget re-design
......................................................................
[WIP] 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
M modules/ext.CollaborationKit.edit.styles.less
D modules/ext.CollaborationKit.hubimage.js
A modules/ext.CollaborationKit.hubtheme.js
R modules/ext.CollaborationKit.hubtheme.styles.less
R modules/ext.CollaborationKit.icon.styles.less
11 files changed, 402 insertions(+), 337 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/CollaborationKit
refs/changes/17/338317/1
diff --git a/extension.json b/extension.json
index d2bc720..8dddecd 100644
--- a/extension.json
+++ b/extension.json
@@ -95,7 +95,7 @@
"ext.CollaborationKit.edit.styles": {
"styles": "ext.CollaborationKit.edit.styles.less"
},
- "ext.CollaborationKit.iconbrowser": {
+ "ext.CollaborationKit.icon": {
"scripts": "ext.CollaborationKit.icon.js",
"dependencies": [
"oojs-ui",
@@ -110,38 +110,26 @@
"collaborationkit-icon-launchbutton",
"cancel"
],
- "styles": "ext.CollaborationKit.iconbrowser.styles.less"
+ "styles": "ext.CollaborationKit.icon.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",
"mediawiki.widgets",
"mediawiki.widgets.UserInputWidget",
"mediawiki.widgets.MediaSearch",
- "mediawiki.api"
+ "mediawiki.api",
+ "ext.CollaborationKit.icons"
],
"messages": [
"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 +154,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..3bfbec4 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:",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index adcc79e..8481e22 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",
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.edit.styles.less
b/modules/ext.CollaborationKit.edit.styles.less
index d4660e9..f1a92e6 100644
--- a/modules/ext.CollaborationKit.edit.styles.less
+++ b/modules/ext.CollaborationKit.edit.styles.less
@@ -19,9 +19,13 @@
.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;
+ max-width: 50em;
}
}
+}
+
+.oo-ui-fieldsetLayout-group {
+ max-width: 50em;
}
.ck-customeditor-toolbars( @color ) {
@@ -40,17 +44,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-toolbars( @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..2c4cbf3
--- /dev/null
+++ b/modules/ext.CollaborationKit.hubtheme.js
@@ -0,0 +1,330 @@
+( 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}
+ */
+ 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;
+
+ 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( 'class', 'colourPreview
mw-ck-colourblock mw-ck-colour-' + toAppend );
+
+ $( '.hubimagePreview' )
+ .attr( 'class', 'hubimagePreview
mw-ck-icon mw-ck-icon-puzzlepiece mw-ck-icon-puzzlepiece-' + 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
+ */
+ function ImageProcessDialog( 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;
+
+ // 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>' );
+ $( '.mw-ck-hub-topform' ).append( '<div
class="mw-ck-hubtheme-widget"></div>' );
+ $( '.mw-ck-hub-topform' ).append( '<div
class="mw-ck-hub-name"></div>' );
+
+ $( '.mw-ck-hubtheme-widget' )
+ .append( '<div class="hubimagePreview mw-ck-icon
mw-ck-icon-puzzlepiece" style="width:150px; height:150px; margin-bottom:10px;
display:block;" />' );
+
+ $( 'div.hubimagePreview' ).addClass( 'mw-ck-icon-puzzlepiece-'
+ curColour );
+
+ $( '.mw-ck-hubtheme-widget .hubimagePreview' ).append(
hubimageBrowserButton.$element );
+
+ $( '.mw-ck-hubtheme-widget' ).append(
+ $( '<div class="colourPreview
mw-ck-colourblock-container"></div>' )
+ .append( getColourBlock( curColour )
+ .append( colourBrowserButton.$element )
+ )
+ );
+ $( '.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.colourbrowser.styles.less
b/modules/ext.CollaborationKit.hubtheme.styles.less
similarity index 76%
rename from modules/ext.CollaborationKit.colourbrowser.styles.less
rename to modules/ext.CollaborationKit.hubtheme.styles.less
index 9cd774d..c67f4f0 100644
--- a/modules/ext.CollaborationKit.colourbrowser.styles.less
+++ b/modules/ext.CollaborationKit.hubtheme.styles.less
@@ -1,5 +1,40 @@
@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-ck-hubtheme-widget-inlinebutton {
+ width: 35px;
+ height: 35px;
+ position: relative;
+ left: 115px;
+ background: #fff;
+ opacity: 0.75;
+}
+
+.mw-ck-hubtheme-widget-inlinebutton a span {
+ width: 35px !important;
+ height: 35px !important;
+}
+
+.mw-ck-hubtheme-widget-inlinebutton:hover,
+.mw-ck-hubtheme-widget-inlinebutton:active {
+ opacity: 0.9;
+}
+
+.mw-ck-hub-name {
+ flex-grow: 1;
+}
+
.mw-ck-colourblock-container {
margin-top:10px;
margin-bottom:10px;
@@ -7,8 +42,8 @@
.oo-ui-optionWidget-selected .mw-ck-colourblock {
border: 2px solid #2a4b8d;
- width: 46px;
- height: 46px;
+ 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);
@@ -19,8 +54,8 @@
}
.mw-ck-colourblock {
- width: 50px;
- height: 50px;
+ width: 150px;
+ height: 35px;
}
.mw-ck-colourchoice-container {
diff --git a/modules/ext.CollaborationKit.iconbrowser.styles.less
b/modules/ext.CollaborationKit.icon.styles.less
similarity index 100%
rename from modules/ext.CollaborationKit.iconbrowser.styles.less
rename to modules/ext.CollaborationKit.icon.styles.less
--
To view, visit https://gerrit.wikimedia.org/r/338317
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I670fce13f2a39d350460f27ac57b0d1ca0521104
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/CollaborationKit
Gerrit-Branch: master
Gerrit-Owner: Harej <jamesmh...@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
