mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-09-24 10:48:42 +00:00
Add image type change to media edit dialog
Adding a type change to the media edit dialog. Also changing SelectWidgets to ButtonSelectWidgets for consistency. Bug: 38129 Change-Id: I9c855e6381d970b5f08460822366f6333af24f82
This commit is contained in:
Moriel Schottlender
Roan Kattouw
parent
b522994344
commit
19c584d166
|
|
@ -651,6 +651,11 @@ $wgResourceModules += array(
|
|||
'visualeditor-dialog-media-page-advanced',
|
||||
'visualeditor-dialog-media-page-general',
|
||||
'visualeditor-dialog-media-position-center',
|
||||
'visualeditor-dialog-media-type-border',
|
||||
'visualeditor-dialog-media-type-frame',
|
||||
'visualeditor-dialog-media-type-frameless',
|
||||
'visualeditor-dialog-media-type-section',
|
||||
'visualeditor-dialog-media-type-thumb',
|
||||
'visualeditor-dialog-media-position-left',
|
||||
'visualeditor-dialog-media-position-none',
|
||||
'visualeditor-dialog-media-position-right',
|
||||
|
|
|
|||
|
|
@ -121,7 +121,10 @@ ve.ce.MWBlockImageNode.prototype.updateCaption = function () {
|
|||
var model, view,
|
||||
type = this.model.getAttribute( 'type' );
|
||||
|
||||
this.captionVisible = type !== 'none' && type !== 'frameless' && this.model.children.length === 1;
|
||||
this.captionVisible = type !== 'none' &&
|
||||
type !== 'frameless' &&
|
||||
type !== 'border' &&
|
||||
this.model.children.length === 1;
|
||||
|
||||
if ( this.captionVisible ) {
|
||||
// Only create a caption if we need it
|
||||
|
|
|
|||
|
|
@ -44,6 +44,11 @@
|
|||
"visualeditor-dialog-media-page-advanced": "Advanced settings",
|
||||
"visualeditor-dialog-media-page-general": "General settings",
|
||||
"visualeditor-dialog-media-position-center": "Center",
|
||||
"visualeditor-dialog-media-type-border": "Border",
|
||||
"visualeditor-dialog-media-type-frame": "Frame",
|
||||
"visualeditor-dialog-media-type-frameless": "Frameless",
|
||||
"visualeditor-dialog-media-type-section": "Image type",
|
||||
"visualeditor-dialog-media-type-thumb": "Thumbnail",
|
||||
"visualeditor-dialog-media-position-left": "Left",
|
||||
"visualeditor-dialog-media-position-none": "None",
|
||||
"visualeditor-dialog-media-position-right": "Right",
|
||||
|
|
|
|||
|
|
@ -54,6 +54,11 @@
|
|||
"visualeditor-dialog-media-position-right": "Label for the image position option for aligning to the right.",
|
||||
"visualeditor-dialog-media-position-section": "Label for the image position sub-section.",
|
||||
"visualeditor-dialog-media-size-originalsize-error": "Error message for failing to retrieve original file size from the API.",
|
||||
"visualeditor-dialog-media-type-border": "Label for the image type option for bordered image.",
|
||||
"visualeditor-dialog-media-type-frame": "Label for the image type option for framed image.",
|
||||
"visualeditor-dialog-media-type-frameless": "Label for the image type option for frameless.",
|
||||
"visualeditor-dialog-media-type-section": "Label for the image type sub-section.",
|
||||
"visualeditor-dialog-media-type-thumb": "Label for the image type option for thumbnail.",
|
||||
"visualeditor-dialog-media-size-section": "Label for the image size sub-section.\n{{Identical|Image size}}",
|
||||
"visualeditor-dialog-media-title": "Title for the editing dialog to set how a media item is displayed on the page",
|
||||
"visualeditor-dialog-meta-categories-category": "Title of popup for editing category options.\n{{Identical|Category}}",
|
||||
|
|
|
|||
|
|
@ -174,18 +174,52 @@ ve.ui.MWMediaEditDialog.prototype.initialize = function () {
|
|||
'label': ve.msg( 'visualeditor-dialog-media-position-section' ),
|
||||
'icon': 'parameter'
|
||||
} );
|
||||
this.positionInput = new OO.ui.SelectWidget( {
|
||||
this.positionInput = new OO.ui.ButtonSelectWidget( {
|
||||
'$': this.$
|
||||
} );
|
||||
this.positionInput.addItems( [
|
||||
new OO.ui.OptionWidget( 'left', { 'label': ve.msg( 'visualeditor-dialog-media-position-left' ) } ),
|
||||
new OO.ui.OptionWidget( 'right', { 'label': ve.msg( 'visualeditor-dialog-media-position-right' ) } ),
|
||||
new OO.ui.OptionWidget( 'center', { 'label': ve.msg( 'visualeditor-dialog-media-position-center' ) } ),
|
||||
new OO.ui.OptionWidget( 'none', { 'label': ve.msg( 'visualeditor-dialog-media-position-none' ) } )
|
||||
new OO.ui.ButtonOptionWidget( 'left', { '$': this.$, 'label': ve.msg( 'visualeditor-dialog-media-position-left' ) } ),
|
||||
new OO.ui.ButtonOptionWidget( 'center', { '$': this.$, 'label': ve.msg( 'visualeditor-dialog-media-position-center' ) } ),
|
||||
new OO.ui.ButtonOptionWidget( 'right', { '$': this.$, 'label': ve.msg( 'visualeditor-dialog-media-position-right' ) } ),
|
||||
new OO.ui.ButtonOptionWidget( 'none', { '$': this.$, 'label': ve.msg( 'visualeditor-dialog-media-position-none' ) } )
|
||||
], 0 );
|
||||
// Build position fieldset
|
||||
positionFieldset.$element.append( this.positionInput.$element );
|
||||
|
||||
// Type
|
||||
this.typeFieldset = new OO.ui.FieldsetLayout( {
|
||||
'$': this.$,
|
||||
'label': ve.msg( 'visualeditor-dialog-media-type-section' ),
|
||||
'icon': 'parameter'
|
||||
} );
|
||||
|
||||
this.typeInput = new OO.ui.ButtonSelectWidget( {
|
||||
'$': this.$
|
||||
} );
|
||||
this.typeInput.addItems( [
|
||||
// TODO: Inline images require a bit of further work, will be coming soon
|
||||
new OO.ui.ButtonOptionWidget( 'thumb', {
|
||||
'$': this.$,
|
||||
'label': ve.msg( 'visualeditor-dialog-media-type-thumb' )
|
||||
} ),
|
||||
new OO.ui.ButtonOptionWidget( 'frameless', {
|
||||
'$': this.$,
|
||||
'label': ve.msg( 'visualeditor-dialog-media-type-frameless' )
|
||||
} ),
|
||||
new OO.ui.ButtonOptionWidget( 'frame', {
|
||||
'$': this.$,
|
||||
'label': ve.msg( 'visualeditor-dialog-media-type-frame' )
|
||||
} ),
|
||||
new OO.ui.ButtonOptionWidget( 'border', {
|
||||
'$': this.$,
|
||||
'label': ve.msg( 'visualeditor-dialog-media-type-border' )
|
||||
} )
|
||||
] );
|
||||
|
||||
// Build type fieldset
|
||||
this.typeFieldset.$element
|
||||
.append( this.typeInput.$element );
|
||||
|
||||
// Size
|
||||
this.sizeFieldset = new OO.ui.FieldsetLayout( {
|
||||
'$': this.$,
|
||||
|
|
@ -225,6 +259,7 @@ ve.ui.MWMediaEditDialog.prototype.initialize = function () {
|
|||
|
||||
this.advancedSettingsPage.$element.append( [
|
||||
positionFieldset.$element,
|
||||
this.typeFieldset.$element,
|
||||
this.sizeFieldset.$element
|
||||
] );
|
||||
|
||||
|
|
@ -294,6 +329,13 @@ ve.ui.MWMediaEditDialog.prototype.setup = function ( data ) {
|
|||
);
|
||||
}
|
||||
|
||||
// Set image type
|
||||
if ( this.mediaNode.getAttribute( 'type' ) !== undefined ) {
|
||||
this.typeInput.selectItem(
|
||||
this.typeInput.getItemFromData( this.mediaNode.getAttribute( 'type' ) )
|
||||
);
|
||||
}
|
||||
|
||||
// Initialization
|
||||
this.captionFieldset.$element.append( this.captionSurface.$element );
|
||||
this.captionSurface.initialize();
|
||||
|
|
@ -355,6 +397,11 @@ ve.ui.MWMediaEditDialog.prototype.teardown = function ( data ) {
|
|||
attrs.align = attr.getData();
|
||||
}
|
||||
|
||||
attr = this.typeInput.getSelectedItem();
|
||||
if ( attr ) {
|
||||
attrs.type = attr.getData();
|
||||
}
|
||||
|
||||
surfaceModel.change(
|
||||
ve.dm.Transaction.newFromAttributeChanges( doc, this.mediaNode.getOffset(), attrs )
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue