Skip to content

Commit

Permalink
UI.minor fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@tonyco97
tonyco97 committed Oct 9, 2024
1 parent a2bd096 commit f26e181
Show file tree
Hide file tree
Showing 27 changed files with 333 additions and 558 deletions.
13 changes: 13 additions & 0 deletions components/chart/HorizontalBarChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,12 @@ import {
Legend,
} from 'chart.js'
import { convertToHumanReadable } from '../../lib/queueManager'
import {
GRAY_200,
GRAY_700,
} from '../../lib/colors'
import { useSelector } from 'react-redux'
import { RootState } from '../../store'
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)

interface BarChartHorizontalProps {
Expand All @@ -25,6 +31,8 @@ const BarChartHorizontal: FC<BarChartHorizontalProps> = ({
titleText,
numericTooltip,
}) => {
const { theme } = useSelector((state: RootState) => state.darkTheme)

const options = {
indexAxis: 'y' as const,
elements: {
Expand Down Expand Up @@ -62,6 +70,11 @@ const BarChartHorizontal: FC<BarChartHorizontalProps> = ({
font: {
size: 16,
},
color:
theme === 'dark' ||
(theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
? GRAY_200
: GRAY_700,
},
tooltip: {
callbacks: {
Expand Down
20 changes: 17 additions & 3 deletions components/chart/HorizontalNoLabel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,12 @@ import {
} from 'chart.js'
import { getRandomColor } from '../../lib/queueManager'
import ChartDataLabels from 'chartjs-plugin-datalabels'
import {
GRAY_200,
GRAY_700,
} from '../../lib/colors'
import { useSelector } from 'react-redux'
import { RootState } from '../../store'

ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)

Expand All @@ -20,13 +26,12 @@ interface BarChartHorizontalNoLabelsProps {
queuedata: any
}

// type Align = 'start' | 'center' | 'end' | 'left' | 'right' | 'top' | 'bottom' | number | ((context: any) => Align);

const BarChartHorizontalNoLabels: FC<BarChartHorizontalNoLabelsProps> = ({
datasets,
titleText,
queuedata,
}) => {
const { theme } = useSelector((state: RootState) => state.darkTheme)
const validQueueData = queuedata || []

const queueDataMap: { [label: string]: any } = {}
Expand All @@ -48,7 +53,6 @@ const BarChartHorizontalNoLabels: FC<BarChartHorizontalNoLabelsProps> = ({
},
scales: {
y: {
// display: false,
display: true,

beginAtZero: true,
Expand All @@ -63,6 +67,11 @@ const BarChartHorizontalNoLabels: FC<BarChartHorizontalNoLabelsProps> = ({
font: {
size: 14,
},
color:
theme === 'dark' ||
(theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
? GRAY_200
: GRAY_700,
},
},
x: {
Expand Down Expand Up @@ -91,6 +100,11 @@ const BarChartHorizontalNoLabels: FC<BarChartHorizontalNoLabelsProps> = ({
font: {
size: 16,
},
color:
theme === 'dark' ||
(theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
? GRAY_200
: GRAY_700,
},
datalabels: {
color: 'white',
Expand Down
20 changes: 19 additions & 1 deletion components/chart/HorizontalNotStacked.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,14 @@ import {
Tooltip,
Legend,
} from 'chart.js'
import {
GRAY_200,
GRAY_300,
GRAY_600,
GRAY_700,
} from '../../lib/colors'
import { useSelector } from 'react-redux'
import { RootState } from '../../store'
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)

interface BarChartHorizontalNotStackedProps {
Expand All @@ -24,6 +32,7 @@ const BarChartHorizontalNotStacked: FC<BarChartHorizontalNotStackedProps> = ({
tickColor,
titleText
}) => {
const { theme } = useSelector((state: RootState) => state.darkTheme)
const options = {
indexAxis: 'y' as const,
responsive: true,
Expand All @@ -45,7 +54,11 @@ const BarChartHorizontalNotStacked: FC<BarChartHorizontalNotStackedProps> = ({
},
ticks: {
stepSize: 1,
color: tickColor,
color:
theme === 'dark' ||
(theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
? GRAY_200
: GRAY_700,
font:{
size:14,
},
Expand Down Expand Up @@ -74,6 +87,11 @@ const BarChartHorizontalNotStacked: FC<BarChartHorizontalNotStackedProps> = ({
font: {
size: 16,
},
color:
theme === 'dark' ||
(theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
? GRAY_300
: GRAY_600,
},
},
}
Expand Down
29 changes: 26 additions & 3 deletions components/chart/HorizontalWithTitle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,21 +9,28 @@ import {
Tooltip,
Legend,
} from 'chart.js'
import { useSelector } from 'react-redux'
import { RootState } from '../../store'
import {
GRAY_200,
GRAY_300,
GRAY_600,
GRAY_700,
} from '../../lib/colors'
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)

interface BarChartHorizontalWithTitleProps {
labels: string[]
datasets: any[]
tickColor?: string
titleText?: string
}

const BarChartHorizontalWithTitle: FC<BarChartHorizontalWithTitleProps> = ({
labels,
datasets,
tickColor,
titleText,
}) => {
const { theme } = useSelector((state: RootState) => state.darkTheme)
const options = {
indexAxis: 'y' as const,
responsive: true,
Expand All @@ -45,7 +52,11 @@ const BarChartHorizontalWithTitle: FC<BarChartHorizontalWithTitleProps> = ({
},
ticks: {
stepSize: 2,
color: tickColor,
color:
theme === 'dark' ||
(theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
? GRAY_200
: GRAY_700,
font: {
size: 14,
},
Expand All @@ -62,13 +73,25 @@ const BarChartHorizontalWithTitle: FC<BarChartHorizontalWithTitleProps> = ({
legend: {
position: 'bottom' as const,
display: false,
labels: {
color:
theme === 'dark' ||
(theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
? GRAY_300
: GRAY_600,
},
},
title: {
display: true,
text: titleText,
font: {
size: 16,
},
color:
theme === 'dark' ||
(theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
? GRAY_300
: GRAY_600,
padding: {
top: 0,
bottom: 4,
Expand Down
6 changes: 2 additions & 4 deletions components/common/ProfilePicture/GravatarIconDrawerContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,10 @@ import { Button } from '../Button'
import { useState, useRef } from 'react'
import { closeSideDrawer } from '../../../lib/utils'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCircleXmark, faSave, faSearch } from '@fortawesome/free-solid-svg-icons'
import { faCircleXmark, faSearch } from '@fortawesome/free-solid-svg-icons'
import { SideDrawerCloseIcon } from '../SideDrawerCloseIcon'
import { t } from 'i18next'
import { TextInput } from '../TextInput'
import gravatar from 'gravatar'
import { Avatar } from '../Avatar'
import { uploadProfilePicture } from '../../../lib/profilePicture'
import { useSelector } from 'react-redux'
Expand Down Expand Up @@ -169,7 +168,7 @@ export const GravatarIconDrawerContent = forwardRef<
</div>
</div>
<div className='flex items-center justify-end'>
<Button variant='white' type='submit' onClick={closeSideDrawer} className='mb-4'>
<Button variant='ghost' type='submit' onClick={closeSideDrawer} className='mb-4'>
{t('Common.Cancel')}
</Button>
<Button
Expand All @@ -179,7 +178,6 @@ export const GravatarIconDrawerContent = forwardRef<
className='ml-4 mb-4'
disabled={isEmpty(avatarBase64)}
>
<FontAwesomeIcon icon={faSave} className='mr-2 h-4 w-4' />
{t('Settings.Save avatar')}
</Button>
</div>
Expand Down
94 changes: 76 additions & 18 deletions components/common/ProfilePicture/SelectProfilePictureDrawerContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,14 +73,11 @@ export const SelectProfilePictureDrawerContent = forwardRef<
const reader = new FileReader()

reader.readAsDataURL(file)
//to prevent local storage from becoming full
reader.onloadend = () => {
setSelectedFileBase64(reader.result)
setPreviewImage(reader.result)
resizeImage(reader.result as string, 30 * 1024)
}

if (selectedFileBase64) {
setPreviewImage(selectedFileBase64)
}
if (errorUpload) {
setErrorUpload(false)
}
Expand All @@ -98,9 +95,10 @@ export const SelectProfilePictureDrawerContent = forwardRef<
const reader = new FileReader()

reader.readAsDataURL(file)

//to prevent local storage from becoming full
reader.onloadend = () => {
setSelectedFileBase64(reader.result)
setPreviewImage(reader.result)
resizeImage(reader.result as string, 30 * 1024)
}

if (errorUpload) {
Expand All @@ -111,6 +109,67 @@ export const SelectProfilePictureDrawerContent = forwardRef<
}
}

// Function to resize the image
function resizeImage(dataUrl: string, maxFileSize: number) {
const img = new Image()
img.src = dataUrl

img.onload = () => {
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')

// Set the maximum width and height for the image
const MAX_WIDTH = 800
const MAX_HEIGHT = 800

let width = img.width
let height = img.height

if (width > height) {
if (width > MAX_WIDTH) {
height = (height * MAX_WIDTH) / width
width = MAX_WIDTH
}
} else {
if (height > MAX_HEIGHT) {
width = (width * MAX_HEIGHT) / height
height = MAX_HEIGHT
}
}

canvas.width = width
canvas.height = height

ctx?.drawImage(img, 0, 0, width, height)

// Reduce the quality of the image
canvas.toBlob(
(blob) => {
if (blob) {
const reader = new FileReader()
reader.readAsDataURL(blob)

reader.onloadend = () => {
const compressedBase64 = reader.result as string
const size = blob.size

// Check if the size of the image is less than the maximum size
if (size <= maxFileSize) {
setSelectedFileBase64(compressedBase64)
setPreviewImage(compressedBase64)
} else {
// If the size of the image is greater than the maximum size, compress it again
resizeImage(compressedBase64, maxFileSize)
}
}
}
},
'image/jpeg',
0.7,
)
}
}

// Check if file is an image
function isImageFile(file: File): boolean {
const allowedImageTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif']
Expand Down Expand Up @@ -169,15 +228,14 @@ export const SelectProfilePictureDrawerContent = forwardRef<
<div className='flex items-center justify-center w-full mt-2'>
<label
htmlFor='dropzone-file'
className='flex flex-col items-center justify-center w-full py-2 border-2 border-primary border-dashed rounded-lg cursor-pointer bg-emerald-50 dark:hover:bg-emerald-800 dark:bg-primaryDark hover:bg-emerald-100 dark:border-gray-400 dark:hover:border-gray-500 '
className='flex flex-col items-center justify-center w-full border-2 border-dashed border-gray-300 rounded-lg cursor-pointer bg-gray-100 dark:hover:bg-gray-700 dark:bg-gray-800 hover:bg-gray-200 hover:border-gray-400 dark:border-gray-600 dark:hover:border-gray-500'
onDragOver={handleDragOver}
onDrop={handleDrop}
>
<div className='flex flex-col items-center justify-center pt-5 pb-6'>
<Avatar size='large' placeholderType='person' />

<p className='mt-2 text-base text-gray-900 dark:text-gray-100'>
<span className='font-normal'>{t('Settings.Select or drag image here')}</span>
<div className='flex flex-col items-center justify-center pt-6 text-gray-600 dark:text-gray-300'>
<Avatar size='large' placeholderType='person' className='mb-4' />
<p className='mb-4 text-base font-medium'>
{t('Settings.Select or drag image here')}
</p>
</div>
<input
Expand All @@ -192,14 +250,14 @@ export const SelectProfilePictureDrawerContent = forwardRef<
) : (
<>
<div className='py-3'>
<div className='rounded-md border border-emerald-500'>
<div className='rounded-md border-2 border-gray-400 bg-gray-200 dark:bg-gray-700 dark:border-gray-500'>
<div className='flex items-center justify-between py-4 pl-3 pr-4'>
<div className='flex w-0 flex-1 items-center pl-2'>
<div className='h-9 w-9 bg-emerald-50 dark:bg-emerald-200 flex items-center rounded-lg justify-center'>
<div className='h-9 w-9 bg-gray-100 dark:bg-gray-800 flex items-center rounded justify-center'>
<Avatar
size='extra_small'
placeholderType='person'
className='bg-primary'
className='text-gray-600 dark:text-gray-300'
/>
</div>
<div className='text-base flex flex-col pl-3'>
Expand All @@ -213,7 +271,7 @@ export const SelectProfilePictureDrawerContent = forwardRef<
<Button variant='ghost' onClick={() => deleteUploadedAnnouncement()}>
<FontAwesomeIcon
icon={faXmark}
className='h-4 w-4 text-gray-500 dark:text-gray-500'
className='h-4 w-4 text-gray-400 dark:text-gray-400'
aria-hidden='true'
/>
</Button>
Expand Down Expand Up @@ -245,7 +303,7 @@ export const SelectProfilePictureDrawerContent = forwardRef<
</div>
</div>
<div className={`${previewImage ? '' : 'pt-8'} flex items-center justify-end`}>
<Button variant='white' type='submit' onClick={closeSideDrawer} className='mb-4'>
<Button variant='ghost' type='submit' onClick={closeSideDrawer} className='mb-4'>
{t('Common.Cancel')}
</Button>
<Button
Expand Down
Loading

0 comments on commit f26e181

Please sign in to comment.