feat: Enhance Dataset Index with Dynamic Legend and Improved State Management for submitter, editor and reviewer
Some checks failed
build.yaml / feat: Enhance Dataset Index with Dynamic Legend and Improved State Management for submitter, editor and reviewer (push) Failing after 0s

- Added a collapsible legend to display dataset states and available actions.
- Implemented localStorage persistence for legend visibility.
- Refactored dataset state handling with dynamic classes and labels.
- Improved table layout and styling for better user experience.
- Updated Tailwind CSS configuration to define new background colors for dataset states.
This commit is contained in:
Kaimbacher 2025-10-30 14:42:36 +01:00
commit 88e37bfee8
8 changed files with 785 additions and 465 deletions

View file

@ -12,25 +12,66 @@ module.exports = {
gray: 'gray',
},
extend: {
backgroundImage: {
'radio-checked': "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' /%3E%3C/svg%3E\")",
'checkbox-checked': "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E\")",
backgroundImage: {
'radio-checked':
"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' /%3E%3C/svg%3E\")",
'checkbox-checked':
"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E\")",
},
backgroundColor: {
// Draft / In Progress - Light blue-gray
'draft': 'rgb(224 242 254)', // sky-100
'draft-dark': 'rgb(12 74 110 / 0.3)', // sky-900/30
'inprogress': 'rgb(224 242 254)', // sky-100
'inprogress-dark': 'rgb(12 74 110 / 0.3)', // sky-900/30
// Released / Submitted - Bright blue
'released': 'rgb(191 219 254)', // blue-200
'released-dark': 'rgb(30 58 138 / 0.3)', // blue-900/30
// Editor Accepted - Blue-green (teal)
'editor-accepted': 'rgb(204 251 241)', // teal-100
'editor-accepted-dark': 'rgb(19 78 74 / 0.3)', // teal-900/30
// Rejected by Reviewer - Yellow-orange (amber)
'rejected-reviewer': 'rgb(254 243 199)', // amber-100
'rejected-reviewer-dark': 'rgb(120 53 15 / 0.3)', // amber-900/30
// Rejected by Editor - Rose/Red (back to submitter)
'rejected-editor': 'rgb(254 205 211)', // rose-200
'rejected-editor-dark': 'rgb(136 19 55 / 0.3)', // rose-900/30
// Approved / Ready for Review - Cyan (blue-green)
'approved': 'rgb(207 250 254)', // cyan-100
'approved-dark': 'rgb(22 78 99 / 0.3)', // cyan-900/30
// Reviewer Accepted / In Review - Lime yellow-green
'reviewer-accepted': 'rgb(236 252 203)', // lime-100
'reviewer-accepted-dark': 'rgb(54 83 20 / 0.3)', // lime-900/30
// Reviewed - Soft yellow
'reviewed': 'rgb(254 240 138)', // yellow-200
'reviewed-dark': 'rgb(113 63 18 / 0.3)', // yellow-900/30
// Published - Fresh green
'published': 'rgb(187 247 208)', // green-200
'published-dark': 'rgb(20 83 45 / 0.3)', // green-900/30
},
colors: {
'primary': '#22C55E',
'inprogress': 'rgb(94 234 212)',
'primary': '#22C55E',
'inprogress': 'rgb(94 234 212)',
'released': 'rgb(52 211 153)',
'editor-accepted': 'rgb(125 211 252)',
'approved': '#FFEB3B', //A lighter yellow, which is cheerful and can indicate that something is in a pending state.
'approved': '#FFEB3B', //A lighter yellow, which is cheerful and can indicate that something is in a pending state.
'rejected-editor': '#f97316',
'rejected-reviewer': '#f97316',
'reviewed': '#FFC107', // warm amber, suggesting caution but still positive
'published': '#8BC34A', // lighter green, which is also fresh and positive
'primary-dark': '#DCFCE7',
'lime': {
'primary-dark': '#DCFCE7',
'lime': {
DEFAULT: '#BFCE40',
dark: 'rgba(5,46,55,0.7)',
50: '#FBFCF7',
50: '#FBFCF7',
100: '#F8FBE1',
200: '#EEF69E',
300: '#DCEC53',
@ -40,7 +81,7 @@ module.exports = {
700: '#357C06',
800: '#295B09',
900: '#20450A',
},
},
},
fontFamily: {
sans: ['Inter', ...defaultTheme.fontFamily.sans],
@ -106,7 +147,7 @@ module.exports = {
{ values: theme('asideScrollbars') },
);
}),
plugin(function({ addUtilities }) {
plugin(function ({ addUtilities }) {
const newUtilities = {
'.drag-none': {
'-webkit-user-drag': 'none',
@ -115,10 +156,10 @@ module.exports = {
'-o-user-drag': 'none',
'user-drag': 'none',
},
}
addUtilities(newUtilities)
};
addUtilities(newUtilities);
}),
// As of Tailwind CSS v3.3, the `@tailwindcss/line-clamp` plugin is now included by default
// require('@tailwindcss/line-clamp'),
],
};
};