chore(ui): dataset-tags (#2415)

This commit is contained in:
heheer
2024-08-16 18:32:20 +08:00
committed by GitHub
parent 9b74437417
commit 0719f7bd4a
15 changed files with 78 additions and 21 deletions

View File

@@ -167,7 +167,10 @@ const AppCard = () => {
<ModalBody>
<Box mb={3}>{appT('transition_to_workflow_create_new_tip')}</Box>
<HStack cursor={'pointer'} onClick={() => setTransitionCreateNew((state) => !state)}>
<Checkbox isChecked={transitionCreateNew} />
<Checkbox
isChecked={transitionCreateNew}
icon={<MyIcon name={'common/check'} w={'12px'} />}
/>
<Box>{appT('transition_to_workflow_create_new_placeholder')}</Box>
</HStack>
</ModalBody>

View File

@@ -96,6 +96,10 @@ const HeaderTagPopOver = () => {
overflow={'hidden'}
h={['28px', '36px']}
fontSize={'sm'}
_hover={{
boxShadow: '0px 0px 0px 2.4px rgba(51, 112, 255, 0.15)',
borderColor: 'primary.300'
}}
>
<Flex flex={'1 0 0'}>
{t('dataset:tag.tags')}
@@ -158,9 +162,12 @@ const HeaderTagPopOver = () => {
py={1}
my={1}
cursor={'pointer'}
bg={checked ? '#1118240D' : 'transparent'}
color={checked ? 'primary.700' : 'myGray.600'}
_hover={{ bg: '#1118240D', color: 'primary.700' }}
_hover={{
bg: '#1118240D',
color: 'primary.700',
...(checked ? {} : { svg: { color: '#F3F3F4' } })
}}
borderRadius={'xs'}
key={item._id}
onClick={(e) => {
@@ -174,6 +181,7 @@ const HeaderTagPopOver = () => {
checkTags(item);
}}
size={'md'}
icon={<MyIcon name={'common/check'} w={'12px'} />}
/>
<Box ml={2}>{item.tag}</Box>
</Flex>
@@ -186,6 +194,7 @@ const HeaderTagPopOver = () => {
fontSize={'sm'}
_hover={{ bg: '#1118240D', color: 'primary.700' }}
borderRadius={'none'}
borderBottomLeftRadius={'md'}
variant={'unstyled'}
onClick={() => {
setCheckedTags([]);
@@ -202,6 +211,7 @@ const HeaderTagPopOver = () => {
fontSize={'sm'}
_hover={{ bg: '#1118240D', color: 'primary.700' }}
borderRadius={'none'}
borderBottomRightRadius={'md'}
variant={'unstyled'}
onClick={() => {
onOpenTagManageModal();

View File

@@ -305,7 +305,7 @@ const TagManageModal = ({ onClose }: { onClose: () => void }) => {
}}
cursor={'pointer'}
>
<MyIcon name="common/addLight" w={4} />
<MyIcon name="common/add2" w={4} />
</Box>
<Box
className="icon-box"
@@ -487,8 +487,14 @@ const AddTagToCollections = ({
<Flex
px={2}
py={1}
mb={2}
flex={'1'}
_hover={{ bg: 'myGray.100' }}
_hover={{
bg: 'myGray.100',
...(!selectedCollections.includes(collection.id)
? { svg: { color: 'myGray.100' } }
: {})
}}
alignItems={'center'}
borderRadius={'4px'}
key={collection.id}
@@ -506,6 +512,7 @@ const AddTagToCollections = ({
<Checkbox
size={'md'}
mr={2}
icon={<MyIcon name="common/check" w={'12px'} />}
onChange={() => {
setSelectedCollections((prev) => {
if (prev.includes(collection.id)) {
@@ -517,8 +524,8 @@ const AddTagToCollections = ({
}}
isChecked={selectedCollections.includes(collection.id)}
/>
<MyIcon name={collection.icon as any} w={'16px'} mr={2} />
<Box fontSize={'14px'} borderRadius={'6px'}>
<MyIcon name={collection.icon as any} w={'20px'} mr={2} />
<Box fontSize={'14px'} borderRadius={'6px'} color={'myGray.900'}>
{collection.name}
</Box>
</Flex>

View File

@@ -155,9 +155,10 @@ const TagsPopOver = ({
<Box
key={index}
h={5}
mr={1}
mr={2}
px={2}
fontSize={'11px'}
fontWeight={'500'}
bg={'#F0FBFF'}
color={'#0884DD'}
borderRadius={'4px'}
@@ -213,6 +214,7 @@ const TagsPopOver = ({
borderRadius={'xs'}
onClick={() => {
onCreateCollectionTag(searchTag);
// setCheckedTags([...checkedTags, item]);
}}
>
<MyIcon name={'common/addLight'} w={'14px'} />
@@ -228,13 +230,16 @@ const TagsPopOver = ({
alignItems={'center'}
fontSize={'xs'}
px={1}
py={0.5}
my={0.5}
py={1}
my={1}
key={item._id}
cursor={'pointer'}
bg={tagsList.includes(item.tag) ? '#1118240D' : 'transparent'}
color={tagsList.includes(item.tag) ? '#2B5FD9' : 'myGray.600'}
_hover={{ bg: '#1118240D', color: '#2B5FD9' }}
_hover={{
bg: '#1118240D',
color: '#2B5FD9',
...(tagsList.includes(item.tag) ? {} : { svg: { color: '#F3F3F4' } })
}}
borderRadius={'xs'}
onClick={(e) => {
e.preventDefault();
@@ -254,8 +259,9 @@ const TagsPopOver = ({
setCheckedTags(checkedTags.filter((t) => t._id !== item._id));
}
}}
icon={<MyIcon name={'common/check'} w={'12px'} />}
/>
<Box ml={1}>{item.tag}</Box>
<Box ml={2}>{item.tag}</Box>
</Flex>
);
})}

View File

@@ -237,12 +237,12 @@ const CollectionCard = () => {
>
<Td minW={'150px'} maxW={['200px', '300px']} draggable py={2}>
<Flex alignItems={'center'}>
<MyIcon name={collection.icon as any} w={'16px'} mr={2} />
<MyIcon name={collection.icon as any} w={'18px'} mr={2} />
<MyTooltip
label={t('common:common.folder.Drag Tip')}
shouldWrapChildren={false}
>
<Box color={'myGray.900'} className="textEllipsis">
<Box color={'myGray.900'} fontWeight={'500'} className="textEllipsis">
{collection.name}
</Box>
</MyTooltip>