Skip to content

Outliner sort nav style #105

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Xavier-LB merged 2 commits into from
Feb 10, 2025
Merged

Outliner sort nav style #105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2d91437
feat(tags): add alphabetical sort button to TagsPanel
Xavier-LB Feb 10, 2025
e6d719a
refactor(navigation): simplify navigation panel layout and styling
Xavier-LB Feb 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion resources/icons/grid-view.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
63 changes: 18 additions & 45 deletions resources/style/outliner.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,51 +215,24 @@
}

.navigation-buttons {
// display: flex;
// flex-wrap: wrap;
padding: 0.2rem;

.navigation-buttons-raw {
display: flex;

.navigation-button {
// flex: 1;

display: inline-block;
flex-direction: column;
background-color: var(--background-color);
border-radius: 10px;
width: 100%;
min-width: 50px;
cursor: pointer;
// max-width: 120px;

margin: 0.2rem;

&:hover {
background-color: var(--text-color-alt);
}

.navigation-button__icon {
.custom-icon {
width: 1.4rem;
height: 1.4rem;
}
}

.navigation-button__label {
}
}
}
display: flex;
overflow-x: auto; /* Allows horizontal scrolling if needed */
white-space: nowrap; /* Prevents text wrapping */
}

.navigation-button--checked {
box-shadow: inset 0 0 0 2px var(--accent-color);
background-color: none;
.navigation-button {
// flex: 0 0 auto; /* Prevents buttons from shrinking */
width: 100%; /* Square width */
// height: 100%; /* Square height */
display: flex;
align-items: center;
justify-content: center;
margin: 2px;
transition: border-color 0.3s;
border-radius: 10px;
}

.navigation-button__icon {
.custom-icon {
color: var(--accent-color);
}
}
}
.navigation-button--checked {
background-color: var(--background-color);
border-radius: 10px;
}
65 changes: 31 additions & 34 deletions src/frontend/containers/Outliner/NavigationPanel/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export const NavigationButton = ({
checked,
}: NavigationButtonProps) => (
<button
title={text}
className={'navigation-button' + (checked ? ' navigation-button--checked' : '')}
tabIndex={-1}
aria-checked={checked}
Expand All @@ -39,40 +40,36 @@ const TagsPanel = observer((props: Partial<MultiSplitPaneProps>) => {

return (
<div className="navigation-buttons">
<div className="navigation-buttons-raw">
<NavigationButton
icon={IconSet.VIEW_LIST}
onClick={uiStore.setMethodList}
checked={uiStore.isList}
text="List"
/>
<NavigationButton
icon={IconSet.VIEW_GRID}
onClick={uiStore.setMethodMasonry}
checked={uiStore.isMasonry}
text="Grid"
/>
</div>
<div className="navigation-buttons-raw">
<NavigationButton
icon={IconSet.FACE_SMILING}
onClick={uiStore.setMethodFaces}
checked={uiStore.isFaces}
text="Faces"
/>
<NavigationButton
icon={IconSet.WORLD}
onClick={uiStore.setMethodMap}
checked={uiStore.isMap}
text="Map"
/>
<NavigationButton
icon={IconSet.FILTER_DATE}
onClick={uiStore.setMethodCalendar}
checked={uiStore.isCalendar}
text="Calendar"
/>
</div>
<NavigationButton
icon={IconSet.VIEW_LIST}
onClick={uiStore.setMethodList}
checked={uiStore.isList}
text="List"
/>
<NavigationButton
icon={IconSet.VIEW_GRID}
onClick={uiStore.setMethodMasonry}
checked={uiStore.isMasonry}
text="Grid"
/>
<NavigationButton
icon={IconSet.FACE_SMILING}
onClick={uiStore.setMethodFaces}
checked={uiStore.isFaces}
text="Faces"
/>
<NavigationButton
icon={IconSet.WORLD}
onClick={uiStore.setMethodMap}
checked={uiStore.isMap}
text="Map"
/>
<NavigationButton
icon={IconSet.FILTER_DATE}
onClick={uiStore.setMethodCalendar}
checked={uiStore.isCalendar}
text="Calendar"
/>
</div>
);
});
Expand Down
23 changes: 23 additions & 0 deletions src/frontend/containers/Outliner/TagsPanel/TagsTree.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -535,6 +535,22 @@ const TagsTree = observer((props: Partial<MultiSplitPaneProps>) => {
}
});

// NEW: Action to sort the tags alphabetically (recursively)
const handleSortAlphabetically = useAction(() => {
// Recursive sorting function
const sortTags = (tags: ClientTag[]) => {
// First, sort children of each tag
tags.forEach(tag => {
if (tag.subTags && tag.subTags.length > 0) {
sortTags(tag.subTags);
}
});
// Then sort the array in place
tags.sort((a, b) => a.name.localeCompare(b.name));
};
sortTags(tagStore.root.subTags);
});

const handleBranchOnKeyDown = useAction(
(event: React.KeyboardEvent<HTMLLIElement>, nodeData: ClientTag, treeData: ITreeData) =>
createBranchOnKeyDown(
Expand Down Expand Up @@ -597,6 +613,13 @@ const TagsTree = observer((props: Partial<MultiSplitPaneProps>) => {
tooltip="Add a new tag"
/>
)}
{/* NEW: Sort button */}
<ToolbarButton
icon={IconSet.SORT} // make sure IconSet.SORT exists, or replace with an existing sort icon
text="Sort"
onClick={handleSortAlphabetically}
tooltip="Sort tags alphabetically"
/>
</Toolbar>
}
{...props}
Expand Down