5.11.0: Кнопки +/- для прогрессии в TaskDetail
All checks were successful
Build and Push Docker Image / build-and-push (push) Successful in 1m6s

This commit is contained in:
poignatov
2026-03-04 18:17:11 +03:00
parent 9f3637113d
commit 92453def91
4 changed files with 92 additions and 10 deletions

View File

@@ -169,13 +169,27 @@
margin-bottom: 0.5rem;
}
.progression-input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.progression-input {
width: 100%;
padding: 0.75rem;
padding-right: 4.5rem;
border: 1px solid #d1d5db;
border-radius: 0.375rem;
font-size: 1rem;
box-sizing: border-box;
-moz-appearance: textfield;
}
.progression-input::-webkit-outer-spin-button,
.progression-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.progression-input:focus {
@@ -184,6 +198,48 @@
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.progression-controls-capsule {
position: absolute;
right: 0.375rem;
display: flex;
background: #f3f4f6;
border-radius: 9999px;
overflow: hidden;
flex-shrink: 0;
}
.progression-control-btn {
display: flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
border: none;
background: transparent;
font-size: 1rem;
font-weight: 500;
color: #6b7280;
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.progression-control-btn:hover {
background: #e5e7eb;
color: #374151;
}
.progression-control-btn:active {
background: #d1d5db;
}
.progression-control-minus {
border-right: 1px solid #eeeff1;
}
.progression-control-plus {
border-left: 1px solid #eeeff1;
}
.task-detail-divider {
height: 1px;
background: #e5e7eb;

View File

@@ -808,14 +808,40 @@ function TaskDetail({ taskId, onClose, onRefresh, onTaskCompleted, onNavigate })
{hasProgression && (
<div className="progression-section">
<label className="progression-label">Значение прогрессии</label>
<input
type="number"
step="any"
value={progressionValue}
onChange={(e) => setProgressionValue(e.target.value)}
placeholder={task.progression_base?.toString() || ''}
className="progression-input"
/>
<div className="progression-input-wrapper">
<input
type="number"
step="any"
value={progressionValue}
onChange={(e) => setProgressionValue(e.target.value)}
placeholder={task.progression_base?.toString() || ''}
className="progression-input"
/>
<div className="progression-controls-capsule">
<button
type="button"
className="progression-control-btn progression-control-minus"
onClick={() => {
const current = parseFloat(progressionValue) || 0
const step = task.progression_base || 1
setProgressionValue((current - step).toString())
}}
>
</button>
<button
type="button"
className="progression-control-btn progression-control-plus"
onClick={() => {
const current = parseFloat(progressionValue) || 0
const step = task.progression_base || 1
setProgressionValue((current + step).toString())
}}
>
+
</button>
</div>
</div>
</div>
)}