Harej has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/338516 )
Change subject: Reset hub image in hub theme widget
......................................................................
Reset hub image in hub theme widget
Bug: T157628
Change-Id: Ic0dd32d81a27c9319dec3d49d9b3d8b38584cb96
---
M modules/ext.CollaborationKit.hubtheme.js
M modules/ext.CollaborationKit.hubtheme.styles.less
2 files changed, 65 insertions(+), 12 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/CollaborationKit
refs/changes/16/338516/1
diff --git a/modules/ext.CollaborationKit.hubtheme.js
b/modules/ext.CollaborationKit.hubtheme.js
index 98041f8..0474594 100644
--- a/modules/ext.CollaborationKit.hubtheme.js
+++ b/modules/ext.CollaborationKit.hubtheme.js
@@ -1,6 +1,6 @@
( function ( $, mw, OO ) {
- var getColourBlock, getThumbnail, ImageProcessDialog,
ColourProcessDialog, openColourBrowser;
+ var getColourBlock, getThumbnail, ImageProcessDialog,
ColourProcessDialog, openColourBrowser, resetImage, setupPage;
/**
* Get a colour block for inserting into page
@@ -91,13 +91,15 @@
*
*/
ColourProcessDialog.prototype.getActionProcess = function ( action ) {
- var dialog, toAppend, openColourBrowser, windowManager,
colourBrowserButton;
+ var dialog, toAppend, openColourBrowser, windowManager,
colourBrowserButton, oldValue;
dialog = this;
if ( action ) {
return new OO.ui.Process( function () {
var toAppend, $newColour;
toAppend =
dialog.radioSelect.getSelectedItem().getData();
+
+ oldValue = $( 'div.mw-ck-colour-input select
option:selected' ).val();
// Generate preview
$( '.colourPreview .mw-ck-colourblock' )
@@ -106,7 +108,12 @@
.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 );
+ .removeClass()
+ .addClass( 'hubimagePreview mw-ck-icon
mw-ck-icon-puzzlepiece mw-ck-icon-puzzlepiece-' + toAppend );
+
+ $( 'body' )
+ .removeClass( 'mw-ck-theme-' + oldValue
)
+ .addClass( 'mw-ck-theme-' + toAppend );
// Set form value
$( 'div.mw-ck-colour-input select
option[value=' + toAppend + ']' )
@@ -205,7 +212,7 @@
*/
ImageProcessDialog.prototype.getActionProcess = function ( action ) {
var dialog, openImageBrowser, windowManager, processDialog,
fileTitle,
- currentImageFilename, currentImage,
hubimageBrowserButton;
+ currentImageFilename, currentImage,
hubimageBrowserButtons;
dialog = this;
if ( action ) {
@@ -263,6 +270,20 @@
};
/**
+ * Clear the value of the hub image field (and corresponding preview)
+ */
+ resetImage = function() {
+ // Kill preview
+ $( 'div.hubimagePreview' )
+ .attr( 'style', 'width:150px; height:150px;
margin-bottom:10px; display:block;' )
+ .addClass( 'hubimagePreview mw-ck-icon
mw-ck-icon-puzzlepiece mw-ck-icon-puzzlepiece')
+ .addClass( 'mw-ck-icon-puzzlepiece-' + $(
'div.mw-ck-colour-input select option:selected' ).val() );
+
+ // Set form value
+ $( '.mw-ck-hub-image-input input' ).val( '' );
+ };
+
+ /**
* Initial setup function run when DOM loaded.
*/
setupPage = function () {
@@ -272,16 +293,25 @@
colourBrowserButton = new OO.ui.ButtonWidget( {
icon: 'search',
framed: false,
- classes: [ 'mw-ck-hubtheme-widget-inlinebutton' ]
+ classes: [ 'mw-ck-hubtheme-widget-inlinebutton
mw-ck-hubtheme-widget-inlinebutton-search' ]
} );
colourBrowserButton.on( 'click', openColourBrowser );
- hubimageBrowserButton = new OO.ui.ButtonWidget( {
- icon: 'search',
- framed: false,
- classes: [ 'mw-ck-hubtheme-widget-inlinebutton' ]
+ hubimageBrowserButtons = new OO.ui.ButtonGroupWidget( {
+ classes: [ 'mw-ck-hubtheme-widget-inlinebutton-group' ],
+ items: [
+ new OO.ui.ButtonWidget( {
+ icon: 'trash',
+ framed: false,
+ classes: [
'mw-ck-hubtheme-widget-inlinebutton-trash' ]
+ } ).on( 'click', resetImage ),
+ new OO.ui.ButtonWidget( {
+ icon: 'search',
+ framed: false,
+ classes: [
'mw-ck-hubtheme-widget-inlinebutton-search' ]
+ } ).on( 'click', openImageBrowser )
+ ]
} );
- hubimageBrowserButton.on( 'click', openImageBrowser );
// Ascertaining default/pre-selected values
curColour = $( 'div.mw-ck-colour-input select option:selected'
).val();
@@ -317,7 +347,7 @@
$( 'div.hubimagePreview' ).addClass( 'mw-ck-icon-puzzlepiece-'
+ curColour );
- $( '.mw-ck-hubtheme-widget .hubimagePreview' ).append(
hubimageBrowserButton.$element );
+ $( '.mw-ck-hubtheme-widget .hubimagePreview' ).append(
hubimageBrowserButtons.$element );
$( '.mw-ck-hubtheme-widget' ).append(
$( '<div class="colourPreview
mw-ck-colourblock-container"></div>' )
diff --git a/modules/ext.CollaborationKit.hubtheme.styles.less
b/modules/ext.CollaborationKit.hubtheme.styles.less
index dbf3aaa..f54c091 100644
--- a/modules/ext.CollaborationKit.hubtheme.styles.less
+++ b/modules/ext.CollaborationKit.hubtheme.styles.less
@@ -22,7 +22,23 @@
opacity: 0.75;
border: solid 1px #a2a9b1;
border-radius: 3px;
+}
+.mw-ck-hubtheme-widget-inlinebutton-group {
+ width: 70px;
+ height: 35px;
+ position: absolute;
+ left: 79px;
+ bottom: -1px;
+ background: #fff;
+ opacity: 0.75;
+ border: solid 1px #a2a9b1;
+ border-radius: 3px;
+}
+
+.mw-ck-hubtheme-widget-inlinebutton a span {
+ width: 35px !important;
+ height: 35px !important;
}
.hubimagePreview {
@@ -38,11 +54,18 @@
position: relative;
}
-.mw-ck-hubtheme-widget-inlinebutton a span {
+.mw-ck-hubtheme-widget-inlinebutton a span,
+.mw-ck-hubtheme-widget-inlinebutton-group div a span {
width: 35px !important;
height: 35px !important;
}
+.mw-ck-hubtheme-widget-inlinebutton-group
div.mw-ck-hubtheme-widget-inlinebutton-trash {
+ border-right: solid 1px #a2a9b1;
+}
+
+.mw-ck-hubtheme-widget-inlinebutton-group:hover,
+.mw-ck-hubtheme-widget-inlinebutton-group:active,
.mw-ck-hubtheme-widget-inlinebutton:hover,
.mw-ck-hubtheme-widget-inlinebutton:active {
opacity: 0.9;
--
To view, visit https://gerrit.wikimedia.org/r/338516
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ic0dd32d81a27c9319dec3d49d9b3d8b38584cb96
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/CollaborationKit
Gerrit-Branch: master
Gerrit-Owner: Harej <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
