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

Fix richtexteditor header z-index. Remove resizable collision for Canvas Widgets. Fix issue where new containers had the same children as the previously created container's children

Browse Source
This commit is contained in:
Abhinav Jha 2020-04-02 05:44:58 +05:30
parent 292aa713f9
commit a3b05781d8
3 changed files with 33 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
app/client/src/components/designSystems/appsmith/RichTextEditorComponent.tsx
View File

@ -1,8 +1,19 @@
import React from "react"; import React from "react";
import { Editor } from "@tinymce/tinymce-react"; import { Editor } from "@tinymce/tinymce-react";
import styled from "styled-components";
require("tinymce/tinymce"); require("tinymce/tinymce");
require("tinymce/themes/silver"); require("tinymce/themes/silver");
const StyledRTEditor = styled.div`
&& {
width: 100%;
height: 100%;
.tox .tox-editor-header {
z-index: 0;
}
}
`;
export interface RichtextEditorComponentProps { export interface RichtextEditorComponentProps {
defaultValue?: string; defaultValue?: string;
placeholder?: string; placeholder?: string;
@ -15,24 +26,26 @@ export const RichtextEditorComponent = (
props: RichtextEditorComponentProps, props: RichtextEditorComponentProps,
) => { ) => {
return ( return (
<Editor <StyledRTEditor>
value={props.defaultValue} <Editor
disabled={props.isDisabled} value={props.defaultValue}
init={{ disabled={props.isDisabled}
height: "100%", init={{
menubar: false, height: "100%",
branding: false, menubar: false,
resize: false, branding: false,
plugins: [ resize: false,
"advlist autolink lists link image charmap print preview anchor", plugins: [
"searchreplace visualblocks code fullscreen", "advlist autolink lists link image charmap print preview anchor",
"insertdatetime media table paste code help", "searchreplace visualblocks code fullscreen",
], "insertdatetime media table paste code help",
toolbar: ],
"undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help", toolbar:
}} "undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help",
onEditorChange={(content: any) => props.onValueChange(content)} }}
/> onEditorChange={(content: any) => props.onValueChange(content)}
/>
</StyledRTEditor>
); );
}; };

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

@ -1,6 +1,5 @@
import React, { useContext, useMemo, useRef } from "react"; import React, { useContext, useRef } from "react";
import { XYCoord } from "react-dnd"; import { XYCoord } from "react-dnd";
import { WidgetTypes } from "constants/WidgetConstants";
import { ContainerWidgetProps } from "widgets/ContainerWidget"; import { ContainerWidgetProps } from "widgets/ContainerWidget";
import { import {
@ -74,17 +73,6 @@ export const ResizableComponent = (props: ResizableComponentProps) => {
? occupiedSpaces[props.parentId] ? occupiedSpaces[props.parentId]
: undefined; : undefined;
const maxBottomRowOfChildWidgets: number | undefined = useMemo(() => {
if (props.type === WidgetTypes.CONTAINER_WIDGET) {
const occupiedSpacesByChildren =
occupiedSpaces && occupiedSpaces[props.widgetId];
return occupiedSpacesByChildren?.reduce((prev: number, next) => {
if (next.bottom > prev) return next.bottom;
return prev;
}, 0);
}
}, [occupiedSpaces, props.type, props.widgetId]);
// isFocused (string | boolean) -> isWidgetFocused (boolean) // isFocused (string | boolean) -> isWidgetFocused (boolean)
const isWidgetFocused = const isWidgetFocused =
focusedWidget === props.widgetId || selectedWidget === props.widgetId; focusedWidget === props.widgetId || selectedWidget === props.widgetId;
@ -169,17 +157,6 @@ export const ResizableComponent = (props: ResizableComponentProps) => {
} }
if (!updated) { if (!updated) {
if (
// If this is a container widget, the maxBottomRow of child widgets should be one less than the max bottom row of the new row cols
maxBottomRowOfChildWidgets &&
newRowCols &&
props.type === WidgetTypes.CONTAINER_WIDGET &&
newRowCols.bottomRow - newRowCols.topRow - 1 <
maxBottomRowOfChildWidgets
) {
return true;
}
if ( if (
boundingElementClientRect && boundingElementClientRect &&
newRowCols.bottomRow * props.parentRowSpace > newRowCols.bottomRow * props.parentRowSpace >

2
app/client/src/sagas/WidgetOperationSagas.tsx
View File

@ -50,7 +50,6 @@ function* getChildWidgetProps(
let minHeight = undefined; let minHeight = undefined;
const widgetNames = Object.keys(widgets).map(w => widgets[w].widgetName); const widgetNames = Object.keys(widgets).map(w => widgets[w].widgetName);
const defaultConfig = yield select(getDefaultWidgetConfig, type); const defaultConfig = yield select(getDefaultWidgetConfig, type);
if (type === WidgetTypes.CANVAS_WIDGET) { if (type === WidgetTypes.CANVAS_WIDGET) {
columns = columns =
(parent.rightColumn - parent.leftColumn) * parent.parentColumnSpace; (parent.rightColumn - parent.leftColumn) * parent.parentColumnSpace;
@ -58,6 +57,7 @@ function* getChildWidgetProps(
rows = (parent.bottomRow - parent.topRow) * parent.parentRowSpace; rows = (parent.bottomRow - parent.topRow) * parent.parentRowSpace;
parentRowSpace = 1; parentRowSpace = 1;
minHeight = rows; minHeight = rows;
if (props) props.children = [];
} }
const widgetProps = { ...defaultConfig, ...props, columns, rows, minHeight }; const widgetProps = { ...defaultConfig, ...props, columns, rows, minHeight };