hemp/tmc-test-task
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upd

Browse Source
This commit is contained in:
Oscar
2026-06-03 21:00:28 +03:00
parent 61e3e9f916
commit dd86c564c4
8 changed files with 255 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
frontend/app/components/LeftPanel.vue
View File

@@ -2,7 +2,9 @@
<div class="panel">
<div class="panel-header">
<div class="panel-title-row">
<h2 class="panel-title">All items</h2>
<h2 class="panel-title">
All items
</h2>
<button class="btn-primary" @click="showAddModal = true">
<svg width="11" height="11" viewBox="0 0 11 11" fill="none" aria-hidden="true">
<path d="M5.5 1V10M1 5.5H10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
@@ -59,7 +61,9 @@
<div v-if="showAddModal" class="modal-overlay" @click.self="closeModal">
<div class="modal-card">
<div class="modal-header">
<p class="modal-title">Add new item</p>
<p class="modal-title">
Add new item
</p>
<button class="modal-close" aria-label="Close" @click="closeModal">
<svg width="13" height="13" viewBox="0 0 13 13" fill="none" aria-hidden="true">
<path d="M1.5 1.5L11.5 11.5M11.5 1.5L1.5 11.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
@@ -74,8 +78,12 @@
@keydown.enter="submitAdd"
>
<div class="modal-footer">
<button class="btn-ghost" @click="closeModal">Cancel</button>
<button class="btn-primary" @click="submitAdd">Add item</button>
<button class="btn-ghost" @click="closeModal">
Cancel
</button>
<button class="btn-primary" @click="submitAdd">
Add item
</button>
</div>
</div>
</div>
@@ -161,6 +169,7 @@ function submitAdd() {
/* ── Header ── */
.panel-header {
height: 108px;
padding: 18px 20px 16px;
border-bottom: 1px solid var(--border);
background: var(--surface);
@@ -209,7 +218,9 @@ function submitAdd() {
font-size: 0.825rem;
color: var(--text-primary);
outline: none;
transition: border-color 150ms ease, background 150ms ease;
transition:
border-color 150ms ease,
background 150ms ease;
&::placeholder {
color: var(--text-muted);
@@ -228,7 +239,7 @@ function submitAdd() {
gap: 6px;
padding: 6px 12px;
background: var(--text-primary);
color: #FFFFFF;
color: #ffffff;
border: none;
border-radius: var(--radius-sm);
font-family: var(--font-sans);
@@ -237,7 +248,9 @@ function submitAdd() {
cursor: pointer;
letter-spacing: 0.01em;
white-space: nowrap;
transition: background 150ms ease, transform 100ms ease;
transition:
background 150ms ease,
transform 100ms ease;
&:hover {
background: #333333;
@@ -257,7 +270,10 @@ function submitAdd() {
font-size: 0.825rem;
color: var(--text-secondary);
cursor: pointer;
transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
transition:
color 150ms ease,
border-color 150ms ease,
background 150ms ease;
&:hover {
color: var(--text-primary);
@@ -271,9 +287,16 @@ function submitAdd() {
flex: 1;
overflow-y: auto;
&::-webkit-scrollbar { width: 3px; }
&::-webkit-scrollbar-track { background: transparent; }
&::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
&::-webkit-scrollbar {
width: 3px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 2px;
}
}
.item-list {
@@ -283,8 +306,14 @@ function submitAdd() {
}
@keyframes item-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.item-row {
@@ -300,7 +329,9 @@ function submitAdd() {
&:hover {
background: var(--surface-subtle);
.action-btn { opacity: 1; }
.action-btn {
opacity: 1;
}
}
}
@@ -328,7 +359,10 @@ function submitAdd() {
color: var(--text-secondary);
cursor: pointer;
opacity: 0;
transition: color 120ms ease, background 120ms ease, opacity 120ms ease;
transition:
color 120ms ease,
background 120ms ease,
opacity 120ms ease;
&:hover {
color: var(--text-primary);
@@ -355,14 +389,24 @@ function submitAdd() {
background: var(--text-muted);
animation: dot-blink 1.2s ease-in-out infinite;
&:nth-child(2) { animation-delay: 0.2s; }
&:nth-child(3) { animation-delay: 0.4s; }
&:nth-child(2) {
animation-delay: 0.2s;
}
&:nth-child(3) {
animation-delay: 0.4s;
}
}
}
@keyframes dot-blink {
0%, 80%, 100% { opacity: 0.25; }
40% { opacity: 1; }
0%,
80%,
100% {
opacity: 0.25;
}
40% {
opacity: 1;
}
}
.empty-state {
@@ -429,7 +473,9 @@ function submitAdd() {
border-radius: var(--radius-sm);
color: var(--text-secondary);
cursor: pointer;
transition: color 120ms ease, background 120ms ease;
transition:
color 120ms ease,
background 120ms ease;
&:hover {
color: var(--text-primary);
@@ -447,7 +493,9 @@ function submitAdd() {
font-size: 0.875rem;
color: var(--text-primary);
outline: none;
transition: border-color 150ms ease, background 150ms ease;
transition:
border-color 150ms ease,
background 150ms ease;
&::placeholder {
color: var(--text-muted);
@@ -477,7 +525,9 @@ function submitAdd() {
transition: opacity 180ms ease;
.modal-card {
transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), opacity 180ms ease;
transition:
transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
opacity 180ms ease;
}
}
@@ -485,7 +535,9 @@ function submitAdd() {
transition: opacity 150ms ease;
.modal-card {
transition: transform 150ms ease, opacity 150ms ease;
transition:
transform 150ms ease,
opacity 150ms ease;
}
}