Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: Styling issues with the buttons on the platform (#7365)

Browse Source 
Fix button styles in platform and also update stat box widget icon svg
This commit is contained in:
Abhinav Jha 2021-09-15 16:45:21 +05:30 committed by GitHub
parent cf3b4ae1be
commit d94408776f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 345 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

429
app/client/src/components/designSystems/appsmith/BaseButton.tsx
View File

@ -1,65 +1,224 @@
import React from "react";
import { IButtonProps, Button } from "@blueprintjs/core";
import { darkenActive, darkenHover, Theme } from "constants/DefaultTheme";
import styled, { css } from "styled-components";
import { omit } from "lodash";
import { ButtonStyleType, ButtonVariant } from "components/constants";
export type ButtonStyleName = "primary" | "secondary" | "error";
import styled from "styled-components";
import tinycolor from "tinycolor2";
type ButtonStyleProps = {
accent?: ButtonStyleName;
filled?: boolean;
buttonStyle?: ButtonStyleType;
buttonVariant?: ButtonVariant;
import { IButtonProps, Button, Alignment } from "@blueprintjs/core";
import { IconName } from "@blueprintjs/icons";
import { Theme } from "constants/DefaultTheme";
import { ThemeProp } from "components/ads/common";
import _ from "lodash";
import {
ButtonStyleTypes,
ButtonBoxShadow,
ButtonBoxShadowTypes,
ButtonBorderRadius,
ButtonBorderRadiusTypes,
ButtonStyleType,
ButtonVariant,
ButtonVariantTypes,
} from "components/constants";
const getCustomTextColor = (
theme: Theme,
backgroundColor?: string,
prevButtonStyle?: ButtonStyleType,
) => {
if (!backgroundColor)
return theme.colors.button[
(prevButtonStyle || ButtonStyleTypes.PRIMARY).toLowerCase()
].solid.textColor;
const isDark = tinycolor(backgroundColor).isDark();
if (isDark) {
return theme.colors.button.custom.solid.light.textColor;
}
return theme.colors.button.custom.solid.dark.textColor;
};
const AccentColorMap: Record<ButtonStyleName, string> = {
primary: "primaryOld",
secondary: "secondaryOld",
error: "error",
};
const getCustomHoverColor = (
theme: Theme,
prevButtonStyle?: ButtonStyleType,
buttonVariant?: ButtonVariant,
backgroundColor?: string,
) => {
if (!backgroundColor) {
return theme.colors.button[
(prevButtonStyle || ButtonStyleTypes.PRIMARY).toLowerCase()
][(buttonVariant || ButtonVariantTypes.SOLID).toLowerCase()].hoverColor;
}
const getButtonColorStyles = (props: { theme: Theme } & ButtonStyleProps) => {
if (props.filled) return props.theme.colors.textOnDarkBG;
if (props.accent) {
if (props.accent === "secondary") {
return props.theme.colors[AccentColorMap["primary"]];
}
return props.theme.colors[AccentColorMap[props.accent]];
switch (buttonVariant) {
case ButtonVariantTypes.OUTLINE:
return backgroundColor
? tinycolor(backgroundColor)
.lighten(40)
.toString()
: theme.colors.button.primary.outline.hoverColor;
case ButtonVariantTypes.GHOST:
return backgroundColor
? tinycolor(backgroundColor)
.lighten(40)
.toString()
: theme.colors.button.primary.ghost.hoverColor;
default:
return backgroundColor
? tinycolor(backgroundColor)
.darken(10)
.toString()
: theme.colors.button.primary.solid.hoverColor;
}
};
const ButtonColorStyles = css<ButtonStyleProps>`
color: ${getButtonColorStyles};
svg {
fill: ${getButtonColorStyles};
}
`;
const getCustomBackgroundColor = (
theme: Theme,
prevButtonStyle?: ButtonStyleType,
buttonVariant?: ButtonVariant,
backgroundColor?: string,
) => {
return buttonVariant === ButtonVariantTypes.SOLID
? backgroundColor
? backgroundColor
: theme.colors.button[
(prevButtonStyle || ButtonStyleTypes.PRIMARY).toLowerCase()
].solid.bgColor
: "none";
};
const ButtonWrapper = styled((props: ButtonStyleProps & IButtonProps) => (
<Button {...omit(props, ["accent", "filled"])} />
))<ButtonStyleProps>`
&&&& {
${ButtonColorStyles};
width: 100%;
height: 100%;
transition: background-color 0.2s;
background-color: ${(props) =>
props.filled &&
props.accent &&
props.theme.colors[AccentColorMap[props.accent]]};
border: 1px solid
${(props) =>
props.accent
? props.theme.colors[AccentColorMap[props.accent]]
: props.theme.colors.primary};
border-radius: 0;
font-weight: ${(props) => props.theme.fontWeights[2]};
outline: none;
&.bp3-button {
padding: 0px 10px;
const getCustomBorderColor = (
theme: Theme,
prevButtonStyle?: ButtonStyleType,
buttonVariant?: ButtonVariant,
backgroundColor?: string,
) => {
return buttonVariant === ButtonVariantTypes.OUTLINE
? backgroundColor
? backgroundColor
: theme.colors.button[
(prevButtonStyle || ButtonStyleTypes.PRIMARY).toLowerCase()
].outline.borderColor
: "none";
};
const StyledButton = styled((props) => (
<Button
{..._.omit(props, [
"prevButtonStyle",
"borderRadius",
"boxShadow",
"boxShadowColor",
"buttonColor",
"buttonStyle",
"buttonVariant",
])}
/>
))<ThemeProp & ButtonStyleProps>`
height: 100%;
background-image: none !important;
font-weight: ${(props) => props.theme.fontWeights[2]};
outline: none;
padding: 0px 10px;
${({ buttonColor, buttonStyle, buttonVariant, prevButtonStyle, theme }) => `
&:enabled {
background: ${
buttonStyle === ButtonStyleTypes.WARNING
? buttonVariant === ButtonVariantTypes.SOLID
? theme.colors.button.warning.solid.bgColor
: "none"
: buttonStyle === ButtonStyleTypes.DANGER
? buttonVariant === ButtonVariantTypes.SOLID
? theme.colors.button.danger.solid.bgColor
: "none"
: buttonStyle === ButtonStyleTypes.INFO
? buttonVariant === ButtonVariantTypes.SOLID
? theme.colors.button.info.solid.bgColor
: "none"
: buttonStyle === ButtonStyleTypes.SECONDARY
? buttonVariant === ButtonVariantTypes.SOLID
? theme.colors.button.secondary.solid.bgColor
: "none"
: buttonStyle === ButtonStyleTypes.CUSTOM
? getCustomBackgroundColor(
theme,
prevButtonStyle,
buttonVariant,
buttonColor,
)
: buttonVariant === ButtonVariantTypes.SOLID
? theme.colors.button.primary.solid.bgColor
: "none"
} !important;
}
&& .bp3-button-text {
&:hover:enabled, &:active:enabled {
background: ${
buttonStyle === ButtonStyleTypes.WARNING
? buttonVariant === ButtonVariantTypes.OUTLINE
? theme.colors.button.warning.outline.hoverColor
: buttonVariant === ButtonVariantTypes.GHOST
? theme.colors.button.warning.ghost.hoverColor
: theme.colors.button.warning.solid.hoverColor
: buttonStyle === ButtonStyleTypes.DANGER
? buttonVariant === ButtonVariantTypes.SOLID
? theme.colors.button.danger.solid.hoverColor
: theme.colors.button.danger.outline.hoverColor
: buttonStyle === ButtonStyleTypes.INFO
? buttonVariant === ButtonVariantTypes.SOLID
? theme.colors.button.info.solid.hoverColor
: theme.colors.button.info.outline.hoverColor
: buttonStyle === ButtonStyleTypes.SECONDARY
? buttonVariant === ButtonVariantTypes.OUTLINE
? theme.colors.button.secondary.outline.hoverColor
: buttonVariant === ButtonVariantTypes.GHOST
? theme.colors.button.secondary.ghost.hoverColor
: theme.colors.button.secondary.solid.hoverColor
: buttonStyle === ButtonStyleTypes.CUSTOM
? getCustomHoverColor(
theme,
prevButtonStyle,
buttonVariant,
buttonColor,
)
: buttonVariant === ButtonVariantTypes.OUTLINE
? theme.colors.button.primary.outline.hoverColor
: buttonVariant === ButtonVariantTypes.GHOST
? theme.colors.button.primary.ghost.hoverColor
: theme.colors.button.primary.solid.hoverColor
} !important;
}
&:disabled {
background-color: ${theme.colors.button.disabled.bgColor} !important;
color: ${theme.colors.button.disabled.textColor} !important;
}
border: ${
buttonVariant === ButtonVariantTypes.OUTLINE
? buttonStyle === ButtonStyleTypes.WARNING
? `1px solid ${theme.colors.button.warning.outline.borderColor}`
: buttonStyle === ButtonStyleTypes.DANGER
? `1px solid ${theme.colors.button.danger.outline.borderColor}`
: buttonStyle === ButtonStyleTypes.INFO
? `1px solid ${theme.colors.button.info.outline.borderColor}`
: buttonStyle === ButtonStyleTypes.SECONDARY
? `1px solid ${theme.colors.button.secondary.outline.borderColor}`
: buttonStyle === ButtonStyleTypes.CUSTOM
? `1px solid ${getCustomBorderColor(
theme,
prevButtonStyle,
buttonVariant,
buttonColor,
)}`
: `1px solid ${theme.colors.button.primary.outline.borderColor}`
: "none"
} !important;
& > span {
max-height: 100%;
max-width: 99%;
text-overflow: ellipsis;
overflow: hidden;
@ -67,48 +226,136 @@ const ButtonWrapper = styled((props: ButtonStyleProps & IButtonProps) => (
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
max-height: 100%;
overflow: hidden;
color: ${
buttonVariant === ButtonVariantTypes.SOLID
? buttonStyle === ButtonStyleTypes.CUSTOM
? getCustomTextColor(theme, buttonColor, prevButtonStyle)
: `${theme.colors.button.primary.solid.textColor}`
: buttonStyle === ButtonStyleTypes.WARNING
? `${theme.colors.button.warning.outline.textColor}`
: buttonStyle === ButtonStyleTypes.DANGER
? `${theme.colors.button.danger.outline.textColor}`
: buttonStyle === ButtonStyleTypes.INFO
? `${theme.colors.button.info.outline.textColor}`
: buttonStyle === ButtonStyleTypes.SECONDARY
? `${theme.colors.button.secondary.outline.textColor}`
: buttonStyle === ButtonStyleTypes.CUSTOM
? getCustomBackgroundColor(
theme,
prevButtonStyle,
ButtonVariantTypes.SOLID,
buttonColor,
)
: `${theme.colors.button.primary.outline.textColor}`
} !important;
}
&&:hover,
&&:focus {
${ButtonColorStyles};
background-color: ${(props) => {
if (!props.filled) return props.theme.colors.secondaryDarker;
if (props.accent !== "secondary" && props.accent) {
return darkenHover(props.theme.colors[AccentColorMap[props.accent]]);
}
}};
border-color: ${(props) => {
if (!props.filled) return;
if (props.accent !== "secondary" && props.accent) {
return darkenHover(props.theme.colors[AccentColorMap[props.accent]]);
}
}};
}
&&:active {
${ButtonColorStyles};
background-color: ${(props) => {
if (!props.filled) return props.theme.colors.secondaryDarkest;
if (props.accent !== "secondary" && props.accent) {
return darkenActive(props.theme.colors[AccentColorMap[props.accent]]);
}
}};
border-color: ${(props) => {
if (!props.filled) return;
if (props.accent !== "secondary" && props.accent) {
return darkenActive(props.theme.colors[AccentColorMap[props.accent]]);
}
}};
}
&&.bp3-disabled {
background-color: #d0d7dd;
border: none;
}
}
`}
border-radius: ${({ borderRadius }) =>
borderRadius === ButtonBorderRadiusTypes.ROUNDED ? "5px" : 0};
box-shadow: ${({ boxShadow, boxShadowColor, theme }) =>
boxShadow === ButtonBoxShadowTypes.VARIANT1
? `0px 0px 4px 3px ${boxShadowColor ||
theme.colors.button.boxShadow.default.variant1}`
: boxShadow === ButtonBoxShadowTypes.VARIANT2
? `3px 3px 4px ${boxShadowColor ||
theme.colors.button.boxShadow.default.variant2}`
: boxShadow === ButtonBoxShadowTypes.VARIANT3
? `0px 1px 3px ${boxShadowColor ||
theme.colors.button.boxShadow.default.variant3}`
: boxShadow === ButtonBoxShadowTypes.VARIANT4
? `2px 2px 0px ${boxShadowColor ||
theme.colors.button.boxShadow.default.variant4}`
: boxShadow === ButtonBoxShadowTypes.VARIANT5
? `-2px -2px 0px ${boxShadowColor ||
theme.colors.button.boxShadow.default.variant5}`
: "none"} !important;
`;
type ButtonStyleProps = {
buttonColor?: string;
buttonStyle?: ButtonStyleType;
prevButtonStyle?: ButtonStyleType;
buttonVariant?: ButtonVariant;
boxShadow?: ButtonBoxShadow;
boxShadowColor?: string;
borderRadius?: ButtonBorderRadius;
iconName?: IconName;
iconAlign?: Alignment;
};
// To be used in any other part of the app
export function BaseButton(props: IButtonProps & ButtonStyleProps) {
return <ButtonWrapper {...props} />;
const {
borderRadius,
boxShadow,
boxShadowColor,
buttonColor,
buttonStyle,
buttonVariant,
className,
disabled,
icon,
iconAlign,
iconName,
loading,
onClick,
prevButtonStyle,
rightIcon,
text,
} = props;
if (iconAlign === Alignment.RIGHT) {
return (
<StyledButton
alignText={iconName ? Alignment.LEFT : Alignment.CENTER}
borderRadius={borderRadius}
boxShadow={boxShadow}
boxShadowColor={boxShadowColor}
buttonColor={buttonColor}
buttonStyle={buttonStyle}
buttonVariant={buttonVariant}
className={className}
disabled={disabled}
fill
icon={icon}
loading={loading}
onClick={onClick}
prevButtonStyle={prevButtonStyle}
rightIcon={iconName || rightIcon}
text={text}
/>
);
}
return (
<StyledButton
alignText={iconName ? Alignment.RIGHT : Alignment.CENTER}
borderRadius={borderRadius}
boxShadow={boxShadow}
boxShadowColor={boxShadowColor}
buttonColor={buttonColor}
buttonStyle={buttonStyle}
buttonVariant={buttonVariant}
className={className}
disabled={disabled}
fill
icon={iconName || icon}
loading={loading}
onClick={onClick}
prevButtonStyle={prevButtonStyle}
rightIcon={rightIcon}
text={text}
/>
);
}
BaseButton.defaultProps = {
buttonStyle: "SECONDARY",
buttonVariant: "SOLID",
disabled: false,
text: "Button Text",
minimal: true,
};

2
app/client/src/pages/Editor/DataSourceEditor/JSONtoForm.tsx
View File

@ -9,8 +9,8 @@ import { isHidden } from "components/formControls/utils";
import log from "loglevel";
import CenteredWrapper from "components/designSystems/appsmith/CenteredWrapper";
import CloseEditor from "components/editorComponents/CloseEditor";
import { BaseButton } from "components/designSystems/appsmith/BaseButton";
import { getType, Types } from "utils/TypeHelpers";
import { BaseButton } from "components/designSystems/appsmith/BaseButton";
export const LoadingContainer = styled(CenteredWrapper)`
height: 50%;

2
app/client/src/utils/WidgetRegistry.tsx
View File

@ -89,7 +89,7 @@ import StatboxWidget, {
} from "widgets/StatboxWidget";
import FilePickerWidgetV2, {
CONFIG as FILEPICKER_WIDGET_V2_CONFIG,
} from "widgets/FilePickerWidgetV2Widget";
} from "widgets/FilePickerWidgetV2";
import AudioRecorderWidget, {
CONFIG as AUDIO_RECORDER_WIDGET_CONFIG,

0
app/client/src/widgets/FilePickerWidgetV2Widget/component/index.tsx → app/client/src/widgets/FilePickerWidgetV2/component/index.tsx
View File

0
app/client/src/widgets/FilePickerWidgetV2Widget/constants.ts → app/client/src/widgets/FilePickerWidgetV2/constants.ts
View File

0
app/client/src/widgets/FilePickerWidgetV2Widget/icon.svg → app/client/src/widgets/FilePickerWidgetV2/icon.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 619 B

After

Width:  |  Height:  |  Size: 619 B

0
app/client/src/widgets/FilePickerWidgetV2Widget/index.ts → app/client/src/widgets/FilePickerWidgetV2/index.ts
View File

0
app/client/src/widgets/FilePickerWidgetV2Widget/widget/index.tsx → app/client/src/widgets/FilePickerWidgetV2/widget/index.tsx
View File

5
app/client/src/widgets/FilepickerWidget/component/index.tsx
View File

@ -3,7 +3,7 @@ import { ComponentProps } from "widgets/BaseComponent";
import "@uppy/core/dist/style.css";
import "@uppy/dashboard/dist/style.css";
import "@uppy/webcam/dist/style.css";
import { BaseButton } from "components/designSystems/appsmith/BaseButton";
import { BaseButton } from "widgets/ButtonWidget/component";
class FilePickerComponent extends React.Component<
FilePickerComponentProps,
@ -29,9 +29,8 @@ class FilePickerComponent extends React.Component<
}
return (
<BaseButton
accent="primary"
buttonStyle="PRIMARY"
disabled={this.props.isDisabled}
filled
loading={this.props.isLoading}
onClick={this.openModal}
text={label}

4
app/client/src/widgets/StatboxWidget/icon.svg
View File

@ -1 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><rect width="22" height="22" x="1" y="1" stroke="#fff" stroke-dasharray="3 1" stroke-width="2"/></svg>
<svg width="32" height="16" viewBox="0 0 32 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 2C0 0.895431 0.895431 0 2 0H30C31.1046 0 32 0.895431 32 2V14C32 15.1046 31.1046 16 30 16H2C0.895431 16 0 15.1046 0 14V2ZM22.9758 5.77803C22.9746 5.64692 23.0255 5.52156 23.1174 5.42952C23.2092 5.33749 23.3345 5.28631 23.4656 5.28725L27.6613 5.31788C27.7924 5.31886 27.9187 5.37187 28.0123 5.46526C28.1058 5.55865 28.1591 5.68476 28.1603 5.81588L28.1995 10.0115C28.1984 10.1411 28.1465 10.2643 28.0549 10.3545C27.9633 10.4447 27.8393 10.4947 27.7096 10.4938C27.58 10.4928 27.455 10.441 27.3617 10.3495C27.2684 10.2579 27.2141 10.134 27.2107 10.0043L27.1827 7.00232L23.1695 11.0237C23.0776 11.1157 22.9523 11.1669 22.8212 11.1659C22.6901 11.165 22.5638 11.112 22.4702 11.0186C22.3766 10.9251 22.3233 10.799 22.3221 10.6679C22.3209 10.5367 22.3718 10.4113 22.4637 10.3193L26.4769 6.29794L23.4748 6.27603C23.3437 6.27505 23.2175 6.22204 23.1239 6.12865C23.0303 6.03526 22.9771 5.90914 22.9758 5.77803ZM4.94141 4.95703V12H6.25391V3.54492H4.94727L2.7207 5.11523V6.45703L4.8418 4.95703H4.94141ZM10.2414 4.08398C9.71016 4.57617 9.44453 5.21094 9.44453 5.98828V6.00586H10.6867V5.98828C10.6867 5.53516 10.8293 5.16992 11.1145 4.89258C11.4035 4.61523 11.7805 4.47656 12.2453 4.47656C12.6828 4.47656 13.048 4.60547 13.341 4.86328C13.634 5.12109 13.7805 5.44336 13.7805 5.83008C13.7805 6.14258 13.6867 6.44922 13.4992 6.75C13.3117 7.04688 12.9367 7.48828 12.3742 8.07422L9.51484 11.0508V12H15.2102V10.8223H11.343V10.7227L13.2238 8.81836C13.9309 8.10352 14.4152 7.52734 14.677 7.08984C14.9426 6.64844 15.0754 6.20312 15.0754 5.75391C15.0754 5.05859 14.8117 4.48242 14.2844 4.02539C13.757 3.56836 13.091 3.33984 12.2863 3.33984C11.4543 3.33984 10.7727 3.58789 10.2414 4.08398Z" fill="#C4C4C4"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 197 B

After

Width:  |  Height:  |  Size: 1.8 KiB