From 185d4ab754f5beefeb0c7ec1bf3979e6189ca7f2 Mon Sep 17 00:00:00 2001
From: Aleksander Machniak <machniak@kolabsys.com>
Date: Fri, 20 Apr 2018 12:48:05 +0200
Subject: [PATCH] Elastic: Files and sessions list functionality

---
 plugins/kolab_files/kolab_files.js            |   4 +-
 plugins/kolab_files/localization/en_US.inc    |   1 +
 .../skins/elastic/templates/files.html        |  68 ++++++------
 plugins/kolab_files/skins/elastic/ui.js       | 105 +++++++-----------
 .../skins/elastic/include/kolab_files.less    |  22 +++-
 5 files changed, 97 insertions(+), 103 deletions(-)

diff --git a/plugins/kolab_files/kolab_files.js b/plugins/kolab_files/kolab_files.js
index 48e4addb..e311de97 100644
--- a/plugins/kolab_files/kolab_files.js
+++ b/plugins/kolab_files/kolab_files.js
@@ -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;
 
diff --git a/plugins/kolab_files/localization/en_US.inc b/plugins/kolab_files/localization/en_US.inc
index 56b90162..e16e3f9e 100644
--- a/plugins/kolab_files/localization/en_US.inc
+++ b/plugins/kolab_files/localization/en_US.inc
@@ -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';
diff --git a/plugins/kolab_files/skins/elastic/templates/files.html b/plugins/kolab_files/skins/elastic/templates/files.html
index c3c77646..a8b45fec 100644
--- a/plugins/kolab_files/skins/elastic/templates/files.html
+++ b/plugins/kolab_files/skins/elastic/templates/files.html
@@ -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">
diff --git a/plugins/kolab_files/skins/elastic/ui.js b/plugins/kolab_files/skins/elastic/ui.js
index 422b5b72..c92ba65c 100644
--- a/plugins/kolab_files/skins/elastic/ui.js
+++ b/plugins/kolab_files/skins/elastic/ui.js
@@ -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();
 
diff --git a/plugins/libkolab/skins/elastic/include/kolab_files.less b/plugins/libkolab/skins/elastic/include/kolab_files.less
index 04e03958..6c1aaf05 100644
--- a/plugins/libkolab/skins/elastic/include/kolab_files.less
+++ b/plugins/libkolab/skins/elastic/include/kolab_files.less
@@ -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;
     }
 }