Управление проектами
Добавил возможность удаления, создание и редактирование проектов.
This commit is contained in:
856
front_vue/src/components/ProjectPanel.vue
Normal file
856
front_vue/src/components/ProjectPanel.vue
Normal file
@@ -0,0 +1,856 @@
|
||||
<template>
|
||||
<SlidePanel
|
||||
:show="show"
|
||||
@close="tryClose"
|
||||
>
|
||||
<template #header>
|
||||
<h2>{{ isNew ? 'Новый проект' : 'Настройки проекта' }}</h2>
|
||||
</template>
|
||||
|
||||
<template #default>
|
||||
<!-- Название проекта -->
|
||||
<div class="form-section">
|
||||
<label class="form-label">Название проекта</label>
|
||||
<TextInput
|
||||
v-model="form.name"
|
||||
placeholder="Введите название"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Колонки -->
|
||||
<div class="form-section">
|
||||
<label class="form-label">Колонки</label>
|
||||
|
||||
<div class="columns-list" ref="columnsListRef">
|
||||
<div
|
||||
v-for="(column, index) in form.columns"
|
||||
:key="column.id || column.tempId"
|
||||
class="column-item"
|
||||
:class="{
|
||||
'is-ready': isReadyColumn(column),
|
||||
'is-dragging': !isMobile && !isLastColumn(index) && dragIndex === index,
|
||||
'drag-over-top': !isMobile && dragOverIndex === index && dragPosition === 'top',
|
||||
'drag-over-bottom': !isMobile && !isLastColumn(index) && dragOverIndex === index && dragPosition === 'bottom'
|
||||
}"
|
||||
:draggable="!isMobile && !isLastColumn(index)"
|
||||
@dragstart="!isMobile && !isLastColumn(index) && handleColumnDragStart($event, index)"
|
||||
@dragend="!isMobile && handleColumnDragEnd()"
|
||||
@dragover.prevent="!isMobile && handleColumnDragOver($event, index)"
|
||||
@dragleave="!isMobile && handleColumnDragLeave()"
|
||||
@drop.prevent="!isMobile && handleColumnDrop(index)"
|
||||
>
|
||||
<!-- Desktop: drag handle (не показываем для последней колонки и если только 2 колонки) -->
|
||||
<div v-if="!isMobile && !isLastColumn(index) && canReorderColumns" class="column-drag-handle">
|
||||
<i data-lucide="grip-vertical"></i>
|
||||
</div>
|
||||
|
||||
<!-- Mobile: up/down arrows (скрываем если обе кнопки были бы неактивны) -->
|
||||
<div v-else-if="isMobile && !isLastColumn(index) && (index > 0 || index < form.columns.length - 2)" class="column-move-buttons">
|
||||
<button
|
||||
class="move-btn"
|
||||
:disabled="index === 0"
|
||||
@click="moveColumnUp(index)"
|
||||
title="Вверх"
|
||||
>
|
||||
<i data-lucide="chevron-up"></i>
|
||||
</button>
|
||||
<button
|
||||
class="move-btn"
|
||||
:disabled="index === form.columns.length - 2"
|
||||
@click="moveColumnDown(index)"
|
||||
title="Вниз"
|
||||
>
|
||||
<i data-lucide="chevron-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ColorPicker v-model="column.color" />
|
||||
|
||||
<input
|
||||
type="text"
|
||||
class="column-name"
|
||||
:ref="el => columnInputRefs[index] = el"
|
||||
v-model="column.name_columns"
|
||||
placeholder="Название колонки"
|
||||
/>
|
||||
|
||||
<!-- Иконка редактирования -->
|
||||
<button
|
||||
class="column-edit-btn"
|
||||
title="Редактировать название"
|
||||
@click="focusColumnName(index)"
|
||||
>
|
||||
<i data-lucide="pencil"></i>
|
||||
</button>
|
||||
|
||||
<!-- Маркер финальной колонки (только отображение) -->
|
||||
<span
|
||||
v-if="isLastColumn(index)"
|
||||
class="column-ready-marker"
|
||||
title="Финальная колонка (Готово)"
|
||||
>
|
||||
<i data-lucide="check-circle"></i>
|
||||
</span>
|
||||
|
||||
<!-- Кнопка удаления: скрыта для последней колонки и если только 2 колонки -->
|
||||
<button
|
||||
v-if="!isLastColumn(index) && form.columns.length > 2"
|
||||
class="column-delete-btn"
|
||||
title="Удалить колонку"
|
||||
@click="confirmDeleteColumn(index)"
|
||||
>
|
||||
<i data-lucide="trash-2"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="add-column-btn" @click="addColumn">
|
||||
<i data-lucide="plus"></i>
|
||||
Добавить колонку
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<div class="footer-left">
|
||||
<IconButton
|
||||
v-if="!isNew"
|
||||
icon="trash-2"
|
||||
variant="danger"
|
||||
title="Удалить проект"
|
||||
@click="handleDeleteProject"
|
||||
/>
|
||||
</div>
|
||||
<ActionButtons
|
||||
:save-text="isNew ? 'Создать' : 'Сохранить'"
|
||||
:loading="isSaving"
|
||||
:disabled="!canSave"
|
||||
@save="handleSave"
|
||||
@cancel="tryClose"
|
||||
/>
|
||||
</template>
|
||||
</SlidePanel>
|
||||
|
||||
<!-- Диалог удаления проекта -->
|
||||
<ConfirmDialog
|
||||
:show="showDeleteProjectDialog"
|
||||
type="deleteProject"
|
||||
:action="confirmDeleteProject"
|
||||
@confirm="showDeleteProjectDialog = false"
|
||||
@cancel="showDeleteProjectDialog = false"
|
||||
/>
|
||||
|
||||
<!-- Диалог удаления колонки -->
|
||||
<ConfirmDialog
|
||||
:show="showDeleteColumnDialog"
|
||||
type="deleteColumn"
|
||||
:message="deleteColumnMessage"
|
||||
:action="confirmDeleteColumnAction"
|
||||
@confirm="showDeleteColumnDialog = false"
|
||||
@cancel="showDeleteColumnDialog = false"
|
||||
/>
|
||||
|
||||
<!-- Диалог несохранённых изменений -->
|
||||
<ConfirmDialog
|
||||
:show="showUnsavedDialog"
|
||||
type="unsavedChanges"
|
||||
@confirm="confirmSave"
|
||||
@cancel="showUnsavedDialog = false"
|
||||
@discard="confirmDiscard"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, nextTick } from 'vue'
|
||||
import SlidePanel from './ui/SlidePanel.vue'
|
||||
import TextInput from './ui/TextInput.vue'
|
||||
import ColorPicker from './ui/ColorPicker.vue'
|
||||
import IconButton from './ui/IconButton.vue'
|
||||
import ActionButtons from './ui/ActionButtons.vue'
|
||||
import ConfirmDialog from './ConfirmDialog.vue'
|
||||
import { useLucideIcons } from '../composables/useLucideIcons'
|
||||
import { useMobile } from '../composables/useMobile'
|
||||
import { useProjectsStore } from '../stores/projects'
|
||||
|
||||
const { refreshIcons } = useLucideIcons()
|
||||
const { isMobile } = useMobile()
|
||||
const store = useProjectsStore()
|
||||
|
||||
const props = defineProps({
|
||||
show: Boolean,
|
||||
project: Object // null = создание, object = редактирование
|
||||
})
|
||||
|
||||
const emit = defineEmits(['close', 'saved'])
|
||||
|
||||
// State
|
||||
const isNew = computed(() => !props.project)
|
||||
const isSaving = ref(false)
|
||||
|
||||
// Form data
|
||||
const form = ref({
|
||||
name: '',
|
||||
columns: []
|
||||
})
|
||||
|
||||
// Initial form for change detection
|
||||
const initialForm = ref(null)
|
||||
|
||||
// Dialogs
|
||||
const showDeleteProjectDialog = ref(false)
|
||||
const showDeleteColumnDialog = ref(false)
|
||||
const showUnsavedDialog = ref(false)
|
||||
const columnToDelete = ref(null)
|
||||
const deleteColumnMessage = ref('')
|
||||
|
||||
// Drag state
|
||||
const dragIndex = ref(null)
|
||||
const dragOverIndex = ref(null)
|
||||
const dragPosition = ref(null) // 'top' | 'bottom'
|
||||
const columnsListRef = ref(null)
|
||||
const columnInputRefs = ref([])
|
||||
|
||||
// Temp ID counter for new columns
|
||||
let tempIdCounter = 0
|
||||
|
||||
// Can save
|
||||
const canSave = computed(() => {
|
||||
return form.value.name?.trim() && form.value.columns.length > 0
|
||||
})
|
||||
|
||||
// Можно ли сортировать колонки (больше 2 колонок = минимум 2 перемещаемые + ready)
|
||||
const canReorderColumns = computed(() => {
|
||||
return form.value.columns.length > 2
|
||||
})
|
||||
|
||||
// Has changes
|
||||
const hasChanges = computed(() => {
|
||||
if (!initialForm.value) return false
|
||||
return JSON.stringify(form.value) !== JSON.stringify(initialForm.value)
|
||||
})
|
||||
|
||||
// ==================== COLUMNS MANAGEMENT ====================
|
||||
|
||||
// Фокус на поле названия колонки
|
||||
const focusColumnName = (index) => {
|
||||
const input = columnInputRefs.value[index]
|
||||
if (input) {
|
||||
input.focus()
|
||||
// Ставим курсор в конец текста
|
||||
const len = input.value.length
|
||||
input.setSelectionRange(len, len)
|
||||
}
|
||||
}
|
||||
|
||||
// Проверка является ли колонка последней (финальной)
|
||||
const isLastColumn = (index) => {
|
||||
return index === form.value.columns.length - 1
|
||||
}
|
||||
|
||||
// Для совместимости со стилями (is-ready класс)
|
||||
const isReadyColumn = (column) => {
|
||||
const index = form.value.columns.findIndex(c =>
|
||||
(c.id && c.id === column.id) || (c.tempId && c.tempId === column.tempId)
|
||||
)
|
||||
return isLastColumn(index)
|
||||
}
|
||||
|
||||
// Цвета для новых колонок
|
||||
const columnColors = [
|
||||
'#ef4444', '#f97316', '#f59e0b', '#eab308', '#84cc16',
|
||||
'#22c55e', '#10b981', '#14b8a6', '#06b6d4', '#0ea5e9',
|
||||
'#3b82f6', '#6366f1', '#8b5cf6', '#a855f7', '#d946ef',
|
||||
'#ec4899', '#f43f5e'
|
||||
]
|
||||
|
||||
const getRandomColor = () => {
|
||||
// Получаем цвета уже используемых колонок
|
||||
const usedColors = form.value.columns.map(c => c.color)
|
||||
// Фильтруем доступные цвета
|
||||
const availableColors = columnColors.filter(c => !usedColors.includes(c))
|
||||
// Если все цвета использованы — берём из полного списка
|
||||
const colorPool = availableColors.length > 0 ? availableColors : columnColors
|
||||
return colorPool[Math.floor(Math.random() * colorPool.length)]
|
||||
}
|
||||
|
||||
const addColumn = () => {
|
||||
// Находим индекс финальной колонки
|
||||
const readyIndex = form.value.columns.findIndex(col => isReadyColumn(col))
|
||||
|
||||
const newColumn = {
|
||||
tempId: `new-${++tempIdCounter}`,
|
||||
name_columns: '',
|
||||
color: getRandomColor(),
|
||||
id_order: 0
|
||||
}
|
||||
|
||||
// Вставляем перед финальной колонкой, или в конец если финальная не найдена
|
||||
if (readyIndex !== -1) {
|
||||
form.value.columns.splice(readyIndex, 0, newColumn)
|
||||
} else {
|
||||
form.value.columns.push(newColumn)
|
||||
}
|
||||
|
||||
// Обновляем id_order у всех колонок
|
||||
form.value.columns.forEach((col, idx) => {
|
||||
col.id_order = idx + 1
|
||||
})
|
||||
|
||||
nextTick(refreshIcons)
|
||||
}
|
||||
|
||||
const confirmDeleteColumn = async (index) => {
|
||||
const column = form.value.columns[index]
|
||||
columnToDelete.value = index
|
||||
|
||||
// Для существующих колонок проверяем количество задач
|
||||
if (column.id) {
|
||||
const count = await store.getColumnTasksCount(column.id)
|
||||
if (count > 0) {
|
||||
deleteColumnMessage.value = `В колонке ${count} задач.<br>Все они будут удалены.`
|
||||
} else {
|
||||
deleteColumnMessage.value = 'Колонка будет удалена.'
|
||||
}
|
||||
} else {
|
||||
deleteColumnMessage.value = 'Колонка будет удалена.'
|
||||
}
|
||||
|
||||
showDeleteColumnDialog.value = true
|
||||
}
|
||||
|
||||
const confirmDeleteColumnAction = async () => {
|
||||
const index = columnToDelete.value
|
||||
const column = form.value.columns[index]
|
||||
|
||||
// Если колонка уже существует на сервере — удаляем через API
|
||||
if (column.id) {
|
||||
const result = await store.deleteColumn(column.id)
|
||||
if (!result.success) {
|
||||
throw new Error(result.errors?.column || 'Ошибка удаления')
|
||||
}
|
||||
}
|
||||
|
||||
// Удаляем из формы
|
||||
form.value.columns.splice(index, 1)
|
||||
|
||||
columnToDelete.value = null
|
||||
}
|
||||
|
||||
// ==================== MOBILE: MOVE COLUMNS ====================
|
||||
|
||||
const moveColumnUp = async (index) => {
|
||||
if (index <= 0) return
|
||||
|
||||
const columns = form.value.columns
|
||||
;[columns[index - 1], columns[index]] = [columns[index], columns[index - 1]]
|
||||
|
||||
// Update id_order
|
||||
columns.forEach((col, idx) => {
|
||||
col.id_order = idx + 1
|
||||
})
|
||||
|
||||
// Save to server if editing
|
||||
if (!isNew.value) {
|
||||
const ids = columns.filter(c => c.id).map(c => c.id)
|
||||
if (ids.length > 0) {
|
||||
await store.reorderColumns(ids)
|
||||
}
|
||||
}
|
||||
|
||||
nextTick(refreshIcons)
|
||||
}
|
||||
|
||||
const moveColumnDown = async (index) => {
|
||||
// Нельзя перемещать последнюю колонку и нельзя менять местами с последней
|
||||
const lastIndex = form.value.columns.length - 1
|
||||
if (index >= lastIndex - 1) return
|
||||
|
||||
const columns = form.value.columns
|
||||
;[columns[index], columns[index + 1]] = [columns[index + 1], columns[index]]
|
||||
|
||||
// Update id_order
|
||||
columns.forEach((col, idx) => {
|
||||
col.id_order = idx + 1
|
||||
})
|
||||
|
||||
// Save to server if editing
|
||||
if (!isNew.value) {
|
||||
const ids = columns.filter(c => c.id).map(c => c.id)
|
||||
if (ids.length > 0) {
|
||||
await store.reorderColumns(ids)
|
||||
}
|
||||
}
|
||||
|
||||
nextTick(refreshIcons)
|
||||
}
|
||||
|
||||
// ==================== DRAG AND DROP COLUMNS (Desktop) ====================
|
||||
|
||||
const handleColumnDragStart = (e, index) => {
|
||||
dragIndex.value = index
|
||||
e.dataTransfer.effectAllowed = 'move'
|
||||
e.dataTransfer.setData('text/plain', index.toString())
|
||||
}
|
||||
|
||||
const handleColumnDragEnd = () => {
|
||||
dragIndex.value = null
|
||||
dragOverIndex.value = null
|
||||
dragPosition.value = null
|
||||
}
|
||||
|
||||
const handleColumnDragOver = (e, index) => {
|
||||
if (dragIndex.value === null || dragIndex.value === index) return
|
||||
|
||||
// Нельзя перетаскивать НА последнюю колонку (она зафиксирована)
|
||||
const lastIndex = form.value.columns.length - 1
|
||||
if (index === lastIndex) return
|
||||
|
||||
const rect = e.currentTarget.getBoundingClientRect()
|
||||
const midY = rect.top + rect.height / 2
|
||||
|
||||
dragOverIndex.value = index
|
||||
|
||||
// Для предпоследней колонки: нельзя drop "bottom" (это поставит после последней)
|
||||
if (index === lastIndex - 1) {
|
||||
dragPosition.value = 'top'
|
||||
} else {
|
||||
dragPosition.value = e.clientY < midY ? 'top' : 'bottom'
|
||||
}
|
||||
}
|
||||
|
||||
const handleColumnDragLeave = () => {
|
||||
// Don't clear immediately to avoid flickering
|
||||
}
|
||||
|
||||
const handleColumnDrop = async (targetIndex) => {
|
||||
if (dragIndex.value === null || dragIndex.value === targetIndex) {
|
||||
handleColumnDragEnd()
|
||||
return
|
||||
}
|
||||
|
||||
const lastIndex = form.value.columns.length - 1
|
||||
|
||||
// Нельзя drop на последнюю колонку
|
||||
if (targetIndex === lastIndex) {
|
||||
handleColumnDragEnd()
|
||||
return
|
||||
}
|
||||
|
||||
const sourceIndex = dragIndex.value
|
||||
let insertIndex = targetIndex
|
||||
|
||||
// Adjust insert index based on drag position
|
||||
if (dragPosition.value === 'bottom') {
|
||||
insertIndex = targetIndex + 1
|
||||
}
|
||||
|
||||
// If moving down, adjust for removal
|
||||
if (sourceIndex < insertIndex) {
|
||||
insertIndex--
|
||||
}
|
||||
|
||||
// Не даём вставить на позицию последней колонки (перед ready)
|
||||
const maxInsertIndex = lastIndex - 1
|
||||
if (insertIndex > maxInsertIndex) {
|
||||
insertIndex = maxInsertIndex
|
||||
}
|
||||
|
||||
// Reorder array
|
||||
const [movedColumn] = form.value.columns.splice(sourceIndex, 1)
|
||||
form.value.columns.splice(insertIndex, 0, movedColumn)
|
||||
|
||||
// Update id_order
|
||||
form.value.columns.forEach((col, idx) => {
|
||||
col.id_order = idx + 1
|
||||
})
|
||||
|
||||
// If editing existing project — save order to server
|
||||
if (!isNew.value) {
|
||||
const ids = form.value.columns.filter(c => c.id).map(c => c.id)
|
||||
if (ids.length > 0) {
|
||||
await store.reorderColumns(ids)
|
||||
}
|
||||
}
|
||||
|
||||
handleColumnDragEnd()
|
||||
}
|
||||
|
||||
// ==================== SAVE / CLOSE ====================
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!canSave.value || isSaving.value) return
|
||||
|
||||
isSaving.value = true
|
||||
|
||||
try {
|
||||
if (isNew.value) {
|
||||
// Создание проекта
|
||||
const result = await store.createProject(form.value.name)
|
||||
|
||||
if (result.success) {
|
||||
// Обновляем колонки если есть изменения
|
||||
// Дефолтные колонки уже созданы сервером
|
||||
// Здесь можно добавить логику для кастомизации колонок при создании
|
||||
emit('saved', result.id)
|
||||
emit('close')
|
||||
}
|
||||
} else {
|
||||
// Редактирование проекта
|
||||
// Обновляем название если изменилось
|
||||
if (form.value.name !== initialForm.value.name) {
|
||||
await store.updateProject(props.project.id, form.value.name)
|
||||
}
|
||||
|
||||
// Обрабатываем новые колонки
|
||||
for (const column of form.value.columns) {
|
||||
if (column.tempId && !column.id) {
|
||||
// Новая колонка
|
||||
const result = await store.addColumn(column.name_columns, column.color)
|
||||
if (result.success) {
|
||||
column.id = result.id
|
||||
delete column.tempId
|
||||
}
|
||||
} else if (column.id) {
|
||||
// Проверяем изменения в существующей колонке
|
||||
const original = initialForm.value.columns.find(c => c.id === column.id)
|
||||
if (original) {
|
||||
const nameChanged = column.name_columns !== original.name_columns
|
||||
const colorChanged = column.color !== original.color
|
||||
if (nameChanged || colorChanged) {
|
||||
await store.updateColumn(column.id, column.name_columns, column.color)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Сохраняем порядок колонок
|
||||
const ids = form.value.columns.filter(c => c.id).map(c => c.id)
|
||||
if (ids.length > 0) {
|
||||
await store.reorderColumns(ids)
|
||||
}
|
||||
|
||||
emit('saved', props.project.id)
|
||||
emit('close')
|
||||
}
|
||||
} finally {
|
||||
isSaving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const tryClose = () => {
|
||||
if (hasChanges.value) {
|
||||
showUnsavedDialog.value = true
|
||||
} else {
|
||||
emit('close')
|
||||
}
|
||||
}
|
||||
|
||||
const confirmSave = () => {
|
||||
showUnsavedDialog.value = false
|
||||
handleSave()
|
||||
}
|
||||
|
||||
const confirmDiscard = () => {
|
||||
showUnsavedDialog.value = false
|
||||
emit('close')
|
||||
}
|
||||
|
||||
// ==================== DELETE PROJECT ====================
|
||||
|
||||
const handleDeleteProject = () => {
|
||||
showDeleteProjectDialog.value = true
|
||||
}
|
||||
|
||||
const confirmDeleteProject = async () => {
|
||||
if (!props.project?.id) {
|
||||
throw new Error('Проект не выбран')
|
||||
}
|
||||
|
||||
const result = await store.deleteProject(props.project.id)
|
||||
if (!result.success) {
|
||||
throw new Error(result.errors?.access || 'Ошибка удаления')
|
||||
}
|
||||
|
||||
emit('close')
|
||||
}
|
||||
|
||||
// ==================== WATCH ====================
|
||||
|
||||
watch(() => props.show, async (newVal) => {
|
||||
if (newVal) {
|
||||
isSaving.value = false
|
||||
tempIdCounter = 0
|
||||
|
||||
if (props.project) {
|
||||
// Редактирование — загружаем данные
|
||||
form.value = {
|
||||
name: props.project.name,
|
||||
columns: JSON.parse(JSON.stringify(store.columns))
|
||||
}
|
||||
} else {
|
||||
// Создание — дефолтные значения (последняя колонка = финальная)
|
||||
form.value = {
|
||||
name: '',
|
||||
columns: [
|
||||
{ tempId: 'new-1', name_columns: 'К выполнению', color: '#6366f1', id_order: 1 },
|
||||
{ tempId: 'new-2', name_columns: 'Готово', color: '#22c55e', id_order: 2 }
|
||||
]
|
||||
}
|
||||
tempIdCounter = 2
|
||||
}
|
||||
|
||||
// Сохраняем начальное состояние
|
||||
await nextTick()
|
||||
initialForm.value = JSON.parse(JSON.stringify(form.value))
|
||||
refreshIcons()
|
||||
}
|
||||
})
|
||||
|
||||
// Refresh icons when columns change
|
||||
watch(() => form.value.columns.length, () => {
|
||||
nextTick(refreshIcons)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.form-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* ==================== COLUMNS LIST ==================== */
|
||||
|
||||
.columns-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.column-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 8px;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.column-item:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.column-item.is-ready {
|
||||
border-color: var(--green);
|
||||
background: rgba(34, 197, 94, 0.05);
|
||||
}
|
||||
|
||||
.column-item.is-dragging {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.column-item.drag-over-top {
|
||||
border-top: 2px solid var(--accent);
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.column-item.drag-over-bottom {
|
||||
border-bottom: 2px solid var(--accent);
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.column-drag-handle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: var(--text-muted);
|
||||
cursor: grab;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.column-drag-handle:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.column-drag-handle i {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
/* Mobile: up/down buttons */
|
||||
.column-move-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.move-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 18px;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.move-btn i {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.move-btn:not(:disabled):hover,
|
||||
.move-btn:not(:disabled):active {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.move-btn:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.column-name {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-primary);
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.column-name::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.column-name:focus {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.column-edit-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: var(--text-muted);
|
||||
opacity: 0.5;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.column-edit-btn i {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.column-edit-btn:hover {
|
||||
opacity: 1;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* Маркер финальной колонки (не кликабельный) */
|
||||
.column-ready-marker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: var(--green);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.column-ready-marker i {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.column-delete-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.column-delete-btn i {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.column-delete-btn:hover {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
/* ==================== ADD COLUMN BUTTON ==================== */
|
||||
|
||||
.add-column-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px dashed rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
color: var(--text-muted);
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.add-column-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.add-column-btn i {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
/* ==================== FOOTER ==================== */
|
||||
|
||||
.footer-left {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user