From d218f50e6adf9c8a0d28fc26921d32037620fa6b Mon Sep 17 00:00:00 2001 From: "vicky_primathon.in" Date: Thu, 28 May 2020 14:48:08 +0530 Subject: [PATCH] code review changes --- .../components/editorComponents/Button.tsx | 30 ++++++++------- .../DynamicAutocompleteInput.tsx | 3 +- .../LightningMenu/helpers.tsx | 24 ++++++------ .../editorComponents/LightningMenu/index.tsx | 14 +++---- app/client/src/pages/Editor/EditorHeader.tsx | 2 +- .../CustomizedDropdown/StyledComponents.tsx | 38 +++++++++---------- .../pages/common/CustomizedDropdown/index.tsx | 22 +++++------ 7 files changed, 64 insertions(+), 69 deletions(-) diff --git a/app/client/src/components/editorComponents/Button.tsx b/app/client/src/components/editorComponents/Button.tsx index 6bb2cf29a8..9bc902093a 100644 --- a/app/client/src/components/editorComponents/Button.tsx +++ b/app/client/src/components/editorComponents/Button.tsx @@ -21,7 +21,7 @@ const buttonStyles = css<{ intent?: Intent; filled?: string; fluid?: boolean; - themeType?: string; + skin?: string; iconAlignment?: Direction; }>` ${BlueprintButtonIntentsCSS} @@ -38,19 +38,21 @@ const buttonStyles = css<{ } &&&&&& { &.bp3-button span { - font-weight: ${props => (props.themeType ? 400 : 700)}; + font-weight: ${props => (props.skin ? 400 : 700)}; } .bp3-icon svg { - width: ${props => (props.themeType ? 14 : 16)}px; - height: ${props => (props.themeType ? 14 : 16)}px; + width: ${props => (props.skin ? 14 : 16)}px; + height: ${props => (props.skin ? 14 : 16)}px; } &.bp3-button { - ${props => - props.themeType !== undefined - ? props.iconAlignment === "right" - ? "display: flex; justify-content: space-between;width: 100%;" - : props.iconAlignment === "left" - ? "display: flex; justify-content: flex-start;width: 100%;" + display: flex; + width: 100%; + justify-content: ${props => + props.skin !== undefined + ? props.iconAlignment === Directions.RIGHT + ? "space-between" + : props.iconAlignment === Directions.LEFT + ? "flex-start" : "" : ""}; } @@ -61,7 +63,7 @@ const StyledButton = styled(BlueprintButton)<{ outline?: string; intent?: Intent; filled?: string; - themeType?: string; + skin?: string; iconAlignment?: Direction; }>` ${buttonStyles} @@ -70,7 +72,7 @@ const StyledAnchorButton = styled(BlueprintAnchorButton)<{ outline?: string; intent?: Intent; filled?: string; - themeType?: string; + skin?: string; iconAlignment?: Direction; }>` ${buttonStyles} @@ -91,7 +93,7 @@ export type ButtonProps = { type?: "button" | "submit" | "reset"; className?: string; fluid?: boolean; - themeType?: string; + skin?: string; }; export const Button = (props: ButtonProps) => { @@ -119,7 +121,7 @@ export const Button = (props: ButtonProps) => { type: props.type, className: props.className, fluid: props.fluid ? props.fluid.toString() : undefined, - themeType: props.themeType ? props.themeType : undefined, + skin: props.skin ? props.skin : undefined, iconAlignment: props.iconAlignment ? props.iconAlignment : undefined, }; if (props.href) { diff --git a/app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx b/app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx index 35f9a38528..b2a4e2aa7a 100644 --- a/app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx +++ b/app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx @@ -254,6 +254,7 @@ const DynamicAutocompleteInputWrapper = styled.div` height: 100%; flex: 1; position: relative; + //TODO(abhinav): Fix these styles when we have the designs for the lightning icon in both themes & > span:first-of-type { position: absolute; right: 4px; @@ -589,7 +590,7 @@ class DynamicAutocompleteInput extends Component { {(showLightningMenu === undefined || showLightningMenu === true) && ( }> void, @@ -43,7 +43,7 @@ export const getApiOptions = ( text={LIGHTNING_MENU_API_CREATE_NEW} icon="plus" iconAlignment="left" - themeType={themeType} + skin={skin} type="button" /> ), @@ -67,11 +67,11 @@ export const getApiOptions = ( }, openDirection: Directions.RIGHT, openOnHover: false, - themeType: themeType, + skin: skin, }); export const getQueryOptions = ( - themeType: string, + skin: string, queries: RestAction[], pageId: string, applicationId: string, @@ -91,7 +91,7 @@ export const getQueryOptions = ( text={LIGHTNING_MENU_QUERY_CREATE_NEW} icon="plus" iconAlignment="left" - themeType={themeType} + skin={skin} type="button" /> ), @@ -144,11 +144,11 @@ export const getQueryOptions = ( }, openDirection: Directions.RIGHT, openOnHover: false, - themeType: themeType, + skin: skin, }); export const getWidgetOptions = ( - themeType: string, + skin: string, widgets: WidgetProps[], updatePropertyValue: (value: string, cursor?: number) => void, ) => ({ @@ -169,7 +169,7 @@ export const getWidgetOptions = ( }, openDirection: Directions.RIGHT, openOnHover: false, - themeType: themeType, + skin: skin, }); export const getLightningMenuOptions = ( @@ -183,7 +183,7 @@ export const getLightningMenuOptions = ( dataSources: Datasource[], createNewApiAction: (pageId: string) => void, createAction: (data: Partial) => void, - themeType: string, + skin: string, updatePropertyValue: (value: string, cursor?: number) => void, ) => { const options: CustomizedDropdownOption[] = [ @@ -199,7 +199,7 @@ export const getLightningMenuOptions = ( content: ( ), disabled: false, diff --git a/app/client/src/components/editorComponents/LightningMenu/index.tsx b/app/client/src/components/editorComponents/LightningMenu/index.tsx index f416f7cec1..170c8af058 100644 --- a/app/client/src/components/editorComponents/LightningMenu/index.tsx +++ b/app/client/src/components/editorComponents/LightningMenu/index.tsx @@ -28,7 +28,7 @@ import { withTheme } from "styled-components"; const LightningIcon = ControlIcons.LIGHTNING_CONTROL; const lightningMenuOptions = ( - themeType: string, + skin: string, apis: RestAction[], queries: RestAction[], widgets: WidgetProps[], @@ -53,7 +53,7 @@ const lightningMenuOptions = ( dataSources, createNewApiAction, createAction, - themeType, + skin, updatePropertyValue, ); return { @@ -71,7 +71,7 @@ const lightningMenuOptions = ( ), }, - themeType: themeType, + skin, }; }; @@ -80,7 +80,7 @@ type LightningMenuProps = { updatePropertyValue: (value: string, cursor?: number) => void; createNewApiAction: (pageId: string) => void; createAction: (data: Partial) => void; - themeType: string; + skin: string; theme: Theme; }; @@ -96,16 +96,14 @@ export const LightningMenu = (props: LightningMenuProps) => { ); return ( { text="Manage Pages" icon="page-layout" iconAlignment="left" - themeType="light" + skin="light" /> ), onSelect: () => diff --git a/app/client/src/pages/common/CustomizedDropdown/StyledComponents.tsx b/app/client/src/pages/common/CustomizedDropdown/StyledComponents.tsx index 94d65876ee..2b95bcd6d0 100644 --- a/app/client/src/pages/common/CustomizedDropdown/StyledComponents.tsx +++ b/app/client/src/pages/common/CustomizedDropdown/StyledComponents.tsx @@ -1,7 +1,7 @@ import styled, { css } from "styled-components"; import { Intent } from "constants/DefaultTheme"; -export const DropdownTrigger = styled.div<{ themeType: string }>` +export const DropdownTrigger = styled.div<{ skin: string }>` display: flex; flex-direction: row; justify-content: space-between; @@ -20,9 +20,9 @@ export const DropdownTrigger = styled.div<{ themeType: string }>` span { font-weight: 400; color: ${props => - props.themeType === "dark" + props.skin === "dark" ? props.theme.colors.textOnDarkBG - : props.themeType === "light" + : props.skin === "light" ? props.theme.colors.defaultText : "initial"}; } @@ -31,21 +31,19 @@ export const DropdownTrigger = styled.div<{ themeType: string }>` } } `; -export const DropdownContent = styled.div<{ themeType: string }>` +export const DropdownContent = styled.div<{ skin: string }>` &&& * { font-size: ${props => props.theme.fontSizes[3]}px; } - border: ${props => (props.themeType === "dark" ? "1px solid" : "")}; + border: ${props => (props.skin === "dark" ? "1px solid" : "")}; border-color: ${props => - props.themeType === "dark" - ? props.theme.dropdown[props.themeType].border - : ""}; - background: ${props => props.theme.dropdown[props.themeType].inActiveBG}; + props.skin === "dark" ? props.theme.dropdown[props.skin].border : ""}; + background: ${props => props.theme.dropdown[props.skin].inActiveBG}; `; export const DropdownContentSection = styled.div<{ stick: boolean; - themeType: string; + skin: string; }>` position: ${props => (props.stick ? "sticky" : "relative")}; background: white; @@ -68,16 +66,16 @@ export const DropdownContentSection = styled.div<{ right: 0; bottom: 0; height: 1px; - background: ${props => (props.themeType === "dark" ? "#535B62" : "#ccc")}; + background: ${props => (props.skin === "dark" ? "#535B62" : "#ccc")}; } `; -export const highlightOption = css<{ intent?: Intent; themeType: string }>` +export const highlightOption = css<{ intent?: Intent; skin: string }>` text-decoration: none; - color: ${props => props.theme.dropdown[props.themeType].hoverText}; - background: ${props => props.theme.dropdown[props.themeType].hoverBG}; + color: ${props => props.theme.dropdown[props.skin].hoverText}; + background: ${props => props.theme.dropdown[props.skin].hoverBG}; * { - color: ${props => props.theme.dropdown[props.themeType].hoverText}; + color: ${props => props.theme.dropdown[props.skin].hoverText}; } `; @@ -85,7 +83,7 @@ export const Option = styled.div<{ intent?: Intent; active?: boolean; disabled?: boolean; - themeType: string; + skin: string; }>` padding: 8px 16px; min-width: 200px; @@ -95,8 +93,8 @@ export const Option = styled.div<{ margin: 0; } cursor: pointer; - background: ${props => props.theme.dropdown[props.themeType].inActiveBG}; - color: ${props => props.theme.dropdown[props.themeType].inActiveText}; + background: ${props => props.theme.dropdown[props.skin].inActiveBG}; + color: ${props => props.theme.dropdown[props.skin].inActiveText}; &:hover { ${props => (!props.disabled ? highlightOption : ``)}; } @@ -104,9 +102,9 @@ export const Option = styled.div<{ &&& button { span { color: ${props => - props.themeType === "dark" + props.skin === "dark" ? props.theme.colors.textOnDarkBG - : props.themeType === "light" + : props.skin === "light" ? props.theme.colors.defaultText : "initial"}; } diff --git a/app/client/src/pages/common/CustomizedDropdown/index.tsx b/app/client/src/pages/common/CustomizedDropdown/index.tsx index 64ab68a5b4..68de8625c6 100644 --- a/app/client/src/pages/common/CustomizedDropdown/index.tsx +++ b/app/client/src/pages/common/CustomizedDropdown/index.tsx @@ -45,7 +45,7 @@ export type CustomizedDropdownProps = { openDirection: Direction; openOnHover?: boolean; usePortal?: boolean; - themeType?: string; + skin?: string; }; const getIcon = (icon?: string, intent?: Intent) => { @@ -72,7 +72,7 @@ const getIcon = (icon?: string, intent?: Intent) => { const getContentSection = ( section: CustomizedDropdownOptionSection, - themeType: string, + skin: string, ) => { return ( @@ -88,7 +88,7 @@ const getContentSection = ( onClick={option.onSelect} active={!!option.active} disabled={!!option.disabled} - themeType={themeType} + skin={skin} > {option.content} @@ -101,7 +101,7 @@ const getContentSection = ( export const CustomizedDropdown = ( props: CustomizedDropdownProps & { theme: Theme }, ) => { - const themeType = props.themeType ? props.themeType : "light"; + const skin = props.skin ? props.skin : "light"; const icon = getIcon(props.trigger.icon, props.trigger.intent); const trigger = ( @@ -115,7 +115,7 @@ export const CustomizedDropdown = ( iconAlignment={Directions.RIGHT} text={props.trigger.text} intent={props.trigger.intent} - themeType={props.themeType} + skin={props.skin} type="button" /> )} @@ -123,12 +123,8 @@ export const CustomizedDropdown = ( ); const content = props.sections.map((section, index) => ( - - {getContentSection(section, themeType)} + + {getContentSection(section, skin)} )); return ( @@ -146,8 +142,8 @@ export const CustomizedDropdown = ( minimal enforceFocus={false} > - {trigger} - {content} + {trigger} + {content} ); };