Harej has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/316522

Change subject: Icon select dialog for creating hub features.
......................................................................

Icon select dialog for creating hub features.

Probably not perfect but it works. Currently implemented for 
Special:CreateHubFeature. Will be implemented in JS-augmented action=edit for 
CollaborationHubContent soon.

Bug: T140165
Change-Id: I05c7e417cefcc44e127764530a017c7cf667570d
---
M extension.json
M i18n/en.json
M i18n/qqq.json
M includes/CollaborationHubContentEditor.php
M includes/SpecialCreateHubFeature.php
A modules/ext.CollaborationKit.icon.js
A modules/ext.CollaborationKit.iconbrowser.styles.less
7 files changed, 153 insertions(+), 3 deletions(-)


  git pull 
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/CollaborationKit 
refs/changes/22/316522/1

diff --git a/extension.json b/extension.json
index ebc1cac..cfe4e81 100755
--- a/extension.json
+++ b/extension.json
@@ -83,6 +83,24 @@
                "ext.CollaborationKit.list.styles": {
                        "styles": "ext.CollaborationKit.list.styles.less"
                },
+               "ext.CollaborationKit.iconbrowser.styles": {
+                       "styles": "ext.CollaborationKit.iconbrowser.styles.less"
+               },
+               "ext.CollaborationKit.icon": {
+                       "scripts": "ext.CollaborationKit.icon.js",
+                       "dependencies": [
+                               "oojs-ui",
+                               "oojs-ui.styles.icons-movement",
+                               "mediawiki.widgets",
+                               "mediawiki.widgets.UserInputWidget"
+                       ],
+                       "messages": [
+                               "collaborationkit-icon-browser",
+                               "collaborationkit-icon-select",
+                               "collaborationkit-icon-launchbutton",
+                               "cancel"
+                       ]
+               },
                "ext.CollaborationKit.list.edit": {
                        "scripts": "ext.CollaborationKit.list.edit.js",
                        "dependencies": [
diff --git a/i18n/en.json b/i18n/en.json
index 2e9f509..263604a 100755
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -85,6 +85,9 @@
        "collaborationkit-hub-addpage": "Add feature",
        "collaborationkit-hub-manage": "Manage project",
        "collaborationkit-hub-invalid": "This content does not meet the 
requirements of the CollaborationHubContent schema. This may happen as a result 
of a software update. The content is reproduced below.",
+       "collaborationkit-icon-launchbutton": "Browse icons",
+       "collaborationkit-icon-browser": "Icon browser",
+       "collaborationkit-icon-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 815b4a5..716d9ca 100755
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -85,6 +85,9 @@
        "collaborationkit-hub-addpage": "Label for button/link to add a new 
subpage/feature to a Collaboration Hub",
        "collaborationkit-hub-manage": "Label for extra button/link to edit 
Collaboration Hub",
        "collaborationkit-hub-invalid": "Message shown on hubs that do not 
comply with the JSON Schema; shown before displaying the offending content",
+       "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-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 b725e6c..64dffb4 100755
--- a/includes/CollaborationHubContentEditor.php
+++ b/includes/CollaborationHubContentEditor.php
@@ -126,11 +126,11 @@
                                'type' => 'textarea',
                                'rows' => 10,
                                'class' => 'mw-ck-introductioninput',
-                               'value' => $includedContent
+                               'value' => $includedContent,
                                ] ),
                        [
                                'label' => wfMessage( 
'collaborationkit-hubedit-content' )->text(),
-                               'align' => 'top'
+                               'align' => 'top',
                        ] );
 
                return $fields;
diff --git a/includes/SpecialCreateHubFeature.php 
b/includes/SpecialCreateHubFeature.php
index 88071b1..6c908c3 100755
--- a/includes/SpecialCreateHubFeature.php
+++ b/includes/SpecialCreateHubFeature.php
@@ -17,6 +17,10 @@
         * @param string $par
         */
        public function execute( $par ) {
+               $output = $this->getContext()->getOutput();
+               $output->addModules( 'ext.CollaborationKit.icon' );
+               $output->addModuleStyles( 
'ext.CollaborationKit.iconbrowser.styles' );
+               $output->addJsConfigVars( 'wgCollaborationKitIconList', 
CollaborationKitIcon::getCannedIcons() );
                parent::execute( $par );
        }
 
@@ -39,6 +43,9 @@
                        $defaultFeatureName = '';
                }
 
