fix(my-joy-beta): display tags number when expanded
This commit is contained in:
parent
2e36b850ca
commit
60128aef4a
Binary file not shown.
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 36 KiB |
Binary file not shown.
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 29 KiB |
Binary file not shown.
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 29 KiB |
@ -394,6 +394,42 @@ Array [
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
.c1 {
|
||||
color: rgba(73,73,73,1);
|
||||
font-weight: normal;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c1 + p,
|
||||
.c1 + small,
|
||||
.c1 + h1,
|
||||
.c1 + h2,
|
||||
.c1 + label,
|
||||
.c1 + h3,
|
||||
.c1 + h4,
|
||||
.c1 + h5,
|
||||
.c1 + div,
|
||||
.c1 + span {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<h3
|
||||
className="c1"
|
||||
>
|
||||
0
|
||||
Tag
|
||||
s
|
||||
</h3>
|
||||
</div>,
|
||||
.c1 {
|
||||
margin: 0;
|
||||
@ -1900,6 +1936,42 @@ Array [
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
.c1 {
|
||||
color: rgba(73,73,73,1);
|
||||
font-weight: normal;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c1 + p,
|
||||
.c1 + small,
|
||||
.c1 + h1,
|
||||
.c1 + h2,
|
||||
.c1 + label,
|
||||
.c1 + h3,
|
||||
.c1 + h4,
|
||||
.c1 + h5,
|
||||
.c1 + div,
|
||||
.c1 + span {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<h3
|
||||
className="c1"
|
||||
>
|
||||
0
|
||||
Tag
|
||||
s
|
||||
</h3>
|
||||
</div>,
|
||||
.c1 {
|
||||
margin: 0;
|
||||
@ -2539,6 +2611,42 @@ Array [
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
.c1 {
|
||||
color: rgba(73,73,73,1);
|
||||
font-weight: normal;
|
||||
line-height: 1.625rem;
|
||||
font-size: 1.3125rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c1 + p,
|
||||
.c1 + small,
|
||||
.c1 + h1,
|
||||
.c1 + h2,
|
||||
.c1 + label,
|
||||
.c1 + h3,
|
||||
.c1 + h4,
|
||||
.c1 + h5,
|
||||
.c1 + div,
|
||||
.c1 + span {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<h3
|
||||
className="c1"
|
||||
>
|
||||
0
|
||||
Tag
|
||||
s
|
||||
</h3>
|
||||
</div>,
|
||||
.c1 {
|
||||
margin: 0;
|
||||
|
@ -34,54 +34,48 @@ export const Tags = ({
|
||||
handleEdit
|
||||
}) => (
|
||||
<Fragment>
|
||||
<Title
|
||||
id={step}
|
||||
onClick={!expanded && !proceeded && handleEdit}
|
||||
icon={<TagsIcon />}
|
||||
>
|
||||
<Title id={step} onClick={!expanded && !proceeded && handleEdit} icon={<TagsIcon />}>
|
||||
Tags
|
||||
</Title>
|
||||
{expanded ? (
|
||||
<Description>
|
||||
Tags can be used to identify your instances, group multiple instances
|
||||
together, define firewall and affinity rules, and more.{' '}
|
||||
Tags can be used to identify your instances, group multiple instances together, define
|
||||
firewall and affinity rules, and more.{' '}
|
||||
<a
|
||||
target="__blank"
|
||||
href="https://docs.joyent.com/public-cloud/tags-metadata/tags"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
rel="noopener noreferrer">
|
||||
Read the docs
|
||||
</a>
|
||||
</Description>
|
||||
) : null}
|
||||
{proceeded ? (
|
||||
<Margin bottom={4}>
|
||||
<H3>
|
||||
{tags.length} Tag{tags.length === 1 ? '' : 's'}
|
||||
</H3>
|
||||
</Margin>
|
||||
) : null}
|
||||
{proceeded || expanded ? (
|
||||
<Margin bottom={4}>
|
||||
<TagList>
|
||||
{tags.map(({ name, value }, index) => (
|
||||
<Tag
|
||||
key={index}
|
||||
name={name}
|
||||
value={value}
|
||||
onRemoveClick={expanded && (() => handleRemoveTag(index))}
|
||||
/>
|
||||
))}
|
||||
</TagList>
|
||||
</Margin>
|
||||
<Fragment>
|
||||
<Margin bottom={4}>
|
||||
<H3>
|
||||
{tags.length} Tag{tags.length === 1 ? '' : 's'}
|
||||
</H3>
|
||||
</Margin>
|
||||
<Margin bottom={4}>
|
||||
<TagList>
|
||||
{tags.map(({ name, value }, index) => (
|
||||
<Tag
|
||||
key={index}
|
||||
name={name}
|
||||
value={value}
|
||||
onRemoveClick={expanded && (() => handleRemoveTag(index))}
|
||||
/>
|
||||
))}
|
||||
</TagList>
|
||||
</Margin>
|
||||
</Fragment>
|
||||
) : null}
|
||||
{expanded && addOpen ? (
|
||||
<ReduxForm
|
||||
form={FORM_NAME_CREATE}
|
||||
destroyOnUnmount={false}
|
||||
forceUnregisterOnUnmount={true}
|
||||
onSubmit={handleAddTag}
|
||||
>
|
||||
onSubmit={handleAddTag}>
|
||||
{props => (
|
||||
<KeyValue
|
||||
{...props}
|
||||
@ -97,11 +91,7 @@ export const Tags = ({
|
||||
<div>
|
||||
{expanded ? (
|
||||
<Margin bottom={4}>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => handleChangeAddOpen(true)}
|
||||
secondary
|
||||
>
|
||||
<Button type="button" onClick={() => handleChangeAddOpen(true)} secondary>
|
||||
Add Tag
|
||||
</Button>
|
||||
<Button type="button" onClick={handleNext}>
|
||||
|
Loading…
Reference in New Issue
Block a user