[css] 一个数据库视图菜单交互的小改动

本贴最后更新于 225 天前,其中的信息可能已经天翻地覆

数据库视图菜单:

两个方案中有一个是目前的方案,没有特意标注出来是为了保证公平投票,请不要打开思源笔记查看目前的方案,直接按照感觉来选择即可。

image.png

实在拿不定主意的话,可以用下方给出的代码片段,跟目前的方案对比体验一下。

并且欢迎回帖讨论。

更喜欢哪个方案?

单选 公开 永不结束 37 票
方案 A
40% 15 票
方案 B
59% 22 票
其他
0% 0 票

截止投票,然后把能改成方案 B 的代码片段分享一下:

/* 将数据库视图菜单中功能相同的「重命名」「设置」合并为「编辑视图」 https://ld246.com/article/1712750829922?r=JeffreyChen */
#commonMenu[data-name="av-view"] > .b3-menu__items > .b3-menu__item:nth-child(1) > .b3-menu__label {
    position: relative; /* 让父元素相对定位 */
    color: #00000000; /* 原文本颜色变为透明 */
}
#commonMenu[data-name="av-view"] > .b3-menu__items > .b3-menu__item:nth-child(1) > .b3-menu__label::after {
    content: "编辑视图";
    position: absolute; /* 绝对定位 */
    left: 0;
    color: var(--b3-theme-on-background); /* 新文本颜色 */
    z-index: 1; /* 确保伪元素在原始文本之上 */
}
#commonMenu[data-name="av-view"] > .b3-menu__items > .b3-menu__item:nth-child(2),
#commonMenu[data-name="av-view"] > .b3-menu__items > .b3-menu__separator {
    display: none; /* 隐藏设置和分隔线 */
}

相关的 PR :Pull Request #10956 · siyuan-note/siyuan

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    22336 引用 • 89377 回帖
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    69 引用 • 372 回帖
6 操作
JeffreyChen 在 2024-10-07 22:05:57 更新了该帖
JeffreyChen 在 2024-04-10 23:43:58 更新了该帖
JeffreyChen 在 2024-04-10 21:50:03 更新了该帖
JeffreyChen 在 2024-04-10 21:42:42 更新了该帖 JeffreyChen 在 2024-04-10 21:40:22 更新了该帖 JeffreyChen 在 2024-04-10 20:07:32 置顶了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 其实应该大部分人都知道哪个是目前的方案,如果想尝试一下另一个方案的感觉再投票,可以用下面这个 CSS 代码片段:

    #commonMenu[data-name="av-view"] > .b3-menu__items > .b3-menu__item:nth-child(1) > .b3-menu__label {
        position: relative; /* 让父元素相对定位 */
        color: #00000000; /* 原文本颜色变为透明 */
    }
    
    #commonMenu[data-name="av-view"] > .b3-menu__items > .b3-menu__item:nth-child(1) > .b3-menu__label::after {
        content: "编辑视图";
        position: absolute; /* 绝对定位 */
        left: 0;
        color: var(--b3-theme-on-background); /* 新文本颜色 */
        z-index: 1; /* 确保伪元素在原始文本之上 */
    }
    
    #commonMenu[data-name="av-view"] > .b3-menu__items > .b3-menu__item:nth-child(2),
    #commonMenu[data-name="av-view"] > .b3-menu__items > .b3-menu__separator {
        display: none; /* 隐藏设置和分隔线 */
    }
    
  • silent-tan 1 赞同

    我选择 A,保留重命名。原因:

    看起来是少了一个按钮(菜单/功能),但是多出来的会让我减少心智,特别是对于新用户来说,我思维还要兜一圈:“重命名是不是在编辑里面?”

    另外,保留可以用 @JeffreyChen 的方法自定义实现“去掉”,而去掉的话想要“保留”就很麻烦了

  • 看目前这个投票比例,最后应该还是保留方案 A 。说一下我对方案 B 的思考吧:

    原来无论点击「重命名」还是「设置」,都会打开同一个浮窗,是相同的行为。

    合并了会更直观,用户不需要思考点击哪一个,不需要做选择,直接点就行了。

    原来的视觉路线:

    • 点击视图 → 看到重命名 → 我要重命名 → 点击重命名
    • 点击视图 → 看到重命名 → 我不是要重命名,我要…… → 看到设置 → 点击设置

    修改之后:

    • 点击视图 → 看到编辑视图 → 我要重命名/…… → 点击编辑视图

    image.png

  • 回帖顶一顶

  • 我感觉可以把“编辑视图”改成“设置”或者“编辑列”或者“编辑类型”。

    所以我投了 A

    1 回复
  • NieJianYing

    昨天看:😳 抽象。

    今天再看:😭 更抽象了。

  • 今天回来看这个帖子,突然发现你的说法很奇怪:

    “编辑列”或者“编辑类型”。

    那个是视图的菜单,叫“编辑列”“编辑类型”肯定都是不行的

    所以我投了 A

    为啥不投「其他」呢?

请输入回帖内容 ...
JeffreyChen
思源是支持 Markdown 语法输入的块编辑器,而不是 Markdown 文件编辑器; 思源笔记同步教程:ld246.com/article/1692089679062

推荐标签 标签

  • 倾城之链
    23 引用 • 66 回帖 • 137 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 3 关注
  • 又拍云

    又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”,乌云众测平台认证的“安全云”,为移动时代的创业者提供新一代的 CDN 加速服务。

    21 引用 • 37 回帖 • 545 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    209 引用 • 358 回帖
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 453 关注
  • API

    应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

    77 引用 • 430 回帖 • 2 关注
  • 单点登录

    单点登录(Single Sign On)是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。

    1 引用 • 7 回帖 • 587 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 9 关注
  • V2Ray
    1 引用 • 15 回帖 • 1 关注
  • golang

    Go 语言是 Google 推出的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克(Rob Pike)说:我们之所以开发 Go,是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    497 引用 • 1387 回帖 • 283 关注
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    90 引用 • 899 回帖
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • 心情

    心是产生任何想法的源泉,心本体会陷入到对自己本体不能理解的状态中,因为心能产生任何想法,不能分出对错,不能分出自己。

    59 引用 • 369 回帖
  • 房星科技

    房星网,我们不和没有钱的程序员谈理想,我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源,遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 585 关注
  • 链书

    链书(Chainbook)是 B3log 开源社区提供的区块链纸质书交易平台,通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书,我们共同构建这个全新的交易平台,让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线,也许以后还有计划重制上线。

    14 引用 • 257 回帖
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    17 引用 • 236 回帖 • 325 关注
  • SSL

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 432 关注
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    85 引用 • 165 回帖 • 1 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 786 关注
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据。 这种动作(网页浏览,搜索和其他用户的行动)是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 167 关注
  • ngrok

    ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 624 关注
  • 创业

    你比 99% 的人都优秀么?

    84 引用 • 1399 回帖 • 1 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3187 引用 • 8213 回帖
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    25 引用 • 191 回帖 • 16 关注
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 47 关注