discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

Change table of contents hide icon

Browse Source
This commit is contained in:
kvakazyambra 2023-09-05 00:50:11 +03:00
parent 23a9b9d98a
commit de194aaaf6
3 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/icons/hide-table-of-contents-2.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
<rect fill="#fff" x="0.999512" y="27" width="26" height="26" transform="rotate(-90 0.999512 27)"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M6 9.24437C6 8.55582 6.57935 8 7.29706 8C8.01477 8 8.59412 8.55582 8.59412 9.24437C8.59412 9.93293 8.01477 10.4887 7.29706 10.4887C6.57935 10.4887 6 9.93293 6 9.24437ZM6 14.222C6 13.5334 6.57935 12.9776 7.29706 12.9776C8.01477 12.9776 8.59412 13.5334 8.59412 14.222C8.59412 14.9105 8.01477 15.4663 7.29706 15.4663C6.57935 15.4663 6 14.9105 6 14.222ZM7.29706 17.9548C6.57935 17.9548 6 18.5189 6 19.1991C6 19.8794 6.588 20.4435 7.29706 20.4435C8.00612 20.4435 8.59412 19.8794 8.59412 19.1991C8.59412 18.5189 8.01477 17.9548 7.29706 17.9548ZM22.0024 20.0283H9.89648V18.3691H22.0024V20.0283ZM9.89648 15.0517H22.0024V13.3926H9.89648V15.0517ZM9.89648 10.0742V8.41504H22.0024V10.0742H9.89648Z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 953 B

4
src/components/TableOfContents/TableOfContents.module.scss
View File

@ -19,6 +19,10 @@
.TableOfContentsPrimaryButton { .TableOfContentsPrimaryButton {
left: auto; left: auto;
right: 40px; right: 40px;
&:hover {
filter: invert(1);
}
} }
.TableOfContentsPrimaryButtonLefted { .TableOfContentsPrimaryButtonLefted {

6
src/components/TableOfContents/TableOfContents.tsx
View File

@ -104,7 +104,11 @@ export const TableOfContents = (props: Props) => {
title={isVisible() ? t('Hide table of contents') : t('Show table of contents')} title={isVisible() ? t('Hide table of contents') : t('Show table of contents')}
> >
<Show when={isVisible()} fallback={<Icon name="show-table-of-contents" class={'icon'} />}> <Show when={isVisible()} fallback={<Icon name="show-table-of-contents" class={'icon'} />}>
<Icon name="hide-table-of-contents" class="icon" /> {props.variant === 'editor' ? (
<Icon name="hide-table-of-contents" class="icon" />
) : (
<Icon name="hide-table-of-contents-2" class="icon" />
)}
</Show> </Show>
</button> </button>
</div> </div>