CSS 交换「折叠」和「非折叠」展示以默认折叠文档属性

如何默认折叠文档属性 继续讨论:

通过 CSS 属性选择器将「折叠」和「非折叠」的展示交换了。因为 Ob 每次重启计算机默认「非折叠」,以此达到默认折叠文档属性、点击展开。

效果展示:

默认折叠、点击展开

20231206_005342

添加文档属性

20231206_005421

鼠标移出前都会保持显示。


CSS 功能代码
/*折叠时显示文档属性*/
.metadata-content {display: unset !important;}
.metadata-container.is-collapsed .metadata-property {display: flex;}

/*添加文档属性时系统会自动取消折叠,对此进行处理*/
.metadata-container:not(.is-collapsed) :is(.metadata-properties, .metadata-property):not(:has([placeholder="没有值"]:empty)):not(:hover) {
  height: 0;
}

/*折叠箭头交换*/
.metadata-properties-heading .collapse-icon SVG {--collapse-icon-color: var(--text-accent); transform: rotate(-90deg);}
.metadata-properties-heading .collapse-icon.is-collapsed SVG {--collapse-icon-color-collapsed: var(--text-faint); transform: rotate(0);}
  • 注意:通过 :hover 来使新增而填上值的文档属性不立刻应用 {height: 0},因此填写的时候鼠标不能移出栏,也不能右键目录操作,会被判定脱离了 :hover。在第二栏填上值之前还是可以右键目录操作的。
  • 为了能够添加文档属性,在「非折叠」状态排除了没有值的文档属性,因而同理所有没有值的文档属性都不能默认折叠。

如果有更好的代码写法还望多多建议。

简单的美化:

20231205_192745

CSS 美化代码,和功能代码一起使用
.metadata-container /*与编辑区顶部间距*/ {margin-top: -20px;}
.metadata-add-button /*禁用添加按钮*/ {display: none;}

/*文档属性图标*/
.metadata-properties-heading {visibility: hidden; cursor: pointer; position: absolute;
  bottom: -28px; /*位置*/
}
.metadata-properties-heading::before {visibility: visible;
  content: "----------"; /*换上你的图标*/
}

/*平时隐藏,悬停显示*/
.metadata-properties-heading:not(:hover)::before {opacity: 0; transition: var(--anim-duration-fast) var(--anim-duration-fast);}
4 个赞

旧帖存档,内容已合并至 #1

2 个赞

左侧折叠箭头最好也改一下

1 个赞

已改,感谢建议~

有用,感谢大佬~

发现个bug,开启css后实时编辑模式下属性会显示不全,如图,源码下是三条属性但切换成实施编辑就只剩一条了……
屏幕截图 2024-01-21 013612

屏幕截图 2024-01-21 013634

嗯?这个 CSS 的目的是折叠文档属性啊,当然不显示了。

而且只是默认折叠。再点开就展开了。没加美化代码参考首帖第一个 GIF,加了参考第三个 GIF。

你唯一显示的那个是因为你的属性类型是“数字”,Ob 属性类型为“文本”和“列表”以外的数据没有存储在对应元素里,开发控制台就能看到,属于“没有值的文档属性”,所以显示出来了。

事实上,即使你需要 YAML 为数字,你也不需要选择属性类型为数字,依然选择属性类型“文本”或“列表”,填写的值依然是数字即可。

不需要默认折叠文档属性的功能,只加美化代码即可。

谢谢,小白终于明白点了