Switch to workspace

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
2024-08-28 12:46:03 +02:00
parent 694abcb489
commit 4d5690d0c1
1318 changed files with 12005 additions and 11618 deletions
--- a/packages/pl-fe/src/features/edit-profile/components/avatar-picker.tsx
+++ b/packages/pl-fe/src/features/edit-profile/components/avatar-picker.tsx
@@ -0,0 +1,102 @@
+import clsx from 'clsx';
+import React, { useRef } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+import { openModal } from 'soapbox/actions/modals';
+import AltIndicator from 'soapbox/components/alt-indicator';
+import { Avatar, Icon, HStack } from 'soapbox/components/ui';
+import { useAppDispatch, useDraggedFiles } from 'soapbox/hooks';
+
+const messages = defineMessages({
+  changeDescriptionHeading: { id: 'group.upload_avatar.alt.heading', defaultMessage: 'Change avatar description' },
+  changeDescriptionPlaceholder: { id: 'group.upload_avatar.alt.placeholder', defaultMessage: 'Image description' },
+  changeDescriptionConfirm: { id: 'group.upload_avatar.alt.confirm', defaultMessage: 'Save' },
+});
+
+interface IMediaInput {
+  className?: string;
+  src: string | undefined;
+  accept?: string;
+  onChange: (files: FileList | null) => void;
+  disabled?: boolean;
+  description?: string;
+  onChangeDescription?: (value: string) => void;
+}
+
+const AvatarPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({
+  className, src, onChange, accept, disabled, description, onChangeDescription,
+}, ref) => {
+  const dispatch = useAppDispatch();
+  const intl = useIntl();
+
+  const picker = useRef<HTMLLabelElement>(null);
+
+  const { isDragging, isDraggedOver } = useDraggedFiles(picker, (files) => {
+    onChange(files);
+  });
+
+  const handleChangeDescriptionClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.stopPropagation();
+
+    dispatch(openModal('TEXT_FIELD', {
+      heading: intl.formatMessage(messages.changeDescriptionHeading),
+      placeholder: intl.formatMessage(messages.changeDescriptionPlaceholder),
+      confirm: intl.formatMessage(messages.changeDescriptionConfirm),
+      onConfirm: (description?: string) => {
+        onChangeDescription?.(description || '');
+      },
+      text: description,
+    }));
+  };
+
+  return (
+    <label
+      ref={picker}
+      className={clsx(
+        'absolute bottom-0 left-1/2 h-20 w-20 -translate-x-1/2 translate-y-1/2 cursor-pointer bg-primary-300 ring-2',
+        {
+          'rounded-lg': onChangeDescription,
+          'rounded-full': !onChangeDescription,
+          'border-2 border-primary-600 border-dashed !z-[99] overflow-hidden': isDragging,
+          'ring-white dark:ring-primary-900': !isDraggedOver,
+          'ring-offset-2 ring-primary-600': isDraggedOver,
+        },
+        className,
+      )}
+      style={{ height: 80, width: 80 }}
+    >
+      {src && <Avatar className={clsx(onChangeDescription && '!rounded-lg')} src={src} size={80} />}
+      <HStack
+        alignItems='center'
+        justifyContent='center'
+        className={clsx('absolute left-0 top-0 h-full w-full transition-opacity', {
+          'rounded-lg': onChangeDescription,
+          'rounded-full': !onChangeDescription,
+          'opacity-0 hover:opacity-90 bg-primary-500': src,
+        })}
+      >
+        <Icon
+          src={require('@tabler/icons/outline/camera-plus.svg')}
+          className='h-5 w-5 text-white'
+        />
+      </HStack>
+      <span className='sr-only'><FormattedMessage id='group.upload_avatar' defaultMessage='Upload avatar' /></span>
+      <input
+        ref={ref}
+        name='avatar'
+        type='file'
+        accept={accept}
+        onChange={({ target }) => onChange(target.files)}
+        disabled={disabled}
+        className='hidden'
+      />
+      {onChangeDescription && src && (
+        <button type='button' className='absolute left-1 top-1' onClick={handleChangeDescriptionClick}>
+          <AltIndicator warning={!description} />
+        </button>
+      )}
+    </label>
+  );
+});
+
+export { AvatarPicker as default };
--- a/packages/pl-fe/src/features/edit-profile/components/header-picker.tsx
+++ b/packages/pl-fe/src/features/edit-profile/components/header-picker.tsx
@@ -0,0 +1,118 @@
+import clsx from 'clsx';
+import React, { useRef } from 'react';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+
+import { openModal } from 'soapbox/actions/modals';
+import AltIndicator from 'soapbox/components/alt-indicator';
+import { HStack, Icon, IconButton, Text } from 'soapbox/components/ui';
+import { useAppDispatch, useDraggedFiles } from 'soapbox/hooks';
+
+const messages = defineMessages({
+  title: { id: 'group.upload_banner.title', defaultMessage: 'Upload background picture' },
+  changeHeaderDescriptionHeading: { id: 'group.upload_banner.alt.heading', defaultMessage: 'Change header description' },
+  changeHeaderDescriptionPlaceholder: { id: 'group.upload_banner.alt.placeholder', defaultMessage: 'Image description' },
+  changeHeaderDescriptionConfirm: { id: 'group.upload_banner.alt.confirm', defaultMessage: 'Save' },
+});
+
+interface IMediaInput {
+  src: string | undefined;
+  accept?: string;
+  onChange: (files: FileList | null) => void;
+  onClear?: () => void;
+  disabled?: boolean;
+  description?: string;
+  onChangeDescription?: (value: string) => void;
+}
+
+const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({
+  src, onChange, onClear, accept, disabled, description, onChangeDescription,
+}, ref) => {
+  const dispatch = useAppDispatch();
+  const intl = useIntl();
+
+  const picker = useRef<HTMLLabelElement>(null);
+
+  const { isDragging, isDraggedOver } = useDraggedFiles(picker, (files) => {
+    onChange(files);
+  });
+
+  const handleClear: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.stopPropagation();
+
+    onClear!();
+  };
+
+  const handleChangeDescriptionClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.stopPropagation();
+
+    dispatch(openModal('TEXT_FIELD', {
+      heading: intl.formatMessage(messages.changeHeaderDescriptionHeading),
+      placeholder: intl.formatMessage(messages.changeHeaderDescriptionPlaceholder),
+      confirm: intl.formatMessage(messages.changeHeaderDescriptionConfirm),
+      onConfirm: (description?: string) => {
+        onChangeDescription?.(description || '');
+      },
+      text: description,
+    }));
+  };
+
+  return (
+    <label
+      ref={picker}
+      className={clsx(
+        'dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 sm:h-36 sm:shadow dark:bg-gray-800 dark:text-accent-blue',
+        {
+          'border-2 border-primary-600 border-dashed !z-[99]': isDragging,
+          'ring-2 ring-offset-2 ring-primary-600': isDraggedOver,
+        },
+      )}
+      title={intl.formatMessage(messages.title)}
+      tabIndex={0}
+    >
+      {src && <img className='h-full w-full object-cover' src={src} alt='' />}
+      <HStack
+        className={clsx('absolute top-0 h-full w-full transition-opacity', {
+          'opacity-0 hover:opacity-90 bg-primary-100 dark:bg-gray-800': src,
+        })}
+        space={1.5}
+        alignItems='center'
+        justifyContent='center'
+      >
+        <Icon
+          src={require('@tabler/icons/outline/photo-plus.svg')}
+          className='h-4.5 w-4.5'
+        />
+
+        <Text size='md' theme='primary' weight='semibold'>
+          <FormattedMessage id='group.upload_banner' defaultMessage='Upload photo' />
+        </Text>
+
+        <input
+          ref={ref}
+          name='header'
+          type='file'
+          accept={accept}
+          onChange={({ target }) => onChange(target.files)}
+          disabled={disabled}
+          className='hidden'
+        />
+      </HStack>
+      {onClear && src && (
+        <IconButton
+          onClick={handleClear}
+          src={require('@tabler/icons/outline/x.svg')}
+          theme='dark'
+          className='absolute right-2 top-2 z-10 hover:scale-105 hover:bg-gray-900'
+          iconClassName='h-5 w-5'
+        />
+      )}
+      {onChangeDescription && src && (
+        <button type='button' className='absolute left-2 top-2' onClick={handleChangeDescriptionClick}>
+          <AltIndicator warning={!description} />
+        </button>
+      )}
+    </label>
+  );
+});
+
+export { HeaderPicker as default };