Add mobile version (beta)

This commit is contained in:
RainLoop Team 2016-05-01 04:07:10 +03:00
parent 1391648e1b
commit b0ffd84ac6
76 changed files with 2945 additions and 845 deletions

View file

@ -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>
&nbsp;
<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>
&nbsp;
<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>

View file

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

View file

@ -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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">

View file

@ -30,7 +30,7 @@
</a>
</div>
<div class="btn-group">&nbsp;</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>

View file

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

View file

@ -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>
&nbsp;&nbsp;
@ -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>
&nbsp;&nbsp;
@ -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()">

View file

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

View file

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

View file

@ -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>
&nbsp;&nbsp;

View file

@ -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>
&nbsp;&nbsp;
<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>
&nbsp;&nbsp;
<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()}">