From 4a163020a825a8901e31af1a839cd0e36bffd24d Mon Sep 17 00:00:00 2001
From: Ed Sanders <esanders@wikimedia.org>
Date: Tue, 6 Jun 2017 15:46:31 +0100
Subject: [PATCH] Add filename to gallery dialog page

Also add fieldset headings consistent with media dialog.

Bug: T167049
Change-Id: I8112b70d8e3ba19079fdab0806ad343b233c9c18
---
 extension.json                                |  2 ++
 .../ve-mw/ui/dialogs/ve.ui.MWGalleryDialog.js | 26 ++++++++++++++++++-
 .../styles/dialogs/ve.ui.MWGalleryDialog.css  |  5 ++++
 3 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/extension.json b/extension.json
index 54e303f471..6cf9b6a608 100644
--- a/extension.json
+++ b/extension.json
@@ -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",
diff --git a/modules/ve-mw/ui/dialogs/ve.ui.MWGalleryDialog.js b/modules/ve-mw/ui/dialogs/ve.ui.MWGalleryDialog.js
index 9d7a3172b3..8696e56b4b 100644
--- a/modules/ve-mw/ui/dialogs/ve.ui.MWGalleryDialog.js
+++ b/modules/ve-mw/ui/dialogs/ve.ui.MWGalleryDialog.js
@@ -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
diff --git a/modules/ve-mw/ui/styles/dialogs/ve.ui.MWGalleryDialog.css b/modules/ve-mw/ui/styles/dialogs/ve.ui.MWGalleryDialog.css
index cb9d7f8608..2c2b547d3b 100644
--- a/modules/ve-mw/ui/styles/dialogs/ve.ui.MWGalleryDialog.css
+++ b/modules/ve-mw/ui/styles/dialogs/ve.ui.MWGalleryDialog.css
@@ -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%;