From 05fafb1cf94676e08fd0393963c8b7b9f039c025 Mon Sep 17 00:00:00 2001 From: Victor Dubiniuk Date: Fri, 25 Apr 2014 20:21:42 +0300 Subject: [PATCH 1/5] First approach --- css/style.css | 25 ++++++++++++------------- js/documents.js | 40 ++++++++++++++++++++-------------------- 2 files changed, 32 insertions(+), 33 deletions(-) diff --git a/css/style.css b/css/style.css index 4a5ac85d..04c72c0b 100755 --- a/css/style.css +++ b/css/style.css @@ -125,10 +125,6 @@ } #document-title{ -/* position: absolute; - top: 9px; - left:50%; - margin:0; */ padding: 4px 0 5px; border-bottom: 1px solid #E9E9E9; @@ -147,7 +143,6 @@ #document-title div{ position: relative; - /*margin-left:-50%;*/ } #document-title>input { height:14px; @@ -174,22 +169,22 @@ #documents-overlay, #documents-overlay-below{ position: fixed; - top: 0; + top: 36px; left: 0; width: 100%; height: 100%; - filter:alpha(opacity=30); - opacity: .3; + filter:alpha(opacity=60); + opacity: .6; z-index: 1000; - background-color: #111; + background-color: #fff; } #documents-overlay-below{ - left:0; - top:0; + right:72px; + top:65px; filter:alpha(opacity=100); opacity: 1; - background:#f0f0f0; + background:#fff; z-index: 999; } @@ -294,12 +289,16 @@ editinfo > div.editInfoMarker { editinfo > div.editInfoMarker:hover { } +.dijitToolbar{ + min-height: 31px; +} + .dijitToolbar .dijitDropDownButton { padding-top: 2px; } .dijitSpinner .dijitSpinnerButtonContainer .dijitArrowButton { -margin-top:-1px; +margin-top: -1px; } .claro .dijitTextBox .dijitInputInner, diff --git a/js/documents.js b/js/documents.js index aba4f7fd..e23ba096 100644 --- a/js/documents.js +++ b/js/documents.js @@ -13,16 +13,16 @@ var documentsMain = { UI : { /* Overlay HTML */ - overlay : '
', + overlay : '
', /* Toolbar HTML */ toolbar : '
' + '
' + '
' + - '
' + + '
 
