bro-js/journal.pl
bro-js/journal.pl
7
1
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Добавлено расширение темы Chakra UI, реализован компонент AppHeader с переключением темной/светлой темы, обновлены стили для поддержки темной темы, улучшена загрузка компонентов с учетом цветовой схемы.

Browse Source
This commit is contained in:
Primakov Alexandr Alexandrovich 2025-03-23 08:48:34 +03:00
parent aef215c6e0
commit 433e3b87bf
14 changed files with 278 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/app.tsx
View File

@ -4,15 +4,24 @@ import { Global } from '@emotion/react'
import { BrowserRouter } from 'react-router-dom';
import ruLocale from 'dayjs/locale/ru';
import dayjs from 'dayjs';
import { ChakraProvider } from '@chakra-ui/react'
import { ChakraProvider, ColorModeScript, extendTheme } from '@chakra-ui/react'
import { Dashboard } from './dashboard';
import { globalStyles } from './global.styles';
dayjs.locale('ru', ruLocale);
// Расширяем тему Chakra UI
const theme = extendTheme({
config: {
initialColorMode: 'light',
useSystemColorMode: false,
},
})
const App = ({ store }) => (
<ChakraProvider>
<ChakraProvider theme={theme}>
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
<BrowserRouter>
<Helmet>
<meta name="viewport" content="width=device-width, user-scalable=no" />

41
src/components/app-header/app-header.tsx Normal file
View File

@ -0,0 +1,41 @@
import React from 'react';
import {
Flex,
IconButton,
useColorMode,
} from '@chakra-ui/react';
import { MoonIcon, SunIcon } from '@chakra-ui/icons';
interface AppHeaderProps {
serviceMenuContainerRef?: React.RefObject<HTMLDivElement>;
}
export const AppHeader = ({ serviceMenuContainerRef }: AppHeaderProps) => {
const { colorMode, toggleColorMode } = useColorMode();
return (
<Flex
as="header"
width="100%"
py={4}
px={8}
justifyContent="space-between"
alignItems="center"
position="sticky"
top={0}
zIndex={10}
bg={colorMode === 'light' ? 'white' : 'gray.800'}
boxShadow="sm"
>
{serviceMenuContainerRef && <div id="dots" ref={serviceMenuContainerRef}></div>}
<IconButton
aria-label={colorMode === 'light' ? 'Включить темную тему' : 'Включить светлую тему'}
icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
onClick={toggleColorMode}
variant="ghost"
size="md"
/>
</Flex>
);
};

1
src/components/app-header/index.ts Normal file
View File

@ -0,0 +1 @@
export { AppHeader } from './app-header';

4
src/components/index.ts Normal file
View File

@ -0,0 +1,4 @@
export { PageLoader } from './page-loader/page-loader';
export { XlSpinner } from './xl-spinner/xl-spinner';
export { ErrorBoundary } from './error-boundary';
export { AppHeader } from './app-header';

11
src/components/page-loader/page-loader.tsx
View File

@ -3,18 +3,23 @@ import {
Spinner,
Container,
Center,
useColorMode
} from '@chakra-ui/react'
export const PageLoader = () => (
export const PageLoader = () => {
const { colorMode } = useColorMode();
return (
<Container maxW="container.xl">
<Center h="300px">
<Spinner
thickness="4px"
speed="0.65s"
emptyColor="gray.200"
color="blue.500"
emptyColor={colorMode === 'light' ? 'gray.200' : 'gray.600'}
color={colorMode === 'light' ? 'blue.500' : 'blue.300'}
size="xl"
/>
</Center>
</Container>
)
}

22
src/components/user-card/style.ts
View File

@ -10,10 +10,10 @@ export const Avatar = styled.img`
export const Wrapper = styled.div<{ warn?: boolean; width?: string | number }>`
list-style: none;
background-color: #ffffff;
background-color: var(--chakra-colors-white);
padding: 16px;
border-radius: 12px;
box-shadow: 2px 2px 6px #0000005c;
box-shadow: 2px 2px 6px var(--chakra-colors-blackAlpha-400);
transition: all 0.5;
position: relative;
width: 180px;
@ -31,11 +31,22 @@ export const Wrapper = styled.div<{ warn?: boolean; width?: string | number }>`
${(props) =>
props.warn
? css`
background-color: #000000;
background-color: var(--chakra-colors-blackAlpha-800);
opacity: 0.7;
color: #e4e4e4;
color: var(--chakra-colors-gray-200);
`
: ''}
.chakra-ui-dark & {
background-color: var(--chakra-colors-gray-700);
color: var(--chakra-colors-white);
box-shadow: 2px 2px 6px var(--chakra-colors-blackAlpha-600);
}
.chakra-ui-dark &.warn {
background-color: var(--chakra-colors-blackAlpha-900);
color: var(--chakra-colors-gray-300);
}
`
export const AddMissedButton = styled.button`
@ -43,8 +54,9 @@ export const AddMissedButton = styled.button`
bottom: 8px;
right: 12px;
border: none;
background-color: #00000000;
background-color: transparent;
opacity: 0.2;
color: inherit;
:hover {
cursor: pointer;

15
src/components/user-card/user-card.tsx
View File

@ -1,5 +1,6 @@
import React from 'react'
import { sha256 } from 'js-sha256'
import { useColorMode } from '@chakra-ui/react'
import { User } from '../../__data__/model'
@ -26,10 +27,20 @@ export const UserCard = ({
onAddUser?: (user: User) => void
wrapperAS?: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
}) => {
const { colorMode } = useColorMode();
return (
<Wrapper warn={!present} as={wrapperAS} width={width}>
<Wrapper
warn={!present}
as={wrapperAS}
width={width}
className={!present ? 'warn' : ''}
>
<Avatar src={student.picture || getGravatarURL(student.email, null)} />
<p style={{ marginTop: 6 }}>
<p style={{
marginTop: 6,
color: colorMode === 'light' ? 'inherit' : 'var(--chakra-colors-gray-100)'
}}>
{student.name || student.preferred_username}{' '}
</p>
{onAddUser && !present && (

11
src/components/xl-spinner/xl-spinner.tsx
View File

@ -3,18 +3,23 @@ import {
Container,
Center,
Spinner,
useColorMode
} from '@chakra-ui/react'
export const XlSpinner = () => (
export const XlSpinner = () => {
const { colorMode } = useColorMode();
return (
<Container maxW="container.xl">
<Center h="300px">
<Spinner
thickness="4px"
speed="0.65s"
emptyColor="gray.200"
color="blue.500"
emptyColor={colorMode === 'light' ? 'gray.200' : 'gray.600'}
color={colorMode === 'light' ? 'blue.500' : 'blue.300'}
size="xl"
/>
</Center>
</Container>
)
}

92
src/dashboard.tsx
View File

@ -1,8 +1,8 @@
import React, { useEffect, Suspense } from 'react'
import React, { useEffect, Suspense, useRef, useState } from 'react'
import { Routes, Route, useNavigate } from 'react-router-dom'
import { Provider } from 'react-redux'
import { getNavigationsValue } from '@brojs/cli'
import { Box, Container, Spinner, VStack } from '@chakra-ui/react'
import { getNavigationValue } from '@brojs/cli'
import { Box, Container, Spinner, VStack, useColorMode } from '@chakra-ui/react'
import {
CourseListPage,
@ -11,7 +11,31 @@ import {
UserPage,
AttendancePage,
} from './pages'
import { ErrorBoundary } from './components/error-boundary'
import { ErrorBoundary, AppHeader } from './components'
import { keycloak } from './__data__/kc'
const MENU_SCRIPT_URL = 'https://admin.bro-js.ru/remote-assets/lib/serviceMenu/serviceMenu.js'
const loadServiceMenu = () => {
return new Promise((resolve, reject) => {
const script = document.createElement('script')
script.src = MENU_SCRIPT_URL
script.onload = () => setTimeout(() => resolve(true), 1000)
script.onerror = reject
document.body.appendChild(script)
})
}
declare global {
interface Window {
createServiceMenu?: (options: any) => {
show: () => void;
hide: () => void;
update: () => void;
destroy: () => void;
};
}
}
const Wrapper = ({ children }: { children: React.ReactElement }) => (
<Suspense
@ -37,11 +61,58 @@ const Wrapper = ({ children }: { children: React.ReactElement }) => (
</Suspense>
)
export const Dashboard = ({ store }) => (
interface DashboardProps {
store: any; // Используем any, поскольку точный тип store не указан
}
export const Dashboard = ({ store }: DashboardProps) => {
const serviceMenuContainerRef = useRef<HTMLDivElement>(null);
const serviceMenuInstanceRef = useRef<any>(null);
const [serviceMenu, setServiceMenu] = useState(false);
const { colorMode } = useColorMode();
useEffect(() => {
loadServiceMenu().then(() => {
setServiceMenu(true)
}).catch(console.error)
}, [])
useEffect(() => {
// Проверяем, что библиотека загружена и есть контейнер для меню
if (window.createServiceMenu && serviceMenuContainerRef.current && serviceMenu) {
// Создаем меню сервисов
serviceMenuInstanceRef.current = window.createServiceMenu({
accessToken: keycloak.token,
apiUrl: 'https://admin.bro-js.ru',
targetElement: serviceMenuContainerRef.current,
styles: {
dotColor: colorMode === 'light' ? '#333' : '#ccc',
hoverColor: colorMode === 'light' ? '#eee' : '#444',
backgroundColor: colorMode === 'light' ? '#fff' : '#2D3748',
textColor: colorMode === 'light' ? '#333' : '#fff',
},
translations: {
menuTitle: 'Сервисы BRO',
menuAriaLabel: 'Сервисы BRO',
}
});
}
// Очистка при размонтировании
return () => {
if (serviceMenuInstanceRef.current) {
serviceMenuInstanceRef.current.destroy();
serviceMenuInstanceRef.current = null;
}
};
}, [keycloak.token, serviceMenu, colorMode]);
return (
<Provider store={store}>
<AppHeader serviceMenuContainerRef={serviceMenuContainerRef} />
<Routes>
<Route
path={getNavigationsValue('journal.main')}
path={getNavigationValue('journal.main')}
element={
<Wrapper>
<CourseListPage />
@ -49,7 +120,7 @@ export const Dashboard = ({ store }) => (
}
/>
<Route
path={`${getNavigationsValue('journal.main')}/lessons-list/:courseId`}
path={`${getNavigationValue('journal.main')}/lessons-list/:courseId`}
element={
<Wrapper>
<LessonListPage />
@ -57,7 +128,7 @@ export const Dashboard = ({ store }) => (
}
/>
<Route
path={`${getNavigationsValue('journal.main')}/u/:lessonId/:accessId`}
path={`${getNavigationValue('journal.main')}/u/:lessonId/:accessId`}
element={
<Wrapper>
<UserPage />
@ -65,7 +136,7 @@ export const Dashboard = ({ store }) => (
}
/>
<Route
path={`${getNavigationsValue('journal.main')}/lesson/:courseId/:lessonId`}
path={`${getNavigationValue('journal.main')}/lesson/:courseId/:lessonId`}
element={
<Wrapper>
<LessonDetailsPage />
@ -73,7 +144,7 @@ export const Dashboard = ({ store }) => (
}
/>
<Route
path={`${getNavigationsValue('journal.main')}${getNavigationsValue('link.journal.attendance')}`}
path={`${getNavigationValue('journal.main')}${getNavigationValue('link.journal.attendance')}`}
element={
<Wrapper>
<AttendancePage />
@ -83,3 +154,4 @@ export const Dashboard = ({ store }) => (
</Routes>
</Provider>
)
}

21
src/global.styles.ts
View File

@ -30,6 +30,27 @@ body {
/* font-family: KiyosunaSans, Montserrat, RFKrabuler, sans-serif; */
font-weight: 600;
}
/* Стили для темной темы */
html[data-theme="dark"] body {
color: #fff;
background: radial-gradient(
farthest-side at bottom left,
rgba(23, 138, 3, 0.709),
rgba(0, 0, 0, 0) 65%
),
radial-gradient(
farthest-corner at bottom center,
rgba(155, 155, 7, 0.5),
rgba(0, 0, 0, 0) 40%
),
radial-gradient(
farthest-side at bottom right,
rgba(0, 116, 153, 0.6),
rgb(18, 25, 31) 65%
);
}
#app {
height: 100%;
overflow-y: auto;

2
src/pages/attendance/attendance.tsx
View File

@ -130,7 +130,7 @@ const ShortText = ({ text }: { text: string }) => {
if (needShortText) {
return (
<Tooltip label="На страницу с лекциями" fontSize="12px" top="16px">
<Tooltip label={text} fontSize="12px" top="16px">
<Text>{text.slice(0, 20)}...</Text>
</Tooltip>
)

70
src/pages/course-list/course-list.tsx
View File

@ -19,38 +19,14 @@ import {
useColorMode,
} from '@chakra-ui/react'
import { useForm, Controller } from 'react-hook-form'
const MENU_SCRIPT_URL = 'https://admin.bro-js.ru/remote-assets/lib/serviceMenu/serviceMenu.js'
const loadServiceMenu = () => {
return new Promise((resolve, reject) => {
const script = document.createElement('script')
script.src = MENU_SCRIPT_URL
script.onload = () => setTimeout(() => resolve(true), 1000)
script.onerror = reject
document.body.appendChild(script)
})
}
import { AddIcon } from '@chakra-ui/icons'
import { ErrorSpan } from '../style'
declare global {
interface Window {
createServiceMenu?: (options: any) => {
show: () => void;
hide: () => void;
update: () => void;
destroy: () => void;
};
}
}
import { useAppSelector } from '../../__data__/store'
import { api } from '../../__data__/api/api'
import { isTeacher } from '../../utils/user'
import { AddIcon } from '@chakra-ui/icons'
import { PageLoader } from '../../components/page-loader/page-loader'
import { CourseCard } from './course-card'
import { keycloak } from '../../__data__/kc'
interface NewCourseForm {
startDt: string
@ -65,13 +41,7 @@ export const CoursesList = () => {
const [showForm, setShowForm] = useState(false)
const toastRef = useRef(null)
const [serviceMenu, setServiceMenu] = useState(false)
useEffect(() => {
loadServiceMenu().then(() => {
setServiceMenu(true)
}).catch(console.error)
}, [])
const { colorMode } = useColorMode();
const {
control,
@ -111,39 +81,6 @@ export const CoursesList = () => {
}
}, [crucQuery.isSuccess])
const serviceMenuContainerRef = useRef<HTMLDivElement>(null)
const serviceMenuInstanceRef = useRef<any>(null)
useEffect(() => {
// Проверяем, что библиотека загружена и есть контейнер для меню
if (window.createServiceMenu && serviceMenuContainerRef.current) {
// Создаем меню сервисов
serviceMenuInstanceRef.current = window.createServiceMenu({
accessToken: keycloak.token,
apiUrl: 'https://admin.bro-js.ru',
targetElement: serviceMenuContainerRef.current,
styles: {
dotColor: '#333',
hoverColor: '#eee',
backgroundColor: '#fff',
textColor: '#333',
},
translations: {
menuTitle: 'Сервисы BRO',
menuAriaLabel: 'Сервисы BRO',
}
});
}
// Очистка при размонтировании
return () => {
if (serviceMenuInstanceRef.current) {
serviceMenuInstanceRef.current.destroy();
serviceMenuInstanceRef.current = null;
}
};
}, [keycloak.token, serviceMenu]);
if (isLoading) {
return (
<PageLoader />
@ -151,8 +88,6 @@ export const CoursesList = () => {
}
return (
<>
<div style={{ position: 'absolute', top: 6, left: 6 }} id="dots" ref={serviceMenuContainerRef}></div>
<Container maxW="container.xl">
{isTeacher(user) && (
<Box mt="15" mb="15">
@ -263,6 +198,5 @@ export const CoursesList = () => {
))}
</VStack>
</Container>
</>
)
}

4
src/pages/lesson-list/components/item.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect, useRef, useState } from 'react'
import dayjs from 'dayjs'
import { Link } from 'react-router-dom'
import { getNavigationsValue, getFeatures } from '@brojs/cli'
import { getNavigationValue, getFeatures } from '@brojs/cli'
import {
Button,
Tr,
@ -105,7 +105,7 @@ export const Item: React.FC<ItemProps> = ({
{isTeacher && (
<Td>
<Link
to={`${getNavigationsValue('journal.main')}/lesson/${courseId}/${id}`}
to={`${getNavigationValue('journal.main')}/lesson/${courseId}/${id}`}
style={{ display: 'flex' }}
>
<img width={24} src={qrCode} style={{ margin: '0 auto' }} />

9
src/pages/style.ts
View File

@ -31,9 +31,14 @@ export const QRCanvas = styled.canvas`
`
export const ErrorSpan = styled.span`
color: #f9e2e2;
color: var(--chakra-colors-red-100);
display: block;
padding: 16px;
background-color: #d32f0b;
background-color: var(--chakra-colors-red-600);
border-radius: 11px;
.chakra-ui-dark & {
color: var(--chakra-colors-red-200);
background-color: var(--chakra-colors-red-800);
}
`