diff --git a/gsa/src/web/components/dashboard/display/datadisplay.js b/gsa/src/web/components/dashboard/display/datadisplay.js index a509d20eb5..0669f39fdc 100644 --- a/gsa/src/web/components/dashboard/display/datadisplay.js +++ b/gsa/src/web/components/dashboard/display/datadisplay.js @@ -34,6 +34,7 @@ import {excludeObjectProps} from 'gmp/utils/object'; import Icon from 'web/components/icon/icon'; import IconDivider from 'web/components/layout/icondivider'; +import Layout from 'web/components/layout/layout'; import Loading from 'web/components/loading/loading'; @@ -44,6 +45,8 @@ import Display, { DISPLAY_HEADER_HEIGHT, DISPLAY_BORDER_WIDTH, } from './display'; +export const MENU_PLACEHOLDER_WIDTH = 26; + const ownProps = [ 'title', 'dataTransform', @@ -81,16 +84,18 @@ const FilterString = styled.div` `; const IconBar = styled.div` - height: 26px; - width: 100%; - min-height: 26px; + height: 100%; + width: 26px; display: flex; flex-grow: 1; - justify-content: flex-end; - align-items: center; - padding: 5px 10px; + justify-content: center; + align-items: start; + padding-top: 5px; position: absolute; + right: 0; z-index: ${Theme.Layers.higher}; + background: ${Theme.lightGray}; + opacity: 0; transition: opacity 500ms; `; @@ -99,14 +104,9 @@ const DisplayBox = styled.div` flex-grow: 1; position: relative; - ${IconBar} { - visibility: hidden; - opacity: 0; - } - &:hover ${IconBar} { - visibility: visible; opacity: 1; + transition: opacity 500ms; } `; @@ -304,51 +304,53 @@ class DataDisplay extends React.Component { {...otherProps} > - {isLoading ? - : - showContent && - - - - {showFilterSelection && - - } - {hasSvg && - - } - {showCsvDownload && - - } - - - {children({ - id, - data: transformedData, - width, - height, - svgRef: this.svgRef, - })} - - } - {showFilterString && - - ({_('Applied filter: ')} - {filter.name}  - {filter.simple().toFilterString()}) - - } + + {isLoading ? + : + showContent && + + {children({ + id, + data: transformedData, + width, + height, + svgRef: this.svgRef, + })} + + } + + + {showFilterSelection && + + } + {hasSvg && + + } + {showCsvDownload && + + } + + + {showFilterString && + + ({_('Applied filter: ')} + {filter.name}  + {filter.simple().toFilterString()}) + + } +