Micke/roundcubemail-plugins-kolab
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Elastic: Apply some toolbars re-design ideas

Browse source
This commit is contained in:
Aleksander Machniak 2018-05-10 12:30:33 +02:00
parent a8f8eca470
commit e6f9a6104b
8 changed files with 73 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
plugins/calendar/skins/elastic/templates/calendar.html
View file

@ -8,9 +8,9 @@
<div class="header">
<a class="button icon back-content-button" href="#back" data-hidden="big"><span class="inner"><roundcube:label name="back" /></span></a>
<span id="aria-label-calendars" class="header-title"><roundcube:label name="calendar.calendars" /></span>
<roundcube:object name="libkolab.folder_search_form" id="calendarlistsearch" wrapper="searchbar toolbar"
ariatag="h2" label="calsearchform" label-domain="calendar" buttontitle="findcalendars" />
</div>
<roundcube:object name="libkolab.folder_search_form" id="calendarlistsearch" wrapper="searchbar toolbar"
ariatag="h2" label="calsearchform" label-domain="calendar" buttontitle="findcalendars" />
<div id="calendars-content" class="scroller">
<roundcube:object name="plugin.calendar_list" id="calendarslist" class="treelist listing iconized" />
</div>
@ -50,9 +50,9 @@
label="calendar.export" title="calendar.exporttitle" innerClass="inner" />
<roundcube:container name="toolbar" id="calendartoolbar" />
</div>
<roundcube:object name="plugin.searchform" id="searchform" wrapper="searchbar toolbar"
label="searchform" buttontitle="calendar.findevents" label-domain="calendar" ariatag="h2" />
</div>
<roundcube:object name="plugin.searchform" id="searchform" wrapper="searchbar toolbar"
label="searchform" buttontitle="calendar.findevents" label-domain="calendar" ariatag="h2" />
<h2 id="aria-label-calendarview" class="voice"><roundcube:label name="calendar.arialabelcalendarview" /></h2>
<div id="calendar" class="content" role="main" aria-labelledby="aria-label-calendarview" data-elastic-mode="true">
<roundcube:object name="plugin.agenda_options" id="agendaoptions" />

5
plugins/kolab_addressbook/skins/elastic/templates/search_addon.html
View file

