mirror of
https://github.com/siyuan-note/siyuan.git
synced 2025-12-20 16:40:13 +01:00
This commit is contained in:
Vanessa
parent
cf154dcaa1
commit
ce35191bf5
4 changed files with 42 additions and 17 deletions
|
|
@ -225,13 +225,13 @@
|
|||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
& > svg,
|
||||
& > img {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
& > .av__cellicon {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
color: var(--b3-theme-on-surface);
|
||||
margin-right: 5px;
|
||||
margin: 0 5px 0 0;
|
||||
flex-shrink: 0;
|
||||
line-height: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@ import {getDefaultOperatorByType, setFilter} from "./filter";
|
|||
import {genCellValue} from "./cell";
|
||||
import {openMenuPanel} from "./openMenuPanel";
|
||||
import {getLabelByNumberFormat} from "./number";
|
||||
import {removeAttrViewColAnimation} from "./action";
|
||||
import {openEmojiPanel} from "../../../emoji";
|
||||
import {removeAttrViewColAnimation, updateAttrViewCellAnimation} from "./action";
|
||||
import {openEmojiPanel, unicode2Emoji} from "../../../emoji";
|
||||
|
||||
export const duplicateCol = (options: {
|
||||
protyle: IProtyle,
|
||||
|
|
@ -103,7 +103,7 @@ export const getEditHTML = (options: {
|
|||
</button>
|
||||
<button class="b3-menu__separator"></button>
|
||||
<button class="b3-menu__item" data-type="nobg">
|
||||
<span style="padding: 5px;margin-right: 8px;" class="block__icon block__icon--show" data-type="update-icon"><svg><use xlink:href="#${getColIconByType(colData.type)}"></use></svg></span>
|
||||
<span style="padding: 5px;margin-right: 8px;width: 14px;font-size: 14px;" class="block__icon block__icon--show" data-col-type="${colData.type}" data-icon="${colData.icon}" data-type="update-icon">${colData.icon ? unicode2Emoji(colData.icon) : `<svg><use xlink:href="#${getColIconByType(colData.type)}"></use></svg>`}</span>
|
||||
<span class="b3-menu__label"><input data-type="name" style="margin: 4px 0" class="b3-text-field" type="text" value="${colData.name}"></span>
|
||||
</button>`;
|
||||
if (colData.options && colData.options.length > 0) {
|
||||
|
|
@ -179,6 +179,7 @@ export const bindEditEvent = (options: { protyle: IProtyle, data: IAV, menuEleme
|
|||
type: colData.type,
|
||||
}]);
|
||||
colData.name = newValue;
|
||||
updateAttrViewCellAnimation(options.protyle.wysiwyg.element.querySelector(`.av__row--header .av__cell[data-col-id="${colId}"]`));
|
||||
});
|
||||
nameElement.addEventListener("keydown", (event: KeyboardEvent) => {
|
||||
if (event.isComposing) {
|
||||
|
|
@ -367,9 +368,10 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
|
|||
const type = cellElement.getAttribute("data-dtype") as TAVCol;
|
||||
const colId = cellElement.getAttribute("data-col-id");
|
||||
const avID = blockElement.getAttribute("data-av-id");
|
||||
const oldValue = cellElement.querySelector(".av__celltext").textContent.trim();
|
||||
const menu = new Menu("av-header-cell", () => {
|
||||
const newValue = (window.siyuan.menus.menu.element.querySelector(".b3-text-field") as HTMLInputElement).value;
|
||||
if (newValue === cellElement.textContent.trim()) {
|
||||
if (newValue === oldValue) {
|
||||
return;
|
||||
}
|
||||
transaction(protyle, [{
|
||||
|
|
@ -382,14 +384,15 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
|
|||
action: "updateAttrViewCol",
|
||||
id: colId,
|
||||
avID,
|
||||
name: cellElement.textContent.trim(),
|
||||
name: oldValue,
|
||||
type,
|
||||
}]);
|
||||
updateAttrViewCellAnimation(cellElement);
|
||||
});
|
||||
menu.addItem({
|
||||
iconHTML: `<span style="align-self: center;margin-right: 8px;" class="block__icon block__icon--show"><svg><use xlink:href="#${getColIconByType(type)}"></use></svg></span>`,
|
||||
iconHTML: `<span style="align-self: center;margin-right: 8px;width: 14px;" class="block__icon block__icon--show">${cellElement.dataset.icon ? unicode2Emoji(cellElement.dataset.icon) : `<svg><use xlink:href="#${getColIconByType(type)}"></use></svg>`}</span>`,
|
||||
type: "readonly",
|
||||
label: `<input style="margin: 4px 0" class="b3-text-field" type="text" value="${cellElement.innerText.trim()}">`,
|
||||
label: `<input style="margin: 4px 0" class="b3-text-field" type="text" value="${oldValue}">`,
|
||||
bind(element) {
|
||||
const iconElement = element.querySelector(".block__icon") as HTMLElement
|
||||
iconElement.addEventListener("click", (event) => {
|
||||
|
|
@ -411,6 +414,8 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
|
|||
avID,
|
||||
data: cellElement.dataset.icon,
|
||||
}]);
|
||||
iconElement.innerHTML = unicode ? unicode2Emoji(unicode) : `<svg><use xlink:href="#${getColIconByType(type)}"></use></svg>`
|
||||
updateAttrViewCellAnimation(cellElement);
|
||||
});
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
|
@ -564,7 +569,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
|
|||
avID,
|
||||
}], [{
|
||||
action: "addAttrViewCol",
|
||||
name: cellElement.textContent.trim(),
|
||||
name: oldValue,
|
||||
avID,
|
||||
type: type,
|
||||
id: colId
|
||||
|
|
|
|||
|
|
@ -9,12 +9,12 @@ import {addFilter, getFiltersHTML, setFilter} from "./filter";
|
|||
import {addSort, bindSortsEvent, getSortsHTML} from "./sort";
|
||||
import {bindDateEvent, getDateHTML, setDateValue} from "./date";
|
||||
import {formatNumber} from "./number";
|
||||
import {removeAttrViewColAnimation} from "./action";
|
||||
import {removeAttrViewColAnimation, updateAttrViewCellAnimation} from "./action";
|
||||
import {addAssetLink, bindAssetEvent, editAssetItem, getAssetHTML, updateAssetCell} from "./asset";
|
||||
import {Constants} from "../../../constants";
|
||||
import {hideElements} from "../../ui/hideElements";
|
||||
import {pathPosix} from "../../../util/pathName";
|
||||
import {openEmojiPanel} from "../../../emoji";
|
||||
import {openEmojiPanel, unicode2Emoji} from "../../../emoji";
|
||||
|
||||
export const openMenuPanel = (options: {
|
||||
protyle: IProtyle,
|
||||
|
|
@ -509,6 +509,21 @@ export const openMenuPanel = (options: {
|
|||
y: rect.bottom,
|
||||
h: rect.height,
|
||||
w: rect.width
|
||||
}, (unicode) => {
|
||||
const colId = menuElement.querySelector(".b3-menu__item").getAttribute("data-col-id");
|
||||
transaction(options.protyle, [{
|
||||
action: "setAttrViewColIcon",
|
||||
id: colId,
|
||||
avID,
|
||||
data: unicode,
|
||||
}], [{
|
||||
action: "setAttrViewColIcon",
|
||||
id: colId,
|
||||
avID,
|
||||
data: target.dataset.icon,
|
||||
}]);
|
||||
target.innerHTML = unicode ? unicode2Emoji(unicode) : `<svg><use xlink:href="#${getColIconByType(target.dataset.colType as TAVCol)}"></use></svg>`
|
||||
updateAttrViewCellAnimation(options.blockElement.querySelector(`.av__row--header .av__cell[data-col-id="${colId}"]`))
|
||||
});
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
|
@ -693,7 +708,12 @@ export const openMenuPanel = (options: {
|
|||
break;
|
||||
} else if (type === "addAssetExist") {
|
||||
const rect = target.getBoundingClientRect();
|
||||
options.protyle.toolbar.showAssets(options.protyle, {x: rect.right, y: rect.bottom, w: target.parentElement.clientWidth + 8, h: rect.height}, (url) => {
|
||||
options.protyle.toolbar.showAssets(options.protyle, {
|
||||
x: rect.right,
|
||||
y: rect.bottom,
|
||||
w: target.parentElement.clientWidth + 8,
|
||||
h: rect.height
|
||||
}, (url) => {
|
||||
let value: IAVCellAssetValue;
|
||||
if (Constants.SIYUAN_ASSETS_IMAGE.includes(pathPosix().extname(url).toLowerCase())) {
|
||||
value = {
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void) =
|
|||
style="width: ${column.width || "200px"};
|
||||
${column.wrap ? "" : "white-space: nowrap;"}">
|
||||
<div draggable="true" class="av__cellheader">
|
||||
${column.icon ? unicode2Emoji(column.icon) : `<svg><use xlink:href="#${getColIconByType(column.type)}"></use></svg>`}
|
||||
${column.icon ? unicode2Emoji(column.icon, "av__cellicon", true) : `<svg class="av__cellicon"><use xlink:href="#${getColIconByType(column.type)}"></use></svg>`}
|
||||
<span class="av__celltext">${column.name}</span>
|
||||
</div>
|
||||
<div class="av__widthdrag"></div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue