Place OC controls inside own toolbar as dijit widgets

css/style.css

@@ -116,58 +116,45 @@
 	white-space: nowrap;
 }
 
-#odf-toolbar{
+.claro #header{
 	text-align: left;
 	position: absolute;
 	width: 100%;
 	padding:0;
-	z-index: 500;
+	z-index: 500 !important;
 }
 
-#odf-toolbar #dropdown{
+#header #dropdown{
 	right: auto;
-	top: 83px;
+	top: 45px;
 }
 
-#body-user #document-title #header{
+#header .padded{
-	height: 45px;
+	margin-right:40px;
 }
 
 #document-title {
-	padding: 4px 0 5px;
+	min-width:300px;
-	border-bottom: 1px solid #E9E9E9;
+	padding: 7px;
-
-	text-align: center;
-	font-weight: bold;
-	color:#fff;
-	background-color:#1d2d44;
-}
-
-#document-title div.logo-wide{
-	float: left;
-	margin: 5px;
-	z-index: 110;
-}
-
-#document-title div{
-	position: relative;
-}
-#document-title .filename {
-	margin-top: 8px !important;
-	width: 300px;
-}
-#document-title-container {
-	padding-top: 7px;
 	font-weight: normal;
+	color: #FFF;
+}
+
+#ocToolbar .filename{
+	padding: 5px 6px;
+	min-width: 300px;
+	margin-top: 0;
 }
 
 #odf-close{
-	margin-top: 0;
+	position:absolute;
+	right:0;
+	margin: 8px;
 	float: right;
 }
 #odf-close.icon-close {
-	height: 29px;
+	height: 23px;
-	width: 29px;
+	width: 23px;
 }
 
 #odf-invite{
@@ -198,7 +185,7 @@
 
 #documents-overlay-below{
 	right: 72px;
-	top: 83px;
+	top: 45px;
     filter:alpha(opacity=100);
     opacity: 1;
 	background:#fff;
@@ -224,8 +211,9 @@
 #warning-connection-lost{
 	position: relative;
 	z-index: 2000;
-	margin-top: 35px;
+	height: 19px;
-	padding: 8px 0;
+	margin-top: -2px;
+	padding: 13px 0;
 	text-align: center;
 	color: #ffffff;
 	background-color: #CE7070;
@@ -234,8 +222,9 @@
 }
 
 #warning-connection-lost img {
-	margin-right: 4px;
+	position: absolute;
-	float: right;
+	top: 12px;
+	right: 10px;
 	height: 20px;
 }
 
@@ -254,7 +243,7 @@
 }
 
 #members {
-	padding-top: 86px !important;
+	padding-top: 47px !important;
 	background-color: #ddd !important;
 }
 
@@ -286,23 +275,46 @@
 	font-size: 10px !important;
 }
 
-#toolbar {
+#ocToolbar, #ocToolbarInside{
-	top: 45px !important;
 	border-bottom: none !important;
-	padding: 5px 0 0 !important;
+	background:  none !important;
 	box-shadow: none !important;
-	background-color: rgba(255,255,255,.95);
+}
+
+#toolbar {
+	position:static !important;
+	min-height: 29px !important;
+	border-bottom: none !important;
+	border-radius: 2px;
+	margin: 7px 30px 0 0 !important;
+	padding: 0 !important;
+	box-shadow: none !important;
+	background: #F5F5F5 !important;
+}
+
+#ocToolbar .dijitToolbar{
+	float:left;
 }
 
 #toolbar > .dijit{
+	margin-top: 2px !important;
 	margin-left:3px;
 }
 #toolbar > span.dijit{
 	margin-left: 0;
 }
 
+#toolbar > .dijitComboBox{
+	margin: 3px 5px 0 3px !important;
+}
+
+#toolbar > .dijitComboBox .dijitInputInner{
+vertical-align: middle;
+line-height: 1.45em;
+}
+
 #container {
-	top: 83px !important;
+	top: 44px !important;
 }
 
 #canvas > div {
