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

aligning UX

Browse Source
This commit is contained in:
Vardan Bansal 2023-09-20 12:48:28 -07:00
parent 0fda028070
commit 9a23a06e84
3 changed files with 56 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/src/components/PluginsPanel/PluginsPanel.module.scss
View File

@ -4,12 +4,17 @@
} }
.pluginIcon { .pluginIcon {
background: var(--teal-200) !important; padding: var(--spacing-small) var(--spacing-3) var(--spacing-small) var(--spacing-3) !important;
background: var(--grey-100) !important;
border-radius: 5px; border-radius: 5px;
} }
.pluginCard {
margin: var(--spacing-medium);
padding: var(--spacing-medium) !important;
}
.plugin { .plugin {
border: 1px solid var(--grey-100);
&:hover { &:hover {
cursor: pointer; cursor: pointer;
} }
@ -64,3 +69,7 @@
height: calc(100% - var(--spacing-large) - var(--spacing-xxlarge)); height: calc(100% - var(--spacing-large) - var(--spacing-xxlarge));
margin: var(--spacing-large) var(--spacing-xxlarge) var(--spacing-xxlarge) var(--spacing-xxlarge) !important; margin: var(--spacing-large) var(--spacing-xxlarge) var(--spacing-xxlarge) var(--spacing-xxlarge) !important;
} }
.pluginCategory {
font-weight: 600 !important;
}

2
web/src/components/PluginsPanel/PluginsPanel.module.scss.d.ts vendored
View File

@ -6,6 +6,8 @@ export declare const form: string
export declare const formFields: string export declare const formFields: string
export declare const indent: string export declare const indent: string
export declare const plugin: string export declare const plugin: string
export declare const pluginCard: string
export declare const pluginCategory: string
export declare const pluginDesc: string export declare const pluginDesc: string
export declare const pluginDetailsPanel: string export declare const pluginDetailsPanel: string
export declare const pluginIcon: string export declare const pluginIcon: string

67
web/src/components/PluginsPanel/PluginsPanel.tsx
View File

@ -9,6 +9,7 @@ import {
Accordion, Accordion,
Button, Button,
ButtonVariation, ButtonVariation,
Card,
Container, Container,
ExpandingSearchInput, ExpandingSearchInput,
FormInput, FormInput,
@ -140,36 +141,54 @@ export const PluginsPanel = ({ onPluginAddUpdate }: PluginsPanelInterface): JSX.
} }
}, [query]) }, [query])
const handlePluginCategoryClick = useCallback((selectedCategory: PluginCategory) => {
setCategory(selectedCategory)
if (selectedCategory === PluginCategory.Drone) {
setPanelView(PluginPanelView.Listing)
} else if (selectedCategory === PluginCategory.Harness) {
setPlugin(RunStep)
setPanelView(PluginPanelView.Configuration)
}
}, [])
const renderPluginCategories = (): JSX.Element => { const renderPluginCategories = (): JSX.Element => {
return ( return (
<> <>
{PluginCategories.map((item: PluginCategoryInterface) => { {PluginCategories.map((item: PluginCategoryInterface) => {
const { name, category: pluginCategory, description, icon } = item const { name, category: pluginCategory, description, icon } = item
return ( return (
<Layout.Horizontal <Card className={css.pluginCard}>
onClick={() => { <Layout.Horizontal flex={{ justifyContent: 'space-between' }}>
setCategory(pluginCategory) <Layout.Horizontal
if (pluginCategory === PluginCategory.Drone) { onClick={() => handlePluginCategoryClick(pluginCategory)}
setPanelView(PluginPanelView.Listing) key={pluginCategory}
} else if (pluginCategory === PluginCategory.Harness) { flex={{ justifyContent: 'flex-start' }}
setPlugin(RunStep) className={css.plugin}>
setPanelView(PluginPanelView.Configuration) <Container className={css.pluginIcon}>
} <Icon name={icon} />
}} </Container>
key={pluginCategory} <Layout.Vertical padding={{ left: 'medium' }} spacing="xsmall">
padding={{ left: 'medium', right: 'medium', top: 'medium', bottom: 'medium' }} <Text
flex={{ justifyContent: 'flex-start' }} color={Color.GREY_900}
className={css.plugin}> className={css.pluginCategory}
<Container padding="small" className={css.pluginIcon}> font={{ variation: FontVariation.BODY2_SEMI }}>
<Icon name={icon} /> {name}
</Container> </Text>
<Layout.Vertical padding={{ left: 'small' }}> <Text color={Color.GREY_500} font={{ variation: FontVariation.SMALL }}>
<Text color={Color.PRIMARY_7} font={{ variation: FontVariation.BODY2 }}> {description}
{name} </Text>
</Text> </Layout.Vertical>
<Text font={{ variation: FontVariation.SMALL }}>{description}</Text> </Layout.Horizontal>
</Layout.Vertical> <Container>
</Layout.Horizontal> <Icon
name="arrow-right"
size={24}
onClick={() => handlePluginCategoryClick(pluginCategory)}
className={css.plugin}
/>
</Container>
</Layout.Horizontal>
</Card>
) )
})} })}
</> </>