Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use DapperScrollbars in inline label editor #13584

Merged
merged 5 commits into from Apr 23, 2019
Merged
Changes from all commits
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

@@ -12,6 +12,7 @@
1. [13560](https://github.com/influxdata/influxdb/pull/13560): Add option to generate all access token in tokens tab

### Bug Fixes
1. [13584](https://github.com/influxdata/influxdb/pull/13584): Fixed scroll clipping found in label editing flow
1. [13585](https://github.com/influxdata/influxdb/pull/13585): Prevent overlapping text and dot in time range dropdown

### UI Improvements
@@ -50,12 +50,8 @@ $inline-labels--popover-caret: 12px;
.inline-labels--list-container {
background-color: $g3-castle;
border-radius: $radius;
overflow: hidden;
margin-top: $ix-marg-a;
}

.inline-labels--list-container .fancy-scroll--track-h {
display: none;
overflow: hidden;
}

.inline-labels--list {
@@ -86,6 +82,8 @@ $inline-labels--popover-caret: 12px;
font-weight: 500;
color: $g11-sidewalk;
transition: background-color 0.25s ease, color 0.25s ease;
word-break: break-all;
word-wrap: break-word;

strong {
font-weight: 900;
@@ -3,8 +3,7 @@ import React, {Component} from 'react'
import _ from 'lodash'

// Components
import {EmptyState} from '@influxdata/clockface'
import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
import {EmptyState, DapperScrollbars} from '@influxdata/clockface'
import InlineLabelsListItem from 'src/shared/components/inlineLabels/InlineLabelsListItem'
import InlineLabelsCreateLabelButton from 'src/shared/components/inlineLabels/InlineLabelsCreateLabelButton'

@@ -33,9 +32,14 @@ class InlineLabelsList extends Component<Props> {
public render() {
return (
<div className="inline-labels--list-container">
<FancyScrollbar autoHide={false} autoHeight={true} maxHeight={250}>
<DapperScrollbars
autoSize={true}

This comment has been minimized.

Copy link
@mavarius

mavarius Apr 23, 2019

Contributor

Isn’t this already the default value?

autoHide={false}
style={{maxWidth: '100%', maxHeight: '300px'}}
noScrollX={true}
>
<div className="inline-labels--list">{this.menuItems}</div>
</FancyScrollbar>
</DapperScrollbars>
</div>
)
}
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.