mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 23:16:21 +00:00
Merge pull request #45 from simoleo89/interface-color-pr
Add UI Color Theming System
This commit is contained in:
DuckieTM
@@ -2,9 +2,11 @@ import { GetSessionDataManager, HabboClubLevelEnum} from '@nitrots/nitro-rendere
|
||||
import { Dispatch, FC, SetStateAction, useCallback, useMemo, useState } from 'react';
|
||||
import { Base, Grid, Flex, NitroCardView, NitroCardHeaderView, NitroCardTabsView, NitroCardTabsItemView, NitroCardContentView, Text, LayoutCurrencyIcon } from '../../common';
|
||||
import { useRoom } from '../../hooks';
|
||||
import { GetClubMemberLevel, GetConfigurationValue } from '../../api';
|
||||
import { GetClubMemberLevel, GetConfigurationValue, LocalizeText } from '../../api';
|
||||
import { InterfaceColorTabView } from '../interface-settings/InterfaceColorTabView';
|
||||
import { InterfaceImageTabView } from '../interface-settings/InterfaceImageTabView';
|
||||
|
||||
interface ItemData {
|
||||
interface ItemData {
|
||||
id: number;
|
||||
isHcOnly: boolean;
|
||||
minRank: number;
|
||||
@@ -22,7 +24,7 @@ interface BackgroundsViewProps {
|
||||
setSelectedOverlay: Dispatch<SetStateAction<number>>;
|
||||
}
|
||||
|
||||
const TABS = ['backgrounds', 'stands', 'overlays'] as const;
|
||||
const TABS = ['backgrounds', 'stands', 'overlays', 'color', 'image'] as const;
|
||||
type TabType = typeof TABS[number];
|
||||
|
||||
export const BackgroundsView: FC<BackgroundsViewProps> = ({
|
||||
@@ -36,7 +38,7 @@ export const BackgroundsView: FC<BackgroundsViewProps> = ({
|
||||
}) => {
|
||||
const [activeTab, setActiveTab] = useState<TabType>('backgrounds');
|
||||
const { roomSession } = useRoom();
|
||||
|
||||
|
||||
const userData = useMemo(() => ({
|
||||
isHcMember: GetClubMemberLevel() >= HabboClubLevelEnum.CLUB,
|
||||
securityLevel: GetSessionDataManager().canChangeName,
|
||||
@@ -45,7 +47,7 @@ export const BackgroundsView: FC<BackgroundsViewProps> = ({
|
||||
|
||||
const processData = useCallback((configData: any[], dataType: string): ItemData[] => {
|
||||
if (!configData?.length) return [];
|
||||
|
||||
|
||||
return configData
|
||||
.filter(item => {
|
||||
const meetsRank = userData.securityLevel >= item.minRank;
|
||||
@@ -65,10 +67,10 @@ export const BackgroundsView: FC<BackgroundsViewProps> = ({
|
||||
if (!roomSession) return;
|
||||
|
||||
const setters = { backgrounds: setSelectedBackground, stands: setSelectedStand, overlays: setSelectedOverlay };
|
||||
|
||||
|
||||
const currentValues = { backgrounds: selectedBackground, stands: selectedStand, overlays: selectedOverlay };
|
||||
|
||||
setters[activeTab](id);
|
||||
setters[activeTab as 'backgrounds' | 'stands' | 'overlays'](id);
|
||||
const newValues = { ...currentValues, [activeTab]: id };
|
||||
roomSession.sendBackgroundMessage( newValues.backgrounds, newValues.stands, newValues.overlays );
|
||||
}, [activeTab, roomSession, selectedBackground, selectedStand, selectedOverlay, setSelectedBackground, setSelectedStand, setSelectedOverlay]);
|
||||
@@ -86,9 +88,11 @@ export const BackgroundsView: FC<BackgroundsViewProps> = ({
|
||||
</Flex>
|
||||
), [handleSelection]);
|
||||
|
||||
const isProfileTab = activeTab === 'backgrounds' || activeTab === 'stands' || activeTab === 'overlays';
|
||||
|
||||
return (
|
||||
<NitroCardView uniqueKey="backgrounds" className="absolute min-w-[535px] max-w-[535px] min-h-[389px] max-h-[389px]">
|
||||
<NitroCardHeaderView headerText="Profile Background" onCloseClick={() => setIsVisible(false)} />
|
||||
<NitroCardHeaderView headerText={ LocalizeText('interface.settings.title') } onCloseClick={() => setIsVisible(false)} />
|
||||
<NitroCardTabsView>
|
||||
{TABS.map(tab => (
|
||||
<NitroCardTabsItemView
|
||||
@@ -96,16 +100,22 @@ export const BackgroundsView: FC<BackgroundsViewProps> = ({
|
||||
isActive={activeTab === tab}
|
||||
onClick={() => setActiveTab(tab)}
|
||||
>
|
||||
{tab.charAt(0).toUpperCase() + tab.slice(1)}
|
||||
{ LocalizeText(`interface.settings.tab.${ tab }`) }
|
||||
</NitroCardTabsItemView>
|
||||
))}
|
||||
</NitroCardTabsView>
|
||||
<NitroCardContentView gap={1}>
|
||||
<Text bold center>Select an Option</Text>
|
||||
<Grid gap={1} columnCount={7} overflow="auto">
|
||||
{allData[activeTab].map(item => renderItem(item, activeTab.slice(0, -1)))}
|
||||
</Grid>
|
||||
{ isProfileTab && (
|
||||
<>
|
||||
<Text bold center>{ LocalizeText('interface.settings.select.option') }</Text>
|
||||
<Grid gap={1} columnCount={7} overflow="auto">
|
||||
{allData[activeTab as 'backgrounds' | 'stands' | 'overlays'].map(item => renderItem(item, activeTab.slice(0, -1)))}
|
||||
</Grid>
|
||||
</>
|
||||
) }
|
||||
{ activeTab === 'color' && <InterfaceColorTabView /> }
|
||||
{ activeTab === 'image' && <InterfaceImageTabView /> }
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
@@ -0,0 +1,288 @@
|
||||
import { RgbaColorPicker, RgbaColor } from 'react-colorful';
|
||||
import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { FaUndo, FaTrash, FaDownload, FaUpload } from 'react-icons/fa';
|
||||
import { LocalizeText, PRESET_COLORS, THEME_PRESETS, useUiSettings } from '../../api';
|
||||
import { Flex, Text } from '../../common';
|
||||
|
||||
const hexToRgba = (hex: string, a = 1): RgbaColor =>
|
||||
{
|
||||
const num = parseInt(hex.replace('#', ''), 16);
|
||||
return { r: (num >> 16) & 0xFF, g: (num >> 8) & 0xFF, b: num & 0xFF, a };
|
||||
};
|
||||
|
||||
const rgbaToHex = (rgba: RgbaColor): string =>
|
||||
{
|
||||
return '#' + ((1 << 24) + (rgba.r << 16) + (rgba.g << 8) + rgba.b).toString(16).slice(1);
|
||||
};
|
||||
|
||||
export const InterfaceColorTabView: FC<{}> = () =>
|
||||
{
|
||||
const { settings, updateSettings, resetSettings } = useUiSettings();
|
||||
const [ color, setColor ] = useState<RgbaColor>(() => hexToRgba(settings.headerColor, settings.headerAlpha / 100));
|
||||
const [ importValue, setImportValue ] = useState('');
|
||||
const [ showImport, setShowImport ] = useState(false);
|
||||
const [ copyFeedback, setCopyFeedback ] = useState(false);
|
||||
const previewTimerRef = useRef<ReturnType<typeof setTimeout>>(null);
|
||||
|
||||
const hexColor = useMemo(() => rgbaToHex(color), [ color ]);
|
||||
const alphaPercent = useMemo(() => Math.round((color.a ?? 1) * 100), [ color ]);
|
||||
|
||||
// Live preview con debounce
|
||||
useEffect(() =>
|
||||
{
|
||||
if(previewTimerRef.current) clearTimeout(previewTimerRef.current);
|
||||
|
||||
previewTimerRef.current = setTimeout(() =>
|
||||
{
|
||||
updateSettings({
|
||||
colorMode: 'color',
|
||||
headerColor: hexColor,
|
||||
headerAlpha: alphaPercent
|
||||
});
|
||||
}, 50);
|
||||
|
||||
return () =>
|
||||
{
|
||||
if(previewTimerRef.current) clearTimeout(previewTimerRef.current);
|
||||
};
|
||||
}, [ hexColor, alphaPercent ]);
|
||||
|
||||
const onHexInput = useCallback((value: string) =>
|
||||
{
|
||||
const clean = value.replace(/[^0-9a-fA-F]/g, '').slice(0, 6);
|
||||
if(clean.length === 6)
|
||||
{
|
||||
const rgba = hexToRgba('#' + clean, color.a);
|
||||
setColor(rgba);
|
||||
}
|
||||
}, [ color.a ]);
|
||||
|
||||
const onRgbInput = useCallback((channel: 'r' | 'g' | 'b', value: number) =>
|
||||
{
|
||||
const clamped = Math.max(0, Math.min(255, value || 0));
|
||||
setColor(prev => ({ ...prev, [channel]: clamped }));
|
||||
}, []);
|
||||
|
||||
const onAlphaInput = useCallback((value: number) =>
|
||||
{
|
||||
const clamped = Math.max(0, Math.min(100, value || 0));
|
||||
setColor(prev => ({ ...prev, a: clamped / 100 }));
|
||||
}, []);
|
||||
|
||||
const onPresetClick = useCallback((presetHex: string) =>
|
||||
{
|
||||
setColor(hexToRgba(presetHex, color.a));
|
||||
}, [ color.a ]);
|
||||
|
||||
const onThemeClick = useCallback((themeColor: string, themeAlpha: number) =>
|
||||
{
|
||||
setColor(hexToRgba(themeColor, themeAlpha / 100));
|
||||
}, []);
|
||||
|
||||
const onReset = useCallback(() =>
|
||||
{
|
||||
resetSettings();
|
||||
setColor(hexToRgba('#1E7295', 1));
|
||||
}, [ resetSettings ]);
|
||||
|
||||
const onDelete = useCallback(() =>
|
||||
{
|
||||
updateSettings({ colorMode: 'default' });
|
||||
setColor(hexToRgba('#1E7295', 1));
|
||||
}, [ updateSettings ]);
|
||||
|
||||
const onExport = useCallback(() =>
|
||||
{
|
||||
const data = JSON.stringify({
|
||||
color: hexColor,
|
||||
alpha: alphaPercent,
|
||||
mode: settings.colorMode,
|
||||
image: settings.headerImageUrl
|
||||
});
|
||||
|
||||
navigator.clipboard.writeText(data);
|
||||
setCopyFeedback(true);
|
||||
setTimeout(() => setCopyFeedback(false), 2000);
|
||||
}, [ hexColor, alphaPercent, settings ]);
|
||||
|
||||
const onImport = useCallback(() =>
|
||||
{
|
||||
try
|
||||
{
|
||||
const data = JSON.parse(importValue);
|
||||
|
||||
if(data.color)
|
||||
{
|
||||
const alpha = data.alpha ?? 100;
|
||||
setColor(hexToRgba(data.color, alpha / 100));
|
||||
updateSettings({
|
||||
colorMode: data.mode || 'color',
|
||||
headerColor: data.color,
|
||||
headerAlpha: alpha,
|
||||
headerImageUrl: data.image || ''
|
||||
});
|
||||
}
|
||||
|
||||
setImportValue('');
|
||||
setShowImport(false);
|
||||
}
|
||||
catch(e) {}
|
||||
}, [ importValue, updateSettings ]);
|
||||
|
||||
return (
|
||||
<Flex column gap={ 2 } className="items-center p-2">
|
||||
{/* Color picker */}
|
||||
<div className="w-[280px]">
|
||||
<RgbaColorPicker color={ color } onChange={ setColor } style={ { width: '100%', height: '180px' } } />
|
||||
</div>
|
||||
|
||||
{/* Color preview swatch */}
|
||||
<div
|
||||
className="w-[280px] h-[32px] rounded border border-black/20"
|
||||
style={ { backgroundColor: `rgba(${ color.r }, ${ color.g }, ${ color.b }, ${ color.a })` } }
|
||||
/>
|
||||
|
||||
{/* Hex/RGB/A inputs */}
|
||||
<Flex gap={ 1 } className="items-center mt-1">
|
||||
<Flex column className="items-center">
|
||||
<input
|
||||
className="form-control form-control-sm text-center w-[70px]"
|
||||
value={ hexColor.replace('#', '').toUpperCase() }
|
||||
onChange={ e => onHexInput(e.target.value) }
|
||||
maxLength={ 6 }
|
||||
/>
|
||||
<Text small className="text-black">Hex</Text>
|
||||
</Flex>
|
||||
<Flex column className="items-center">
|
||||
<input
|
||||
type="number"
|
||||
className="form-control form-control-sm text-center w-[45px]"
|
||||
value={ color.r }
|
||||
onChange={ e => onRgbInput('r', parseInt(e.target.value)) }
|
||||
min={ 0 } max={ 255 }
|
||||
/>
|
||||
<Text small className="text-black">R</Text>
|
||||
</Flex>
|
||||
<Flex column className="items-center">
|
||||
<input
|
||||
type="number"
|
||||
className="form-control form-control-sm text-center w-[45px]"
|
||||
value={ color.g }
|
||||
onChange={ e => onRgbInput('g', parseInt(e.target.value)) }
|
||||
min={ 0 } max={ 255 }
|
||||
/>
|
||||
<Text small className="text-black">G</Text>
|
||||
</Flex>
|
||||
<Flex column className="items-center">
|
||||
<input
|
||||
type="number"
|
||||
className="form-control form-control-sm text-center w-[45px]"
|
||||
value={ color.b }
|
||||
onChange={ e => onRgbInput('b', parseInt(e.target.value)) }
|
||||
min={ 0 } max={ 255 }
|
||||
/>
|
||||
<Text small className="text-black">B</Text>
|
||||
</Flex>
|
||||
<Flex column className="items-center">
|
||||
<input
|
||||
type="number"
|
||||
className="form-control form-control-sm text-center w-[45px]"
|
||||
value={ alphaPercent }
|
||||
onChange={ e => onAlphaInput(parseInt(e.target.value)) }
|
||||
min={ 0 } max={ 100 }
|
||||
/>
|
||||
<Text small className="text-black">A</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
{/* Preset colors */}
|
||||
<div className="grid grid-cols-10 gap-0.5 mt-1">
|
||||
{ PRESET_COLORS.map((presetHex, i) => (
|
||||
<div
|
||||
key={ i }
|
||||
className={ `w-[24px] h-[24px] rounded cursor-pointer border hover:scale-110 transition-transform ${ hexColor.toUpperCase() === presetHex.toUpperCase() ? 'border-white border-2 scale-110' : 'border-black/20' }` }
|
||||
style={ { backgroundColor: presetHex } }
|
||||
onClick={ () => onPresetClick(presetHex) }
|
||||
/>
|
||||
)) }
|
||||
</div>
|
||||
|
||||
{/* Theme presets */}
|
||||
<Text small bold className="text-black mt-2">{ LocalizeText('interface.settings.color.themes') }</Text>
|
||||
<div className="grid grid-cols-6 gap-1 w-full">
|
||||
{ THEME_PRESETS.map((theme) => (
|
||||
<div
|
||||
key={ theme.name }
|
||||
className={ `flex flex-col items-center gap-0.5 p-1 rounded cursor-pointer hover:bg-black/5 transition-colors ${ hexColor.toUpperCase() === theme.color.toUpperCase() ? 'ring-2 ring-white' : '' }` }
|
||||
onClick={ () => onThemeClick(theme.color, theme.alpha) }
|
||||
>
|
||||
<div
|
||||
className="w-[32px] h-[32px] rounded-full border border-black/20"
|
||||
style={ { backgroundColor: theme.color, opacity: theme.alpha / 100 } }
|
||||
/>
|
||||
<Text small className="text-black text-[10px]">{ LocalizeText(`interface.settings.theme.${ theme.name }`) }</Text>
|
||||
</div>
|
||||
)) }
|
||||
</div>
|
||||
|
||||
{/* Action buttons */}
|
||||
<Flex gap={ 1 } className="w-full mt-2">
|
||||
<button
|
||||
className="flex-1 flex items-center justify-center gap-1 py-2 rounded cursor-pointer text-white text-xs"
|
||||
style={ { backgroundColor: '#5f9ea0' } }
|
||||
onClick={ onReset }
|
||||
title={ LocalizeText('interface.settings.color.reset') }
|
||||
>
|
||||
<FaUndo size={ 12 } />
|
||||
{ LocalizeText('interface.settings.color.reset') }
|
||||
</button>
|
||||
<button
|
||||
className="flex-1 flex items-center justify-center gap-1 py-2 rounded cursor-pointer text-white text-xs"
|
||||
style={ { backgroundColor: '#c0392b' } }
|
||||
onClick={ onDelete }
|
||||
title={ LocalizeText('interface.settings.color.remove') }
|
||||
>
|
||||
<FaTrash size={ 12 } />
|
||||
{ LocalizeText('interface.settings.color.remove') }
|
||||
</button>
|
||||
<button
|
||||
className="flex-1 flex items-center justify-center gap-1 py-2 rounded cursor-pointer text-white text-xs"
|
||||
style={ { backgroundColor: '#2980b9' } }
|
||||
onClick={ onExport }
|
||||
title={ LocalizeText('interface.settings.color.export') }
|
||||
>
|
||||
<FaDownload size={ 12 } />
|
||||
{ copyFeedback ? LocalizeText('interface.settings.color.copied') : LocalizeText('interface.settings.color.export') }
|
||||
</button>
|
||||
<button
|
||||
className="flex-1 flex items-center justify-center gap-1 py-2 rounded cursor-pointer text-white text-xs"
|
||||
style={ { backgroundColor: '#27ae60' } }
|
||||
onClick={ () => setShowImport(!showImport) }
|
||||
title={ LocalizeText('interface.settings.color.import') }
|
||||
>
|
||||
<FaUpload size={ 12 } />
|
||||
{ LocalizeText('interface.settings.color.import') }
|
||||
</button>
|
||||
</Flex>
|
||||
|
||||
{/* Import panel */}
|
||||
{ showImport && (
|
||||
<Flex gap={ 1 } className="w-full">
|
||||
<input
|
||||
className="form-control form-control-sm flex-1"
|
||||
placeholder={ LocalizeText('interface.settings.color.import.placeholder') }
|
||||
value={ importValue }
|
||||
onChange={ e => setImportValue(e.target.value) }
|
||||
/>
|
||||
<button
|
||||
className="px-3 py-1 rounded cursor-pointer text-white text-xs"
|
||||
style={ { backgroundColor: '#27ae60' } }
|
||||
onClick={ onImport }
|
||||
>
|
||||
OK
|
||||
</button>
|
||||
</Flex>
|
||||
) }
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,52 @@
|
||||
import { FC, useCallback, useMemo } from 'react';
|
||||
import { GetConfigurationValue, useUiSettings } from '../../api';
|
||||
|
||||
export const InterfaceImageTabView: FC<{}> = () =>
|
||||
{
|
||||
const { settings, updateSettings } = useUiSettings();
|
||||
|
||||
const imageCount = useMemo(() =>
|
||||
{
|
||||
return GetConfigurationValue<number>('ui.header.images.count', 30);
|
||||
}, []);
|
||||
|
||||
const baseUrl = useMemo(() =>
|
||||
{
|
||||
return GetConfigurationValue<string>('ui.header.images.url', 'https://image.webbo.city/image/headerImage/image{id}.gif');
|
||||
}, []);
|
||||
|
||||
const images = useMemo(() =>
|
||||
{
|
||||
const result: string[] = [];
|
||||
for(let i = 1; i <= imageCount; i++)
|
||||
{
|
||||
result.push(baseUrl.replace('{id}', String(i)));
|
||||
}
|
||||
return result;
|
||||
}, [ imageCount, baseUrl ]);
|
||||
|
||||
const onImageSelect = useCallback((url: string) =>
|
||||
{
|
||||
updateSettings({
|
||||
colorMode: 'image',
|
||||
headerImageUrl: url
|
||||
});
|
||||
}, [ updateSettings ]);
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-8 gap-1 p-2 overflow-auto max-h-[400px]">
|
||||
{ images.map((url, i) => (
|
||||
<div
|
||||
key={ i }
|
||||
className={ `w-[75px] h-[75px] rounded cursor-pointer border-2 transition-all hover:scale-105 ${ (settings.colorMode === 'image' && settings.headerImageUrl === url) ? 'border-white shadow-lg' : 'border-transparent' }` }
|
||||
style={ {
|
||||
backgroundImage: `url(${ url })`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center'
|
||||
} }
|
||||
onClick={ () => onImageSelect(url) }
|
||||
/>
|
||||
)) }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -45,7 +45,8 @@ const BadgeMiniPicker: FC<{
|
||||
return (
|
||||
<div
|
||||
ref={ ref }
|
||||
className="absolute right-[calc(100%+8px)] top-0 z-50 bg-[rgba(28,28,32,0.97)] border border-white/20 rounded-md p-2 shadow-lg min-w-[160px]"
|
||||
className="absolute right-[calc(100%+8px)] top-0 z-50 border border-white/20 rounded-md p-2 shadow-lg min-w-[160px]"
|
||||
style={ { backgroundColor: 'var(--ui-dark-bg, rgba(28,28,32,0.97))' } }
|
||||
onClick={ e => e.stopPropagation() }>
|
||||
<input
|
||||
autoFocus
|
||||
|
||||
@@ -458,7 +458,7 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
|
||||
|
||||
return (
|
||||
<Column alignItems="end" gap={ 1 }>
|
||||
<Column className="relative min-w-[190px] max-w-[190px] z-30 pointer-events-auto bg-[rgba(28,28,32,.95)] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] rounded">
|
||||
<Column className="relative min-w-[190px] max-w-[190px] z-30 pointer-events-auto [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] rounded" style={ { backgroundColor: 'var(--ui-dark-bg, rgba(28,28,32,.95))' } }>
|
||||
<Column className="h-full p-[8px] overflow-auto" gap={ 1 } overflow="visible">
|
||||
<div className="flex flex-col gap-1">
|
||||
<Flex alignItems="center" gap={ 1 } justifyContent="between">
|
||||
|
||||
@@ -133,7 +133,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
|
||||
|
||||
return (
|
||||
<>
|
||||
<Column className="relative min-w-[190px] max-w-[190px] z-30 pointer-events-auto bg-[rgba(28,28,32,0.95)] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] rounded">
|
||||
<Column className="relative min-w-[190px] max-w-[190px] z-30 pointer-events-auto [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] rounded" style={ { backgroundColor: 'var(--ui-dark-bg, rgba(28,28,32,0.95))' } }>
|
||||
<Column className="h-full p-[8px] overflow-auto" gap={1} overflow="visible">
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center justify-between">
|
||||
|
||||
@@ -3,16 +3,21 @@ import { Flex, FlexProps } from '../../../../common';
|
||||
|
||||
export const ContextMenuHeaderView: FC<FlexProps> = props =>
|
||||
{
|
||||
const { justifyContent = 'center', alignItems = 'center', classNames = [], ...rest } = props;
|
||||
const { justifyContent = 'center', alignItems = 'center', classNames = [], style = {}, ...rest } = props;
|
||||
|
||||
const getClassNames = useMemo(() =>
|
||||
{
|
||||
const newClassNames: string[] = [ 'bg-[#3d5f6e] text-[#fff] min-w-[117px] h-[25px] max-h-[25px] text-[16px] mb-[2px]', 'p-1' ];
|
||||
const newClassNames: string[] = [ 'text-[#fff] min-w-[117px] h-[25px] max-h-[25px] text-[16px] mb-[2px]', 'p-1' ];
|
||||
|
||||
if(classNames.length) newClassNames.push(...classNames);
|
||||
|
||||
return newClassNames;
|
||||
}, [ classNames ]);
|
||||
|
||||
return <Flex alignItems={ alignItems } classNames={ getClassNames } justifyContent={ justifyContent } { ...rest } />;
|
||||
const mergedStyle = useMemo(() => ({
|
||||
backgroundColor: 'var(--ui-ctx-header-bg, #3d5f6e)',
|
||||
...style
|
||||
}), [ style ]);
|
||||
|
||||
return <Flex alignItems={ alignItems } classNames={ getClassNames } justifyContent={ justifyContent } style={ mergedStyle } { ...rest } />;
|
||||
};
|
||||
|
||||
@@ -8,7 +8,7 @@ interface ContextMenuListItemViewProps extends FlexProps
|
||||
|
||||
export const ContextMenuListItemView: FC<ContextMenuListItemViewProps> = props =>
|
||||
{
|
||||
const { disabled = false, fullWidth = true, justifyContent = 'center', alignItems = 'center', classNames = [], onClick = null, ...rest } = props;
|
||||
const { disabled = false, fullWidth = true, justifyContent = 'center', alignItems = 'center', classNames = [], style = {}, onClick = null, ...rest } = props;
|
||||
|
||||
const handleClick = (event: MouseEvent<HTMLDivElement>) =>
|
||||
{
|
||||
@@ -19,7 +19,7 @@ export const ContextMenuListItemView: FC<ContextMenuListItemViewProps> = props =
|
||||
|
||||
const getClassNames = useMemo(() =>
|
||||
{
|
||||
const newClassNames: string[] = [ 'relative mb-[2px] p-[3px] overflow-hidden', 'h-[24px] max-h-[24px] p-[3px] bg-[repeating-linear-gradient(#131e25,#131e25_50%,#0d171d_50%,#0d171d_100%)] cursor-pointer' ];
|
||||
const newClassNames: string[] = [ 'relative mb-[2px] p-[3px] overflow-hidden', 'h-[24px] max-h-[24px] p-[3px] cursor-pointer' ];
|
||||
|
||||
if(disabled) newClassNames.push('disabled');
|
||||
|
||||
@@ -28,5 +28,10 @@ export const ContextMenuListItemView: FC<ContextMenuListItemViewProps> = props =
|
||||
return newClassNames;
|
||||
}, [ disabled, classNames ]);
|
||||
|
||||
return <Flex alignItems={ alignItems } classNames={ getClassNames } fullWidth={ fullWidth } justifyContent={ justifyContent } onClick={ handleClick } { ...rest } />;
|
||||
const mergedStyle = useMemo(() => ({
|
||||
background: 'repeating-linear-gradient(var(--ui-ctx-item-bg1, #131e25), var(--ui-ctx-item-bg1, #131e25) 50%, var(--ui-ctx-item-bg2, #0d171d) 50%, var(--ui-ctx-item-bg2, #0d171d) 100%)',
|
||||
...style
|
||||
}), [ style ]);
|
||||
|
||||
return <Flex alignItems={ alignItems } classNames={ getClassNames } fullWidth={ fullWidth } justifyContent={ justifyContent } onClick={ handleClick } style={ mergedStyle } { ...rest } />;
|
||||
};
|
||||
|
||||
@@ -76,7 +76,6 @@ export const ContextMenuView: FC<ContextMenuViewProps> = ({
|
||||
const getClassNames = useMemo(() => {
|
||||
const classes = [
|
||||
'p-[2px]!',
|
||||
'bg-[#1c323f]',
|
||||
'border-2',
|
||||
'border-[solid]',
|
||||
'border-[rgba(255,255,255,.5)]',
|
||||
@@ -98,6 +97,7 @@ export const ContextMenuView: FC<ContextMenuViewProps> = ({
|
||||
top: pos.y ?? 0,
|
||||
transition: isFading ? 'opacity 75ms linear' : undefined,
|
||||
opacity,
|
||||
backgroundColor: 'var(--ui-ctx-bg, #1c323f)',
|
||||
...style,
|
||||
}),
|
||||
[pos, opacity, isFading, style]
|
||||
|
||||
@@ -69,7 +69,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
||||
<ToolbarMeView setMeExpanded={ setMeExpanded } unseenAchievementCount={ getTotalUnseen } useGuideTool={ useGuideTool } />
|
||||
</motion.div> )}
|
||||
</AnimatePresence>
|
||||
<Flex alignItems="center" className="absolute bottom-0 left-0 w-full h-[55px] bg-[rgba(28,28,32,.95)] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] py-1 px-3" gap={ 2 }>
|
||||
<Flex alignItems="center" className="absolute bottom-0 left-0 w-full h-[55px] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] py-1 px-3" gap={ 2 } style={ { backgroundColor: 'var(--ui-dark-bg, rgba(28,28,32,.95))' } }>
|
||||
<Flex alignItems="center" gap={ 2 } className="flex-shrink-0">
|
||||
<Flex center pointer className={ 'relative w-[50px] h-[45px] overflow-hidden ' + (isMeExpanded ? 'active ' : '') } onClick={ event =>
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user