opensource
/
dify
mirror of https://github.com/langgenius/dify.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add double-arrow icon swap on featured tools “Show more” hover

This commit is contained in:
lyzno1 2025-10-22 14:47:19 +08:00
parent 45b221659b
commit 50bbac5973
No known key found for this signature in database
5 changed files with 56 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/app/components/base/icons/assets/vender/solid/arrows/arrow-down-double-line.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.00001 12.7761L12.1381 8.63804L11.1953 7.69524L8.00001 10.8905L4.80475 7.69524L3.86194 8.63804L8.00001 12.7761ZM8.00001 9.00951L12.1381 4.87146L11.1953 3.92865L8.00001 7.12391L4.80475 3.92865L3.86194 4.87146L8.00001 9.00951Z" fill="#676F83"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 357 B

26
web/app/components/base/icons/src/vender/solid/arrows/ArrowDownDoubleLine.json Normal file
View File

@ -0,0 +1,26 @@
{
"icon": {
"type": "element",
"isRootNode": true,
"name": "svg",
"attributes": {
"width": "16",
"height": "16",
"viewBox": "0 0 16 16",
"fill": "none",
"xmlns": "http://www.w3.org/2000/svg"
},
"children": [
{
"type": "element",
"name": "path",
"attributes": {
"d": "M8.00001 12.7761L12.1381 8.63804L11.1953 7.69524L8.00001 10.8905L4.80475 7.69524L3.86194 8.63804L8.00001 12.7761ZM8.00001 9.00951L12.1381 4.87146L11.1953 3.92865L8.00001 7.12391L4.80475 3.92865L3.86194 4.87146L8.00001 9.00951Z",
"fill": "currentColor"
},
"children": []
}
]
},
"name": "ArrowDownDoubleLine"
}

20
web/app/components/base/icons/src/vender/solid/arrows/ArrowDownDoubleLine.tsx Normal file
View File

@ -0,0 +1,20 @@
// GENERATE BY script
// DON NOT EDIT IT MANUALLY
import * as React from 'react'
import data from './ArrowDownDoubleLine.json'
import IconBase from '@/app/components/base/icons/IconBase'
import type { IconData } from '@/app/components/base/icons/IconBase'
const Icon = (
{
ref,
...props
}: React.SVGProps<SVGSVGElement> & {
ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>;
},
) => <IconBase {...props} ref={ref} data={data as IconData} />
Icon.displayName = 'ArrowDownDoubleLine'
export default Icon

1
web/app/components/base/icons/src/vender/solid/arrows/index.ts
View File

@ -1,3 +1,4 @@
export { default as ArrowDownDoubleLine } from './ArrowDownDoubleLine'
export { default as ArrowDownRoundFill } from './ArrowDownRoundFill'
export { default as ChevronDown } from './ChevronDown'
export { default as HighPriority } from './HighPriority'

11
web/app/components/workflow/block-selector/featured-tools.tsx
View File

@ -17,7 +17,7 @@ import { ViewType } from './view-type-select'
import Tools from './tools'
import { formatNumber } from '@/utils/format'
import Action from '@/app/components/workflow/block-selector/market-place-plugin/action'
import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/arrows'
import { ArrowDownDoubleLine, ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/arrows'
const MAX_RECOMMENDED_COUNT = 15
const INITIAL_VISIBLE_COUNT = 5
@ -170,16 +170,17 @@ const FeaturedTools = ({
{!isLoading && visiblePlugins.length > 0 && showMore && (
<div
className='mt-1 flex cursor-pointer items-center gap-x-2 py-1 pl-3 pr-2 text-text-tertiary hover:text-text-secondary'
className='group mt-1 flex cursor-pointer items-center gap-x-2 rounded-lg py-1 pl-3 pr-2 text-text-tertiary transition-colors hover:bg-state-base-hover hover:text-text-secondary'
onClick={() => {
setVisibleCount(count => Math.min(count + INITIAL_VISIBLE_COUNT, MAX_RECOMMENDED_COUNT, plugins.length))
}}
>
<div className='px-1'>
<RiMoreLine className='size-4' />
<div className='flex items-center px-1 text-text-tertiary transition-colors group-hover:text-text-secondary'>
<RiMoreLine className='size-4 group-hover:hidden' />
<ArrowDownDoubleLine className='hidden size-4 group-hover:block' />
</div>
<div className='system-xs-regular'>
{t('common.operation.more')}
{t('workflow.tabs.showMoreFeatured')}
</div>
</div>
)}