【功能建议】建议大纲目录优化展示效果,增加层级标识线

效果图示如下:

16341804111.jpg

广告 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • 88250
    订阅者

    这个暂时不添加,感谢反馈。

    1 回复
  • Gr6011010352
    订阅者 作者

    没关系,我只是提个建议,有空了不麻烦的话,顺手加一下 😄

  • abbj 4 评论
    支持者 订阅者

    +1 啊,我自己想搞但实在搞不定。

    我觉得没什么必要,没看见什么软件目录还加竖线的 。要明显区分,改各级大纲样式就好了
    Achuan-2
    @Achuan-2 好多文件管理器的文件树是有的,比如 tc xyplorer 之类的,vscode 也有,可惜我自己搞不定啊。有一个还是更清晰些。
    abbj
    @abbj vscode 你一说我才发现有,然而有和没有差不多,感知完全不强 。只有第一层级的竖线有用 。要加只要仿照列表竖线加就是了
    Achuan-2
    @Achuan-2 我这看 vscode 也是多层级的竖线,只是会自动显示隐藏,而且最末一级显示最突出。 思源的文件树是一些并列的 li,我只会搞个 border-left,搞不定缩进关系,也实在没时间琢磨了。先这么用吧。
    abbj
  • abbj
    支持者 订阅者

    整出来一个,不够完美,分享下,凑合用吧。

    image.png

    image.png

    /*---------------------------------------------------*/
    /*文件树缩进线v142*/
    /*文件树整体结构是一个class为.b3-list.b3-list--files的ul,其中第一个li为笔记本名称,这个li同级的ul为当前笔记本的各条笔记列表,分别以li表示,每个li若有子笔记,则用一个ul包裹,内部重复这个层级结构*/
    /*此外,每个li内部包含一些span,分别是折叠三角、emoji图标等*/
    /*相对定位的起点,左对齐*/
    ul.b3-list.b3-list--files {
    	position: relative;
    	padding-left: 10px !important;
    }
    
    /*每个li的起点都是一个三角,调整这个三角的缩进*/
    .b3-list-item__toggle.b3-list-item__toggle--hl,
    .b3-list-item.b3-list-item--hide-action,
    .b3-list--files>span.b3-list-item__toggle.b3-list-item__toggle--hl,
    .b3-list--files>span.b3-list-item__toggle.b3-list-item__toggle--hl fn__hidden {padding-left: 0px !important;}
    
    ul.b3-list.b3-list--files ul>li {
    	position: relative;
    	padding-left: 20px !important;
    }
    
    ul.b3-list.b3-list--files ul>ul {
    	position: relative;
    	padding-left: 20px !important;
    }
    
    /*列表左边框作为层级线,自动显示隐藏*/
    ul.b3-list.b3-list--files:hover>ul li:before,
    ul.b3-list.b3-list--files:hover>ul ul:before {
    	content: "";
        position: absolute;
        height: 100%;
        width: 1px;
        background-color: var(--custom-font-color-ui);
        top: 0;
    	left: 2px;
    	transition:all 0.5s ease-in-out;
    }
    
    /*文档树缩进线结束*/
    
    
    /*---------------------------------------------------*/
    /*大纲缩进线v142*/
    /*大纲整体是一个class为b3-list--background的ul,一级标题是大纲的一个li,更次级标题放在和一级li同级的ul中,内部结果如上循环*/
    /*先把大纲整体改为相对定位,左边距为0*/
    ul.b3-list.b3-list--background {
    	position:relative;
    	padding-left: 0px !important;
    }
    /*一级标题一级包含下级标题的ul的边距设置,ul左边距作为层级线位置*/
    ul.b3-list.b3-list--background>li {
    	position:relative;
    	margin-left: 0px;
    }
    ul.b3-list.b3-list--background>ul {
    	position:relative;
    	margin-left: 12px;
    }
    /*设置一级以下标题的边距*/
    ul.b3-list.b3-list--background ul li {
    	position:relative;
    	margin-left: 18px;
    }
    ul.b3-list.b3-list--background ul ul {
    	position:relative;
    	margin-left: 20px;
    }
    /*相对定位模式下,清楚折叠三角左边距,避免缩进累积*/
    .b3-list-item.b3-list-item--hide-action {padding-left:0px !important;}
    /*ul左边框作为层级线,自动显示隐藏*/
    ul.b3-list.b3-list--background:hover ul:before {
    	content: "";
        position: absolute;
        height: 100%;
        width: 1px;
        background-color: var(--custom-font-color-ui);
        top: 0;
    	left: 2px;
    	transition:all 0.5s ease-in-out;
    }
    /*大纲缩进线结束*/
    /*---------------------------------------------------*/