From 5b7f323217c863ac15dba239545bf630770752ae Mon Sep 17 00:00:00 2001 From: Janosch Maier Date: Mon, 28 Dec 2020 03:54:19 +0100 Subject: [PATCH] Add option for vertically stacked reading pane --- .../message-list/styles/message-list.less | 6 +++ .../preferences/lib/main.tsx | 3 +- .../lib/tabs/preferences-appearance.tsx | 3 +- .../preferences/styles/preferences.less | 4 +- app/internal_packages/thread-list/lib/main.ts | 5 +++ .../thread-list/lib/thread-list-vertical.tsx | 26 +++++++++++++ app/lang/de.json | 3 ++ app/menus/darwin.js | 36 ++++++++++++------ app/menus/linux.js | 36 ++++++++++++------ app/menus/win32.js | 36 ++++++++++++------ app/src/config-schema.ts | 2 +- app/src/flux/stores/workspace-store.ts | 8 ++-- .../appearance-mode-splitVertical@2x.png | Bin 0 -> 5208 bytes 13 files changed, 127 insertions(+), 41 deletions(-) create mode 100644 app/internal_packages/thread-list/lib/thread-list-vertical.tsx create mode 100644 app/static/images/preferences/appearance/appearance-mode-splitVertical@2x.png diff --git a/app/internal_packages/message-list/styles/message-list.less b/app/internal_packages/message-list/styles/message-list.less index fb4e3fa51..7347e0b92 100644 --- a/app/internal_packages/message-list/styles/message-list.less +++ b/app/internal_packages/message-list/styles/message-list.less @@ -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; diff --git a/app/internal_packages/preferences/lib/main.tsx b/app/internal_packages/preferences/lib/main.tsx index 100b26943..a1313685f 100644 --- a/app/internal_packages/preferences/lib/main.tsx +++ b/app/internal_packages/preferences/lib/main.tsx @@ -62,8 +62,9 @@ export function activate() { 'Preferences', {}, { - split: ['Preferences'], list: ['Preferences'], + split: ['Preferences'], + splitVertical: ['Preferences'], } ); diff --git a/app/internal_packages/preferences/lib/tabs/preferences-appearance.tsx b/app/internal_packages/preferences/lib/tabs/preferences-appearance.tsx index 78e0522e2..18877f5a7 100644 --- a/app/internal_packages/preferences/lib/tabs/preferences-appearance.tsx +++ b/app/internal_packages/preferences/lib/tabs/preferences-appearance.tsx @@ -139,7 +139,7 @@ class AppearanceModeSwitch extends React.Component< }; _renderModeOptions() { - return ['list', 'split'].map(mode => ( + return ['list', 'split', 'splitVertical'].map(mode => ( { + static displayName = 'ThreadListVertical'; + + render() { + + return ( + <> +
+ +
+
+ +
+ + ); + } + +} + +export default ThreadListVertical; \ No newline at end of file diff --git a/app/lang/de.json b/app/lang/de.json index d859b24ed..c9b65b56a 100644 --- a/app/lang/de.json +++ b/app/lang/de.json @@ -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", diff --git a/app/menus/darwin.js b/app/menus/darwin.js index 5d4af3e2b..e14a664c1 100644 --- a/app/menus/darwin.js +++ b/app/menus/darwin.js @@ -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, }, diff --git a/app/menus/linux.js b/app/menus/linux.js index c151b6f72..6354903c4 100644 --- a/app/menus/linux.js +++ b/app/menus/linux.js @@ -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, }, diff --git a/app/menus/win32.js b/app/menus/win32.js index ed547309d..82162af4b 100644 --- a/app/menus/win32.js +++ b/app/menus/win32.js @@ -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, }, diff --git a/app/src/config-schema.ts b/app/src/config-schema.ts index fc253cf1a..3dc50be5c 100644 --- a/app/src/config-schema.ts +++ b/app/src/config-schema.ts @@ -30,7 +30,7 @@ export default { mode: { type: 'string', default: 'list', - enum: ['split', 'list'], + enum: ['split', 'list', 'splitVertical'], }, systemTray: { type: 'boolean', diff --git a/app/src/flux/stores/workspace-store.ts b/app/src/flux/stores/workspace-store.ts index 3fe0bda59..57abed19a 100644 --- a/app/src/flux/stores/workspace-store.ts +++ b/app/src/flux/stores/workspace-store.ts @@ -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') }, ) ); } diff --git a/app/static/images/preferences/appearance/appearance-mode-splitVertical@2x.png b/app/static/images/preferences/appearance/appearance-mode-splitVertical@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..c8c0bbe24cfd167dcc4d536c407a7df903bd0646 GIT binary patch literal 5208 zcmZu!bx;)E_Fs^Or9nVaN)V7nYGJ9RySrIhx};+PrF$2oyQND)q@T#Bs_n6x zZbcdGAnI$aC^0D=A&+tjmFGB{#Ml5^hJ~DOS)6~{ z$KCSV?upZh5@giRYn&u8TD}jJj-4N!Ih{m?l*7nK%nu{tmOA<~Cs0zZK>r8IT#r8+ z9s|MlcL~h3I)90=U=rDW;xt~q(~)WJp-8{8EUDKU8Q%%-cfY>*gA*#zW4W^$@M-F7 zlI*t`^R<6r5F#Yo>vnQ^HrK|);B6S>b7N6v(}@~^Tg@BMdMmX2Sd0D*k6?b#DETZP zKx9JqEqr1DEkkKx)$LuLZ;ee8kTX!kbP(CG>z}7WYvv35V|ayXoRyzk6Gf}p#p3(k z+;wEV*c~vjXlX0*ZCl@gN!9A%JIvhd7C|(zJSVT8hr54*wRF%KLld8SpVS42&BJ#4 zNc;AN_9tR?V5aoY1JNnk-)DVDsr4nKmfQTbz$qE6AC6J{9Wmgkm0LJ}W_TEG<`*pI zA}^%zA3n4K^a;8kgYYm44?1PBDOy^2SaSaw71>GWVjRA@MkE3d^=1>th5u>TPLJiC zTz*4Le1ks;E-7n@Ek}4H5jy-GSgB4f5u{AOH$?8m6_=)wDihC9nyc)a(;uEHn<%=I ztKy-{s})`oaf3gpYtVt>6q+;CnP?H@%HKsaPg|>Sx6PRC5yJNihd%_K+8NSV#&5yi z^KL6LC-FBfuxUuy#ZWuI12V;(u&bm%q2X{zO)q?oo>%KypN-_nWD>5#SLev~@5z!)q^M^LFMBmhnLv0vsOY;PShd?6GLkPpaIm#F;Ucdr9 zg|xMlFy^|bY?iE0Bi+Xv>{Y8Va1)c7e!DPPd8*E>=8k%~ez;V3S2iCOb=?YJi1oR6 z%hi4*9GG+&cxrXr7Jebp^a-ARZ@*xWHnTB~a?(Z(_U{#5#6?b}&9D=KG?epSQ>9TR z_Plu^6Kjy=RGr&T2c+hNBOPS4*b4wP{%Sf&kiCpuI+?L>hMJ30<3g)`+V`)$8QJ1m z5~7Y1gczQw#8Ngg7{mEm;(4ct1y;!sJ&AgXU&oYdK0RJU*+7qPOer6x1~H^B}rl8dZh_5U?ys zAs=fNQmheqFa!0MP*kgYqCwo8mi{ai8w7lbb{)n9-b)tKa<093Yi%L@2Yp?Z&N=9u zj)3SuQM|P*Cf$IY$Jam$%i2g4(Oke-;6AKc%Ti$WB_S7Edz)7>Las%g`1VFj!J<58 z;@9R{P9uxL8iAv1mR93Z%JZ=i)*F3U$d`EKnG$p3FdRV|(x&_oRxkVU<5ezTini%1 z3S3*wyb&gT$mNi*8l_&$q~`lN8C#M#8lNWR3Nu-6XtYF%lf4XQ1bnDW>`4Y8f`sx# zj^Khr7V~?^({=#gdp4U%v3KemdUK#388$;Upln}NqpjC&NZ9VSH(JVeusy9}X_GMy}feM5;WMHtqMI)3%+7XW4{Clpz-Kp>*2kbSZR@ zCSJQ=BhzhD%H5}@qy6tm#CKuTU|3{AGIl*)xx>su+?&oSl=#*~oWbfDAy0J8$inP=R9igmL%*NPJ zUADyJ!@B)0#fwmGYBl2QZ?JN!XcTc$4T4jU= zmxevroR7%{Whhfa(V|qJD!GKkB|iNl%%?DD4v#si(machARmN^6Qdg_-UVvR2|%DcR`;|xyvqS=8m#woHgrhlyjglQl*OmT{G+#f%XQ0>h&Dq4@}<#Xlw3_r!0{)B57Cstw9Z3 zhV+B0p9#?PxZ(N45;WYC**ryKk;4RIXGmWl3~tcUM?%L$nO_&V72io)$E6rJO)fv! zC`R6_tBaG=OU{24acdeoRag%EsU%@0WJPO^M z#gm~Nec`s7*oQ>O>TE9^nHPD@tjUdM=5IkP&aaDF|I!C)hzSQ;%tLedU8+Cb@CLhE zW>t1&39Sm6A+IXR6{uTwu6U>Hf=IZ_d&fQ_W8UmlU|eC zXn~`|h;Mb{h%ZOc?T3YP%^@zIL%bD)%+J5txQq1Z#y9CiPL3aGj$WU|YvBfMRK1!{ zzeTtZN>#VYRN&Ky1MmV_Us($|EsKz?~boyz2RLq1k-z> zQMlVA(k3L(;YM%vAn(LLt=zBGLMU&2Ib_}&MSiu~eZg@oGJBx2%LS`wep}IG-q7^WN1dtg$1q)5h=JXN3Wn)5D6wK zS5UH$d)pPisUWW&tqj|Sy*^(a{9#S=qS4=c`|z3GY`JN0vD1oag6)$-iV~ueMeTPe zOQCq5igeCj>dw*N&543056C&iNkc>+GE2*eu|2mG=&PMOo8@V_T$9js6}}AkP!_bq z+))$c;V8xR>;yaYV)CxTZ%Iv6ey6>^1&Jjaj^Kt zL;AzGF@^Q8HE8+f?lbL#XPY5i2h_n`?i#J!!#SrpY>O!3fa`DFv|673so(isgO0&+ zD|uRFZ9}?S+4G6&N@t+E$tB6a=nDIQJ7=Y(7$V5UexEGuv+?EpM?aIGk9tpz8uS@b zBNgb!%?i)WE}U^PC*blt12=?bop@*B-UpoBXVazCKR?N4)%`D!&|gb*5AI1#%&X8y z2sHQm;}AS_w|`!RDO5x#x7;O?_|}1Zx7uze8SGMP!odfDjRS^AgV{P5z7%V=?f5@q z$xDR3gGENa>iei6)ya!~{r{Je?re2Qjg?iUle5 zq37P6fNwFR7or9$?lR0SsSlw0c$#s}wMR3SlU&8to&Dz3P!3-LK!`H1m zLX%H`ehNU0fzi(4udH8oU9K7X`2@XX6`83H^eph{>RQQt$7ek6ken7l7E8DiC!61#V8!oMW)QAQhw=LlpIV*5F}S2~=OvV-9bo4%^EJqyFjp?31< zq2R=M$>HxH-I_h|BpBwax`Dn97IM~in z2T!}ZB-UgQeyrFrRiSSfAT`$&U?|?G%fC7|B&R(FDlQYg$sx>)&+9Cl)_ZXw^R-}E z&1OQ@u}cIYvtkBYG-%$0hp&JRJTLZ%aJV((hiNR5*eyj!P)hjf2==wGhOmH>S_J-M>fJo2Qy=9LRWrqdFAtDB03Z-|jn^cm)W&Pxqzi;neVrF!ZAF$n+PbTr7u z<1Ev(vcr(IRW42<>}nA{M#;onle+kVL$P4g?{LN{-gqD4sZwSEG@| zZ#g#^C#t5ngkptfDKDww(8lm%#h<0aT9EH~BD!hC&i;4}Z=zD}5Bj8V(D$1hP_HU1 zKEa-I%J~5RXv~hXvYJY=vi~uxk2W`n zAw2zZL8Zp*!Q>M1jXn`1?0^vm6s}RQc^q0C8EMr0=8qKN-t9xrQ)6G!vYl<75+l9# z5O;sk?vGg;&{?#rWx@gevjFq_q2GVw?Ji24yWxBH5-M7zF*6;U_`i$LkED;stJWIg z6IR1RSwe_cwczsG?C0v~3NaIP`E0X4hiBKy=p3HzmDL|^dJb^V3p1CgDpu?(3-}~@ zETwglW31_rDwA1X+QTc`NisY=MahA3ooce{`gwaCb}UJ8-Kqn0l@e<7yP>^{pvglu zXRi;~@|tawy0zz2>kL+|I7d?rf!~r_e%-hN1=J;fPl<$}u}y16u_o4%KiYhBYZZtb z-~pC2-urmMeWPgP1pwfa{VUJ_@LZ}#5ZhZxO&di8MYy)OB%iLHdq4=H75EhPo~r_n-()|4&Tf#u`D<# z6{2sREuYb58Sjq#$3FetN)D2ZH0u|$svdc!$>|6RMXgMI6s z`m}M=<0p;&c%6S%SVAA(m7ziOOr|_4-bxg~;P}-wyWn)Mtu2FIbuQJP;YW}7GQ-Dm z6Za^til(Yx)?W}GNBs+wf7xT%8>>%7vsDB+975Q+m2}Kb9az?|cSeVFn^?H-eR>No z)n7z_>gxWoYO$;N`aiLiz!@#Bw0At8ihFvei)^*tFkH^6NE_Oa(a@v}8s11rozlNT z1yqfMc-n_n=`0M6-cG$N#G_j{S}E1C!(ZQLr|IPp+zr$?Ryh^@x#LF`lhnT6AJ06q zy^mIL&-TUS}=X44*t&6H`gV+bK^A z=R7uYUvD~Hw)6e_Dl1%+0e)HcEo~)_1i`lpEzm+=yw$!8-7r87w!q8Kj`Vv7g ziDy&kZHiUgsNqr8a1&Za9B>$;G;xHb*KPrCg}OJZVrUfR38*C7jZ}h_9vf`Xn{>oh zm`^{*ibjlqBSZXHPdp3GP?IUa6ct89DdKx(EwM~TwzB{th~@D9DH(Luv`ZuQ0K1Sr z=ZRHAmyA_GXT%|n`j-l$TO=nUDi+`R-~2wasz2o_SO-`W;lo*l<3oKptQ6Zw<>d zt2AlMTFgfs17ZY5An|`uvzGspS^|LIv5fJGHZ2~n5>%BbN=|!CK{18Y_8=wjVuC6x zTE?B2T>CDw9)hYPdL1Ga)YuZCASP3?D60OLp#~ ze?P1lPi6I_&OlA?DO5u{4t-?Y6;orpS<-+?$=*ngyFO9-3~gX|Hu6R+YxE{)=SY?$1xS{KVJ|4FiCj;Foe>gd9*zIgDT0Z%hkzPM*JV= CjLOdd literal 0 HcmV?d00001