Skip to content

Commit

Permalink
chore: 优化外观颜色选择器交互
Browse files Browse the repository at this point in the history
  • Loading branch information
@qkiroc @CheshireJCat
qkiroc authored and CheshireJCat committed Oct 23, 2024
1 parent 7d84805 commit 7767ab7
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 118 deletions.
146 changes: 51 additions & 95 deletions packages/amis-theme-editor-helper/src/renderers/ColorPicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -443,6 +443,7 @@ function GradientColor(props: ThemeColorProps) {
currentIndex = i;
window.addEventListener('mousemove', handleMoveSliderItem);
window.addEventListener('mouseup', handleUpSliderItem);
document.body.classList.add('gradientColor-move');
}

// 移动渐变点
Expand All @@ -456,7 +457,6 @@ function GradientColor(props: ThemeColorProps) {
tempColors.splice(currentIndex, 1);
setIndex(0);
setColors(tempColors);
gradientChange(range, tempColors);
}
// 限制不能超过最大、最小值
else if (itemPosition >= 0 && itemPosition <= 100) {
Expand All @@ -482,17 +482,22 @@ function GradientColor(props: ThemeColorProps) {
setIndex(currentIndex + 1);
}
setColors(tempColors);
gradientChange(range, tempColors);
}
}

// 放开渐变点
function handleUpSliderItem() {
window.removeEventListener('mousemove', handleMoveSliderItem);
window.removeEventListener('mouseup', handleUpSliderItem);
document.body.classList.remove('gradientColor-move');
setTimeout(() => {
setMove(false);
}, 0);

setColors(colors => {
gradientChange(range, colors);
return colors;
});
}

// 通过角度计算位置
Expand All @@ -508,6 +513,7 @@ function GradientColor(props: ThemeColorProps) {

// 按下渐变角度句柄
function handleDownRange() {
document.body.classList.add('gradientColor-move');
window.addEventListener('mousemove', handleMoveRange);
window.addEventListener('mouseup', handleUpRange);
}
Expand All @@ -533,13 +539,22 @@ function GradientColor(props: ThemeColorProps) {
angle = 360 - angle;
}
setRange(angle);
gradientChange(angle, colors);
}

// 抬起渐变角度句柄
function handleUpRange() {
document.body.classList.remove('gradientColor-move');
window.removeEventListener('mousemove', handleMoveRange);
window.removeEventListener('mouseup', handleUpRange);
setRange(range => {
gradientChange(range, colors);
return range;
});
}

function handelSetRange() {
setRangeShow(false);
window.removeEventListener('click', handelSetRange);
}

return (
Expand Down Expand Up @@ -577,23 +592,17 @@ function GradientColor(props: ThemeColorProps) {
);
})}
</div>
<div
className="Theme-GradientColor-range"
ref={rangeRef}
onClick={e => {
setRangeShow(true);
e.stopPropagation();
window.addEventListener('click', () => {
setRangeShow(false);
});
}}
>
<div className="Theme-GradientColor-range" ref={rangeRef}>
<NumberInput
formatter={(value: string | number) => value + '°'}
max={360}
min={0}
value={range}
onChange={rangeChange}
onFocus={() => {
setRangeShow(true);
window.addEventListener('click', handelSetRange);
}}
/>
<Overlay
// @ts-ignore
Expand Down Expand Up @@ -1123,97 +1132,51 @@ function ColorSelect(props: ColorSelectProps) {
needCustom
} = props;
const [tab, setTab] = useState('color');
const [subTab, setSubTab] = useState(0);
const presetColorRef = useRef<any>();

const tabMap: any = {
color: {name: 'color'}
color: {name: 'color', label: '主题颜色'}
};
if (needCustom) {
tabMap['custom'] = {name: 'custom', label: '自定义颜色'};
}
if (needGradient) {
tabMap['gradient'] = {name: 'gradient'};
tabMap['gradient'] = {name: 'gradient', label: '渐变'};
}
if (needImage) {
tabMap['img'] = {
name: 'img',
icon: <ThemeIcon icon="color-picker-img" />,
activeIcon: <ThemeIcon icon="color-picker-img-active" />
};
tabMap['img'] = {name: 'img', label: '图片'};
}

const subTabList: any[] = [
needTheme &&
themeList &&
themeList.length > 0 && {name: '主题颜色', parent: 'color', id: 0},
needCustom && {name: '自定义颜色', parent: 'color', id: 1}
].filter(n => n);

