Elastic: Files - verious improvements

plugins/kolab_files/kolab_files.js

@@ -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('column_replace', function(e) { kolab_files_set_coltypes(e, 'files'); });
-        .addEventListener('listupdate', function(e) { rcmail.triggerEvent('listupdate', e); });
 
       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('column_replace', function(e) { kolab_files_set_coltypes(e, 'sessions'); });
-        .addEventListener('listupdate', function(e) { rcmail.triggerEvent('listupdate', e); });
 
       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); })
+    rcmail.fileslist.addEventListener('select', function(o) { kolab_files_list_select(o); });
-      .addEventListener('listupdate', function(e) { rcmail.triggerEvent('listupdate', e); });
 
     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)

plugins/kolab_files/lib/kolab_files_engine.php

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

plugins/kolab_files/localization/en_US.inc

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

plugins/kolab_files/skins/elastic/templates/compose_plugin.html

@@ -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>
+			<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"></span>
+			<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"
+			<roundcube:object name="filelist" id="filelist" class="records-table filelist listing sortheader fixedheader"
-				aria-labelledby="aria-label-filelist" />
+				aria-labelledby="aria-label-filelist" data-list="fileslist" data-label-msg="listempty" />
 		</div>
 	</div>
 </div>

plugins/kolab_files/skins/elastic/templates/filepreview.html

@@ -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" />

plugins/kolab_files/skins/elastic/templates/files.html

@@ -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>

plugins/kolab_files/skins/elastic/templates/message_plugin.html

@@ -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>

plugins/kolab_files/skins/elastic/ui.js

@@ -1,9 +1,9 @@
 function kolab_files_enable_command(p)
 {
   if (p.command == 'files-save') {
-    var toolbar = $('#filestoolbar');
+    var toolbar = $('#toolbar-menu');
-    $('a.button.edit', toolbar).hide();
+    $('a.button.edit', toolbar).parent().hide();
-    $('a.button.save', toolbar).show();
+    $('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');
     }

plugins/libkolab/skins/elastic/include/kolab_files.less

@@ -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 {
+    order: 99;
-        display: none;
-    }
 
     &: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;
+        }
+    }
 }

plugins/libkolab/skins/elastic/libkolab.less

@@ -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";