gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 15:19:01 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

style/launcher: tweak the left pane toggle button

Browse Source
This commit is contained in:
Adorian Doran 2025-10-13 22:07:05 +03:00
parent 6fd37c4c8d
commit fba51f2cd0
2 changed files with 28 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
apps/client/src/widgets/buttons/left_pane_toggle.css Normal file
View File

@ -0,0 +1,25 @@
@keyframes left-pane-toggle-button-expand {
from {
transform: rotate(0deg);
} to {
transform: rotate(180deg);
}
}
@keyframes left-pane-toggle-button-collapse {
from {
transform: rotate(180deg);
} to {
transform: rotate(360deg);
}
}
.layout-vertical .left-pane-toggle-button.action-collapse::before {
transform: rotate(360deg);
animation: left-pane-toggle-button-collapse 250ms linear;
}
.layout-vertical .left-pane-toggle-button.action-expand::before {
transform: rotate(180deg);
animation: left-pane-toggle-button-expand 250ms linear;
}

7
apps/client/src/widgets/buttons/left_pane_toggle.tsx
View File

@ -1,3 +1,4 @@
import "./left_pane_toggle.css";
import { useEffect, useState } from "preact/hooks";
import ActionButton from "../react/ActionButton";
import options from "../../services/options";
@ -18,12 +19,10 @@ export default function LeftPaneToggle({ isHorizontalLayout }: { isHorizontalLay
return (
<ActionButton
className={`${isHorizontalLayout ? "toggle-button" : "launcher-button"}`}
className={`${isHorizontalLayout ? "toggle-button" : "launcher-button"} left-pane-toggle-button ${currentLeftPaneVisible ? "action-collapse" : "action-expand"}`}
text={currentLeftPaneVisible ? t("left_pane_toggle.hide_panel") : t("left_pane_toggle.show_panel")}
triggerCommand={currentLeftPaneVisible ? "hideLeftPane" : "showLeftPane"}
icon={isHorizontalLayout
? "bx bx-sidebar"
: (currentLeftPaneVisible ? "bx bx-chevrons-left" : "bx bx-chevrons-right" )}
icon={isHorizontalLayout ? "bx bx-sidebar" : "bx bx-chevrons-left"}
/>
)
}