zadam/trilium
1
1
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-10 05:40:49 +08:00
Code Issues Projects Releases Packages Wiki Activity

chore(react): improve style of buttons

Browse source
This commit is contained in:
Elian Doran 2025-10-04 13:44:11 +03:00
parent 845c76fc42
commit e6e9cd3f35
No known key found for this signature in database
4 changed files with 6 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
apps/client/src/widgets/note_map.ts
View file

@ -53,15 +53,6 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
this.$fixNodesButton = this.$widget.find(".fixnodes-type-switcher > button"); this.$fixNodesButton = this.$widget.find(".fixnodes-type-switcher > button");
new ResizeObserver(() => this.setDimensions()).observe(this.$container[0]); new ResizeObserver(() => this.setDimensions()).observe(this.$container[0]);
// Reading the status of the Drag nodes Ui element. Changing it´s color when activated.
// Reading Force value of the link distance.
this.$fixNodesButton.on("click", async (event) => {
this.fixNodes = !this.fixNodes;
this.$fixNodesButton.toggleClass("toggled", this.fixNodes);
});
super.doRender();
} }
async refreshWithNote(note: FNote) { async refreshWithNote(note: FNote) {

5
apps/client/src/widgets/note_map/NoteMap.css
View file

@ -11,11 +11,6 @@
border-radius: .2rem; border-radius: .2rem;
} }
.fixnodes-type-switcher button.toggled {
background: var(--active-item-background-color);
color: var(--active-item-text-color);
}
/* Start of styling the slider */ /* Start of styling the slider */
.fixnodes-type-switcher input[type="range"] { .fixnodes-type-switcher input[type="range"] {

5
apps/client/src/widgets/note_map/NoteMap.tsx
View file

@ -105,8 +105,9 @@ export default function NoteMap({ note, widgetMode, parentRef }: NoteMapProps) {
<ActionButton <ActionButton
icon="bx bx-lock-alt" icon="bx bx-lock-alt"
text={t("note_map.fix-nodes")} text={t("note_map.fix-nodes")}
className={fixNodes ? "toggled" : ""} className={fixNodes ? "active" : ""}
onClick={() => setFixNodes(!fixNodes)} onClick={() => setFixNodes(!fixNodes)}
frame
/> />
</div> </div>
@ -126,7 +127,7 @@ function MapTypeSwitcher({ icon, text, type, currentMapType, setMapType }: {
return ( return (
<ActionButton <ActionButton
icon={icon} text={text} icon={icon} text={text}
disabled={currentMapType === type} active={currentMapType === type}
onClick={() => setMapType(type)} onClick={() => setMapType(type)}
frame frame
/> />

5
apps/client/src/widgets/react/ActionButton.tsx
View file

@ -12,10 +12,11 @@ export interface ActionButtonProps {
triggerCommand?: CommandNames; triggerCommand?: CommandNames;
noIconActionClass?: boolean; noIconActionClass?: boolean;
frame?: boolean; frame?: boolean;
active?: boolean;
disabled?: boolean; disabled?: boolean;
} }
export default function ActionButton({ text, icon, className, onClick, triggerCommand, titlePosition, noIconActionClass, frame, disabled }: ActionButtonProps) { export default function ActionButton({ text, icon, className, onClick, triggerCommand, titlePosition, noIconActionClass, frame, active, disabled }: ActionButtonProps) {
const buttonRef = useRef<HTMLButtonElement>(null); const buttonRef = useRef<HTMLButtonElement>(null);
const [ keyboardShortcut, setKeyboardShortcut ] = useState<string[]>(); const [ keyboardShortcut, setKeyboardShortcut ] = useState<string[]>();
@ -33,7 +34,7 @@ export default function ActionButton({ text, icon, className, onClick, triggerCo
return <button return <button
ref={buttonRef} ref={buttonRef}
class={`${className ?? ""} ${!noIconActionClass ? "icon-action" : "btn"} ${icon} ${frame ? "btn btn-primary" : ""} ${disabled ? "disabled" : ""}`} class={`${className ?? ""} ${!noIconActionClass ? "icon-action" : "btn"} ${icon} ${frame ? "btn btn-primary" : ""} ${disabled ? "disabled" : ""} ${active ? "active" : ""}`}
onClick={onClick} onClick={onClick}
data-trigger-command={triggerCommand} data-trigger-command={triggerCommand}
disabled={disabled} disabled={disabled}