From 80822f363d9f9a2ce5cee45e9b4378f6b9798beb Mon Sep 17 00:00:00 2001 From: Igor D Date: Thu, 13 Jul 2023 01:39:49 +0300 Subject: [PATCH] [fix] minor effect-related fixes Signed-off-by: Ihor Dykhta --- .../src/common/styled-components.tsx | 46 ++++++++++--------- .../src/effects/effect-configurator.tsx | 10 +++- src/components/src/effects/effect-manager.tsx | 8 ++-- .../src/effects/effect-panel-header.tsx | 3 +- src/components/src/effects/effect-panel.tsx | 7 ++- .../src/effects/effect-time-configurator.tsx | 17 +++++-- src/localization/src/translations/en.ts | 7 ++- src/styles/src/base.ts | 12 +++++ 8 files changed, 73 insertions(+), 37 deletions(-) diff --git a/src/components/src/common/styled-components.tsx b/src/components/src/common/styled-components.tsx index b72518839f..9a1392f01b 100644 --- a/src/components/src/common/styled-components.tsx +++ b/src/components/src/common/styled-components.tsx @@ -787,8 +787,8 @@ export const StyledTimePicker = styled(TimePicker)` display: inline-flex; position: relative; font-family: ${props => props.theme.fontFamily}; - font-size: ${props => props.theme.inputFontSize}; - background-color: ${props => props.theme.inputBgd}; + font-size: ${props => props.theme.datePickerFontSize}; + background-color: ${props => props.theme.datePickerBgdColor}; color: ${props => props.theme.textColor}; } .react-time-picker, @@ -803,12 +803,14 @@ export const StyledTimePicker = styled(TimePicker)` display: flex; flex-grow: 1; flex-shrink: 0; - background-color: ${props => props.theme.inputBgd}; - border: thin solid ${props => props.theme.inputBgd}; + background-color: ${props => props.theme.datePickerBgdColor}; + border: thin solid ${props => props.theme.datePickerBgdColor}; border-radius: 2px; + width: 103px; + white-space: nowrap; } .react-time-picker__wrapper:hover { - background-color: ${props => props.theme.inputBgdHover}; + background-color: ${props => props.theme.datePickerBgdHover}; } .react-time-picker__inputGroup { min-width: calc((4px * 3) + 0.54em * 6 + 0.217em * 2); @@ -825,7 +827,7 @@ export const StyledTimePicker = styled(TimePicker)` display: inline-block; color: ${props => props.theme.textColor}; font-family: ${props => props.theme.fontFamily}; - font-size: ${props => props.theme.inputFontSize}; + font-size: ${props => props.theme.datePickerFontSize}; } .react-time-picker__inputGroup__input { min-width: 0.54em; @@ -836,7 +838,7 @@ export const StyledTimePicker = styled(TimePicker)` background: transparent; color: ${props => props.theme.textColor}; font-family: ${props => props.theme.fontFamily}; - font-size: ${props => props.theme.inputFontSize}; + font-size: ${props => props.theme.datePickerFontSize}; box-sizing: content-box; -webkit-appearance: textfield; -moz-appearance: textfield; @@ -861,11 +863,11 @@ export const StyledTimePicker = styled(TimePicker)` -webkit-appearance: menulist; -moz-appearance: menulist; appearance: menulist; - font-size: ${props => props.theme.inputFontSize}; + font-size: ${props => props.theme.datePickerFontSize}; } .react-time-picker__button { border: 0; - background-color: ${props => props.theme.inputBgd}; + background-color: ${props => props.theme.datePickerBgdColor}; padding: 4px 6px; } .react-time-picker__button:enabled { @@ -885,7 +887,7 @@ export const StyledDatePicker = styled(DatePicker)` display: inline-flex; position: relative; font-family: ${props => props.theme.fontFamily}; - font-size: ${props => props.theme.inputFontSize}; + font-size: ${props => props.theme.datePickerFontSize}; } .react-date-picker, .react-date-picker *, @@ -903,19 +905,21 @@ export const StyledDatePicker = styled(DatePicker)` display: flex; flex-grow: 1; flex-shrink: 0; - border: thin solid ${props => props.theme.inputBgd}; + border: thin solid ${props => props.theme.datePickerBgdColor}; border-radius: 2px; + width: 90px; + white-space: nowrap; } .react-date-picker__inputGroup { min-width: calc((4px * 3) + 0.54em * 8 + 0.217em * 2); flex-grow: 1; padding: 4px 10px; box-sizing: content-box; - background-color: ${props => props.theme.inputBgd}; + background-color: ${props => props.theme.datePickerBgdColor}; } .react-date-picker__inputGroup:hover { - background-color: ${props => props.theme.inputBgdHover}; + background-color: ${props => props.theme.datePickerBgdHover}; } .react-date-picker__inputGroup__divider { padding: 1px 0; @@ -935,7 +939,7 @@ export const StyledDatePicker = styled(DatePicker)` background: none; color: ${props => props.theme.textColor}; font: inherit; - font-size: ${props => props.theme.inputFontSize}; + font-size: ${props => props.theme.datePickerFontSize}; box-sizing: content-box; -webkit-appearance: textfield; -moz-appearance: textfield; @@ -952,7 +956,7 @@ export const StyledDatePicker = styled(DatePicker)` margin: 0; } .react-date-picker__inputGroup__input:invalid { - background: ${props => props.theme.inputBgd}; + background: ${props => props.theme.datePickerBgdColor}; } .react-date-picker__inputGroup__input--hasLeadingZero { margin-left: -0.54em; @@ -962,7 +966,7 @@ export const StyledDatePicker = styled(DatePicker)` width: 257px; max-width: 100vw; z-index: 11; - inset: auto !important; + inset: auto auto auto -25px !important; color: ${props => props.theme.textColor}; } .react-date-picker__calendar--closed { @@ -978,7 +982,7 @@ export const StyledDatePicker = styled(DatePicker)` width: 257px; max-width: 100%; color: ${props => props.theme.textColor}; - background: ${props => props.theme.inputBgdHover}; + background: ${props => props.theme.datePickerBgdHover}; border: 1px solid ${props => props.theme.textColor}; border-radius: 2px; font-family: ${props => props.theme.fontFamily}; @@ -1023,7 +1027,7 @@ export const StyledDatePicker = styled(DatePicker)` } .react-calendar__month-view__weekdays__weekday { padding: 0.5em; - font-size: ${props => props.theme.inputFontSize}; + font-size: ${props => props.theme.datePickerFontSize}; } .react-calendar__month-view__weekNumbers .react-calendar__tile { display: flex; @@ -1053,16 +1057,16 @@ export const StyledDatePicker = styled(DatePicker)` padding: 6px 4px; background: none; text-align: center; - font-size: ${props => props.theme.inputFontSize}; + font-size: ${props => props.theme.datePickerFontSize}; } .react-calendar__tile:enabled:hover, .react-calendar__tile:enabled:focus { - background-color: ${props => props.theme.primaryBtnBgd}; + background-color: ${props => props.theme.datePickerSelectedDateBgColor}; color: ${props => props.theme.primaryBtnActColor}; } .react-calendar__tile--now:enabled:hover, .react-calendar__tile--now:enabled:focus { - background: ${props => props.theme.primaryBtnBgd}; + background: ${props => props.theme.datePickerSelectedDateBgColor}; color: ${props => props.theme.primaryBtnActColor}; } .react-calendar__tile--hasActive { diff --git a/src/components/src/effects/effect-configurator.tsx b/src/components/src/effects/effect-configurator.tsx index 6d525e9fed..3aeb138ebf 100644 --- a/src/components/src/effects/effect-configurator.tsx +++ b/src/components/src/effects/effect-configurator.tsx @@ -1,5 +1,6 @@ import React, {useCallback, useMemo} from 'react'; import styled from 'styled-components'; +import {injectIntl, IntlShape} from 'react-intl'; import {LIGHT_AND_SHADOW_EFFECT} from '@kepler.gl/constants'; import {isNumber} from '@kepler.gl/utils'; @@ -64,7 +65,11 @@ export default function EffectConfiguratorFactory( ColorSelector: ReturnType, EffectTimeConfigurator: ReturnType ): React.FC { - const EffectConfigurator = ({effect, updateEffectConfig}: EffectConfiguratorProps) => { + const EffectConfigurator = ({ + effect, + updateEffectConfig, + intl + }: EffectConfiguratorProps & {intl: IntlShape}) => { const renderShadowEffectConfigurator = useCallback(() => { const {config} = effect; @@ -122,6 +127,7 @@ export default function EffectConfiguratorFactory( onDateTimeChange={onDateTimeChange} useCurrentTime={config.params.useCurrentTime} onUseCurrentTimeChange={onUseCurrentTimeChange} + intl={intl} /> {'Shadow intensity'} @@ -252,5 +258,5 @@ export default function EffectConfiguratorFactory( return renderPostProcessingEffectConfigurator(); }; - return EffectConfigurator; + return injectIntl(EffectConfigurator); } diff --git a/src/components/src/effects/effect-manager.tsx b/src/components/src/effects/effect-manager.tsx index 98ef04da5e..62d6269b95 100644 --- a/src/components/src/effects/effect-manager.tsx +++ b/src/components/src/effects/effect-manager.tsx @@ -1,7 +1,6 @@ import React, {useMemo} from 'react'; import styled from 'styled-components'; -import {IntlShape} from 'react-intl'; -import {injectIntl} from 'react-intl'; +import {injectIntl, IntlShape} from 'react-intl'; import {addEffect, updateEffect, removeEffect, reorderEffect} from '@kepler.gl/actions'; import {LIGHT_AND_SHADOW_EFFECT, EFFECT_DESCS} from '@kepler.gl/constants'; @@ -19,6 +18,7 @@ export type EffectManagerState = { effectOrder: string[]; children: React.ReactNode; }; +export type EffectManagerProps = {}; export type EffectManagerWithIntlProp = {intl: IntlShape}; const StyledEffectPanelContainer = styled.div` @@ -66,7 +66,7 @@ function EffectManagerFactory( EffectList: ReturnType, SidePanelTitle: ReturnType, EffectTypeSelector: ReturnType -): React.FC { +): React.FC { const EffectManager = (props: EffectManagerWithIntlProp & EffectManagerState) => { const {intl, visStateActions, effects, effectOrder, children} = props; @@ -87,7 +87,7 @@ function EffectManagerFactory( diff --git a/src/components/src/effects/effect-panel-header.tsx b/src/components/src/effects/effect-panel-header.tsx index 68577ef649..787b43d62f 100644 --- a/src/components/src/effects/effect-panel-header.tsx +++ b/src/components/src/effects/effect-panel-header.tsx @@ -43,7 +43,8 @@ const StyledEffectPanelHeader = styled(StyledPanelHeader)` .effect__drag-handle__placeholder { height: 20px; - padding: 10px; + padding: 0px; + margin: 10px; } :hover { diff --git a/src/components/src/effects/effect-panel.tsx b/src/components/src/effects/effect-panel.tsx index 653a006016..76b5d85dc5 100644 --- a/src/components/src/effects/effect-panel.tsx +++ b/src/components/src/effects/effect-panel.tsx @@ -1,5 +1,6 @@ import React, {Component, ComponentType} from 'react'; import styled from 'styled-components'; +import classnames from 'classnames'; import PropTypes from 'prop-types'; import {dataTestIds, LIGHT_AND_SHADOW_EFFECT} from '@kepler.gl/constants'; @@ -79,10 +80,12 @@ function EffectPanelFactory( const {effect, isDraggable, listeners} = this.props; const {config = {} as EffectConfig} = effect; + const sortingAllowed = config.type !== LIGHT_AND_SHADOW_EFFECT.type; + return ( diff --git a/src/components/src/effects/effect-time-configurator.tsx b/src/components/src/effects/effect-time-configurator.tsx index ccdec1f34d..794c9eafdd 100644 --- a/src/components/src/effects/effect-time-configurator.tsx +++ b/src/components/src/effects/effect-time-configurator.tsx @@ -1,4 +1,5 @@ import React, {useCallback, useMemo} from 'react'; +import {injectIntl, IntlShape} from 'react-intl'; import styled from 'styled-components'; import {FormattedMessage} from '@kepler.gl/localization'; @@ -17,6 +18,7 @@ export type EffectTimeConfiguratorProps = { onDateTimeChange: (time: number) => void; useCurrentTime: boolean; onUseCurrentTimeChange: (value: boolean) => void; + intl: IntlShape; }; type StyledWrapperProps = {disabled?: boolean}; @@ -83,7 +85,8 @@ export default function EffectTimeConfiguratorFactory( timestamp, useCurrentTime, onDateTimeChange, - onUseCurrentTimeChange + onUseCurrentTimeChange, + intl }: EffectTimeConfiguratorProps) => { const [selectedDate, selectedTimeString] = useMemo(() => { const date = new Date(timestamp); @@ -143,7 +146,9 @@ export default function EffectTimeConfiguratorFactory( type="radio" checked={!useCurrentTime} id={`effect-time-toggle-use-pick`} - label={'Pick date/time'} + label={intl.formatMessage({ + id: 'effectManager.pickDateTime' + })} onChange={() => { onUseCurrentTimeChange(false); }} @@ -153,7 +158,7 @@ export default function EffectTimeConfiguratorFactory( - + @@ -177,7 +182,9 @@ export default function EffectTimeConfiguratorFactory( type="radio" checked={useCurrentTime} id={`effect-time-toggle-use-current`} - label={'Current time'} + label={intl.formatMessage({ + id: 'effectManager.currentTime' + })} onChange={() => { onUseCurrentTimeChange(true); }} @@ -187,5 +194,5 @@ export default function EffectTimeConfiguratorFactory( ); }; - return EffectTimeConfigurator; + return injectIntl(EffectTimeConfigurator); } diff --git a/src/localization/src/translations/en.ts b/src/localization/src/translations/en.ts index 1600803101..927855e345 100644 --- a/src/localization/src/translations/en.ts +++ b/src/localization/src/translations/en.ts @@ -187,8 +187,11 @@ export default { backgroundColor: 'Background Color' }, effectManager: { - effect: 'Effects', - addEffect: 'Add effect' + effects: 'Effects', + addEffect: 'Add effect', + pickDateTime: 'Pick date/time', + currentTime: 'Current time', + pickCurrrentTime: 'Pick current time' }, layerConfiguration: { defaultDescription: 'Calculate {property} based on selected field', diff --git a/src/styles/src/base.ts b/src/styles/src/base.ts index 685f2d7c13..dfd3752b7d 100644 --- a/src/styles/src/base.ts +++ b/src/styles/src/base.ts @@ -358,6 +358,12 @@ export const sliderMarginTopIsTime = -12; export const sliderMarginTop = 12; export const sliderMarginBottom = 12; +// Date picker +export const datePickerFontSize = '11px'; +export const datePickerBgdColor = inputBgd; +export const datePickerBgdHover = inputBgdHover; +export const datePickerSelectedDateBgColor = primaryBtnBgd; + // Geocoder export const geocoderWidth = 360; export const geocoderTop = 20; @@ -1454,6 +1460,12 @@ export const theme = { sliderMarginTop, sliderMarginBottom, + // Date picker + datePickerFontSize, + datePickerBgdColor, + datePickerBgdHover, + datePickerSelectedDateBgColor, + // Geocoder geocoderWidth, geocoderTop,