wikimedia/mediawiki-extensions-VisualEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor synced 2024-11-24 14:33:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add filename to gallery dialog page

Browse source 
Also add fieldset headings consistent with media dialog.

Bug: T167049
Change-Id: I8112b70d8e3ba19079fdab0806ad343b233c9c18
This commit is contained in:
Ed Sanders 2017-06-06 15:46:31 +01:00
parent 748d301680
commit 4a163020a8
3 changed files with 32 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
extension.json
View file

@ -1956,6 +1956,8 @@
"mediawiki.page.gallery.styles"
],
"messages": [
"visualeditor-dialog-media-content-filename",
"visualeditor-dialog-media-content-section",
"visualeditor-mwgallerydialog-caption-field-label",
"visualeditor-mwgallerydialog-caption-input-placeholder",
"visualeditor-mwgallerydialog-card-images",

26
modules/ve-mw/ui/dialogs/ve.ui.MWGalleryDialog.js
View file

@ -119,6 +119,10 @@ ve.ui.MWGalleryDialog.prototype.initialize = function () {
} );
// Edit panel
this.filenameFieldset = new OO.ui.FieldsetLayout( {
label: ve.msg( 'visualeditor-dialog-media-content-filename' ),
icon: 'image'
} );
this.$highlightedImage = $( '<div>' )
.addClass( 've-ui-mwGalleryDialog-highlighted-image' );
// TODO: make into a ve.ui.MWTargetWidget once Parsoid handles galleries
@ -127,6 +131,12 @@ ve.ui.MWGalleryDialog.prototype.initialize = function () {
multiline: true,
autosize: true
} );
this.highlightedCaptionFieldset = new OO.ui.FieldsetLayout( {
label: ve.msg( 'visualeditor-dialog-media-content-section' ),
icon: 'parameter',
classes: [ 've-ui-mwGalleryDialog-caption-fieldset' ]
} );
this.highlightedCaptionFieldset.$element.append( this.highlightedCaptionInput.$element );
this.removeButton = new OO.ui.ButtonWidget( {
label: ve.msg( 'visualeditor-mwgallerydialog-remove-button-label' ),
flags: [ 'destructive' ],
@ -246,7 +256,8 @@ ve.ui.MWGalleryDialog.prototype.initialize = function () {
menuLayout.$content.append(
this.editPanel.$element.append(
this.$highlightedImage,
this.highlightedCaptionInput.$element,
this.filenameFieldset.$element,
this.highlightedCaptionFieldset.$element,
this.removeButton.$element
),
this.searchPanel.$element.append(
@ -555,6 +566,8 @@ ve.ui.MWGalleryDialog.prototype.onRemoveItem = function () {
* @param {ve.ui.MWGalleryItemWidget} item The item that was clicked on
*/
ve.ui.MWGalleryDialog.prototype.onHighlightItem = function ( item ) {
var title;
// Unhighlight previous item
if ( this.highlightedItem ) {
this.highlightedItem.toggleHighlighted( false );
@ -572,6 +585,17 @@ ve.ui.MWGalleryDialog.prototype.onHighlightItem = function ( item ) {
OO.ui.Element.static.scrollIntoView( item.$element[ 0 ] );
// Populate edit panel
title = mw.Title.newFromText( item.imageTitle );
this.filenameFieldset.setLabel(
$( '<span>' ).append(
document.createTextNode( title.getMainText() + ' ' ),
$( '<a>' )
.addClass( 'visualeditor-dialog-media-content-description-link' )
.attr( 'href', title.getUrl() )
.attr( 'target', '_blank' )
.text( ve.msg( 'visualeditor-dialog-media-content-description-link' ) )
)
);
this.$highlightedImage
.css( 'background-image', 'url(' + item.thumbUrl + ')' );
this.highlightedCaptionInput

5
modules/ve-mw/ui/styles/dialogs/ve.ui.MWGalleryDialog.css
View file

@ -24,6 +24,11 @@
box-shadow: inset 0 0 0 0.1em #36c;
}
/* HACK: Override ooui specific 2em top margin */
.ve-ui-mwGalleryDialog-caption-fieldset.oo-ui-labelElement.oo-ui-fieldsetLayout {
margin-top: 0;
}
.ve-ui-mwGalleryDialog-highlighted-image {
background-color: #f9f9f9;
width: 100%;