init_richi/schichtplanung
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Generate random vibrant skill color by default on every new skill creation while retaining custom color picker

Browse Source
This commit is contained in:
Richard
2026-07-31 10:48:24 +02:00
parent bc9d7caa73
commit 67b02f6646
6 changed files with 75 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/dist/assets/index--P5dGUAY.js → frontend/dist/assets/index-9dCYFrQm.js
Vendored
+56 -56
View File
File diff suppressed because one or more lines are too long
frontend/dist/index.html
Vendored
+1 -1
View File
@@ -11,7 +11,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<title>Schichtplaner — Veranstaltungsschichtpläne</title>
<script type="module" crossorigin src="/assets/index--P5dGUAY.js"></script>
<script type="module" crossorigin src="/assets/index-9dCYFrQm.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DyS9UMYS.css">
</head>
<body class="bg-paper text-main font-sans antialiased min-h-screen">
frontend/src/components/ProfileModal.jsx
+3 -1
View File
@@ -1,6 +1,7 @@
import React, { useState } from 'react';
import { X, User, Award, Check, AlertCircle } from 'lucide-react';
import { apiFetch } from '../api/client';
import { getRandomSkillColor } from '../utils/colors';
export default function ProfileModal({ user, skills, onClose, onUserUpdated, onRefreshSkills }) {
const [displayName, setDisplayName] = useState(user?.display_name || '');
@@ -11,7 +12,7 @@ export default function ProfileModal({ user, skills, onClose, onUserUpdated, onR
// New skill fields
const [newSkillName, setNewSkillName] = useState('');
const [newSkillDesc, setNewSkillDesc] = useState('');
const [newSkillColor, setNewSkillColor] = useState('#2563eb');
const [newSkillColor, setNewSkillColor] = useState(getRandomSkillColor());
const [savingProfile, setSavingProfile] = useState(false);
const [creatingSkill, setCreatingSkill] = useState(false);
@@ -67,6 +68,7 @@ export default function ProfileModal({ user, skills, onClose, onUserUpdated, onR
});
setNewSkillName('');
setNewSkillDesc('');
setNewSkillColor(getRandomSkillColor());
setSuccess('Neue Fähigkeit erfolgreich angelegt!');
onRefreshSkills();
} catch (err) {
frontend/src/components/SkillsModal.jsx
+3 -1
View File
@@ -1,11 +1,12 @@
import React, { useState } from 'react';
import { X, Award, Plus, Check, AlertCircle } from 'lucide-react';
import { apiFetch } from '../api/client';
import { getRandomSkillColor } from '../utils/colors';
export default function SkillsModal({ skills, user, onClose, onRefreshSkills, onRefreshUser }) {
const [newSkillName, setNewSkillName] = useState('');
const [newSkillDesc, setNewSkillDesc] = useState('');
const [newSkillColor, setNewSkillColor] = useState('#3b82f6');
const [newSkillColor, setNewSkillColor] = useState(getRandomSkillColor());
const [creating, setCreating] = useState(false);
const [savingUserSkills, setSavingUserSkills] = useState(false);
@@ -39,6 +40,7 @@ export default function SkillsModal({ skills, user, onClose, onRefreshSkills, on
});
setNewSkillName('');
setNewSkillDesc('');
setNewSkillColor(getRandomSkillColor());
setSuccess('Fähigkeit erfolgreich angelegt!');
onRefreshSkills();
} catch (err) {
frontend/src/pages/AdminPage.jsx
+3 -1
View File
@@ -7,6 +7,7 @@ import {
Mail, Send, Lock
} from 'lucide-react';
import { apiFetch } from '../api/client';
import { getRandomSkillColor } from '../utils/colors';
export default function AdminPage({ branding, onRefreshBranding, onRefreshEvents, skills, onRefreshSkills }) {
const [activeAdminTab, setActiveAdminTab] = useState('users'); // 'users' | 'events' | 'templates' | 'branding' | 'smtp'
@@ -32,7 +33,7 @@ export default function AdminPage({ branding, onRefreshBranding, onRefreshEvents
const [templatesList, setTemplatesList] = useState([]);
const [newSkillName, setNewSkillName] = useState('');
const [newSkillDesc, setNewSkillDesc] = useState('');
const [newSkillColor, setNewSkillColor] = useState('#E05A47');
const [newSkillColor, setNewSkillColor] = useState(getRandomSkillColor());
// 4. Branding & Layout State
const [appName, setAppName] = useState(branding?.app_name || 'Veranstaltungsschichtplaner');
@@ -238,6 +239,7 @@ export default function AdminPage({ branding, onRefreshBranding, onRefreshEvents
});
setNewSkillName('');
setNewSkillDesc('');
setNewSkillColor(getRandomSkillColor());
onRefreshSkills();
showNotif('Qualifikation angelegt.');
} catch (e) {
frontend/src/utils/colors.js
+9
View File
@@ -0,0 +1,9 @@
export const VIBRANT_SKILL_COLORS = [
'#E05A47', '#3B82F6', '#10B981', '#8B5CF6', '#F59E0B',
'#EC4899', '#06B6D4', '#6366F1', '#14B8A6', '#F97316',
'#D97706', '#059669', '#7C3AED', '#DB2777', '#2563EB'
];
export const getRandomSkillColor = () => {
return VIBRANT_SKILL_COLORS[Math.floor(Math.random() * VIBRANT_SKILL_COLORS.length)];
};