github/drone
5
0
Fork 0
mirror of https://github.com/harness/drone.git synced 2025-05-07 23:19:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: [AH-944]: fix UI flickering if upstream proxy length is big (#3392)

Browse Source 
* feat: [AH-944]: use color from design system
* feat: [AH-944]: fix UI flickering if upstream proxy length is big
* feat: [AH-944]: add ellipsis to upstream proxy name in reorder select
This commit is contained in:
Shivanand Sonnad 2025-02-10 06:25:26 +00:00 committed by Harness
parent 824f72479c
commit cee3efb886
4 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/ar/components/ReorderSelect/ReorderSelect.module.scss
View File

@ -47,7 +47,7 @@
color: var(--black); color: var(--black);
.addBtn { .addBtn {
display: block !important; display: inline-flex !important;
} }
} }
} }
@ -57,5 +57,5 @@
min-height: 20px !important; min-height: 20px !important;
height: 20px !important; height: 20px !important;
display: none !important; display: none !important;
min-width: 10px !important; min-width: 50px !important;
} }

5
web/src/ar/components/ReorderSelect/SelectListMenuItem.tsx
View File

@ -17,6 +17,7 @@
import React from 'react' import React from 'react'
import { Menu } from '@blueprintjs/core' import { Menu } from '@blueprintjs/core'
import { Layout, Text } from '@harnessio/uicore' import { Layout, Text } from '@harnessio/uicore'
import { Color } from '@harnessio/design-system'
import { useStrings } from '@ar/frameworks/strings' import { useStrings } from '@ar/frameworks/strings'
import MenuItemAction from './MenuItemAction' import MenuItemAction from './MenuItemAction'
@ -41,7 +42,9 @@ function SelectListMenuItem(props: SelectListMenuItemProps): JSX.Element {
disabled={disabled} disabled={disabled}
text={ text={
<Layout.Horizontal flex={{ justifyContent: 'space-between', alignItems: 'center' }}> <Layout.Horizontal flex={{ justifyContent: 'space-between', alignItems: 'center' }}>
<Text color="black">{label ? label : getString('na')}</Text> <Text color={Color.GREY_900} lineClamp={1}>
{label ? label : getString('na')}
</Text>
{!disabled && <MenuItemAction rightIcon="main-chevron-right" text={getString('add')} />} {!disabled && <MenuItemAction rightIcon="main-chevron-right" text={getString('add')} />}
</Layout.Horizontal> </Layout.Horizontal>
} }

5
web/src/ar/components/ReorderSelect/SelectedListMenuItem.tsx
View File

@ -17,6 +17,7 @@
import React from 'react' import React from 'react'
import { Expander, Menu } from '@blueprintjs/core' import { Expander, Menu } from '@blueprintjs/core'
import { Layout, Text } from '@harnessio/uicore' import { Layout, Text } from '@harnessio/uicore'
import { Color } from '@harnessio/design-system'
import { Icon } from '@harnessio/icons' import { Icon } from '@harnessio/icons'
import { useStrings } from '@ar/frameworks/strings' import { useStrings } from '@ar/frameworks/strings'
@ -49,7 +50,9 @@ function SelectedListMenuItem(props: SelectedListMenuItemProps): JSX.Element {
text={ text={
<Layout.Horizontal spacing="small" flex={{ justifyContent: 'flex-start', alignItems: 'center' }}> <Layout.Horizontal spacing="small" flex={{ justifyContent: 'flex-start', alignItems: 'center' }}>
{!disabled && <Icon name="drag-handle-vertical" size={12} />} {!disabled && <Icon name="drag-handle-vertical" size={12} />}
<Text color="black">{label ? label : getString('na')}</Text> <Text lineClamp={1} color={Color.GREY_900}>
{label ? label : getString('na')}
</Text>
<Expander /> <Expander />
{!disabled && ( {!disabled && (
<MenuItemAction <MenuItemAction

2
web/src/ar/pages/repository-details/components/UpstreamProxiesSelect/index.tsx
View File

@ -134,7 +134,7 @@ function UpstreamProxiesSelect(props: UpstreamProxiesSelectProps): JSX.Element {
} }
return ( return (
<Container> <Container width="100%">
<ReorderSelect <ReorderSelect
className={className} className={className}
items={items} items={items}