Layout Fixes (#1280)

* message changed * seq hor tooltip implement * Fixed * Fixed * Fixed
mobiledgex · Apr 7, 2022 · db8227f · db8227f
1 parent 89ba3e4
commit db8227f
Show file tree

Hide file tree

Showing 23 changed files with 160 additions and 223 deletions.
diff --git a/src/hoc/charts/d3/sunburst/Sunburst.js b/src/hoc/charts/d3/sunburst/Sunburst.js
@@ -1,7 +1,8 @@
 import React, { useEffect, useRef, useState } from 'react';
 import * as d3 from 'd3';
-import SequenceHorizontal from './SequenceHorizontal'
+import SequenceHorizontal from './legend/SequenceHorizontal'
 import { uniqueId } from '../../../../helper/constant/shared';
+import './style.css'
 
 const width = 732;
 const radius = width / 6.5
@@ -269,9 +270,9 @@ const Sunburst = (props) => {
     }
 
     return (
-        <div align='center'>
-            <div style={{ position: 'relative', width: '90%' }} ref={sbRef} />
-            <div style={{ padding: '0px 10px 0px 20px' }} align='center'>
+        <div className='main' align='center'>
+            <div className='chart' ref={sbRef} />
+            <div className='sequence' align='center'>
                 <SequenceHorizontal key={uniqueId()} dataset={dataFlow} colors={color} />
             </div>
         </div>

diff --git a/.../charts/d3/sunburst/SequenceHorizontal.js → .../d3/sunburst/legend/SequenceHorizontal.js b/.../charts/d3/sunburst/SequenceHorizontal.js → .../d3/sunburst/legend/SequenceHorizontal.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import * as d3 from 'd3';
+import './style.css'
 
 const b = { w: 115, h: 30, s: 3, t: 10 };
 
@@ -33,20 +34,15 @@ class SequenceHorizontal extends React.Component {
 
   draw = (data) => {
     const { colors, onClick } = this.props
+
     var svg = d3.select(this.shRef.current)
       .append('svg')
       .attr("width", data.length * 135)
       .attr("height", 50)
 
-    var tooltip = d3.select(this.shRef.current)
+    var tooltip = d3.select('body')
       .append("div")
-      .style("position", "absolute")
-      .style("visibility", "hidden")
-      .style("background-color", "white")
-      .style("border", "solid")
-      .style("border-width", "1px")
-      .style("border-radius", "5px")
-      .style("padding", "10px")
+      .attr('class', 'sequence-horizontal-tooltip')
 
     var g = svg
       .selectAll("g")
@@ -72,19 +68,17 @@ class SequenceHorizontal extends React.Component {
     entering.attr("transform", function (d, i) {
       return "translate(" + i * (b.w + b.s) + ", 0)";
     });
-
+    
     entering.on("mouseover", (e, d) => {
       tooltip.html(() => {
         let g = '<div style="font-size:10px;color:black;" align="left">'
         g = g + `<p>${d?.data?.name}</p>`
         g = g + '</div>'
         return g
-    });
-
-      tooltip.style("visibility", "visible");
+      }).style("opacity", 1);
     })
-      .on("mousemove", (e, d) => { return tooltip.style("top", (e.pageY - 870) + "px").style("left", (e.pageX - 250) + "px"); })
-      .on("mouseout", (e, d) => { return tooltip.style("visibility", "hidden"); });
+      .on("mousemove", (e, d) => { return tooltip.style("top", `${e.clientY + 10}px`).style("left", `${e.clientX + 10}px`) })
+      .on("mouseout", (e, d) => { return tooltip.style("opacity", 0); });
 
     if (onClick) {
       entering.style("cursor", "pointer").on('click', onClick)
@@ -96,7 +90,7 @@ class SequenceHorizontal extends React.Component {
 
   render() {
     return (
-      <div id='sequence-horizontal' ref={this.shRef} style={{position:'relative', width:'100%'}}></div>
+      <div id='sequence-horizontal' ref={this.shRef} ></div>
     );
   }
 

diff --git a/src/hoc/charts/d3/sunburst/legend/style.css b/src/hoc/charts/d3/sunburst/legend/style.css
@@ -0,0 +1,8 @@
+.sequence-horizontal-tooltip {
+    position: absolute;
+    background-color: white;
+    border: 1px solid white;
+    padding: 10px;
+    border-radius: 5px;
+    opacity: 0;
+}
diff --git a/src/hoc/charts/d3/sunburst/style.css b/src/hoc/charts/d3/sunburst/style.css
@@ -0,0 +1,8 @@
+.sunburst .main .chart {
+    position: relative;
+    width: 95%;
+}
+
+.sunburst .main .sequence {
+    padding: 0px 10px 0px 20px;
+}
diff --git a/src/hoc/charts/d3/sunburst/sunburst-styling.js b/src/hoc/charts/d3/sunburst/sunburst-styling.js
diff --git a/src/hoc/datagrid/MexFilterBar.js b/src/hoc/datagrid/MexFilterBar.js
@@ -4,28 +4,35 @@ import cloneDeep from 'lodash/cloneDeep';
 import clsx from 'clsx';
 import React from 'react'
 import { Icon } from '../mexui';
-import { ICON_COLOR } from '../../helper/constant/colors';
 
 const useStyles = makeStyles((theme) => ({
     root: {
-        display: 'inline-flex',
+        display: 'flex',
         alignItems: 'center',
-        justifyContent:'center',
         marginLeft: 15,
+        marginTop:5,
+        gap: 10
+    },
+    content: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
         cursor: 'pointer',
-        textAlign: 'center',
         padding: 5,
         borderRadius: 5,
-        marginTop: 5,
         '&:hover': {
             backgroundColor: 'rgba(56, 142, 60, 0.2)',
         }
     },
     clicked: {
         backgroundColor: 'rgba(56, 142, 60, 0.2)',
     },
-    text:{
-        marginLeft: 6 
+    text: {
+        marginLeft: 6,
+        lineHeight:2
+    },
+    empty:{
+        height:35
     }
 }));
 
@@ -41,13 +48,15 @@ const IconBar = (props) => {
     }
 
     return (
-        keys ? keys.map((key, i) => {
-            const isSVG = key.icon.includes('.svg')
-            return (<div className={clsx(classes.root, key.clicked ? classes.clicked : {})} key={i} onClick={() => { onChange(i, key) }}>
-                {isSVG ? <img src={`/assets/icons/${key.icon}`} width={24} /> : <Icon color={'#388E3C'} size={24} outlined={true}>{key.icon}</Icon>}
-                <strong className={classes.text}>{`${key.label}: ${key.count}`}</strong>
-            </div>)
-        }) : null
+        <div className={classes.root}>
+            {keys ? keys.map((key, i) => {
+                const isSVG = key.icon.includes('.svg')
+                return (key?.count ? <div className={clsx(classes.content, key.clicked ? classes.clicked : {})} key={i} onClick={() => { onChange(i, key) }}>
+                    {isSVG ? <img src={`/assets/icons/${key.icon}`} width={24} /> : <Icon color={'#388E3C'} size={24} outlined={true}>{key.icon}</Icon>}
+                    <strong className={classes.text}>{`${key.label}: ${key.count}`}</strong>
+                </div> : <div className={classes.empty}></div>)
+            }) : null}
+        </div>
     )
 }
 export default IconBar
diff --git a/src/hoc/filter/SearchFilter.js b/src/hoc/filter/SearchFilter.js
@@ -61,13 +61,11 @@ class SearchFilter extends React.Component {
 
     render() {
         const { focused } = this.state
-        const { classes, compact, style, clear } = this.props;
-        const inputStyle = focused ? { ...style, marginTop: 0 } : style
+        const { classes, compact, clear } = this.props;
         return (
             <Input
                 size="small"
-                fullWidth
-                style={inputStyle}
+                fullWidth={!compact}
                 value={this.state.filterText}
                 onFocus={() => {
                     this.setState({ focused: true })

diff --git a/src/hoc/mexui/IconButton.js b/src/hoc/mexui/IconButton.js
@@ -28,14 +28,15 @@ const useStyles = makeStyles((theme) => ({
 
 export default function IconButton(props) {
     const classes = useStyles();
-    const { id, tooltip, disabled, style, loading, onClick, children, inline, className, onMouseOver, onMouseOut } = props
+    const { id, size, tooltip, disabled, style, loading, onClick, children, inline, className, onMouseOver, onMouseOut } = props
     return (
         <div className={clsx(classes.root, inline ? classes.inline : {})}>
             <div className={classes.wrapper}>
-                <Tooltip title={tooltip ? <strong style={{fontSize:13}}>{tooltip}</strong> : ''}>
+                <Tooltip title={tooltip ? <strong style={{fontSize:13}}>{tooltip}</strong> : ''} arrow>
                     <span>
                         <IB
                             id={id}
+                            size={size ?? 'medium'}
                             aria-label={id}
                             onClick={onClick}
                             onMouseOver={onMouseOver}

diff --git a/src/hoc/mexui/Picker.js b/src/hoc/mexui/Picker.js
@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
-import { Popover, Grid, Button, Divider, Tooltip } from '@material-ui/core';
+import { Popover, Grid, Button, Divider } from '@material-ui/core';
 import * as moment from 'moment'
-import { Icon } from 'semantic-ui-react';
 
 import 'date-fns';
 import DateFnsUtils from '@date-io/date-fns';
@@ -12,6 +11,8 @@ import {
 import { useDispatch } from 'react-redux';
 import { alertInfo } from '../../actions';
 import * as dateUtil from '../../utils/date_util';
+import IconButton from './IconButton';
+import Icon from './Icon';
 
 export const relativeTimeRanges = [
     { label: 'Last 5 minutes', duration: 5 },
@@ -110,11 +111,13 @@ const MexTimer = (props) => {
 
     return (
         <React.Fragment>
-            <Tooltip title={<strong style={{ fontSize: 13 }}>{rangeLabel(value, relativeRange)}</strong>} arrow>
-                <button size='small' aria-controls="mex-timer" aria-haspopup="true" onClick={handleClick} style={{ backgroundColor: 'transparent', border: `1px solid ${color ? color : 'rgba(118, 255, 3, 0.7)'}`, borderRadius: 5, cursor: 'pointer', padding: 5 }}>
-                    <Icon name='clock outline' style={{ color: color ? color : 'rgba(118, 255, 3, 0.7)' }} /><strong style={{ marginLeft: 5, color: color ? color : 'rgba(118, 255, 3, 0.7)' }}>{relativeRange.label}</strong><Icon name='chevron down' style={{ marginLeft: 5, color: color ? color : 'rgba(118, 255, 3, 0.7)' }} />
-                </button>
-            </Tooltip>
+            <IconButton tooltip={<strong style={{ fontSize: 13 }}>{rangeLabel(value, relativeRange)}</strong>} onClick={handleClick} style={{ backgroundColor: 'transparent', border: `1px solid ${color ?? 'rgba(118, 255, 3, 0.7)'}`, borderRadius: 5, padding: 3 }}>
+                <div style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
+                    <Icon color={color ?? 'rgba(118, 255, 3, 0.7)'} >access_time</Icon>
+                    <strong style={{ fontSize: 13, marginLeft: 5, color: color ?? 'rgba(118, 255, 3, 0.7)' }}>{relativeRange.label}</strong>
+                    <Icon color={color ?? 'rgba(118, 255, 3, 0.7)'}>keyboard_arrow_down</Icon>
+                </div>
+            </IconButton>
             <Popover
                 id={id}
                 open={open}

diff --git a/src/hoc/mexui/select/Select.js b/src/hoc/mexui/select/Select.js
@@ -2,18 +2,17 @@ import React, { useEffect } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import { FormControl, MenuItem, InputLabel, Menu, Typography, Tooltip } from '@material-ui/core';
 import SearchFilter from '../../filter/SearchFilter'
-import KeyboardArrowDownOutlinedIcon from '@material-ui/icons/KeyboardArrowDownOutlined';
 import { FixedSizeList } from 'react-window';
 import { toFirstUpperCase } from '../../../utils/string_utils';
+import Icon from '../Icon';
 
 /**
  * optional params
- * width: width of the select
  * placeholder: tip
  * value: default value
  * search: enable/disable search option
  * underline: show bottom line
- * upper: first letter capital
+ * title: first letter capital
  * height: dropdown height
 **/
 
@@ -24,9 +23,6 @@ import { toFirstUpperCase } from '../../../utils/string_utils';
 **/
 
 const useStyles = makeStyles((theme) => ({
-    formControl: props => ({
-        width: props.width ? props.width : 100,
-    }),
     selectEmpty: {
         marginTop: theme.spacing(1),
     },
@@ -45,6 +41,7 @@ const useStyles = makeStyles((theme) => ({
 
 export default function Select(props) {
     const classes = useStyles(props);
+    const { title } = props
     const [anchorEl, setAnchorEl] = React.useState(null)
     const [value, setValue] = React.useState(props.value ? props.value : '');
     const [list, setList] = React.useState(props.list)
@@ -65,7 +62,7 @@ export default function Select(props) {
     }
 
     const toUpper = (value) => {
-        return props.upper ? toFirstUpperCase(value) : value
+        return title ? toFirstUpperCase(value) : value
     }
 
     const renderRow = (virtualProps) => {
@@ -78,25 +75,25 @@ export default function Select(props) {
 
     const selectLabel = () => {
         const { placeholder } = props
-        return value ? toUpper(value) : placeholder ? placeholder : ''
+        return value ? toUpper(value) : placeholder ?? ''
     }
 
     const color = { color: props.color ? props.color : '#CECECE' }
-    const border = { border: props.border ? `1px solid ${color.color}` : 'none', borderRadius: 5, paddingLeft: 5, paddingRight: 5, height: 25 }
 
     return (
         <div>
             <FormControl className={classes.formControl}>
                 {props.label ? <InputLabel shrink id="mex-ui-select">
                     {props.label}
                 </InputLabel> : null}
-                <div style={{ display: 'inline', cursor: 'pointer', marginTop: props.label ? 21 : 0, ...color, ...border }} aria-controls="chart" aria-haspopup="true" onClick={(e) => { setAnchorEl(e.currentTarget) }}>
-                    <Typography display='inline' noWrap style={{ display: 'flex', position: 'relative' }}>
+                <div style={{ cursor: 'pointer', ...color, marginTop: props.header ? 20.5 : 0 }} aria-controls="chart" aria-haspopup="true" onClick={(e) => { setAnchorEl(e.currentTarget) }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap:10 }}>
                         <Tooltip title={selectLabel()}>
-                            {props.border ? <Typography component={'span'} variant={'body2'} className={classes.wrapIcon} style={{marginTop:2}}>{selectLabel()}</Typography> : <Typography component={'span'} variant={'body2'} className={classes.wrapIcon}>{selectLabel()}</Typography>}
+                            {<strong style={{ fontSize: 13 }}>{selectLabel()}</strong>}
                         </Tooltip>
-                        <KeyboardArrowDownOutlinedIcon className={classes.icon} style={{ ...color }} />
-                    </Typography>
+                        <Icon color={color}>keyboard_arrow_down</Icon>
+                    </div>
+
                     <div style={{ borderBottom: props.underline ? '0.1em solid #BFC0C2' : '', marginTop: 3 }}></div>
                 </div>
                 <Menu

diff --git a/src/hoc/mexui/select/style.css b/src/hoc/mexui/select/style.css
diff --git a/src/hoc/selectMenu/SelectMenu.js b/src/hoc/selectMenu/SelectMenu.js
@@ -1,8 +1,7 @@
 import { Box, ListItem, ListItemText, Menu, Tooltip, Typography } from '@material-ui/core'
 import React from 'react'
-import { Icon } from 'semantic-ui-react';
 import SearchFilter from '../filter/SearchFilter'
-import './style.css'
+import { Icon, IconButton } from '../mexui'
 
 const SelectMenu = (props) => {
     const { labelKey, dataList } = props
@@ -19,11 +18,15 @@ const SelectMenu = (props) => {
         const { tip, icon, placeholder, header, color, labelWidth, clear } = props
         return (
             icon ? icon :
-                <div className='select-menu-label' style={{ color }}>
+                <div style={{ color, display: 'flex', alignItems: 'center', justifyContent:'space-between' }}>
                     {header ? <strong>{header}:</strong> : null}
-                    <Tooltip title={value ? value : ''}><Typography style={{ maxWidth: labelWidth ? labelWidth : 150, textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', display: 'inline-flex', marginRight: 5, marginLeft: 5 }}>{value ? value : placeholder}</Typography></Tooltip>
-                    <Icon name='chevron down' className='select-menu-label-icon' style={{ float: 'right', color, marginTop:2 }} />
-                    {clear ? <Icon onClick={onClear} name='close' className='select-menu-label-icon' style={{ float: 'right', color }} /> : null }
+                    <Tooltip title={value ?? ''}>
+                        <strong style={{ fontSize: 13, maxWidth: labelWidth ?? 150, textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', marginRight: 5, marginLeft: 5 }}>{value ? value : placeholder}</strong>
+                    </Tooltip>
+                    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5, float: 'right' }}>
+                        <Icon name='chevron down' color={color}>keyboard_arrow_down</Icon>
+                        {clear ? <IconButton size='small' onClick={onClear}><Icon color={color} size={16}>clear</Icon></IconButton> : null}
+                    </div>
                 </div>
 
         )

diff --git a/src/hoc/selectMenu/style.css b/src/hoc/selectMenu/style.css