' + '
' + ' ' + - ' ' + '
', /* Editor wrapper HTML */ - container : '
' + + container : '
' + '
' + '
' + '
' + @@ -68,12 +68,15 @@ var documentsMain = { }, showEditor : function(title, canShare){ - $(document.body).prepend(documentsMain.UI.toolbar); + if (documentsMain.isGuest){ + // !Login page mess wih WebODF toolbars + } + $('#document-title-container').text(title); if (!canShare){ $('#odf-invite').remove(); } else { - //TODO: fill in with users + $('#odf-invite').show(); } $(document.body).addClass("claro"); $(document.body).prepend(documentsMain.UI.container); @@ -145,11 +148,7 @@ var documentsMain = { if (!OC.currentUser){ documentsMain.isGuest = true; - if ($("[name='document']").val()){ - // !Login page mess wih WebODF toolbars - $(document.body).attr('id', 'body-user'); - $('header,footer').hide(); documentsMain.prepareSession(); documentsMain.joinSession( $("[name='document']").val() @@ -203,7 +202,12 @@ var documentsMain = { if(response && (response.id && !response.es_id)){ return documentsMain.view(response.id); - } + } + + if (!$('#odf-toolbar').length){ + $('header,footer,nav').hide(); + $(document.body).prepend(documentsMain.UI.toolbar); + } 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.')); @@ -518,10 +522,8 @@ var documentsMain = { // successfull shutdown - all is good. // TODO: proper session leaving call to server, either by webodfServerInstance or custom // documentsMain.webodfServerInstance.leaveSession(sessionId, memberId, function() { - if (documentsMain.isGuest){ - $(document.body).attr('id', 'body-login'); - $('header,footer').show(); - } + + $('header,footer,nav').show(); documentsMain.webodfEditorInstance.destroy(documentsMain.UI.hideEditor); var url = ''; @@ -557,8 +559,7 @@ var documentsMain = { documentsMain.webodfEditorInstance.endEditing(); documentsMain.webodfEditorInstance.closeSession(function() { if (documentsMain.isGuest){ - $(document.body).attr('id', 'body-login'); - $('header,footer').show(); + $('header,footer,nav').show(); } documentsMain.webodfEditorInstance.destroy(documentsMain.UI.hideEditor); }); @@ -774,15 +775,14 @@ $(document).ready(function() { if (typeof supportAjaxUploadWithProgress !== 'undefined' && supportAjaxUploadWithProgress()) { file_upload_start.on('fileuploadstart', function(e, data) { $('#upload').addClass('icon-loading'); - $('.add-document .upload').css({opacity:0}) + $('.add-document .upload').css({opacity:0}); }); } file_upload_start.on('fileuploaddone', function(){ $('#upload').removeClass('icon-loading'); - $('.add-document .upload').css({opacity:0.7}) + $('.add-document .upload').css({opacity:0.7}); documentsMain.show(); }); - //TODO when ending a session as the last user close session? OC.addScript('documents', '3rdparty/webodf/dojo-amalgamation', documentsMain.onStartup); }); From 444903e472bffd3fc7cdc121430658aec4ef8084 Mon Sep 17 00:00:00 2001 From: Victor Dubiniuk Date: Sat, 26 Apr 2014 02:05:11 +0300 Subject: [PATCH 2/5] Refactor grid to widget --- js/documents.js | 256 +++++++++++++++++++++++++----------------------- 1 file changed, 132 insertions(+), 124 deletions(-) diff --git a/js/documents.js b/js/documents.js index e23ba096..642f9895 100644 --- a/js/documents.js +++ b/js/documents.js @@ -1,8 +1,134 @@ /*globals $,OC,fileDownloadPath,t,document,odf,webodfEditor,alert,require,dojo,runtime */ + +$.widget('oc.documentGrid', { + options : { + context : '.documentslist', + documents : {}, + sessions : {}, + members : {} + }, + + _create : function (){ + + }, + + render : function(){ + var that = this; + jQuery.when(this._load()) + .then(function(){ + that._render(); + }); + }, + + add : function(document) { + var docElem = $(this.options.context + ' .template').clone(), + a = docElem.find('a') + ; + + //Fill an element + docElem.removeClass('template').attr('data-id', document.fileid); + a.css('background-image', 'url("'+document.icon+'")') + .attr('href', OC.generateUrl('apps/files/download{file}',{file:document.path})) + .find('label').text(document.name) + ; + + docElem.appendTo(this.options.context).show(); + + //Preview + var previewURL, + urlSpec = { + file : document.path.replace(/^\/\//, '/'), + x : 200, + y : 200, + c : document.etag, + forceIcon : 0 + }; + + if ( $('#isPublic').length ) { + urlSpec.t = $('#dirToken').val(); + } + + if (!urlSpec.x) { + urlSpec.x = $('#filestable').data('preview-x'); + } + if (!urlSpec.y) { + urlSpec.y = $('#filestable').data('preview-y'); + } + urlSpec.y *= window.devicePixelRatio; + urlSpec.x *= window.devicePixelRatio; + + previewURL = OC.generateUrl('/core/preview.png?') + $.param(urlSpec); + previewURL = previewURL.replace('(', '%28').replace(')', '%29'); + + var img = new Image(); + img.onload = function(){ + var ready = function (node){ + return function(path){ + node.css('background-image', 'url("'+ path +'")'); + }; + }(a); + ready(previewURL); + }; + img.src = previewURL; + }, + + _load : function (){ + var that = this; + var def = new $.Deferred(); + $.getJSON(OC.generateUrl('apps/documents/ajax/documents/list')) + .done(function (data) { + that.options.documents = data.documents; + that.options.sessions = data.sessions; + that.options.members = data.members; + def.resolve(); + }) + .fail(function(data){ + console.log(t('documents','Failed to load documents.')); + }); + return def; + }, + + _render : function (data){ + var that = this, + documents = data && data.documents || this.options.documents, + sessions = data && data.sessions || this.options.sessions, + members = data && data.members || this.options.members, + hasDocuments = false + ; + + $(this.options.context + ' .document:not(.template,.progress)').remove(); + + $.each(documents, function(i, document){ + hasDocuments = true; + that.add(document); + }); + + $.each(sessions, function(i, session){ + if (members[session.es_id].length > 0) { + var docElem = $(that.options.context + ' .document[data-id="'+session.file_id+'"]'); + if (docElem.length > 0) { + docElem.attr('data-esid', session.es_id); + docElem.find('label').after(''); + docElem.addClass('session'); + } else { + console.log('Could not find file '+session.file_id+' for session '+session.es_id); + } + } + }); + + if (!hasDocuments){ + $(this.options.context).before('
' + + t('documents', 'No documents are found. Please upload or create a document!') + + '
' + ); + } else { + $('#emptycontent').remove(); + } + } +}); + + var documentsMain = { - _documents: [], - _sessions: [], - _members: [], isEditormode : false, useUnstable : false, isGuest : false, @@ -575,73 +701,8 @@ var documentsMain = { return; } documentsMain.UI.showProgress(t('documents', 'Loading documents...')); - jQuery.when(documentsMain.loadDocuments()) - .then(function(){ - documentsMain.renderDocuments(); - documentsMain.UI.hideProgress(); - }); - }, - - loadDocuments: function () { - var self = this; - var def = new $.Deferred(); - jQuery.getJSON(OC.generateUrl('apps/documents/ajax/documents/list')) - .done(function (data) { - self._documents = data.documents; - self._sessions = data.sessions; - self._members = data.members; - def.resolve(); - }) - .fail(function(data){ - console.log(t('documents','Failed to load documents.')); - }); - return def; - }, - - renderDocuments: function () { - var self = this, - hasDocuments = false; - - //remove all but template - $('.documentslist .document:not(.template,.progress)').remove(); - - jQuery.each(this._documents, function(i,document){ - var docElem = $('.documentslist .template').clone(); - docElem.removeClass('template'); - docElem.addClass('document'); - docElem.attr('data-id', document.fileid); - - var a = docElem.find('a'); - a.attr('href', OC.generateUrl('apps/files/download{file}',{file:document.path})); - a.find('label').text(document.name); - a.css('background-image', 'url("'+document.icon+'")'); - Files.lazyLoadPreview(document.path, document.mimetype, function(node){ return function(path){node.css('background-image', 'url("'+ path +'")');}; }(a), 200, 200, document.etag, document.icon); -//function(path, mime, ready, width, height, etag) { - $('.documentslist').append(docElem); - docElem.show(); - hasDocuments = true; - }); - jQuery.each(this._sessions, function(i,session){ - if (self._members[session.es_id].length > 0) { - var docElem = $('.documentslist .document[data-id="'+session.file_id+'"]'); - if (docElem.length > 0) { - docElem.attr('data-esid', session.es_id); - docElem.find('label').after(''); - docElem.addClass('session'); - } else { - console.log('Could not find file '+session.file_id+' for session '+session.es_id); - } - } - }); - - if (!hasDocuments){ - $('#documents-content').append('
' - + t('documents', 'No documents are found. Please upload or create a document!') - + '
' - ); - } else { - $('#emptycontent').remove(); - } + documentsMain.docs.documentGrid('render'); + documentsMain.UI.hideProgress(); } }; @@ -687,59 +748,6 @@ var Files = Files || { return true; }, - generatePreviewUrl : function(urlSpec) { - urlSpec = urlSpec || {}; - if (!urlSpec.x) { - urlSpec.x = $('#filestable').data('preview-x'); - } - if (!urlSpec.y) { - urlSpec.y = $('#filestable').data('preview-y'); - } - urlSpec.y *= window.devicePixelRatio; - urlSpec.x *= window.devicePixelRatio; - urlSpec.forceIcon = 0; - return OC.generateUrl('/core/preview.png?') + $.param(urlSpec); - }, - - lazyLoadPreview : function(path, mime, ready, width, height, etag, defaultIcon) { - var urlSpec = {}; - var previewURL; - ready(defaultIcon); // set mimeicon URL - - urlSpec.file = Files.fixPath(path); - if (etag){ - // use etag as cache buster - urlSpec.c = etag; - } else { - console.warn('Files.lazyLoadPreview(): missing etag argument'); - } - - urlSpec.x = width; - urlSpec.y = height; - if ( $('#isPublic').length ) { - urlSpec.t = $('#dirToken').val(); - } - previewURL = Files.generatePreviewUrl(urlSpec); - previewURL = previewURL.replace('(', '%28'); - previewURL = previewURL.replace(')', '%29'); - - // preload image to prevent delay - // this will make the browser cache the image - var img = new Image(); - img.onload = function(){ - //set preview thumbnail URL - ready(previewURL); - }; - img.src = previewURL; - }, - - fixPath: function(fileName) { - if (fileName.substr(0, 2) === '//') { - return fileName.substr(1); - } - return fileName; - }, - updateStorageStatistics: function(){} }, FileList = FileList || {}; @@ -750,7 +758,7 @@ FileList.getCurrentDirectory = function(){ $(document).ready(function() { "use strict"; - + documentsMain.docs = $('.documentslist').documentGrid(); $('.documentslist').on('click', 'li:not(.add-document)', function(event) { event.preventDefault(); From 04b2ebc780412f84687a7b2aed8e5e0974ab1f64 Mon Sep 17 00:00:00 2001 From: Victor Dubiniuk Date: Wed, 30 Apr 2014 13:20:36 +0300 Subject: [PATCH 3/5] Move overlay into widget. Fix some quirks --- css/style.css | 11 +++++--- js/documents.js | 68 +++++++++++++++++++++++++++++-------------------- 2 files changed, 47 insertions(+), 32 deletions(-) diff --git a/css/style.css b/css/style.css index 04c72c0b..1b8cdfe7 100755 --- a/css/style.css +++ b/css/style.css @@ -121,7 +121,11 @@ } #odf-toolbar #dropdown{ - right:auto; + right: auto; +} + +#body-user #document-title #header{ + height: 32px; } #document-title{ @@ -138,6 +142,7 @@ float:left; height: 24px; width: 80px; + margin: 3px; background-size:80px 24px; } @@ -169,7 +174,7 @@ #documents-overlay, #documents-overlay-below{ position: fixed; - top: 36px; + top: 32px; left: 0; width: 100%; height: 100%; @@ -227,9 +232,7 @@ top: 87px; } - /* override WebODF styling here */ - #mainContainer #collaboration{ float:right;position: relative;z-index: 1; width: 70px;padding:5px; diff --git a/js/documents.js b/js/documents.js index 642f9895..9a240763 100644 --- a/js/documents.js +++ b/js/documents.js @@ -127,6 +127,21 @@ $.widget('oc.documentGrid', { } }); +$.widget('oc.documentOverlay', { + options : { + parent : 'document.body' + }, + _create : function (){ + $(this.element).hide().appendTo(document.body); + }, + show : function(){ + $(this.element).fadeIn('fast'); + }, + hide : function(){ + $(this.element).fadeOut('fast'); + } +}); + var documentsMain = { isEditormode : false, @@ -138,15 +153,12 @@ var documentsMain = { fileName: null, UI : { - /* Overlay HTML */ - overlay : '
', - /* Toolbar HTML */ toolbar : '
' + '
' + - '
' + + '' + + '
' + ' ' + ' ' + + ' ' + + ' ' + + '' + }, + _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, @@ -152,26 +184,7 @@ var documentsMain = { ready :false, fileName: null, - UI : { - /* Toolbar HTML */ - toolbar : '
' + - '
' + - '
' + - ' ' + - ' ' + - ' ' + - ' ' + - '' + - '
', - + UI : { /* Editor wrapper HTML */ container : '
' + '
' + @@ -221,12 +234,12 @@ var documentsMain = { $(document.body).attr('id', 'body-login'); $('header,footer,nav').show(); } - // Fade out toolbar - $('#odf-toolbar').fadeOut('fast'); + + documentsMain.toolbar.documentToolbar('hide'); + // Fade out editor $('#mainContainer').fadeOut('fast', function() { $('#mainContainer').remove(); - $('#odf-toolbar').remove(); $('#content').fadeIn('fast'); $(document.body).removeClass('claro'); $('title').text(documentsMain.UI.mainTitle); @@ -284,6 +297,7 @@ var documentsMain = { documentsMain.isGuest = true; if ($("[name='document']").val()){ + documentsMain.toolbar.documentToolbar('show'); documentsMain.prepareSession(); documentsMain.joinSession( $("[name='document']").val() @@ -339,11 +353,9 @@ var documentsMain = { return documentsMain.view(response.id); } - if (!$('#odf-toolbar').length){ - $('header,footer,nav').hide(); - $(document.body).prepend(documentsMain.UI.toolbar); - } - + $('header,footer,nav').hide(); + documentsMain.toolbar.documentToolbar('show'); + 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.')); return; @@ -770,6 +782,7 @@ $(document).ready(function() { documentsMain.docs = $('.documentslist').documentGrid(); documentsMain.overlay = $('
').documentOverlay(); + documentsMain.toolbar = $('
').documentToolbar(); $('.documentslist').on('click', 'li:not(.add-document)', function(event) { event.preventDefault(); From f1c4721ea066ca786d9e5811945b46595394c94d Mon Sep 17 00:00:00 2001 From: Victor Dubiniuk Date: Wed, 7 May 2014 03:02:58 +0300 Subject: [PATCH 5/5] Fix dropdown and rename --- css/style.css | 4 +++- js/documents.js | 10 +++++----- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/css/style.css b/css/style.css index 1b8cdfe7..8c032877 100755 --- a/css/style.css +++ b/css/style.css @@ -122,6 +122,7 @@ #odf-toolbar #dropdown{ right: auto; + top: 66px; } #body-user #document-title #header{ @@ -144,12 +145,13 @@ width: 80px; margin: 3px; background-size:80px 24px; + z-index: 110; } #document-title div{ position: relative; } -#document-title>input { +#document-title #header input { height:14px; margin: 0; padding:3px 6px; diff --git a/js/documents.js b/js/documents.js index a583c3b9..72b8038f 100644 --- a/js/documents.js +++ b/js/documents.js @@ -581,15 +581,15 @@ var documentsMain = { var extension = name.substr(lastPos + 1); name = name.substr(0, lastPos); var input = $('').val(name); - $('#document-title').append(input); - $('#document-title>div').hide(); + $('#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>div').show(); + $('#document-title-container').show(); return; } else { @@ -600,7 +600,7 @@ var documentsMain = { if (Files.isFileNameValid(newName)) { input.tipsy('hide'); input.remove(); - $('#document-title>div').show(); + $('#document-title-container').show(); documentsMain.renameDocument(newName); } } @@ -797,7 +797,7 @@ $(document).ready(function() { } }); - $(document.body).on('click', '#document-title>div', documentsMain.onRenamePrompt); + $(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);