mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-12-26 01:53:13 +08:00
Add option for vertically stacked reading pane
This commit is contained in:
parent
3ed9ba2f7f
commit
5b7f323217
13 changed files with 127 additions and 41 deletions
|
@ -102,6 +102,12 @@ body.platform-win32 {
|
|||
}
|
||||
}
|
||||
|
||||
.mode-splitVertical {
|
||||
.message-nav-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hide-sidebar-button {
|
||||
font-size: @font-size-small;
|
||||
color: @text-color-subtle;
|
||||
|
|
|
@ -62,8 +62,9 @@ export function activate() {
|
|||
'Preferences',
|
||||
{},
|
||||
{
|
||||
split: ['Preferences'],
|
||||
list: ['Preferences'],
|
||||
split: ['Preferences'],
|
||||
splitVertical: ['Preferences'],
|
||||
}
|
||||
);
|
||||
|
||||
|
|
|
@ -139,7 +139,7 @@ class AppearanceModeSwitch extends React.Component<
|
|||
};
|
||||
|
||||
_renderModeOptions() {
|
||||
return ['list', 'split'].map(mode => (
|
||||
return ['list', 'split', 'splitVertical'].map(mode => (
|
||||
<AppearanceModeOption
|
||||
mode={mode}
|
||||
key={mode}
|
||||
|
@ -174,6 +174,7 @@ const AppearanceModeOption = function AppearanceModeOption(props) {
|
|||
const label = {
|
||||
list: localized('Single Panel'),
|
||||
split: localized('Two Panel'),
|
||||
splitVertical: localized('Two Panel Vertical'),
|
||||
}[props.mode];
|
||||
|
||||
return (
|
||||
|
|
|
@ -136,7 +136,7 @@
|
|||
}
|
||||
|
||||
.container-appearance {
|
||||
width: 400px;
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
|
||||
input[type='radio'] {
|
||||
|
@ -156,7 +156,7 @@
|
|||
}
|
||||
|
||||
.appearance-mode-switch {
|
||||
max-width: 400px;
|
||||
max-width: 600px;
|
||||
text-align: right;
|
||||
|
||||
.appearance-mode {
|
||||
|
|
|
@ -2,6 +2,7 @@ import { ComponentRegistry, WorkspaceStore } from 'mailspring-exports';
|
|||
|
||||
import ThreadList from './thread-list';
|
||||
import ThreadListToolbar from './thread-list-toolbar';
|
||||
import ThreadListVertical from './thread-list-vertical';
|
||||
import ThreadListEmptyFolderBar from './thread-list-empty-folder-bar';
|
||||
import MessageListToolbar from './message-list-toolbar';
|
||||
import SelectedItemsStack from './selected-items-stack';
|
||||
|
@ -17,6 +18,10 @@ export function activate() {
|
|||
location: WorkspaceStore.Location.ThreadList,
|
||||
});
|
||||
|
||||
ComponentRegistry.register(ThreadListVertical, {
|
||||
location: WorkspaceStore.Location.ThreadListVertical,
|
||||
});
|
||||
|
||||
ComponentRegistry.register(SelectedItemsStack, {
|
||||
location: WorkspaceStore.Location.MessageList,
|
||||
modes: ['split'],
|
||||
|
|
|
@ -0,0 +1,26 @@
|
|||
import React from 'react';
|
||||
import { InjectedComponentSet } from 'mailspring-component-kit';
|
||||
import { WorkspaceStore } from 'mailspring-exports';
|
||||
|
||||
class ThreadListVertical extends React.Component<{}, { style: string; syncing: boolean }> {
|
||||
static displayName = 'ThreadListVertical';
|
||||
|
||||
render() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{ height: '50%', width: '100%', boxShadow: '0 0.5px 0 #dddddd' }}>
|
||||
<InjectedComponentSet
|
||||
matching={{ location: WorkspaceStore.Location.ThreadList }} />
|
||||
</div>
|
||||
<div style={{ height: '50%', width: '100%' }}>
|
||||
<InjectedComponentSet
|
||||
matching={{ location: WorkspaceStore.Location.MessageList }} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default ThreadListVertical;
|
|
@ -504,6 +504,8 @@
|
|||
"Reading": "Lesen",
|
||||
"Reading Pane Off": "Lesefenster aus",
|
||||
"Reading Pane On": "Lesefenster ein",
|
||||
"Horizontal Reading Pane": "Horizontales Lesefenster",
|
||||
"Vertical Reading Pane": "Vertikales Lesefenster",
|
||||
"Rebuild": "Wiederherstellen",
|
||||
"Rebuild Cache...": "Cache neu erstellen...",
|
||||
"Recipient": "Empfänger:",
|
||||
|
@ -771,6 +773,7 @@
|
|||
"Twitter Handle": "Twitter Handle",
|
||||
"Twitter Profile Image": "Twitter Profilbild",
|
||||
"Two Panel": "Zwei Panel",
|
||||
"Two Panel Vertical": "Zwei vertikale Panel",
|
||||
"Uhoh - that's a pro feature!": "Uhoh - das ist ein Pro-Feature!",
|
||||
"Unable to Add Account": "Account kann nicht hinzugefügt werden",
|
||||
"Unable to Start Local Server": "Der lokale Server konnte nicht gestartet werden",
|
||||
|
|
|
@ -92,28 +92,42 @@ module.exports = {
|
|||
{
|
||||
label: localized('Reading Pane Off'),
|
||||
type: 'radio',
|
||||
command: 'navigation:select-split-mode',
|
||||
checked: true,
|
||||
hideWhenDisabled: true,
|
||||
},
|
||||
{
|
||||
label: localized('Reading Pane On'),
|
||||
type: 'radio',
|
||||
command: 'navigation:select-split-mode',
|
||||
command: 'navigation:list-mode-off',
|
||||
checked: false,
|
||||
hideWhenDisabled: true,
|
||||
},
|
||||
{
|
||||
label: localized('Reading Pane Off'),
|
||||
type: 'radio',
|
||||
command: 'navigation:select-list-mode',
|
||||
command: 'navigation:list-mode-on',
|
||||
checked: true,
|
||||
hideWhenDisabled: true,
|
||||
},
|
||||
{
|
||||
label: localized('Horizontal Reading Pane'),
|
||||
type: 'radio',
|
||||
command: 'navigation:split-mode-off',
|
||||
checked: false,
|
||||
hideWhenDisabled: true,
|
||||
},
|
||||
{
|
||||
label: localized('Reading Pane On'),
|
||||
label: localized('Horizontal Reading Pane'),
|
||||
type: 'radio',
|
||||
command: 'navigation:select-list-mode',
|
||||
command: 'navigation:split-mode-on',
|
||||
checked: true,
|
||||
hideWhenDisabled: true,
|
||||
},
|
||||
{
|
||||
label: localized('Vertical Reading Pane'),
|
||||
type: 'radio',
|
||||
command: 'navigation:splitVertical-mode-off',
|
||||
checked: false,
|
||||
hideWhenDisabled: true,
|
||||
},
|
||||
{
|
||||
label: localized('Vertical Reading Pane'),
|
||||
type: 'radio',
|
||||
command: 'navigation:splitVertical-mode-on',
|
||||
checked: true,
|
||||
hideWhenDisabled: true,
|
||||
},
|
||||
|
|
|
@ -64,28 +64,42 @@ module.exports = {
|
|||
{
|
||||
label: localized('Reading Pane Off'),
|
||||
type: 'radio',
|
||||
command: 'navigation:select-split-mode',
|
||||
checked: true,
|
||||
hideWhenDisabled: true,
|
||||
},
|
||||
{
|
||||
label: localized('Reading Pane On'),
|
||||
type: 'radio',
|
||||
command: 'navigation:select-split-mode',
|
||||
command: 'navigation:list-mode-off',
|
||||
checked: false,
|
||||
hideWhenDisabled: true,
|
||||
},
|
||||
{
|
||||
label: localized('Reading Pane Off'),
|
||||
type: 'radio',
|
||||
command: 'navigation:select-list-mode',
|
||||
command: 'navigation:list-mode-on',
|
||||
checked: true,
|
||||
hideWhenDisabled: true,
|
||||
},
|
||||
{
|
||||
label: localized('Horizontal Reading Pane'),
|
||||
type: 'radio',
|
||||
command: 'navigation:split-mode-off',
|
||||
checked: false,
|
||||
hideWhenDisabled: true,
|
||||
},
|
||||
{
|
||||
label: localized('Reading Pane On'),
|
||||
label: localized('Horizontal Reading Pane'),
|
||||
type: 'radio',
|
||||
command: 'navigation:select-list-mode',
|
||||
command: 'navigation:split-mode-on',
|
||||
checked: true,
|
||||
hideWhenDisabled: true,
|
||||
},
|
||||
{
|
||||
label: localized('Vertical Reading Pane'),
|
||||
type: 'radio',
|
||||
command: 'navigation:splitVertical-mode-off',
|
||||
checked: false,
|
||||
hideWhenDisabled: true,
|
||||
},
|
||||
{
|
||||
label: localized('Vertical Reading Pane'),
|
||||
type: 'radio',
|
||||
command: 'navigation:splitVertical-mode-on',
|
||||
checked: true,
|
||||
hideWhenDisabled: true,
|
||||
},
|
||||
|
|
|
@ -39,28 +39,42 @@ module.exports = {
|
|||
{
|
||||
label: localized('Reading Pane Off'),
|
||||
type: 'radio',
|
||||
command: 'navigation:select-split-mode',
|
||||
checked: true,
|
||||
hideWhenDisabled: true,
|
||||
},
|
||||
{
|
||||
label: localized('Reading Pane On'),
|
||||
type: 'radio',
|
||||
command: 'navigation:select-split-mode',
|
||||
command: 'navigation:list-mode-off',
|
||||
checked: false,
|
||||
hideWhenDisabled: true,
|
||||
},
|
||||
{
|
||||
label: localized('Reading Pane Off'),
|
||||
type: 'radio',
|
||||
command: 'navigation:select-list-mode',
|
||||
command: 'navigation:list-mode-on',
|
||||
checked: true,
|
||||
hideWhenDisabled: true,
|
||||
},
|
||||
{
|
||||
label: localized('Horizontal Reading Pane'),
|
||||
type: 'radio',
|
||||
command: 'navigation:split-mode-off',
|
||||
checked: false,
|
||||
hideWhenDisabled: true,
|
||||
},
|
||||
{
|
||||
label: localized('Reading Pane On'),
|
||||
label: localized('Horizontal Reading Pane'),
|
||||
type: 'radio',
|
||||
command: 'navigation:select-list-mode',
|
||||
command: 'navigation:split-mode-on',
|
||||
checked: true,
|
||||
hideWhenDisabled: true,
|
||||
},
|
||||
{
|
||||
label: localized('Vertical Reading Pane'),
|
||||
type: 'radio',
|
||||
command: 'navigation:splitVertical-mode-off',
|
||||
checked: false,
|
||||
hideWhenDisabled: true,
|
||||
},
|
||||
{
|
||||
label: localized('Vertical Reading Pane'),
|
||||
type: 'radio',
|
||||
command: 'navigation:splitVertical-mode-on',
|
||||
checked: true,
|
||||
hideWhenDisabled: true,
|
||||
},
|
||||
|
|
|
@ -30,7 +30,7 @@ export default {
|
|||
mode: {
|
||||
type: 'string',
|
||||
default: 'list',
|
||||
enum: ['split', 'list'],
|
||||
enum: ['split', 'list', 'splitVertical'],
|
||||
},
|
||||
systemTray: {
|
||||
type: 'boolean',
|
||||
|
|
|
@ -119,6 +119,7 @@ class WorkspaceStore extends MailspringStore {
|
|||
{
|
||||
list: ['RootSidebar', 'ThreadList'],
|
||||
split: ['RootSidebar', 'ThreadList', 'MessageList', 'MessageListSidebar'],
|
||||
splitVertical: ['RootSidebar', 'ThreadListVertical', 'MessageListSidebar'],
|
||||
}
|
||||
);
|
||||
this.defineSheet('Thread', {}, { list: ['MessageList', 'MessageListSidebar'] });
|
||||
|
@ -195,6 +196,7 @@ class WorkspaceStore extends MailspringStore {
|
|||
};
|
||||
|
||||
_onSelectLayoutMode = mode => {
|
||||
|
||||
if (mode === this._preferredLayoutMode) {
|
||||
return;
|
||||
}
|
||||
|
@ -221,9 +223,9 @@ class WorkspaceStore extends MailspringStore {
|
|||
{
|
||||
'core:pop-sheet': () => this.popSheet(),
|
||||
},
|
||||
this._preferredLayoutMode === 'list'
|
||||
? { 'navigation:select-split-mode': () => this._onSelectLayoutMode('split') }
|
||||
: { 'navigation:select-list-mode': () => this._onSelectLayoutMode('list') }
|
||||
this._preferredLayoutMode === 'list' ? { 'navigation:list-mode-on': () => this._onSelectLayoutMode('list') } : { 'navigation:list-mode-off': () => this._onSelectLayoutMode('list') },
|
||||
this._preferredLayoutMode === 'split' ? { 'navigation:split-mode-on': () => this._onSelectLayoutMode('split') } : { 'navigation:split-mode-off': () => this._onSelectLayoutMode('split') },
|
||||
this._preferredLayoutMode === 'splitVertical' ? { 'navigation:splitVertical-mode-on': () => this._onSelectLayoutMode('splitVertical') } : { 'navigation:splitVertical-mode-off': () => this._onSelectLayoutMode('splitVertical') },
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 5.1 KiB |
Loading…
Reference in a new issue