kjh2064/KArtSell.Aegis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(fe): replace raw text xx/xxx tab actions with polished SVG icon buttons and labels

Browse Source
This commit is contained in:
김재현
2026-08-15 20:58:27 +09:00
parent 62348d94c2
commit 367f7340f6
1 changed files with 43 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/shared/shell/KsTabs.vue
+43 -24
View File
@@ -66,24 +66,31 @@ const isTabActive = (tabId: string) => activeTabId.value === tabId
</div> </div>
<!-- Tab actions --> <!-- Tab actions -->
<div class="ks-tabs__actions"> <div v-if="tabs.length > 0" class="ks-tabs__actions">
<button <button
type="button"
class="ks-tabs__action"
title="다른 탭 모두 닫기"
@click="handleCloseOther(activeTabId!)"
v-if="tabs.length > 1 && activeTabId" v-if="tabs.length > 1 && activeTabId"
type="button"
class="ks-tabs__action-btn"
title="다른 탭 닫기"
aria-label="다른 탭 닫기"
@click="handleCloseOther(activeTabId!)"
> >
✕✕ <svg class="ks-tabs__action-icon" viewBox="0 0 16 16" width="12" height="12" fill="currentColor">
<path d="M4.5 1.75a.75.75 0 0 0-1.5 0v12.5a.75.75 0 0 0 1.5 0V1.75zM13 3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V3z"/>
</svg>
<span>다른 탭 닫기</span>
</button> </button>
<button <button
type="button" type="button"
class="ks-tabs__action" class="ks-tabs__action-btn"
title="모든 탭 닫기" title="전체 탭 닫기"
aria-label="전체 탭 닫기"
@click="handleCloseAll" @click="handleCloseAll"
v-if="tabs.length > 0"
> >
✕✕✕ <svg class="ks-tabs__action-icon" viewBox="0 0 16 16" width="12" height="12" fill="currentColor">
<path d="M2.343 2.343a.75.75 0 0 1 1.061 0L8 7.06l4.596-4.717a.75.75 0 1 1 1.06 1.06L9.06 8l4.596 4.596a.75.75 0 1 1-1.06 1.06L8 9.06l-4.596 4.596a.75.75 0 0 1-1.06-1.06L6.94 8 2.343 3.404a.75.75 0 0 1 0-1.061z"/>
</svg>
<span>전체 닫기</span>
</button> </button>
</div> </div>
</nav> </nav>
@@ -172,26 +179,38 @@ const isTabActive = (tabId: string) => activeTabId.value === tabId
.ks-tabs__actions { .ks-tabs__actions {
display: flex; display: flex;
gap: var(--spacing-2); align-items: center;
gap: var(--ks-space-1);
flex-shrink: 0; flex-shrink: 0;
border-left: 1px solid var(--color-border-primary); border-left: 1px solid var(--ks-color-border);
padding-left: var(--spacing-3); padding-left: var(--ks-space-2);
margin-left: var(--ks-space-2);
} }
.ks-tabs__action { .ks-tabs__action-btn {
background: none; display: inline-flex;
border: none; align-items: center;
color: var(--color-text-secondary); gap: var(--ks-space-1);
background: var(--ks-color-surface);
border: 1px solid var(--ks-color-border);
color: var(--ks-color-text-muted);
cursor: pointer; cursor: pointer;
padding: var(--spacing-1) var(--spacing-2); padding: 3px 8px;
border-radius: var(--border-radius-sm); height: 26px;
transition: all var(--transition-base); border-radius: var(--ks-radius-sm);
font-size: 14px; transition: var(--ks-transition-fast);
font-size: var(--ks-font-caption);
white-space: nowrap;
} }
.ks-tabs__action:hover { .ks-tabs__action-btn:hover {
background-color: var(--color-background-hover); background-color: var(--ks-color-neutral-100);
color: var(--color-text-primary); color: var(--ks-color-text);
border-color: var(--ks-color-neutral-300);
}
.ks-tabs__action-icon {
flex-shrink: 0;
} }
/* Scrollbar styling */ /* Scrollbar styling */