diff --git a/ui/src/flux/components/DatabaseListItem.tsx b/ui/src/flux/components/DatabaseListItem.tsx index 934c8573b8..86ca5f943d 100644 --- a/ui/src/flux/components/DatabaseListItem.tsx +++ b/ui/src/flux/components/DatabaseListItem.tsx @@ -55,11 +55,10 @@ class DatabaseListItem extends PureComponent { {db} Bucket - +
+ + Copy +
{this.state.isOpen && ( @@ -95,6 +94,10 @@ class DatabaseListItem extends PureComponent { }) } + private handleCopyClick = e => { + e.stopPropagation() + } + private handleCopy = (copiedText: string): void => { this.setState({isCopied: true, copiedText}) } diff --git a/ui/src/style/components/time-machine/flux-explorer.scss b/ui/src/style/components/time-machine/flux-explorer.scss index dac50389d5..335829c0ab 100644 --- a/ui/src/style/components/time-machine/flux-explorer.scss +++ b/ui/src/style/components/time-machine/flux-explorer.scss @@ -18,7 +18,7 @@ $flux-tree-line: 2px; flex-direction: column; align-items: stretch; padding-left: 0; - >.flux-schema-tree { + > .flux-schema-tree { padding-left: $flux-tree-indent; } } @@ -68,7 +68,7 @@ $flux-tree-line: 2px; color: $g11-sidewalk; white-space: nowrap; transition: color 0.25s ease, background-color 0.25s ease; - >span.icon { + > span.icon { position: absolute; top: 50%; left: $flux-tree-indent / 2; @@ -83,7 +83,7 @@ $flux-tree-line: 2px; background-color: $g17-whisper; } } - .expanded>& { + .expanded > & { color: $c-pool; .flux-schema-item-toggle:before, .flux-schema-item-toggle:after { @@ -122,15 +122,20 @@ $flux-tree-line: 2px; @keyframes skeleton-animation { 0% { - background-position: 100% 50% + background-position: 100% 50%; } 100% { - background-position: 0% 50% + background-position: 0% 50%; } } .flux-schema-item-skeleton { - background: linear-gradient(70deg, $g4-onyx 0%, $g5-pepper 50%, $g4-onyx 100%); + background: linear-gradient( + 70deg, + $g4-onyx 0%, + $g5-pepper 50%, + $g4-onyx 100% + ); border-radius: 4px; height: 60%; background-size: 400% 400%; @@ -196,7 +201,24 @@ $flux-tree-line: 2px; } } -.flux-schema-tree>.flux-schema--filter { +.flux-schema-copy { + color: $g11-sidewalk; + display: inline-block; + opacity: 0; + transition: opacity 0.25s ease; + margin-left: 8px; + .flux-schema-item:hover & { + opacity: 1; + } + > span.icon { + margin-right: 3px; + } + &:hover { + color: $g15-platinum; + } +} + +.flux-schema-tree > .flux-schema--filter { margin-left: $flux-tree-indent / 2; margin-right: $flux-tree-indent / 2; margin-top: 1px; @@ -204,12 +226,12 @@ $flux-tree-line: 2px; max-width: 220px; } -.flux-schema--filter>input.input-sm { +.flux-schema--filter > input.input-sm { height: 25px; font-size: 12px; } -.tag-value-list--header>.flux-schema--filter { +.tag-value-list--header > .flux-schema--filter { display: inline-block; margin-right: 15px; } @@ -232,7 +254,7 @@ $flux-tree-line: 2px; margin: 0 auto; } -.loading-spinner .spinner>div { +.loading-spinner .spinner > div { width: 8px; height: 8px; background-color: $g8-storm; @@ -253,10 +275,10 @@ $flux-tree-line: 2px; 0%, 80%, 100% { - -webkit-transform: scale(0) + -webkit-transform: scale(0); } 40% { - -webkit-transform: scale(1.0) + -webkit-transform: scale(1); } } @@ -268,7 +290,7 @@ $flux-tree-line: 2px; transform: scale(0); } 40% { - -webkit-transform: scale(1.0); - transform: scale(1.0); + -webkit-transform: scale(1); + transform: scale(1); } }