Skip to content

Commit 66096af

Browse files
pd-redispd-redis
committed
fixing styles for InlineItemEditor.tsx
1 parent 33d0b77 commit 66096af

File tree

3 files changed

+173
-23
lines changed

3 files changed

+173
-23
lines changed

‎redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.styles.tsx

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
import React from 'react'
2+
import styled, { css } from 'styled-components'
3+
import { Row } from 'uiSrc/components/base/layout/flex'
4+
import { Theme } from 'uiSrc/components/base/theme/types'
5+
import { Props } from 'uiSrc/components/inline-item-editor/InlineItemEditor'
6+
import { IconButton } from 'uiSrc/components/base/forms/buttons'
7+
import { CancelSlimIcon, CheckThinIcon } from 'uiSrc/components/base/icons'
8+
9+
interface ContainerProps {
10+
className?: string
11+
children?: React.ReactNode
12+
}
13+
14+
const RefStyledContainer = React.forwardRef(
15+
(
16+
{ className, children }: ContainerProps,
17+
ref?: React.Ref<HTMLDivElement>,
18+
) => (
19+
<div className={className} ref={ref}>
20+
{children}
21+
</div>
22+
),
23+
)
24+
25+
export const StyledContainer = styled(RefStyledContainer)`
26+
max-width: 100%;
27+
28+
:global(.euiFormControlLayout) {
29+
max-width: 100% !important;
30+
}
31+
`
32+
33+
export const IIEContainer = React.forwardRef<
34+
HTMLDivElement,
35+
{
36+
children?: React.ReactNode
37+
}
38+
>(({ children, ...rest }, ref) => (
39+
<StyledContainer ref={ref} {...rest}>
40+
{children}
41+
</StyledContainer>
42+
))
43+
44+
type ActionsContainerProps = React.ComponentProps<typeof Row> & {
45+
$position?: Props['controlsPosition']
46+
$design?: Props['controlsDesign']
47+
}
48+
49+
export const DeclineButton = styled(IconButton).attrs({
50+
icon: CancelSlimIcon,
51+
'aria-label': 'Cancel editing',
52+
})`
53+
width: 50%;
54+
height: 100%;
55+
56+
&:hover {
57+
color: ${({ theme }: { theme: Theme }) =>
58+
theme.semantic.color.text.danger500};
59+
}
60+
`
61+
62+
export const ApplyButton = styled(IconButton).attrs({
63+
icon: CheckThinIcon,
64+
color: 'primary',
65+
'aria-label': 'Apply',
66+
})`
67+
height: 100% !important;
68+
width: 100% !important;
69+
70+
&:hover:not([class*='isDisabled']) {
71+
color: ${({ theme }: { theme: Theme }) =>
72+
theme.semantic.color.text.neutral500};
73+
}
74+
`
75+
76+
const positions = {
77+
bottom: css`
78+
top: 100%;
79+
right: 0;
80+
border-radius: 0 0 10px 10px;
81+
box-shadow: 0 3px 3px var(--controlsBoxShadowColor);
82+
`,
83+
top: css`
84+
bottom: 100%;
85+
right: 0;
86+
border-radius: 10px 10px 0 0;
87+
box-shadow: 0 -3px 3px var(--controlsBoxShadowColor);
88+
`,
89+
right: css`
90+
top: 0;
91+
left: 100%;
92+
border-radius: 0 10px 10px 0;
93+
box-shadow: 0 3px 3px var(--controlsBoxShadowColor);
94+
`,
95+
left: css`
96+
top: 0;
97+
right: 100%;
98+
border-radius: 10px 0 0 10px;
99+
box-shadow: 0 3px 3px var(--controlsBoxShadowColor);
100+
`,
101+
inside: css`
102+
top: calc(100% - 35px);
103+
right: 7px;
104+
border-radius: 0 10px 10px 0;
105+
box-shadow: 0 3px 3px var(--controlsBoxShadowColor);
106+
`,
107+
}
108+
109+
const designs = {
110+
default: css``,
111+
separate: css`
112+
border-radius: 0;
113+
box-shadow: none;
114+
background-color: inherit !important;
115+
text-align: right;
116+
width: 60px;
117+
z-index: 4;
118+
119+
.popoverWrapper,
120+
${DeclineButton}, ${ApplyButton} {
121+
margin: 6px 3px;
122+
height: 24px !important;
123+
width: 24px !important;
124+
}
125+
126+
${ApplyButton} {
127+
margin-top: 0;
128+
}
129+
130+
svg {
131+
width: 18px !important;
132+
height: 18px !important;
133+
}
134+
`,
135+
}
136+
137+
export const ActionsContainer = styled(Row)<ActionsContainerProps>`
138+
position: absolute;
139+
background-color: ${({ theme }: { theme: Theme }) =>
140+
theme.semantic.color.background.primary200};
141+
width: 80px;
142+
height: 33px;
143+
padding: ${({ theme }: { theme: Theme }) => theme.core.space.space050};
144+
145+
z-index: 3;
146+
${({ $position }) => positions[$position || 'inside']}
147+
${({ $design }) => designs[$design || 'default']}
148+
149+
.tooltip,
150+
.declineBtn,
151+
.popoverWrapper {
152+
width: 50% !important;
153+
height: 100% !important;
154+
}
155+
`

