diff --git a/VERSION b/VERSION index e18a34b..7fcfe2d 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -6.11.2 +6.11.3 diff --git a/play-life-web/package.json b/play-life-web/package.json index b29b04f..0e0f59a 100644 --- a/play-life-web/package.json +++ b/play-life-web/package.json @@ -1,6 +1,6 @@ { "name": "play-life-web", - "version": "6.11.2", + "version": "6.11.3", "type": "module", "scripts": { "dev": "vite", diff --git a/play-life-web/src/components/BoardSelector.css b/play-life-web/src/components/BoardSelector.css index d716d56..3967e1a 100644 --- a/play-life-web/src/components/BoardSelector.css +++ b/play-life-web/src/components/BoardSelector.css @@ -15,7 +15,6 @@ .board-header { display: flex; - gap: 12px; align-items: center; } @@ -70,48 +69,30 @@ white-space: nowrap; } -.chevron { - color: #9ca3af; - flex-shrink: 0; - transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); -} - -.chevron.rotated { - transform: rotate(180deg); -} - -/* Кнопка действия (настройки/выход) */ -.board-action-btn { +/* Иконка настроек/выхода внутри pill */ +.pill-action-btn { display: flex; align-items: center; justify-content: center; - width: 52px; - height: 52px; - padding: 0; - background: white; - border: 1px solid #e5e7eb; - border-radius: 50%; - cursor: pointer; - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); - color: #6b7280; + width: 32px; + height: 32px; + margin-left: 4px; + border-left: 1px solid #e5e7eb; + padding-left: 10px; + color: #9ca3af; flex-shrink: 0; + cursor: pointer; + transition: color 0.15s ease; + box-sizing: content-box; } -.board-action-btn:hover { - background: #f9fafb; - color: #374151; - border-color: #6366f1; - box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); - transform: translateY(-1px); +.board-pill:hover:not(:disabled) .pill-action-btn, +.board-pill.open .pill-action-btn { + border-left-color: rgba(99, 102, 241, 0.3); } -.board-action-btn:active { - transform: translateY(0); -} - -.board-action-btn svg { - width: 22px; - height: 22px; +.pill-action-btn:hover { + color: #4f46e5; } /* Выпадающий список */ @@ -259,3 +240,26 @@ width: 20px; height: 20px; } + +/* Кнопка настроек/выхода в дропдауне */ +.dropdown-item.board-action-item { + margin-top: 2px; + padding-top: 14px; + border-top: 1px solid #f3f4f6; + border-radius: 0 0 12px 12px; + color: #6b7280; + font-weight: 500; + gap: 12px; + justify-content: flex-start; +} + +.dropdown-item.board-action-item:hover { + background: #f3f4f6; + color: #374151; +} + +.dropdown-item.board-action-item svg { + flex-shrink: 0; + width: 20px; + height: 20px; +} diff --git a/play-life-web/src/components/BoardSelector.jsx b/play-life-web/src/components/BoardSelector.jsx index f2bc595..c007e7c 100644 --- a/play-life-web/src/components/BoardSelector.jsx +++ b/play-life-web/src/components/BoardSelector.jsx @@ -1,17 +1,17 @@ import React, { useState, useEffect, useRef } from 'react' import './BoardSelector.css' -function BoardSelector({ - boards, - selectedBoardId, - onBoardChange, +function BoardSelector({ + boards, + selectedBoardId, + onBoardChange, onBoardEdit, onAddBoard, - loading + loading }) { const [isOpen, setIsOpen] = useState(false) const dropdownRef = useRef(null) - + const selectedBoard = boards.find(b => b.id === selectedBoardId) // Закрытие при клике снаружи @@ -30,10 +30,16 @@ function BoardSelector({ setIsOpen(false) } + const handleBoardAction = (e) => { + e.stopPropagation() + setIsOpen(false) + onBoardEdit() + } + return (
- - - {selectedBoard && ( - - )}
- +
{boards.length === 0 ? ( @@ -103,7 +96,7 @@ function BoardSelector({ ))}
)} - + + + {selectedBoard && ( + + )}