DontSellMe/richdocuments
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Place OC controls inside own toolbar as dijit widgets

Browse Source
This commit is contained in:
Victor Dubiniuk 2014-12-02 03:34:05 +03:00
parent 78da836eb3
commit 755fa560a7
9 changed files with 282 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
css/style.css
View File

@ -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{
height: 45px;
#header .padded{
margin-right:40px;
}
#document-title{
padding: 4px 0 5px;
border-bottom: 1px solid #E9E9E9;
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;
#document-title {
min-width:300px;
padding: 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;
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;
}
#toolbar {
top: 45px !important;
#ocToolbar, #ocToolbarInside{
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;
}

10
js/3rdparty/webodf/editor/Tools.js vendored
View File

@ -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);
});
};

170
js/documents.js
View File

@ -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();
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 = $('<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.
// 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 = $('<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) {

16
js/widgets/ocClose.js Normal file
View File

@ -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();
}
});
}
);

17
js/widgets/ocLogo.js Normal file
View File

@ -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();
}
});
}
);

40
js/widgets/ocShare.js Normal file
View File

@ -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
);
}
}
});
}
);

53
js/widgets/ocToolbar.js Normal file
View File

@ -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);
});
};
}
);

70
js/widgets/titleBar.js Normal file
View File

@ -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);
}
});
}
);

4
js/widgets/zoomCombo.js
View File

@ -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'
}
});