Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
jobily
Questdb
提交
00c4bb38
Q
Questdb
项目概览
jobily
/
Questdb
12 个月 前同步成功
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Q
Questdb
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
00c4bb38
编写于
5月 26, 2020
作者:
M
Méril
提交者:
GitHub
5月 26, 2020
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix(console): simplify DOM structure and CSS for 'i' icon in order to prevent sizing issues (#321)
上级
90f9b45f
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
42 addition
and
38 deletion
+42
-38
ui/src/components/PopperHover/index.tsx
ui/src/components/PopperHover/index.tsx
+25
-27
ui/src/scenes/Schema/Row/index.tsx
ui/src/scenes/Schema/Row/index.tsx
+17
-11
未找到文件。
ui/src/components/PopperHover/index.tsx
浏览文件 @
00c4bb38
...
...
@@ -2,17 +2,11 @@ import type { Placement, Options } from "@popperjs/core"
import
React
,
{
useCallback
,
useEffect
,
useState
}
from
"
react
"
import
ReactDOM
from
"
react-dom
"
import
{
usePopper
}
from
"
react-popper
"
import
styled
from
"
styled-components
"
const
Wrapper
=
styled
.
div
`
display: flex;
align-items: center;
`
type
Props
=
Readonly
<
{
children
:
React
.
ReactNode
placement
:
Placement
modifiers
?
:
Options
[
"
modifiers
"
]
modifiers
:
Options
[
"
modifiers
"
]
trigger
:
React
.
ReactNode
}
>
...
...
@@ -22,11 +16,10 @@ export const PopperHover = ({
placement
,
trigger
,
}:
Props
)
=>
{
const
[
container
]
=
useState
<
Element
>
(
document
.
createElement
(
"
div
"
))
const
[
container
]
=
useState
<
HTML
Element
>
(
document
.
createElement
(
"
div
"
))
const
[
active
,
setActive
]
=
React
.
useState
(
false
)
const
[
triggerElement
,
setTriggerElement
]
=
useState
<
HTMLElement
|
null
>
(
null
)
const
[
popperElement
,
setPopperElement
]
=
useState
<
HTMLElement
|
null
>
(
null
)
const
{
attributes
,
styles
}
=
usePopper
(
triggerElement
,
popperElement
,
{
const
{
attributes
,
styles
}
=
usePopper
(
triggerElement
,
container
,
{
modifiers
:
[
...
modifiers
,
{
...
...
@@ -57,30 +50,35 @@ export const PopperHover = ({
}
},
[])
useEffect
(()
=>
{
const
css
=
Object
.
entries
(
styles
.
popper
).
reduce
(
(
acc
,
[
prop
,
value
])
=>
`
${
acc
}
${
prop
}
:
${
value
}
;`
,
"
z-index: 100;
"
,
)
container
.
setAttribute
(
"
style
"
,
css
)
},
[
styles
.
popper
])
return
(
<>
<
Wrapper
onMouseEnter
=
{
handleMouseEnter
}
onMouseLeave
=
{
handleMouseLeave
}
ref
=
{
setTriggerElement
}
>
{
trigger
}
</
Wrapper
>
{
React
.
isValidElement
(
trigger
)
&&
React
.
cloneElement
(
trigger
,
{
onMouseEnter
:
handleMouseEnter
,
onMouseLeave
:
handleMouseLeave
,
ref
:
setTriggerElement
,
})
}
{
ReactDOM
.
createPortal
(
<
div
ref
=
{
setPopperElement
}
style
=
{
{
...
styles
.
popper
,
zIndex
:
100
}
}
{
...
attributes
.
popper
}
>
{
children
}
</
div
>,
container
,
)
}
{
React
.
isValidElement
(
children
)
&&
ReactDOM
.
createPortal
(
React
.
cloneElement
(
children
,
{
...
attributes
.
popper
,
}),
container
,
)
}
</>
)
}
PopperHover
.
defaultProps
=
{
modifiers
:
[],
placement
:
"
auto
"
,
}
ui/src/scenes/Schema/Row/index.tsx
浏览文件 @
00c4bb38
...
...
@@ -17,6 +17,7 @@ type Props = Readonly<{
}
>
const
Type
=
styled
(
Text
)
`
margin-right: 1rem;
flex: 0;
transition: all 0.2s;
`
...
...
@@ -24,7 +25,7 @@ const Type = styled(Text)`
const
PlusButton
=
styled
(
SecondaryButton
)
`
position: absolute;
right:
${({
tooltip
}:
Pick
<
Props
,
"
tooltip
"
>
)
=>
tooltip
?
"
2.5
rem
"
:
"
1rem
"
}
;
tooltip
?
"
3
rem
"
:
"
1rem
"
}
;
margin-left: 1rem;
opacity: 0;
transition: all 0.2s;
...
...
@@ -34,7 +35,8 @@ const Wrapper = styled.div<Pick<Props, "expanded">>`
position: relative;
display: flex;
flex-direction: column;
padding: 0.5rem 1rem;
padding: 0.5rem 0;
padding-left: 1rem;
transition: all 0.2s;
&:hover
${
/* sc-selector */
PlusButton
}
{
...
...
@@ -63,14 +65,14 @@ const Spacer = styled.span`
`
const
InfoIcon
=
styled
(
Info
)
`
height: 100%;
width: 100%;
padding-left: 1rem;
color:
${
color
(
"
draculaPurple
"
)}
;
`
&:hover {
cursor: default;
}
const
InfoIconWrapper
=
styled
.
div
`
display: flex;
padding: 0 1rem;
align-items: center;
justify-content: center;
`
const
Row
=
({
...
...
@@ -113,12 +115,16 @@ const Row = ({
{
name
:
"
offset
"
,
options
:
{
offset
:
[
15
,
0
],
offset
:
[
-
15
,
0
],
},
},
]
}
placement
=
"top-start"
trigger
=
{
<
InfoIcon
onClick
=
{
handleClick
}
size
=
"10px"
/>
}
placement
=
"right"
trigger
=
{
<
InfoIconWrapper
>
<
InfoIcon
size
=
"10px"
/>
</
InfoIconWrapper
>
}
>
<
Tooltip
>
{
description
}
</
Tooltip
>
</
PopperHover
>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录