Merge pull request #61 from metrico/alexey-header-fixes

Prevent header elements from interfering with each other
metrico · Mar 10, 2022 · b8d4e64 · b8d4e64
2 parents c2a9014 + c1b5d6c
commit b8d4e64
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 14 deletions.
diff --git a/src/components/StatusBar/StatusBar.js b/src/components/StatusBar/StatusBar.js
@@ -11,6 +11,7 @@ import { DateRangePicker } from "../../plugins/daterangepicker";
 import { DATE_TIME_RANGE } from '../../plugins/daterangepicker/consts';
 import {  findRangeByLabel } from "../../plugins/daterangepicker/utils";
 import { UpdateStateFromQueryParams } from "../UpdateStateFromQueryParams";
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import store from '../../store/store'
 import loadLabels from "../../actions/LoadLabels";
 import localUrl from "../../services/localUrl";
@@ -207,8 +208,8 @@ export function StatusBarSelectors() {
                         title={"Copy Link"}
                         onClick={shareLink}
                     >
-                        <LinkIcon
-                            fontSize={"small"}
+                        <ContentCopyIcon
+                            fontSize={"15px"}
                         />
 
                         <span>{"Copy Link"}</span>

diff --git a/src/plugins/daterangepicker/index.js b/src/plugins/daterangepicker/index.js
@@ -28,6 +28,7 @@ import store from '../../store/store'
 import loadLogs from "../../actions/loadLogs"
 import { setLabelsBrowserOpen } from "../../actions/setLabelsBrowserOpen";
 import AccessTimeOutlinedIcon from '@mui/icons-material/AccessTimeOutlined';
+import { Tooltip } from "@mui/material";
 export function DateRangePickerMain(props) {
     const today = Date.now();
     const {
@@ -163,6 +164,8 @@ useEffect(()=>{
             })
         );
     };
+    const mediaMatch = window.matchMedia('(min-width: 1200px)');
+    const [matches, setMatches] = useState(mediaMatch.matches);
     const dateButtonStyles = {
         border:'none',
         height:'21px',
@@ -173,8 +176,7 @@ useEffect(()=>{
         fontSize:'.85em',
         display:'flex',
         alignItems:'center',
-        marginLeft:'20px'
-
+        marginLeft:'20px',
     }
 
     const helpers = {
@@ -199,14 +201,47 @@ useEffect(()=>{
     }
     return (
         <div>
-            <button style={dateButtonStyles}
-                onClick={openButtonHandler}
-            ><AccessTimeOutlinedIcon 
-            style={{
-                fontSize:'1.15em',
-                marginRight:'3px'
-            }} />
+            <Tooltip title={
+                    timeLabel ? <React.Fragment>
+                        <span style={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            justifyContent: 'center',
+                            padding: '3px',
+                        }}  >
+                            <span style={{
+                                textAlign: 'center'
+                            }}>
+                                {(isValid(dateRange.dateStart)
+                                ? format(dateRange.dateStart, "yyyy/MM/dd HH:mm:ss")
+                                : dateRange.dateStart)}
+                            </span>
+                            <span style={{
+                                textAlign: 'center'
+                            }}>
+                            to
+                            </span>
+                            <span style={{
+                                textAlign: 'center'
+                            }}>
+                            {(isValid(dateRange.dateEnd)
+                                ? format(dateRange.dateEnd, "yyyy/MM/dd HH:mm:ss")
+                                : typeof dateRange.dateEnd !== 'undefined' ?
+                                dateRange.dateEnd : ''
+                                )}
+                            </span>
+
+                        </span>
+                    </React.Fragment> : undefined
+                    }>
+                <button style={dateButtonStyles}
+                    onClick={openButtonHandler} className={'date-time-selector'}
+                >
 
+                    <AccessTimeOutlinedIcon />
+
+
+                <span>
                 {timeLabel ?
                 timeLabel :
                 (isValid(dateRange.dateStart)
@@ -219,8 +254,9 @@ useEffect(()=>{
                     dateRange.dateEnd : ''
                     )
                 }
+                </span>
             </button> 
-
+            </Tooltip>
             { isComponentVisible ? (
                 <div tabIndex={"0"} ref={ref}>
                     <ThemeProvider theme={theme}>

diff --git a/src/scss/app.scss b/src/scss/app.scss
@@ -11,4 +11,5 @@
 @import "modules/log-view";
 @import "modules/valuesList.scss";
 @import "modules/query-bar.scss";
-@import "modules/status-bar.scss";
+@import "modules/status-bar.scss";
+@import "modules/date-range-picker.scss";
diff --git a/src/scss/modules/date-range-picker.scss b/src/scss/modules/date-range-picker.scss
@@ -0,0 +1,22 @@
+.date-time-selector {
+    svg {
+        font-size: 1.15em;
+        margin-right: 3px;
+    }
+    .tooltip {
+        background-color: red;
+        display: flex;
+        align-items: center;
+        justify-items: center;
+    }
+}
+@media screen and (max-width: 1200px) {
+    .date-time-selector {
+        svg {
+            margin-right: 0;
+        }
+        span {
+            display: none;
+        }
+    }
+}
diff --git a/src/scss/modules/status-bar.scss b/src/scss/modules/status-bar.scss
@@ -15,7 +15,7 @@
         .label {
             flex: 1;
             color: #bfbfbf;
-
+            min-width: 51px;
             padding: 6px 6px;
             margin: 5px;
             font-size: 0.7rem;
@@ -132,7 +132,14 @@
      }
 
 }
+@media screen and (max-width: 950px) {
+    .url-copy {
+        span {
+            display: none;
+        }
 
+    }
+}
 .copied-warning {
 transition:.2s all;
   color:orange;