@ -4,10 +4,9 @@
<script>
// append search form for address books
if (rcmail.gui_objects.folderlist) {
var searchbar = $('#addressbooksearch').parent().parent()
$('#addressbooksearch').parent().parent()
.attr('aria-controls', rcmail.gui_objects.folderlist)
.insertAfter($('#layout > .sidebar > .header > .header-title'))
.get(0);
.insertBefore('#' + rcmail.gui_objects.folderlist);
rcmail.addEventListener('init', function() {
// Make checkboxes pretty

28
plugins/kolab_files/skins/elastic/templates/compose_plugin.html
View file

@ -5,18 +5,29 @@
<div class="header">
<a class="button icon back" href="#back" data-hidden="big" onclick="$('#folderlistbox').hide();$('#filelistcontainer').css('display','flex')"><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>
<roundcube:object name="libkolab.folder_search_form" id="foldersearch" wrapper="searchbar toolbar"
ariatag="h5" label="foldersearchform" buttontitle="kolab_files.findfolders" />
<div id="files-folder-list" class="scroller"></div>
</div>
<div id="filelistcontainer" class="selection-content content">
<div class="header">
<a class="button icon folders" href="#sidebar" data-hidden="big" onclick="$('#filelistcontainer').hide();$('#folderlistbox').css('display','flex')"><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>
<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 id="filesearchmenu" class="hidden searchoptions scroller propform formcontainer" aria-labelledby="aria-label-search-menu" aria-controls="filelist">
<h3 id="aria-label-search-menu" class="voice"><roundcube:label name="searchmod" /></h3>
<div class="formcontent">
<ul class="proplist">
<li><label><input type="checkbox" name="all_folders" value="1" id="search_all_folders" /><roundcube:label name="kolab_files.allfolders" /></label></li>
</ul>
</div>
<div class="formbuttons">
<button class="btn btn-primary icon search" href="#" onclick="return rcmail.command('files-search')"><roundcube:label name="search" /></button>
</div>
</div>
<h4 id="aria-label-filelist" class="voice"><roundcube:label name="kolab_files.arialabelfilelist" /></h4>
<div class="scroller">
@ -26,13 +37,6 @@
</div>
</div>
<div id="filesearchmenu" class="popupmenu form" data-editable="true">
<h3 id="aria-label-searchmenu" class="voice"><roundcube:label name="searchmod" /></h3>
<ul class="toolbarmenu" role="menu" aria-labelledby="aria-label-searchmenu">
<li role="menuitem" class="checkbox"><label><input type="checkbox" name="all_folders" value="1" id="search_all_folders" /><roundcube:label name="kolab_files.allfolders" /></label></li>
</ul>
</div>
<div id="files-folder-auth-dialog" class="popupmenu formcontent" role="dialog" aria-labelledby="aria-label-folderauthform">
<h3 id="aria-label-folderauthform" class="voice"><roundcube:label name="kolab_files.arialabelfolderauthform" /></h3>
<roundcube:object name="folder-auth-options">

59
plugins/kolab_files/skins/elastic/templates/files.html
View file

@ -8,9 +8,9 @@
<div class="header">
<a class="button icon back-content-button" href="#back" data-hidden="big"><span class="inner"><roundcube:label name="back" /></span></a>
<span id="aria-label-folders" class="header-title"><roundcube:label name="folders" /></span>
<roundcube:object name="libkolab.folder_search_form" id="foldersearch" wrapper="searchbar toolbar"
ariatag="h2" label="foldersearchform" buttontitle="kolab_files.findfolders" />
</div>
<roundcube:object name="libkolab.folder_search_form" id="foldersearch" wrapper="searchbar toolbar"
ariatag="h2" label="foldersearchform" buttontitle="kolab_files.findfolders" />
<div id="files-folder-list" class="scroller"></div>
<div class="footer toolbar" role="toolbar">
<roundcube:button command="folder-create" type="link"
@ -19,13 +19,15 @@
<roundcube:button name="folderoptions" id="folderoptionslink" type="link"
title="moreactions" label="actions"
class="button actions" innerClass="inner" data-popup="folderoptions-menu" />
<roundcube:if condition="env:files_quota" />
<div id="quotadisplay" class="quota-widget">
<span class="voice"><roundcube:label name="quota"></span>
<roundcube:object name="filequotadisplay" class="count" display="text" />
</div>
<roundcube:endif />
</div>
<roundcube:if condition="env:files_quota" />
<div class="footer toolbar small">
<div id="quotadisplay" class="quota-widget">
<span class="voice"><roundcube:label name="quota"></span>
<roundcube:object name="filequotadisplay" class="count" display="text" />
</div>
</div>
<roundcube:endif />
</div>
<!-- files -->
@ -37,6 +39,13 @@
<span class="header-title"></span>
<!-- toolbar -->
<div id="filestoolbar" class="toolbar">
<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" />
<span class="spacer"></span>
<roundcube:button command="files-upload" type="link" onclick="$('#filesuploadform').click()"
class="button upload disabled" classAct="button upload"
label="kolab_files.upload" title="kolab_files.uploadfile" innerClass="inner" />
@ -59,9 +68,20 @@
class="button more" label="more" title="moreactions"
data-popup="file-menu" innerclass="inner" />
</div>
<roundcube:object name="file-search-form" id="searchform" wrapper="searchbar toolbar"
label="searchform" buttontitle="kolab_files.findfiles" label-domain="kolab_files"
ariatag="h3" options="filesearchmenu" />
</div>
<roundcube:object name="file-search-form" id="searchform" wrapper="searchbar toolbar"
label="searchform" buttontitle="kolab_files.findfiles" label-domain="kolab_files"
ariatag="h3" options="filesearchmenu" />
<div id="filesearchmenu" class="hidden searchoptions scroller propform formcontainer" aria-labelledby="aria-label-search-menu" aria-controls="filelist">
<h3 id="aria-label-search-menu" class="voice"><roundcube:label name="searchmod" /></h3>
<div class="formcontent">
<ul class="proplist">
<li><label><input type="checkbox" name="all_folders" value="1" id="search_all_folders" /><roundcube:label name="kolab_files.allfolders" /></label></li>
</ul>
</div>
<div class="formbuttons">
<button class="btn btn-primary icon search" href="#" onclick="return rcmail.command('files-search')"><roundcube:label name="search" /></button>
</div>
</div>
<div id="filelistcontainer" class="content" role="main" aria-labelledby="aria-label-filelist" data-elastic-mode="true">
<h2 id="aria-label-filelist" class="voice"><roundcube:label name="kolab_files.arialabelfilelist" /></h2>
@ -76,16 +96,6 @@
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>
@ -196,13 +206,6 @@
</ul>
</div>
<div id="filesearchmenu" class="popupmenu form" data-editable="true">
<h3 id="aria-label-searchmenu" class="voice"><roundcube:label name="searchmod" /></h3>
<ul class="toolbarmenu" role="menu" aria-labelledby="aria-label-searchmenu">
<li role="menuitem" class="checkbox"><label><input type="checkbox" name="all_folders" value="1" id="search_all_folders" /><roundcube:label name="kolab_files.allfolders" /></label></li>
</ul>
</div>
<div id="file-menu" class="popupmenu">
<h3 id="aria-label-message-menu" class="voice"><roundcube:label name="kolab_files.arialabelmorefileactions" /></h3>
<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-file-menu">

4
plugins/kolab_files/skins/elastic/templates/message_plugin.html
View file

@ -3,9 +3,9 @@
<div class="header">
<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>
<roundcube:object name="libkolab.folder_search_form" id="foldersearch" wrapper="searchbar toolbar"
ariatag="h2" label="foldersearchform" buttontitle="kolab_files.findfolders" />
<h3 id="aria-label-folderlist" class="voice"><roundcube:label name="kolab_files.arialabelfolderlist" /></h3>
<div id="files-folder-list" class="scroller" aria-labelledby="aria-label-folderlist" data-no-collections="true"></div>
<div id="file-save-as" class="form-addon form-group row">

2
plugins/kolab_files/skins/elastic/ui.js
View file

@ -117,7 +117,7 @@ else if (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']();
$('#fileslistmenu-link, #layout > .content > .pagenav, #layout > .content .searchbar')[is_sess ? 'hide' : 'show']();
$('#sessionslistmenu-link')[is_sess ? 'removeClass' : 'addClass']('hidden');
// set list header title for mobile

18
plugins/kolab_notes/skins/elastic/templates/notes.html
View file

@ -8,9 +8,9 @@
<div class="header">
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
<span id="aria-label-notebooks" class="header-title"><roundcube:label name="kolab_notes.lists" /></span>
<roundcube:object name="libkolab.folder_search_form" id="notebooksearch" wrapper="searchbar toolbar"
ariatag="h2" label="foldersearchform" label-domain="kolab_notes" buttontitle="findnotebooks" />
</div>
<roundcube:object name="libkolab.folder_search_form" id="notebooksearch" wrapper="searchbar toolbar"
ariatag="h2" label="foldersearchform" label-domain="kolab_notes" buttontitle="findnotebooks" />
<div id="notebooks-content" class="scroller">
<roundcube:object name="plugin.notebooks" id="notebooks" class="listing treelist iconized" />
</div>
@ -29,10 +29,14 @@
<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
<a class="button icon back-sidebar-button folders" href="#sidebar"><span class="inner"><roundcube:label name="kolab_notes.notebooks" /></span></a>
<span id="aria-label-noteslist" class="header-title"><roundcube:label name="kolab_notes.notes" /></span>
<roundcube:object name="plugin.searchform" id="searchform" wrapper="searchbar toolbar"
label="notesearchform" label-domain="kolab_notes" buttontitle="kolab_notes.findnotes" ariatag="h2" />
<div id="listcontrols" class="toolbar" role="toolbar">
<roundcube:button name="optionsmenu" id="listmenulink" type="link" class="button settings"
label="options" innerClass="inner" onclick="return kolab_notes_options_menu()" />
</div>
<a class="button icon toolbar-menu-button" href="#list-menu"><span class="inner"><roundcube:label name="menu" /></span></a>
</div>
<roundcube:object name="plugin.searchform" id="searchform" wrapper="searchbar toolbar"
label="notesearchform" label-domain="kolab_notes" buttontitle="kolab_notes.findnotes" ariatag="h2" />
<div class="scroller">
<h2 id="aria-label-noteslist" class="voice"><roundcube:label name="kolab_notes.notes" /></h2>
<roundcube:object name="plugin.listing" id="kolabnoteslist"
@ -40,12 +44,6 @@
role="listbox" data-list="noteslist"
data-label-msg="listempty" data-label-ext="listusebutton" data-create-command="createnote" />
</div>
<div class="footer toolbar">
<div id="listcontrols" class="listselectors">
<roundcube:button name="optionsmenu" id="listmenulink" type="link" class="button settings"
label="options" innerClass="inner" onclick="return kolab_notes_options_menu()" />
</div>
</div>
</div>
<!-- note details frame -->

20
plugins/tasklist/skins/elastic/templates/mainview.html
View file

@ -8,9 +8,9 @@
<div class="header">
<a class="button icon back-list-button" href="#back"><span class="inner"><roundcube:label name="back" /></span></a>
<span id="aria-label-tasklists" class="header-title"><roundcube:label name="tasklist.lists" /></span>
<roundcube:object name="libkolab.folder_search_form" id="tasklistsearch" wrapper="searchbar toolbar"
ariatag="h2" label="foldersearchform" label-domain="tasklist" buttontitle="findlists" />
</div>
<roundcube:object name="libkolab.folder_search_form" id="tasklistsearch" wrapper="searchbar toolbar"
ariatag="h2" label="foldersearchform" label-domain="tasklist" buttontitle="findlists" />
<div id="tasklists-content" class="scroller">
<roundcube:object name="plugin.tasklists" id="tasklists" class="treelist listing iconized" />
</div>
@ -29,10 +29,15 @@
<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
<a class="button icon back-sidebar-button folders" href="#sidebar"><span class="inner"><roundcube:label name="tasklist.lists" /></span></a>
<span id="aria-label-taskslist" class="header-title"><roundcube:label name="tasklist.navtitle" /></span>
<roundcube:object name="plugin.searchform" id="searchform" wrapper="searchbar toolbar"
label="tasksearchform" label-domain="tasklist" buttontitle="tasklist.findtasks" ariatag="h2" />
<div id="listcontrols" class="toolbar" role="toolbar">
<a href="#threads" class="button threads" data-popup="threadselect-menu" title="<roundcube:label name="threads" />"><span class="inner"><roundcube:label name="threads" /></span></a>
<roundcube:button name="optionsmenu" id="listmenulink" type="link" class="button settings"
label="options" innerClass="inner" onclick="tasklist_options_menu()" />
</div>
<a class="button icon toolbar-menu-button" href="#list-menu"><span class="inner"><roundcube:label name="menu" /></span></a>
</div>
<roundcube:object name="plugin.searchform" id="searchform" wrapper="searchbar toolbar"
label="tasksearchform" label-domain="tasklist" buttontitle="tasklist.findtasks" ariatag="h2" />
<div class="pagenav pagenav-list toolbar" onclick="UI.switch_nav_list(this)">
<a class="button icon expand"><span class="inner"></span></a>
<span id="taskselector-name" class="pagenav-text"><roundcube:label name="tasklist.all" /></span>
@ -63,13 +68,6 @@
class="listing" role="listbox" data-list="tasklist"
data-label-msg="listempty" data-label-ext="listusebutton" data-create-command="newtask" />
</div>
<div class="footer toolbar">
<div id="listcontrols" class="listselectors">
<a href="#threads" class="button threads" data-popup="threadselect-menu" title="<roundcube:label name="threads" />"><span class="inner"><roundcube:label name="threads" /></span></a>
<roundcube:button name="optionsmenu" id="listmenulink" type="link" class="button settings"
label="options" innerClass="inner" onclick="tasklist_options_menu()" />
</div>
</div>
</div>
<!-- task details frame -->