From 755fa560a7ba376f06b74b8564e7bc4b8b53792e Mon Sep 17 00:00:00 2001 From: Victor Dubiniuk Date: Tue, 2 Dec 2014 03:34:05 +0300 Subject: [PATCH] Place OC controls inside own toolbar as dijit widgets --- css/style.css | 104 ++++++++++-------- js/3rdparty/webodf/editor/Tools.js | 10 +- js/documents.js | 170 +++-------------------------- js/widgets/ocClose.js | 16 +++ js/widgets/ocLogo.js | 17 +++ js/widgets/ocShare.js | 40 +++++++ js/widgets/ocToolbar.js | 53 +++++++++ js/widgets/titleBar.js | 70 ++++++++++++ js/widgets/zoomCombo.js | 4 +- 9 files changed, 280 insertions(+), 204 deletions(-) create mode 100644 js/widgets/ocClose.js create mode 100644 js/widgets/ocLogo.js create mode 100644 js/widgets/ocShare.js create mode 100644 js/widgets/ocToolbar.js create mode 100644 js/widgets/titleBar.js diff --git a/css/style.css b/css/style.css index cf6e1af5..0b498a47 100755 --- a/css/style.css +++ b/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; -} - -#body-user #document-title #header{ - height: 45px; + top: 45px; } -#document-title{ - padding: 4px 0 5px; - border-bottom: 1px solid #E9E9E9; - - text-align: center; - font-weight: bold; - color:#fff; - background-color:#1d2d44; +#header .padded{ + margin-right:40px; } -#document-title div.logo-wide{ - float: left; - margin: 5px; - z-index: 110; +#document-title { + min-width:300px; + padding: 7px; + font-weight: normal; + color: #FFF; } -#document-title div{ - position: relative; -} -#document-title .filename { - margin-top: 8px !important; - width: 300px; -} -#document-title-container { - padding-top: 7px; - font-weight: normal; +#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; - width: 29px; + height: 23px; + 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; - padding: 8px 0; + height: 19px; + 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; - float: right; + position: absolute; + 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; } +#ocToolbar, #ocToolbarInside{ + border-bottom: none !important; + background: none !important; + box-shadow: none !important; +} + #toolbar { - top: 45px !important; + position:static !important; + min-height: 29px !important; border-bottom: none !important; - padding: 5px 0 0 !important; + border-radius: 2px; + margin: 7px 30px 0 0 !important; + padding: 0 !important; box-shadow: none !important; - background-color: rgba(255,255,255,.95); + 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; } diff --git a/js/3rdparty/webodf/editor/Tools.js b/js/3rdparty/webodf/editor/Tools.js index f2da402d..602edff0 100644 --- a/js/3rdparty/webodf/editor/Tools.js +++ b/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); }); }; diff --git a/js/documents.js b/js/documents.js index 42298417..30812a4b 100644 --- a/js/documents.js +++ b/js/documents.js @@ -143,37 +143,6 @@ $.widget('oc.documentOverlay', { } }); -$.widget('oc.documentToolbar', { - options : { - innerhtml : '
' + - ' ' + - '
' + - - '' + - ' ' + - ' ' + - ' ' + - '' - }, - _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 : '
', 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(); $('
').prependTo('#memberList'); - $('
' + t('documents', 'No connection to server. Trying to reconnect.') +'
').appendTo('#odf-toolbar'); + $('
' + t('documents', 'No connection to server. Trying to reconnect.') +'
').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(); - documentsMain.toolbar.documentToolbar('show'); + $('footer,nav').hide(); + $(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, - typeof OC.Share !== 'undefined' && response.permissions & OC.PERMISSION_SHARE && !documentsMain.isGuest - ); + + documentsMain.UI.showEditor(documentsMain.fileName || response.title); if (documentsMain.isGuest){ $('#odf-close').text(t('documents', 'Save') ); $('#odf-close').removeClass('icon-close'); @@ -461,30 +421,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'); @@ -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 = $('').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. - // TODO: proper session leaving call to server, either by webodfServerInstance or custom -// documentsMain.webodfServerInstance.leaveSession(sessionId, memberId, function() { - - $('header,footer,nav').show(); + $('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 = $('
').documentOverlay(); - documentsMain.toolbar = $('
').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) { diff --git a/js/widgets/ocClose.js b/js/widgets/ocClose.js new file mode 100644 index 00000000..35ed423a --- /dev/null +++ b/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: '' + + '' + + '', + closeEditor: function () { + // FixMe: this should not be global + documentsMain.onClose(); + } + }); + } +); diff --git a/js/widgets/ocLogo.js b/js/widgets/ocLogo.js new file mode 100644 index 00000000..e31f6527 --- /dev/null +++ b/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: '
', + startup: function () { + $('#header').children(':not(#ocToolbar)').hide(); + this.inherited(arguments); + }, + destroy: function () { + this.inherited(arguments); + $('#header').children(':not(#ocToolbar)').show(); + } + }); + } +); diff --git a/js/widgets/ocShare.js b/js/widgets/ocShare.js new file mode 100644 index 00000000..3e4fd0e7 --- /dev/null +++ b/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: '
' + + '
', + 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 + ); + } + } + }); + } +); diff --git a/js/widgets/ocToolbar.js b/js/widgets/ocToolbar.js new file mode 100644 index 00000000..f4b86103 --- /dev/null +++ b/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); + }); + }; + } +); \ No newline at end of file diff --git a/js/widgets/titleBar.js b/js/widgets/titleBar.js new file mode 100644 index 00000000..8402c137 --- /dev/null +++ b/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: + '
' + + '
${title}
' + + '
', + 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 = $('').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); + } + }); + } +); diff --git a/js/widgets/zoomCombo.js b/js/widgets/zoomCombo.js index 67dbf94b..8adf0891 100644 --- a/js/widgets/zoomCombo.js +++ b/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' } });