右键编辑菜单优化

流氓兔 · 2024 年3 月 9 日 17:26

找了很久都没有看到能修改右键菜单布局、增加子菜单的插件，只能添加、隐藏或删除功能命令，就自个做了个CSS，尽力也只能做到按钮布局的变化。
obsidian版本是1.4.16，效果如图，主要是编辑区的右键菜单：

吐槽下Obsidian的右键菜单，明明右键菜单都不一样，class都是menu，也没个其它属性来区分（排序右键菜单除外），CSS选择起来都难。

流氓兔 · 2024 年3 月 9 日 17:27

/* 右键菜单 */
.menu:not(.mod-no-icon){
	display: flex;
	flex-wrap: wrap;	/* 允许元素换行 width: 173.6px;*/
	width: 13%;		/* 右键菜单宽度 */
}
.menu-separator{		/* 菜单中的分隔符 */
  flex-basis: 100%;		/* 占据整行 */
  height: 0px;			/* 隐藏分隔符的高度 */
  overflow: hidden;		/* 隐藏分隔符可能的内容 */
  padding: 0px;			/* 移除可能的内边距 */
}

/* 基础功能按钮 */
div[data-section="edit"] .menu-item-title{
	display: none;			/* 隐藏基础编辑功能的文本 */
}

/* 其它功能按钮 */
.menu-item:not([data-section="edit"]) div[class="menu-item-title"]{
	display:block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;	/* 功能文本溢出裁切 */
	width: 150px			/* 功能文本溢出裁切宽度 */
}

/* 针对侧边栏的右键菜单 */
div[class*="menu-item mod-checked"] div[class="menu-item-title"],
div[class*="menu-item mod-checked selected"] div[class="menu-item-title"]{
	width: 122.062px !important;
}

/* 针对标签栏文件的右键菜单中的子菜单 */
div[class*="menu-item has-submenu"]{
	width: 190px;
}

/* 针对标签栏文件的右键菜单中的阅读视图 */
div[class*="menu-item mod-checked"][data-section="pane"]{
	width: 190px;
}

Ari · 2024 年3 月 10 日 15:17

怎么删除右键菜单的命令啊

hisola · 2024 年3 月 10 日 16:41

哈哈哈哈这应该是往后的设计方向了，最近几个大版本已经把大纲和文件列表的子节点class全改成一样的每次更新都想死

流氓兔 · 2024 年3 月 10 日 22:15

没办法，类型属性都不是唯一的

流氓兔 · 2024 年3 月 10 日 22:32

那以后只能自己开发插件了

任尔东西南北风 · 2024 年3 月 11 日 04:37

虽早已不更新, 但一直还能用.

PlayerMiller · 2024 年4 月 1 日 15:14

谢谢。

v1.6.7 版 CSS 代码，点击展开

.menu-item.is-disabled {display: none;}
.menu:has(:first-child > :first-child > svg) {
  display: flex; flex-wrap: wrap; width: 142px;
  & .menu-separator {flex-basis: 110%;}
  & .menu-item .menu-item-title {display: none;}
  & .menu-item:hover .menu-item-title {
    display: block; position: absolute;
    left: 6px; margin-bottom: 28px;
    font-size: 8px; color: var(--text-muted);
  }
}

v1.7.4 版 CSS 代码

.menu-item.is-disabled {display: none;}
.menu:has(.menu-scroll > :first-child > :first-child > svg) {
  display: flex; width: 142px;
  & .menu-scroll {
    flex-wrap: wrap; flex-direction: unset;
    & .menu-separator {flex-basis: 110%;}
    & .menu-item .menu-item-title {display: none;}
    & .menu-item:hover .menu-item-title {
      display: block; position: absolute;
      left: 6px; margin-bottom: 28px;
      font-size: 8px; color: var(--text-muted);
    }
  }
}

流氓兔 · 2024 年4 月 4 日 12:11

更新下css，目前的缺点是所有右键窗口的宽度都是一样的，不太美观。

