From 40738c832af93cb433f16ccc9b9029e6158d2d25 Mon Sep 17 00:00:00 2001
From: gladoscc <admin@glados.cc>
Date: Tue, 13 Jan 2015 13:51:46 +1100
Subject: [PATCH] Display the file name in metadata panel

This patch adds the file name to the metadata panel, after the license
item. The namespace prefix is included and set to a static 'File:'.

The Title class already converts underscore to spaces.

The icon is from @Pginer-WMF.

PS: This has been a frequent annoyance for me, I'm glad to be working
on this patch!

Bug: T76680
Change-Id: I7d1f4ce67a6776ac017f8afe49cb3102b267af5c
---
 resources/mmv/ui/img/file.svg              | 30 +++++++++++++++++++
 resources/mmv/ui/mmv.ui.metadataPanel.js   | 35 ++++++++++++++++++++++
 resources/mmv/ui/mmv.ui.metadataPanel.less | 10 +++++++
 3 files changed, 75 insertions(+)
 create mode 100644 resources/mmv/ui/img/file.svg

diff --git a/resources/mmv/ui/img/file.svg b/resources/mmv/ui/img/file.svg
new file mode 100644
index 000000000..f1f7a6343
--- /dev/null
+++ b/resources/mmv/ui/img/file.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="100%"
+   height="100%"
+   viewBox="0 0 18.999999 13.999999"
+   id="Layer_1"
+   xml:space="preserve"><metadata
+   id="metadata8"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs6" />
+
+<g
+   transform="translate(-503,-378)"
+   id="g3"><g
+     id="g5"><path
+       d="m 516,378 h -13 v 14 h 19 v -8 h -6 v -6 z m 4.5,12.3 0,-0.3 h -15.1 l 4.5,-5.5 0.7,-0.1 4.2,4.5 2.3,-1.5 3.4,2.9 z"
+       id="path7"
+       style="fill:#bbbbbb" /></g><polygon
+     points="521.8,382.5 517.3,382.5 517.3,378 "
+     id="polygon9"
+     style="fill:#bbbbbb" /></g></svg>
\ No newline at end of file
diff --git a/resources/mmv/ui/mmv.ui.metadataPanel.js b/resources/mmv/ui/mmv.ui.metadataPanel.js
index c05b2f263..d43c61d09 100644
--- a/resources/mmv/ui/mmv.ui.metadataPanel.js
+++ b/resources/mmv/ui/mmv.ui.metadataPanel.js
@@ -153,6 +153,10 @@
 		this.$licenseLi.addClass( 'empty' );
 		this.$permissionLink.hide();
 
+		this.$filename.empty();
+		this.$filenamePrefix.empty();
+		this.$filenameLi.addClass( 'empty' );
+
 		this.$username.empty();
 		this.$usernameLi.addClass( 'empty' );
 
@@ -298,6 +302,7 @@
 			.appendTo( this.$imageLinkDiv );
 
 		this.initializeLicense();
+		this.initializeFilename();
 		this.initializeUploader();
 		this.initializeDatetime();
 		this.initializeLocation();
@@ -337,6 +342,23 @@
 			} );
 	};
 
+	/**
+	 * Initializes the filename element.
+	 */
+	MPP.initializeFilename = function () {
+		this.$filenameLi = $( '<li>' )
+			.addClass( 'mw-mmv-filename-li empty' )
+			.appendTo( this.$imageLinks );
+
+		this.$filenamePrefix = $( '<span>' )
+			.addClass( 'mw-mmv-filename-prefix' )
+			.appendTo( this.$filenameLi );
+
+		this.$filename = $( '<span>' )
+			.addClass( 'mw-mmv-filename' )
+			.appendTo( this.$filenameLi );
+	};
+
 	/**
 	 * Initializes the upload date/time element.
 	 */
@@ -483,6 +505,17 @@
 		this.$datetimeLi.removeClass( 'empty' );
 	};
 
+	/**
+	 * Sets the file name in the panel.
+	 * @param {string} filename The file name to set, without prefix
+	 */
+	MPP.setFileName = function ( filename ) {
+		this.$filenamePrefix.text( 'File:' );
+		this.$filename.text( filename );
+
+		this.$filenameLi.removeClass( 'empty' );
+	};
+
 	/**
 	 * Set source and author.
 	 * @param {string} attribution Custom attribution string
@@ -716,6 +749,8 @@
 
 		this.setLicense( imageData.license, imageData.descriptionUrl );
 
+		this.setFileName( imageData.title.getMainText() );
+
 		// these handle text truncation and should be called when everything that can push text down
 		// (e.g. floated buttons) has already been laid out
 		this.setTitle( image, imageData );
diff --git a/resources/mmv/ui/mmv.ui.metadataPanel.less b/resources/mmv/ui/mmv.ui.metadataPanel.less
index 215847802..6932c8977 100644
--- a/resources/mmv/ui/mmv.ui.metadataPanel.less
+++ b/resources/mmv/ui/mmv.ui.metadataPanel.less
@@ -201,6 +201,11 @@
 			background-image: url(img/pd.svg);
 		}
 
+		&.mw-mmv-filename-li:before {
+			/* @embed */
+			background-image: url(img/file.svg);
+		}
+
 		&.mw-mmv-datetime-li:before {
 			/* @embed */
 			background-image: url(img/time.svg);
@@ -229,6 +234,11 @@
 	text-align: right;
 }
 
+.mw-mmv-filename-prefix {
+	padding-right: 4px;
+	cursor: text;
+}
+
 .mw-mmv-title-para,
 .mw-mmv-credit,
 .mw-mmv-image-desc {