Compare commits

...

2 Commits

Author SHA1 Message Date
183e3826be 3.16.5
All checks were successful
platform/bro-js/journal.pl/pipeline/head This commit looks good
2025-04-03 23:07:48 +03:00
1ec4bc081e mark student button 2025-04-03 23:07:41 +03:00
6 changed files with 156 additions and 154 deletions

4
package-lock.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "journal.pl", "name": "journal.pl",
"version": "3.16.4", "version": "3.16.5",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "journal.pl", "name": "journal.pl",
"version": "3.16.4", "version": "3.16.5",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@brojs/cli": "^1.8.4", "@brojs/cli": "^1.8.4",

View File

@ -1,6 +1,6 @@
{ {
"name": "journal.pl", "name": "journal.pl",
"version": "3.16.4", "version": "3.16.5",
"description": "bro-js platform journal ui repo", "description": "bro-js platform journal ui repo",
"main": "./src/index.tsx", "main": "./src/index.tsx",
"scripts": { "scripts": {

View File

@ -114,30 +114,3 @@ export const Wrapper = styled.div<{ warn?: boolean; width?: string | number; pos
: ''} : ''}
` `
export const AddMissedButton = styled.button`
position: absolute;
bottom: 8px;
right: 8px;
border: none;
background-color: var(--chakra-colors-blue-500);
color: white;
width: 26px;
height: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
opacity: 0.8;
transition: opacity 0.3s ease, transform 0.3s ease;
&:hover {
cursor: pointer;
opacity: 1;
transform: scale(1.1);
}
.chakra-ui-dark & {
background-color: var(--chakra-colors-blue-400);
}
`

View File

@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next'
import { Reaction, User } from '../../__data__/model' import { Reaction, User } from '../../__data__/model'
import { AddMissedButton, Avatar, Wrapper, NameOverlay } from './style' import { Avatar, Wrapper, NameOverlay } from './style'
// Map of reaction types to emojis // Map of reaction types to emojis
const REACTION_EMOJIS = { const REACTION_EMOJIS = {
@ -30,7 +30,6 @@ export function getGravatarURL(email, user) {
export const UserCard = ({ export const UserCard = ({
student, student,
present, present,
onAddUser = undefined,
wrapperAS = 'div', wrapperAS = 'div',
width, width,
recentlyPresent = false, recentlyPresent = false,
@ -39,7 +38,6 @@ export const UserCard = ({
student: User student: User
present: boolean present: boolean
width?: string | number width?: string | number
onAddUser?: (user: User) => void
wrapperAS?: React.ElementType<any, keyof React.JSX.IntrinsicElements> wrapperAS?: React.ElementType<any, keyof React.JSX.IntrinsicElements>
recentlyPresent?: boolean recentlyPresent?: boolean
reaction?: Reaction reaction?: Reaction
@ -98,11 +96,7 @@ export const UserCard = ({
</Box> </Box>
)} )}
</NameOverlay> </NameOverlay>
{onAddUser && !present && (
<AddMissedButton onClick={() => onAddUser(student)} aria-label={t('journal.pl.common.add')}>
<AddIcon boxSize={3} />
</AddMissedButton>
)}
{/* Анимация реакции */} {/* Анимация реакции */}
<AnimatePresence> <AnimatePresence>

View File

@ -4,6 +4,7 @@ import QRCode from 'qrcode'
import { sha256 } from 'js-sha256' import { sha256 } from 'js-sha256'
import { getConfigValue, getNavigationValue } from '@brojs/cli' import { getConfigValue, getNavigationValue } from '@brojs/cli'
import { motion, AnimatePresence } from 'framer-motion' import { motion, AnimatePresence } from 'framer-motion'
import { AddIcon } from '@chakra-ui/icons'
import { import {
Box, Box,
Container, Container,
@ -22,6 +23,7 @@ import { formatDate } from '../utils/dayjs-config'
import { useSetBreadcrumbs } from '../components' import { useSetBreadcrumbs } from '../components'
import { import {
AddMissedButton,
QRCanvas, QRCanvas,
StudentList, StudentList,
} from './style' } from './style'
@ -381,7 +383,6 @@ const LessonDetail = () => {
student={student} student={student}
present={student.present} present={student.present}
recentlyPresent={student.recentlyPresent} recentlyPresent={student.recentlyPresent}
onAddUser={(user: User) => manualAdd({ lessonId, user })}
reaction={accessCode?.body?.lesson?.studentReactions?.find(r => r.sub === student.sub)} reaction={accessCode?.body?.lesson?.studentReactions?.find(r => r.sub === student.sub)}
/> />
</Box> </Box>
@ -406,6 +407,12 @@ const LessonDetail = () => {
aspectRatio: "1" aspectRatio: "1"
}} }}
> >
<AddMissedButton
onClick={() => manualAdd({ lessonId, user: student })}
aria-label={t('journal.pl.common.add')}
>
<AddIcon boxSize={3} />
</AddMissedButton>
<Box <Box
position="absolute" position="absolute"
top="0" top="0"

View File

@ -15,6 +15,34 @@ const reveal = keyframes`
} }
` `
export const AddMissedButton = styled.button`
position: absolute;
bottom: 8px;
right: 8px;
border: none;
background-color: var(--chakra-colors-blue-500);
color: white;
width: 26px;
height: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
opacity: 0.8;
transition: opacity 0.3s ease, transform 0.3s ease;
&:hover {
cursor: pointer;
opacity: 1;
transform: scale(1.1);
}
.chakra-ui-dark & {
background-color: var(--chakra-colors-blue-400);
}
`
export const StudentList = styled.ul` export const StudentList = styled.ul`
padding: 0; padding: 0;
list-style: none; list-style: none;