Elastic: Files - verious improvements

This commit is contained in:
Aleksander Machniak 2018-04-19 12:55:27 +00:00
parent fd9b76886f
commit 460723895b
10 changed files with 121 additions and 34 deletions

View file

@ -87,8 +87,7 @@ window.rcmail && window.files_api && rcmail.addEventListener('init', function()
.addEventListener('dragstart', function(e) { kolab_files_drag_start(e); })
.addEventListener('dragmove', function(e) { kolab_files_drag_move(e); })
.addEventListener('dragend', function(e) { kolab_files_drag_end(e); })
.addEventListener('column_replace', function(e) { kolab_files_set_coltypes(e, 'files'); })
.addEventListener('listupdate', function(e) { rcmail.triggerEvent('listupdate', e); });
.addEventListener('column_replace', function(e) { kolab_files_set_coltypes(e, 'files'); });
rcmail.enable_command('menu-open', 'menu-save', 'files-sort', 'files-search', 'files-search-reset', 'folder-create', true);
@ -107,8 +106,7 @@ window.rcmail && window.files_api && rcmail.addEventListener('init', function()
rcmail.sessionslist.addEventListener('dblclick', function(o) { kolab_files_sessions_list_dblclick(o); })
.addEventListener('select', function(o) { kolab_files_sessions_list_select(o); })
.addEventListener('keypress', function(o) { kolab_files_sessions_list_keypress(o); })
.addEventListener('column_replace', function(e) { kolab_files_set_coltypes(e, 'sessions'); })
.addEventListener('listupdate', function(e) { rcmail.triggerEvent('listupdate', e); });
.addEventListener('column_replace', function(e) { kolab_files_set_coltypes(e, 'sessions'); });
rcmail.sessionslist.init();
kolab_files_list_coltypes('sessions');
@ -251,8 +249,7 @@ function kolab_files_from_cloud_widget(elem)
column_movable: false,
dblclick_time: rcmail.dblclick_time
});
rcmail.fileslist.addEventListener('select', function(o) { kolab_files_list_select(o); })
.addEventListener('listupdate', function(e) { rcmail.triggerEvent('listupdate', e); });
rcmail.fileslist.addEventListener('select', function(o) { kolab_files_list_select(o); });
rcmail.enable_command('files-sort', 'files-search', 'files-search-reset', true);
@ -719,7 +716,7 @@ function kolab_files_file_rename_dialog(file)
function kolab_files_file_create_dialog(file)
{
var buttons = {}, action = file ? 'copy' : 'create',
button_classes = ['mainaction save'],
button_classes = ['mainaction save edit'],
dialog = $('#files-file-create-dialog'),
type_select = $('select[name="type"]', dialog),
select = $('select[name="parent"]', dialog).html(''),
@ -949,10 +946,8 @@ function kolab_files_upload_input(button)
})
.attr('onclick', '') // remove default button action
.click(function(e) {
console.log("*1")
// forward click if mouse-enter event was missed
if (rcmail.commands['files-upload'] && !this.__active) {
console.log("*2")
this.__active = true;
move_file_input(e);
file.trigger(e);
@ -2728,6 +2723,7 @@ function kolab_files_ui()
// empty the list
this.env.file_list = [];
rcmail.fileslist.clear(true);
rcmail.triggerEvent('listupdate', {list: rcmail.fileslist, rowcount: 0});
// request
if (params.collection || params.all_folders)
@ -2759,6 +2755,7 @@ function kolab_files_ui()
this.env.file_list = list;
rcmail.fileslist.resize();
rcmail.triggerEvent('listupdate', {list: rcmail.fileslist, rowcount: rcmail.fileslist.rowcount});
// update document sessions info of this folder
if (list && list.length)
@ -3556,7 +3553,8 @@ function kolab_files_ui()
_task: 'files',
_action: params && params.action ? params.action : 'open',
_file: file,
_viewer: viewer || 0
_viewer: viewer || 0,
_frame: 1
};
if (params && params.session)

View file

@ -1453,6 +1453,7 @@ class kolab_files_engine
$this->rc->output->set_env('file', $file);
$this->rc->output->set_env('file_data', $this->file_data);
$this->rc->output->set_env('mimetype', $this->file_data['type']);
$this->rc->output->set_env('filename', pathinfo($file, PATHINFO_BASENAME));
$this->rc->output->set_env('editor_type', $editor_type);
$this->rc->output->set_env('photo_placeholder', $placeholder);
$this->rc->output->set_pagetitle(rcube::Q($file));

View file

@ -26,6 +26,7 @@ $labels['foldermount'] = 'Add storage';
$labels['folderdelete'] = 'Delete folder';
$labels['folderoptions'] = 'Folder options';
$labels['findfolders'] = 'Find folders';
$labels['findfiles'] = 'Find files';
$labels['folderinside'] = 'Insert inside';
$labels['foldername'] = 'Folder name';

View file

@ -3,24 +3,25 @@
<div id="folderlistbox" class="selection-list" role="navigation" aria-labelledby="aria-label-folderlist">
<h4 id="aria-label-folderlist" class="voice"><roundcube:label name="kolab_files.arialabelfolderlist" /></h4>
<div class="header">
<a class="button icon back-content-button" href="#back" data-hidden="big" onclick="$('#folderlistbox').hide();$('#filelistcontainer').show()"><span class="inner"><roundcube:label name="back" /></span></a>
<span class="header-title"><roundcube:label name="folders" /></span>
<roundcube:object name="libkolab.folder_search_form" id="foldersearch" wrapper="searchbar toolbar"
ariatag="h5" label="foldersearchform" buttontitle="kolab_files.findfolders" />
</div>
<div id="files-folder-list" class="scroller"></div>
</div>
<div id="filelistcontainer" class="selection-content">
<div id="filelistcontainer" class="selection-content content">
<div class="header">
<a class="button icon back-sidebar-button folders" href="#sidebar" data-hidden="big"><span class="inner"><roundcube:label name="folders" /></span></a>
<span class="header-title"></span>
<a class="button icon back-sidebar-button folders" href="#sidebar" data-hidden="big" onclick="$('#filelistcontainer').hide();$('#folderlistbox').show()"><span class="inner"><roundcube:label name="folders" /></span></a>
<span class="header-title" data-hidden="big" ><roundcube:label name="kolab_files.selectfiles" /></span>
<roundcube:object name="file-search-form" id="filesearchbox" wrapper="searchbar toolbar"
label="searchform" buttontitle="kolab_files.findfiles" label-domain="kolab_files"
ariatag="h3" options="filesearchmenu" />
</div>
<h4 id="aria-label-filelist" class="voice"><roundcube:label name="kolab_files.arialabelfilelist" /></h4>
<div class="scroller">
<roundcube:object name="filelist" id="filelist" class="records-table filelist sortheader fixedheader"
aria-labelledby="aria-label-filelist" />
<roundcube:object name="filelist" id="filelist" class="records-table filelist listing sortheader fixedheader"
aria-labelledby="aria-label-filelist" data-list="fileslist" data-label-msg="listempty" />
</div>
</div>
</div>

View file

@ -15,6 +15,9 @@
<div class="header" role="toolbar" aria-labelledby="aria-label-toolbar">
<span class="header-title constant"><roundcube:var name="env:filename" /></span>
<div id="messagetoolbar" class="toolbar">
<a class="button properties" id="properties-button" href="#properties" onclick="UI.show_sidebar()" data-hidden="big">
<span class="inner"><roundcube:label name="properties"></span>
</a>
<roundcube:button command="files-get" type="link"
class="button download disabled" classAct="button download"
label="kolab_files.get" title="kolab_files.getfile" innerClass="inner" />

View file

@ -49,7 +49,7 @@
<roundcube:button command="files-edit" type="link"
class="button edit disabled" classAct="button edit"
label="kolab_files.edit" title="kolab_files.editfile" innerClass="inner" />
<roundcube:button command="files-create" type="link"
<roundcube:button command="files-create" type="link" data-fab="true"
class="button create disabled" classAct="button create"
label="kolab_files.create" title="kolab_files.createfile" innerClass="inner "/>
<roundcube:button command="files-rename" type="link"
@ -67,12 +67,13 @@
<h2 id="aria-label-filelist" class="voice"><roundcube:label name="kolab_files.arialabelfilelist" /></h2>
<div id="filelistbox" class="droptarget">
<roundcube:object name="filelist" id="filelist" class="records-table listing filelist sortheader fixedheader"
aria-labelledby="aria-label-filelist" />
aria-labelledby="aria-label-filelist" data-list="fileslist"
data-label-msg="listempty" data-label-ext="listusebutton" data-create-command="files-create" />
</div>
<h2 id="aria-label-sessionslist" class="voice"><roundcube:label name="kolab_files.arialabelsessionslist" /></h2>
<div id="sessionslistbox" class="boxlistcontent" style="display:none">
<roundcube:object name="sessionslist" id="sessionslist" class="records-table listing filelist sortheader fixedheader"
optionsmenuIcon="true" aria-labelledby="aria-label-sessionslist" />
optionsmenuIcon="true" aria-labelledby="aria-label-sessionslist" data-label-msg="listempty" />
</div>
</div>
</div>

View file

@ -1,7 +1,8 @@
<div id="files-dialog" class="popupmenu selection-list" data-editable="true" role="dialog" aria-labelledby="aria-label-filesavedialog">
<h3 id="aria-label-filesavedialog" class="voice"><roundcube:label name="kolab_files.arialabelfilesavedialog" /></h3>
<div class="header">
<span class="header-title"><roundcube:label name="folders" /></span>
<span class="header-title" data-hidden="small"><roundcube:label name="folders" /></span>
<span class="header-title" data-hidden="big"><roundcube:label name="kolab_files.saveto" /></span>
<roundcube:object name="libkolab.folder_search_form" id="foldersearch" wrapper="searchbar toolbar"
ariatag="h2" label="foldersearchform" buttontitle="kolab_files.findfolders" />
</div>

View file

@ -1,9 +1,9 @@
function kolab_files_enable_command(p)
{
if (p.command == 'files-save') {
var toolbar = $('#filestoolbar');
$('a.button.edit', toolbar).hide();
$('a.button.save', toolbar).show();
var toolbar = $('#toolbar-menu');
$('a.button.edit', toolbar).parent().hide();
$('a.button.save', toolbar).show().parent().show();
}
};
@ -77,6 +77,16 @@ if (rcmail.env.action == 'open' || rcmail.env.action == 'edit') {
if ($('#exportmenu').length)
rcmail.gui_object('exportmenu', 'exportmenu');
// center and scale the image in preview frame
if (rcmail.env.mimetype.startsWith('image/')) {
$('#fileframe').on('load', function() {
var css = 'img { max-width:100%; max-height:100%; } ' // scale
+ 'body { display:flex; align-items:center; justify-content:center; height:100%; margin:0; }'; // align
$(this).contents().find('head').append('<style type="text/css">'+ css + '</style>');
});
}
}
$(document).ready(function() {
@ -84,6 +94,8 @@ $(document).ready(function() {
rcmail.addEventListener('menu-save', kolab_files_save_listoptions);
rcmail.addEventListener('menu-close', kolab_files_show_listoptions);
$('#toolbar-menu a.button.save').parent().hide();
if ($('#dragfilemenu').length) {
rcmail.gui_object('file_dragmenu', 'dragfilemenu');
}

View file

@ -23,7 +23,8 @@
a.btn.fromcloud:before,
li > a.icon.saveas:before,
a.button.filesaveall:before {
a.button.filesaveall:before,
a.button.saveas:before {
&:extend(.font-icon-class);
content: @fa-var-folder;
}
@ -41,14 +42,18 @@ a.button.filesaveall:before {
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link.options.add-folder {
&:after {
display: none;
}
order: 99;
&:before {
display: inline !important;
content: @fa-var-plus;
margin-right: .2em;
}
&:after {
content: @fa-var-plus;
@media screen and (max-width: @screen-width-xs) {
display: none;
}
}
}
@ -102,11 +107,17 @@ a.button.filesaveall:before {
}
}
#filelistcontainer {
position: relative;
}
.filelist {
table-layout: auto !important;
thead {
display: none;
}
td.options {
width: 2em;
display: none;
}
td.name {
@ -114,12 +125,29 @@ a.button.filesaveall:before {
}
td.mtime {
width: 5em;
width: 10em;
}
td.size {
text-align: right;
width: 3em;
width: 6em;
}
tbody tr.session > td.options span {
}
tbody tr.session.invited > td.options span {
}
tbody tr.session.owner > td.options span {
}
}
@media screen and (max-width: @screen-width-xs) {
.filelist {
td.mtime {
display: none;
}
}
}
@ -292,11 +320,20 @@ a.button.filesaveall:before {
.selection-content {
flex: 2;
@media screen and (min-width: (@screen-width-small + 1px)) {
border: 1px solid @color-layout-border;
border-left: 0;
}
}
a.subscription {
display: none;
}
@media screen and (max-width: @screen-width-small) {
.selection-list {
display: none;
}
}
}

View file

@ -501,9 +501,41 @@ button.btn.print:before {
margin-left: 0;
}
}
.header {
a:before {
font-size: 1.75rem;
}
}
}
}
// Use icons-only on taskmenu with small screen height
@media screen and (max-height: 640px) and (min-width: (@screen-width-small + 1px)) {
body > #layout > .menu {
width: 2.5rem;
}
#taskmenu {
a {
height: auto;
width: 100%;
&:before {
height: 2.1rem;
width: 100%;
}
}
.special-buttons {
width: 2.5rem;
}
span.inner {
display: none;
}
}
}
@import "include/calendar";
@import "include/kolab_activesync";