diff --git a/CHANGELOG.md b/CHANGELOG.md index fe97c52..788ea57 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # 更改日志 | CHANGE LOG +## 2023-07-07 + +- 新增列表表格视图 | Add list table view. + ## 2023-07-06 - 新增显示块轮廓功能 | Add display block outline function. diff --git a/workspace/plugins/custom-block/public/i18n/en_US.json b/workspace/plugins/custom-block/public/i18n/en_US.json index 4c5dee4..5f63389 100644 --- a/workspace/plugins/custom-block/public/i18n/en_US.json +++ b/workspace/plugins/custom-block/public/i18n/en_US.json @@ -4,6 +4,12 @@ "custom-block-fullscreen": { "label": "Full-screen Display" }, + "custom-block-list-view-default": { + "label": "List - Default View" + }, + "custom-block-list-view-table": { + "label": "List - Table View" + }, "custom-block-render-content": { "label": "Display Block Content" }, diff --git a/workspace/plugins/custom-block/public/i18n/zh_CHT.json b/workspace/plugins/custom-block/public/i18n/zh_CHT.json index 2dba399..bd6204e 100644 --- a/workspace/plugins/custom-block/public/i18n/zh_CHT.json +++ b/workspace/plugins/custom-block/public/i18n/zh_CHT.json @@ -4,6 +4,12 @@ "custom-block-fullscreen": { "label": "全屏顯示" }, + "custom-block-list-view-default": { + "label": "列表-默認視圖" + }, + "custom-block-list-view-table": { + "label": "列表-表格視圖" + }, "custom-block-render-content": { "label": "顯示塊內容" }, diff --git a/workspace/plugins/custom-block/public/i18n/zh_CN.json b/workspace/plugins/custom-block/public/i18n/zh_CN.json index cc3189b..d8e82f7 100644 --- a/workspace/plugins/custom-block/public/i18n/zh_CN.json +++ b/workspace/plugins/custom-block/public/i18n/zh_CN.json @@ -4,6 +4,12 @@ "custom-block-fullscreen": { "label": "全屏显示" }, + "custom-block-list-view-default": { + "label": "列表-默认视图" + }, + "custom-block-list-view-table": { + "label": "列表-表格视图" + }, "custom-block-render-content": { "label": "显示块内容" }, diff --git a/workspace/plugins/custom-block/src/configs/default.ts b/workspace/plugins/custom-block/src/configs/default.ts index a8022e0..4a70842 100644 --- a/workspace/plugins/custom-block/src/configs/default.ts +++ b/workspace/plugins/custom-block/src/configs/default.ts @@ -336,5 +336,60 @@ export const DEFAULT_CONFIG: IConfig = { }, ], }, + { // 分割线 + id: "custom-block-separator-92B49367-D643-4AEC-B90F-7EB86DF4890A", + enable: true, + mode: MenuItemMode.separator, + multi: true, + type: { + default: { enable: false }, + [sdk.siyuan.NodeType.NodeDocument]: { enable: true }, + [sdk.siyuan.NodeType.NodeList]: { enable: true }, + }, + }, + { // 列表-默认视图 + id: "custom-block-list-view-default", + enable: true, + mode: MenuItemMode.button, + multi: true, + icon: "iconUndo", + accelerator: "list-view: null", + type: { + default: { enable: false }, + [sdk.siyuan.NodeType.NodeDocument]: { enable: true }, + [sdk.siyuan.NodeType.NodeList]: { enable: true }, + }, + tasks: [ + { + type: TaskType.delete, + params: { + name: "custom-block-list-view", + }, + }, + ], + }, + { // 列表-表格视图 + id: "custom-block-list-view-table", + enable: true, + mode: MenuItemMode.button, + multi: true, + icon: "iconTable", + accelerator: "list-view: table", + token: "list-view-table", + type: { + default: { enable: false }, + [sdk.siyuan.NodeType.NodeDocument]: { enable: true }, + [sdk.siyuan.NodeType.NodeList]: { enable: true }, + }, + tasks: [ + { + type: TaskType.update, + params: { + name: "custom-block-list-view", + value: "table", + }, + }, + ], + }, ], }; diff --git a/workspace/plugins/custom-block/src/styles/custom-block-list-view-table.less b/workspace/plugins/custom-block/src/styles/custom-block-list-view-table.less new file mode 100644 index 0000000..94409e3 --- /dev/null +++ b/workspace/plugins/custom-block/src/styles/custom-block-list-view-table.less @@ -0,0 +1,111 @@ +// Copyright (C) 2023 Zuoqiu Yingyi +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as +// published by the Free Software Foundation, either version 3 of the +// License, or (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +/** + * 以表格的形式显示列表块 + * 需要对一个列表容器设置自定义属性 type: table + * 详情请参考: [土法列表表格-这回原理我也说不清了 · 语雀](https: //www.yuque.com/siyuannote/docs/yev84m) + * REF [UserZYF](https://github.com/UserZYF) 修复上述实现方案 + */ + +:root { + &[plugin-custom-block~=list-view-table] { + .protyle-content { + + [custom-block-list-view=table] { + &[data-node-id].list { + &>[data-node-id].li { + >.protyle-attr { + >.protyle-attr--refcount { + /* 引用数按钮 */ + right: 2px; + } + } + } + } + + [data-node-id].list, + [data-node-id].li { + border: 0; + padding: 0; + margin: 0 !important; + } + + [data-node-id].list { + /* 嵌套列表块 */ + // width: 100%; + // width: auto; + + // display: flex; + // flex-direction: column; + flex: 1; + } + + [data-node-id].li { + /* 列表项 */ + // width: auto; + display: flex; + // overflow-x: auto; + outline: 1px solid var(--b3-theme-on-surface); + + &::before, + &::after { + /* 去除辅助线 */ + display: none; + } + + >[data-node-id].list { + /* 次级列表前间隔 */ + margin-left: 0 !important; + padding-left: 0; + } + + >[data-node-id] { + &:not(.li, .list) { + /* 列表项内容 */ + margin-right: 0.5em; + align-items: center; + display: flex; + min-width: 128px; + text-align: justify; + flex-shrink: 0; + } + + &[data-type="NodeBlockQueryEmbed"], + &[data-node-id].sb, + &[data-node-id].bq { + /* 列表项内的容器块与嵌入恢复上下排列 */ + display: block; + } + + } + + >.protyle-action { + /* 列表项标志居中 */ + position: absolute; + top: calc(50% - 0.125em); + transform: translate(0, -50%); + } + } + + // >[data-node-id].list>[data-node-id].li, + >[data-node-id].li { + /* 最顶层的列表项滚动 */ + overflow-x: auto; + } + } + } + } +} diff --git a/workspace/plugins/custom-block/src/styles/index.less b/workspace/plugins/custom-block/src/styles/index.less index b25d272..358c072 100644 --- a/workspace/plugins/custom-block/src/styles/index.less +++ b/workspace/plugins/custom-block/src/styles/index.less @@ -15,6 +15,7 @@ @import (once) url(./define.less); +@import (once) url(./custom-block-list-view-table.less); @import (once) url(./custom-block-render-content.less); @import (once) url(./custom-block-render-danmaku.less); @import (once) url(./custom-block-render-id.less);