Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-22 01:20:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

🎨 sort https://github.com/siyuan-note/siyuan/issues/7536

Browse source
This commit is contained in:
Vanessa 2023-07-03 12:25:02 +08:00
parent e520e0aa18
commit a541961ee5
6 changed files with 89 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

3
app/appearance/icons/ant/icon.js
View file

@ -1,5 +1,8 @@
document.body.insertAdjacentHTML('afterbegin', `<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id="iconDrag" viewBox="0 0 32 32">
<path d="M6.647 5.61c0.354 0.208 0.78 0.331 1.235 0.331 1.365 0 2.471-1.106 2.471-2.471 0-0.91-0.492-1.705-1.224-2.133l-0.012-0.006c-0.354-0.208-0.78-0.331-1.235-0.331-1.365 0-2.471 1.106-2.471 2.471 0 0.91 0.492 1.705 1.224 2.133l0.012 0.006zM6.647 18.14c0.354 0.208 0.78 0.331 1.235 0.331 1.365 0 2.471-1.106 2.471-2.471 0-0.91-0.492-1.705-1.224-2.133l-0.012-0.006c-0.354-0.208-0.78-0.331-1.235-0.331-1.365 0-2.471 1.106-2.471 2.471 0 0.91 0.492 1.705 1.224 2.133l0.012 0.006zM21.647 3.471c0 1.364 1.106 2.471 2.471 2.471s2.471-1.106 2.471-2.471v0c0-1.364-1.106-2.471-2.471-2.471s-2.471 1.106-2.471 2.471v0zM21.647 16c0 1.364 1.106 2.471 2.471 2.471s2.471-1.106 2.471-2.471v0c0-1.364-1.106-2.471-2.471-2.471s-2.471 1.106-2.471 2.471v0zM6.647 30.669c0.354 0.208 0.78 0.331 1.235 0.331 1.365 0 2.471-1.106 2.471-2.471 0-0.91-0.492-1.705-1.224-2.133l-0.012-0.006c-0.354-0.208-0.78-0.331-1.235-0.331-1.365 0-2.471 1.106-2.471 2.471 0 0.91 0.492 1.705 1.224 2.133l0.012 0.006zM21.647 28.529c0 1.364 1.106 2.471 2.471 2.471s2.471-1.106 2.471-2.471v0c0-1.364-1.106-2.471-2.471-2.471s-2.471 1.106-2.471 2.471v0z"></path>
</symbol>
<symbol id="iconNumber" viewBox="0 0 32 32">
<path d="M30.674 11.19c0.179 0 0.326-0.147 0.326-0.326v-2.446c0-0.179-0.147-0.326-0.326-0.326h-6.685v-6.766c0-0.179-0.147-0.326-0.326-0.326h-2.609c-0.179 0-0.326 0.147-0.326 0.326v6.766h-9.293v-6.766c0-0.179-0.147-0.326-0.326-0.326h-2.609c-0.179 0-0.326 0.147-0.326 0.326v6.766h-6.848c-0.179 0-0.326 0.147-0.326 0.326v2.446c0 0.179 0.147 0.326 0.326 0.326h6.848v9.62h-6.848c-0.179 0-0.326 0.147-0.326 0.326v2.446c0 0.179 0.147 0.326 0.326 0.326h6.848v6.766c0 0.179 0.147 0.326 0.326 0.326h2.609c0.179 0 0.326-0.147 0.326-0.326v-6.766h9.293v6.766c0 0.179 0.147 0.326 0.326 0.326h2.609c0.179 0 0.326-0.147 0.326-0.326v-6.766h6.685c0.179 0 0.326-0.147 0.326-0.326v-2.446c0-0.179-0.147-0.326-0.326-0.326h-6.685v-9.62h6.685zM20.728 20.81h-9.293v-9.62h9.293v9.62z"></path>
</symbol>

6
app/appearance/icons/index.html
View file

@ -28,6 +28,12 @@
<body>
<h2>SiYuan</h2>
<div class="fn__clear">
<div>
<svg>
<use xlink:href="#iconDrag"></use>
</svg>
iconDrag
</div>
<div>
<svg>
<use xlink:href="#iconCalendar"></use>

3
app/appearance/icons/material/icon.js
View file

@ -1,5 +1,8 @@
document.body.insertAdjacentHTML('afterbegin', `<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id="iconDrag" viewBox="0 0 32 32">
<path d="M14.125 27.25c0 2.063-1.688 3.75-3.75 3.75s-3.75-1.688-3.75-3.75 1.688-3.75 3.75-3.75 3.75 1.688 3.75 3.75zM10.375 12.25c-2.063 0-3.75 1.688-3.75 3.75s1.688 3.75 3.75 3.75 3.75-1.688 3.75-3.75-1.688-3.75-3.75-3.75zM10.375 1c-2.063 0-3.75 1.688-3.75 3.75s1.688 3.75 3.75 3.75 3.75-1.688 3.75-3.75-1.688-3.75-3.75-3.75zM21.625 8.5c2.063 0 3.75-1.688 3.75-3.75s-1.688-3.75-3.75-3.75-3.75 1.688-3.75 3.75 1.688 3.75 3.75 3.75zM21.625 12.25c-2.063 0-3.75 1.688-3.75 3.75s1.688 3.75 3.75 3.75 3.75-1.688 3.75-3.75-1.688-3.75-3.75-3.75zM21.625 23.5c-2.063 0-3.75 1.688-3.75 3.75s1.688 3.75 3.75 3.75 3.75-1.688 3.75-3.75-1.688-3.75-3.75-3.75z"></path>
</symbol>
<symbol id="iconNumber" viewBox="0 0 32 32">
<path d="M31 12.25v-3.75h-7.5v-7.5h-3.75v7.5h-7.5v-7.5h-3.75v7.5h-7.5v3.75h7.5v7.5h-7.5v3.75h7.5v7.5h3.75v-7.5h7.5v7.5h3.75v-7.5h7.5v-3.75h-7.5v-7.5h7.5zM19.75 19.75h-7.5v-7.5h7.5v7.5z"></path>
</symbol>

10
app/src/protyle/render/av/action.ts
View file

@ -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);

