danvics/docling-studio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Merge pull request #37 from scub-france/feature/ui-polish

Browse source 
Feature/UI polish
This commit is contained in:
Pier-Jean Malandrino 2026-04-02 17:02:53 +02:00 committed by GitHub
commit 199785aa29
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 68 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
frontend/src/features/history/ui/HistoryList.vue
View file

@ -13,7 +13,14 @@
<div class="item-main">
<div class="item-header">
<span class="item-filename">{{ analysis.documentFilename }}</span>
<span class="item-status" :class="statusClass(analysis.status)">
<span
v-if="analysis.status === 'COMPLETED'"
class="item-status status-completed"
:title="analysis.status"
>
<svg class="status-dot" viewBox="0 0 8 8" fill="currentColor"><circle cx="4" cy="4" r="4"/></svg>
</span>
<span v-else class="item-status" :class="statusClass(analysis.status)">
{{ analysis.status }}
</span>
</div>
@ -81,20 +88,26 @@ function duration(analysis: Analysis) {
.history-items {
display: flex;
flex-direction: column;
gap: 2px;
gap: 6px;
padding: 12px;
}
.history-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
border-bottom: 1px solid var(--border);
transition: background var(--transition);
padding: 12px 16px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
transition: all 150ms ease;
cursor: pointer;
}
.history-item:hover { background: var(--bg-hover); }
.history-item:hover {
border-color: var(--accent);
background: var(--bg-elevated);
}
.item-main { flex: 1; min-width: 0; }
@ -122,9 +135,14 @@ function duration(analysis: Analysis) {
flex-shrink: 0;
}
.status-dot {
width: 8px;
height: 8px;
}
.status-pending { background: rgba(234, 179, 8, 0.15); color: var(--warning); }
.status-running { background: rgba(59, 130, 246, 0.15); color: var(--info); }
.status-completed { background: rgba(34, 197, 94, 0.15); color: var(--success); }
.status-completed { background: none; color: var(--success); padding: 0; }
.status-failed { background: rgba(239, 68, 68, 0.15); color: var(--error); }
.item-meta {

23
frontend/src/features/settings/ui/SettingsPanel.vue
View file

@ -40,14 +40,14 @@ const { t } = useI18n()
.settings-panel {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 500px;
gap: 24px;
max-width: 320px;
}
.setting-group {
display: flex;
flex-direction: column;
gap: 6px;
gap: 8px;
}
.setting-label {
@ -59,33 +59,36 @@ const { t } = useI18n()
}
.setting-toggle {
display: flex;
display: inline-flex;
gap: 2px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
padding: 3px;
width: fit-content;
}
.setting-toggle button {
flex: 1;
padding: 8px 16px;
padding: 6px 16px;
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
color: var(--text-muted);
background: transparent;
border: none;
border-radius: calc(var(--radius-sm) - 2px);
cursor: pointer;
transition: all var(--transition);
transition: all 200ms ease;
}
.setting-toggle button:hover {
color: var(--text);
color: var(--text-secondary);
background: var(--bg-hover);
}
.setting-toggle button.active {
background: var(--accent-muted);
color: var(--accent);
font-weight: 600;
}
.setting-input {

16
frontend/src/pages/DocumentsPage.vue
View file

@ -89,19 +89,25 @@ onMounted(() => {
.doc-items {
display: flex;
flex-direction: column;
gap: 2px;
gap: 6px;
padding: 12px;
}
.doc-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
border-bottom: 1px solid var(--border);
transition: background var(--transition);
padding: 12px 16px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
transition: all 150ms ease;
}
.doc-row:hover { background: var(--bg-hover); }
.doc-row:hover {
border-color: var(--accent);
background: var(--bg-elevated);
}
.doc-row-info {
display: flex;

15
frontend/src/pages/HomePage.vue
View file

@ -17,10 +17,12 @@
<!-- Stats -->
<div class="home-stats" v-if="docCount > 0 || analysisCount > 0">
<div class="stat-card" @click="$router.push('/documents')">
<svg class="stat-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"/></svg>
<div class="stat-value">{{ docCount }}</div>
<div class="stat-label">{{ t('home.documents') }}</div>
</div>
<div class="stat-card" @click="$router.push('/history')">
<svg class="stat-icon" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/></svg>
<div class="stat-value">{{ analysisCount }}</div>
<div class="stat-label">{{ t('home.analyses') }}</div>
</div>
@ -171,10 +173,21 @@ onMounted(() => {
}
.stat-card:hover {
border-color: var(--border-light);
border-color: var(--accent);
background: var(--bg-elevated);
}
.stat-icon {
width: 20px;
height: 20px;
color: var(--text-muted);
margin-bottom: 4px;
}
.stat-card:hover .stat-icon {
color: var(--accent);
}
.stat-value {
font-size: 28px;
font-weight: 700;

5
frontend/src/pages/StudioPage.vue
View file

@ -551,12 +551,17 @@ onBeforeUnmount(() => {
display: flex;
align-items: center;
gap: 20px;
min-width: 0;
}
.topbar-title {
font-size: 15px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.mode-toggle {