‎redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React, { ChangeEvent, Ref, useEffect, useRef, useState } from 'react'
2-
import { capitalize } from 'lodash'
32
import cx from 'classnames'
43
import { EuiFieldText } from '@elastic/eui'
54

@@ -9,12 +8,14 @@ import { FlexItem } from 'uiSrc/components/base/layout/flex'
98
import { WindowEvent } from 'uiSrc/components/base/utils/WindowEvent'
109
import { FocusTrap } from 'uiSrc/components/base/utils/FocusTrap'
1110
import { OutsideClickDetector } from 'uiSrc/components/base/utils'
12-
import { CancelSlimIcon, CheckThinIcon } from 'uiSrc/components/base/icons'
13-
import {
14-
DestructiveButton,
15-
IconButton,
16-
} from 'uiSrc/components/base/forms/buttons'
11+
import { DestructiveButton } from 'uiSrc/components/base/forms/buttons'
1712
import { Text } from 'uiSrc/components/base/text'
13+
import {
14+
ActionsContainer,
15+
ApplyButton,
16+
DeclineButton,
17+
IIEContainer,
18+
} from './InlineItemEditor.styles'
1819

1920
import styles from './styles.module.scss'
2021

@@ -176,12 +177,8 @@ const InlineItemEditor = (props: Props) => {
176177
}
177178
data-testid="apply-tooltip"
178179
>
179-
<IconButton
180+
<ApplyButton
180181
size={iconSize ?? 'M'}
181-
icon={CheckThinIcon}
182-
color="primary"
183-
aria-label="Apply"
184-
className={cx(styles.btn, styles.applyBtn)}
185182
disabled={isDisabledApply()}
186183
onClick={handleApplyClick}
187184
data-testid="apply-btn"
@@ -195,7 +192,7 @@ const InlineItemEditor = (props: Props) => {
195192
children
196193
) : (
197194
<OutsideClickDetector onOutsideClick={handleClickOutside}>
198-
<div ref={containerEl} className={styles.container}>
195+
<IIEContainer ref={containerEl}>
199196
<WindowEvent event="keydown" handler={handleOnEsc} />
200197
<FocusTrap disabled={disableFocusTrap}>
201198
<form
@@ -229,20 +226,18 @@ const InlineItemEditor = (props: Props) => {
229226
</>
230227
)}
231228
</FlexItem>
232-
<div
229+
<ActionsContainer
230+
$position={controlsPosition}
231+
$design={controlsDesign}
232+
grow={false}
233233
className={cx(
234234
'inlineItemEditor__controls',
235235
styles.controls,
236-
styles[`controls${capitalize(controlsPosition)}`],
237-
styles[`controls${capitalize(controlsDesign)}`],
238236
controlsClassName,
239237
)}
240238
>
241-
<IconButton
239+
<DeclineButton
242240
size={iconSize ?? 'M'}
243-
icon={CancelSlimIcon}
244-
aria-label="Cancel editing"
245-
className={cx(styles.btn, styles.declineBtn)}
246241
onClick={onDecline}
247242
disabled={isLoading}
248243
data-testid="cancel-btn"
@@ -289,10 +284,10 @@ const InlineItemEditor = (props: Props) => {
289284
</div>
290285
</RiPopover>
291286
)}
292-
</div>
287+
</ActionsContainer>
293288
</form>
294289
</FocusTrap>
295-
</div>
290+
</IIEContainer>
296291
</OutsideClickDetector>
297292
)}
298293
</>

‎redisinsight/ui/src/components/settings-item/SettingItem.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,8 @@ const SettingItem = (props: Props) => {
7474
</FlexItem>
7575

7676
<FlexItem
77-
onMouseEnter={() => setHovering(true)}
78-
onMouseLeave={() => setHovering(false)}
77+
onMouseEnter={() => !isEditing && setHovering(true)}
78+
onMouseLeave={() => !isEditing && setHovering(false)}
7979
onClick={() => setEditing(true)}
8080
style={{ width: '200px' }}
8181
>

0 commit comments

Comments
 (0)