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

Merge branch 'fix/bug-413' into 'release'

Browse Source 
Fix #413: Adhere widget name and controls to designs

- Widget Name now adheres to designs
- Position and sizes of widget controls now adhere to designs.

See merge request theappsmith/internal-tools-client!198
This commit is contained in:
Abhinav Jha 2019-12-19 06:52:31 +00:00
commit 9f3e69b60c
4 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,9 +6,10 @@ import { DraggableComponentContext } from "components/editorComponents/Draggable
const PositionStyle = styled.div` const PositionStyle = styled.div`
position: absolute; position: absolute;
top: -${props => props.theme.spaces[10]}px; top: -${props => props.theme.spaces[10]}px;
left: ${props => props.theme.spaces[6]}px; left: ${props => props.theme.spaces[6] * 2}px;
font-size: ${props => props.theme.fontSizes[2]}px; font-size: ${props => props.theme.fontSizes[3]}px;
color: ${props => props.theme.colors.containerBorder}; font-weight: ${props => props.theme.fontWeights[2]};
color: ${props => props.theme.colors.widgetName};
text-align: left; text-align: left;
width: 100%; width: 100%;
z-index: 1; z-index: 1;

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

@ -13,7 +13,6 @@ import blankImage from "assets/images/blank.png";
import { FocusContext } from "pages/Editor/Canvas"; import { FocusContext } from "pages/Editor/Canvas";
import { EditorContext } from "components/editorComponents/EditorContextProvider"; import { EditorContext } from "components/editorComponents/EditorContextProvider";
import { ControlIcons } from "icons/ControlIcons"; import { ControlIcons } from "icons/ControlIcons";
import { theme } from "constants/DefaultTheme";
import { ResizingContext } from "./DropTargetComponent"; import { ResizingContext } from "./DropTargetComponent";
import { Tooltip } from "@blueprintjs/core"; import { Tooltip } from "@blueprintjs/core";
@ -33,8 +32,8 @@ const DraggableWrapper = styled.div<{ show: boolean }>`
const DragHandle = styled.div` const DragHandle = styled.div`
position: absolute; position: absolute;
left: -${props => props.theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX] / 2}px; left: 0px;
top: -${props => props.theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX] / 2}px; top: -${props => props.theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX]}px;
cursor: move; cursor: move;
display: none; display: none;
cursor: grab; cursor: grab;
@ -43,15 +42,15 @@ const DragHandle = styled.div`
const DeleteControl = styled.div` const DeleteControl = styled.div`
position: absolute; position: absolute;
right: ${props => props.theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX]}px; right: ${props => props.theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX]}px;
top: -${props => props.theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX] / 2}px; top: -${props => props.theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX]}px;
display: none; display: none;
cursor: pointer; cursor: pointer;
`; `;
const EditControl = styled.div` const EditControl = styled.div`
position: absolute; position: absolute;
right: -${props => props.theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX] / 2}px; right: 0;
top: -${props => props.theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX] / 2}px; top: -${props => props.theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX]}px;
display: none; display: none;
cursor: pointer; cursor: pointer;
`; `;
@ -65,19 +64,21 @@ const DraggableMask = styled.div`
z-index: -1; z-index: -1;
`; `;
const CONTROL_ICON_SIZE = 20;
const moveControlIcon = ControlIcons.MOVE_CONTROL({ const moveControlIcon = ControlIcons.MOVE_CONTROL({
width: theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX], width: CONTROL_ICON_SIZE,
height: theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX], height: CONTROL_ICON_SIZE,
}); });
const deleteControlIcon = ControlIcons.DELETE_CONTROL({ const deleteControlIcon = ControlIcons.DELETE_CONTROL({
width: theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX], width: CONTROL_ICON_SIZE,
height: theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX], height: CONTROL_ICON_SIZE,
}); });
const editControlIcon = ControlIcons.EDIT_CONTROL({ const editControlIcon = ControlIcons.EDIT_CONTROL({
width: theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX], width: CONTROL_ICON_SIZE,
height: theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX], height: CONTROL_ICON_SIZE,
}); });
type DraggableComponentProps = ContainerWidgetProps<WidgetProps>; type DraggableComponentProps = ContainerWidgetProps<WidgetProps>;

1
app/client/src/constants/Colors.tsx
View File

@ -32,6 +32,7 @@ export const Colors: Record<string, string> = {
FRENCH_PASS: "#BBE8FE", FRENCH_PASS: "#BBE8FE",
CADET_BLUE: "#A3B3BF", CADET_BLUE: "#A3B3BF",
JAFFA: "#F2994A", JAFFA: "#F2994A",
BLUE_BAYOUX: "#4E5D78",
}; };
export type Color = typeof Colors[keyof typeof Colors]; export type Color = typeof Colors[keyof typeof Colors];

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

@ -158,6 +158,7 @@ export const theme: Theme = {
menuIconColorInactive: Colors.OXFORD_BLUE, menuIconColorInactive: Colors.OXFORD_BLUE,
bodyBG: Colors.ATHENS_GRAY, bodyBG: Colors.ATHENS_GRAY,
builderBodyBG: Colors.WHITE, builderBodyBG: Colors.WHITE,
widgetName: Colors.BLUE_BAYOUX,
}, },
lineHeights: [0, 14, 18, 22, 24, 28, 36, 48, 64, 80], lineHeights: [0, 14, 18, 22, 24, 28, 36, 48, 64, 80],
fonts: [ fonts: [