mirror of
https://github.com/siyuan-note/siyuan.git
synced 2025-12-20 00:20:12 +01:00
This commit is contained in:
Vanessa
parent
9d24af1ede
commit
a0be2b9a41
5 changed files with 110 additions and 14 deletions
|
|
@ -3,4 +3,33 @@
|
|||
display: block;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.block__logo {
|
||||
width: 160px;
|
||||
color: var(--b3-theme-on-surface);
|
||||
|
||||
svg {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
span {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.b3-text-field--text {
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
transition: var(--b3-transition);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--b3-theme-background);
|
||||
}
|
||||
}
|
||||
|
||||
.b3-chip {
|
||||
margin: 1px 2px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -120,4 +120,8 @@
|
|||
&--noborder {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&--bordr {
|
||||
border-bottom: 1px solid var(--b3-border-color) !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ import * as dayjs from "dayjs";
|
|||
import {Constants} from "../constants";
|
||||
import {exportImage} from "../protyle/export/util";
|
||||
import {App} from "../index";
|
||||
import {renderAVAttribute} from "../protyle/render/av/render";
|
||||
|
||||
const bindAttrInput = (inputElement: HTMLInputElement, confirmElement: Element) => {
|
||||
inputElement.addEventListener("keydown", (event) => {
|
||||
|
|
@ -161,7 +162,7 @@ export const openFileWechatNotify = (protyle: IProtyle) => {
|
|||
const genAttr = (attrs: IObject, focusName = "bookmark", cb: (dialog: Dialog, rms: string[]) => void) => {
|
||||
let customHTML = "";
|
||||
let notifyHTML = "";
|
||||
let avHTML = "";
|
||||
let hasAV = false;
|
||||
const range = getSelection().rangeCount > 0 ? getSelection().getRangeAt(0) : null;
|
||||
Object.keys(attrs).forEach(item => {
|
||||
if ("custom-riff-decks" === item) {
|
||||
|
|
@ -174,14 +175,15 @@ const genAttr = (attrs: IObject, focusName = "bookmark", cb: (dialog: Dialog, rm
|
|||
<input class="b3-text-field fn__block" type="datetime-local" readonly data-name="${item}" value="${dayjs(attrs[item]).format("YYYY-MM-DDTHH:mm")}">
|
||||
</label>`;
|
||||
} else if (item.indexOf("custom-av") > -1) {
|
||||
avHTML += `<label class="b3-label b3-label--noborder">
|
||||
<div class="fn__flex">
|
||||
<span class="fn__flex-1">${item.replace("custom-", "")}</span>
|
||||
<span data-action="remove" class="block__icon block__icon--show"><svg><use xlink:href="#iconMin"></use></svg></span>
|
||||
</div>
|
||||
<div class="fn__hr"></div>
|
||||
<textarea class="b3-text-field fn__block" rows="1" data-name="${item}">${attrs[item]}</textarea>
|
||||
</label>`;
|
||||
hasAV = true
|
||||
// avHTML += `<label class="b3-label b3-label--noborder">
|
||||
// <div class="fn__flex">
|
||||
// <span class="fn__flex-1">${item.replace("custom-", "")}</span>
|
||||
// <span data-action="remove" class="block__icon block__icon--show"><svg><use xlink:href="#iconMin"></use></svg></span>
|
||||
// </div>
|
||||
// <div class="fn__hr"></div>
|
||||
// <textarea class="b3-text-field fn__block" rows="1" data-name="${item}">${attrs[item]}</textarea>
|
||||
// </label>`;
|
||||
} else if (item.indexOf("custom") > -1) {
|
||||
customHTML += `<label class="b3-label b3-label--noborder">
|
||||
<div class="fn__flex">
|
||||
|
|
@ -203,7 +205,7 @@ const genAttr = (attrs: IObject, focusName = "bookmark", cb: (dialog: Dialog, rm
|
|||
<span class="item__text">${window.siyuan.languages.buildIn}</span>
|
||||
<span class="fn__flex-1"></span>
|
||||
</div>
|
||||
<div class="item item--full${avHTML ? "" : " fn__none"}" data-type="av">
|
||||
<div class="item item--full${hasAV ? "" : " fn__none"}" data-type="av">
|
||||
<span class="fn__flex-1"></span>
|
||||
<span class="item__text">${window.siyuan.languages.database}</span>
|
||||
<span class="fn__flex-1"></span>
|
||||
|
|
@ -241,9 +243,7 @@ const genAttr = (attrs: IObject, focusName = "bookmark", cb: (dialog: Dialog, rm
|
|||
</label>
|
||||
${notifyHTML}
|
||||
</div>
|
||||
<div data-type="av" class="fn__none custom-attr">
|
||||
${avHTML}
|
||||
</div>
|
||||
<div data-type="av" class="fn__none custom-attr"></div>
|
||||
<div data-type="custom" class="fn__none custom-attr">
|
||||
${customHTML}
|
||||
<div class="b3-label">
|
||||
|
|
@ -279,6 +279,9 @@ const genAttr = (attrs: IObject, focusName = "bookmark", cb: (dialog: Dialog, rm
|
|||
target.classList.add("item--focus")
|
||||
dialog.element.querySelectorAll(".custom-attr").forEach((item: HTMLElement) => {
|
||||
if (item.dataset.type === target.dataset.type) {
|
||||
if (item.dataset.type === "av" && item.innerHTML === "") {
|
||||
renderAVAttribute(item, attrs.id);
|
||||
}
|
||||
item.classList.remove("fn__none")
|
||||
} else {
|
||||
item.classList.add("fn__none")
|
||||
|
|
|
|||
|
|
@ -193,3 +193,62 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
|
|||
lastParentID = null;
|
||||
}, Constants.TIMEOUT_TRANSITION);
|
||||
};
|
||||
|
||||
const genAVValueHTML = (value: IAVCellValue) => {
|
||||
let html = ""
|
||||
switch (value.type) {
|
||||
case "text":
|
||||
html = `<input value="${value.text.content}" class="b3-text-field b3-text-field--text fn__flex-1">`;
|
||||
break;
|
||||
case "number":
|
||||
html = `<input value="${value.number.content}" type="number" class="b3-text-field b3-text-field--text fn__flex-1">`;
|
||||
break;
|
||||
case "mSelect":
|
||||
case "select":
|
||||
value.mSelect.forEach(item => {
|
||||
html += `<span class="b3-chip b3-chip--middle" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">${item.content}</span>`;
|
||||
})
|
||||
break;
|
||||
case "date":
|
||||
html = `<input value="${dayjs(value.date.content).format("YYYY-MM-DD HH:mm")}" type="datetime-local" class="b3-text-field b3-text-field--text fn__flex-1">`;
|
||||
if (value.date.hasEndDate) {
|
||||
html += `<span class="fn__space"></span>
|
||||
<input value="${dayjs(value.date.content2).format("YYYY-MM-DD HH:mm")}" type="datetime-local" class="b3-text-field b3-text-field--text fn__flex-1">`;
|
||||
}
|
||||
break;
|
||||
case "url":
|
||||
html = `<input value="${value.url.content}" class="b3-text-field b3-text-field--text fn__flex-1">`;
|
||||
break;
|
||||
}
|
||||
return html;
|
||||
}
|
||||
|
||||
export const renderAVAttribute = (element: HTMLElement, id: string) => {
|
||||
fetchPost("/api/av/getAttributeViewKeys", {id}, (response) => {
|
||||
let html = ""
|
||||
response.data.forEach((table: {
|
||||
keyValues: {
|
||||
key: {
|
||||
type: TAVCol,
|
||||
name: string
|
||||
},
|
||||
values: IAVCellValue[]
|
||||
}[],
|
||||
avName: string
|
||||
}) => {
|
||||
html += `<div class="b3-label b3-label--bordr">${table.avName}</div>`;
|
||||
table.keyValues?.forEach(item => {
|
||||
html += `<div class="block__icons">
|
||||
<div class="block__logo">
|
||||
<svg><use xlink:href="#${getColIconByType(item.key.type)}"></use></svg>
|
||||
<span>${item.key.name || window.siyuan.languages.title}</span>
|
||||
</div>
|
||||
<div class="fn__flex-1 fn__flex">
|
||||
${genAVValueHTML(item.values[0])}
|
||||
</div>
|
||||
</div>`
|
||||
})
|
||||
})
|
||||
element.innerHTML = html
|
||||
})
|
||||
}
|
||||
|
|
|
|||
3
app/src/types/index.d.ts
vendored
3
app/src/types/index.d.ts
vendored
|
|
@ -45,7 +45,7 @@ type TEventBus = "ws-main" |
|
|||
"open-menu-av" | "open-menu-content" | "open-menu-breadcrumbmore" |
|
||||
"input-search" |
|
||||
"loaded-protyle"
|
||||
type TAVCol = "text" | "date" | "number" | "relation" | "rollup" | "select" | "block" | "mSelect"
|
||||
type TAVCol = "text" | "date" | "number" | "relation" | "rollup" | "select" | "block" | "mSelect" | "url"
|
||||
type THintSource = "search" | "av" | "hint";
|
||||
type TAVFilterOperator =
|
||||
"="
|
||||
|
|
@ -931,5 +931,6 @@ interface IAVCellValue {
|
|||
number?: { content?: number, isNotEmpty: boolean, format?: string, formattedContent?: string },
|
||||
mSelect?: { content: string, color: string }[]
|
||||
block?: { content: string, id: string }
|
||||
url?: { content: string }
|
||||
date?: { content?: number, content2?: number, hasEndDate?: boolean }
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue