diff --git a/app/appearance/langs/zh_CN.json b/app/appearance/langs/zh_CN.json index 4cb5953e2..277b20b21 100644 --- a/app/appearance/langs/zh_CN.json +++ b/app/appearance/langs/zh_CN.json @@ -1,4 +1,14 @@ { + "articleCover": "页面封面", + "articleContent": "页面内容", + "cardView": "卡片预览", + "cardSize": "卡片大小", + "big": "大", + "middle": "中", + "small": "小", + "adjustImg": "自适应图片大小", + "showIcon": "显示页面图标", + "wrapAllFields": "对所有属性换行", "gallery": "画廊", "newTag": "新建标签", "pleaseWait": "请稍等片刻...", diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss index cca52d200..6f9d9d997 100644 --- a/app/src/assets/scss/business/_av.scss +++ b/app/src/assets/scss/business/_av.scss @@ -287,6 +287,43 @@ } } + &__layout { + display: flex; + gap: 8px; + width: 100%; + margin: 8px 0; + + &-item { + border: 1px solid var(--b3-border-color); + border-radius: var(--b3-border-radius); + text-align: center; + color: var(--b3-theme-on-surface); + font-size: 12px; + flex: 1; + cursor: pointer; + transition: var(--b3-transition); + display: flex; + flex-direction: column; + align-items: center; + line-height: 1; + padding: 8px; + + &:not(.av__layout-item--select):hover { + color: var(--b3-theme-on-background); + } + + svg { + height: 14px; + width: 14px; + } + + &--select { + color: var(--b3-theme-primary); + border-color: var(--b3-theme-primary); + } + } + } + &__cell { box-sizing: border-box; position: relative; diff --git a/app/src/protyle/render/av/layout.ts b/app/src/protyle/render/av/layout.ts new file mode 100644 index 000000000..527af02e5 --- /dev/null +++ b/app/src/protyle/render/av/layout.ts @@ -0,0 +1,84 @@ +import {transaction} from "../../wysiwyg/transaction"; + +export const getLayoutHTML = (data: IAV) => { + let html = ""; + if (data.viewType === "gallery") { + html = `` + // calcOperatorNone + } + return `
+
+ + + + + ${html} +
`; +}; + +export const bindLayoutEvent = (options: { + protyle: IProtyle, + data: IAV, + menuElement: HTMLElement + blockElement: Element +}) => { + const toggleTitleElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-view-title"]') as HTMLInputElement; + toggleTitleElement.addEventListener("change", () => { + const avID = options.blockElement.getAttribute("data-av-id"); + const blockID = options.blockElement.getAttribute("data-node-id"); + if (!toggleTitleElement.checked) { + // hide + transaction(options.protyle, [{ + action: "hideAttrViewName", + avID, + blockID, + data: true + }], [{ + action: "hideAttrViewName", + avID, + blockID, + data: false + }]); + options.blockElement.querySelector(".av__title").classList.add("fn__none"); + } else { + transaction(options.protyle, [{ + action: "hideAttrViewName", + avID, + blockID, + data: false + }], [{ + action: "hideAttrViewName", + avID, + blockID, + data: true + }]); + options.blockElement.querySelector(".av__title").classList.remove("fn__none"); + } + }); +}; diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts index d7acf7231..4f8846318 100644 --- a/app/src/protyle/render/av/openMenuPanel.ts +++ b/app/src/protyle/render/av/openMenuPanel.ts @@ -20,7 +20,14 @@ import {openAsset} from "../../../editor/util"; /// #endif import {previewAttrViewImages} from "../../preview/image"; import {assetMenu} from "../../../menus/protyle"; -import {addView, bindSwitcherEvent, bindViewEvent, getSwitcherHTML, getViewHTML, openViewMenu} from "./view"; +import { + addView, + bindSwitcherEvent, + bindViewEvent, + getSwitcherHTML, + getViewHTML, + openViewMenu +} from "./view"; import {focusBlock} from "../../util/selection"; import {avRender} from "./render"; import {setPageSize} from "./row"; @@ -30,6 +37,7 @@ import {updateCellsValue} from "./cell"; import {openCalcMenu} from "./calc"; import {escapeAttr, escapeHtml} from "../../../util/escape"; import {Dialog} from "../../../dialog"; +import {bindLayoutEvent, getLayoutHTML} from "./layout"; export const openMenuPanel = (options: { protyle: IProtyle, @@ -537,6 +545,14 @@ export const openMenuPanel = (options: { event.preventDefault(); event.stopPropagation(); break; + } else if (type === "go-layout") { + menuElement.innerHTML = getLayoutHTML(data); + setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height); + bindLayoutEvent({protyle: options.protyle, data, menuElement, blockElement: options.blockElement}); + window.siyuan.menus.menu.remove(); + event.preventDefault(); + event.stopPropagation(); + break; } else if (type === "goSorts") { menuElement.innerHTML = getSortsHTML(data.view.columns, data.view.sorts); bindSortsEvent(options.protyle, menuElement, data, blockID); diff --git a/app/src/protyle/render/av/view.ts b/app/src/protyle/render/av/view.ts index e965f06e2..a021545b5 100644 --- a/app/src/protyle/render/av/view.ts +++ b/app/src/protyle/render/av/view.ts @@ -163,39 +163,6 @@ export const bindViewEvent = (options: { descElement.addEventListener("input", () => { inputElement.nextElementSibling.setAttribute("aria-label", descElement.value ? escapeHtml(descElement.value) : window.siyuan.languages.addDesc); }); - const toggleTitleElement = options.menuElement.querySelector('.b3-switch[data-type="toggle-view-title"]') as HTMLInputElement; - toggleTitleElement.addEventListener("change", () => { - const avID = options.blockElement.getAttribute("data-av-id"); - const blockID = options.blockElement.getAttribute("data-node-id"); - if (!toggleTitleElement.checked) { - // hide - transaction(options.protyle, [{ - action: "hideAttrViewName", - avID, - blockID, - data: true - }], [{ - action: "hideAttrViewName", - avID, - blockID, - data: false - }]); - options.blockElement.querySelector(".av__title").classList.add("fn__none"); - } else { - transaction(options.protyle, [{ - action: "hideAttrViewName", - avID, - blockID, - data: false - }], [{ - action: "hideAttrViewName", - avID, - blockID, - data: true - }]); - options.blockElement.querySelector(".av__title").classList.remove("fn__none"); - } - }); }; export const getViewHTML = (data: IAV) => { @@ -258,12 +225,6 @@ export const getViewHTML = (data: IAV) => { ${view.pageSize === Constants.SIZE_DATABASE_MAZ_SIZE ? window.siyuan.languages.all : view.pageSize} -