mirror of https://github.com/fantasticit/think.git
client: fix tocs detect
This commit is contained in:
parent
fa40d87aa4
commit
bbaeeebf3f
|
@ -1,8 +1,7 @@
|
||||||
.wrapper {
|
.wrapper {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
padding-top: 2rem;
|
padding-top: 2rem;
|
||||||
padding-right: 1rem;
|
padding-left: 32px;
|
||||||
padding-left: 2rem;
|
|
||||||
|
|
||||||
.dot {
|
.dot {
|
||||||
font-size: 8px;
|
font-size: 8px;
|
||||||
|
|
|
@ -39,7 +39,7 @@ const Toc = ({ toc, collapsed }) => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const TOCS_WIDTH = 198; // 目录展开的宽度
|
const TOCS_WIDTH = 156 + 16 * 2; // 目录展开的宽度
|
||||||
|
|
||||||
export const Tocs: React.FC<{ editor: Editor; getContainer: () => HTMLElement }> = ({ editor, getContainer }) => {
|
export const Tocs: React.FC<{ editor: Editor; getContainer: () => HTMLElement }> = ({ editor, getContainer }) => {
|
||||||
const [collapsed, toggleCollapsed] = useToggle(true);
|
const [collapsed, toggleCollapsed] = useToggle(true);
|
||||||
|
@ -52,7 +52,7 @@ export const Tocs: React.FC<{ editor: Editor; getContainer: () => HTMLElement }>
|
||||||
if (!el) return;
|
if (!el) return;
|
||||||
|
|
||||||
const handler = () => {
|
const handler = () => {
|
||||||
const diffWidth = el.offsetWidth - (el.firstChild as HTMLDivElement).offsetWidth;
|
const diffWidth = (el.offsetWidth - (el.firstChild as HTMLDivElement).offsetWidth) / 2;
|
||||||
toggleCollapsed(diffWidth <= TOCS_WIDTH);
|
toggleCollapsed(diffWidth <= TOCS_WIDTH);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -130,7 +130,9 @@ export const Tocs: React.FC<{ editor: Editor; getContainer: () => HTMLElement }>
|
||||||
railTheme={collapsed ? 'muted' : 'tertiary'}
|
railTheme={collapsed ? 'muted' : 'tertiary'}
|
||||||
maxHeight={'calc(100vh - 360px)'}
|
maxHeight={'calc(100vh - 360px)'}
|
||||||
getContainer={getContainer}
|
getContainer={getContainer}
|
||||||
maxWidth={collapsed ? 56 : 150}
|
style={{
|
||||||
|
width: collapsed ? 56 : 156,
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{collapsed
|
{collapsed
|
||||||
? headings.map((toc) => {
|
? headings.map((toc) => {
|
||||||
|
|
Loading…
Reference in New Issue