mirror of
https://github.com/duckietm/Nitro-Cool-UI.git
synced 2025-06-21 22:36:58 +00:00
🆙 Fix the Zoom / Effect and layout
This commit is contained in:
DuckieTM
parent
bcbbaf5944
commit
512ead3543
@ -1,71 +1,68 @@
|
||||
import { GetRoomEngine, RoomObjectCategory, RoomObjectVariable } from '@nitrots/nitro-renderer';
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import { FaArrowLeft, FaArrowRight } from 'react-icons/fa';
|
||||
import { GetUserProfile, IPhotoData, LocalizeText } from '../../../api';
|
||||
import { Flex, Grid, Text } from '../../../common';
|
||||
|
||||
export interface CameraWidgetShowPhotoViewProps
|
||||
{
|
||||
export interface CameraWidgetShowPhotoViewProps {
|
||||
currentIndex: number;
|
||||
currentPhotos: IPhotoData[];
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
export const CameraWidgetShowPhotoView: FC<CameraWidgetShowPhotoViewProps> = props =>
|
||||
{
|
||||
const { currentIndex = -1, currentPhotos = null } = props;
|
||||
const [ imageIndex, setImageIndex ] = useState(0);
|
||||
export const CameraWidgetShowPhotoView: FC<CameraWidgetShowPhotoViewProps> = props => {
|
||||
const { currentIndex = -1, currentPhotos = null, onClick = null } = props;
|
||||
const [imageIndex, setImageIndex] = useState(0);
|
||||
|
||||
const currentImage = (currentPhotos && currentPhotos.length) ? currentPhotos[imageIndex] : null;
|
||||
|
||||
const next = () =>
|
||||
{
|
||||
setImageIndex(prevValue =>
|
||||
{
|
||||
let newIndex = (prevValue + 1);
|
||||
|
||||
if(newIndex >= currentPhotos.length) newIndex = 0;
|
||||
const currentImage = currentPhotos && currentPhotos.length ? currentPhotos[imageIndex] : null;
|
||||
|
||||
const next = () => {
|
||||
setImageIndex(prevValue => {
|
||||
let newIndex = prevValue + 1;
|
||||
if (newIndex >= currentPhotos.length) newIndex = 0;
|
||||
return newIndex;
|
||||
});
|
||||
};
|
||||
|
||||
const previous = () =>
|
||||
{
|
||||
setImageIndex(prevValue =>
|
||||
{
|
||||
let newIndex = (prevValue - 1);
|
||||
|
||||
if(newIndex < 0) newIndex = (currentPhotos.length - 1);
|
||||
|
||||
const previous = () => {
|
||||
setImageIndex(prevValue => {
|
||||
let newIndex = prevValue - 1;
|
||||
if (newIndex < 0) newIndex = currentPhotos.length - 1;
|
||||
return newIndex;
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
useEffect(() => {
|
||||
setImageIndex(currentIndex);
|
||||
}, [ currentIndex ]);
|
||||
}, [currentIndex]);
|
||||
|
||||
if(!currentImage) return null;
|
||||
if (!currentImage) return null;
|
||||
|
||||
const getUserData = (roomId: number, objectId: number, type: string): number | string =>
|
||||
{
|
||||
const roomObject = GetRoomEngine().getRoomObject(roomId, objectId, RoomObjectCategory.WALL);
|
||||
if (!roomObject) return;
|
||||
return type == 'username' ? roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_OWNER_NAME) : roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_OWNER_ID);
|
||||
}
|
||||
|
||||
return (
|
||||
<Grid style={ { display: 'flex', flexDirection: 'column' } }>
|
||||
<Flex center className="picture-preview border border-black" style={ currentImage.w ? { backgroundImage: 'url(' + currentImage.w + ')' } : {} }>
|
||||
{ !currentImage.w &&
|
||||
<Text bold>{ LocalizeText('camera.loading') }</Text> }
|
||||
<Grid style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Flex center className="picture-preview border border-black" style={currentImage.w ? { backgroundImage: 'url(' + currentImage.w + ')' } : {}} onClick={onClick}>
|
||||
{!currentImage.w && <Text bold>{LocalizeText('camera.loading')}</Text>}
|
||||
</Flex>
|
||||
{ currentImage.m && currentImage.m.length &&
|
||||
<Text center>{ currentImage.m }</Text> }
|
||||
<div className="flex items-center justify-between">
|
||||
<Text>{ (currentImage.n || '') }</Text>
|
||||
<Text>{ new Date(currentImage.t * 1000).toLocaleDateString() }</Text>
|
||||
{currentImage.m && currentImage.m.length && <Text center>{currentImage.m}</Text>}
|
||||
<div className="flex items-center center justify-between">
|
||||
<Text>{currentImage.n || ''}</Text>
|
||||
<Text onClick={() => GetUserProfile(Number(getUserData(currentImage.s, Number(currentImage.u), 'id')))}> { getUserData(currentImage.s, Number(currentImage.u), 'username') } </Text>
|
||||
<Text className="cursor-pointer" onClick={() => GetUserProfile(currentImage.oi)}>{currentImage.o}</Text>
|
||||
<Text>{new Date(currentImage.t * 1000).toLocaleDateString()}</Text>
|
||||
</div>
|
||||
{ (currentPhotos.length > 1) &&
|
||||
{currentPhotos.length > 1 && (
|
||||
<Flex className="picture-preview-buttons">
|
||||
<FaArrowLeft className="cursor-pointer picture-preview-buttons-previous fa-icon" onClick={ previous } />
|
||||
<Text underline className="cursor-pointer" onClick={ event => GetUserProfile(currentImage.oi) }>{ currentImage.o }</Text>
|
||||
<FaArrowRight className="cursor-pointer picture-preview-buttons-next fa-icon" onClick={ next } />
|
||||
<FaArrowLeft onClick={previous} />
|
||||
<FaArrowRight className="cursor-pointer"onClick={next} />
|
||||
</Flex>
|
||||
}
|
||||
)}
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
@ -3,11 +3,10 @@ import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { FaSave, FaSearchMinus, FaSearchPlus, FaTrash } from 'react-icons/fa';
|
||||
import ReactSlider from 'react-slider';
|
||||
import { CameraEditorTabs, CameraPicture, CameraPictureThumbnail, LocalizeText } from '../../../../api';
|
||||
import { Button, ButtonGroup, Column, Flex, Grid, LayoutImage, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Text } from '../../../../common';
|
||||
import { Button, Column, Flex, Grid, LayoutImage, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Text } from '../../../../common';
|
||||
import { CameraWidgetEffectListView } from './effect-list';
|
||||
|
||||
export interface CameraWidgetEditorViewProps
|
||||
{
|
||||
export interface CameraWidgetEditorViewProps {
|
||||
picture: CameraPicture;
|
||||
availableEffects: IRoomCameraWidgetEffect[];
|
||||
myLevel: number;
|
||||
@ -18,8 +17,7 @@ export interface CameraWidgetEditorViewProps
|
||||
|
||||
const TABS: string[] = [ CameraEditorTabs.COLORMATRIX, CameraEditorTabs.COMPOSITE ];
|
||||
|
||||
export const CameraWidgetEditorView: FC<CameraWidgetEditorViewProps> = props =>
|
||||
{
|
||||
export const CameraWidgetEditorView: FC<CameraWidgetEditorViewProps> = props => {
|
||||
const { picture = null, availableEffects = null, myLevel = 1, onClose = null, onCancel = null, onCheckout = null } = props;
|
||||
const [ currentTab, setCurrentTab ] = useState(TABS[0]);
|
||||
const [ selectedEffectName, setSelectedEffectName ] = useState<string>(null);
|
||||
@ -29,66 +27,46 @@ export const CameraWidgetEditorView: FC<CameraWidgetEditorViewProps> = props =>
|
||||
const [ currentPictureUrl, setCurrentPictureUrl ] = useState<string>('');
|
||||
const isBusy = useRef<boolean>(false);
|
||||
|
||||
const getColorMatrixEffects = useMemo(() =>
|
||||
{
|
||||
const getColorMatrixEffects = useMemo(() => {
|
||||
return availableEffects.filter(effect => effect.colorMatrix);
|
||||
}, [ availableEffects ]);
|
||||
|
||||
const getCompositeEffects = useMemo(() =>
|
||||
{
|
||||
const getCompositeEffects = useMemo(() => {
|
||||
return availableEffects.filter(effect => effect.texture);
|
||||
}, [ availableEffects ]);
|
||||
|
||||
const getEffectList = useCallback(() =>
|
||||
{
|
||||
if(currentTab === CameraEditorTabs.COLORMATRIX)
|
||||
{
|
||||
return getColorMatrixEffects;
|
||||
}
|
||||
|
||||
return getCompositeEffects;
|
||||
const getEffectList = useCallback(() => {
|
||||
return currentTab === CameraEditorTabs.COLORMATRIX ? getColorMatrixEffects : getCompositeEffects;
|
||||
}, [ currentTab, getColorMatrixEffects, getCompositeEffects ]);
|
||||
|
||||
const getSelectedEffectIndex = useCallback((name: string) =>
|
||||
{
|
||||
if(!name || !name.length || !selectedEffects || !selectedEffects.length) return -1;
|
||||
|
||||
return selectedEffects.findIndex(effect => (effect.effect.name === name));
|
||||
const getSelectedEffectIndex = useCallback((name: string) => {
|
||||
if (!name || !name.length || !selectedEffects || !selectedEffects.length) return -1;
|
||||
return selectedEffects.findIndex(effect => effect.effect.name === name);
|
||||
}, [ selectedEffects ]);
|
||||
|
||||
const getCurrentEffectIndex = useMemo(() =>
|
||||
{
|
||||
const getCurrentEffectIndex = useMemo(() => {
|
||||
return getSelectedEffectIndex(selectedEffectName);
|
||||
}, [ selectedEffectName, getSelectedEffectIndex ]);
|
||||
|
||||
const getCurrentEffect = useMemo(() =>
|
||||
{
|
||||
if(!selectedEffectName) return null;
|
||||
|
||||
return (selectedEffects[getCurrentEffectIndex] || null);
|
||||
const getCurrentEffect = useMemo(() => {
|
||||
if (!selectedEffectName) return null;
|
||||
return selectedEffects[getCurrentEffectIndex] || null;
|
||||
}, [ selectedEffectName, getCurrentEffectIndex, selectedEffects ]);
|
||||
|
||||
const setSelectedEffectAlpha = useCallback((alpha: number) =>
|
||||
{
|
||||
const setSelectedEffectAlpha = useCallback((alpha: number) => {
|
||||
const index = getCurrentEffectIndex;
|
||||
if (index === -1) return;
|
||||
|
||||
if(index === -1) return;
|
||||
|
||||
setSelectedEffects(prevValue =>
|
||||
{
|
||||
setSelectedEffects(prevValue => {
|
||||
const clone = [ ...prevValue ];
|
||||
const currentEffect = clone[index];
|
||||
|
||||
clone[getCurrentEffectIndex] = new RoomCameraWidgetSelectedEffect(currentEffect.effect, alpha);
|
||||
|
||||
clone[index] = new RoomCameraWidgetSelectedEffect(currentEffect.effect, alpha);
|
||||
return clone;
|
||||
});
|
||||
}, [ getCurrentEffectIndex, setSelectedEffects ]);
|
||||
}, [ getCurrentEffectIndex ]);
|
||||
|
||||
const processAction = useCallback((type: string, effectName: string = null) =>
|
||||
{
|
||||
switch(type)
|
||||
{
|
||||
const processAction = useCallback((type: string, effectName: string = null) => {
|
||||
switch (type) {
|
||||
case 'close':
|
||||
onClose();
|
||||
return;
|
||||
@ -102,37 +80,27 @@ export const CameraWidgetEditorView: FC<CameraWidgetEditorViewProps> = props =>
|
||||
setCurrentTab(String(effectName));
|
||||
return;
|
||||
case 'select_effect': {
|
||||
let existingIndex = getSelectedEffectIndex(effectName);
|
||||
const existingIndex = getSelectedEffectIndex(effectName);
|
||||
if (existingIndex >= 0) return;
|
||||
|
||||
if(existingIndex >= 0) return;
|
||||
|
||||
const effect = availableEffects.find(effect => (effect.name === effectName));
|
||||
|
||||
if(!effect) return;
|
||||
|
||||
setSelectedEffects(prevValue =>
|
||||
{
|
||||
return [ ...prevValue, new RoomCameraWidgetSelectedEffect(effect, 1) ];
|
||||
});
|
||||
const effect = availableEffects.find(effect => effect.name === effectName);
|
||||
if (!effect) return;
|
||||
|
||||
setSelectedEffects(prevValue => [ ...prevValue, new RoomCameraWidgetSelectedEffect(effect, 1) ]);
|
||||
setSelectedEffectName(effect.name);
|
||||
return;
|
||||
}
|
||||
case 'remove_effect': {
|
||||
let existingIndex = getSelectedEffectIndex(effectName);
|
||||
const existingIndex = getSelectedEffectIndex(effectName);
|
||||
if (existingIndex === -1) return;
|
||||
|
||||
if(existingIndex === -1) return;
|
||||
|
||||
setSelectedEffects(prevValue =>
|
||||
{
|
||||
setSelectedEffects(prevValue => {
|
||||
const clone = [ ...prevValue ];
|
||||
|
||||
clone.splice(existingIndex, 1);
|
||||
|
||||
return clone;
|
||||
});
|
||||
|
||||
if(selectedEffectName === effectName) setSelectedEffectName(null);
|
||||
if (selectedEffectName === effectName) setSelectedEffectName(null);
|
||||
return;
|
||||
}
|
||||
case 'clear_effects':
|
||||
@ -140,78 +108,90 @@ export const CameraWidgetEditorView: FC<CameraWidgetEditorViewProps> = props =>
|
||||
setSelectedEffects([]);
|
||||
return;
|
||||
case 'download': {
|
||||
(async () =>
|
||||
{
|
||||
(async () => {
|
||||
const image = new Image();
|
||||
|
||||
image.src = currentPictureUrl;
|
||||
|
||||
const newWindow = window.open('');
|
||||
newWindow.document.write(image.outerHTML);
|
||||
})();
|
||||
return;
|
||||
}
|
||||
case 'zoom':
|
||||
setIsZoomed(!isZoomed);
|
||||
setIsZoomed(prev => !prev);
|
||||
return;
|
||||
}
|
||||
}, [ isZoomed, availableEffects, selectedEffectName, currentPictureUrl, getSelectedEffectIndex, onCancel, onCheckout, onClose, setIsZoomed, setSelectedEffects ]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
const processThumbnails = async () =>
|
||||
{
|
||||
const renderedEffects = await Promise.all(availableEffects.map(effect => GetRoomCameraWidgetManager().applyEffects(picture.texture, [ new RoomCameraWidgetSelectedEffect(effect, 1) ], false)));
|
||||
}, [ availableEffects, selectedEffectName, currentPictureUrl, getSelectedEffectIndex, onCancel, onCheckout, onClose ]);
|
||||
|
||||
useEffect(() => {
|
||||
const processThumbnails = async () => {
|
||||
const renderedEffects = await Promise.all(
|
||||
availableEffects.map(effect =>
|
||||
GetRoomCameraWidgetManager().applyEffects(picture.texture, [ new RoomCameraWidgetSelectedEffect(effect, 1) ], false)
|
||||
)
|
||||
);
|
||||
setEffectsThumbnails(renderedEffects.map((image, index) => new CameraPictureThumbnail(availableEffects[index].name, image.src)));
|
||||
};
|
||||
|
||||
processThumbnails();
|
||||
}, [ picture, availableEffects ]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
useEffect(() => {
|
||||
GetRoomCameraWidgetManager()
|
||||
.applyEffects(picture.texture, selectedEffects, isZoomed)
|
||||
.then(imageElement =>
|
||||
{
|
||||
.applyEffects(picture.texture, selectedEffects, false) // Remove isZoomed from here
|
||||
.then(imageElement => {
|
||||
setCurrentPictureUrl(imageElement.src);
|
||||
})
|
||||
.catch(error =>
|
||||
{
|
||||
.catch(error => {
|
||||
NitroLogger.error('Failed to apply effects to picture', error);
|
||||
});
|
||||
}, [ picture, selectedEffects, isZoomed ]);
|
||||
}, [ picture, selectedEffects ]); // Remove isZoomed from dependency array
|
||||
|
||||
return (
|
||||
<NitroCardView className="w-[600px] h-[500px]">
|
||||
<NitroCardHeaderView headerText={ LocalizeText('camera.editor.button.text') } onCloseClick={ event => processAction('close') } />
|
||||
<NitroCardTabsView>
|
||||
{ TABS.map(tab =>
|
||||
{
|
||||
return <NitroCardTabsItemView key={ tab } isActive={ currentTab === tab } onClick={ event => processAction('change_tab', tab) }><i className={ 'nitro-icon icon-camera-' + tab }></i></NitroCardTabsItemView>;
|
||||
}) }
|
||||
{ TABS.map(tab => (
|
||||
<NitroCardTabsItemView key={ tab } isActive={ currentTab === tab } onClick={ event => processAction('change_tab', tab) }>
|
||||
<i className={ 'nitro-icon icon-camera-' + tab }></i>
|
||||
</NitroCardTabsItemView>
|
||||
)) }
|
||||
</NitroCardTabsView>
|
||||
<NitroCardContentView>
|
||||
<Grid>
|
||||
<Column overflow="hidden" size={ 5 }>
|
||||
<CameraWidgetEffectListView myLevel={ myLevel } selectedEffects={ selectedEffects } effects={ getEffectList() } thumbnails={ effectsThumbnails } processAction={ processAction } />
|
||||
<CameraWidgetEffectListView
|
||||
myLevel={ myLevel }
|
||||
selectedEffects={ selectedEffects }
|
||||
effects={ getEffectList() }
|
||||
thumbnails={ effectsThumbnails }
|
||||
processAction={ processAction }
|
||||
/>
|
||||
</Column>
|
||||
<Column justifyContent="between" overflow="hidden" size={ 7 }>
|
||||
<Column center>
|
||||
<LayoutImage className="w-[320px] h-[320px]" imageUrl={ currentPictureUrl } />
|
||||
{ selectedEffectName &&
|
||||
<LayoutImage
|
||||
style={{
|
||||
width: '320px',
|
||||
height: '320px',
|
||||
backgroundImage: `url(${currentPictureUrl})`,
|
||||
backgroundPosition: isZoomed ? 'center' : 'top left',
|
||||
backgroundSize: isZoomed ? 'contain' : 'auto', // Zoom only affects display
|
||||
backgroundRepeat: 'no-repeat'
|
||||
}}
|
||||
/>
|
||||
{ selectedEffectName && (
|
||||
<Column center fullWidth gap={ 1 }>
|
||||
<Text>{ LocalizeText('camera.effect.name.' + selectedEffectName) }</Text>
|
||||
<ReactSlider
|
||||
className={ 'nitro-slider' }
|
||||
className="nitro-slider"
|
||||
min={ 0 }
|
||||
max={ 1 }
|
||||
step={ 0.01 }
|
||||
value={ getCurrentEffect.strength }
|
||||
onChange={ event => setSelectedEffectAlpha(event) }
|
||||
renderThumb={ ({ key, ...props }, state) => <div key={ key } { ...props }>{ state.valueNow }</div> } />
|
||||
</Column> }
|
||||
renderThumb={ ({ key, ...props }, state) => <div key={ key } { ...props }>{ state.valueNow }</div> }
|
||||
/>
|
||||
</Column>
|
||||
) }
|
||||
</Column>
|
||||
<div className="flex justify-between">
|
||||
<div className="relative inline-flex align-middle">
|
||||
@ -222,8 +202,7 @@ export const CameraWidgetEditorView: FC<CameraWidgetEditorViewProps> = props =>
|
||||
<FaSave className="fa-icon" />
|
||||
</Button>
|
||||
<Button onClick={ event => processAction('zoom') }>
|
||||
{ isZoomed && <FaSearchMinus className="fa-icon" /> }
|
||||
{ !isZoomed && <FaSearchPlus className="fa-icon" /> }
|
||||
{ isZoomed ? <FaSearchMinus className="fa-icon" /> : <FaSearchPlus className="fa-icon" /> }
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
|
||||
@ -1,22 +1,33 @@
|
||||
import { GetSessionDataManager } from '@nitrots/nitro-renderer';
|
||||
import { FC } from 'react';
|
||||
import { ReportType } from '../../../../api';
|
||||
import { GetConfigurationValue, LocalizeText, ReportType } from '../../../../api';
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
|
||||
import { useFurnitureExternalImageWidget, useHelp } from '../../../../hooks';
|
||||
import { CameraWidgetShowPhotoView } from '../../../camera/views/CameraWidgetShowPhotoView';
|
||||
|
||||
export const FurnitureExternalImageView: FC<{}> = props =>
|
||||
{
|
||||
export const FurnitureExternalImageView: FC<{}> = props => {
|
||||
const { objectId = -1, currentPhotoIndex = -1, currentPhotos = null, onClose = null } = useFurnitureExternalImageWidget();
|
||||
const { report = null } = useHelp();
|
||||
|
||||
if((objectId === -1) || (currentPhotoIndex === -1)) return null;
|
||||
if (objectId === -1 || currentPhotoIndex === -1) return null;
|
||||
|
||||
const handleOpenFullPhoto = () => {
|
||||
const photoUrl = currentPhotos[currentPhotoIndex].w.replace('_small.png', '.png');
|
||||
if (photoUrl) {
|
||||
console.log("Opened photo URL:", photoUrl);
|
||||
window.open(photoUrl, '_blank');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<NitroCardView className="nitro-external-image-widget" theme="primary-slim">
|
||||
<NitroCardHeaderView headerText="" isGalleryPhoto={ true } onCloseClick={ onClose } onReportPhoto={ () => report(ReportType.PHOTO, { extraData: currentPhotos[currentPhotoIndex].w, roomId: currentPhotos[currentPhotoIndex].s, reportedUserId: GetSessionDataManager().userId, roomObjectId: Number(currentPhotos[currentPhotoIndex].u) }) } />
|
||||
<NitroCardView className="nitro-external-image-widget no-resize" uniqueKey="photo-viewer" theme="primary-slim">
|
||||
<NitroCardHeaderView
|
||||
headerText={ LocalizeText('camera.interface.title') }
|
||||
isGalleryPhoto={true}
|
||||
onCloseClick={onClose}
|
||||
onReportPhoto={() => report(ReportType.PHOTO, { extraData: currentPhotos[currentPhotoIndex].w, roomId: currentPhotos[currentPhotoIndex].s, reportedUserId: GetSessionDataManager().userId, roomObjectId: Number(currentPhotos[currentPhotoIndex].u) })}
|
||||
/>
|
||||
<NitroCardContentView>
|
||||
<CameraWidgetShowPhotoView currentIndex={ currentPhotoIndex } currentPhotos={ currentPhotos } />
|
||||
<CameraWidgetShowPhotoView currentIndex={currentPhotoIndex} currentPhotos={currentPhotos} onClick={handleOpenFullPhoto} />
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
);
|
||||
|
||||
@ -2,6 +2,14 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.no-resize {
|
||||
resize: none !important;
|
||||
min-width: 340px !important;
|
||||
max-width: 340px !important;
|
||||
min-height: 430px !important;
|
||||
max-height: 430px !important;
|
||||
}
|
||||
|
||||
.nitro-widget-custom-stack-height {
|
||||
width: 275px;
|
||||
height: 220px;
|
||||
@ -64,7 +72,6 @@
|
||||
.picture-preview-buttons-previous,
|
||||
.picture-preview-buttons-next {
|
||||
color: #222;
|
||||
background-color: white;
|
||||
padding: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user