6.19.0: Унификация кнопок сохранения в формах

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-17 10:08:23 +03:00
parent 171befdf05
commit 49f67ec36d
8 changed files with 108 additions and 42 deletions
--- a/2
+++ b/2
@@ -1 +1 @@
-6.18.17
+6.19.0
--- a/play-life-web/package.json
+++ b/play-life-web/package.json
@@ -1,6 +1,6 @@
 {
  "name": "play-life-web",
-  "version": "6.18.17",
+  "version": "6.19.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
--- a/play-life-web/src/App.jsx
+++ b/play-life-web/src/App.jsx
@@ -1445,6 +1445,7 @@ function AppContent() {
                boardId={tabParams.boardId}
                previousTab={previousTab}
                onSaved={() => setShoppingRefreshTrigger(prev => prev + 1)}
+                isActive={activeTab === 'shopping-item-form'}
              />
            </div>
          </div>
--- a/play-life-web/src/components/ProjectPriorityManager.jsx
+++ b/play-life-web/src/components/ProjectPriorityManager.jsx
@@ -1061,20 +1061,39 @@ function ProjectPriorityManager({ allProjectsData, currentWeekData, shouldLoad,
        />
      )}

-      <div className={onClose
-        ? 'sticky bottom-0 pt-2 pb-4 mt-2'
-        : 'fixed bottom-0 left-0 right-0 bg-gray-100 px-4 pt-2 pb-4'
-      }>
-        <div className="max-w-2xl mx-auto">
+      <div style={{
+        position: 'sticky',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        padding: '0.75rem 0',
+        paddingBottom: 'max(0.75rem, env(safe-area-inset-bottom))',
+        background: 'linear-gradient(to top, white 60%, rgba(255,255,255,0))',
+        display: 'flex',
+        justifyContent: 'center',
+      }}>
        <button
          onClick={handleSave}
          disabled={isSaving}
-            className="w-full py-3 bg-indigo-600 hover:bg-indigo-700 disabled:bg-indigo-400 text-white font-semibold rounded-lg shadow transition-all"
+          style={{
+            width: '100%',
+            maxWidth: '42rem',
+            padding: '0.875rem',
+            background: isSaving ? undefined : 'linear-gradient(to right, #10b981, #059669)',
+            backgroundColor: isSaving ? '#9ca3af' : undefined,
+            color: 'white',
+            border: 'none',
+            borderRadius: '0.5rem',
+            fontSize: '1rem',
+            fontWeight: 600,
+            cursor: isSaving ? 'not-allowed' : 'pointer',
+            opacity: isSaving ? 0.6 : 1,
+            transition: 'all 0.2s',
+          }}
        >
          {isSaving ? 'Сохранение...' : 'Сохранить'}
        </button>
      </div>
-      </div>

      {toastMessage && (
        <Toast
--- a/play-life-web/src/components/ShoppingItemForm.css
+++ b/play-life-web/src/components/ShoppingItemForm.css
@@ -3,6 +3,7 @@
  max-width: 600px;
  margin: 0 auto;
  position: relative;
+  padding-bottom: 5rem;
 }

 .shopping-item-form h2 {
--- a/play-life-web/src/components/ShoppingItemForm.jsx
+++ b/play-life-web/src/components/ShoppingItemForm.jsx
@@ -1,11 +1,12 @@
 import React, { useState, useEffect } from 'react'
+import { createPortal } from 'react-dom'
 import { useAuth } from './auth/AuthContext'
 import Toast from './Toast'
 import SubmitButton from './SubmitButton'
 import DeleteButton from './DeleteButton'
 import './ShoppingItemForm.css'

-function ShoppingItemForm({ onNavigate, itemId, boardId, previousTab, onSaved }) {
+function ShoppingItemForm({ onNavigate, itemId, boardId, previousTab, onSaved, isActive }) {
  const { authFetch } = useAuth()
  const [name, setName] = useState('')
  const [description, setDescription] = useState('')
@@ -183,6 +184,7 @@ function ShoppingItemForm({ onNavigate, itemId, boardId, previousTab, onSaved })
  }

  return (
+    <>
    <div className="shopping-item-form">
      <button className="close-x-button" onClick={handleClose}>
        ✕
@@ -277,23 +279,6 @@ function ShoppingItemForm({ onNavigate, itemId, boardId, previousTab, onSaved })
          </div>
        </div>

-        <div className="form-actions">
-          <SubmitButton
-            onClick={handleSave}
-            loading={loading}
-            disabled={!name.trim() || !hasValidPeriod}
-          >
-            Сохранить
-          </SubmitButton>
-          {isEdit && (
-            <DeleteButton
-              onClick={handleDelete}
-              loading={isDeleting}
-              disabled={loading}
-              title="Удалить товар"
-            />
-          )}
-        </div>
      </div>

      {toastMessage && (
@@ -304,6 +289,53 @@ function ShoppingItemForm({ onNavigate, itemId, boardId, previousTab, onSaved })
        />
      )}
    </div>
+    {isActive ? createPortal(
+      <div style={{
+        position: 'fixed',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        padding: '0.75rem 1rem',
+        paddingBottom: 'max(0.75rem, env(safe-area-inset-bottom))',
+        background: 'linear-gradient(to top, white 60%, rgba(255,255,255,0))',
+        zIndex: 1500,
+        display: 'flex',
+        justifyContent: 'center',
+        gap: '0.75rem',
+      }}>
+        <button
+          onClick={handleSave}
+          disabled={loading || isDeleting || !name.trim() || !hasValidPeriod}
+          style={{
+            flex: 1,
+            maxWidth: '42rem',
+            padding: '0.875rem',
+            background: loading ? undefined : 'linear-gradient(to right, #10b981, #059669)',
+            backgroundColor: loading ? '#9ca3af' : undefined,
+            color: 'white',
+            border: 'none',
+            borderRadius: '0.5rem',
+            fontSize: '1rem',
+            fontWeight: 600,
+            cursor: (loading || isDeleting) ? 'not-allowed' : 'pointer',
+            opacity: loading ? 0.6 : 1,
+            transition: 'all 0.2s',
+          }}
+        >
+          {loading ? 'Сохранение...' : 'Сохранить'}
+        </button>
+        {isEdit && (
+          <DeleteButton
+            onClick={handleDelete}
+            loading={isDeleting}
+            disabled={loading}
+            title="Удалить товар"
+          />
+        )}
+      </div>,
+      document.body
+    ) : null}
+    </>
  )
 }

--- a/play-life-web/src/components/TaskForm.css
+++ b/play-life-web/src/components/TaskForm.css
@@ -3,7 +3,7 @@
  max-width: 800px;
  margin: 0 auto;
  position: relative;
-  padding-bottom: 5.5rem;
+  padding-bottom: 5rem;
 }

 .close-x-button {
--- a/play-life-web/src/components/TaskForm.jsx
+++ b/play-life-web/src/components/TaskForm.jsx
@@ -1412,23 +1412,36 @@ function TaskForm({ onNavigate, taskId, wishlistId, returnTo, returnWishlistId,
      bottom: 0,
      left: 0,
      right: 0,
-      padding: '1.5rem 1rem 0.75rem',
+      padding: '0.75rem 1rem',
      paddingBottom: 'max(0.75rem, env(safe-area-inset-bottom))',
-      background: 'linear-gradient(to top, white 70%, rgba(255,255,255,0))',
+      background: 'linear-gradient(to top, white 60%, rgba(255,255,255,0))',
      zIndex: 1500,
      display: 'flex',
      justifyContent: 'center',
      gap: '0.75rem',
    }}>
-      <SubmitButton
+      <button
        type="submit"
        form="task-form-element"
-        loading={loading}
-        disabled={isDeleting}
-        style={{ flex: 1, maxWidth: '42rem' }}
+        disabled={loading || isDeleting}
+        style={{
+          flex: 1,
+          maxWidth: '42rem',
+          padding: '0.875rem',
+          background: loading ? undefined : 'linear-gradient(to right, #10b981, #059669)',
+          backgroundColor: loading ? '#9ca3af' : undefined,
+          color: 'white',
+          border: 'none',
+          borderRadius: '0.5rem',
+          fontSize: '1rem',
+          fontWeight: 600,
+          cursor: (loading || isDeleting) ? 'not-allowed' : 'pointer',
+          opacity: loading ? 0.6 : 1,
+          transition: 'all 0.2s',
+        }}
      >
-        Сохранить
-      </SubmitButton>
+        {loading ? 'Сохранение...' : 'Сохранить'}
+      </button>
      {taskId && (
        <DeleteButton
          onClick={handleDelete}
@@ -1 +1 @@
 .18.17
 .19.0