/* 右键菜单测试 */
.menu:not(.mod-no-icon):not(.MySnippets-statusbar-menu){
	display: flex;
	flex-wrap: wrap;	/* 允许元素换行 width: 173.6px;*/
	width: 205.6px;		/* 右键菜单宽度13.3854166% */
}
.menu-separator{		/* 菜单中的分隔符 */
  flex-basis: 100%;		/* 占据整行 */
  height: 0px;			/* 隐藏分隔符的高度 */
  overflow: hidden;		/* 隐藏分隔符可能的内容 */
  padding: 0px;			/* 移除可能的内边距 */
}

/* 基础功能按钮 */
div[data-section="edit"] .menu-item-title{
	display: none;			/* 隐藏基础编辑功能的文本 */
}

/* 其它功能按钮 */
.menu-item:not([data-section="edit"]) div[class="menu-item-title"]{
	display:block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;	/* 功能文本溢出裁切 */
	width: 150px			/* 功能文本溢出裁切宽度 */
}

/* 针对侧边栏的右键菜单 */
div[class="menu-item mod-checked"] div[class="menu-item-title"],
div[class="menu-item mod-checked selected"] div[class="menu-item-title"]{
	width: 132.062px !important;
}

/* 针对标签栏文件的右键菜单中的子菜单 */
div[class*="menu-item has-submenu"]{
	width: 198px;
}

/* 针对标签栏文件的右键菜单中的阅读视图 */
div[class*="menu-item mod-checked"][data-section="pane"]{
	width: 199px;
}

缺水的铜钱草 · 2024 年5 月 30 日 07:50

那个 编辑区右键菜单 就是图片里红框圈起来的那个，是怎么实现的，我复制了你的css，但不是这个效果

流氓兔 · 2024 年10 月 11 日 05:16

可以试试目前自用的css，如果没效果，可能就是样式被覆盖了，Ctrl+shift+i选择右键菜单元素查看哪个样式不生效

/* 右键菜单测试 */
.menu:not(.mod-no-icon):not(.MySnippets-statusbar-menu){
	display: flex;
	flex-wrap: wrap;	/* 允许元素换行 width: 173.6px;*/
	width: 205.6px;		/* 右键菜单宽度13.3854166% */
}
.menu-separator{		/* 菜单中的分隔符 */
  flex-basis: 100%;		/* 占据整行 */
  height: 0px;			/* 隐藏分隔符的高度 */
  overflow: hidden;		/* 隐藏分隔符可能的内容 */
  padding: 0px;			/* 移除可能的内边距 */
}

/* 基础功能按钮 */
div[data-section="edit"] .menu-item-title{
	display: none;			/* 隐藏基础编辑功能的文本 */
}

/* 其它功能按钮 */
.menu-item:not([data-section="edit"]) div[class="menu-item-title"]{
	display:block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;	/* 功能文本溢出裁切 */
	width: 150px			/* 功能文本溢出裁切宽度 */
}

/* 针对侧边栏的右键菜单 */
div[class="menu-item mod-checked"] div[class="menu-item-title"],
div[class="menu-item mod-checked selected"] div[class="menu-item-title"]{
	width: 132.062px !important;
}

/* 针对标签栏文件的右键菜单中的子菜单 */
div[class*="menu-item has-submenu"]{
	width: 198px;
}

/* 针对标签栏文件的右键菜单中的阅读视图 */
div[class*="menu-item mod-checked"][data-section="pane"]{
	width: 199px;
}

流氓兔 · 2024 年10 月 11 日 05:22

也可能你的是新版本，Obsidian把几个重要的类给合并了，所以css无效，我目前用的是1.4.16版

缺水的铜钱草 · 2024 年10 月 11 日 06:09

谢谢回复，不过还是没效果，看来应该是版本问题了

七又四分之一 · 2024 年11 月 7 日 13:52

可以换这个，功能更强大，一直在更新

七又四分之一 · 2024 年11 月 7 日 13:53

可以换 #16 的那个插件

七又四分之一 · 2024 年11 月 7 日 13:53

可以换 #16 那个插件

任尔东西南北风 · 2024 年11 月 7 日 18:12

我记得这个插件只能加而不能删吧, 只有那个老插件可以删或者说隐藏右键菜单里的选项.

流氓兔 · 2024 年11 月 9 日 10:19

这个插件不支持修改右键菜单布局、增加子菜单。