Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

OV-418: Add delete background #420

Merged
merged 4 commits into from
Sep 25, 2024
Merged

OV-418: Add delete background #420

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4ad8717
OV-418: * add `none` buttons to background choices
Sanchousina Sep 24, 2024
76282ce
OV-418: * add reducer to remove bg
Sanchousina Sep 24, 2024
4cf3df7
OV-418: * handle remove bg
Sanchousina Sep 24, 2024
b50913f
OV-418: * fix styles
Sanchousina Sep 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions ...components/video-menu/components/menu-content/backgrounds-content/backgrounds-content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,28 @@
import {
Flex,
SimpleGrid,
Tab,
TabList,
TabPanel,
TabPanels,
Tabs,
Text,
} from '~/bundles/common/components/components.js';
import { useAppDispatch, useCallback } from '~/bundles/common/hooks/hooks.js';
// TODO: Make endpoint for this
import backgroundColors from '~/bundles/studio/data/bg-colors.json';
import backgroundImages from '~/bundles/studio/data/bg-images.json';
import { actions as studioActions } from '~/bundles/studio/store/studio.js';

import { ColorCard, ImageCard } from './components/components.js';
import styles from './styles.module.css';

const BackgroundsContent: React.FC = () => {
const dispatch = useAppDispatch();
const handleRemoveBackground = useCallback((): void => {
dispatch(studioActions.removeBackgroundFromScene());
}, [dispatch]);

return (
<>
<Tabs>
Expand All @@ -24,6 +34,14 @@ const BackgroundsContent: React.FC = () => {
<TabPanels>
<TabPanel>
<SimpleGrid columns={2} spacingX="13px" spacingY="10px">
<Flex
className={styles['none-item']}
height="100px"
onClick={handleRemoveBackground}
>
<Text variant="body1">None</Text>
</Flex>

{backgroundImages.map((imageSource, index) => (
<ImageCard
key={index}
Expand All @@ -34,6 +52,14 @@ const BackgroundsContent: React.FC = () => {
</TabPanel>
<TabPanel>
<SimpleGrid columns={3} spacingX="13px" spacingY="10px">
<Flex
className={styles['none-item']}
height="80px"
onClick={handleRemoveBackground}
>
<Text variant="body1">None</Text>
</Flex>

{backgroundColors.map((color, index) => (
<ColorCard key={index} color={color} />
))}
Expand Down
4 changes: 3 additions & 1 deletion ...mponents/video-menu/components/menu-content/backgrounds-content/components/color-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import { Box } from '~/bundles/common/components/components.js';
import { useAppDispatch, useCallback } from '~/bundles/common/hooks/hooks.js';
import { actions as studioActions } from '~/bundles/studio/store/studio.js';

import styles from './styles.module.css';

type Properties = {
color: string;
};
Expand All @@ -20,8 +22,8 @@ const ColorCard: React.FC<Properties> = ({ color }) => {

return (
<Box
className={styles['color-item']}
backgroundColor={color}
height="80px"
onClick={handleColorClick}
></Box>
);
Expand Down
15 changes: 14 additions & 1 deletion ...nents/video-menu/components/menu-content/backgrounds-content/components/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,21 @@
transition: all 0.3s ease;
}

.color-item {
border-radius: 7px;
height: 80px;
border-width: 1px;
border-color: transparent;
transition: all 0.3s ease;
}

.image-item:hover {
background-color: var(--chakra-colors-background-600);
border-color: var(--chakra-colors-brand-secondary-300);
cursor: 'pointer';
cursor: pointer;
}

.color-item:hover {
border-color: var(--chakra-colors-brand-secondary-300);
cursor: pointer;
}
15 changes: 15 additions & 0 deletions ...tudio/components/video-menu/components/menu-content/backgrounds-content/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
.none-item {
background-color: var(--chakra-colors-background-700);
border-radius: 7px;
border-width: 1px;
border-color: transparent;
transition: all 0.3s ease;
align-items: center;
justify-content: center;
}

.none-item:hover {
background-color: var(--chakra-colors-background-600);
border-color: var(--chakra-colors-brand-secondary-300);
cursor: pointer;
}
17 changes: 17 additions & 0 deletions frontend/src/bundles/studio/store/slice.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -346,6 +346,23 @@ const { reducer, actions, name } = createSlice({
};
});
},
removeBackgroundFromScene(state) {
const selectedItem = state.ui.selectedItem;
if (!selectedItem || selectedItem.type !== RowNames.SCENE) {
return;
}

state.scenes = state.scenes.map((scene) => {
if (scene.id !== selectedItem.id) {
return scene;
}

return {
...scene,
background: {},
};
});
},
setMenuActiveItem(
state,
action: PayloadAction<ValueOf<typeof MenuItems> | null>,
Expand Down
Loading