From 0cbc821900a34a2fe2bbd1a085d9d5336e194dea Mon Sep 17 00:00:00 2001 From: troyeguo <13820674+troyeguo@users.noreply.github.com> Date: Sun, 27 Aug 2023 11:51:40 +0800 Subject: [PATCH] fix bug Former-commit-id: d5cb205b223f82d5fd7109de5157cce9e4f0f876 --- public/assets/styles/blue.css | 1 - public/assets/styles/dark.css | 1 - public/assets/styles/default.css | 1 - public/assets/styles/green.css | 1 - public/assets/styles/purple.css | 1 - public/assets/styles/red.css | 1 - src/assets/locales/cn/translation.json | 5 +- src/assets/locales/en/translation.json | 1 + src/assets/styles/fonts/icomoon.eot | Bin 18656 -> 21344 bytes src/assets/styles/fonts/icomoon.svg | 11 + src/assets/styles/fonts/icomoon.ttf | Bin 18492 -> 21180 bytes src/assets/styles/fonts/icomoon.woff | Bin 18568 -> 21256 bytes src/assets/styles/style.css | 43 +++- .../dialogs/actionDialog/component.tsx | 36 ++- src/components/dialogs/actionDialog/index.tsx | 6 + .../dialogs/actionDialog/interface.tsx | 4 + src/components/selectBook/component.tsx | 2 +- src/components/shelfSelector/component.tsx | 7 +- src/constants/sideMenu.tsx | 10 +- src/containers/lists/bookList/booklist.css | 4 +- src/containers/lists/bookList/component.tsx | 6 +- src/containers/sidebar/component.tsx | 220 +++++++++++++++--- src/containers/sidebar/index.tsx | 6 +- src/containers/sidebar/interface.tsx | 6 + src/containers/sidebar/sidebar.css | 53 ++++- 25 files changed, 345 insertions(+), 81 deletions(-) diff --git a/public/assets/styles/blue.css b/public/assets/styles/blue.css index ded4cd02..3651dda7 100644 --- a/public/assets/styles/blue.css +++ b/public/assets/styles/blue.css @@ -4,7 +4,6 @@ .delete-dialog-comfirm, .book-item-config, .book-cover-item-config, -.side-menu-selector-container, .download-desk-button, .edit-dialog-comfirm, .change-location-button, diff --git a/public/assets/styles/dark.css b/public/assets/styles/dark.css index 5654f483..011de038 100644 --- a/public/assets/styles/dark.css +++ b/public/assets/styles/dark.css @@ -62,7 +62,6 @@ body, .delete-dialog-comfirm, .book-item-config, .book-cover-item-config, -.side-menu-selector-container, .download-desk-button, .edit-dialog-comfirm, .change-location-button, diff --git a/public/assets/styles/default.css b/public/assets/styles/default.css index f86b1e8b..b59fb738 100644 --- a/public/assets/styles/default.css +++ b/public/assets/styles/default.css @@ -76,7 +76,6 @@ body, .delete-dialog-comfirm, .book-item-config, .book-cover-item-config, -.side-menu-selector-container, .download-desk-button, .edit-dialog-comfirm, .change-location-button, diff --git a/public/assets/styles/green.css b/public/assets/styles/green.css index e5072f7a..1b9827af 100644 --- a/public/assets/styles/green.css +++ b/public/assets/styles/green.css @@ -4,7 +4,6 @@ .delete-dialog-comfirm, .book-item-config, .book-cover-item-config, -.side-menu-selector-container, .download-desk-button, .edit-dialog-comfirm, .change-location-button, diff --git a/public/assets/styles/purple.css b/public/assets/styles/purple.css index b93893ae..0314f22b 100644 --- a/public/assets/styles/purple.css +++ b/public/assets/styles/purple.css @@ -4,7 +4,6 @@ .delete-dialog-comfirm, .book-item-config, .book-cover-item-config, -.side-menu-selector-container, .download-desk-button, .edit-dialog-comfirm, .change-location-button, diff --git a/public/assets/styles/red.css b/public/assets/styles/red.css index 65648cfa..adfe35cf 100644 --- a/public/assets/styles/red.css +++ b/public/assets/styles/red.css @@ -13,7 +13,6 @@ .update-dialog-container-button, .import-from-local, .single-control-switch, -.side-menu-selector-container, .previous-chapter-single-container, .next-chapter-single-container, .book-bookmark-link, diff --git a/src/assets/locales/cn/translation.json b/src/assets/locales/cn/translation.json index 0076f2e1..efffcaa8 100644 --- a/src/assets/locales/cn/translation.json +++ b/src/assets/locales/cn/translation.json @@ -350,9 +350,10 @@ "Chinese Conversion": "繁简转换", "Don't use first page as PDF cover": "不使用 PDF 首页作为封面", "Don't crop book cover": "不裁剪图书封面", - "Add to favorite": "添加到喜爱", - "Remove from favorite": "从喜爱移除", + "Add to Favorite": "添加到喜爱", + "Remove from Favorite": "从喜爱移除", "Details": "详细信息", + "Multiple Select": "多选", "You may see this error when the book you're importing is not supported by Koodo Reader, try converting it with Calibre": "暂不支持此图书，请尝试使用 Calibre 转化之后重新导入", "Shelf title can't be pure number": "书架名不能是纯数字", "Open Console": "打开控制台", diff --git a/src/assets/locales/en/translation.json b/src/assets/locales/en/translation.json index 4943394e..6cf64321 100644 --- a/src/assets/locales/en/translation.json +++ b/src/assets/locales/en/translation.json @@ -128,6 +128,7 @@ "Add to favorite": "Add to favorite", "Remove from favorite": "Remove from favorite", "Details": "Details", + "Multiple Select": "Multiple Select", "You may see this error when the book you're importing is not supported by Koodo Reader, try converting it with Calibre": "You may see this error when the book you're importing is not supported by Koodo Reader, try converting it with Calibre", "Simplified To Traditional": "Simplified To Traditional", "Traditional To Simplified": "Traditional To Simplified", diff --git a/src/assets/styles/fonts/icomoon.eot b/src/assets/styles/fonts/icomoon.eot index c1909b5405545eaedf8a5e0ad875ecccba230cbc..290881b9019e673923e3a2762c19187ce9cef400 100644 GIT binary patch delta 2915 zcmZuzYitzP6~2$%o!Qx)ncbb&uI+t}z2nE)-u28rY+4&*vtYxzYl=~UAB_txC;@DQ zr68iR6)GrFQ557xDkYVugb0dJlL#fsj}|5LM=PZ%Ra!-rS|R$Y{n17xYW}p{Nza`H z5=2&W?%aFMx#!OL?s@F}OZfhE9C+rN2>oKur9j2Utt!T)tZ{q(LkP{-`FOlyvuVH-^KC62|xwxtkC8{Q)vEn?=KdCtkvi1!CgjgRC#(W+_kaQy&{@<#T+!?#K$N$#V>gG!CEK~? z+FFy`OLm3D=+^eq@Z{t$*%ZRzY&+-iJS}pMX|~_@Pwi@RHQG{CQ2d`*$DMbV7m%IjVsP5+$`KF2NAEq zSF>=hVgqwk49>7zV1BTx!~|1v15=D|PA}DZ=!5dL7;bv?;z3lp)rB?rBH%yRIVkQoo<}iVFMCO*BE5XdUH{g$e*V zpjL{i0kgz_E|tx)t(jUjnr&$?DccNtf7Fb21{zKc4W-;fdZ_q%5&z9iz-uUtUz?wI z_s`GM`cSHUfoYWH=1SxY8&gAP+J7hUGwxq7lp*#3w~?Q2qpN5aI)qNLx{Xf3+j11fM@W_m+OjSjW=Tl;CT-7u&+zOkz?j(~_+3Zv@>FBx{ z4vU(mj^}(r!2LL)X%Sh!ugfqQ|C6liG8?cK42sEMZf%;`R8&=A_NUi!!K5hiL2bh9 zTO4HeY{RoBhT#;$W~U4;_L&nJr7vlbi_Bc>$PxCs7}3tLlh{E3A3;sDjlM}|&@?*u zWYJ)-Jt`n}aKc-XYw>|ttVa+8Rq+dccoY>DJ+at8JZ^U-oNj%@=xyYuTZ=^Y`(?5?op1CS zBYL+J@3!OZe_GZHjorH%$7+Q_?bzsbH=1PQdTN3E&_y$Tu`bS)M+Wv@R$eHt@7Ky^b`H9cU` zS2LD%&~YZTnl|A$2Q4cTk_M8aY5l5^el~4f)zhQN0Vy;*p{IYC*1zwK6O@vSm1o<0 zJlz7@@>T|tose>OCc7|Pu%l7CRTy5#X1YT?QgXn(tf$lZ-MehWM+TCSp5T_W;r`@9 zkByHSX|PCfcQ(T|Q)ef*-oM4~lDp{*u~IYICTHwgWm(l-jSVv_|WzYONW4 zve=%I!XYEkK388}u9LF~BNUcu?KiAS#UhKmAn<+da~{)EBWIaf`wb=_i=ad1Olb!DjPx&NOph%*iOvE0UzXs7jI|@E`a%zfYj< zN5O=IrJjD^s_v(331{e_71@-emUsgl~h$~{b%+a_WnSK_*V!t5cfSn zu#)a)jEO^!-f}z$AY!x^U8Xn51EjNb$#IY_kSwYJ5J5(;)@9L~@_^`?4`7sKtnjg5 zFvbxi%jAJ9yQzQ3GLwJGa~w~6vehrMOvD{BlvVEA^4C5?A=c{=`fKD6L|*5;;cTzs zJ-3c+@4*F-UICh8T0m<+n?SdLnn1gNW`K4A?cI2>{&FhUm3!Tcn1{`4z1w(KVGj@|B7+is7FiglztSDfJU`%6Ra4P}w74i~uQ)hZ{{s!`=0M)k@6 zJY+!f49qNyI+Ifv?HQdWFJbg%blUuZQPEkM5hw@5t`|Aq#`D{JW#DE3X<>NC@1+Q% fCl~meGrDhH;V;8D`9r`2HjsJ-_s#PH4>1A&Ygt3{ diff --git a/src/assets/styles/fonts/icomoon.svg b/src/assets/styles/fonts/icomoon.svg index 5fb7b239..0f0205dd 100644 --- a/src/assets/styles/fonts/icomoon.svg +++ b/src/assets/styles/fonts/icomoon.svg @@ -74,4 +74,15 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/styles/fonts/icomoon.ttf b/src/assets/styles/fonts/icomoon.ttf index edd948ff25f6eeb712aca0e8a6406a81fc5d5a71..01af9d2c353285fae0e428123ee281c8b6362126 100644 GIT binary patch delta 2939 zcmZuzYitzP6~2$%o!Qx)ncbb&uI+t}y@Tzwz3Z8M*tB+x&4P{BSyPM({Ajnt0VO;Z zVX2g;Y=lZwsVE|)kxEG=Dy0O)s7Zwy5i!0k~K|^ z1bI>>5mCxT@t#;tlp>^z2`@z1;!FjrVfT7i!DYn{oXC)7}?OD_Tp8(@IxO@P>&Po{U1S$Y`4=8W}op}xT70pfoM0qPa zt^=R0N5ybYvYTtR+f8yW*%KC{Pjy#Drlv;7x)2U$yE%{NNs)U@s=ESwfvkfJS?`K_Aoc;bke_a&$I&iy z5S?IoBX4Y<&8XN20+u8o1$dzVKyJDM$V05u@C4St2!OHz z5=rcRJDY&FKqP^Nt;||AKwb?-A=1U_w4%~u2e=(-sWi<+iR5hV;pr2@aEf8GQ-+oY%t?*Xm$k@wrml175F5@%w6p9ab`Zcv zP!nyVZ_`;cgAP2NG#G3T5(t}nFT~6SPSB^ZK0b{-1UGPGQG<&f>g<{URS#QDWqUgT zdRa)uVngw`(=)Im%}X37ahV+hJx)A66pJMVAtVUFxSW_Bs;|*FALHY6tv)mxkHmv) z&0VckU#ixQEmij$#{TNkF^?p##|LAvK0y#v#V`2bRa7AQVzI$^-0n#@z51xp-^kB& zmWk~5%Vc>b-{?0+^}YK21W$l~H+;|0rNjzz$sQuG&)P{z?J zAj2}J1+JCj0?ZuN0T^2`)F^NR2sqm#S-E003!nfeffDwhRCSx#XP6%)hEbL z>=H`FI32i;40I<4Qm%X)lh zFd69!ZcQ8Rk3R6&_^^=%jTHB0Gi)=ZHtfx0dm$nCp_Ka|xi;u8sST+%hpK2hpz~O& z{h~~3biOFpn$gFT?MW#dG7{ah^;WA+&LoUbSgLj3vMLpeEc1fE4|LCZOizrQVPf64 z*aBGwA#y%Z()H3ew%1!l-6+jfEUTgx6N#ewgQ7lWloAh@-T!XznFQRm5A8$(eV3j_ zeW-@^p>Kjk7q6IFXETLhhdDTSH1mCkc+UaMoaYf3$_LALEKzWf47>@zQQAx_C5RBn z$eURaE3t#MUnNjM+}na+CEd>$6Nes*ay$qqVzdWcqSwiNq_cR*aS$&MEvf+!K}fLLWzp;M zpy-@UdVp#t|gT$yH$fYr;;=9v_pF delta 278 zcmdn9lyT1l#(D-u1_lOhh6V;^1_S?KeItG$wi!T?JwTk0oSRr69(L&@0|TQBkROts zSX=<41%P}I&5@o{nKoI){Rxm?!NB13B_lO4McekqD+UIa9H6{e22g7w-O*mDJ3XIO)AtVKT?#W{gj)!wp5Re{_50pJc>UD0{z6`9{p9e8m+R}X{SeDfs`y1}S#ceLxo@>w`|VJFPf zE*-{Co?Je$0=#d*#!HN@&ienowtD&u*zw7>9EB0}eY;yK*7{SwYhw!G*X z!gPhUkci@FA6iAQ5odi`Sk+6zm2%k5l^&TXX4%g5gG2(GtWotHSi(j@Ehg2w|W-y1B*RYJ((N|h2eR?9mqe#{i%I%dgh{C zs#Z(eBj>k(hqOs8cR-%{l9~hgZ8Z_5ogJC$UCieXIN!CaRl9U?W?S#f%=d9pliz1B zLv#9pa%ML|ng`LRk%BU)j3&Wvz|Kkz?%1`c1)c!Lb8zJVKq(_(uoGrJxN$&%^Xbf2 zz?*1h3?Rx`nPDCHbR#SVI}+_|b8W3j?j<^cVt8kJabRq0fNTiCV5XgQd9D<>$E4be zz!%5{$dHZBk&akxt=U{_RXbuM^J4?~F}>EAsJ+9ciS1SALzk0+=1_Dlx&7+{6^)o0Q&Y5lV;$ zJ732niM>8=kekF$&p0n043YkJT2#E0hNxHheUdPFp5B0-fHcK7{W5si&t2)zLB~U40x`9UNBCVq=vJj*Z45$^us?RJkpo?X*T+&P}6V9|W7?ev4dvDkbZ#FcT z?C(!Hu~dKI)dK#T6N9clgzX(t3ZgeThjFXJ(4z9BY&P=h~l;=sD*j%n}xS zz#ZhJyXY#KLx<5RmMwCY8_s1LuG`9)Sx&;7Piv`eY)hDN9|QqQ4G{QlC;*UKt^o27 zD>XcVH8298tbjxUyWh?R;4KhIV95?grGddoRT-~}9M31k z?1-vqVz3o7b=^)R#xt4mM8ei}GZ+*#O&!U41fTO^NYg^H{uf<_!N{LvU6)ydHNRg> z__J#hOsAr%3e!Kamh~q@k@st(X7@rL(^oQFePR$!F-q)|zJ+dcRHO7cEp&ycd+g{@ z)?Eo{7uZScAb^jcCfY?`r;}&`Edh8gHUJNEFo40G!gzfZ08C+hcpSTkZQ{nF1Q!^d zZb$)&E|!|=B2KRfiAba`8nrvR_oR4<<0LMgdhY2!5@`llYR9wG|ET# zC_Pi}n~a8{ezxYU)T)=NwUhJJLxypvI)Ad|&dJNs-bkcV5Cm263SM{>6(*gLNN+S+ z>WJBKebDG?oOOzIPQkHXpfTqO~#tsaX2(BFhtmIBvQDT(|pa7?ULiJEVf@%e& ziD6TAix8xvVS{-gG`gzkK9l}9ZCOjUJ*w5TQQKa!taL!?O$?><>qhFSlyO~84JCS| zz`&@UYW*Oke@{3E=1O7uEc z^;Al~dzZENXm29a>EDquoFBdKvhgt^1qvySXVPphrEG6H6NmWsLZ$XVE^W|X(N+mk zYZg_}Zh+^J)cRGK)%dE^YK9-pt*516z=*Xk)R&j*Eg{Tf>#3m`?V#EQCJ{PynpazQtWQx(gqsD)Upp#G4}W816Fe>T}n0Pfm@ zrjbD3q~}m4s-c7E8J0CRv&8zx5v_%7=HC$X?p1BMvzc{00z5b(D4r1RO02;-u zJW_-Jfdssj1mW_-nN4x{cL6Da8dFm%33yhfrWy~AooO?Bw%J@-YPOnZv*v>d8F zs?xuv-hi$py(fgcD+CIL^R^&Z3FmXRhyxFLIqC-#G5mpErMJj^q_cR*au6>NEvf+! zK}4`pWzk!5ujrWfp_OH<@Daa1!Vx6P(IkKep_*dmlc6LeN7-fS+#V_FwBi!~X@oz6D4C delta 337 zcmeBJ#@I2DQLNnG&5ePP0SG)g7`VZ-4Flukk3nJ+b%g6@B)M#;XjVAW-ZB zkgo#5yob5iGjdBR7#Lhdfcj-XSbhWdoSgh*pgKP{1E8V_AROSA#Fv{`0kqid0FbW$ z#u1EZd5O8HK(Plvjcp)2(~I+WL4I)w&_5tYL)0+?S { + this.props.handleSelectBook(true); + this.props.handleSelectedBooks([this.props.currentBook.key]); + this.props.handleActionDialog(false); + }; handleCancelLoveBook = () => { AddFavorite.clear(this.props.currentBook.key); if ( @@ -125,14 +130,14 @@ class ActionDialog extends React.Component< } }} > - +