function setSubTabCheck() {
if (
needTheme &&
value.indexOf('#') !== 0 &&
value.indexOf('rgba') !== 0 &&
subTabList.find(item => item.id === 0)
) {
setSubTab(0);
} else if (needCustom && subTabList.find(item => item.id === 1)) {
setSubTab(1);
}
}

useEffect(() => {
if (
needTheme &&
(value?.indexOf('var') === 0 || value === 'transparent' || !value) &&
subTabList.find(item => item.id === 0)
(value?.indexOf('var') === 0 || value === 'transparent' || !value)
) {
setTab('color');
setSubTab(0);
} else if (
needCustom &&
(value?.startsWith('rgb') || value?.startsWith('#'))
) {
setTab('custom');
} else if (needGradient && value?.indexOf('linear-gradient') === 0) {
setTab('gradient');
} else if (needImage && value?.indexOf('url') === 0) {
setTab('img');
} else if (needCustom && subTabList.find(item => item.id === 1)) {
setTab('color');
setSubTab(1);
}
}, [show]);

useEffect(() => {
if (needTheme) {
setSubTab(0);
} else if (needCustom) {
setSubTab(1);
}
}, [needCustom, needTheme]);

function colorOnChange(value: string) {
onChange(value);
presetColorRef.current?.setPresetColor(value);
}

function renderSubTab() {
const list = subTabList.filter(item => item.parent === tab);
if (list.length > 0) {
return (
<div className="Theme-ColorSelect-tab-sub">
{list.map((item: any) => (
<div
key={item.id}
className={cx(
'Theme-ColorSelect-tab-sub-item',
subTab === item.id && 'Theme-ColorSelect-tab-sub--active'
)}
onClick={() => setSubTab(item.id)}
>
{item.name}
</div>
))}
</div>
);
} else {
return null;
}
}

return (
<Overlay
// @ts-ignore
Expand All @@ -1231,39 +1194,32 @@ function ColorSelect(props: ColorSelectProps) {
key={key}
className={cx(
'Theme-ColorSelect-tab-' + key,
tab === key && `Theme-ColorSelect-tab-${key}--active`
tab === key && 'Theme-ColorSelect-tab--active'
)}
onClick={() => {
setTab(key);
setSubTabCheck();
}}
>
{tab === key ? tabMap[key].activeIcon : tabMap[key].icon}
{tabMap[key].label}
</div>
))}
</div>
) : null}

{renderSubTab()}
<div className="Theme-ColorSelect-content">
{tab === 'color' ? (
<div className="Theme-ColorSelect-content-color">
{subTab === 0 ? (
<ThemeColorList
{...props}
themeList={themeList}
onChange={colorOnChange}
value={value}
/>
) : null}
{subTab === 1 ? (
<CustomColor
onChange={colorOnChange}
value={value}
themeList={themeList}
/>
) : null}
</div>
<ThemeColorList
{...props}
themeList={themeList}
onChange={colorOnChange}
value={value}
/>
) : null}
{tab === 'custom' ? (
<CustomColor
onChange={colorOnChange}
value={value}
themeList={themeList}
/>
) : null}
{tab === 'gradient' ? (
<GradientColor
Expand Down
43 changes: 20 additions & 23 deletions packages/amis-theme-editor-helper/src/style/_color-picker.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,35 +88,16 @@ $ns: cxd-;
&-tab {
display: flex;
padding: px2rem(14px) px2rem(12px);
border: 1px solid #e8e9eb;
border-bottom: 1px solid #e8e9eb;
& > div {
height: px2rem(16px);
width: px2rem(16px);
border-radius: 50%;
margin-right: px2rem(12px);
font-size: 12px;
cursor: pointer;
& > svg {
height: px2rem(16px);
width: px2rem(16px);
}
}
&-color {
background-color: #e8e9eb;
}
&-color--active {
background: #d4e5ff;
border: 1px solid #2468f2;
}
&-gradient {
background-image: linear-gradient(180deg, #f4f4f4 0%, #b8babf 100%);
}
&-gradient--active {
background-image: linear-gradient(180deg, #ffffff 0%, #6296ff 99%);
border: 1px solid #2468f2;
}
&-img--active > svg {
border: 1px solid #2468f2;
border-radius: 50%;
&--active {
color: #2468f2;
}
}
&-tab {
Expand Down Expand Up @@ -598,3 +579,19 @@ $ns: cxd-;
z-index: 1500;
}
}

.gradientColor-move {
&::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10000000;
cursor: pointer;
}
* {
user-select: none;
}
}

0 comments on commit 7767ab7

Please sign in to comment.