Add option for vertically stacked reading pane

This commit is contained in:
Janosch Maier 2020-12-28 03:54:19 +01:00
parent 3ed9ba2f7f
commit 5b7f323217
13 changed files with 127 additions and 41 deletions

View file

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

View file

@ -62,8 +62,9 @@ export function activate() {
'Preferences',
{},
{
split: ['Preferences'],
list: ['Preferences'],
split: ['Preferences'],
splitVertical: ['Preferences'],
}
);

View file

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

View file

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

View file

@ -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'],

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -30,7 +30,7 @@ export default {
mode: {
type: 'string',
default: 'list',
enum: ['split', 'list'],
enum: ['split', 'list', 'splitVertical'],
},
systemTray: {
type: 'boolean',

View file

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