65
app/src/protyle/render/av/openMenuPanel.ts
View file

@ -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", `<div class="av__panel">${html}</div>`);
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) => {
<span class="b3-menu__accelerator">${data.filters.length}</span>
<svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
</button>
<button class="b3-menu__item">
<button class="b3-menu__item" data-type="goSorts">
<svg class="b3-menu__icon"><use xlink:href="#iconSort"></use></svg>
<span class="b3-menu__label">${window.siyuan.languages.sort}</span>
<span class="b3-menu__accelerator">${data.sorts.length}</span>
@ -178,6 +196,41 @@ const getConfigHTML = (data: IAV, tabRect: DOMRect) => {
</div>`;
};
const getSortsHTML = (data: IAV, tabRect: DOMRect) => {
let html = "";
const genSortItem = (id: string) => {
let sortHTML = ''
data.columns.forEach((item) => {
sortHTML += `<option value="${item.id}" ${item.id === id ? "checked" : ""}>${item.name}</option>`
})
}
data.sorts.forEach((item: IAVSort) => {
html += `<button class="b3-menu__item">
<svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg>
<select>
${genSortItem(item.column)}
</select>
<select>
<option value="ASC" ${item.order === "ASC" ? "checked" : ""}>${window.siyuan.languages.fileNameASC}</option>
<option value="DESC" ${item.order === "DESC" ? "checked" : ""}>${window.siyuan.languages.fileNameDESC}</option>
</select>
<svg class="b3-menu__action" data-type="removeSort"><use xlink:href="#iconTrashcan"></use></svg>
</button>`;
});
return `<div class="b3-dialog__scrim" data-type="close"></div>
<div class="b3-menu" style="right:${window.innerWidth - tabRect.right}px;top:${tabRect.bottom}px">
${html}
<button class="b3-menu__item" data-type="addSort">
<svg class="b3-menu__icon"><use xlink:href="#iconAdd"></use></svg>
<span class="b3-menu__label">${window.siyuan.languages.new}</span>
</button>
<button class="b3-menu__item${html ? "" : " fn__none"}" data-type="removeSorts">
<svg class="b3-menu__icon"><use xlink:href="#iconTrashcan"></use></svg>
<span class="b3-menu__label">${window.siyuan.languages.delete}</span>
</button>
</div>`;
}
const getPropertiesHTML = (data: IAV, tabRect: DOMRect) => {
let showHTML = "";
let hideHTML = "";
@ -212,9 +265,11 @@ ${hideHTML}`;
}
return `<div class="b3-dialog__scrim" data-type="close"></div>
<div class="b3-menu" style="right:${window.innerWidth - tabRect.right}px;top:${tabRect.bottom}px">
<button class="b3-menu__item" data-type="goConfig">
<svg class="b3-menu__icon"><use xlink:href="#iconLeft"></use></svg>
<span class="b3-menu__label">${window.siyuan.languages.back}</span>
<button class="b3-menu__item" data-type="nobg">
<span class="block__icon" style="padding: 8px;margin-left: -4px;" data-type="goConfig">
<svg><use xlink:href="#iconLeft"></use></svg>
</span>
<span class="b3-menu__label ft__center">${window.siyuan.languages.attr}</span>
<svg class="b3-menu__action" data-type="close" style="opacity: 1"><use xlink:href="#iconCloseRound"></use></svg>
</button>
<button class="b3-menu__separator"></button>

7
app/src/types/index.d.ts vendored
View file

@ -826,7 +826,12 @@ interface IBazaarItem {
interface IAV {
columns: IAVColumn[],
filters: [],
sorts: [],
sorts: IAVSort[],
}
interface IAVSort {
column: string,
order: "ASC" | "DESC"
}
interface IAVColumn {