mirror of
https://github.com/raven-pensieve/obsidian-ace-code-editor.git
synced 2026-07-22 05:48:56 +00:00
feat: 在片段导航中添加可见性图标与修复图标名 (#88)
* feat: 在片段导航中添加可见性图标与修复图标名 在 SnippetsNavigation 组件中添加表示文件可见性的图标（Eye / EyeClosed），并在文件列表项中显示对应图标以直观指示启用/禁用 状态。为此新增了相应的 JSX 结构和 CSS 样式（nav-file-title） 以调整图标与标题的间距。 同时修正了若干菜单项使用的图标名称，统一为正确的图标键： arrow-up-az、arrow-up-za、arrow-up-10、arrow-up-01。修正这些名 称可避免图标无法加载或显示错误，确保排序菜单图标与语义一致。 整体上这两个改动提升了列表的可用性和视觉反馈，并修复了因 图标名称错误导致的显示问题。 * refactor: 移除 SnippetsFileModal 的样式文件 移除 styles/SnippetsFileModal.css 并从样式入口中删除引用。 主要改动是删除整个模态窗口的 CSS 文件以及 styles/styles.ts 中对该文件的导入。这样做是为了清理未使用或已被替代的样式， 减少打包体积并避免重复样式冲突。
This commit is contained in:
RavenHogWarts
GitHub
parent
7c9d8e72f8
commit
5cb51b0657
4 changed files with 25 additions and 216 deletions
|
|
@ -8,6 +8,8 @@ import {
|
|||
CaseSensitive,
|
||||
CircleEllipsis,
|
||||
Edit,
|
||||
Eye,
|
||||
EyeClosed,
|
||||
RefreshCw,
|
||||
Search,
|
||||
SortAsc,
|
||||
|
|
@ -149,7 +151,7 @@ export const SnippetsNavigation: React.FC<SnippetsNavigationProps> = ({
|
|||
menu.addItem((item) =>
|
||||
item
|
||||
.setTitle(LL.view.snippets.sort_by_name_asc())
|
||||
.setIcon("arrow-up-a-z")
|
||||
.setIcon("arrow-up-az")
|
||||
.setChecked(sortType === "name_asc")
|
||||
.onClick(() => setSortType("name_asc"))
|
||||
);
|
||||
|
|
@ -157,7 +159,7 @@ export const SnippetsNavigation: React.FC<SnippetsNavigationProps> = ({
|
|||
menu.addItem((item) =>
|
||||
item
|
||||
.setTitle(LL.view.snippets.sort_by_name_desc())
|
||||
.setIcon("arrow-up-z-a")
|
||||
.setIcon("arrow-up-za")
|
||||
.setChecked(sortType === "name_desc")
|
||||
.onClick(() => setSortType("name_desc"))
|
||||
);
|
||||
|
|
@ -167,7 +169,7 @@ export const SnippetsNavigation: React.FC<SnippetsNavigationProps> = ({
|
|||
menu.addItem((item) =>
|
||||
item
|
||||
.setTitle(LL.view.snippets.sort_by_mtime_desc())
|
||||
.setIcon("arrow-up-1-0")
|
||||
.setIcon("arrow-up-10")
|
||||
.setChecked(sortType === "mtime_new")
|
||||
.onClick(() => setSortType("mtime_new"))
|
||||
);
|
||||
|
|
@ -175,7 +177,7 @@ export const SnippetsNavigation: React.FC<SnippetsNavigationProps> = ({
|
|||
menu.addItem((item) =>
|
||||
item
|
||||
.setTitle(LL.view.snippets.sort_by_mtime_asc())
|
||||
.setIcon("arrow-up-0-1")
|
||||
.setIcon("arrow-up-01")
|
||||
.setChecked(sortType === "mtime_old")
|
||||
.onClick(() => setSortType("mtime_old"))
|
||||
);
|
||||
|
|
@ -185,7 +187,7 @@ export const SnippetsNavigation: React.FC<SnippetsNavigationProps> = ({
|
|||
menu.addItem((item) =>
|
||||
item
|
||||
.setTitle(LL.view.snippets.sort_by_ctime_desc())
|
||||
.setIcon("arrow-up-1-0")
|
||||
.setIcon("arrow-up-10")
|
||||
.setChecked(sortType === "ctime_new")
|
||||
.onClick(() => setSortType("ctime_new"))
|
||||
);
|
||||
|
|
@ -193,7 +195,7 @@ export const SnippetsNavigation: React.FC<SnippetsNavigationProps> = ({
|
|||
menu.addItem((item) =>
|
||||
item
|
||||
.setTitle(LL.view.snippets.sort_by_ctime_asc())
|
||||
.setIcon("arrow-up-0-1")
|
||||
.setIcon("arrow-up-01")
|
||||
.setChecked(sortType === "ctime_old")
|
||||
.onClick(() => setSortType("ctime_old"))
|
||||
);
|
||||
|
|
@ -468,6 +470,19 @@ export const SnippetsNavigation: React.FC<SnippetsNavigationProps> = ({
|
|||
onClick={() => onFileSelect(file.name)}
|
||||
onContextMenu={(e) => handleContextMenu(e, file)}
|
||||
>
|
||||
<div className="nav-file-title-icon">
|
||||
{file.enabled ? (
|
||||
<Eye
|
||||
size={24}
|
||||
className="svg-icon mod-success"
|
||||
/>
|
||||
) : (
|
||||
<EyeClosed
|
||||
size={24}
|
||||
className="svg-icon mod-warning"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className="nav-file-title-content"
|
||||
aria-label={
|
||||
|
|
|
|||
|
|
@ -63,6 +63,10 @@
|
|||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-file-title {
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.ace-snippets-empty-state {
|
||||
|
|
|
|||
|
|
@ -1,209 +0,0 @@
|
|||
.ace-snippets-file-modal {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
color: var(--text-normal);
|
||||
font-size: var(--font-ui-small);
|
||||
}
|
||||
|
||||
.snippets-modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 12px;
|
||||
border-bottom: 1px solid var(--background-modifier-border);
|
||||
}
|
||||
|
||||
.snippets-modal-header h2 {
|
||||
margin: 0;
|
||||
font-size: var(--font-ui-medium);
|
||||
font-weight: var(--font-semibold);
|
||||
color: var(--text-normal);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.snippets-modal-header-icon {
|
||||
color: var(--text-accent);
|
||||
}
|
||||
|
||||
.snippets-modal-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.snippets-new-file {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background-color: var(--background-secondary);
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
border-radius: var(--radius-m);
|
||||
}
|
||||
|
||||
.snippets-new-file input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.snippets-new-file-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.snippets-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.snippets-search {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.snippets-search input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.snippets-action-buttons {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.snippets-action-buttons button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
border-radius: var(--radius-s);
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
transition: color 0.15s ease, background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.snippets-action-buttons button:hover {
|
||||
background-color: var(--background-modifier-hover);
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
.snippets-file-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--background-modifier-border);
|
||||
border-radius: var(--radius-m);
|
||||
background-color: var(--background-primary);
|
||||
}
|
||||
|
||||
.snippets-file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid var(--background-modifier-border);
|
||||
transition: background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.snippets-file-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.snippets-file-item:hover {
|
||||
background-color: var(--background-modifier-hover);
|
||||
}
|
||||
|
||||
.snippets-file-name {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: var(--font-medium);
|
||||
color: var(--text-normal);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.snippets-file-badge {
|
||||
font-size: var(--font-ui-smaller);
|
||||
color: var(--text-muted);
|
||||
background-color: var(--background-secondary-alt);
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--radius-s);
|
||||
}
|
||||
|
||||
.snippets-file-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.snippets-file-actions .snippets-toggle {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.snippets-file-actions button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
border-radius: var(--radius-s);
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.snippets-file-actions button:hover {
|
||||
background-color: var(--background-modifier-hover);
|
||||
color: var(--text-normal);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.snippets-file-actions .snippets-delete-btn:hover {
|
||||
color: var(--text-error);
|
||||
background-color: var(--background-modifier-error-hover);
|
||||
}
|
||||
|
||||
.snippets-empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
min-height: 150px;
|
||||
color: var(--text-muted);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.snippets-empty-icon {
|
||||
color: var(--text-faint);
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius-s);
|
||||
}
|
||||
|
||||
button.mod-cta {
|
||||
background-color: var(--interactive-accent);
|
||||
color: var(--text-on-accent);
|
||||
}
|
||||
|
||||
button.mod-cta:hover {
|
||||
background-color: var(--interactive-accent-hover);
|
||||
}
|
||||
|
|
@ -8,4 +8,3 @@ import "./QuickConfigModal.css";
|
|||
import "./SettingsTab.css";
|
||||
import "./SettingsView.css";
|
||||
import "./SnippetsEditorView.css";
|
||||
import "./SnippetsFileModal.css";
|
||||
|
|
|
|||
Loading…
Reference in a new issue