@@ -326,6 +338,7 @@ editinfo > div.editInfoMarker:hover {
 
 .dijitToolbar{
 	min-height: 31px;
+	line-height: 1em;
 }
 
 .dijitToolbar .dijitDropDownButton {
@@ -351,11 +364,6 @@ margin-top: -1px;
 .dojoTabular thead,.dojoTabular tfoot {background-color: #efefef; border: 1px solid #ccc; border-width: 1px 0;}
 .dojoTabular th,.dojoTabular td {padding: 0.25em 0.5em;}
 
-/* raise notification z-index above the documents app */
-#odf-toolbar + #notification-container {
-	z-index: 501;
-}
-
 document p{
 	cursor:auto;
 }

js/3rdparty/webodf/editor/Tools.js

@@ -53,8 +53,9 @@ define("webodf/editor/Tools", [
     "webodf/editor/widgets/imageInserter",
     "webodf/editor/widgets/paragraphStylesDialog",
     "owncloud/widgets/zoomCombo",
+    "owncloud/widgets/ocToolbar",
     "webodf/editor/EditorSession"],
-    function (ready, MenuItem, DropDownMenu, Button, DropDownButton, Toolbar, ParagraphAlignment, SimpleStyles, UndoRedoMenu, CurrentStyle, AnnotationControl, EditHyperlinks, ImageInserter, ParagraphStylesDialog, ZoomCombo, EditorSession) {
+    function (ready, MenuItem, DropDownMenu, Button, DropDownButton, Toolbar, ParagraphAlignment, SimpleStyles, UndoRedoMenu, CurrentStyle, AnnotationControl, EditHyperlinks, ImageInserter, ParagraphStylesDialog, ZoomCombo, OcToolbar, EditorSession) {
         "use strict";
 
         return function Tools(args) {
@@ -68,6 +69,7 @@ define("webodf/editor/Tools", [
                 formatDropDownMenu, formatMenuButton,
                 paragraphStylesMenuItem, paragraphStylesDialog, simpleStyles, currentStyle,
                 zoomCombo,
+                ocToolbar,
                 undoRedoMenu,
                 editorSession,
                 paragraphAlignment,
@@ -121,6 +123,10 @@ define("webodf/editor/Tools", [
 
             // init
             ready(function () {
+                ocToolbar = new OcToolbar(function (widget) {
+                    widget.startup();
+                });
+
                 toolbar = new Toolbar({}, "toolbar");
 
                 // Undo/Redo
@@ -271,7 +277,7 @@ define("webodf/editor/Tools", [
                     });
                     closeButton.placeAt(toolbar);
                 }
-
+				toolbar.startup();
                 setEditorSession(editorSession);
             });
         };

js/documents.js

@@ -143,37 +143,6 @@ $.widget('oc.documentOverlay', {
 	}
 });
 
-$.widget('oc.documentToolbar', {
-	options : {
-		innerhtml : '<div id="document-title">' +
-					'  <div id="header">' +
-					'    <a href="'+ OC.webroot +'"><div class="logo-wide"></div></a>' +
-					'    <div id="document-title-container">&nbsp;</div>' +
-			        '  </div>' +
-					'</div>' +
-					
-					'<span id="toolbar" class="claro">' +
-					'  <button id="odf-invite" class="drop hidden icon-share svg">' +
-					t('documents', 'Share') +
-					'  </button>' +
-					'  <button id="odf-close" class="icon-close svg"></button>' +
-					'  <img id="saving-document" alt=""' +
-					'    src="' + OC.imagePath('core', 'loading.gif') + '"' +
-					'  />' +
-					'</span>'
-	},
-	_create : function (){
-		$(this.element).html(this.options.innerhtml).hide().prependTo(document.body);
-	},
-	show : function (){
-		$(this.element).show();
-	},
-	hide : function(){
-		$(this.element).fadeOut('fast');
-		$(this.element).html(this.options.innerhtml);
-	}
-});
-
 var documentsMain = {
 	isEditormode : false,
 	useUnstable : false,
@@ -182,6 +151,8 @@ var documentsMain = {
 	esId : false,
 	ready :false,
 	fileName: null,
+	canShare : false,
+	toolbar : '<div id="ocToolbar"><div id="ocToolbarInside"></div><span id="toolbar" class="claro"></span></div>',
 	
 	UI : {		
 		/* Editor wrapper HTML */
@@ -208,18 +179,12 @@ var documentsMain = {
 			documentsMain.UI.mainTitle = $('title').text();
 		},
 		
-		showEditor : function(title, canShare){
+		showEditor : function(title){
 			if (documentsMain.isGuest){
 				// !Login page mess wih WebODF toolbars
 				$(document.body).attr('id', 'body-user');
 			}
 
-			$('#document-title-container').text(title);
-			if (!canShare){
-				$('#odf-invite').remove();
-			} else {
-				$('#odf-invite').show();
-			}
 			$(document.body).addClass("claro");
 			$(document.body).prepend(documentsMain.UI.container);
 			// in case we are on the public sharing page we shall display the odf into the preview tag
@@ -231,11 +196,9 @@ var documentsMain = {
 			if (documentsMain.isGuest){
 				// !Login page mess wih WebODF toolbars
 				$(document.body).attr('id', 'body-login');
-				$('header,footer,nav').show();
+				$('footer,nav').show();
 			}
 			
-			documentsMain.toolbar.documentToolbar('hide');
-			
 			// Fade out editor
 			$('#mainContainer').fadeOut('fast', function() {
 				$('#mainContainer').remove();
@@ -269,14 +232,14 @@ var documentsMain = {
 		
 		showLostConnection : function(){
 			$('#memberList .memberListButton').css({opacity : 0.3});
-			$('#odf-toolbar').children(':not(#document-title)').hide();
+			$('#ocToolbar').children(':not(#document-title)').hide();
 			$('<div id="connection-lost"></div>').prependTo('#memberList');
-			$('<div id="warning-connection-lost">' + t('documents', 'No connection to server. Trying to reconnect.') +'<img src="'+ OC.imagePath('core', 'loading-dark.gif') +'" alt="" /></div>').appendTo('#odf-toolbar');
+			$('<div id="warning-connection-lost">' + t('documents', 'No connection to server. Trying to reconnect.') +'<img src="'+ OC.imagePath('core', 'loading-dark.gif') +'" alt="" /></div>').prependTo('#ocToolbar');
 		},
 		
 		hideLostConnection : function() {
 			$('#connection-lost,#warning-connection-lost').remove();
-			$('#odf-toolbar').children(':not(#document-title,#saving-document)').show();
+			$('#ocToolbar').children(':not(#document-title,#saving-document)').show();
 			$('#memberList .memberListButton').css({opacity : 1});
 		},
 		
@@ -288,7 +251,6 @@ var documentsMain = {
 	
 	onStartup: function() {
 		var fileId;
-		"use strict";
 		documentsMain.useUnstable = $('#webodf-unstable').val()==='true';
 		documentsMain.UI.init();
 		
@@ -296,7 +258,7 @@ var documentsMain = {
 			documentsMain.isGuest = true;
 			
 			if ($("[name='document']").val()){
-				documentsMain.toolbar.documentToolbar('show');
+				$(documentsMain.toolbar).appendTo('#header');
 				documentsMain.prepareSession();
 				documentsMain.joinSession(
 					$("[name='document']").val()
@@ -346,14 +308,12 @@ var documentsMain = {
 	},
 	
 	initSession: function(response) {
-		"use strict";
-
 		if(response && (response.id && !response.es_id)){
 			return documentsMain.view(response.id);
 		}
 		
-		$('header,footer,nav').hide();
+		$('footer,nav').hide();
-		documentsMain.toolbar.documentToolbar('show');
+		$(documentsMain.toolbar).appendTo('#header');
 		
 		if (!response || !response.status || response.status==='error'){
 			documentsMain.onEditorShutdown(t('documents', 'Failed to load this document. Please check if it can be opened with an external odt editor. This might also mean it has been unshared or deleted recently.'));
@@ -367,16 +327,16 @@ var documentsMain = {
 			return;
 		}
 
+		documentsMain.canShare = !documentsMain.isGuest
+				&& typeof OC.Share !== 'undefined' && response.permissions & OC.PERMISSION_SHARE;
 		require({ }, ["owncloud/ServerFactory", "webodf/editor/Editor"], function (ServerFactory, Editor) {
 			// fade out file list and show WebODF canvas
 			$('#content').fadeOut('fast').promise().done(function() {
 				
 				documentsMain.fileId = response.file_id;
 				documentsMain.fileName = response.title;
-				documentsMain.UI.showEditor(
+				
-						documentsMain.fileName || response.title,
+				documentsMain.UI.showEditor(documentsMain.fileName || response.title);
-						typeof OC.Share !== 'undefined' && response.permissions & OC.PERMISSION_SHARE && !documentsMain.isGuest
-				);
 				if (documentsMain.isGuest){
 					$('#odf-close').text(t('documents', 'Save') );
 					$('#odf-close').removeClass('icon-close');
@@ -462,30 +422,6 @@ var documentsMain = {
 		);
 	},
 	
-	onInvite: function(event) {
-		event.preventDefault();
-		if (OC.Share.droppedDown) {
-			OC.Share.hideDropDown();
-		} else {
-			(function() {
-				var target = OC.Share.showLink;
-				OC.Share.showLink = function() {
-					var r = target.apply( this, arguments );
-					$('#linkText').val( $('#linkText').val().replace('index.php/s/', 'public.php?service=documents&t=') );
-					return r;
-				};
-			})();
-
-			OC.Share.showDropDown(
-				'file', 
-				parent.location.hash.replace(/\W*/g, ''),
-				$("#odf-toolbar"),
-				true, 
-				OC.PERMISSION_READ | OC.PERMISSION_SHARE | OC.PERMISSION_UPDATE
-			);
-		}
-	},
-	
 	changeNick: function(memberId, name, node){
 		var url = OC.generateUrl('apps/documents/ajax/user/rename');
 		$.ajax({
@@ -575,65 +511,11 @@ var documentsMain = {
 				}
 				documentsMain.fileName = name;
 				$('title').text(documentsMain.UI.mainTitle + '| ' + name);
-				$('#document-title-container').text(name);
+				$('#document-title').text(name);
 			}
 		);
 	},
 
-
-	onRenamePrompt: function() {
-		var name = documentsMain.fileName;
-		var lastPos = name.lastIndexOf('.');
-		var extension = name.substr(lastPos + 1);
-		name = name.substr(0, lastPos);
-		var input = $('<input type="text" class="filename"/>').val(name);
-		$('#header').append(input);
-		$('#document-title-container').hide();
-
-		input.on('blur', function(){
-			var newName = input.val();
-			if (!newName || newName === name) {
-				input.tipsy('hide');
-				input.remove();
-				$('#document-title-container').show();
-				return;
-			}
-			else {
-				newName = newName + '.' + extension;
-				try {
-					input.tipsy('hide');
-					input.removeClass('error');
-					if (Files.isFileNameValid(newName)) {
-						input.tipsy('hide');
-						input.remove();
-						$('#document-title-container').show();
-						documentsMain.renameDocument(newName);
-					}
-				}
-				catch (error) {
-					input.attr('title', error);
-					input.tipsy({gravity: 'n', trigger: 'manual'});
-					input.tipsy('show');
-					input.addClass('error');
-				}
-			}
-		});
-		input.on('keyup', function(event){
-			if (event.keyCode === 27) {
-				// cancel by putting in an empty value
-				$(this).val('');
-				$(this).blur();
-				event.preventDefault();
-			}
-			if (event.keyCode === 13) {
-				$(this).blur();
-				event.preventDefault();
-			}
-		});
-		input.focus();
-		input.selectRange(0, name.length);
-	},
-
 	onEditorShutdown : function (message){
 			OC.Notification.show(message);
 
@@ -656,13 +538,11 @@ var documentsMain = {
 			}
 			
 			documentsMain.show();
-			$('header,footer,nav').show();
+			$('footer,nav').show();
 	},
 		
 
 	onClose: function() {
-		"use strict";
-		
 		if (!documentsMain.isEditorMode){
 			return;
 		}
@@ -673,11 +553,7 @@ var documentsMain = {
 
 		documentsMain.webodfEditorInstance.endEditing();
 		documentsMain.webodfEditorInstance.closeSession(function() {
-			// successfull shutdown - all is good.
+			$('footer,nav').show();
-			// TODO: proper session leaving call to server, either by webodfServerInstance or custom
-// 			documentsMain.webodfServerInstance.leaveSession(sessionId, memberId, function() {
-
-			$('header,footer,nav').show();
 			documentsMain.webodfEditorInstance.destroy(documentsMain.UI.hideEditor);
 
 			var url = '';
@@ -693,7 +569,6 @@ var documentsMain = {
 			});
 			
 			documentsMain.show();
-// 			});
 		});
 	},
 	
@@ -716,11 +591,10 @@ var documentsMain = {
 		documentsMain.webodfEditorInstance.endEditing();
 		documentsMain.webodfEditorInstance.closeSession(function() {
 			if (documentsMain.isGuest){
-				$('header,footer,nav').show();
+				$('footer,nav').show();
 			}
 			documentsMain.webodfEditorInstance.destroy(documentsMain.UI.hideEditor);
 		});
-
 	},
 	
 	show: function(){
@@ -784,11 +658,8 @@ FileList.getCurrentDirectory = function(){
 };
 
 $(document).ready(function() {
-	"use strict";
-	
 	documentsMain.docs = $('.documentslist').documentGrid();
 	documentsMain.overlay = $('<div id="documents-overlay" class="icon-loading"></div><div id="documents-overlay-below" class="icon-loading-dark"></div>').documentOverlay();
-	documentsMain.toolbar = $('<div id="odf-toolbar" class="dijitToolbar"></div>').documentToolbar();
 	
 	$('li.document a').tipsy({fade: true, live: true});
 	
@@ -805,13 +676,8 @@ $(document).ready(function() {
 		}
 	});
 	
-	$(document.body).on('click', '#document-title-container', documentsMain.onRenamePrompt);
-	$(document.body).on('click', '#odf-close', documentsMain.onClose);
-	$(document.body).on('click', '#odf-invite', documentsMain.onInvite);
-
 	$('.add-document').on('click', '.add', documentsMain.onCreate);
 
-
 	var file_upload_start = $('#file_upload_start');
 	if (typeof supportAjaxUploadWithProgress !== 'undefined' && supportAjaxUploadWithProgress()) {
 		file_upload_start.on('fileuploadstart', function(e, data) {

js/widgets/ocClose.js

@@ -0,0 +1,16 @@
+/*global define,require */
+define("owncloud/widgets/ocClose",
+		["dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin", "webodf/editor/EditorSession"],
+		function (declare, _WidgetBase, _TemplatedMixin, EditorSession) {
+			"use strict";
+			return declare("OcClose", [_WidgetBase, _TemplatedMixin], {
+				templateString: '<span class="dijit">' +
+						'<button id="odf-close" class="icon-close svg" data-dojo-attach-event="onclick: closeEditor"></button>' +
+						'<img id="saving-document" alt="" src="' + OC.imagePath('core', 'loading.gif') + '" /></span>',
+				closeEditor: function () {
+					// FixMe: this should not be global
+					documentsMain.onClose();
+				}
+			});
+		}
+);

js/widgets/ocLogo.js

@@ -0,0 +1,17 @@
+/*global define,require */
+define("owncloud/widgets/ocLogo",
+		["dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin", "webodf/editor/EditorSession"],
+		function (declare, _WidgetBase, _TemplatedMixin, EditorSession) {
+			return declare("OcLogo", [_WidgetBase, _TemplatedMixin], {
+				templateString: '<div style="float:left" class="padded"><a href="/~deo/oc-tmp"><div class="logo-wide"></div></a></div>',
+				startup: function () {
+					$('#header').children(':not(#ocToolbar)').hide();
+					this.inherited(arguments);
+				},
+				destroy: function () {
+					this.inherited(arguments);
+					$('#header').children(':not(#ocToolbar)').show();
+				}
+			});
+		}
+);

js/widgets/ocShare.js

@@ -0,0 +1,40 @@
+/*global define,require */
+define("owncloud/widgets/ocShare",
+		["dojo/_base/declare", "dojo/dom-style", "dijit/_WidgetBase", "dijit/_TemplatedMixin", "webodf/editor/EditorSession"],
+		function (declare, domStyle, _WidgetBase, _TemplatedMixin, EditorSession) {
+			return declare("OcShare", [_WidgetBase, _TemplatedMixin], {
+				templateString: '<div class="dijit" style="float:left;margin-top:5px">'
+						+ '<button id="odf-invite" class="drop icon-share svg" data-dojo-attach-event="onclick: showDropdown">' +
+						t('documents', 'Share') +
+						'</button></div>',
+				postCreate: function () {
+					this.inherited(arguments);
+					// FixMe: this should not be global
+					domStyle.set(this.domNode, "display", !!documentsMain.canShare ? "block" : "none");
+				},
+				showDropdown: function (event) {
+					event.preventDefault();
+					if (OC.Share.droppedDown) {
+						OC.Share.hideDropDown();
+					} else {
+						(function () {
+							var target = OC.Share.showLink;
+							OC.Share.showLink = function () {
+								var r = target.apply(this, arguments);
+								$('#linkText').val($('#linkText').val().replace('index.php/s/', 'public.php?service=documents&t='));
+								return r;
+							};
+						})();
+
+						OC.Share.showDropDown(
+								'file',
+								parent.location.hash.replace(/\W*/g, ''),
+								$("#header"),
+								true,
+								OC.PERMISSION_READ | OC.PERMISSION_SHARE | OC.PERMISSION_UPDATE
+								);
+					}
+				}
+			});
+		}
+);

js/widgets/ocToolbar.js

@@ -0,0 +1,53 @@
+/*global define,require */
+
+define("owncloud/widgets/ocToolbar",
+		[
+			"dojo/ready",
+			"owncloud/widgets/ocLogo",
+			"owncloud/widgets/ocShare",
+			"owncloud/widgets/ocClose",
+			"owncloud/widgets/titleBar",
+			"webodf/editor/EditorSession"
+		],
+		function (ready, OcLogo, OcShare, OcClose, TitleBar, EditorSession) {
+			"use strict";
+			return function OcToolbar(callback) {
+				var tr = runtime.tr,
+						ocToolbar,
+						ocToolbarInside,
+						ocLogo,
+						ocShare,
+						ocClose,
+						titleBar
+						;
+				function makeWidget(callback) {
+					require(["dijit/Toolbar"], function (Toolbar) {
+						ocToolbar = new Toolbar({}, "ocToolbar");
+						ocToolbarInside = new Toolbar({}, "ocToolbarInside");
+						// OC Logo
+						ocLogo = new OcLogo();
+						ocLogo.placeAt(ocToolbarInside);
+						ocLogo.startup();
+						// OC Share
+						ocShare = new OcShare();
+						ocShare.placeAt(ocToolbarInside);
+						ocShare.startup();
+						//title
+						titleBar = new TitleBar();
+						titleBar.placeAt(ocToolbarInside);
+						titleBar.startup();
+						// OC Close
+						ocClose = new OcClose();
+						ocClose.placeAt(ocToolbar);
+						ocClose.startup();
+					});
+					return callback(ocToolbar);
+				}
+				;
+				// init
+				makeWidget(function (widget) {
+					return callback(widget);
+				});
+			};
+		}
+);

js/widgets/titleBar.js

@@ -0,0 +1,70 @@
+/*global define,require */
+define("owncloud/widgets/titleBar",
+		["dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin", "webodf/editor/EditorSession"],
+		function (declare, _WidgetBase, _TemplatedMixin, EditorSession) {
+			return declare("TitleBar", [_WidgetBase, _TemplatedMixin], {
+				title : '',
+				templateString:
+					'<div style="float:left;min-width:320px;margin-top:5px;" class="dijit">' +
+					'<div id="document-title" data-dojo-attach-event="onclick: showRenamePrompt" data-dojo-attach-point="titleNode">${title}</div>' +
+					'</div>',
+				buildRendering: function () {
+					// FixMe: this should not be global
+					this.title = documentsMain.fileName;
+					this.inherited(arguments);
+				},
+				showRenamePrompt: function () {
+					var name = documentsMain.fileName;
+					var lastPos = name.lastIndexOf('.');
+					var extension = name.substr(lastPos + 1);
+					name = name.substr(0, lastPos);
+					var input = $('<input type="text" class="filename"/>').val(name);
+					$('#document-title').parent().append(input);
+					$('#document-title').hide();
+
+					input.on('blur', function () {
+						var newName = input.val();
+						if (!newName || newName === name) {
+							input.tipsy('hide');
+							input.remove();
+							$('#document-title').show();
+							return;
+						}
+						else {
+							newName = newName + '.' + extension;
+							try {
+								input.tipsy('hide');
+								input.removeClass('error');
+								if (Files.isFileNameValid(newName)) {
+									input.tipsy('hide');
+									input.remove();
+									$('#document-title').show();
+									documentsMain.renameDocument(newName);
+								}
+							}
+							catch (error) {
+								input.attr('title', error);
+								input.tipsy({gravity: 'n', trigger: 'manual'});
+								input.tipsy('show');
+								input.addClass('error');
+							}
+						}
+					});
+					input.on('keyup', function (event) {
+						if (event.keyCode === 27) {
+							// cancel by putting in an empty value
+							$(this).val('');
+							$(this).blur();
+							event.preventDefault();
+						}
+						if (event.keyCode === 13) {
+							$(this).blur();
+							event.preventDefault();
+						}
+					});
+					input.focus();
+					input.selectRange(0, name.length);
+				}
+			});
+		}
+);

js/widgets/zoomCombo.js

@@ -39,11 +39,11 @@ define("owncloud/widgets/zoomCombo",
                     maxHeight: 200,
                     store: zoomStore,
                     searchAttr: "name",
+                    class: "dijit",
                     value: defaultZoom,
                     style: {
-                        height: '21px',
+                        height: '20px',
                         width: '60px',
-                        margin: "2px 10px 0 0",
                         float: 'right'
                     }
                 });