{AddFavorite.getAllFavorite().indexOf( this.props.currentBook.key ) > -1 ? ( - Remove from favorite + Remove from Favorite ) : ( - Add to favorite + Add to Favorite )}

@@ -142,18 +147,29 @@ class ActionDialog extends React.Component< this.handleAddShelf(); }} > - +

Add to Shelf

+
{ + this.handleMultiSelect(); + }} + > + +

+ Multiple Select +

+
{ this.handleDeleteBook(); }} > - +

Delete

@@ -164,7 +180,7 @@ class ActionDialog extends React.Component< this.handleEditBook(); }} > - +

Edit

@@ -176,10 +192,10 @@ class ActionDialog extends React.Component< }} > -

+

Details

@@ -206,8 +222,10 @@ class ActionDialog extends React.Component< className="icon-more view-icon" style={{ display: "inline-block", - marginRight: "15px", + marginRight: "12px", + marginLeft: "3px", transform: "rotate(90deg)", + fontSize: "12px", }} > More Actions diff --git a/src/components/dialogs/actionDialog/index.tsx b/src/components/dialogs/actionDialog/index.tsx index 0a8d89c0..00c8495d 100644 --- a/src/components/dialogs/actionDialog/index.tsx +++ b/src/components/dialogs/actionDialog/index.tsx @@ -2,7 +2,9 @@ import { connect } from "react-redux"; import { handleEditDialog, handleDeleteDialog, + handleSelectBook, handleAddDialog, + handleSelectedBooks, handleActionDialog, handleReadingBook, handleFetchBooks, @@ -19,6 +21,8 @@ const mapStateToProps = (state: stateType) => { currentBook: state.book.currentBook, books: state.manager.books, notes: state.reader.notes, + isSelectBook: state.manager.isSelectBook, + deletedBooks: state.manager.deletedBooks, }; }; @@ -30,6 +34,8 @@ const actionCreator = { handleActionDialog, handleFetchBooks, handleDetailDialog, + handleSelectBook, + handleSelectedBooks, }; export default connect( mapStateToProps, diff --git a/src/components/dialogs/actionDialog/interface.tsx b/src/components/dialogs/actionDialog/interface.tsx index b33bee5c..3894ed5d 100644 --- a/src/components/dialogs/actionDialog/interface.tsx +++ b/src/components/dialogs/actionDialog/interface.tsx @@ -11,6 +11,8 @@ export interface ActionDialogProps extends RouteComponentProps { left: number; top: number; mode: string; + isSelectBook: boolean; + handleFetchBooks: () => void; handleDeleteDialog: (isShow: boolean) => void; handleFetchBookmarks: () => void; @@ -21,6 +23,8 @@ export interface ActionDialogProps extends RouteComponentProps { handleAddDialog: (isShow: boolean) => void; handleActionDialog: (isShow: boolean) => void; handleDetailDialog: (isShow: boolean) => void; + handleSelectBook: (isSelectBook: boolean) => void; + handleSelectedBooks: (selectedBooks: string[]) => void; } export interface ActionDialogState { isShowExport: boolean; diff --git a/src/components/selectBook/component.tsx b/src/components/selectBook/component.tsx index d7a9f697..31f4d039 100644 --- a/src/components/selectBook/component.tsx +++ b/src/components/selectBook/component.tsx @@ -35,7 +35,7 @@ class SelectBook extends React.Component { }} className="book-manage-title" > - {this.props.isSelectBook ? "Cancel" : "Select"} + {this.props.isSelectBook ? "Cancel" : ""} {this.props.isSelectBook && ( <> diff --git a/src/components/shelfSelector/component.tsx b/src/components/shelfSelector/component.tsx index ca12988c..4898b6b0 100644 --- a/src/components/shelfSelector/component.tsx +++ b/src/components/shelfSelector/component.tsx @@ -42,6 +42,9 @@ class ShelfSelector extends React.Component< this.props.handleMode("shelf"); }); }; + handleDeletePopup = (isOpenDelete: boolean) => { + this.setState({ isOpenDelete }); + }; renderShelfList = () => { let shelfList = ShelfUtil.getShelf(); let shelfTitle = Object.keys(shelfList); @@ -59,9 +62,7 @@ class ShelfSelector extends React.Component< ); }); }; - handleDeletePopup = (isOpenDelete: boolean) => { - this.setState({ isOpenDelete }); - }; + render() { if (isElectron) { //兼容之前的版本 diff --git a/src/constants/sideMenu.tsx b/src/constants/sideMenu.tsx index 41b4122d..dd509695 100644 --- a/src/constants/sideMenu.tsx +++ b/src/constants/sideMenu.tsx @@ -1,28 +1,28 @@ export const sideMenu = [ { name: "Books", - icon: "home", + icon: "home-line", mode: "home", }, { name: "Favorites", - icon: "love", + icon: "heart", mode: "favorite", }, { name: "Notes", - icon: "idea", + icon: "idea-line", mode: "note", }, { name: "Highlights", - icon: "digest", + icon: "highlight-line", mode: "digest", }, { name: "Deleted Books", - icon: "trash", + icon: "trash-line", mode: "trash", }, ]; diff --git a/src/containers/lists/bookList/booklist.css b/src/containers/lists/bookList/booklist.css index 3b39867e..d2c2f20f 100644 --- a/src/containers/lists/bookList/booklist.css +++ b/src/containers/lists/bookList/booklist.css @@ -1,6 +1,6 @@ .book-list-container-parent { position: absolute; - top: 125px; + top: 80px; left: 220px; width: calc(100% - 220px); height: calc(100% - 125px); @@ -11,7 +11,7 @@ align-items: center; justify-content: space-between; position: absolute; - top: 85px; + bottom: 10px; left: 220px; width: calc(100% - 220px); } diff --git a/src/containers/lists/bookList/component.tsx b/src/containers/lists/bookList/component.tsx index 3c39be2c..007929d4 100644 --- a/src/containers/lists/bookList/component.tsx +++ b/src/containers/lists/bookList/component.tsx @@ -16,7 +16,6 @@ import ViewMode from "../../../components/viewMode"; import { backup } from "../../../utils/syncUtils/backupUtil"; import { isElectron } from "react-device-detect"; import SelectBook from "../../../components/selectBook"; -import ShelfSelector from "../../../components/shelfSelector"; declare var window: any; class BookList extends React.Component { constructor(props: BookListProps) { @@ -191,12 +190,11 @@ class BookList extends React.Component { } > -
+ {/*
-
+
*/} -
{ constructor(props: SidebarProps) { super(props); this.state = { index: 0, hoverIndex: -1, + hoverShelfIndex: -1, + isCollpaseShelf: false, + isOpenDelete: false, + shelfIndex: 0, isCollapsed: StorageUtil.getReaderConfig("isCollapsed") === "yes" || false, }; @@ -35,6 +40,9 @@ class Sidebar extends React.Component { handleHover = (index: number) => { this.setState({ hoverIndex: index }); }; + handleShelfHover = (index: number) => { + this.setState({ hoverShelfIndex: index }); + }; handleCollapse = (isCollapsed: boolean) => { this.setState({ isCollapsed }); this.props.handleCollapse(isCollapsed); @@ -43,6 +51,20 @@ class Sidebar extends React.Component { handleJump = (url: string) => { openExternalUrl(url); }; + handleDeleteShelf = () => { + if (this.state.shelfIndex < 1) return; + let shelfTitles = Object.keys(ShelfUtil.getShelf()); + //获取当前书架名 + let currentShelfTitle = shelfTitles[this.state.shelfIndex]; + ShelfUtil.removeShelf(currentShelfTitle); + this.setState({ shelfIndex: 0 }, () => { + this.props.handleShelfIndex(0); + this.props.handleMode("shelf"); + }); + }; + handleDeletePopup = (isOpenDelete: boolean) => { + this.setState({ isOpenDelete }); + }; render() { const renderSideMenu = () => { return sideMenu.map((item, index) => { @@ -50,7 +72,7 @@ class Sidebar extends React.Component {
  • { }} style={this.props.isCollapsed ? { width: 40, marginLeft: 15 } : {}} > - {this.state.index === index ? ( + {this.state.index === index && this.props.mode !== "shelf" ? (
    ) : null} - {this.state.hoverIndex === index ? ( + {this.state.hoverIndex === index && this.props.mode !== "shelf" ? (
    ) : null}
    { > @@ -111,36 +133,162 @@ class Sidebar extends React.Component { ); }); }; - return ( -
    -
    { - this.handleCollapse(!this.state.isCollapsed); - }} - > - -
    + const renderSideShelf = () => { + let shelfList = ShelfUtil.getShelf(); + let shelfTitle = Object.keys(shelfList); - { - this.handleJump("https://koodo.960960.xyz"); - }} - style={this.state.isCollapsed ? { display: "none" } : {}} - className="logo" - /> -
    -
      {renderSideMenu()}
    -
    -
    + return shelfTitle.map((item, index) => { + return ( +
  • { + this.props.handleShelfIndex(index); + if (index > 0) { + this.props.handleMode("shelf"); + } else { + this.props.handleMode("home"); + } + this.setState({ index: -1 }); + }} + onMouseEnter={() => { + this.handleShelfHover(index); + }} + onMouseLeave={() => { + this.handleShelfHover(-1); + }} + style={ + index === 0 + ? { display: "none" } + : this.props.isCollapsed + ? { width: 40, marginLeft: 15 } + : {} + } + > + {this.props.shelfIndex === index ? ( +
    + ) : null} + {this.state.hoverShelfIndex === index ? ( +
    + ) : null} +
    +
    + +
    + + + {this.props.t(item)} + +
    +
    • + ); + }); + }; + const deletePopupProps = { + mode: "shelf", + name: Object.keys(ShelfUtil.getShelf())[this.state.shelfIndex], + title: "Delete this shelf", + description: "This action will clear and remove this shelf", + handleDeletePopup: this.handleDeletePopup, + handleDeleteOpearion: this.handleDeleteShelf, + }; + return ( + <> + {" "} +
    +
    { + this.handleCollapse(!this.state.isCollapsed); + }} + > + +
    + + { + this.handleJump("https://koodo.960960.xyz"); + }} + style={this.state.isCollapsed ? { display: "none" } : {}} + className="logo" + /> +
    +
      {renderSideMenu()}
    +
    +
    我的书架
    + { + this.setState({ + isCollpaseShelf: !this.state.isCollpaseShelf, + }); + }} + style={ + this.state.isCollpaseShelf + ? { transform: "rotate(-90deg)" } + : {} + } + > +
    + + {!this.state.isCollpaseShelf && ( +
      {renderSideShelf()}
    + )} +
    +
    {" "} + {this.state.isOpenDelete && } + ); } } diff --git a/src/containers/sidebar/index.tsx b/src/containers/sidebar/index.tsx index 5960a511..25e4afd5 100644 --- a/src/containers/sidebar/index.tsx +++ b/src/containers/sidebar/index.tsx @@ -12,7 +12,11 @@ import { withTranslation } from "react-i18next"; import Sidebar from "./component"; const mapStateToProps = (state: stateType) => { - return { mode: state.sidebar.mode, isCollapsed: state.sidebar.isCollapsed }; + return { + mode: state.sidebar.mode, + isCollapsed: state.sidebar.isCollapsed, + shelfIndex: state.sidebar.shelfIndex, + }; }; const actionCreator = { handleMode, diff --git a/src/containers/sidebar/interface.tsx b/src/containers/sidebar/interface.tsx index 6da23b31..d8b5c9d8 100644 --- a/src/containers/sidebar/interface.tsx +++ b/src/containers/sidebar/interface.tsx @@ -3,6 +3,8 @@ import { RouteComponentProps } from "react-router"; export interface SidebarProps extends RouteComponentProps { mode: string; isCollapsed: boolean; + shelfIndex: number; + handleMode: (mode: string) => void; handleSearch: (isSearch: boolean) => void; handleCollapse: (isCollapsed: boolean) => void; @@ -15,5 +17,9 @@ export interface SidebarProps extends RouteComponentProps { export interface SidebarState { index: number; hoverIndex: number; + hoverShelfIndex: number; isCollapsed: boolean; + isCollpaseShelf: boolean; + shelfIndex: number; + isOpenDelete: boolean; } diff --git a/src/containers/sidebar/sidebar.css b/src/containers/sidebar/sidebar.css index ccc1c94f..3c60b3d7 100644 --- a/src/containers/sidebar/sidebar.css +++ b/src/containers/sidebar/sidebar.css @@ -14,8 +14,22 @@ position: relative; top: 85px; width: 210px; - height: 100%; - overflow: hidden; + height: calc(100% - 100px); + overflow-x: hidden; + overflow-y: scroll; +} +.side-menu-container-parent:hover::-webkit-scrollbar-thumb, +.side-menu-container-parent:active::-webkit-scrollbar-thumb, +.side-menu-container-parent:focus::-webkit-scrollbar-thumb { + display: block; + width: 1px; +} +.side-menu-container-parent::-webkit-scrollbar-thumb { + display: none; +} +.side-menu-container-parent::-webkit-scrollbar { + width: 2px; + height: 0.5rem; } .sidebar-list { margin-right: 5px; @@ -42,8 +56,13 @@ .side-menu-container { /* overflow: hidden; */ width: 100%; - height: 100%; - overflow-y: scroll; + padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */ + box-sizing: content-box; + position: relative; +} +.side-shelf-container { + /* overflow: hidden; */ + width: 100%; padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */ box-sizing: content-box; position: relative; @@ -51,7 +70,7 @@ .side-menu-icon { /* float: left; */ - font-size: 17px; + font-size: 22px; margin: 9px 12px 7px 18px; display: flex; justify-content: center; @@ -68,7 +87,7 @@ text-overflow: ellipsis; white-space: nowrap; margin-left: -20px; - margin-bottom: 10px; + margin-bottom: 3px; position: relative; bottom: 1px; overflow: hidden; @@ -99,7 +118,27 @@ white-space: nowrap; overflow-x: hidden; } - +.side-shelf-title { + font-size: 17px; + font-weight: 600; + margin-bottom: 10px; + margin-top: 10px; + display: inline-block; +} +.side-shelf-title-container { + width: 70%; + margin-left: 10%; + border-bottom: 1px solid #ccc; +} +.side-shelf-title-icon { + margin-top: 13px; + float: right; + font-weight: 500; + font-size: 14px; + transform-origin: center center; + transition: transform 0.1s ease; + cursor: pointer; +} .side-menu-selector-container { width: 100%; height: 39px;