From 6106eb921aefe501e01624667adec8c36825f8c8 Mon Sep 17 00:00:00 2001
From: Tom Needham <tom@owncloud.com>
Date: Mon, 1 Jun 2015 18:47:17 +0100
Subject: [PATCH] Update styling of controls. More responsive :)

---
 css/style.css | 43 ++++++++++++++++++++++++++++++++-----------
 js/editor.js  | 41 +++++++++++++++++++++++++++++++++++------
 2 files changed, 67 insertions(+), 17 deletions(-)

diff --git a/css/style.css b/css/style.css
index 7e6516e..7f6916f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -55,17 +55,38 @@
 	}
 }
 
-#editor_save, #editor_next {
-	margin: 5px 0 0 7px;
-	float: left;
-	padding-top: 5px !important;
-	height: 34px !important;
-}
-
 #editor_save.icon-loading {
 	background-size: 20px;
 }
 
+#editor_save, #editor_next {
+	height: 44px;
+	border: none;
+	background-color: transparent;
+	margin: 0 !important;
+	border-radius: 0;
+	float: left;
+	padding: 5px 8px;
+}
+
+div.editor_separator {
+	background-color: #ddd;
+	width: 1px;
+	height: 24px;
+	display: block;
+	float: left;
+	margin: 10px 6px 0;
+}
+
+div.editor_separator.close_separator {
+	float: right;
+	margin-right: -1px !important;
+}
+
+div.editor_separator.save_separator {
+	margin-left: 9px !important;
+}
+
 #editor_close {
 	float: right;
 	width: 34px;
@@ -77,7 +98,7 @@
 	right: 0;
 }
 
-#editor_close:hover {
+#editor_close:hover, #editor_save:hover, #editor_next:hover {
 	background-color: #ddd;
 }
 
@@ -94,7 +115,7 @@
 	padding: 12px 4px 0 14px;
 	font-weight: bolder;
 	text-overflow: ellipsis;
-	max-width: 237px;
+	max-width: 218px;
 	overflow: hidden;
 }
 
@@ -103,13 +124,13 @@
 	color: #ccc;
 	font-family: inherit;
 	font-size: 90%;
-	padding: 12px 4px 0 14px;
+	padding: 13px 10px;
 	overflow: hidden;
 }
 
 /* This is to hide the saved time when getting narrow */
 @media(max-width: 540px) {
-	#editor_controls small.lastsaved {
+	#editor_controls small.lastsaved, div.editor_separator.lastsaved_separator {
 		display: none;
 	}
 }
diff --git a/js/editor.js b/js/editor.js
index 711a5e5..bf51dea 100644
--- a/js/editor.js
+++ b/js/editor.js
@@ -168,6 +168,7 @@ var Files_Texteditor = {
 			// Hide clear button
 			window.aceEditor.gotoLine(0);
 			$('#editor_next').remove();
+			$('div.editor_separator.next_separator').remove();
 		} else {
 			// New search
 			// Reset cursor
@@ -183,10 +184,11 @@ var Files_Texteditor = {
 			// Show next and clear buttons
 			// check if already there
 			if ($('#editor_next').length == 0) {
-				var nextbtnhtml = '<button id="editor_next">'
+				var nextbtnhtml = '<div class="editor_separator next_separator"></div><button id="editor_next">'
 					+t('files_texteditor', 'Next')
 					+'</button>';
-				$('#editor_save').after(nextbtnhtml);
+				$('small.lastsaved').after(nextbtnhtml);
+				OCA.Files_Texteditor.setFilenameMaxLength();
 			}
 		}						
 	 },
@@ -270,16 +272,20 @@ var Files_Texteditor = {
 	 */
 	loadControlBar: function(file, context) {
 		var html = 
-			'<small class="filename">'+escapeHTML(file.name)
-			+'</small><button id="editor_save">'
+			'<small class="filename">'+escapeHTML(file.name)+'</small>'
+			+'<div class="editor_separator save_separator"></div>'
+			+'<button id="editor_save">'
 			+t('files_texteditor', 'Save')
-			+'</button><small class="lastsaved">'
+			+'</button><div class="editor_separator lastsaved_separator"></div><small class="lastsaved">'
 			+t('files_texteditor', 'Last saved: never')
 			+'</small>'
-			+'<button id="editor_close" class="icon-close svg"></button>';
+			+'<button id="editor_close" class="icon-close svg"></button>'
+			+'<div class="editor_separator close_separator">';
 		var controlBar = $('<div id="editor_controls"></div>').html(html);
 		$('#editor_wrap').before(controlBar);
+		this.setFilenameMaxLength();
 		this.bindControlBar();
+
 	},
 
 	/**
@@ -289,6 +295,28 @@ var Files_Texteditor = {
 		$('#editor_controls').remove();
 	},
 
+	/**
+	 * Set the max width of the filename to prevent wrapping
+	 */
+	setFilenameMaxLength: function() {
+		// Get the width of the control bar
+		var controlBar = $('#editor_controls').width();
+		// Get the width of all of the other controls
+		var controls = $('div.editor_separator.save_separator').outerWidth(true);
+		controls += $('#editor_save').outerWidth(true);
+		if($('small.lastsaved').is(':visible')) {
+			controls += $('div.editor_separator.lastsaved_separator').outerWidth(true);
+			controls += $('small.lastsaved').outerWidth(true);
+		}
+		if($('#editor_next').is(':visible')) {
+			controls += $('#editor_next').outerWidth(true);
+			controls += $('div.editor_separator.next_separator').outerWidth(true);
+		}
+		controls += $('#editor_close').outerWidth(true);
+		// Set the max width
+		$('small.filename').css('max-width', controlBar-controls-28);
+	},
+
 	/**
 	 * Binds the control events on the control bar
 	 */
@@ -299,6 +327,7 @@ var Files_Texteditor = {
 		$('#content').on('click', '#editor_next', function() {
 			window.aceEditor.findNext();
 		});
+		$(window).resize(OCA.Files_Texteditor.setFilenameMaxLength);
 	},
 
 	/**