+               $icons = CollaborationKitIcon::getCannedIcons();
+               $iconChoices = array_combine( $icons, $icons );
+
                $fields = [
                        'collaborationhub' => [
                                'type' => 'title',
@@ -54,9 +61,10 @@
                        ],
                        // TODO replace with icon selector
                        'icon' => [
-                               'type' => 'text',
+                               'type' => 'combobox',
                                'cssclass' => 'mw-ck-iconinput',
                                'label-message' => 
'collaborationkit-createhubfeature-icon',
+                               'options' => $iconChoices
                        ],
                        'contenttype' => [
                                'type' => 'radio',
diff --git a/modules/ext.CollaborationKit.icon.js 
b/modules/ext.CollaborationKit.icon.js
new file mode 100644
index 0000000..6deb3cd
--- /dev/null
+++ b/modules/ext.CollaborationKit.icon.js
@@ -0,0 +1,113 @@
+( function ( $, mw, OO ) {
+
+       // 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-icon-browser' );
+       ProcessDialog.static.actions = [
+         { action: 'save', label: mw.msg( 'collaborationkit-icon-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 () {
+         ProcessDialog.super.prototype.initialize.apply( this, arguments );
+
+         this.content = new OO.ui.PanelLayout( { padded: true, expanded: false 
} );
+
+         var iconList = mw.config.get( 'wgCollaborationKitIconList' );
+
+         var radioChoices = [];
+         for ( i = 0; i < iconList.length; i++ ) {
+               radioChoices.push( new OO.ui.RadioOptionWidget( {
+                       "label": '',
+                       "data": iconList[i],
+                       "classes": [ "mw-ck-icon-" + iconList[i] ]
+                       } )
+               );
+         }
+
+         this.radioSelect = new OO.ui.RadioSelectWidget( {
+               "name": "iconChoice",
+               "items": radioChoices
+         } );
+
+         this.content.$element.append( this.radioSelect.$element );
+              
+         this.$body.append( this.content.$element );
+
+         for ( i = 0; i < iconList.length; i++ ) {
+               var className = 'mw-ck-icon-' + iconList[i];
+               $( '.' +  className + ' div span' ).replaceWith( '<img class="' 
+ className + '" />' );
+               $( '.' + className + ' div img' )
+                       .attr( 'src', 
'load.php?modules=ext.CollaborationKit.icons&image=' + iconList[i] )
+                       .attr( 'width', '50px' )
+                       .attr( 'height', '50px' );
+               $( '.' + className ).css( 'display', 'inline' );
+         }
+
+       };
+
+       // In the event "Select" is pressed
+       ProcessDialog.prototype.getActionProcess = function ( action ) {
+         var dialog = this;
+         if ( action ) {
+           return new OO.ui.Process( function () {
+             var toAppend = dialog.radioSelect.getSelectedItem().getData();
+
+             // Generate preview
+                 $( '.iconPreview' ).replaceWith( '<img class="iconPreview" 
/>' );
+             $( '.iconPreview' )
+               .attr( 'class', 'iconPreview' )
+               .attr( 'style', 'display:block' )
+               .attr( 'src', 
'load.php?modules=ext.CollaborationKit.icons&image=' + toAppend )
+               .attr( 'width', '50px' )
+               .attr( 'height', '50px' );
+
+             // Set form value
+             $( '.mw-ck-iconinput input' ).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.
+       var openItUp = function () {
+               var windowManager = new OO.ui.WindowManager();
+               $( 'body' ).append( windowManager.$element );
+
+               // Create a new dialog window.
+               var processDialog = new ProcessDialog({
+                 size: 'medium'
+               });
+
+               // Add windows to window manager using the addWindows() method.
+               windowManager.addWindows( [ processDialog ] );
+
+               // Open the window.
+               windowManager.openWindow( processDialog );
+       }
+
+       var iconBrowserButton = new OO.ui.ButtonWidget();
+       iconBrowserButton.setLabel( mw.msg( 
'collaborationkit-icon-launchbutton' ) );
+       iconBrowserButton.on( 'click', openItUp );
+
+       $( 'div.mw-ck-iconinput').addClass( 'icon-browser-field' );
+       $( 'div.mw-ck-iconinput label span' ).append( '<div 
class="iconPreview"></div><div class="iconBrowserButton">' ).append( 
iconBrowserButton.$element ).append('</div>');
+       $( 'div.mw-ck-iconinput .oo-ui-fieldLayout-field' ).css( 'display', 
'none' );
+
+
+} )( jQuery, mediaWiki, OO );
diff --git a/modules/ext.CollaborationKit.iconbrowser.styles.less 
b/modules/ext.CollaborationKit.iconbrowser.styles.less
new file mode 100644
index 0000000..36de79d
--- /dev/null
+++ b/modules/ext.CollaborationKit.iconbrowser.styles.less
@@ -0,0 +1,5 @@
+@import "ext.CollaborationKit.mixins.less";
+
+label.oo-ui-optionWidget-selected div img {
+       background: #c4e2ff;
+}
\ No newline at end of file

-- 
To view, visit https://gerrit.wikimedia.org/r/316522
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: I05c7e417cefcc44e127764530a017c7cf667570d
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

Reply via email to