mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-08-25 10:09:20 +03:00
Add mobile version (beta)
This commit is contained in:
parent
1391648e1b
commit
b0ffd84ac6
76 changed files with 2945 additions and 845 deletions
|
|
@ -118,6 +118,22 @@
|
|||
<div class="e-powered thm-powered" data-bind="visible: logoPowered">
|
||||
Powered by <a href="http://www.rainloop.net" target="_blank">RainLoop</a>
|
||||
</div>
|
||||
<div class="e-mobile-switcher thm-mobile-switcher">
|
||||
<span data-bind="visible: !mobile && mobileDevice">
|
||||
<i class="icon-mobile"></i>
|
||||
|
||||
<a href="./?/Mobile/" tabindex="-1">
|
||||
<span class="i18n" data-i18n="MOBILE/BUTTON_MOBILE_VERSION"></span>
|
||||
</a>
|
||||
</span>
|
||||
<span data-bind="visible: mobile">
|
||||
<i class="icon-laptop"></i>
|
||||
|
||||
<a href="./?/SkipMobile/" tabindex="-1">
|
||||
<span class="i18n" data-i18n="MOBILE/BUTTON_DESKTOP_VERSION"></span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="e-languages thm-languages plugin-mark-Login-BottomFooter" data-bind="visible: allowLanguagesOnLogin() && socialLoginEnabled()">
|
||||
<label class="flag-selector">
|
||||
<i data-bind="css: langRequest() ? 'icon-spinner animated' : 'icon-world'"></i>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="b-folders g-ui-user-select-none thm-folders" data-bind="css: {'focused': folderListFocused, 'single-root-inbox': foldersListWithSingleInboxRootFolder, 'inbox-is-starred': isInboxStarred}">
|
||||
<div class="b-toolbar btn-toolbar">
|
||||
<div class="b-toolbar btn-toolbar hide-on-mobile">
|
||||
<a class="btn buttonCompose pull-left" data-tooltip-join="top" data-bind="visible: allowComposer, click: composeClick, tooltip: 'FOLDER_LIST/BUTTON_NEW_MESSAGE', css: {'btn-warning': composeInEdit, 'btn-success': !composeInEdit()}">
|
||||
<i class="icon-paper-plane"></i>
|
||||
<span class="btn-text-wrp buttonComposeText">
|
||||
|
|
@ -20,7 +20,12 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="b-content show-on-panel-disabled" data-bind="click: function () { leftPanelDisabled(false); }"></div>
|
||||
<div class="b-footer btn-toolbar" data-bind="visible: allowFolders">
|
||||
<div class="b-footer btn-toolbar hide-on-mobile" data-bind="visible: allowFolders">
|
||||
<div class="btn-group">
|
||||
<a class="btn single buttonResize" data-bind="click: function () { leftPanelDisabled(!leftPanelDisabled()); }">
|
||||
<i data-bind="css: {'icon-resize-out': leftPanelDisabled(), 'icon-resize-in': !leftPanelDisabled()}"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="btn-group hide-on-panel-disabled">
|
||||
<a class="btn first" data-bind="click: createFolder">
|
||||
<i data-bind="css: {'icon-folder-add': !foldersChanging(), 'icon-spinner animated': foldersChanging()}"></i>
|
||||
|
|
@ -29,10 +34,5 @@
|
|||
<i class="icon-cog"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a class="btn single buttonResize" data-bind="click: function () { leftPanelDisabled(!leftPanelDisabled()); }">
|
||||
<i data-bind="css: {'icon-resize-out': leftPanelDisabled(), 'icon-resize-in': !leftPanelDisabled()}"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -3,13 +3,30 @@
|
|||
data-bind="css: {'message-selected': isMessageSelected, 'message-focused': !messageListFocused(), 'loading': messageListCompleteLoadingThrottle, 'hideMessageListCheckbox': !useCheckboxesInList() }">
|
||||
<div class="toolbar">
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-group show-on-mobile" data-bind="visible: leftPanelDisabled">
|
||||
<a class="btn single" data-bind="click: showLeft">
|
||||
<i class="icon-right-middle"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="btn-group show-on-mobile" data-bind="visible: !leftPanelDisabled()" style="margin-left: -1px">
|
||||
<a class="btn single" data-bind="click: hideLeft">
|
||||
<i class="icon-left-middle"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="btn-group show-on-mobile"> </div>
|
||||
<div class="btn-group show-on-mobile" data-bind="visible: allowComposer">
|
||||
<a class="btn single buttonCompose" data-tooltip-join="top" data-bind="click: composeClick, tooltip: 'FOLDER_LIST/BUTTON_NEW_MESSAGE', css: {'btn-warning': composeInEdit, 'btn-success': !composeInEdit()}">
|
||||
<i class="icon-paper-plane"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="btn-group show-on-mobile"> </div>
|
||||
<div class="btn-group" data-bind="visible: allowReload">
|
||||
<a class="btn single btn-dark-disabled-border buttonReload" data-tooltip-join="top" data-bind="command: reloadCommand, tooltip: 'MESSAGE_LIST/BUTTON_RELOAD'">
|
||||
<i class="icon-spinner" data-bind="css: {'animated': messageListCompleteLoadingThrottleForAnimation}"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="btn-group" data-bind="visible: allowReload"> </div>
|
||||
<div class="btn-group dropdown colored-toggle" data-bind="visible: allowMessageListActions, registrateBootstrapDropdown: true, openDropdownTrigger: moveDropdownTrigger">
|
||||
<div class="btn-group dropdown colored-toggle hide-on-mobile" data-bind="visible: allowMessageListActions, registrateBootstrapDropdown: true, openDropdownTrigger: moveDropdownTrigger">
|
||||
<a id="move-dropdown-id" href="#" tabindex="-1" class="btn single btn-dark-disabled-border dropdown-toggle buttonMove" data-toggle="dropdown" data-tooltip-join="top" data-bind="command: moveCommand, tooltip: 'MESSAGE_LIST/BUTTON_MOVE_TO'">
|
||||
<i class="icon-copy visible-on-ctrl-btn"></i>
|
||||
<i class="icon-folder hidden-on-ctrl-btn"></i>
|
||||
|
|
@ -29,11 +46,11 @@
|
|||
</div>
|
||||
<div class="btn-group" data-bind="visible: allowMessageListActions"> </div>
|
||||
<div class="btn-group" data-bind="visible: allowMessageListActions">
|
||||
<a class="btn first btn-dark-disabled-border button-archive" data-tooltip-join="top"
|
||||
<a class="btn first btn-dark-disabled-border button-archive hide-on-mobile" data-tooltip-join="top"
|
||||
data-bind="visible: isArchiveVisible, command: archiveCommand, tooltip: 'MESSAGE_LIST/BUTTON_ARCHIVE'">
|
||||
<i class="icon-archive"></i>
|
||||
</a>
|
||||
<a class="btn btn-dark-disabled-border button-spam" data-tooltip-join="top"
|
||||
<a class="btn btn-dark-disabled-border button-spam hide-on-mobile" data-tooltip-join="top"
|
||||
data-bind="visible: isSpamVisible, command: spamCommand, tooltip: 'MESSAGE_LIST/BUTTON_SPAM',
|
||||
css: {'first': !isArchiveVisible()}">
|
||||
<i class="icon-angry-smiley"></i>
|
||||
|
|
@ -45,17 +62,17 @@
|
|||
</a>
|
||||
<a class="btn last btn-dark-disabled-border button-delete" data-tooltip-join="top"
|
||||
data-bind="command: deleteCommand, tooltip: 'MESSAGE_LIST/BUTTON_DELETE',
|
||||
css: {'first': !isArchiveVisible() && !isSpamVisible() && !isUnSpamVisible()}">
|
||||
css: {'first': mobile || (!isArchiveVisible() && !isSpamVisible() && !isUnSpamVisible())}">
|
||||
<i class="icon-trash"></i>
|
||||
<!--<span data-bind="text: printableMessageCountForDeletion()"></span>-->
|
||||
</a>
|
||||
</div>
|
||||
<div class="btn-group" data-bind="visible: allowMessageListActions"> </div>
|
||||
<div class="btn-group dropdown colored-toggle" data-bind="visible: allowComposer || allowMessageListActions || allowDangerousActions, registrateBootstrapDropdown: true, openDropdownTrigger: moreDropdownTrigger">
|
||||
<div class="btn-group dropdown colored-toggle hide-on-mobile" data-bind="visible: allowComposer || allowMessageListActions || allowDangerousActions, registrateBootstrapDropdown: true, openDropdownTrigger: moreDropdownTrigger">
|
||||
<a id="more-list-dropdown-id" class="btn single btn-dark-disabled-border dropdown-toggle buttonMore" href="#" tabindex="-1" data-toggle="dropdown" data-tooltip-join="top" data-bind="tooltip: 'MESSAGE_LIST/BUTTON_MORE'">
|
||||
<i class="icon-list animate-this-icon-on-open"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu g-ui-menu" role="menu" aria-labelledby="more-list-dropdown-id">
|
||||
<ul class="dropdown-menu pull-right g-ui-menu" role="menu" aria-labelledby="more-list-dropdown-id">
|
||||
<div data-bind="visible: allowMessageListActions">
|
||||
<li class="e-item" role="presentation" data-bind="click: listUnsetSeen, css: {'disabled': !hasCheckedOrSelectedLines()}">
|
||||
<a class="e-link menuitem" href="#" tabindex="-1">
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
</a>
|
||||
</div>
|
||||
<div class="btn-group"> </div>
|
||||
<div class="btn-group" data-bind="visible: !usePreviewPane()">
|
||||
<div class="btn-group hide-on-mobile" data-bind="visible: !usePreviewPane()">
|
||||
<a class="btn btn-thin first btn-dark-disabled-border buttonUp" data-bind="command: goUpCommand">
|
||||
<i class="icon-left-middle"></i>
|
||||
</a>
|
||||
|
|
@ -197,7 +197,7 @@
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<div class="btn-group pull-right" data-bind="visible: isDraftFolder()" style="margin-right: 5px">
|
||||
<div class="btn-group pull-right hide-on-mobile" data-bind="visible: isDraftFolder()" style="margin-right: 5px">
|
||||
<a class="btn single btn-success buttonEdit" data-bind="command: messageEditCommand">
|
||||
<i class="icon-pencil icon-white"></i>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
<i data-bind="css: {'icon-list': !contacts.importing() && !contacts.syncing(),
|
||||
'icon-spinner animated': contacts.importing() || contacts.syncing()}"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu g-ui-menu" role="menu" aria-labelledby="contacts-more-dropdown-id">
|
||||
<ul class="dropdown-menu g-ui-menu pull-right" role="menu" aria-labelledby="contacts-more-dropdown-id">
|
||||
<li class="e-item" role="presentation">
|
||||
<a class="e-link menuitem" href="#" tabindex="-1" data-bind="initDom: importUploaderButton">
|
||||
<i data-bind="css: {'icon-import': !contacts.importing(), 'icon-spinner animated': contacts.importing}"></i>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row" data-bind="visible: inited() && !serverError()">
|
||||
<div class="span5">
|
||||
<div class="span5 width100-on-mobile">
|
||||
<a class="btn" data-bind="click: addFilter">
|
||||
<i class="icon-plus"></i>
|
||||
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row" data-bind="visible: haveChanges">
|
||||
<div class="span8">
|
||||
<div class="span8 width100-on-mobile">
|
||||
<br />
|
||||
<div class="alert g-ui-user-select-none" style="margin-bottom: 0">
|
||||
<i class="icon-warning"></i>
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row" data-bind="visible: serverError">
|
||||
<div class="span8">
|
||||
<div class="span8 width100-on-mobile">
|
||||
<div class="alert alert-error g-ui-user-select-none" style="margin-bottom: 0">
|
||||
<i class="icon-warning"></i>
|
||||
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
<br />
|
||||
<br />
|
||||
<div class="row">
|
||||
<div class="span8">
|
||||
<div class="span8 width100-on-mobile">
|
||||
<div class="control-group" data-bind="css: {'error': filterRaw.error}, visible: inited() && filterRaw.allow() && filterRaw.active()">
|
||||
<div class="controls">
|
||||
<pre style="word-break: break-word;" data-bind="visible: '' !== filterRaw.capa()">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="b-settings-folders g-ui-user-select-none row" data-bind="css: { 'ignore-folder-subscribe': !useImapSubscribe }">
|
||||
<div class="span8">
|
||||
<div class="span8 width100-on-mobile">
|
||||
<div class="form-horizontal">
|
||||
<div class="legend">
|
||||
<span class="i18n" data-i18n="SETTINGS_FOLDERS/LEGEND_FOLDERS"></span>
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
<tbody data-bind="template: { name: 'SettingsFolderItem', foreach: folderList }"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="span4" style="position: relative" data-bind="visible: '' !== folderListHelp()">
|
||||
<div class="span4 show-on-mobile" style="position: relative" data-bind="visible: '' !== folderListHelp()">
|
||||
<div class="alert alert-info" style="position: fixed">
|
||||
<span data-bind="text: folderListHelp"></span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<div class="control-group hide-on-mobile">
|
||||
<label class="control-label">
|
||||
<span class="i18n" data-i18n="SETTINGS_GENERAL/LABEL_LAYOUT"></span>
|
||||
</label>
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
value: showImages
|
||||
}
|
||||
}"></div>
|
||||
<div data-bind="component: {
|
||||
<div class="hide-on-mobile" data-bind="component: {
|
||||
name: 'Checkbox',
|
||||
params: {
|
||||
label: 'SETTINGS_GENERAL/LABEL_USE_CHECKBOXES_IN_LIST',
|
||||
|
|
@ -117,7 +117,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-horizontal" data-bind="visible: isDesktopNotificationSupported() || soundNotificationIsSupported()">
|
||||
<div class="form-horizontal hide-on-mobile" data-bind="visible: isDesktopNotificationSupported() || soundNotificationIsSupported()">
|
||||
<div class="legend">
|
||||
<span class="i18n i18n-animation" data-i18n="SETTINGS_GENERAL/LABEL_NOTIFICATIONS"></span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,16 @@
|
|||
<div class="b-settings b-settins-right">
|
||||
<div class="b-toolbar" style="padding-left: 0">
|
||||
<div class="btn-toolbar">
|
||||
<div class="btn-toolbar" style="margin-top: 2px;">
|
||||
<div class="btn-group show-on-mobile" data-bind="visible: leftPanelDisabled">
|
||||
<a class="btn single" data-bind="click: showLeft">
|
||||
<i class="icon-right-middle"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="btn-group show-on-mobile" data-bind="visible: !leftPanelDisabled()" style="margin-left: -1px">
|
||||
<a class="btn single" data-bind="click: hideLeft">
|
||||
<i class="icon-left-middle"></i>
|
||||
</a>
|
||||
</div>
|
||||
<a class="btn button-back" data-bind="click: backToMailBoxClick">
|
||||
<i class="icon-left"></i>
|
||||
|
||||
|
|
|
|||
|
|
@ -58,6 +58,20 @@
|
|||
</a>
|
||||
</li>
|
||||
<li class="divider" role="presentation" data-bind="visible: allowSettings || allowHelp"></li>
|
||||
<li class="e-item" role="presentation" data-bind="visible: mobile">
|
||||
<a class="e-link menuitem" href="./?/SkipMobile/" tabindex="-1">
|
||||
<i class="icon-laptop"></i>
|
||||
|
||||
<span class="i18n" data-i18n="MOBILE/BUTTON_DESKTOP_VERSION"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="e-item" role="presentation" data-bind="visible: !mobile && mobileDevice">
|
||||
<a class="e-link menuitem" href="./?/Mobile/" tabindex="-1">
|
||||
<i class="icon-mobile"></i>
|
||||
|
||||
<span class="i18n" data-i18n="MOBILE/BUTTON_MOBILE_VERSION"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="e-item" role="presentation">
|
||||
<a class="e-link menuitem" href="#" tabindex="-1" data-bind="click: logoutClick">
|
||||
<i class="icon-power"></i>
|
||||
|
|
@ -67,7 +81,7 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="accountPlace pull-right" data-bind="text: emailTitle()"></div>
|
||||
<div class="accountPlace pull-right hide-on-mobile" data-bind="text: emailTitle()"></div>
|
||||
<div class="audioPlace pull-right" data-tooltip-i18n="off" data-tooltip-mobile="on" data-tooltip-join="right top"
|
||||
data-bind="visible: '' !== currentAudio(), tooltip: currentAudio, click: stopPlay">
|
||||
<div class="playIcon equaliser" data-bind="css: {'animated': '' !== currentAudio()}">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue