refactoring
fix action icon styles version up
This commit is contained in:
NlightN22
parent
14df894b34
commit
8cad8721fd
@ -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
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "multi-frigate",
|
||||
"version": "0.1.6",
|
||||
"version": "0.1.7",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@cycjimmy/jsmpeg-player": "^6.0.5",
|
||||
|
||||
11
src/App.tsx
11
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],
|
||||
},
|
||||
},
|
||||
}),
|
||||
}
|
||||
|
||||
}
|
||||
}}
|
||||
>
|
||||
|
||||
@ -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)
|
||||
@ -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) => (
|
||||
<div {...others} ref={ref}>
|
||||
<Flex justify='space-between'>
|
||||
<Text>{label}</Text>
|
||||
<IconTrash
|
||||
onMouseDown={(e) => {
|
||||
({ label, value, onTrashClick, ...others }, ref) => {
|
||||
const handleTrashClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
|
||||
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> = ({
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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
|
||||
// }
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user