W.I.P. collab editor:

- Make all editors options available
- Add viewOptions available for configuration
- Disable active avatar by default
- Some styling for member's list, member's marker and avatar
- Add mobile template for editor
This commit is contained in:
Hadi Nategh 2016-08-23 12:29:49 +02:00
parent 6d80f6c351
commit b7eb55f6fa
6 changed files with 124 additions and 6 deletions

View File

@ -218,7 +218,7 @@ window.Wodo = window.Wodo || (function () {
// create session around loaded document // create session around loaded document
session = new ops.Session(odfCanvas); session = new ops.Session(odfCanvas);
editorSession = new EditorSession(session, pendingMemberId, { editorSession = new EditorSession(session, pendingMemberId, {
viewOptions: viewOptions, viewOptions: jQuery.extend(viewOptions,editorOptions.viewOptions),
directTextStylingEnabled: directTextStylingEnabled, directTextStylingEnabled: directTextStylingEnabled,
directParagraphStylingEnabled: directParagraphStylingEnabled, directParagraphStylingEnabled: directParagraphStylingEnabled,
paragraphStyleSelectingEnabled: paragraphStyleSelectingEnabled, paragraphStyleSelectingEnabled: paragraphStyleSelectingEnabled,

View File

@ -115,6 +115,17 @@ app.classes.filemanager = app.classes.filemanager.extend({
/** /**
* Initiate odf collab editor popup & load given file_path as active session * Initiate odf collab editor popup & load given file_path as active session
* editors options:
* directParagraphStylingEnabled
* paragraphStyleSelectingEnabled
* paragraphStyleEditingEnabled
* zoomingEnabled
* directTextStylingEnabled
* imageEditingEnabled
* hyperlinkEditingEnabled
* annotationsEnabled
* unstableFeaturesEnabled
* reviewModeEnabled
*/ */
_init_odf_collab_editor: function () _init_odf_collab_editor: function ()
{ {
@ -130,10 +141,21 @@ app.classes.filemanager = app.classes.filemanager.extend({
}, },
sessionId: _data.es_id, sessionId: _data.es_id,
editorOptions: { editorOptions: {
allFeaturesEnabled: true, directParagraphStylingEnabled:true,
userData: { paragraphStyleSelectingEnabled:true,
fullName: egw.user('account_fullName'), paragraphStyleEditingEnabled:true,
color: 'blue' zoomingEnabled: true,
directTextStylingEnabled:true,
imageEditingEnabled:true,
hyperlinkEditingEnabled:true,
annotationsEnabled:true,
unstableFeaturesEnabled:true,
// review has to be explicitly disabled to be able to edit the document
reviewModeEnabled:false,
viewOptions:{
editInfoMarkersInitiallyVisible: true,
caretAvatarsInitiallyVisible: false,
caretBlinksOnRangeSelect: true
} }
} }
}; };
@ -410,7 +432,7 @@ app.classes.filemanager = app.classes.filemanager.extend({
server, server,
serverParams = _args.serverParams, serverParams = _args.serverParams,
sessionId = _args.sessionId, sessionId = _args.sessionId,
editorOptions = jQuery.extend(_args.editorOptions,{networkSecurityToken:'', closeCallback:this.editor_close}), editorOptions = jQuery.extend(_args.editorOptions,{}),
userId = egw.user('account_id'), userId = egw.user('account_id'),
memberId, memberId,
self = this; self = this;

View File

@ -147,3 +147,27 @@ table.egwGridView_grid .tile .file_tile {
#filemanager-editor { #filemanager-editor {
overflow: hidden; overflow: hidden;
} }
/* collab editor styling*/
div.webodfeditor-members {
background-color: white !important;
}
div.webodfeditor-memberList .webodfeditor-memberListButton {
border: none !important;
background-color: transparent !important;
box-shadow: none !important;
}
div.webodfeditor-memberList .webodfeditor-memberListButton img {
border-radius: 50%;
box-shadow: none;
}
div.webodfeditor-memberList .webodfeditor-memberListLabel {
color: #1E1E1E;
}
div.editInfoMarker {
width:5px;
border-radius: none;
}

View File

@ -189,6 +189,26 @@ input.displayNone {
#filemanager-editor { #filemanager-editor {
overflow: hidden; overflow: hidden;
} }
/* collab editor styling*/
div.webodfeditor-members {
background-color: white !important;
}
div.webodfeditor-memberList .webodfeditor-memberListButton {
border: none !important;
background-color: transparent !important;
box-shadow: none !important;
}
div.webodfeditor-memberList .webodfeditor-memberListButton img {
border-radius: 50%;
box-shadow: none;
}
div.webodfeditor-memberList .webodfeditor-memberListLabel {
color: #1E1E1E;
}
div.editInfoMarker {
width: 5px;
border-radius: none;
}
/*/***************************************************************** /*/*****************************************************************
// sidebar // sidebar

View File

@ -0,0 +1,32 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE overlay PUBLIC "-//Stylite AG//eTemplate 2//EN" "http://www.egroupware.org/etemplate2.dtd">
<!-- $Id$ -->
<overlay>
<template id="filemanager.editor" template="" lang="" group="0" version="16.1">
<grid width="100%" height="100%">
<columns>
<column width="100%"/>
</columns>
<rows>
<row height="45">
<box height="50" class="dialogHeadbar">
<toolbar id="tools"/>
<textbox id="file_path" readonly="true"/>
</box>
</row>
<row>
<grid height="700" width="100%" resize_ratio="1">
<columns>
<column width="100%"/>
</columns>
<rows>
<row>
<box id = "odfEditor" height="100%" width="100%"></box>
</row>
</rows>
</grid>
</row>
</rows>
</grid>
</template>
</overlay>

View File

@ -177,6 +177,26 @@ input.displayNone {
#filemanager-editor { #filemanager-editor {
overflow: hidden; overflow: hidden;
} }
/* collab editor styling*/
div.webodfeditor-members {
background-color: white !important;
}
div.webodfeditor-memberList .webodfeditor-memberListButton {
border: none !important;
background-color: transparent !important;
box-shadow: none !important;
}
div.webodfeditor-memberList .webodfeditor-memberListButton img {
border-radius: 50%;
box-shadow: none;
}
div.webodfeditor-memberList .webodfeditor-memberListLabel {
color: #1E1E1E;
}
div.editInfoMarker {
width: 5px;
border-radius: none;
}
/*/***************************************************************** /*/*****************************************************************
// sidebar // sidebar