Skip to content

Commit ecde6cf

Browse files
F-X64major
F-X64
authored and
major
committed
Add proper styling to drawer
1 parent 1962b49 commit ecde6cf

File tree

2 files changed

+121
-81
lines changed

2 files changed

+121
-81
lines changed

‎src/app/components/DetailsDrawer.tsx

+25-7
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,11 @@ import {
44
DrawerHead,
55
DrawerActions,
66
DrawerCloseButton,
7+
Title,
8+
Flex,
9+
FlexItem,
10+
Stack,
11+
StackItem
712
} from '@patternfly/react-core';
813
import { MouseEventHandler } from 'react';
914
import { DetailsView } from './DetailsView';
@@ -16,14 +21,27 @@ export const DetailsDrawer: React.FunctionComponent<{
1621
}> = ({ onCloseClick, isExpanded, drawerRef, details }) => {
1722
return (
1823
<React.Fragment>
19-
<DrawerPanelContent>
24+
<DrawerPanelContent minSize='33%'>
2025
<DrawerHead>
21-
<span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
22-
<DetailsView details={details} />
23-
</span>
24-
<DrawerActions>
25-
<DrawerCloseButton onClick={onCloseClick} />
26-
</DrawerActions>
26+
<Stack hasGutter>
27+
<StackItem>
28+
<Flex alignItems={{
29+
default: 'alignItemsCenter'
30+
}}>
31+
<FlexItem>
32+
<Title headingLevel='h1'>
33+
{details['name']}
34+
</Title>
35+
</FlexItem>
36+
<FlexItem align={{ default: 'alignRight' }}>
37+
<DrawerCloseButton onClick={onCloseClick} />
38+
</FlexItem>
39+
</Flex>
40+
</StackItem>
41+
<StackItem tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
42+
<DetailsView details={details} />
43+
</StackItem>
44+
</Stack>
2745
</DrawerHead>
2846
</DrawerPanelContent>
2947
</React.Fragment>

‎src/app/components/DetailsView.tsx

+96-74
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,20 @@ import {
55
CodeBlock,
66
CodeBlockAction,
77
CodeBlockCode,
8+
DescriptionList,
9+
DescriptionListGroup,
10+
DescriptionListTerm,
11+
DescriptionListDescription,
812
TextContent,
913
TextList,
1014
TextListItem,
1115
Tabs,
1216
Tab,
1317
TabTitleText,
1418
Truncate,
15-
Title
19+
Title,
20+
Stack,
21+
StackItem
1622
} from '@patternfly/react-core';
1723
import { PlayIcon } from '@patternfly/react-icons';
1824

@@ -93,12 +99,12 @@ export const DetailsView: React.FunctionComponent<{ details: object }> = ({ deta
9399
break;
94100

95101
case 'google':
96-
cliCommand = 'gcloud beta compute instances create <MachineName>' +
97-
'--machine-typei=e2-medium' +
98-
'--subnet=default' +
99-
`---image="${details['imageId']}"` +
100-
'---boot-disk-device-name=<MachineName>' +
101-
'---project <ProjectName>';
102+
cliCommand = `gcloud beta compute instances create <MachineName> \\
103+
--machine-typei=e2-medium \\
104+
--subnet=default \\
105+
---image="${details['imageId']}" \\
106+
---boot-disk-device-name=<MachineName> \\
107+
---project <ProjectName>`;
102108
shellUrl = 'https://shell.cloud.google.com/?show=terminal';
103109
displayItems.push({
104110
Title: 'Image ID',
@@ -121,76 +127,92 @@ export const DetailsView: React.FunctionComponent<{ details: object }> = ({ deta
121127
role="region"
122128
>
123129
<Tab eventKey={0} title={<TabTitleText>Image Details</TabTitleText>} aria-label="Show RHEL cloud image details">
124-
<Title headingLevel='h1'>
125-
{details['name']}
126-
</Title>
127-
<TextContent id="test2" className="pf-u-py-xl">
128-
<TextList component="dl">
129-
{displayItems.map((item, index) => {
130-
return (
131-
<div key={`menu-details-${item.Title}-${index}`}>
132-
<TextListItem key={`menu-title-${item.Title}-${index}`} component="dt">
133-
{item.Title}
134-
</TextListItem>
135-
<TextListItem key={`menu-data-${item.Title}-${index}`} component="dd">
136-
<Truncate
137-
content={item.Data}
138-
position={'start'}
139-
/>
140-
</TextListItem>
141-
</div>
142-
);
143-
})}
144-
</TextList>
145-
{details['provider'] != 'azure' && (
146-
<Button component="a" href={details['selflink']} target="_blank" rel="noreferrer" variant="danger">
147-
Launch now
148-
</Button>
149-
)}
150-
</TextContent>
130+
<Stack hasGutter>
131+
<StackItem>
132+
<Title headingLevel='h3'>
133+
{'Image Details'}
134+
</Title>
135+
</StackItem>
136+
<StackItem>
137+
<DescriptionList columnModifier={{
138+
sm: '1Col',
139+
lg: '2Col',
140+
xl: '3Col'
141+
}}>
142+
{displayItems.map((item, index) => {
143+
return (
144+
145+
<DescriptionListGroup key={`description-list-group-${item.Title}-${index}`}>
146+
<DescriptionListTerm key={`description-list-term-${item.Title}-${index}`}>{item.Title}</DescriptionListTerm>
147+
<DescriptionListDescription>{item.Data}</DescriptionListDescription>
148+
</DescriptionListGroup>
149+
);
150+
})}
151+
</DescriptionList>
152+
</StackItem>
153+
<StackItem>
154+
{details['provider'] != 'azure' && (
155+
<Button component="a" href={details['selflink']} target="_blank" rel="noreferrer" style={{
156+
color: 'pf-color-blue-400'
157+
}} isLarge>
158+
Launch now
159+
</Button>
160+
)}
161+
</StackItem>
162+
</Stack>
151163
</Tab>
152-
<Tab eventKey={1} title={<TabTitleText>Launch from CLI</TabTitleText>} aria-label="Show RHEL cloud image details">
153-
<CodeBlock
154-
actions={
155-
<>
156-
<CodeBlockAction>
157-
<ClipboardCopyButton
158-
id="basic-copy-button"
159-
textId="code-content"
160-
aria-label="Copy to clipboard"
161-
onClick={() => {
162-
navigator.clipboard.writeText(cliCommand);
163-
setCopied(true)
164-
}}
165-
exitDelay={600}
166-
maxWidth="110px"
167-
variant="plain"
168-
>
169-
{copied ? 'Successfully copied to clipboard!' : 'Copy to clipboard'}
170-
</ClipboardCopyButton>
171-
</CodeBlockAction>
172-
<CodeBlockAction>
173-
<Button
174-
variant="plain"
175-
aria-label="Play icon"
176-
component="a"
177-
href={shellUrl}
178-
target="_blank"
179-
rel="noreferrer"
180-
>
181-
<PlayIcon />
182-
</Button>
183-
</CodeBlockAction>
184-
</>
185-
}
186-
>
187-
<CodeBlockCode id="code-content">
188-
<TextContent>{cliCommand}</TextContent>
189-
</CodeBlockCode>
190-
</CodeBlock>
164+
165+
<Tab eventKey={1} title={<TabTitleText>Launch from CLI</TabTitleText>} aria-label={`Run RHEL cloud image on ${details['provider']}`}>
166+
<Stack hasGutter>
167+
<StackItem>
168+
<Title headingLevel='h3'>
169+
{'Example CLI Command'}
170+
</Title>
171+
</StackItem>
172+
<StackItem>
173+
<CodeBlock
174+
actions={
175+
<>
176+
<CodeBlockAction>
177+
<ClipboardCopyButton
178+
id="basic-copy-button"
179+
textId="code-content"
180+
aria-label="Copy to clipboard"
181+
onClick={() => {
182+
navigator.clipboard.writeText(cliCommand);
183+
setCopied(true)
184+
}}
185+
exitDelay={600}
186+
maxWidth="110px"
187+
variant="plain"
188+
>
189+
{copied ? 'Successfully copied to clipboard!' : 'Copy to clipboard'}
190+
</ClipboardCopyButton>
191+
</CodeBlockAction>
192+
<CodeBlockAction>
193+
<Button
194+
variant="plain"
195+
aria-label="Play icon"
196+
component="a"
197+
href={shellUrl}
198+
target="_blank"
199+
rel="noreferrer"
200+
>
201+
<PlayIcon />
202+
</Button>
203+
</CodeBlockAction>
204+
</>
205+
}
206+
>
207+
<CodeBlockCode id="code-content">
208+
<TextContent>{cliCommand}</TextContent>
209+
</CodeBlockCode>
210+
</CodeBlock>
211+
</StackItem>
212+
</Stack>
191213
</Tab>
192214
</Tabs>
193-
</React.Fragment>
215+
</React.Fragment >
194216
);
195217

196218
}

0 commit comments

Comments
 (0)