Elastic: Files and sessions list functionality

This commit is contained in:
Aleksander Machniak 2018-04-20 12:48:05 +02:00
parent 460723895b
commit 185d4ab754
5 changed files with 97 additions and 103 deletions

View file

@ -793,7 +793,7 @@ function kolab_files_session_dialog(session)
owner = session.owner_name || session.owner,
title = rcmail.gettext('kolab_files.sessiondialog'),
content = rcmail.gettext('kolab_files.sessiondialogcontent'),
button_classes = ['mainaction'],
button_classes = ['mainaction edit'],
join_session = function(id) {
var viewer = file_api.file_type_supported('application/vnd.oasis.opendocument.text', rcmail.env.files_caps);
params = {action: 'edit', session: id};
@ -2122,6 +2122,8 @@ function kolab_files_ui()
if (rcmail.busy)
return;
rcmail.triggerEvent('files-folder-select', {folder: folder});
var is_collection = folder.match(/^folder-collection-(.*)$/),
collection = RegExp.$1 || null;

View file

@ -174,6 +174,7 @@ $labels['arialabelfileprops'] = 'File properties';
$labels['arialabelfilecontent'] = 'File content';
$labels['arialabelfileeditdialog'] = 'File editing dialog';
$labels['arialabelsessionslist'] = 'List of document editing sessions';
$labels['arialabelsessionslistoptions'] = 'Sessions list options';
$labels['arialabelfilerenameform'] = 'File rename form';
$labels['arialabelfilesessiondialog'] = 'Document editing session';
$labels['arialabelcollaborators'] = 'List of document editors';

View file

@ -76,6 +76,16 @@
optionsmenuIcon="true" aria-labelledby="aria-label-sessionslist" data-label-msg="listempty" />
</div>
</div>
<div class="footer toolbar" role="toolbar">
<div id="listcontrols" class="listselectors">
<roundcube:button id="fileslistmenu-link" name="fileslistmenu-link"
type="link" onclick="kolab_files_listoptions('files')"
label="options" class="button settings" innerClass="inner" />
<roundcube:button id="sessionslistmenu-link" name="sessionslistmenu-link"
type="link" onclick="kolab_files_listoptions('sessions')"
label="options" class="button hidden settings" innerClass="inner" />
</div>
</div>
</div>
<form id="filesuploadform" class="smart-upload"></form>
@ -125,7 +135,8 @@
</ul>
</div>
<div id="fileslistoptions-menu" class="propform popupmenu" data-editable="true" role="dialog" aria-labelledby="aria-label-fileslistoptions">
<roundcube:add_label name="kolab_files.arialabellistoptions" />
<div id="fileslistoptions" class="propform popupmenu" role="dialog" aria-labelledby="aria-label-fileslistoptions">
<h3 id="aria-label-fileslistoptions" class="voice"><roundcube:label name="kolab_files.arialabellistoptions" /></h3>
<roundcube:if condition="!in_array('kolab_files_sort_col', (array)config:dont_override)" />
<div class="form-group row">
@ -152,38 +163,31 @@
<roundcube:endif />
</div>
<!--
<div id="sessionslistoptions" class="propform popupmenu" data-editable="true" role="dialog" aria-labelledby="aria-label-sessionslistoptions">
<h3 id="aria-label-sessionslistoptions" class="voice"><roundcube:label name="kolab_files.arialabellistoptions" /></h3>
<roundcube:if condition="!in_array('kolab_files_sessions_list_cols', (array)config:dont_override)" />
<fieldset class="floating">
<legend><roundcube:label name="listcolumns" /></legend>
<ul class="proplist">
<li><label class="disabled"><input type="checkbox" name="list_col[]" value="options" checked="checked" disabled="disabled" /> <span><roundcube:label name="options" /></span></label></li>
<li><label class="disabled"><input type="checkbox" name="list_col[]" value="name" checked="checked" disabled="disabled" /> <span><roundcube:label name="kolab_files.name" /></span></label></li>
<li><label><input type="checkbox" name="list_col[]" value="owner" /> <span><roundcube:label name="kolab_files.owner" /></span></label></li>
</ul>
</fieldset>
<roundcube:endif />
<roundcube:if condition="!in_array('kolab_files_sessions_sort_col', (array)config:dont_override)" />
<fieldset class="floating">
<legend><roundcube:label name="listsorting" /></legend>
<ul class="proplist">
<li><label><input type="radio" name="sort_col" value="name" /> <span><roundcube:label name="kolab_files.name" /></span></label></li>
</ul>
</fieldset>
<roundcube:endif />
<roundcube:if condition="!in_array('kolab_files_sessions_sort_order', (array)config:dont_override)" />
<fieldset class="floating">
<legend><roundcube:label name="listorder" /></legend>
<ul class="proplist">
<li><label><input type="radio" name="sort_ord" value="ASC" /> <span><roundcube:label name="asc" /></span></label></li>
<li><label><input type="radio" name="sort_ord" value="DESC" /> <span><roundcube:label name="desc" /></span></label></li>
</ul>
</fieldset>
<roundcube:endif />
<roundcube:add_label name="kolab_files.arialabelsessionslistoptions" />
<div id="sessionslistoptions" class="propform popupmenu" role="dialog" aria-labelledby="aria-label-sessionslistoptions">
<h3 id="aria-label-sessionslistoptions" class="voice"><roundcube:label name="kolab_files.arialabelsessionslistoptions" /></h3>
<roundcube:if condition="!in_array('kolab_files_sessions_sort_col', (array)config:dont_override)" />
<div class="form-group row">
<label for="listoptions-sortcol" class="col-form-label col-sm-4"><roundcube:label name="listsorting" /></label>
<div class="col-sm-8">
<select name="sort_col" class="form-control">
<option value="name"><roundcube:label name="kolab_files.name" /></option>
</select>
</div>
</div>
<roundcube:endif />
<roundcube:if condition="!in_array('kolab_files_sessions_sort_order', (array)config:dont_override)" />
<div class="form-group row">
<label for="listoptions-sortcol" class="col-form-label col-sm-4"><roundcube:label name="listorder" /></label>
<div class="col-sm-8">
<select class="form-control">
<option value="ASC"><roundcube:label name="asc" /></option>
<option value="DESC"><roundcube:label name="desc" /></option>
</select>
</div>
</div>
<roundcube:endif />
</div>
-->
<div id="dragfilemenu" class="popupmenu">
<ul class="toolbarmenu listing" role="menu">

View file

@ -1,74 +1,42 @@
function kolab_files_enable_command(p)
{
if (p.command == 'files-save') {
var toolbar = $('#toolbar-menu');
$('a.button.edit', toolbar).parent().hide();
$('a.button.save', toolbar).show().parent().show();
}
if (p.command == 'files-save') {
var toolbar = $('#toolbar-menu');
$('a.button.edit', toolbar).parent().hide();
$('a.button.save', toolbar).show().parent().show();
}
};
function kolab_files_show_listoptions(p)
function kolab_files_listoptions(type)
{
if (!p || !p.name) {
return;
}
var content = $('#' + type + 'listoptions'),
width = content.width() + 25,
dialog = content.clone(),
title = rcmail.gettext('kolab_files.arialabel' + (type == 'sessions' ? 'sessions' : '') + 'listoptions'),
close_func = function() { rcmail[type + 'list'].focus(); },
save_func = function(e) {
if (rcube_event.is_keyboard(e.originalEvent)) {
$('#' + type + 'listmenu-link').focus();
}
if (p.name.match(/^(files|sessions)listmenu$/)) {
var type = RegExp.$1;
}
else {
return;
}
var col = $('select[name="sort_col"]', dialog).val(),
ord = $('select[name="sort_ord"]', dialog).val();
var $dialog = $('#' + type + 'listoptions');
kolab_files_set_list_options([], col, ord, type);
close_func();
return true;
};
// close the dialog
if ($dialog.is(':visible')) {
$dialog.dialog('close');
return;
}
// set form values
$('select[name="sort_col"]', dialog).val(rcmail.env[type + '_sort_col'] || 'name');
$('select[name="sort_ord"]', dialog).val(rcmail.env[type + '_sort_order'] == 'DESC' ? 'DESC' : 'ASC');
// set form values
$('input[name="sort_col"][value="'+rcmail.env[type + '_sort_col']+'"]', $dialog).prop('checked', true);
$('input[name="sort_ord"][value="DESC"]', $dialog).prop('checked', rcmail.env[type + '_sort_order'] == 'DESC');
$('input[name="sort_ord"][value="ASC"]', $dialog).prop('checked', rcmail.env[type + '_sort_order'] != 'DESC');
// set checkboxes
$('input[name="list_col[]"]').each(function() {
$(this).prop('checked', $.inArray(this.value, rcmail.env[type + '_coltypes']) != -1);
});
$dialog.dialog({
modal: true,
resizable: false,
closeOnEscape: true,
close: function() { rcmail[type + 'list'].focus(); },
title: null,
minWidth: 400,
width: $dialog.width()+20
}).show();
};
function kolab_files_save_listoptions(p)
{
if (!p || !p.originalEvent) {
return;
}
if (p.originalEvent.target.id.match(/^(files|sessions)listmenusave$/)) {
var type = RegExp.$1;
}
else {
return;
}
var dialog = $('#' + type + 'listoptions').dialog('close');
var sort = $('input[name="sort_col"]:checked', dialog).val(),
ord = $('input[name="sort_ord"]:checked', dialog).val(),
cols = $('input[name="list_col[]"]:checked', dialog)
.map(function() { return this.value; }).get();
kolab_files_set_list_options(cols, sort, ord, type);
dialog = rcmail.simple_dialog(dialog, title, save_func, {
cancel_func: close_func,
closeOnEscape: true,
minWidth: 400,
width: width
});
};
@ -88,11 +56,18 @@ if (rcmail.env.action == 'open' || rcmail.env.action == 'edit') {
});
}
}
else {
rcmail.addEventListener('files-folder-select', function(p) {
var is_sess = p.folder == 'folder-collection-sessions';
$('#fileslistmenu-link, #layout > .content > .header > a.toggleselect, #layout > .content > .header > .searchbar')[is_sess ? 'hide' : 'show']();
$('#sessionslistmenu-link')[is_sess ? 'removeClass' : 'addClass']('hidden');
// set list header title for mobile
// $('#layout > .content > .header > .header-title').text($('#files-folder-list li.selected a.name:first').text());
});
}
$(document).ready(function() {
rcmail.addEventListener('menu-open', kolab_files_show_listoptions);
rcmail.addEventListener('menu-save', kolab_files_save_listoptions);
rcmail.addEventListener('menu-close', kolab_files_show_listoptions);
$('#toolbar-menu a.button.save').parent().hide();

View file

@ -121,11 +121,11 @@ a.button.saveas:before {
}
td.name {
position: relative;
}
td.mtime {
width: 10em;
width: 11em;
}
td.size {
@ -133,13 +133,25 @@ a.button.saveas:before {
width: 6em;
}
tbody tr.session > td.options span {
tr.session > td.name {
padding-right: 2em;
&:after {
&:extend(.font-icon-class);
content: @fa-var-users;
color: @color-black-shade-border;
position: absolute;
right: .25em;
top: 0;
}
}
tbody tr.session.invited > td.options span {
tr.session.invited > td.name:after {
color: @color-success;
}
tbody tr.session.owner > td.options span {
tr.session.owner > td.name:after {
color: @color-black;
}
}