diff --git a/app/appearance/icons/ant/icon.js b/app/appearance/icons/ant/icon.js index 555d9212e..34d2ba4f2 100644 --- a/app/appearance/icons/ant/icon.js +++ b/app/appearance/icons/ant/icon.js @@ -1,5 +1,8 @@ document.body.insertAdjacentHTML('afterbegin', ` + + + diff --git a/app/appearance/icons/index.html b/app/appearance/icons/index.html index c23c262a6..e140709ed 100644 --- a/app/appearance/icons/index.html +++ b/app/appearance/icons/index.html @@ -28,6 +28,12 @@

SiYuan

+
+ + + + iconDrag +
diff --git a/app/appearance/icons/material/icon.js b/app/appearance/icons/material/icon.js index 033913d21..27d448668 100644 --- a/app/appearance/icons/material/icon.js +++ b/app/appearance/icons/material/icon.js @@ -1,5 +1,8 @@ document.body.insertAdjacentHTML('afterbegin', ` + + + diff --git a/app/src/protyle/render/av/action.ts b/app/src/protyle/render/av/action.ts index f011c99ca..57d90458a 100644 --- a/app/src/protyle/render/av/action.ts +++ b/app/src/protyle/render/av/action.ts @@ -83,6 +83,15 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle event.stopPropagation(); return true; } + + const sortsElement = hasClosestByAttribute(event.target, "data-type", "av-sort"); + if (sortsElement) { + openMenuPanel(protyle, blockElement, "sorts"); + event.preventDefault(); + event.stopPropagation(); + return true; + } + const cellHeaderElement = hasClosestByClassName(event.target, "av__cellheader"); if (cellHeaderElement) { showHeaderCellMenu(protyle, blockElement, cellHeaderElement.parentElement); @@ -90,6 +99,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle event.stopPropagation(); return true; } + const cellElement = hasClosestByClassName(event.target, "av__cell"); if (cellElement && !cellElement.parentElement.classList.contains("av__row--header")) { popTextCell(protyle, cellElement); diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts index f4cc69623..e7d1dcbc8 100644 --- a/app/src/protyle/render/av/openMenuPanel.ts +++ b/app/src/protyle/render/av/openMenuPanel.ts @@ -3,7 +3,7 @@ import {fetchPost} from "../../../util/fetch"; import {addCol} from "./addCol"; import {getColIconByType} from "./col"; -export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type: "properties" | "config" = "config") => { +export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type: "properties" | "config" | "sorts" = "config") => { let avMenuPanel = document.querySelector(".av__panel"); if (avMenuPanel) { avMenuPanel.remove(); @@ -19,6 +19,8 @@ export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type html = getConfigHTML(data, tabRect); } else if (type === "properties") { html = getPropertiesHTML(data, tabRect); + } else if (type === "sorts") { + html = getSortsHTML(data, tabRect); } document.body.insertAdjacentHTML("beforeend", `
${html}
`); avMenuPanel = document.querySelector(".av__panel"); @@ -39,6 +41,22 @@ export const openMenuPanel = (protyle: IProtyle, blockElement: HTMLElement, type avMenuPanel.innerHTML = getPropertiesHTML(data, tabRect); event.stopPropagation(); break; + } else if (type === "goSorts") { + avMenuPanel.innerHTML = getSortsHTML(data, tabRect); + event.stopPropagation(); + break; + } else if (type === "removeSorts") { + // TODO + event.stopPropagation(); + break; + } else if (type === "addSort") { + // TODO + event.stopPropagation(); + break; + } else if (type === "removeSort") { + // TODO + event.stopPropagation(); + break; } else if (type === "newCol") { avMenuPanel.remove(); const addMenu = addCol(protyle, blockElement); @@ -163,7 +181,7 @@ const getConfigHTML = (data: IAV, tabRect: DOMRect) => { ${data.filters.length} -
`; }; +const getSortsHTML = (data: IAV, tabRect: DOMRect) => { + let html = ""; + const genSortItem = (id: string) => { + let sortHTML = '' + data.columns.forEach((item) => { + sortHTML += `` + }) + } + data.sorts.forEach((item: IAVSort) => { + html += ``; + }); + return `
+
+ ${html} + + +
`; +} + const getPropertiesHTML = (data: IAV, tabRect: DOMRect) => { let showHTML = ""; let hideHTML = ""; @@ -212,9 +265,11 @@ ${hideHTML}`; } return `
- diff --git a/app/src/types/index.d.ts b/app/src/types/index.d.ts index dfbe7ffb6..8c6529f62 100644 --- a/app/src/types/index.d.ts +++ b/app/src/types/index.d.ts @@ -37,7 +37,7 @@ type TEventBus = "ws-main" | "open-menu-blockref" | "open-menu-fileannotationref" | "open-menu-tag" | "open-menu-link" | "open-menu-image" | "open-menu-av" | "open-menu-content" | "loaded-protyle" -type TAVCol = "text" | "date" | "number" | "relation" | "rollup" | "select" | "block"| "mSelect" +type TAVCol = "text" | "date" | "number" | "relation" | "rollup" | "select" | "block" | "mSelect" declare module "blueimp-md5" @@ -826,7 +826,12 @@ interface IBazaarItem { interface IAV { columns: IAVColumn[], filters: [], - sorts: [], + sorts: IAVSort[], +} + +interface IAVSort { + column: string, + order: "ASC" | "DESC" } interface IAVColumn {