refactoring

fix action icon styles
version up

Dockerfile

@@ -1,6 +1,6 @@
 # syntax=docker/dockerfile:1
 # Build commands:
-# - $VERSION=1.6
+# - $VERSION=1.7
 # - rm build -r -Force ; rm ./node_modules/.cache/babel-loader -r -Force ; yarn build
 # - docker build --pull --rm -t oncharterliz/multi-frigate:latest -t oncharterliz/multi-frigate:$VERSION "."
 # - docker image push --all-tags oncharterliz/multi-frigate

package.json

@@ -1,6 +1,6 @@
 {
   "name": "multi-frigate",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "private": true,
   "dependencies": {
     "@cycjimmy/jsmpeg-player": "^6.0.5",

src/App.tsx

@@ -64,6 +64,17 @@ function App() {
                     radius: "xl",
                   }
                 },
+                ActionIcon: {
+                  styles: (theme) => ({
+                    root: {
+                      // backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[4],
+                      '&:hover': {
+                        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[2],
+                      },
+                    },
+                  }),
+                }
+
               }
             }}
           >

src/shared/components/SideBar.tsx

@@ -1,120 +0,0 @@
-import { Aside, Button, Navbar, createStyles } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
-import { observer } from 'mobx-react-lite';
-import React, { useContext, useEffect, useState } from 'react';
-import { useTranslation } from "react-i18next";
-import { Context } from '../..';
-import { dimensions } from '../dimensions/dimensions';
-import { useMantineSize } from '../utils/mantine.size.convertor';
-import { SideButton } from './SideButton';
-
-// export interface SideBarProps {
-//     onChangeHidden: (isHidden: boolean) => void,
-//     side: 'left' | 'right',
-//     children?: React.ReactNode,
-// }
-
-// const useStyles = createStyles((theme,
-//     { visible }: { visible: boolean }) => ({
-//         navbar: {
-//             transition: 'transform 0.3s ease-in-out',
-//             transform: visible ? 'translateX(0)' : 'translateX(-100%)',
-//         },
-
-//         aside: {
-//             transition: 'transform 0.3s ease-in-out',
-//             transform: visible ? 'translateX(0)' : 'translateX(+100%)',
-//         },
-//     }))
-
-
-// const SideBar = ({ onChangeHidden: isHidden, side, children }: SideBarProps) => {
-// const { t } = useTranslation()
-// const hideSizePx = useMantineSize(dimensions.hideSidebarsSize)
-// const initialVisible = () => {
-//     const savedVisibility = localStorage.getItem(`sidebarVisible_${side}`);
-//     if (savedVisibility === null) {
-//         return window.innerWidth < hideSizePx;
-//     }
-//     return savedVisibility === 'true';
-// }
-// const [visible, { open, close }] = useDisclosure(initialVisible());
-
-// const { classes } = useStyles({ visible })
-
-// const handleClickVisible = (state: boolean) => {
-//     localStorage.setItem(`sidebarVisible_${side}`, String(state))
-//     if (state) open()
-//     else close()
-// }
-
-// const { sideBarsStore } = useContext(Context)
-// useEffect(() => {
-//     if (sideBarsStore.rightVisible && side === 'right' && !visible) {
-//         open()
-//     } else if (!sideBarsStore.rightVisible && side === 'right' && visible) {
-//         close()
-//     }
-// }, [sideBarsStore.rightVisible])
-
-// const [leftChildren, setLeftChildren] = useState<React.ReactNode>(() => {
-//     if (children && side === 'left') return children
-//     else if (sideBarsStore.leftChildren) return sideBarsStore.leftChildren
-//     return null
-// })
-// const [rightChildren, setRightChildren] = useState<React.ReactNode>(() => {
-//     if (children && side === 'right') return children
-//     else if (sideBarsStore.rightChildren) return sideBarsStore.rightChildren
-//     return null
-// })
-
-// useEffect(() => {
-//     setLeftChildren(sideBarsStore.leftChildren)
-// }, [sideBarsStore.leftChildren])
-
-// useEffect(() => {
-//     setRightChildren(sideBarsStore.rightChildren)
-// }, [sideBarsStore.rightChildren])
-
-// useEffect(() => {
-//     isHidden(!visible)
-// }, [visible])
-
-// useEffect(() => {
-//     const savedVisibility = localStorage.getItem(`sidebarVisible_${side}`);
-//     if (savedVisibility === null && window.innerWidth < hideSizePx) {
-//         open()
-//     } else if (savedVisibility) {
-//         savedVisibility === 'true' ? open() : close()
-//     }
-// }, [])
-
-// return (
-//     <div>
-//         {
-//             side === 'left' ?
-//                 <Navbar
-//                     className={classes.navbar}
-//                     p={dimensions.hideSidebarsSize}
-//                     width={{ sm: 200, lg: 300, }}
-//                 >
-//                     <Button onClick={() => handleClickVisible(false)}>{t('hide')}</Button>
-//                     {leftChildren}
-//                 </Navbar>
-//                 :
-//                 <Aside
-//                     className={classes.aside}
-//                     p={dimensions.hideSidebarsSize}
-//                     width={{ sm: 200, lg: 300 }}>
-//                     <Button onClick={() => handleClickVisible(false)}>{t('hide')}</Button>
-//                     {rightChildren}
-//                 </Aside>
-//         }
-//         <SideButton side={side} hide={visible} onClick={() => handleClickVisible(true)} />
-//     </div>
-// )
-// }
-
-export const toDoDelete = () => ( <></> )
-
-// export default observer(SideBar)

