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

🎨 https://github.com/siyuan-note/siyuan/issues/9371

Browse source
This commit is contained in:
Vanessa 2023-10-09 11:58:23 +08:00
parent 44e3091826
commit a0829a75dd
4 changed files with 18 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

4
app/src/assets/scss/business/_av.scss
View file

@ -302,9 +302,11 @@
padding-bottom: 4px; padding-bottom: 4px;
float: left; float: left;
svg { .icon {
width: 12px; width: 12px;
flex-shrink: 0; flex-shrink: 0;
margin-right: 6px;
margin-left: -5px;
} }
} }

18
app/src/protyle/render/av/filter.ts
View file

@ -6,6 +6,7 @@ import {setPosition} from "../../../util/setPosition";
import {objEquals} from "../../../util/functions"; import {objEquals} from "../../../util/functions";
import {genCellValue} from "./cell"; import {genCellValue} from "./cell";
import * as dayjs from "dayjs"; import * as dayjs from "dayjs";
import {unicode2Emoji} from "../../../emoji";
export const getDefaultOperatorByType = (type: TAVCol) => { export const getDefaultOperatorByType = (type: TAVCol) => {
if (type === "number" || type === "select") { if (type === "number" || type === "select") {
@ -22,7 +23,7 @@ const toggleEmpty = (element: HTMLElement, operator: string, type: TAVCol) => {
menuElement.querySelectorAll("input, .b3-chip").forEach((inputElement, index) => { menuElement.querySelectorAll("input, .b3-chip").forEach((inputElement, index) => {
const menuItemElement = hasClosestByClassName(inputElement, "b3-menu__item"); const menuItemElement = hasClosestByClassName(inputElement, "b3-menu__item");
if (menuItemElement) { if (menuItemElement) {
if (type === "date") { if (["date", "updated", "created"].includes(type)) {
if (operator === "Is between") { if (operator === "Is between") {
menuItemElement.classList.remove("fn__none"); menuItemElement.classList.remove("fn__none");
} else if (operator === "Is empty" || operator === "Is not empty") { } else if (operator === "Is empty" || operator === "Is not empty") {
@ -62,7 +63,7 @@ export const setFilter = (options: {
let hasMatch = false; let hasMatch = false;
let cellValue: IAVCellValue; let cellValue: IAVCellValue;
if (textElements.length > 0) { if (textElements.length > 0) {
if (colData.type === "date") { if (["date", "updated", "created"].includes(colData.type)) {
cellValue = genCellValue(colData.type, { cellValue = genCellValue(colData.type, {
isNotEmpty2: textElements[1].value !== "", isNotEmpty2: textElements[1].value !== "",
isNotEmpty: textElements[0].value !== "", isNotEmpty: textElements[0].value !== "",
@ -152,6 +153,8 @@ export const setFilter = (options: {
<option ${"Is not empty" === options.filter.operator ? "selected" : ""} value="Is not empty">${window.siyuan.languages.filterOperatorIsNotEmpty}</option>`; <option ${"Is not empty" === options.filter.operator ? "selected" : ""} value="Is not empty">${window.siyuan.languages.filterOperatorIsNotEmpty}</option>`;
break; break;
case "date": case "date":
case "created":
case "updated":
selectHTML = `<option ${"=" === options.filter.operator ? "selected" : ""} value="=">${window.siyuan.languages.filterOperatorIs}</option> selectHTML = `<option ${"=" === options.filter.operator ? "selected" : ""} value="=">${window.siyuan.languages.filterOperatorIs}</option>
<option ${">" === options.filter.operator ? "selected" : ""} value=">">${window.siyuan.languages.filterOperatorIsAfter}</option> <option ${">" === options.filter.operator ? "selected" : ""} value=">">${window.siyuan.languages.filterOperatorIsAfter}</option>
<option ${"<" === options.filter.operator ? "selected" : ""} value="<">${window.siyuan.languages.filterOperatorIsBefore}</option> <option ${"<" === options.filter.operator ? "selected" : ""} value="<">${window.siyuan.languages.filterOperatorIsBefore}</option>
@ -225,14 +228,15 @@ export const setFilter = (options: {
iconHTML: "", iconHTML: "",
label: `<input style="margin: 4px 0" value="${options.filter.value?.number.isNotEmpty ? options.filter.value.number.content : ""}" class="b3-text-field fn__size200">` label: `<input style="margin: 4px 0" value="${options.filter.value?.number.isNotEmpty ? options.filter.value.number.content : ""}" class="b3-text-field fn__size200">`
}); });
} else if (colData.type === "date") { } else if (["date", "updated", "created"].includes(colData.type)) {
const dateValue = options.filter.value ? options.filter.value[colData.type as "date"] : null;
menu.addItem({ menu.addItem({
iconHTML: "", iconHTML: "",
label: `<input style="margin: 4px 0" value="${options.filter.value?.date.isNotEmpty ? dayjs(options.filter.value.date.content).format("YYYY-MM-DDTHH:mm") : ""}" type="datetime-local" class="b3-text-field fn__size200">` label: `<input style="margin: 4px 0" value="${(dateValue.isNotEmpty || colData.type !== "date") ? dayjs(dateValue.content).format("YYYY-MM-DDTHH:mm") : ""}" type="datetime-local" class="b3-text-field fn__size200">`
}); });
menu.addItem({ menu.addItem({
iconHTML: "", iconHTML: "",
label: `<input style="margin: 4px 0" value="${options.filter.value?.date.isNotEmpty2 ? dayjs(options.filter.value.date.content2).format("YYYY-MM-DDTHH:mm") : ""}" type="datetime-local" class="b3-text-field fn__size200">` label: `<input style="margin: 4px 0" value="${dateValue.isNotEmpty2 ? dayjs(dateValue.content2).format("YYYY-MM-DDTHH:mm") : ""}" type="datetime-local" class="b3-text-field fn__size200">`
}); });
} }
menu.addItem({ menu.addItem({
@ -305,7 +309,7 @@ export const addFilter = (options: {
if (!hasFilter && column.type !== "mAsset") { if (!hasFilter && column.type !== "mAsset") {
menu.addItem({ menu.addItem({
label: column.name, label: column.name,
icon: getColIconByType(column.type), iconHTML: `<span style="align-self: center;margin-right: 8px;width: 14px;" class="block__icon block__icon--show">${column.icon ? unicode2Emoji(column.icon) : `<svg><use xlink:href="#${getColIconByType(column.type)}"></use></svg>`}</span>`,
click: () => { click: () => {
const oldFilters = Object.assign([], options.data.view.filters); const oldFilters = Object.assign([], options.data.view.filters);
const cellValue = genCellValue(column.type, ""); const cellValue = genCellValue(column.type, "");
@ -408,7 +412,7 @@ export const getFiltersHTML = (data: IAVTable) => {
} }
} }
filterHTML += `<span data-type="setFilter" class="b3-chip${filterValue ? " b3-chip--primary" : ""}"> filterHTML += `<span data-type="setFilter" class="b3-chip${filterValue ? " b3-chip--primary" : ""}">
<svg><use xlink:href="#${getColIconByType(item.type)}"></use></svg> ${item.icon ? unicode2Emoji(item.icon, "icon", true) : `<svg class="icon"><use xlink:href="#${getColIconByType(item.type)}"></use></svg>`}
<span class="fn__ellipsis">${item.name}${filterValue}</span> <span class="fn__ellipsis">${item.name}${filterValue}</span>
</span>`; </span>`;
return true; return true;

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

@ -779,7 +779,7 @@ const getPropertiesHTML = (data: IAVTable) => {
<svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg> <svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg>
<div class="fn__flex-1"> <div class="fn__flex-1">
<span class="b3-chip"> <span class="b3-chip">
<svg><use xlink:href="#${getColIconByType(item.type)}"></use></svg> ${item.icon ? unicode2Emoji(item.icon, "icon", true) : `<svg class="icon"><use xlink:href="#${getColIconByType(item.type)}"></use></svg>`}
<span class="fn__ellipsis">${item.name}</span> <span class="fn__ellipsis">${item.name}</span>
</span> </span>
</div> </div>
@ -791,7 +791,7 @@ const getPropertiesHTML = (data: IAVTable) => {
<svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg> <svg class="b3-menu__icon"><use xlink:href="#iconDrag"></use></svg>
<div class="fn__flex-1"> <div class="fn__flex-1">
<span class="b3-chip"> <span class="b3-chip">
<svg><use xlink:href="#${getColIconByType(item.type)}"></use></svg> ${item.icon ? unicode2Emoji(item.icon, "icon", true) : `<svg class="icon"><use xlink:href="#${getColIconByType(item.type)}"></use></svg>`}
<span class="fn__ellipsis">${item.name}</span> <span class="fn__ellipsis">${item.name}</span>
</span> </span>
</div> </div>

3
app/src/protyle/render/av/sort.ts
View file

@ -2,6 +2,7 @@ import {Menu} from "../../../plugin/Menu";
import {getColIconByType} from "./col"; import {getColIconByType} from "./col";
import {transaction} from "../../wysiwyg/transaction"; import {transaction} from "../../wysiwyg/transaction";
import {setPosition} from "../../../util/setPosition"; import {setPosition} from "../../../util/setPosition";
import {unicode2Emoji} from "../../../emoji";
export const addSort = (options: { export const addSort = (options: {
data: IAV, data: IAV,
@ -23,7 +24,7 @@ export const addSort = (options: {
if (!hasSort) { if (!hasSort) {
menu.addItem({ menu.addItem({
label: column.name, label: column.name,
icon: getColIconByType(column.type), iconHTML: `<span style="align-self: center;margin-right: 8px;width: 14px;" class="block__icon block__icon--show">${column.icon ? unicode2Emoji(column.icon) : `<svg><use xlink:href="#${getColIconByType(column.type)}"></use></svg>`}</span>`,
click: () => { click: () => {
const oldSorts = Object.assign([], options.data.view.sorts); const oldSorts = Object.assign([], options.data.view.sorts);
options.data.view.sorts.push({ options.data.view.sorts.push({