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

Merge branch 'release' of gitlab.com:theappsmith/internal-tools-client into release

Browse Source
This commit is contained in:
Nikhil Nandagopal 2020-01-28 13:59:49 +05:30
commit 12403e6201
23 changed files with 86 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/client/src/components/designSystems/appsmith/PositionedContainer.tsx
View File

@ -23,7 +23,6 @@ export const PositionedContainer = (props: PositionedContainerProps) => {
? theme.spaces[9]
: props.style.yPosition + (props.style.yPositionUnit || "px"),
padding: props.isMainContainer ? 0 : WIDGET_PADDING + "px",
background: "white",
}}
>
{props.children}

8
app/client/src/components/designSystems/appsmith/WidgetNameComponent.tsx
View File

@ -5,9 +5,9 @@ import { AppState } from "reducers";
const PositionStyle = styled.div<{ selected?: boolean }>`
position: absolute;
top: -${props => props.theme.spaces[10]}px;
left: ${props => props.theme.spaces[6] * 2}px;
font-size: ${props => props.theme.fontSizes[3]}px;
top: -${props => props.theme.spaces[7]}px;
left: ${props => props.theme.spaces[6]}px;
font-size: ${props => props.theme.fontSizes[2]}px;
font-weight: ${props => props.theme.fontWeights[2]};
text-align: left;
width: 100%;
@ -15,7 +15,7 @@ const PositionStyle = styled.div<{ selected?: boolean }>`
display: inline-block;
& pre {
display: inline;
padding: 5px;
padding: 3px;
background: ${props =>
props.selected
? props.theme.colors.widgetBorder

2
app/client/src/components/designSystems/blueprint/CheckboxComponent.tsx
View File

@ -24,7 +24,7 @@ class CheckboxComponent extends React.Component<CheckboxComponentProps> {
className={
this.props.isLoading ? "bp3-skeleton" : Classes.RUNNING_TEXT
}
defaultIndeterminate={this.props.defaultCheckedState}
defaultChecked={this.props.defaultCheckedState}
onChange={this.onCheckChange}
disabled={this.props.isDisabled}
/>

4
app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx
View File

@ -1,5 +1,6 @@
import React from "react";
import styled from "styled-components";
import { labelStyle } from "constants/DefaultTheme";
import { ControlGroup, Classes, Label } from "@blueprintjs/core";
import { ComponentProps } from "components/designSystems/appsmith/BaseComponent";
import { DateInput, DateRangeInput } from "@blueprintjs/datetime";
@ -11,9 +12,10 @@ import { WIDGET_PADDING } from "constants/WidgetConstants";
const StyledControlGroup = styled(ControlGroup)`
&&& {
label {
${labelStyle}
flex: 0 1 30%;
text-align: right;
margin: 0 ${WIDGET_PADDING}px 0 0;
margin: 0 ${WIDGET_PADDING * 2}px 0 0;
align-self: center;
}
}

5
app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
View File

@ -12,7 +12,7 @@ import { Select, MultiSelect, IItemRendererProps } from "@blueprintjs/select";
import _ from "lodash";
import { WIDGET_PADDING } from "constants/WidgetConstants";
import "../../../../node_modules/@blueprintjs/select/lib/css/blueprint-select.css";
import styled from "constants/DefaultTheme";
import styled, { labelStyle } from "constants/DefaultTheme";
const SingleDropDown = Select.ofType<DropdownOption>();
const MultiDropDown = MultiSelect.ofType<DropdownOption>();
@ -43,7 +43,8 @@ const StyledSingleDropDown = styled(SingleDropDown)`
const StyledControlGroup = styled(ControlGroup)`
&&& {
label {
margin: 0 ${WIDGET_PADDING}px 0 0;
${labelStyle}
margin: 0 ${WIDGET_PADDING * 2}px 0 0;
align-self: center;
flex: 0 1 30%;
text-align: right;

5
app/client/src/components/designSystems/blueprint/InputComponent.tsx
View File

@ -1,6 +1,6 @@
import React from "react";
import styled from "styled-components";
import { getBorderCSSShorthand } from "constants/DefaultTheme";
import { getBorderCSSShorthand, labelStyle } from "constants/DefaultTheme";
import { ComponentProps } from "components/designSystems/appsmith/BaseComponent";
import {
Intent,
@ -42,8 +42,9 @@ const InputComponentWrapper = styled(ControlGroup)`
}
align-items: center;
label {
${labelStyle}
flex: 0 1 30%;
margin: 0 ${WIDGET_PADDING}px 0 0;
margin: 0 ${WIDGET_PADDING * 2}px 0 0;
text-align: right;
}
}

5
app/client/src/components/designSystems/blueprint/RadioGroupComponent.tsx
View File

@ -10,13 +10,16 @@ import {
Classes,
} from "@blueprintjs/core";
import { WIDGET_PADDING } from "constants/WidgetConstants";
import { labelStyle } from "constants/DefaultTheme";
const StyledControlGroup = styled(ControlGroup)`
&&& {
& > label {
${labelStyle}
flex: 0 1 30%;
align-self: flex-start;
text-align: right;
margin: 0 ${WIDGET_PADDING}px 0 0;
margin: 0 ${WIDGET_PADDING * 2}px 0 0;
}
}
`;

20
app/client/src/components/designSystems/blueprint/TextComponent.tsx
View File

@ -5,7 +5,7 @@ import { ComponentProps } from "components/designSystems/appsmith/BaseComponent"
import { TextStyle } from "widgets/TextWidget";
import Interweave from "interweave";
import { UrlMatcher, EmailMatcher } from "interweave-autolink";
import { labelStyle } from "constants/DefaultTheme";
type TextStyleProps = {
accent: "primary" | "secondary" | "error";
};
@ -22,21 +22,24 @@ export const BaseText = styled(Text)<TextStyleProps>``;
export const TextContainer = styled.div`
&& {
text-overflow: hidden;
height: 100%;
width: 100%;
}
`;
export const StyledText = styled(Text)`
export const StyledText = styled(Text)<{ scroll: boolean }>`
height: 100%;
overflow: hidden;
overflow-y: ${props => (props.scroll ? "auto" : "hidden")};
text-overflow: ellipsis;
display: flex;
width: 100%;
justify-content: flex-start;
align-items: center;
span {
&.bp3-heading {
font-weight: ${props => props.theme.fontWeights[3]};
font-size: ${props => props.theme.fontSizes[4]}px;
}
&.bp3-ui-text {
${labelStyle}
}
`;
@ -45,6 +48,7 @@ export interface TextComponentProps extends ComponentProps {
ellipsize?: boolean;
textStyle?: TextStyle;
isLoading: boolean;
shouldScroll?: boolean;
}
class TextComponent extends React.Component<TextComponentProps> {
@ -56,12 +60,13 @@ class TextComponent extends React.Component<TextComponentProps> {
}
switch (textStyle) {
case "HEADING":
className.push(Classes.TEXT_LARGE);
className.push(Classes.HEADING);
break;
case "BODY":
className.push(Classes.RUNNING_TEXT);
break;
case "LABEL":
className.push(Classes.UI_TEXT);
break;
default:
break;
@ -75,6 +80,7 @@ class TextComponent extends React.Component<TextComponentProps> {
return (
<TextContainer>
<StyledText
scroll={!!this.props.shouldScroll}
className={this.getTextClass(textStyle)}
ellipsize={ellipsize}
>

7
app/client/src/components/editorComponents/Button.tsx
View File

@ -25,7 +25,7 @@ const buttonStyles = css<{
&&&& {
padding: ${props =>
props.filled || props.outline
? props.theme.spaces[3] + "px " + props.theme.spaces[3] + "px"
? props.theme.spaces[2] + "px " + props.theme.spaces[3] + "px"
: 0};
background: ${props =>
props.filled || props.outline ? "auto" : "transparent"};
@ -59,7 +59,7 @@ export type ButtonProps = {
iconAlignment?: Direction;
loading?: boolean;
disabled?: boolean;
large?: boolean;
size?: "large" | "small";
};
export const Button = (props: ButtonProps) => {
@ -80,7 +80,8 @@ export const Button = (props: ButtonProps) => {
outline: props.outline ? props.outline.toString() : undefined,
filled: props.filled ? props.filled.toString() : undefined,
intent: props.intent as BlueprintIntent,
large: props.large === undefined ? true : props.large,
large: props.size === "large",
small: props.size === "small",
loading: props.loading,
disabled: props.disabled,
};

4
app/client/src/components/editorComponents/DraggableComponent.tsx
View File

@ -247,11 +247,11 @@ const DraggableComponent = (props: DraggableComponentProps) => {
{props.children}
<DragHandle className="control" ref={drag}>
{/* <DragHandle className="control" ref={drag}>
<Tooltip content="Move" hoverOpenDelay={500}>
{moveControlIcon}
</Tooltip>
</DragHandle>
</DragHandle> */}
<DeleteControl className="control" onClick={deleteWidget}>
<Tooltip content="Delete" hoverOpenDelay={500}>
{deleteControlIcon}

1
app/client/src/components/editorComponents/DropTargetComponent.tsx
View File

@ -260,6 +260,7 @@ export const DropTargetComponent = (props: DropTargetComponentProps) => {
marginBottom,
userSelect: "none",
opacity: 0.99,
background: "none",
}}
>
{props.children}

4
app/client/src/components/editorComponents/ResizableContainer.tsx
View File

@ -29,13 +29,13 @@ const borderCSS = css<ResizeBorderDotDivProps>`
export const ResizeBorderDotDiv = styled.div<ResizeBorderDotDivProps>`
${borderCSS}
&:after {
left: -${props => props.theme.spaces[5]}px;
left: -${props => props.theme.spaces[2]}px;
top: calc(50% - ${props => props.theme.spaces[1]}px);
z-index: 0;
}
&:before {
left: calc(50% - ${props => props.theme.spaces[1]}px);
top: -${props => props.theme.spaces[5]}px;
top: -${props => props.theme.spaces[2]}px;
z-index: 1;
}
`;

2
app/client/src/components/propertyControls/OptionControl.tsx
View File

@ -15,7 +15,7 @@ import { AnyStyledComponent } from "styled-components";
const StyledDeleteIcon = styled(FormIcons.DELETE_ICON as AnyStyledComponent)`
padding: 5px 5px;
position: absolute;
right: -13px;
right: -4px;
cursor: pointer;
`;

11
app/client/src/constants/DefaultTheme.tsx
View File

@ -62,12 +62,15 @@ export const BlueprintButtonIntentsCSS = css`
border-width: 1px;
border-style: solid;
outline: none;
min-width: 100px;
min-width: 50px;
color: ${IntentColors.secondary};
border-color: ${IntentColors.none};
& span.bp3-icon {
color: ${IntentColors.none};
}
& span {
font-weight: ${props => props.theme.fontWeights[3]};
}
background: ${Colors.WHITE};
}
&&&.bp3-button.bp3-intent-primary:not(.bp3-minimal) {
@ -195,13 +198,17 @@ export const getBorderCSSShorthand = (border?: ThemeBorder): string => {
return values.join(" ");
};
export const labelStyle = css`
font-weight: ${props => props.theme.fontWeights[3]};
`;
export const theme: Theme = {
radii: [0, 4, 8, 10, 20, 50],
fontSizes: [0, 10, 12, 14, 16, 18, 24, 28, 32, 48, 64],
spaces: [0, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 30, 36],
fontWeights: [0, 400, 500, 700],
propertyPane: {
width: 250,
width: 270,
height: 600,
dividerColor: Colors.MAKO,
},

6
app/client/src/constants/WidgetConstants.tsx
View File

@ -77,13 +77,13 @@ export const GridDefaults = {
DEFAULT_WIDGET_WIDTH: 200,
DEFAULT_WIDGET_HEIGHT: 100,
DEFAULT_GRID_COLUMNS: 16,
DEFAULT_GRID_ROW_HEIGHT: 50,
DEFAULT_GRID_ROW_HEIGHT: 38,
};
export const CONTAINER_GRID_PADDING =
(GridDefaults.DEFAULT_GRID_ROW_HEIGHT / 2) * 0.6;
(GridDefaults.DEFAULT_GRID_ROW_HEIGHT / 2) * 0.8;
export const WIDGET_PADDING = (GridDefaults.DEFAULT_GRID_ROW_HEIGHT / 2) * 0.4;
export const WIDGET_PADDING = (GridDefaults.DEFAULT_GRID_ROW_HEIGHT / 2) * 0.2;
export const WIDGET_CLASSNAME_PREFIX = "WIDGET_";
export const MAIN_CONTAINER_WIDGET_ID = "0";

8
app/client/src/index.css
View File

@ -52,6 +52,14 @@ div.bp3-popover-arrow {
cursor: default !important;
}
.bp3-intent-primary, input:checked ~ span.bp3-control-indicator {
background: #29CCA3 !important;
box-shadow: none !important;
}
.bp3-intent-primary {
border-radius: 4px !important;
}
.pace {
-webkit-pointer-events: none;
pointer-events: none;

2
app/client/src/mockResponses/WidgetConfigResponse.tsx
View File

@ -128,7 +128,7 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
RADIO_GROUP_WIDGET: {
rows: 2,
columns: 5,
label: "Labels",
label: "Label",
options: [
{ id: "1", label: "Alpha", value: "1" },
{ id: "2", label: "Bravo", value: "2" },

26
app/client/src/pages/Applications/ApplicationCard.tsx
View File

@ -95,14 +95,21 @@ const ApplicationTitle = styled.div`
`;
const ApplicationImage = styled.div`
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
& {
.control {
display: none;
&& {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
& {
.control {
display: none;
button {
span {
font-weight: ${props => props.theme.fontWeights[3]};
}
}
}
}
}
`;
@ -183,7 +190,7 @@ export const ApplicationCard = (props: ApplicationCardProps) => {
<span>{props.application.name}</span>
<Link to={viewApplicationURL}>
<Control className="control">
<Tooltip content="View Application" hoverOpenDelay={500}>
<Tooltip content="Launch App" hoverOpenDelay={500}>
{viewControlIcon}
</Tooltip>
</Control>
@ -207,6 +214,7 @@ export const ApplicationCard = (props: ApplicationCardProps) => {
intent="primary"
icon="edit"
iconAlignment="left"
size="small"
/>
</Control>
</ApplicationImage>

4
app/client/src/pages/Editor/EditorHeader.tsx
View File

@ -129,7 +129,7 @@ export const EditorHeader = (props: EditorHeaderProps) => {
<StretchedBreadCrumb items={navigation} />
<CustomizedDropdown {...pageSelectorData} />
<LoadingContainer>
{props.isSaving ? "Saving..." : "All changed Saved"}
{props.isSaving ? "Saving..." : "All changes saved"}
</LoadingContainer>
<PreviewPublishSection>
<Tooltip
@ -147,7 +147,7 @@ export const EditorHeader = (props: EditorHeaderProps) => {
loading={props.isPublishing}
intent="primary"
filled
large={false}
size="small"
/>
</Tooltip>
</PreviewPublishSection>

1
app/client/src/pages/Editor/Popper.tsx
View File

@ -21,6 +21,7 @@ const PopperWrapper = styled(PaneWrapper)`
${props => props.theme.colors.paneBG};
border-right: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 0 ${props => props.theme.spaces[5]}px 0 0;
scrollbar-color: ${props => props.theme.colors.paneCard}

1
app/client/src/pages/Editor/PropertyPane.tsx
View File

@ -47,6 +47,7 @@ const PropertyPaneTitle = styled.div`
const PropertyPaneWrapper = styled.div`
position: relative;
width: 100%;
`;
class PropertyPane extends Component<

2
app/client/src/pages/common/CustomizedDropdown/StyledComponents.tsx
View File

@ -25,7 +25,7 @@ export const DropdownTrigger = styled.div`
`;
export const DropdownContent = styled.div`
&&& * {
font-size: ${props => props.theme.fontSizes[4]}px;
font-size: ${props => props.theme.fontSizes[3]}px;
}
`;

2
app/client/src/widgets/TextWidget.tsx
View File

@ -36,6 +36,7 @@ class TextWidget extends BaseWidget<TextWidgetProps, WidgetState> {
textStyle={this.props.textStyle}
text={this.props.text}
isLoading={this.props.isLoading}
shouldScroll={this.props.shouldScroll}
// lines={lines}
/>
);
@ -52,6 +53,7 @@ export interface TextWidgetProps extends WidgetProps {
text?: string;
textStyle: TextStyle;
isLoading: boolean;
shouldScroll: boolean;
}
export default TextWidget;