src/shared/components/filters/CreatableMultiSelect.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, Group, MultiSelect, MultiSelectProps, SelectItem, SpacingValue, SystemProp, Text } from '@mantine/core';
+import { ActionIcon, Box, Flex, Group, MultiSelect, MultiSelectProps, SelectItem, SpacingValue, SystemProp, Text } from '@mantine/core';
 import React, { CSSProperties, forwardRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import CloseWithTooltip from '../buttons/CloseWithTooltip';
@@ -28,20 +28,24 @@ interface ItemProps extends React.ComponentPropsWithoutRef<'div'> {
 }
 
 const DeletableItem = forwardRef<HTMLDivElement, ItemProps>(
-    ({ label, value, onTrashClick, ...others }, ref) => (
+    ({ label, value, onTrashClick, ...others }, ref) => {
-        <div {...others} ref={ref}>
+        const handleTrashClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-            <Flex justify='space-between'>
-                <Text>{label}</Text>
-                <IconTrash
-                    onMouseDown={(e) => {
             e.preventDefault();
             e.stopPropagation();
             if (onTrashClick) onTrashClick(value);
-                    }}
+        }
-                />
+        return (
+            <div {...others} ref={ref}>
+                <Flex justify='space-between'>
+                    <Text>{label}</Text>
+                    <ActionIcon onMouseDown={handleTrashClick}>
+                        <IconTrash color='#dc4e41'/>
+                    </ActionIcon>
                 </Flex>
             </div>
         )
+
+    }
 );
 
 const CreatableMultiSelect: React.FC<CreatableMultiSelectProps> = ({

src/shared/components/filters/UserTagsFilter.tsx

@@ -123,13 +123,11 @@ const UserTagsFilter: React.FC<UserTagsFilterProps> = ({
         if (typeof query === 'string') {
             if (!validateNewTag(query)) return undefined
             saveNewTag(query)
-            // return query
         }
         else if (parseQuery.success) {
             const parsedQuery = parseQuery.data as SelectItem
             if (!validateNewTag(parsedQuery.value)) return undefined
             saveNewTag(parsedQuery.value)
-            // return parsedQuery
         }
     }
 

src/shared/stores/sidebars.store.ts

@@ -1,47 +0,0 @@
-import { action, makeAutoObservable } from "mobx"
-
-
-// TODO Delete
-export class SideBarsStore {
-
-    // private _rightVisible: boolean = true
-    // public get rightVisible(): boolean {
-    //     return this._rightVisible
-    // }
-    // public set rightVisible(visible: boolean) {
-    //     this._rightVisible = visible
-    // }
-    // private _leftVisible: boolean = true
-    // public get leftVisible(): boolean {
-    //     return this._leftVisible
-    // }
-    // public set leftVisible(visible: boolean) {
-    //     this._leftVisible = visible
-    // }
-
-    // private _leftChildren: React.ReactNode = null
-    // public get leftChildren(): React.ReactNode {
-    //     return this._leftChildren
-    // }
-
-
-    // private _rightChildren: React.ReactNode = null
-    // public get rightChildren(): React.ReactNode {
-    //     return this._rightChildren
-    // }
-
-    // constructor () {
-    //     makeAutoObservable(this, {
-    //         setRightChildren: action,
-    //         setLeftChildren: action,
-    //     })
-    // }
-
-    // setRightChildren = (value: React.ReactNode) => {
-    //     this._rightChildren = value
-    // }
-
-    // setLeftChildren = (value: React.ReactNode) => {
-    //     this._leftChildren = value
-    // }
-}