From 87d1b6ff2b26710bc2d9d430a7d3ee5c987239d2 Mon Sep 17 00:00:00 2001 From: gotika Date: Sun, 8 Sep 2024 18:35:57 +0300 Subject: [PATCH] design --- src/App.css | 2 +- src/App.js | 1 - src/components/GlobalMailing.css | 39 ++++++++++++++++ src/components/GlobalVariables.css | 51 +++++++++++++++++++++ src/components/groups.css | 0 src/components/sidebar.css | 43 +++++++++++++----- src/components/styles.css | 9 ---- src/components/userActions.js | 9 ++-- src/pages/GlobalMailing.js | 5 ++- src/pages/GlobalVariables.js | 3 +- src/pages/groups.js | 60 ++++++++++++++++++++++--- src/pages/migration.js | 31 ++++++++++--- src/pages/sidebar.js | 4 +- src/pages/users.js | 71 ++++++++++++++++++++++++------ 14 files changed, 274 insertions(+), 54 deletions(-) create mode 100644 src/components/GlobalMailing.css create mode 100644 src/components/GlobalVariables.css delete mode 100644 src/components/groups.css delete mode 100644 src/components/styles.css diff --git a/src/App.css b/src/App.css index 74b5e05..e70a402 100644 --- a/src/App.css +++ b/src/App.css @@ -35,4 +35,4 @@ to { transform: rotate(360deg); } -} +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 832b99f..9aabfc8 100644 --- a/src/App.js +++ b/src/App.js @@ -11,7 +11,6 @@ import 'primereact/resources/themes/lara-light-indigo/theme.css'; import 'primereact/resources/primereact.min.css'; import 'primeicons/primeicons.css'; import 'primeflex/primeflex.css'; -import './components/styles.css'; function App() { return ( diff --git a/src/components/GlobalMailing.css b/src/components/GlobalMailing.css new file mode 100644 index 0000000..9951978 --- /dev/null +++ b/src/components/GlobalMailing.css @@ -0,0 +1,39 @@ +.global-mailing-container { + display: flex; + flex-direction: column; + align-items: center; + padding: 20px; + background-color: #f9f9f9; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + } + + .global-mailing-container h2 { + margin-bottom: 20px; + color: #333; + } + + .global-mailing-container select { + padding: 10px; + font-size: 16px; + border: 1px solid #ccc; + border-radius: 4px; + margin-bottom: 20px; + width: 100%; + max-width: 300px; + } + + .global-mailing-container button { + padding: 10px 20px; + font-size: 16px; + color: #fff; + background-color: #007bff; + border: none; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.3s ease; + } + + .global-mailing-container button:hover { + background-color: #0056b3; + } \ No newline at end of file diff --git a/src/components/GlobalVariables.css b/src/components/GlobalVariables.css new file mode 100644 index 0000000..dda81b4 --- /dev/null +++ b/src/components/GlobalVariables.css @@ -0,0 +1,51 @@ +.global-variables-container { + display: flex; + flex-direction: column; + align-items: center; + padding: 20px; + background-color: #f9f9f9; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + max-width: 600px; + margin: 0 auto; + } + + .global-variables-container h2 { + margin-bottom: 20px; + color: #333; + } + + .global-variables-container div { + margin-bottom: 15px; + width: 100%; + } + + .global-variables-container label { + display: block; + margin-bottom: 5px; + font-weight: bold; + color: #555; + } + + .global-variables-container input { + width: 100%; + padding: 10px; + font-size: 16px; + border: 1px solid #ccc; + border-radius: 4px; + } + + .global-variables-container button { + padding: 10px 20px; + font-size: 16px; + color: #fff; + background-color: #007bff; + border: none; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.3s ease; + } + + .global-variables-container button:hover { + background-color: #0056b3; + } \ No newline at end of file diff --git a/src/components/groups.css b/src/components/groups.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/sidebar.css b/src/components/sidebar.css index 0835d3c..b0ae464 100644 --- a/src/components/sidebar.css +++ b/src/components/sidebar.css @@ -1,33 +1,54 @@ .sidebar { - width: 200px; + width: 250px; + height: 100vh; + background-color: #2c3e50; padding: 20px; - border-right: 1px solid #ddd; - background-color: #f4f4f4; - height: 100vh; - position: fixed; + color: white; + position: fixed; top: 0; left: 0; + box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); + overflow-y: auto; + z-index: 1; /* чтобы сайдбар был поверх контента */ } .sidebar h3 { - margin-top: 0; + margin-bottom: 20px; + font-size: 1.5rem; + text-transform: uppercase; + letter-spacing: 2px; + color: #ecf0f1; } .sidebar ul { - list-style-type: none; + list-style: none; padding: 0; } .sidebar ul li { - margin-bottom: 10px; + margin: 15px 0; } .sidebar ul li a { + color: #ecf0f1; text-decoration: none; - color: #333; - font-size: 16px; + font-size: 1.1rem; + display: block; + padding: 10px; + border-radius: 5px; + transition: background-color 0.3s ease; } .sidebar ul li a:hover { - color: #007bff; + background-color: #34495e; + } + + .sidebar ul li a.active { + background-color: #2980b9; + } + + + body { + margin-left: 250px; + padding: 0; } \ No newline at end of file diff --git a/src/components/styles.css b/src/components/styles.css deleted file mode 100644 index 19312a7..0000000 --- a/src/components/styles.css +++ /dev/null @@ -1,9 +0,0 @@ -.card-custom { - background-color: #f9fafb; - border-radius: 10px; -} - -.listbox-custom { - background-color: #fff; - border: 1px solid #e5e7eb; -} \ No newline at end of file diff --git a/src/components/userActions.js b/src/components/userActions.js index 79f3196..4bdab03 100644 --- a/src/components/userActions.js +++ b/src/components/userActions.js @@ -1,11 +1,12 @@ import React from 'react'; +import { Button } from 'primereact/button'; const UserActions = () => { return ( -
- - - +
+
); }; diff --git a/src/pages/GlobalMailing.js b/src/pages/GlobalMailing.js index 8043a7b..2430964 100644 --- a/src/pages/GlobalMailing.js +++ b/src/pages/GlobalMailing.js @@ -1,4 +1,5 @@ import React from "react"; +import '../components/GlobalMailing.css'; const GlobalMailing = () => { const groups = ['Admins', 'Editors', 'Viewers']; @@ -8,11 +9,11 @@ const GlobalMailing = () => { }; return ( -
+

Global Mailing

diff --git a/src/pages/GlobalVariables.js b/src/pages/GlobalVariables.js index a0f437c..3656ed7 100644 --- a/src/pages/GlobalVariables.js +++ b/src/pages/GlobalVariables.js @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import '../components/GlobalVariables.css'; const GlobalVariables = () => { const [variables, setVariables] = useState({ @@ -18,7 +19,7 @@ const GlobalVariables = () => { }; return ( -
+

Global Variables

{Object.keys(variables).map((key) => (
diff --git a/src/pages/groups.js b/src/pages/groups.js index f461bd3..1949557 100644 --- a/src/pages/groups.js +++ b/src/pages/groups.js @@ -1,22 +1,72 @@ -import React from 'react'; +import React, { useState } from 'react'; import { Card } from 'primereact/card'; -import { ListBox } from 'primereact/listbox'; +import { Dropdown } from 'primereact/dropdown'; import { Panel } from 'primereact/panel'; const Groups = () => { + const [selectedGroup, setSelectedGroup] = useState(null); + const [selectedSubOption, setSelectedSubOption] = useState(null); + + //заглушка const groups = [ { label: 'Admins', value: 'Admins' }, { label: 'Editors', value: 'Editors' }, { label: 'Viewers', value: 'Viewers' } - ]; // Заглушка (потом нужно убрать и доделать) + ]; + + + const groupOptions = { + Admins: [ + { label: 'Manage Users', value: 'ManageUsers' }, + { label: 'View Reports', value: 'ViewReports' } + ], + Editors: [ + { label: 'Edit Content', value: 'EditContent' }, + { label: 'Publish Content', value: 'PublishContent' } + ], + Viewers: [ + { label: 'View Content', value: 'ViewContent' }, + { label: 'Subscribe', value: 'Subscribe' } + ] + }; + + const onGroupChange = (e) => { + setSelectedGroup(e.value); + setSelectedSubOption(null); + }; + + const onSubOptionChange = (e) => { + setSelectedSubOption(e.value); + }; return (
- - + + + + {} + {selectedGroup && ( + + + + )}
diff --git a/src/pages/migration.js b/src/pages/migration.js index f2f5aef..5351844 100644 --- a/src/pages/migration.js +++ b/src/pages/migration.js @@ -1,14 +1,35 @@ -import React from "react"; +import React, { useState } from 'react'; +import { Card } from 'primereact/card'; +import { Button } from 'primereact/button'; +import { Panel } from 'primereact/panel'; const Migration = () => { + const [showImage, setShowImage] = useState(false); + const handleMigration = () => { - alert('Migration started'); + setShowImage(true); }; return ( -
-

Data Migration

- +
+
+ + +
+
+ {showImage && ( +
+ Migration +
+ )} + + +
); }; diff --git a/src/pages/sidebar.js b/src/pages/sidebar.js index 5117238..4664f55 100644 --- a/src/pages/sidebar.js +++ b/src/pages/sidebar.js @@ -1,11 +1,11 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import '../components/sidebar.css'; // Импорт стилей +import '../components/sidebar.css'; const Sidebar = () => { return (
-

Navigation

+
  • Users
  • Groups
    • diff --git a/src/pages/users.js b/src/pages/users.js index 7b8d5c6..c329fe0 100644 --- a/src/pages/users.js +++ b/src/pages/users.js @@ -1,20 +1,65 @@ -import React from 'react'; -import UserActions from '../components/userActions'; +import React, { useState } from 'react'; +import { Card } from 'primereact/card'; +import { ListBox } from 'primereact/listbox'; +import { Button } from 'primereact/button'; +import { Panel } from 'primereact/panel'; +import { Dropdown } from 'primereact/dropdown'; +import UserActions from '../components/userActions'; // компонент для действий пользователя const Users = () => { - const users = ['User1', 'User2', 'User3']; //заглушка(потом нужно убрать и доделать) + const users = [ + { label: 'User1', value: 'User1', devices: ['iPhone 12 европеоидный', 'MacBook Pro пидорас', 'iPad Air с яблоками'] }, + { label: 'User2', value: 'User2', devices: ['Samsung Galaxy S21 наш', 'Dell XPS 15 слоняра'] }, + { label: 'User3', value: 'User3', devices: ['Google Pixel 6 хуйня ебаная', 'HP Spectre x360 хуйня для даунов'] } + ]; // заглушка (потом нужно убрать и доделать) + + const [selectedUser, setSelectedUser] = useState(null); + const [selectedDevice, setSelectedDevice] = useState(null); return ( -
    -

    Пользователи

    -
      - {users.map((user, index) => ( -
    • - {user} - -
      • - ))} -
    +
    +
    + + + { + setSelectedUser(e.value); + setSelectedDevice(null); // сбросить выбранное устройство при изменении пользователя + }} + style={{ width: '100%' }} + listStyle={{ maxHeight: '250px' }} + className="p-mt-2" + optionLabel="label" // показывает "label" из каждого объекта пользователя + /> + {selectedUser && ( +
    +

    Устройства {selectedUser.label}

    + ({ label: device, value: device })) : []} + onChange={(e) => setSelectedDevice(e.value)} + placeholder="Выберите устройство" + style={{ width: '100%' }} + /> +
    + )} +
    +
    +     + + + {users.map((user, index) => ( +
    + {user.label} + +
    + ))} +     +     +
    ); };