@plone-collective/volto-image-editor 1.0.0-alpha.1

package/src/components/ImageEditor/components/Navigation.tsx

@@ -0,0 +1,153 @@
+import React, { FC } from 'react';
+import cn from 'classnames';
+import { defineMessages, useIntl } from 'react-intl';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import CancelSVG from '@plone/volto/icons/clear.svg';
+import SaveSVG from '@plone/volto/icons/save.svg';
+import { CropIcon } from '@plone-collective/volto-image-editor/icons/CropIcon';
+import { HueIcon } from '@plone-collective/volto-image-editor/icons/HueIcon';
+import { SaturationIcon } from '@plone-collective/volto-image-editor/icons/SaturationIcon';
+import { ContrastIcon } from '@plone-collective/volto-image-editor/icons/ContrastIcon';
+import { BrightnessIcon } from '@plone-collective/volto-image-editor/icons/BrightnessIcon';
+import { RotateLeftIcon } from '@plone-collective/volto-image-editor/icons/RotateLeftIcon';
+import { RotateRightIcon } from '@plone-collective/volto-image-editor/icons/RotateRightIcon';
+import { FlipHorizontalIcon } from '@plone-collective/volto-image-editor/icons/FlipHorizontalIcon';
+import { FlipVerticalIcon } from '@plone-collective/volto-image-editor/icons/FlipVerticalIcon';
+import { ResetRotationIcon } from '@plone-collective/volto-image-editor/icons/ResetRotationIcon';
+import { Button } from './Button';
+import './Navigation.scss';
+
+const messages = defineMessages({
+  resetRotationAndFlip: {
+    id: 'Reset rotation and flip',
+    defaultMessage: 'Reset rotation and flip',
+  },
+});
+
+interface Props {
+  className?: string;
+  mode?: string;
+  onChange?: (mode: string) => void;
+  onSave?: () => void;
+  onCancel?: () => void;
+  onAction?: (action: string) => void;
+  onResetRotation?: () => void;
+  hasRotationChanges?: boolean;
+  onUpload?: (blob: string) => void;
+}
+
+const CancelIcon = () => {
+  return <Icon name={CancelSVG} />;
+};
+
+const SaveIcon = () => {
+  return <Icon name={SaveSVG} />;
+};
+
+export const Navigation: FC<Props> = ({
+  className,
+  onChange,
+  onSave,
+  onCancel,
+  onAction,
+  onResetRotation,
+  hasRotationChanges,
+  mode,
+}) => {
+  const intl = useIntl();
+
+  const setMode = (mode: string) => () => {
+    onChange?.(mode);
+  };
+
+  const handleAction = (action: string) => () => {
+    onAction?.(action);
+  };
+
+  return (
+    <div className={cn('image-editor-navigation', className)}>
+      <div className="image-editor-navigation__buttons">
+        <Button
+          className={'image-editor-navigation__button'}
+          active={mode === 'crop'}
+          onClick={setMode('crop')}
+        >
+          <CropIcon />
+        </Button>
+        <Button
+          className={'image-editor-navigation__button'}
+          onClick={handleAction('rotate-left')}
+        >
+          <RotateLeftIcon />
+        </Button>
+        <Button
+          className={'image-editor-navigation__button'}
+          onClick={handleAction('rotate-right')}
+        >
+          <RotateRightIcon />
+        </Button>
+        <Button
+          className={'image-editor-navigation__button'}
+          onClick={handleAction('flip-horizontal')}
+        >
+          <FlipHorizontalIcon />
+        </Button>
+        <Button
+          className={'image-editor-navigation__button'}
+          onClick={handleAction('flip-vertical')}
+        >
+          <FlipVerticalIcon />
+        </Button>
+        <Button
+          className={cn(
+            'image-editor-navigation__button',
+            'image-editor-navigation__reset-rotation',
+            !hasRotationChanges && 'image-editor-navigation__button--disabled',
+          )}
+          onClick={onResetRotation}
+          disabled={!hasRotationChanges}
+          title={intl.formatMessage(messages.resetRotationAndFlip)}
+        >
+          <ResetRotationIcon />
+        </Button>
+        <Button
+          className={'image-editor-navigation__button'}
+          active={mode === 'saturation'}
+          onClick={setMode('saturation')}
+        >
+          <SaturationIcon />
+        </Button>
+        <Button
+          className={'image-editor-navigation__button'}
+          active={mode === 'brightness'}
+          onClick={setMode('brightness')}
+        >
+          <BrightnessIcon />
+        </Button>
+        <Button
+          className={'image-editor-navigation__button'}
+          active={mode === 'contrast'}
+          onClick={setMode('contrast')}
+        >
+          <ContrastIcon />
+        </Button>
+        <Button
+          className={'image-editor-navigation__button'}
+          active={mode === 'hue'}
+          onClick={setMode('hue')}
+        >
+          <HueIcon />
+        </Button>
+      </div>
+      <Button
+        className={'image-editor-navigation__button cancel'}
+        onClick={onCancel}
+      >
+        <CancelIcon />
+      </Button>
+      <Button className={'image-editor-navigation__button'} onClick={onSave}>
+        <SaveIcon />
+      </Button>
+    </div>
+  );
+};

