diff --git a/app/client/src/api/Api.tsx b/app/client/src/api/Api.tsx index 806b0c0389..8a4d4d6960 100644 --- a/app/client/src/api/Api.tsx +++ b/app/client/src/api/Api.tsx @@ -43,7 +43,9 @@ axiosInstance.interceptors.response.use( }, function(error: any) { if (error.code === "ECONNABORTED") { - console.log("CONNECTION TIMEOUT"); + return Promise.reject({ + message: "Please check your internet connection", + }); } if (error.config.url.match(executeActionRegex)) { return makeExecuteActionResponse(error.response); diff --git a/app/client/src/components/designSystems/blueprint/CheckboxComponent.tsx b/app/client/src/components/designSystems/blueprint/CheckboxComponent.tsx index 95226c8779..44c7e7613c 100644 --- a/app/client/src/components/designSystems/blueprint/CheckboxComponent.tsx +++ b/app/client/src/components/designSystems/blueprint/CheckboxComponent.tsx @@ -2,6 +2,7 @@ import React from "react"; import styled from "styled-components"; import { ComponentProps } from "components/designSystems/appsmith/BaseComponent"; import { Checkbox, Classes } from "@blueprintjs/core"; +import { BlueprintControlTransform } from "constants/DefaultTheme"; const CheckboxContainer = styled.div` && { @@ -14,6 +15,7 @@ const CheckboxContainer = styled.div` margin: 0; } } + ${BlueprintControlTransform} `; class CheckboxComponent extends React.Component { render() { diff --git a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx index a5fe106bf9..54b678f139 100644 --- a/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx +++ b/app/client/src/components/designSystems/blueprint/DropdownComponent.tsx @@ -1,4 +1,4 @@ -import * as React from "react"; +import React, { ReactNode } from "react"; import { ComponentProps } from "components/designSystems/appsmith/BaseComponent"; import { MenuItem, @@ -6,13 +6,26 @@ import { ControlGroup, Label, Classes, + Checkbox, + Icon, } from "@blueprintjs/core"; +import { IconNames } from "@blueprintjs/icons"; import { SelectionType, DropdownOption } from "widgets/DropdownWidget"; -import { Select, MultiSelect, IItemRendererProps } from "@blueprintjs/select"; +import { + Select, + MultiSelect, + IItemRendererProps, + Classes as MultiSelectClasses, +} from "@blueprintjs/select"; import _ from "lodash"; import { WIDGET_PADDING } from "constants/WidgetConstants"; import "../../../../node_modules/@blueprintjs/select/lib/css/blueprint-select.css"; -import styled, { labelStyle } from "constants/DefaultTheme"; +import styled, { + labelStyle, + BlueprintCSSTransform, + BlueprintInputTransform, +} from "constants/DefaultTheme"; +import { Colors } from "constants/Colors"; const SingleDropDown = Select.ofType(); const MultiDropDown = MultiSelect.ofType(); @@ -23,46 +36,164 @@ const StyledSingleDropDown = styled(SingleDropDown)` } span { width: 100%; + position: relative; } - .bp3-button { + .${Classes.BUTTON} { display: flex; width: 100%; align-items: center; justify-content: space-between; - ${labelStyle} } - .bp3-button-text { + .${Classes.BUTTON_TEXT} { text-overflow: ellipsis; - text-align: center; + text-align: left; overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; } - .bp3-icon { - width: fit-content; + && { + .${Classes.ICON} { + width: fit-content; + color: ${Colors.SLATE_GRAY}; + } } `; -const StyledControlGroup = styled(ControlGroup)` - &&& { +const StyledControlGroup = styled(ControlGroup)<{ hasLabel: boolean }>` + &&& > { label { ${labelStyle} - margin: 0 ${WIDGET_PADDING * 2}px 0 0; - align-self: center; + margin: 7px ${WIDGET_PADDING * 2}px 0 0; + align-self: flex-start; flex: 0 1 30%; + max-width: calc(30% - ${WIDGET_PADDING}px); text-align: right; } + span { + max-width: ${props => + props.hasLabel ? `calc(70% - ${WIDGET_PADDING}px)` : "100%"}; + } } `; const DropdownContainer = styled.div` - textalign: center; + ${BlueprintCSSTransform} + &&&& .${Classes.MENU_ITEM} { + border-radius: ${props => props.theme.radii[1]}px; + &:hover{ + background: ${Colors.POLAR}; + } + &.${Classes.ACTIVE} { + background: ${Colors.POLAR}; + color: ${props => props.theme.colors.textDefault}; + position:relative; + &.single-select{ + &:before{ + left: 0; + top: -2px; + position: absolute; + content: ""; + background: ${props => props.theme.colors.primary}; + border-radius: 4px 0 0 4px; + width: 4px; + height:100%; + } + } + } +} + && .${Classes.POPOVER} { + width: 100%; + border-radius: ${props => props.theme.radii[1]}px; + box-shadow: 0px 2px 4px rgba(67, 70, 74, 0.14); + padding: ${props => props.theme.spaces[3]}px; + background:white; + } + + && .${Classes.POPOVER_WRAPPER} { + position:relative; + .${Classes.OVERLAY} { + position: absolute; + .${Classes.TRANSITION_CONTAINER} { + width: 100%; + } + } + } + && .${Classes.MENU} { + max-width: 100%; + max-height: auto; + } + width: 100%; `; const StyledMultiDropDown = styled(MultiDropDown)` - .bp3-multi-select { + div { + flex: 1 1 auto; + } + .${MultiSelectClasses.MULTISELECT} { + position: relative; min-width: 0; } + && { + ${BlueprintInputTransform} + .${Classes.TAG_INPUT} { + display: flex; + width: 100%; + align-items: center; + justify-content: space-between; + text-overflow: ellipsis; + overflow: hidden; + + .${Classes.TAG_INPUT_VALUES} { + margin-top: 0; + overflow: hidden; + padding: 2px 0; + } + .${Classes.TAG} { + background: none; + border: 1px solid #D0D7DD; + border-radius: 2px; + margin-bottom: 0; + max-width: 100px; + } + & > .${Classes.ICON} { + align-self: center; + margin-right: 10px; + color: ${Colors.SLATE_GRAY}; + } + .${Classes.INPUT_GHOST} { + width: 0px; + flex: 0 0 auto; + } + } + } + &&&& { + .${Classes.CONTROL} .${Classes.CONTROL_INDICATOR} { + background: white; + box-shadow: none; + border-width: 2px; + border-style: solid; + border-color: ${Colors.GEYSER}; + &::before { + width: auto; + height: 1em; + } + } + .${Classes.CONTROL} input:checked ~ .${Classes.CONTROL_INDICATOR} { + background: ${props => props.theme.colors.primary}; + color: ${props => props.theme.colors.textOnDarkBG}; + border-color: ${props => props.theme.colors.primary}; + } + } `; + +const StyledCheckbox = styled(Checkbox)` + &&.${Classes.CHECKBOX}.${Classes.CONTROL} { + margin: 0; + } +`; + class DropDownComponent extends React.Component { render() { const selectedItems = this.props.selectedIndexArr @@ -72,7 +203,7 @@ class DropDownComponent extends React.Component { : []; return ( - + {this.props.label && (