From 8e197d065d700d83a8906f496fdcefcceebe863b Mon Sep 17 00:00:00 2001 From: Caozhenhui <823914102@qq.com> Date: Tue, 22 Feb 2022 13:11:41 +0800 Subject: [PATCH 1/4] fixed DateRangePicker styles --- web/src/assets/scss/_user.scss | 1 + .../scss/theme/plugins/_react-datetime.scss | 35 ++++++ web/src/components/MyEMS/Meter/MeterEnergy.js | 103 +++++++++--------- web/src/i18n.js | 48 +++++++- 4 files changed, 132 insertions(+), 55 deletions(-) diff --git a/web/src/assets/scss/_user.scss b/web/src/assets/scss/_user.scss index 39721af2..f0e7cf0e 100644 --- a/web/src/assets/scss/_user.scss +++ b/web/src/assets/scss/_user.scss @@ -15,6 +15,7 @@ border-radius: 6px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.17); white-space: nowrap; + z-index: 2000; } .rc-cascader-menus-hidden { display: none; diff --git a/web/src/assets/scss/theme/plugins/_react-datetime.scss b/web/src/assets/scss/theme/plugins/_react-datetime.scss index f3f45970..aada5fba 100644 --- a/web/src/assets/scss/theme/plugins/_react-datetime.scss +++ b/web/src/assets/scss/theme/plugins/_react-datetime.scss @@ -23,3 +23,38 @@ } } } + +.rs-picker-has-value, +.rs-btn, +.rs-picker-toggle-value, +.rs-picker-has-value, +.rs-picker-toggle, +.rs-picker-toggle-value{color:$gray-300 !important;} + +.rs-picker-toggle-textbox {color: $gray-800;background-color: $white !important;} + +.rs-picker-toggle-value{font-size: 1rem;line-height: 1.3;color: $gray-900!important;} + +.rs-picker-has-value, +.rs-btn, +.rs-picker-toggle-value, +.rs-picker-has-value, +.rs-picker-toggle, +.rs-picker-toggle-value{color: $gray-900 !important;} + +.rs-picker-default, +.rs-picker-toggle, +.rs-picker-input, +.rs-picker-input, +.rs-picker-toggle {--rs-input-bg:$white;background-color: $white;border: 1px solid $white !important;} + +.rs-picker-default:not(.rs-picker-disabled), +.rs-btn-active, +.rs-picker-default:not(.rs-picker-disabled), +.rs-btn:focus, .rs-picker-default:not(.rs-picker-disabled), +.rs-btn:hover, .rs-picker-default:not(.rs-picker-disabled), +.rs-picker-toggle-active, .rs-picker-default:not(.rs-picker-disabled), +.rs-picker-toggle:focus, .rs-picker-default:not(.rs-picker-disabled), + + +.rs-picker-toggle:hover {border-color: $white !important;} \ No newline at end of file diff --git a/web/src/components/MyEMS/Meter/MeterEnergy.js b/web/src/components/MyEMS/Meter/MeterEnergy.js index 22ece156..7646aac9 100644 --- a/web/src/components/MyEMS/Meter/MeterEnergy.js +++ b/web/src/components/MyEMS/Meter/MeterEnergy.js @@ -67,8 +67,7 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { const [periodType, setPeriodType] = useState('daily'); const [basePeriodBeginsDatetime, setBasePeriodBeginsDatetime] = useState(current_moment.clone().subtract(1, 'months').startOf('month')); const [basePeriodEndsDatetime, setBasePeriodEndsDatetime] = useState(current_moment.clone().subtract(1, 'months')); - const [basePeriodBeginsDatetimeDisabled, setBasePeriodBeginsDatetimeDisabled] = useState(true); - const [basePeriodEndsDatetimeDisabled, setBasePeriodEndsDatetimeDisabled] = useState(true); + const [basePeriodDatetimeDisabled, setBasePeriodDatetimeDisabled] = useState(true); const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(current_moment.clone().startOf('month')); const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment); const [cascaderOptions, setCascaderOptions] = useState(undefined); @@ -96,6 +95,24 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { const [detailedDataTableData, setDetailedDataTableData] = useState([]); const [excelBytesBase64, setExcelBytesBase64] = useState(undefined); const [values, setValues] = useState([reportingPeriodBeginsDatetime.toDate(), reportingPeriodEndsDatetime.toDate()]); + const [baseValues, setBaseValues] = useState([basePeriodBeginsDatetime.toDate(), basePeriodEndsDatetime.toDate()]); + const local = { + sunday: t('sunday'), + monday: t('monday'), + tuesday: t('tuesday'), + wednesday: t('wednesday'), + thursday: t('thursday'), + friday: t('friday'), + saturday: t('friday'), + ok: t('ok'), + today: t('today'), + yesterday: t('yesterday'), + hours: t('hours'), + minutes: t('minutes'), + seconds: t('seconds'), + last7Days: t('last7Days') + }; + const styles = { display: 'block', zIndex: 10}; useEffect(() => { let isResponseOK = false; @@ -218,24 +235,21 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { console.log(target.value); setComparisonType(target.value); if (target.value === 'year-over-year') { - setBasePeriodBeginsDatetimeDisabled(true); - setBasePeriodEndsDatetimeDisabled(true); + setBasePeriodDatetimeDisabled(true); setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'years')); setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'years')); } else if (target.value === 'month-on-month') { - setBasePeriodBeginsDatetimeDisabled(true); - setBasePeriodEndsDatetimeDisabled(true); + setBasePeriodDatetimeDisabled(true); setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'months')); setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'months')); } else if (target.value === 'free-comparison') { - setBasePeriodBeginsDatetimeDisabled(false); - setBasePeriodEndsDatetimeDisabled(false); + setBasePeriodDatetimeDisabled(true); } else if (target.value === 'none-comparison') { setBasePeriodBeginsDatetime(undefined); setBasePeriodEndsDatetime(undefined); - setBasePeriodBeginsDatetimeDisabled(true); - setBasePeriodEndsDatetimeDisabled(true); + setBasePeriodDatetimeDisabled(true); } + setBaseValues([basePeriodBeginsDatetime.toDate(), basePeriodEndsDatetime.toDate()]); }; const onSearchMeter = ({ target }) => { @@ -255,12 +269,12 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { }; }; - let onBasePeriodBeginsDatetimeChange = (newDateTime) => { - setBasePeriodBeginsDatetime(newDateTime); - }; - - let onBasePeriodEndsDatetimeChange = (newDateTime) => { - setBasePeriodEndsDatetime(newDateTime); + let onBasePeriodChange = (DateRange) => { + let startDate = moment(DateRange[0]); + let endDate = moment(DateRange[1]); + setValues([DateRange[0], DateRange[1]]); + setReportingPeriodBeginsDatetime(startDate); + setReportingPeriodEndsDatetime(endDate); }; let onChange = (DateRange) => { @@ -279,26 +293,15 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => { } else if (comparisonType === 'month-on-month') { setBasePeriodEndsDatetime(endDate.clone().subtract(1, 'months')); } + setBaseValues([basePeriodBeginsDatetime.toDate(), basePeriodEndsDatetime.toDate()]); }; let onClean = event => { setValues([]); }; - var getValidBasePeriodBeginsDatetimes = function (currentDate) { - return currentDate.isBefore(moment(basePeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a')); - }; - - var getValidBasePeriodEndsDatetimes = function (currentDate) { - return currentDate.isAfter(moment(basePeriodBeginsDatetime, 'MM/DD/YYYY, hh:mm:ss a')); - }; - - var getValidReportingPeriodBeginsDatetimes = function (currentDate) { - return currentDate.isBefore(moment(reportingPeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a')); - }; - - var getValidReportingPeriodEndsDatetimes = function (currentDate) { - return currentDate.isAfter(moment(reportingPeriodBeginsDatetime, 'MM/DD/YYYY, hh:mm:ss a')); + let onBaseClean = event => { + setValues([]); }; // Handler @@ -540,27 +543,19 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
`s get reset. However, we also reset the\n// bottom margin to use `rem` units instead of `em`.\np {\n margin-top: 0;\n margin-bottom: $paragraph-margin-bottom;\n}\n\n// Abbreviations\n//\n// 1. Duplicate behavior to the data-* attribute for our tooltip plugin\n// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n// 3. Add explicit cursor to indicate changed behavior.\n// 4. Remove the bottom border in Firefox 39-.\n// 5. Prevent the text-decoration to be skipped.\n\nabbr[title],\nabbr[data-original-title] { // 1\n text-decoration: underline; // 2\n text-decoration: underline dotted; // 2\n cursor: help; // 3\n border-bottom: 0; // 4\n text-decoration-skip-ink: none; // 5\n}\n\naddress {\n margin-bottom: 1rem;\n font-style: normal;\n line-height: inherit;\n}\n\nol,\nul,\ndl {\n margin-top: 0;\n margin-bottom: 1rem;\n}\n\nol ol,\nul ul,\nol ul,\nul ol {\n margin-bottom: 0;\n}\n\ndt {\n font-weight: $dt-font-weight;\n}\n\ndd {\n margin-bottom: .5rem;\n margin-left: 0; // Undo browser default\n}\n\nblockquote {\n margin: 0 0 1rem;\n}\n\nb,\nstrong {\n font-weight: $font-weight-bolder; // Add the correct font weight in Chrome, Edge, and Safari\n}\n\nsmall {\n @include font-size(80%); // Add the correct font size in all browsers\n}\n\n//\n// Prevent `sub` and `sup` elements from affecting the line height in\n// all browsers.\n//\n\nsub,\nsup {\n position: relative;\n @include font-size(75%);\n line-height: 0;\n vertical-align: baseline;\n}\n\nsub { bottom: -.25em; }\nsup { top: -.5em; }\n\n\n//\n// Links\n//\n\na {\n color: $link-color;\n text-decoration: $link-decoration;\n background-color: transparent; // Remove the gray background on active links in IE 10.\n\n @include hover() {\n color: $link-hover-color;\n text-decoration: $link-hover-decoration;\n }\n}\n\n// And undo these styles for placeholder links/named anchors (without href).\n// It would be more straightforward to just use a[href] in previous block, but that\n// causes specificity issues in many other styles that are too complex to fix.\n// See https://github.com/twbs/bootstrap/issues/19402\n\na:not([href]):not([class]) {\n color: inherit;\n text-decoration: none;\n\n @include hover() {\n color: inherit;\n text-decoration: none;\n }\n}\n\n\n//\n// Code\n//\n\npre,\ncode,\nkbd,\nsamp {\n font-family: $font-family-monospace;\n @include font-size(1em); // Correct the odd `em` font sizing in all browsers.\n}\n\npre {\n // Remove browser default top margin\n margin-top: 0;\n // Reset browser default of `1em` to use `rem`s\n margin-bottom: 1rem;\n // Don't allow content to break outside\n overflow: auto;\n // Disable auto-hiding scrollbar in IE & legacy Edge to avoid overlap,\n // making it impossible to interact with the content\n -ms-overflow-style: scrollbar;\n}\n\n\n//\n// Figures\n//\n\nfigure {\n // Apply a consistent margin strategy (matches our type styles).\n margin: 0 0 1rem;\n}\n\n\n//\n// Images and content\n//\n\nimg {\n vertical-align: middle;\n border-style: none; // Remove the border on images inside links in IE 10-.\n}\n\nsvg {\n // Workaround for the SVG overflow bug in IE10/11 is still required.\n // See https://github.com/twbs/bootstrap/issues/26878\n overflow: hidden;\n vertical-align: middle;\n}\n\n\n//\n// Tables\n//\n\ntable {\n border-collapse: collapse; // Prevent double borders\n}\n\ncaption {\n padding-top: $table-cell-padding;\n padding-bottom: $table-cell-padding;\n color: $table-caption-color;\n text-align: left;\n caption-side: bottom;\n}\n\n// 1. Removes font-weight bold by inheriting\n// 2. Matches default `