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

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

数据库视图菜单:

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

image.png

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

并且欢迎回帖讨论。

更喜欢哪个方案?

单选 公开 永不结束 38 票
方案 A
39% 15 票
方案 B
60% 23 票
其他
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

  • 思源笔记

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

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

    25022 引用 • 103083 回帖 • 1 关注
  • 代码片段

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

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

    139 引用 • 926 回帖
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 置顶了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • openAI via Android

    围观

  • 其实应该大部分人都知道哪个是目前的方案,如果想尝试一下另一个方案的感觉再投票,可以用下面这个 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 赞同 via macOS

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

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

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

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

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

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

    原来的视觉路线:

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

    修改之后:

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

    image.png

  • 回帖顶一顶

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

    所以我投了 A

    1 回复
  • NieJianYing via macOS

    昨天看:😳 抽象。

    今天再看:😭 更抽象了。

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

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

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

    所以我投了 A

    为啥不投「其他」呢?

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

推荐标签 标签

  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 667 关注
  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1063 引用 • 3455 回帖 • 167 关注
  • 禅道

    禅道是一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法 scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。

    6 引用 • 15 回帖 • 31 关注
  • Lute

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

    28 引用 • 197 回帖 • 31 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 649 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 385 关注
  • 外包

    有空闲时间是接外包好呢还是学习好呢?

    26 引用 • 233 回帖 • 3 关注
  • Sandbox

    如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。

    432 引用 • 1250 回帖 • 599 关注
  • PWA

    PWA(Progressive Web App)是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术,在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 175 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    21 引用 • 204 回帖
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 67 回帖 • 444 关注
  • Office

    Office 现已更名为 Microsoft 365. Microsoft 365 将高级 Office 应用(如 Word、Excel 和 PowerPoint)与 1 TB 的 OneDrive 云存储空间、高级安全性等结合在一起,可帮助你在任何设备上完成操作。

    5 引用 • 34 回帖 • 1 关注
  • 旅游

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

    94 引用 • 901 回帖
  • PWL

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织,“用爱发电”象征开源与贡献精神,加入组织,代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入:用爱发电组织邀请帖
    用爱发电组织官网:https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力:

    • 遵守开源守则,体现开源&贡献精神:以分享为目的,拒绝非法牟利。
    • 自我保护:使用适当的 License 保护自己的原创作品。
    • 尊重他人:不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露;以礼相待,尊重所有对社区做出贡献的开发者;通过他人的分享习得知识,要留下足迹,表示感谢。
    • 热爱编程、热爱学习:加入组织,热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友,也同样欢迎默默成就的朋友。
    • 倾听:正确并恳切对待、处理问题与建议,及时修复开源项目的 Bug ,及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视:不诋毁、轻视、嘲讽其他开发者,主动提出建议、施以帮助,以和谐为本。只要他人肯努力,你也可能会被昔日小看的人所超越,所以请保持谦虚。
    • 乐观且活跃:你的努力决定了你的高度。不要放弃,多年后回头俯瞰,才会发现自己已经成就往日所仰望的水平。积极地将项目开源,帮助他人学习、改进,自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖
  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    36 引用 • 155 回帖
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖 • 3 关注
  • Excel
    31 引用 • 28 回帖
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    183 引用 • 1011 回帖
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识,提高团队的工作效率,让用户满意。

    3 引用 • 8 回帖
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    54 引用 • 37 回帖
  • CentOS

    CentOS(Community Enterprise Operating System)是 Linux 发行版之一,它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码,因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    239 引用 • 224 回帖
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器,详细介绍请看 将 Java Swing 应用变成 Web 应用

    1 引用 • 15 回帖 • 642 关注
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 179 关注
  • SVN

    SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 688 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 543 关注
  • Word
    13 引用 • 40 回帖
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    52 引用 • 228 回帖 • 1 关注