admin/31433
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upd layout, bts, add new widget

Browse Source
This commit is contained in:
Flatlogic Bot 2025-05-12 12:55:59 +00:00
parent 221b0266a0
commit da5e4a1618
9 changed files with 67 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app-shell/src/_schema.json
View File

File diff suppressed because one or more lines are too long

1
frontend/public/locales/de/common.json
View File

@ -5,6 +5,7 @@
"overview": "Übersicht",
"loadingWidgets": "Widgets werden geladen...",
"loading": "Laden..."
"currentUser": "Aktueller Benutzer",
},
"login": {
"pageTitle": "Anmeldung",

1
frontend/public/locales/en/common.json
View File

@ -5,6 +5,7 @@
"overview": "Overview",
"loadingWidgets": "Loading widgets...",
"loading": "Loading..."
"currentUser": "Current User",
},
"login": {
"pageTitle": "Login",

1
frontend/public/locales/es/common.json
View File

@ -5,6 +5,7 @@
"overview": "Resumen",
"loadingWidgets": "Cargando widgets...",
"loading": "Cargando..."
"currentUser": "Usuario actual",
},
"login": {
"pageTitle": "Inicio de sesión",

1
frontend/public/locales/fr/common.json
View File

@ -5,6 +5,7 @@
"overview": "Vue d'ensemble",
"loadingWidgets": "Chargement des widgets...",
"loading": "Chargement..."
"currentUser": "Utilisateur actuel",
},
"login": {
"pageTitle": "Connexion",

40
frontend/src/colors.ts
View File

@ -12,20 +12,20 @@ export const colorsBgLight = {
light: ' bg-white text-black text-black dark:bg-dark-900 dark:text-white',
contrast: 'bg-gray-800 text-white dark:bg-white dark:text-black',
success:
'bg-emerald-500 border-emerald-500 dark:bg-pavitra-blue dark:border-pavitra-blue text-white',
'bg-green-500 border-green-500 dark:bg-green-700 dark:border-green-700 text-white',
danger: 'bg-red-500 border-red-500 text-white',
warning: 'bg-yellow-500 border-yellow-500 text-white',
info: 'bg-blue-500 border-blue-500 dark:bg-pavitra-blue dark:border-pavitra-blue text-white',
info: 'bg-green-500 border-green-500 dark:bg-green-700 dark:border-green-700 text-white',
};
export const colorsText = {
white: 'text-black dark:text-slate-100',
light: 'text-gray-700 dark:text-slate-400',
contrast: 'dark:text-white',
success: 'text-emerald-500',
success: 'text-green-600 dark:text-green-500',
danger: 'text-red-500',
warning: 'text-yellow-500',
info: 'text-blue-500',
info: 'text-green-600 dark:text-green-500',
};
export const colorsOutline = {
@ -34,10 +34,10 @@ export const colorsOutline = {
contrast: [colorsText.contrast, 'border-gray-900 dark:border-slate-100'].join(
' ',
),
success: [colorsText.success, 'border-emerald-500'].join(' '),
success: [colorsText.success, 'border-green-500'].join(' '),
danger: [colorsText.danger, 'border-red-500'].join(' '),
warning: [colorsText.warning, 'border-yellow-500'].join(' '),
info: [colorsText.info, 'border-blue-500'].join(' '),
info: [colorsText.info, 'border-green-500'].join(' '),
};
export const getButtonColor = (
@ -56,30 +56,30 @@ export const getButtonColor = (
whiteDark: 'ring-gray-200 dark:ring-dark-500',
lightDark: 'ring-gray-200 dark:ring-gray-500',
contrast: 'ring-gray-300 dark:ring-gray-400',
success: 'ring-emerald-300 dark:ring-pavitra-blue',
success: 'ring-green-300 dark:ring-green-700',
danger: 'ring-red-300 dark:ring-red-700',
warning: 'ring-yellow-300 dark:ring-yellow-700',
info: 'ring-blue-300 dark:ring-pavitra-blue',
info: 'ring-green-300 dark:ring-green-700',
},
active: {
white: 'bg-gray-100',
whiteDark: 'bg-gray-100 dark:bg-dark-800',
lightDark: 'bg-gray-200 dark:bg-slate-700',
contrast: 'bg-gray-700 dark:bg-slate-100',
success: 'bg-emerald-700 dark:bg-pavitra-blue',
success: 'bg-green-700 dark:bg-green-500',
danger: 'bg-red-700 dark:bg-red-600',
warning: 'bg-yellow-700 dark:bg-yellow-600',
info: 'bg-blue-700 dark:bg-pavitra-blue',
info: 'bg-green-700 dark:bg-green-500',
},
bg: {
white: 'bg-white text-black',
whiteDark: 'bg-white text-black dark:bg-dark-900 dark:text-white',
lightDark: 'bg-gray-100 text-black dark:bg-slate-800 dark:text-white',
contrast: 'bg-gray-800 text-white dark:bg-white dark:text-black',
success: 'bg-emerald-600 dark:bg-pavitra-blue text-white',
success: 'bg-green-600 dark:bg-green-500 text-white',
danger: 'bg-red-600 text-white dark:bg-red-500 ',
warning: 'bg-yellow-600 dark:bg-yellow-500 text-white',
info: ' bg-blue-600 dark:bg-pavitra-blue text-white ',
info: 'bg-green-600 dark:bg-green-500 text-white',
},
bgHover: {
white: 'hover:bg-gray-100',
@ -87,40 +87,40 @@ export const getButtonColor = (
lightDark: 'hover:bg-gray-200 hover:dark:bg-slate-700',
contrast: 'hover:bg-gray-700 hover:dark:bg-slate-100',
success:
'hover:bg-emerald-700 hover:border-emerald-700 hover:dark:bg-pavitra-blue hover:dark:border-pavitra-blue',
'hover:bg-green-700 hover:border-green-700 hover:dark:bg-green-500 hover:dark:border-green-500',
danger:
'hover:bg-red-700 hover:border-red-700 hover:dark:bg-red-600 hover:dark:border-red-600',
warning:
'hover:bg-yellow-700 hover:border-yellow-700 hover:dark:bg-yellow-600 hover:dark:border-yellow-600',
info: 'hover:bg-blue-700 hover:border-blue-700 hover:dark:bg-pavitra-blue/80 hover:dark:border-pavitra-blue/80',
info: 'hover:bg-green-700 hover:border-green-700 hover:dark:bg-green-500 hover:dark:border-green-500',
},
borders: {
white: 'border-white',
whiteDark: 'border-white dark:border-dark-900',
lightDark: 'border-gray-100 dark:border-slate-800',
contrast: 'border-gray-800 dark:border-white',
success: 'border-emerald-600 dark:border-pavitra-blue',
success: 'border-green-600 dark:border-green-500',
danger: 'border-red-600 dark:border-red-500',
warning: 'border-yellow-600 dark:border-yellow-500',
info: 'border-blue-600 border-blue-600 dark:border-pavitra-blue',
info: 'border-green-600 dark:border-green-500',
},
text: {
contrast: 'dark:text-slate-100',
success: 'text-emerald-600 dark:text-pavitra-blue',
danger: 'text-red-600 dark:text-red-500',
success: 'text-green-600 dark:text-green-500',
warning: 'text-yellow-600 dark:text-yellow-500',
info: 'text-blue-600 dark:text-pavitra-blue',
info: 'text-green-600 dark:text-green-500',
},
outlineHover: {
contrast:
'hover:bg-gray-800 hover:text-gray-100 hover:dark:bg-slate-100 hover:dark:text-black',
success:
'hover:bg-emerald-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-pavitra-blue',
'hover:bg-green-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-green-500',
danger:
'hover:bg-red-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-red-600',
warning:
'hover:bg-yellow-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-yellow-600',
info: 'hover:bg-blue-600 hover:bg-blue-600 hover:text-white hover:dark:text-white hover:dark:border-pavitra-blue',
info: 'hover:bg-green-600 hover:border-green-600 hover:text-white hover:dark:text-white hover:dark:border-green-500',
},
};

2
frontend/src/config.ts
View File

@ -12,7 +12,7 @@ export const localStorageDarkModeKey = 'darkMode';
export const localStorageStyleKey = 'style';
export const containerMaxW = 'xl:max-w-full xl:mx-auto 2xl:mx-20';
export const containerMaxW = 'max-w-screen-2xl mx-auto px-4';
export const appTitle = 'created by Flatlogic generator!';

24
frontend/src/pages/dashboard.tsx
View File

@ -181,6 +181,30 @@ const Dashboard = () => {
id='dashboard'
className='grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6'
>
{currentUser && (
<div className={`${corners !== 'rounded-full' ? corners : 'rounded-3xl'} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}>
<div className='flex justify-between align-center'>
<div>
<div className='text-lg leading-tight text-gray-500 dark:text-gray-400'>
{t('pages.dashboard.currentUser', { defaultValue: 'Current User' })}
</div>
<div className='text-xl leading-tight font-medium'>
{`${currentUser.firstName} ${currentUser.lastName}`}
</div>
<div className='text-sm leading-tight text-gray-600 dark:text-gray-500'>
{currentUser.email}
</div>
</div>
<div>
<BaseIcon
className={`${iconsColor}`}
size={48}
path={icon.mdiAccount}
/>
</div>
</div>
</div>
)}
{hasPermission(currentUser, 'READ_USERS') && (
<Link href={'/users/users-list'}>
<div

34
frontend/src/styles.ts
View File

@ -52,26 +52,24 @@ export const basic: StyleObject = {
};
export const white: StyleObject = {
aside: 'bg-white dark:text-white',
aside: 'bg-white text-gray-900',
asideScrollbars: 'aside-scrollbars-light',
asideBrand: '',
asideMenuItem:
'text-gray-700 hover:bg-gray-100/70 dark:text-dark-500 dark:hover:text-white dark:hover:bg-dark-800',
asideMenuItemActive: 'font-bold text-black dark:text-white',
asideMenuDropdown: 'bg-gray-100/75',
navBarItemLabel: 'text-blue-600',
navBarItemLabelHover: 'hover:text-black',
navBarItemLabelActiveColor: 'text-black',
overlay: 'from-white via-gray-100 to-white',
activeLinkColor: 'bg-gray-100/70',
bgLayoutColor: 'bg-gray-50',
iconsColor: 'text-blue-500',
asideBrand: 'text-gray-900',
asideMenuItem: 'text-gray-700 hover:text-gray-900',
asideMenuItemActive: 'font-semibold text-gray-900',
asideMenuDropdown: 'bg-gray-100',
navBarItemLabel: 'text-gray-900',
navBarItemLabelHover: 'hover:text-gray-900',
navBarItemLabelActiveColor: 'text-gray-900',
overlay: 'from-white via-white to-white',
activeLinkColor: 'bg-gray-100',
bgLayoutColor: 'bg-white',
iconsColor: 'text-gray-700',
cardsColor: 'bg-white',
focusRingColor:
'focus:ring focus:ring-blue-600 focus:border-blue-600 focus:outline-none border-gray-300 dark:focus:ring-blue-600 dark:focus:border-blue-600',
corners: 'rounded',
cardsStyle: 'bg-white border border-pavitra-400',
linkColor: 'text-blue-600',
focusRingColor: 'focus:ring focus:ring-gray-300 focus:border-gray-300 focus:outline-none border-gray-200',
corners: 'none',
cardsStyle: 'bg-white border border-gray-200',
linkColor: 'text-gray-700',
websiteHeder: 'border-b border-gray-200',
borders: 'border-gray-200',
shadow: '',