Harej has uploaded a new change for review.
https://gerrit.wikimedia.org/r/316719
Change subject: Color selection dialog for CollaborationHubContent theming.
......................................................................
Color selection dialog for CollaborationHubContent theming.
Same basic idea as the icon selector, but for colors.
Bug: T141220
Change-Id: I3114b3e8d607a9808252561730269b52b8a27988
---
M extension.json
M i18n/en.json
M i18n/qqq.json
M includes/CollaborationHubContentEditor.php
M includes/SpecialCreateCollaborationHub.php
A modules/ext.CollaborationKit.colour.js
A modules/ext.CollaborationKit.colourbrowser.styles.less
7 files changed, 226 insertions(+), 0 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/CollaborationKit
refs/changes/19/316719/1
diff --git a/extension.json b/extension.json
index cfe4e81..3df3477 100755
--- a/extension.json
+++ b/extension.json
@@ -86,6 +86,9 @@
"ext.CollaborationKit.iconbrowser.styles": {
"styles": "ext.CollaborationKit.iconbrowser.styles.less"
},
+ "ext.CollaborationKit.colourbrowser.styles": {
+ "styles":
"ext.CollaborationKit.colourbrowser.styles.less"
+ },
"ext.CollaborationKit.icon": {
"scripts": "ext.CollaborationKit.icon.js",
"dependencies": [
@@ -101,6 +104,21 @@
"cancel"
]
},
+ "ext.CollaborationKit.colour": {
+ "scripts": "ext.CollaborationKit.colour.js",
+ "dependencies": [
+ "oojs-ui",
+ "oojs-ui.styles.icons-movement",
+ "mediawiki.widgets",
+ "mediawiki.widgets.UserInputWidget"
+ ],
+ "messages": [
+ "collaborationkit-colour-browser",
+ "collaborationkit-colour-select",
+ "collaborationkit-colour-launchbutton",
+ "cancel"
+ ]
+ },
"ext.CollaborationKit.list.edit": {
"scripts": "ext.CollaborationKit.list.edit.js",
"dependencies": [
diff --git a/i18n/en.json b/i18n/en.json
index 263604a..c31858e 100755
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -88,6 +88,9 @@
"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-subpage-toc-label": "Part of a project:",
"collaborationkit-red1": "Dark red",
"collaborationkit-red2": "Red",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 716d9ca..47b1a34 100755
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -88,6 +88,9 @@
"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",
+ "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",
"collaborationkit-subpage-toc-label": "Label for the toc on a
Collaboration Hub subpage",
"collaborationkit-red1": "Color label",
"collaborationkit-red2": "Color label",
diff --git a/includes/CollaborationHubContentEditor.php
b/includes/CollaborationHubContentEditor.php
index 64dffb4..1e4e659 100755
--- a/includes/CollaborationHubContentEditor.php
+++ b/includes/CollaborationHubContentEditor.php
@@ -153,6 +153,9 @@
$htmlForm = new OOUI\FieldsetLayout( [ 'items' => $formFields ]
);
$out->enableOOUI();
+ $out->addModules( 'ext.CollaborationKit.colour' );
+ $out->addModuleStyles(
'ext.CollaborationKit.colourbrowser.styles' );
+ $out->addJsConfigVars( 'wgCollaborationKitColourList',
CollaborationHubContent::getThemeColours() );
$out->addHtml( $htmlForm );
}
diff --git a/includes/SpecialCreateCollaborationHub.php
b/includes/SpecialCreateCollaborationHub.php
index e073ebf..26c761b 100755
--- a/includes/SpecialCreateCollaborationHub.php
+++ b/includes/SpecialCreateCollaborationHub.php
@@ -17,6 +17,10 @@
* @param $par string
*/
public function execute( $par ) {
+ $out = $this->getContext()->getOutput();
+ $out->addModules( 'ext.CollaborationKit.colour' );
+ $out->addModuleStyles(
'ext.CollaborationKit.colourbrowser.styles' );
+ $out->addJsConfigVars( 'wgCollaborationKitColourList',
CollaborationHubContent::getThemeColours() );
parent::execute( $par );
}
@@ -53,6 +57,7 @@
$fields['colour'] = [
'type' => 'select',
'cssclass' => 'mw-ck-colourinput',
+ 'id' => 'wpCollabHubColour',
'label-message' => 'collaborationkit-createhub-colour',
'options' => $this->getOptions( $colours ),
'default' => 'blue5'
diff --git a/modules/ext.CollaborationKit.colour.js
b/modules/ext.CollaborationKit.colour.js
new file mode 100644
index 0000000..df9cc2b
--- /dev/null
+++ b/modules/ext.CollaborationKit.colour.js
@@ -0,0 +1,112 @@
+( function ( $, mw, OO ) {
+
+ function getColourBlock ( colorName ) {
+ return '<svg viewBox="0 0 1 1" width=50px height=50px
class="mw-ck-colourblock ' + colorName + '"><path d="M0,0h1v1H0"/></svg>';
+ }
+
+ // Subclass ProcessDialog.
+ 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-colour-browser'
);
+ 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: '',
+ data: colourList[ i ],
+ classes: [ 'mw-ck-colour-' +
colourList[ i ] ]
+ } )
+ );
+ }
+
+ this.radioSelect = new OO.ui.RadioSelectWidget( {
+ name: 'colourChoice',
+ items: radioChoices
+ } );
+
+ this.content.$element.append( this.radioSelect.$element
);
+
+ this.$body.append( this.content.$element );
+
+ for ( i = 0; i < colourList.length; i++ ) {
+ className = 'mw-ck-colour-' + colourList[ i ];
+ $( '.mw-ck-colourblock' ).parent( 'div'
).addClass( 'mw-ck-colourblock-container' );
+ $( '.' + className + ' div span' ).replaceWith(
getColourBlock( className ) );
+ $( '.' + className ).css( 'display', 'inline' );
+ }
+
+ };
+
+ // 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 () {
+ toAppend =
dialog.radioSelect.getSelectedItem().getData();
+
+ // Generate preview
+ $( '.colourPreview svg'
).replaceWith( getColourBlock( 'mw-ck-colour-' + toAppend ) );
+
+ // Set form value
+ $( '#wpCollabHubColour select'
).val( toAppend );
+
+ dialog.close( { action: action
} );
+ } );
+ }
+ // Fallback to parent handler.
+ return
ProcessDialog.super.prototype.getActionProcess.call( this, action );
+ };
+
+ // Get 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 );
+ };
+
+ colourBrowserButton = new OO.ui.ButtonWidget();
+ colourBrowserButton.setLabel( mw.msg(
'collaborationkit-colour-launchbutton' ) );
+ colourBrowserButton.on( 'click', openItUp );
+
+ $( '#wpCollabHubColour div span' ).css( 'display', 'none' );
+ $( '#wpCollabHubColour' ).addClass( 'colour-browser-field' );
+ $( '#wpCollabHubColour' ).append( '<div class="colourPreview
mw-ck-colourblock-container">' + getColourBlock( 'mw-ck-colour-' + $(
'#wpCollabHubColour select option:selected' ).val() ) + '</div><div
class="colourBrowserButton">' ).append( colourBrowserButton.$element ).append(
'</div>' );
+ $( '#wpCollabHubColour select' ).css( 'display', 'none' );
+
+} )( jQuery, mediaWiki, OO );
diff --git a/modules/ext.CollaborationKit.colourbrowser.styles.less
b/modules/ext.CollaborationKit.colourbrowser.styles.less
new file mode 100644
index 0000000..a220588
--- /dev/null
+++ b/modules/ext.CollaborationKit.colourbrowser.styles.less
@@ -0,0 +1,82 @@
+@import "ext.CollaborationKit.mixins.less";
+
+.mw-ck-colourblock-container {
+ margin-top:10px;
+ margin-bottom:10px;
+}
+
+.oo-ui-optionWidget-selected div svg {
+ border: 1px solid black;
+ width: 48px;
+ height: 48px;
+ -webkit-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.75);
+ -moz-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.75);
+ box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.75);
+}
+
+svg.mw-ck-colour-red1 {
+ fill: @red1;
+}
+svg.mw-ck-colour-red2 {
+ fill: @red2;
+}
+svg.mw-ck-colour-grey1 {
+ fill: @grey1;
+}
+svg.mw-ck-colour-grey2 {
+ fill: @grey2;
+}
+svg.mw-ck-colour-blue1 {
+ fill: @blue1;
+}
+svg.mw-ck-colour-blue2 {
+ fill: @blue2;
+}
+svg.mw-ck-colour-blue3 {
+ fill: @blue3;
+}
+svg.mw-ck-colour-blue4 {
+ fill: @blue4;
+}
+svg.mw-ck-colour-blue5 {
+ fill: @blue5;
+}
+svg.mw-ck-colour-blue6 {
+ fill: @blue6;
+}
+svg.mw-ck-colour-purple1 {
+ fill: @purple1;
+}
+svg.mw-ck-colour-purple2 {
+ fill: @purple2;
+}
+svg.mw-ck-colour-purple3 {
+ fill: @purple3;
+}
+svg.mw-ck-colour-purple4 {
+ fill: @purple4;
+}
+svg.mw-ck-colour-purple5 {
+ fill: @purple5;
+}
+svg.mw-ck-colour-yellow1 {
+ fill: @yellow1;
+}
+svg.mw-ck-colour-yellow2 {
+ fill: @yellow2;
+}
+svg.mw-ck-colour-yellow3 {
+ fill: @yellow3;
+}
+svg.mw-ck-colour-yellow4 {
+ fill: @yellow4;
+}
+svg.mw-ck-colour-green1 {
+ fill: @green1;
+}
+svg.mw-ck-colour-green2 {
+ fill: @green2;
+}
+svg.mw-ck-colour-green3 {
+ fill: @green3;
+}
--
To view, visit https://gerrit.wikimedia.org/r/316719
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I3114b3e8d607a9808252561730269b52b8a27988
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