package/src/components/ImageEditor/components/SettingsModal.scss

@@ -0,0 +1,369 @@
+.image-editor-settings-modal {
+  &__toggle {
+    position: absolute;
+    z-index: 100;
+    top: 20px;
+    left: 80px;
+    padding: 8px 12px;
+    border: 1px solid rgba(white, 0.2);
+    border-radius: 4px;
+    background: rgba(white, 0.1);
+    color: white;
+    cursor: pointer;
+    font-size: 16px;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background: rgba(white, 0.2);
+    }
+
+    &.active {
+      background: rgba(white, 0.3);
+    }
+  }
+
+  &__overlay {
+    position: absolute;
+    z-index: 9999;
+    top: 0;
+    left: 0;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    animation: fadeIn 0.2s ease-out;
+    background: rgba(0, 0, 0, 0.8);
+  }
+
+  &__content {
+    display: flex;
+    overflow: hidden;
+    width: 100%;
+    max-height: 100%;
+    flex-direction: column;
+    animation: scaleIn 0.2s ease-out;
+    background: #2b2a3050;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 24px;
+    border-bottom: 1px solid rgba(white, 0.1);
+    background: #1f1e24;
+  }
+
+  &__title {
+    margin: 0;
+    color: white;
+    font-size: 20px;
+    font-weight: 600;
+  }
+
+  &__close {
+    padding: 4px 8px;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: rgba(white, 0.7);
+    cursor: pointer;
+    font-size: 24px;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background: rgba(white, 0.1);
+      color: white;
+    }
+  }
+
+  &__body {
+    flex: 1;
+    padding: 24px;
+    overflow-y: auto;
+  }
+
+  &__footer {
+    padding: 16px 24px;
+    border-top: 1px solid rgba(white, 0.1);
+    background: #1f1e24;
+  }
+
+  &__apply {
+    width: 100%;
+    padding: 12px 20px;
+    border: none;
+    border-radius: 6px;
+    background: #4caf50;
+    color: white;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: 500;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background: #45a049;
+    }
+  }
+
+  &__section {
+    margin-bottom: 20px;
+  }
+
+  &__label {
+    display: block;
+    margin-bottom: 8px;
+    color: rgba(white, 0.9);
+    font-size: 14px;
+    font-weight: 500;
+
+    input[type='checkbox'] {
+      margin-right: 8px;
+    }
+  }
+
+  &__select {
+    width: 100%;
+    padding: 10px 14px;
+    border: 1px solid rgba(white, 0.2);
+    border-radius: 6px;
+    background: #1f1e24;
+    color: white;
+    cursor: pointer;
+    font-size: 14px;
+
+    option {
+      background: #2b2a30;
+      color: white;
+    }
+
+    &:focus {
+      border-color: #4caf50;
+      outline: none;
+    }
+  }
+
+  &__input {
+    width: 100%;
+    padding: 10px 14px;
+    border: 1px solid rgba(white, 0.2);
+    border-radius: 6px;
+    -moz-appearance: textfield;
+    appearance: textfield;
+    background: transparent;
+    color: white;
+    font-size: 14px;
+    &::-webkit-inner-spin-button {
+      margin: 0;
+      -webkit-appearance: none;
+    }
+
+    &::placeholder {
+      color: rgba(white, 0.5);
+    }
+
+    &:focus {
+      border-color: #4caf50;
+      outline: none;
+    }
+  }
+
+  &__checkbox {
+    accent-color: #4caf50;
+    transform: scale(1.2);
+  }
+
+  &__range {
+    width: 100%;
+    height: 6px;
+    border-radius: 3px;
+    background: rgba(white, 0.2);
+    cursor: pointer;
+    outline: none;
+
+    &::-webkit-slider-thumb {
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      appearance: none;
+      background: #4caf50;
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+      cursor: pointer;
+      transition: all 0.2s ease;
+
+      &:hover {
+        transform: scale(1.1);
+      }
+    }
+
+    &::-moz-range-thumb {
+      width: 20px;
+      height: 20px;
+      border: none;
+      border-radius: 50%;
+      background: #4caf50;
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+      cursor: pointer;
+    }
+  }
+
+  &__row {
+    display: grid;
+    gap: 12px;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  &__divider {
+    height: 1px;
+    margin: 24px 0;
+    background: rgba(white, 0.1);
+  }
+
+  &__subtitle {
+    margin: 0 0 16px 0;
+    color: rgba(white, 0.9);
+    font-size: 16px;
+    font-weight: 600;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes scaleIn {
+    from {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @media (max-width: 768px) {
+    &__body {
+      padding: 20px;
+    }
+
+    &__header,
+    &__footer {
+      padding: 16px 20px;
+    }
+
+    &__row {
+      gap: 8px;
+      grid-template-columns: 1fr;
+    }
+
+    &__icon-scroll {
+      gap: 12px;
+    }
+
+    &__icon-option {
+      min-width: 70px;
+      padding: 10px 6px 6px;
+
+      svg {
+        width: 28px;
+        height: 28px;
+        margin-bottom: 6px;
+      }
+
+      span {
+        font-size: 11px;
+      }
+    }
+  }
+
+  &__icon-scroll {
+    display: flex;
+    padding: 8px 0;
+    margin-top: 12px;
+    gap: 16px;
+    overflow-x: auto;
+    scrollbar-color: rgba(white, 0.3) rgba(white, 0.1);
+    scrollbar-width: thin;
+
+    &::-webkit-scrollbar {
+      height: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+      border-radius: 3px;
+      background: rgba(white, 0.1);
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 3px;
+      background: rgba(white, 0.3);
+    }
+  }
+
+  &__icon-option {
+    display: flex;
+    min-width: 80px;
+    flex-direction: column;
+    align-items: center;
+    padding: 12px 8px 8px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    svg {
+      width: 32px;
+      height: 32px;
+      margin-bottom: 8px;
+      color: rgba(white, 0.6);
+      transition: all 0.2s ease;
+    }
+
+    span {
+      color: rgba(white, 0.7);
+      font-size: 12px;
+      font-weight: 500;
+      text-align: center;
+      white-space: nowrap;
+    }
+
+    &:hover {
+      background: rgba(white, 0.05);
+
+      svg {
+        color: rgba(white, 0.9);
+        transform: scale(1.1);
+      }
+
+      span {
+        color: rgba(white, 0.9);
+      }
+    }
+
+    &.active {
+      svg {
+        color: #4caf50;
+      }
+
+      span {
+        color: #4caf50;
+      }
+
+      &:hover {
+        svg {
+          color: #66bb6a;
+        }
+
+        span {
+          color: #66bb6a;
+        }
+      }
+    }
+  }
+}