-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(custom-block): 新增列表脑图视图 | Add list mind-map view.
- Loading branch information
1 parent
a1d5880
commit e997c55
Showing
9 changed files
with
267 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,6 +3,7 @@ | |
| ## 2023-07-07 | ||
|
|
||
| - 新增列表表格视图 | Add list table view. | ||
| - 新增列表脑图视图 | Add list mind-map view. | ||
|
|
||
| ## 2023-07-06 | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
226 changes: 226 additions & 0 deletions
226
workspace/plugins/custom-block/src/styles/custom-block-list-view-map.less
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,226 @@ | ||
| // 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 <http://www.gnu.org/licenses/>. | ||
|
|
||
| // 高度 | ||
| @height: calc(50% - var(--custom-block-list-guides-line-width) / 2); | ||
|
|
||
| // 辅助线 | ||
| .guides() { | ||
| content: ""; | ||
| // height: calc(50% - var(--custom-block-list-guides-line-width) / 2); | ||
| height: @height; | ||
| width: calc(2em - var(--custom-block-list-guides-line-width)); | ||
|
|
||
| // 覆盖默认视图的列表辅助线样式 | ||
| position: absolute !important; | ||
| border-left: var(--custom-block-list-guides-line-width) solid var(--b3-theme-on-surface) !important; | ||
| } | ||
|
|
||
| :root { | ||
| &[plugin-custom-block~=list-view-map] { | ||
|
|
||
| .b3-dialog__content, | ||
| .protyle-content { | ||
|
|
||
| [custom-block-list-view=map] { | ||
| &[data-node-id].list { | ||
| /* 导图块样式 */ | ||
| overflow-x: auto; | ||
| padding-top: 1em; | ||
| padding-bottom: 1em; | ||
|
|
||
| &, | ||
| &>[data-node-id].li { | ||
| >.protyle-attr { | ||
| /* 列表块属性标签 */ | ||
| top: 0; | ||
|
|
||
| >.protyle-attr--refcount { | ||
| /* 引用数按钮 */ | ||
| right: 2px; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| [data-node-id] { | ||
| &.li { | ||
| /* 列表项文字设置居中 */ | ||
| display: flex; | ||
| align-items: center; | ||
|
|
||
| &:first-of-type::after, | ||
| &:nth-last-of-type(2)::before { | ||
| /* 取消多余线条 */ | ||
| border: none !important; | ||
| } | ||
|
|
||
| &:first-of-type::before { | ||
| /* 上框线 */ | ||
| border-top-left-radius: var(--custom-block-border-radius); | ||
| } | ||
|
|
||
| &:nth-last-of-type(2)::after { | ||
| /* 下框线 */ | ||
| // height: calc(50% - var(--custom-block-list-guides-line-width) / 2); | ||
| border-bottom: var(--custom-block-list-guides-line-width) solid var(--b3-theme-on-surface) !important; | ||
| border-bottom-left-radius: var(--custom-block-border-radius) !important; | ||
| } | ||
|
|
||
| &:first-of-type:nth-last-of-type(2) { | ||
| // 单子项居中 | ||
| // top: 50%; | ||
| // transform: translate(0, -50%); | ||
|
|
||
| &::after { | ||
| /* 单个子项直线 */ | ||
| border-radius: 0 !important; | ||
| // height: calc(50% - var(--custom-block-list-guides-line-width) / 2); | ||
| } | ||
| } | ||
|
|
||
| &::before { | ||
| /* 上导航线 */ | ||
| .guides(); | ||
| top: @height; | ||
| left: 0; | ||
| border-top: var(--custom-block-list-guides-line-width) solid var(--b3-theme-on-surface); | ||
| } | ||
|
|
||
| &::after { | ||
| /* 下导航线 */ | ||
| .guides(); | ||
| // 覆盖默认视图的列表辅助线样式 | ||
| // top: 0 !important; | ||
| bottom: @height !important; | ||
| // left: 0 !important; | ||
| border-bottom: var(--custom-block-list-guides-line-width) solid var(--b3-theme-on-surface) !important; | ||
| } | ||
|
|
||
| &[data-subtype="u"] { | ||
| >div.protyle-action { | ||
| /* 无序列表标志 */ | ||
| top: calc(50%); | ||
| left: calc(2em - 20px); | ||
| } | ||
| } | ||
|
|
||
| >div:nth-child(2) { | ||
| /* 修复单子项导航线错位问题 */ | ||
| margin-top: 4px !important; | ||
| } | ||
|
|
||
| >div.protyle-action { | ||
| /* 表格项标志 */ | ||
| top: calc(50% - 12px); | ||
| position: absolute; | ||
| transform: translate(0, -50%); | ||
| // left: 0.5em; | ||
| z-index: 2; | ||
| } | ||
|
|
||
| >[data-node-id] { | ||
|
|
||
| &::before { | ||
| /* 去除竖线 */ | ||
| display: none; | ||
| } | ||
|
|
||
| // &.list { | ||
| // display: flex; | ||
| // flex-flow: column wrap; | ||
| // align-content: center; | ||
| // } | ||
|
|
||
| &[data-type="NodeHeading"] { | ||
| /* 移除脑图内部标题块的左侧边线 */ | ||
| border-left: 0 solid transparent; | ||
| padding-left: 0; | ||
| } | ||
|
|
||
| &:not(.li, .list) { | ||
| /* 叶子节点 */ | ||
| align-items: center; | ||
| display: flex; | ||
|
|
||
| /* 块内边距 */ | ||
| padding: 4px; | ||
|
|
||
| /* 叶子节点的轮廓 */ | ||
| outline: 1px solid var(--b3-theme-on-surface); | ||
| border-radius: var(--custom-block-border-radius); | ||
|
|
||
| // 文字框 | ||
| &:is(.p, .h1, .h2, .h3, .h4, .h5, .h6) { | ||
| /* 段落块/标题块内边距为 0 */ | ||
| padding: 0; | ||
|
|
||
| >[contenteditable][spellcheck] { | ||
| white-space: pre; // 保留换行 | ||
| padding: 0 0.5em; | ||
| } | ||
| } | ||
|
|
||
| // 公式块 | ||
| &:is(.render-node[data-type="NodeMathBlock"]) { | ||
| min-height: 0 !important; | ||
|
|
||
| .katex-display { | ||
| margin: 0; | ||
| padding: 0.25em; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| &[data-type="NodeBlockQueryEmbed"], | ||
| &.sb, | ||
| &.bq { | ||
| /* 列表项内的容器块与嵌入块恢复上下排列 */ | ||
| display: block; | ||
| } | ||
| } | ||
|
|
||
| } | ||
|
|
||
| &.list { | ||
| /* 整个导图列表取消缩进 */ | ||
| margin: 0; | ||
| padding: 0 0 0 1em; | ||
| // transition: all 500ms; | ||
|
|
||
| &::after { | ||
| /* 后继承线 */ | ||
| content: ""; | ||
| position: absolute; | ||
| left: -1em; | ||
| top: @height; | ||
| border-bottom: var(--custom-block-list-guides-line-width) solid var(--b3-theme-on-surface); | ||
| width: 2em; | ||
| height: 0; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| &.list>[data-node-id].li:first-of-type:nth-last-of-type(2), | ||
| &>[data-node-id].list>[data-node-id].li:first-of-type:nth-last-of-type(2), | ||
| [data-node-id]:not(.li)>[data-node-id].list>[data-node-id].li:first-of-type:nth-last-of-type(2) { | ||
| /* 修复顶层列表项错位问题 */ | ||
| top: 0; | ||
| transform: none; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters