github/drone
5
0
Fork 0
mirror of https://github.com/harness/drone.git synced 2025-05-10 21:44: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 {
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;
}
.pluginCard {
margin: var(--spacing-medium);
padding: var(--spacing-medium) !important;
}
.plugin {
border: 1px solid var(--grey-100);
&:hover {
cursor: pointer;
}
@ -64,3 +69,7 @@
height: calc(100% - var(--spacing-large) - var(--spacing-xxlarge));
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 indent: string
export declare const plugin: string
export declare const pluginCard: string
export declare const pluginCategory: string
export declare const pluginDesc: string
export declare const pluginDetailsPanel: string
export declare const pluginIcon: string

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

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