From ef3b10affa40e121e14f33b884ac97559c1a4d0c Mon Sep 17 00:00:00 2001 From: oda <934854676@qq.com> Date: Sun, 21 Jan 2024 10:27:01 +0800 Subject: [PATCH] add: icon in sorting --- src/ui/obsidian/help-page/basic-tutorial.tsx | 2 +- src/ui/react-view/icon/Down01.tsx | 25 ++++++++++ src/ui/react-view/icon/Down10.tsx | 13 +++++ src/ui/react-view/icon/DownAZ.tsx | 25 ++++++++++ src/ui/react-view/icon/DownZA.tsx | 13 +++++ src/ui/react-view/icon/Minus.tsx | 9 ++++ src/ui/react-view/task-table-view.tsx | 48 ++++++++++++------- .../react-view/view-template/data-table.tsx | 4 +- 8 files changed, 119 insertions(+), 20 deletions(-) create mode 100644 src/ui/react-view/icon/Down01.tsx create mode 100644 src/ui/react-view/icon/Down10.tsx create mode 100644 src/ui/react-view/icon/DownAZ.tsx create mode 100644 src/ui/react-view/icon/DownZA.tsx create mode 100644 src/ui/react-view/icon/Minus.tsx diff --git a/src/ui/obsidian/help-page/basic-tutorial.tsx b/src/ui/obsidian/help-page/basic-tutorial.tsx index d32193c..b2adb4f 100644 --- a/src/ui/obsidian/help-page/basic-tutorial.tsx +++ b/src/ui/obsidian/help-page/basic-tutorial.tsx @@ -52,7 +52,7 @@ export const BasicTutorial = (props: { const blockTldrShowStyle = props.tldrProps?.blockTldrShowStyle; const inlineTldrOmitStyle = props.tldrProps?.inlineTldrOmitStyle; const inlineTldrShowStyle = props.tldrProps?.inlineTldrShowStyle; - console.log(props.tldrProps) + // console.log(props.tldrProps) return <> diff --git a/src/ui/react-view/icon/Down01.tsx b/src/ui/react-view/icon/Down01.tsx new file mode 100644 index 0000000..414ada5 --- /dev/null +++ b/src/ui/react-view/icon/Down01.tsx @@ -0,0 +1,25 @@ +import React from "react"; + +export function Down01() { + return + + + + + + +} + +export function Up01() { + return + + + + + + +} diff --git a/src/ui/react-view/icon/Down10.tsx b/src/ui/react-view/icon/Down10.tsx new file mode 100644 index 0000000..4291d54 --- /dev/null +++ b/src/ui/react-view/icon/Down10.tsx @@ -0,0 +1,13 @@ +import React from "react"; + +export function Down10() { + return + + + + + + +} diff --git a/src/ui/react-view/icon/DownAZ.tsx b/src/ui/react-view/icon/DownAZ.tsx new file mode 100644 index 0000000..e7a4758 --- /dev/null +++ b/src/ui/react-view/icon/DownAZ.tsx @@ -0,0 +1,25 @@ +import React from "react"; + +export function DownAZ() { + return + + + + + + +} + +export function UpAZ() { + return + + + + + + +} diff --git a/src/ui/react-view/icon/DownZA.tsx b/src/ui/react-view/icon/DownZA.tsx new file mode 100644 index 0000000..f480db1 --- /dev/null +++ b/src/ui/react-view/icon/DownZA.tsx @@ -0,0 +1,13 @@ +import React from "react"; + +export function DownZA() { + return + + + + + + +} diff --git a/src/ui/react-view/icon/Minus.tsx b/src/ui/react-view/icon/Minus.tsx new file mode 100644 index 0000000..39a0f6d --- /dev/null +++ b/src/ui/react-view/icon/Minus.tsx @@ -0,0 +1,9 @@ +import React from "react"; + +export function Minus() { + return + + +} diff --git a/src/ui/react-view/task-table-view.tsx b/src/ui/react-view/task-table-view.tsx index 841fe5e..4b4c2c2 100644 --- a/src/ui/react-view/task-table-view.tsx +++ b/src/ui/react-view/task-table-view.tsx @@ -26,6 +26,9 @@ import {appendBoldText} from "../common/html-template"; import {notify} from "../../utils/o-notice"; import {getIconByWorkflow, getStickyHeaderStyle} from "./style-def"; import {loopIndex} from "./project-filter"; +import {Minus} from "./icon/Minus"; +import {DownAZ, UpAZ} from "./icon/DownAZ"; +import {Down01, Up01} from "./icon/Down01"; export const taskCheckBoxMargin = {marginLeft: 3}; @@ -188,9 +191,15 @@ export function getDefaultTableStyleGetters(minSummaryWidth: number | string = 5 return {cellStyleGetter, headStyleGetter}; } -function getSortSymbol(method: TableSortMethod) { - return method === TableSortMethod.Ascending ? "↑" : - method === TableSortMethod.Descending ? "↓" : "-"; +function getNameSortSymbol(method: TableSortMethod) { + return method === TableSortMethod.Ascending ? : + method === TableSortMethod.Descending ? : ; +} + +function getColumnSortSymbol(method: TableSortMethod) { + return method === TableSortMethod.Ascending ? : + method === TableSortMethod.Descending ? : ; + } export function TaskTableView({displayWorkflows, filteredTasks}: { @@ -298,20 +307,24 @@ export function TaskTableView({displayWorkflows, filteredTasks}: {
- {columnSort.sortBy === TableSortBy.Name ? getSortSymbol(columnSort.method) : getSortSymbol(TableSortMethod.Appearance)} + {columnSort.sortBy === TableSortBy.Name ? getNameSortSymbol(columnSort.method) : getNameSortSymbol(TableSortMethod.Appearance)}
, ...(getSettings()?.table_steps_shown ? displayStepNames.map( - (k, index) =>
+ (k, index) =>
{k}
-
+
{ columnSort.sortBy === TableSortBy.Step && columnSort.column === index + 1 ? - getSortSymbol(columnSort.method) - : getSortSymbol(TableSortMethod.Appearance) + getColumnSortSymbol(columnSort.method) + : getColumnSortSymbol(TableSortMethod.Appearance) }
@@ -353,13 +366,7 @@ export function TaskTableView({displayWorkflows, filteredTasks}: { setSearchText("") }} iconName={"x-circle"}/> - {/**/} - {/* */} - {/* */} - {/**/} +

@@ -392,15 +399,21 @@ export function TaskTableView({displayWorkflows, filteredTasks}: { ) + function setSortToName() { const prevMethod = columnSort.sortBy; // Loop + const nextNameSortMethod = loopIndex(columnSort.method + 1, totalSortMethods); setColumnSort({ sortBy: TableSortBy.Name, column: undefined, - method: prevMethod === TableSortBy.Name ? loopIndex(columnSort.method + 1, totalSortMethods) : TableSortMethod.Ascending + method: prevMethod === TableSortBy.Name ? nextNameSortMethod : TableSortMethod.Ascending }) - setSettingsValueAndSave(plugin, "table_column_sorting", columnSort.method + 1) + setSettingsValueAndSave(plugin, "table_column_sorting", nextNameSortMethod) + } + + function resetNameSortMethod() { + setSettingsValueAndSave(plugin, "table_column_sorting", TableSortMethod.Appearance) } function setSortToColumn(index: number) { @@ -412,6 +425,7 @@ export function TaskTableView({displayWorkflows, filteredTasks}: { method: prevMethod === TableSortBy.Name || columnSort.column !== index ? TableSortMethod.Ascending : loopIndex(columnSort.method + 1, totalSortMethods) }) + resetNameSortMethod() } function handleShowCompletedChange() { diff --git a/src/ui/react-view/view-template/data-table.tsx b/src/ui/react-view/view-template/data-table.tsx index 53db54a..7adf79d 100644 --- a/src/ui/react-view/view-template/data-table.tsx +++ b/src/ui/react-view/view-template/data-table.tsx @@ -55,9 +55,9 @@ export const DataTable = ({ {/*Draw header at the end, so it can cover body view. Or else the body content will be rendered above headers. */} - {headers.map((header: string, index) => { + {headers.map((header: IRenderable, index) => { const headerStyle = thStyleGetter ? thStyleGetter(index) : thStyle; - return + return

{ onHeaderClicked?.(index) }}>{header}