feat(ui): add repeat icon and improve block actions menu transform option
- add RepeatIcon component to shared icons index - import and display RepeatIcon in the transform menu item of BlockActionsMenu - remove maxHeight constraint and overflow-y-auto from actions menu panel
This commit is contained in:
@@ -1,7 +1,7 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import React, { useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, forwardRef } from 'react';
|
import React, { useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, forwardRef } from 'react';
|
||||||
import { Add01Icon, ArrowRight01Icon, Copy01Icon, Delete02Icon, DragDropVerticalIcon } from '@zen/core/shared/icons';
|
import { Add01Icon, ArrowRight01Icon, Copy01Icon, Delete02Icon, DragDropVerticalIcon, RepeatIcon } from '@zen/core/shared/icons';
|
||||||
|
|
||||||
// Style « boîte » pour l'icône d'un type de bloc, repris du SlashMenu.
|
// Style « boîte » pour l'icône d'un type de bloc, repris du SlashMenu.
|
||||||
const TYPE_ICON_BOX_CLASS = 'w-8 h-8 flex items-center justify-center rounded-md border border-neutral-200 dark:border-neutral-700 text-xs font-medium text-neutral-700 dark:text-neutral-300 flex-shrink-0';
|
const TYPE_ICON_BOX_CLASS = 'w-8 h-8 flex items-center justify-center rounded-md border border-neutral-200 dark:border-neutral-700 text-xs font-medium text-neutral-700 dark:text-neutral-300 flex-shrink-0';
|
||||||
@@ -156,7 +156,7 @@ function BlockActionsMenu({
|
|||||||
}) {
|
}) {
|
||||||
const containerRef = useRef(null);
|
const containerRef = useRef(null);
|
||||||
const triggerRef = useRef(null);
|
const triggerRef = useRef(null);
|
||||||
const { side, maxHeight } = useDropdownPlacement(open, triggerRef);
|
const { side } = useDropdownPlacement(open, triggerRef);
|
||||||
const [submenuOpen, setSubmenuOpen] = useState(false);
|
const [submenuOpen, setSubmenuOpen] = useState(false);
|
||||||
const submenuTimerRef = useRef(null);
|
const submenuTimerRef = useRef(null);
|
||||||
|
|
||||||
@@ -232,9 +232,8 @@ function BlockActionsMenu({
|
|||||||
{open && (
|
{open && (
|
||||||
<div
|
<div
|
||||||
className={`absolute left-0 ${panelPositionClass} w-56 rounded-xl border border-black/8 dark:border-white/8 bg-white dark:bg-[#0B0B0B] shadow-lg z-50 flex flex-col`}
|
className={`absolute left-0 ${panelPositionClass} w-56 rounded-xl border border-black/8 dark:border-white/8 bg-white dark:bg-[#0B0B0B] shadow-lg z-50 flex flex-col`}
|
||||||
style={{ maxHeight }}
|
|
||||||
>
|
>
|
||||||
<div className="p-1.5 flex flex-col gap-0.5 overflow-y-auto">
|
<div className="p-1.5 flex flex-col gap-0.5">
|
||||||
{transformOptions.length > 0 && (
|
{transformOptions.length > 0 && (
|
||||||
<div
|
<div
|
||||||
className="relative"
|
className="relative"
|
||||||
@@ -245,6 +244,7 @@ function BlockActionsMenu({
|
|||||||
role="button"
|
role="button"
|
||||||
className={`cursor-pointer w-full flex items-center gap-2 px-[7px] py-[10px] rounded-lg text-[13px] leading-none text-neutral-500 dark:text-neutral-400 transition-colors duration-[120ms] ease-out ${submenuOpen ? 'bg-neutral-100 dark:bg-white/5 text-neutral-900 dark:text-white' : ''}`}
|
className={`cursor-pointer w-full flex items-center gap-2 px-[7px] py-[10px] rounded-lg text-[13px] leading-none text-neutral-500 dark:text-neutral-400 transition-colors duration-[120ms] ease-out ${submenuOpen ? 'bg-neutral-100 dark:bg-white/5 text-neutral-900 dark:text-white' : ''}`}
|
||||||
>
|
>
|
||||||
|
<RepeatIcon className="w-4 h-4 shrink-0" />
|
||||||
<span className="flex-1">Transformer</span>
|
<span className="flex-1">Transformer</span>
|
||||||
<ArrowRight01Icon className="w-3.5 h-3.5 shrink-0" />
|
<ArrowRight01Icon className="w-3.5 h-3.5 shrink-0" />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -700,3 +700,10 @@ export const TextClearIcon = (props) => (
|
|||||||
<path fillRule="evenodd" clipRule="evenodd" d="M13.2929 14.2929C13.6834 13.9024 14.3166 13.9024 14.7071 14.2929L16.5 16.0858L18.2929 14.2929C18.6834 13.9024 19.3166 13.9024 19.7071 14.2929C20.0976 14.6834 20.0976 15.3166 19.7071 15.7071L17.9142 17.5L19.7071 19.2929C20.0976 19.6834 20.0976 20.3166 19.7071 20.7071C19.3166 21.0976 18.6834 21.0976 18.2929 20.7071L16.5 18.9142L14.7071 20.7071C14.3166 21.0976 13.6834 21.0976 13.2929 20.7071C12.9024 20.3166 12.9024 19.6834 13.2929 19.2929L15.0858 17.5L13.2929 15.7071C12.9024 15.3166 12.9024 14.6834 13.2929 14.2929Z" fill="currentColor"></path>
|
<path fillRule="evenodd" clipRule="evenodd" d="M13.2929 14.2929C13.6834 13.9024 14.3166 13.9024 14.7071 14.2929L16.5 16.0858L18.2929 14.2929C18.6834 13.9024 19.3166 13.9024 19.7071 14.2929C20.0976 14.6834 20.0976 15.3166 19.7071 15.7071L17.9142 17.5L19.7071 19.2929C20.0976 19.6834 20.0976 20.3166 19.7071 20.7071C19.3166 21.0976 18.6834 21.0976 18.2929 20.7071L16.5 18.9142L14.7071 20.7071C14.3166 21.0976 13.6834 21.0976 13.2929 20.7071C12.9024 20.3166 12.9024 19.6834 13.2929 19.2929L15.0858 17.5L13.2929 15.7071C12.9024 15.3166 12.9024 14.6834 13.2929 14.2929Z" fill="currentColor"></path>
|
||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
export const RepeatIcon = (props) => (
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={24} height={24} color={"currentColor"} fill={"none"} {...props}>
|
||||||
|
<path d="M20.1261 7.18734C20.575 6.86556 21.1997 6.96858 21.5215 7.41744C22.4509 8.71393 22.9982 10.2951 22.9982 12.0001C22.9982 16.444 19.3036 20.0001 14.804 20.0001H8.60981V21C8.60985 21.2514 8.51568 21.503 8.32652 21.6974C7.94138 22.0933 7.30827 22.1019 6.91244 21.7168L5.90963 20.7411C5.71865 20.5554 5.46841 20.3122 5.32169 20.1224C5.19282 19.9557 4.82098 19.4343 5.09372 18.7936C5.36042 18.1671 5.97838 18.0609 6.18409 18.0326C6.42227 17.9998 6.72129 17.9999 6.99253 18.0001H6.99256L7.04303 18.0001H14.804C18.251 18.0001 20.9982 15.2882 20.9982 12.0001C20.9982 10.7305 20.5922 9.55389 19.896 8.58271C19.5742 8.13385 19.6773 7.50912 20.1261 7.18734Z" fill="currentColor"></path>
|
||||||
|
<path d="M3.87389 16.8127C3.42502 17.1345 2.8003 17.0314 2.47852 16.5826C1.5491 15.2861 1.00175 13.7049 1.00175 12C1.00175 7.55605 4.69641 3.99995 9.19597 3.99995H15.3902V3.00003C15.3902 2.74864 15.4843 2.497 15.6735 2.30259C16.0586 1.90676 16.6917 1.89809 17.0876 2.28324L18.0904 3.25898C18.2813 3.4446 18.5316 3.68784 18.6783 3.87761C18.8072 4.04432 19.179 4.56577 18.9063 5.20645C18.6396 5.83295 18.0216 5.93917 17.8159 5.96747C17.5777 6.00024 17.2787 6.0001 17.0075 5.99997H17.0074L16.957 5.99995H9.19597C5.74902 5.99995 3.00175 8.71187 3.00175 12C3.00175 13.2695 3.40777 14.4461 4.10399 15.4173C4.42577 15.8662 4.32275 16.4909 3.87389 16.8127Z" fill="currentColor"></path>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
Reference in New Issue
Block a user