From 970cf60bddb926094aac8d3220d067e29a880dbc Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Fri, 28 Feb 2020 23:38:33 +0800 Subject: [PATCH 01/42] implement new CardTemplate --- .../nodes/templates/CardTemplate.tsx | 114 ++++++++++++++++++ 1 file changed, 114 insertions(+) create mode 100644 Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx diff --git a/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx b/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx new file mode 100644 index 0000000000..e12171193e --- /dev/null +++ b/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx @@ -0,0 +1,114 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +/** @jsx jsx */ +import { jsx, css } from '@emotion/core'; +import { FC, ReactNode } from 'react'; + +import { StandardNodeWidth, HeaderHeight } from '../../../constants/ElementSizes'; +import { ObiColors } from '../../../constants/ElementColors'; + +const containerCSS = css` + font-size: 12px; + cursor: pointer; + overflow: hidden; + background-color: white; + border-radius: 2px 2px 0 0; + box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1); +`; + +const headerCSS = css` + font-family: Segoe UI; + font-size: 12px; + line-height: 14px; + color: black; +`; + +const fullWidthSection = css` + width: 100%; + box-sizing: border-box; +`; + +export interface CardTemplateProps { + header: ReactNode; + body?: ReactNode; + footer?: ReactNode; + onClick?: (event: React.MouseEvent) => void; + onClickHeader?: (event: React.MouseEvent) => void; + onClickBody?: (event: React.MouseEvent) => void; + onClickFooter?: (event: React.MouseEvent) => void; +} + +export const CardTemplate: FC = ({ + header, + body, + footer, + onClick, + onClickHeader, + onClickBody, + onClickFooter, +}) => { + const renderHeader = (header: ReactNode) => ( +
+ {header} +
+ ); + + const renderBody = (body: ReactNode) => ( +
+ {body} +
+ ); + + const renderFooter = (footer: ReactNode) => ( +
+ {footer} +
+ ); + + return ( +
{ + e.stopPropagation(); + onClick(e); + } + : undefined + } + > + {renderHeader(header)} + {body && renderBody(body)} + {footer && renderFooter(footer)} +
+ ); +}; From 40de6b01af287b80d3f9ad65ba8857af4eef519b Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Sat, 29 Feb 2020 00:09:38 +0800 Subject: [PATCH 02/42] show icon inside ActionHeader --- .../src/widgets/ActionHeader.tsx | 36 ++++++++++++++++--- 1 file changed, 31 insertions(+), 5 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/widgets/ActionHeader.tsx b/Composer/packages/extensions/visual-designer/src/widgets/ActionHeader.tsx index e8b7db1dd6..ce7b9448d3 100644 --- a/Composer/packages/extensions/visual-designer/src/widgets/ActionHeader.tsx +++ b/Composer/packages/extensions/visual-designer/src/widgets/ActionHeader.tsx @@ -9,10 +9,13 @@ import { WidgetComponent, WidgetContainerProps } from '../schema/uischema.types' import { StandardNodeWidth, HeaderHeight } from '../constants/ElementSizes'; import { ObiColors } from '../constants/ElementColors'; import { NodeMenu } from '../components/menus/NodeMenu'; +import { ElementIcon } from '../utils/obiPropertyResolver'; +import { Icon } from '../components/decorations/icon'; export interface ActionHeaderProps extends WidgetContainerProps { title: string; disableSDKTitle?: boolean; + icon?: string; menu?: JSX.Element | 'none'; colors: { theme: string; @@ -31,15 +34,15 @@ const container = css` font-size: 12px; line-height: 14px; color: black; + position: relative; `; -const header = css` +const headerText = css` font-size: 12px; font-family: Segoe UI; - line-height: 14px; overflow: hidden; text-overflow: ellipsis; - whitespace: pre; + white-space: pre; `; export const ActionHeader: WidgetComponent = ({ @@ -48,6 +51,7 @@ export const ActionHeader: WidgetComponent = ({ onEvent, title, disableSDKTitle, + icon, menu, colors = DefaultColors, }) => { @@ -64,12 +68,34 @@ export const ActionHeader: WidgetComponent = ({ >
- {headerContent} + {icon && icon !== ElementIcon.None && ( +
+ +
+ )} +
+ {headerContent} +
{menu === 'none' ? null : menu || } From 6f32d65f4c22387eb4789c7f3e604e61eb2ac33b Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Sat, 29 Feb 2020 00:21:57 +0800 Subject: [PATCH 03/42] update card body style --- .../nodes/templates/CardTemplate.tsx | 19 +++++++++++++++++-- .../src/constants/ElementSizes.ts | 3 ++- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx b/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx index e12171193e..b246d0ac5d 100644 --- a/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx +++ b/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx @@ -5,7 +5,7 @@ import { jsx, css } from '@emotion/core'; import { FC, ReactNode } from 'react'; -import { StandardNodeWidth, HeaderHeight } from '../../../constants/ElementSizes'; +import { StandardNodeWidth, HeaderHeight, StandardSectionHeight } from '../../../constants/ElementSizes'; import { ObiColors } from '../../../constants/ElementColors'; const containerCSS = css` @@ -67,11 +67,25 @@ export const CardTemplate: FC = ({ className="CardNode__Body" css={css` ${fullWidthSection}; + min-height: ${StandardSectionHeight}px; padding: 2px 8px; `} onClick={onClickBody} > - {body} +
+ {body} +
); @@ -80,6 +94,7 @@ export const CardTemplate: FC = ({ className="CardNode__Footer" css={css` ${fullWidthSection}; + min-height: ${StandardSectionHeight}px; padding: 2px 8px; border-top: 1px solid ${ObiColors.AzureGray3}; `} diff --git a/Composer/packages/extensions/visual-designer/src/constants/ElementSizes.ts b/Composer/packages/extensions/visual-designer/src/constants/ElementSizes.ts index 1ec57683df..7fa049b9bf 100644 --- a/Composer/packages/extensions/visual-designer/src/constants/ElementSizes.ts +++ b/Composer/packages/extensions/visual-designer/src/constants/ElementSizes.ts @@ -2,7 +2,8 @@ // Licensed under the MIT License. export const StandardNodeWidth = 200; -export const HeaderHeight = 24; +export const StandardSectionHeight = 24; +export const HeaderHeight = StandardSectionHeight; export const InitNodeSize = { width: StandardNodeWidth, From bc00c5c91fb947606d73afa308fe2ca55c226603 Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Sat, 29 Feb 2020 00:36:00 +0800 Subject: [PATCH 04/42] experiment new CardTemplate on several types --- .../visual-designer/src/schema/uischema.tsx | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx index 07d454c2af..d3c814e897 100644 --- a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx +++ b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx @@ -17,6 +17,7 @@ import { ChoiceInputChoices } from '../widgets/ChoiceInput'; import { ActionHeader } from '../widgets/ActionHeader'; import { ElementIcon } from '../utils/obiPropertyResolver'; import { ObiColors } from '../constants/ElementColors'; +import { CardTemplate } from '../components/nodes/templates/CardTemplate'; import { UISchema, UIWidget } from './uischema.types'; @@ -113,16 +114,25 @@ export const uiSchema: UISchema = { getRefContent: data => dialogRef => <>Switch to {dialogRef}, }, [SDKTypes.EditArray]: { - 'ui:widget': ActionCard, - content: data => `${data.changeType} {${data.itemsProperty || '?'}}`, + 'ui:widget': CardTemplate, + header: { + 'ui:widget': ActionHeader, + }, + body: data => `${data.changeType} {${data.itemsProperty || '?'}}`, }, [SDKTypes.InitProperty]: { - 'ui:widget': ActionCard, + 'ui:widget': CardTemplate, + header: { + 'ui:widget': ActionHeader, + }, content: data => `{${data.property || '?'}} = new ${data.type || '?'}`, }, [SDKTypes.SetProperty]: { - 'ui:widget': ActionCard, - content: data => `{${data.property || '?'}} = ${data.value || '?'}`, + 'ui:widget': CardTemplate, + header: { + 'ui:widget': ActionHeader, + }, + body: data => `{${data.property || '?'}} = ${data.value || '?'}`, }, [SDKTypes.SetProperties]: { 'ui:widget': ActionCard, From 335c082b3440710c2822e3eb71d5c78b7139a570 Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Tue, 3 Mar 2020 23:04:49 +0800 Subject: [PATCH 05/42] Revert "experiment new CardTemplate on several types" This reverts commit bc00c5c91fb947606d73afa308fe2ca55c226603. --- .../visual-designer/src/schema/uischema.tsx | 20 +++++-------------- 1 file changed, 5 insertions(+), 15 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx index d3c814e897..07d454c2af 100644 --- a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx +++ b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx @@ -17,7 +17,6 @@ import { ChoiceInputChoices } from '../widgets/ChoiceInput'; import { ActionHeader } from '../widgets/ActionHeader'; import { ElementIcon } from '../utils/obiPropertyResolver'; import { ObiColors } from '../constants/ElementColors'; -import { CardTemplate } from '../components/nodes/templates/CardTemplate'; import { UISchema, UIWidget } from './uischema.types'; @@ -114,25 +113,16 @@ export const uiSchema: UISchema = { getRefContent: data => dialogRef => <>Switch to {dialogRef}, }, [SDKTypes.EditArray]: { - 'ui:widget': CardTemplate, - header: { - 'ui:widget': ActionHeader, - }, - body: data => `${data.changeType} {${data.itemsProperty || '?'}}`, + 'ui:widget': ActionCard, + content: data => `${data.changeType} {${data.itemsProperty || '?'}}`, }, [SDKTypes.InitProperty]: { - 'ui:widget': CardTemplate, - header: { - 'ui:widget': ActionHeader, - }, + 'ui:widget': ActionCard, content: data => `{${data.property || '?'}} = new ${data.type || '?'}`, }, [SDKTypes.SetProperty]: { - 'ui:widget': CardTemplate, - header: { - 'ui:widget': ActionHeader, - }, - body: data => `{${data.property || '?'}} = ${data.value || '?'}`, + 'ui:widget': ActionCard, + content: data => `{${data.property || '?'}} = ${data.value || '?'}`, }, [SDKTypes.SetProperties]: { 'ui:widget': ActionCard, From 1d15a2f93140b608977a91baee5ed839c6ee004d Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Tue, 3 Mar 2020 23:17:50 +0800 Subject: [PATCH 06/42] add CardTemplate sparateline placeholder --- .../src/components/nodes/templates/CardTemplate.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx b/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx index b246d0ac5d..c0ac6c6d79 100644 --- a/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx +++ b/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx @@ -103,7 +103,9 @@ export const CardTemplate: FC = ({ {footer} ); - + const renderSeparateline = () => ( +
+ ); return (
= ({ > {renderHeader(header)} {body && renderBody(body)} + {body && footer && renderSeparateline()} {footer && renderFooter(footer)}
); From a56c5c1661a8f079339c363e024d9c498b989543 Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Tue, 3 Mar 2020 23:36:37 +0800 Subject: [PATCH 07/42] update ListOverview types --- .../src/components/common/ListOverview.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/components/common/ListOverview.tsx b/Composer/packages/extensions/visual-designer/src/components/common/ListOverview.tsx index ef90a437fe..50db32054e 100644 --- a/Composer/packages/extensions/visual-designer/src/components/common/ListOverview.tsx +++ b/Composer/packages/extensions/visual-designer/src/components/common/ListOverview.tsx @@ -5,13 +5,14 @@ import React, { FC } from 'react'; import { SingleLineDiv } from '../elements/styledComponents'; -export interface ListOverviewProps { - items: string[]; - renderItem: (item: object | string) => JSX.Element; +export interface ListOverviewProps { + items: T[]; + renderItem: (item: T) => JSX.Element; maxCount: number; } -export const ListOverview: FC = ({ items, renderItem, maxCount }) => { - if (!Array.isArray(items)) { + +export const ListOverview: FC> = ({ items, renderItem, maxCount }) => { + if (!Array.isArray(items) || !items.length) { return null; } return ( From 5908ac18bd58d85a9fc1d41d27c43ec879019a7f Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Tue, 3 Mar 2020 23:37:03 +0800 Subject: [PATCH 08/42] migrate userInput to cardTemplate --- .../visual-designer/src/schema/uischema.tsx | 65 ++++++++++--------- 1 file changed, 36 insertions(+), 29 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx index 34b36837df..6ed305a79a 100644 --- a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx +++ b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx @@ -19,6 +19,7 @@ import { ObiColors } from '../constants/ElementColors'; import { SingleLineDiv, BorderedDiv } from '../components/elements/styledComponents'; import { PropertyAssignmentSize, ChoiceInputSize } from '../constants/ElementSizes'; import { ListOverview } from '../components/common/ListOverview'; +import { CardTemplate } from '../components/nodes/templates/CardTemplate'; import { UISchema, UIWidget } from './uischema.types'; @@ -36,42 +37,48 @@ const BaseInputSchema: UIWidget = { }, }, userInput: { - 'ui:widget': ActionCard, - title: data => `User Input (${getInputType(data.$type)})`, - disableSDKTitle: true, - icon: ElementIcon.User, - menu: 'none', - content: data => data.property || '', - colors: { - theme: ObiColors.LightBlue, - icon: ObiColors.AzureBlue, + 'ui:widget': CardTemplate, + header: { + 'ui:widget': ActionHeader, + title: data => `User Input (${getInputType(data.$type)})`, + disableSDKTitle: true, + icon: ElementIcon.User, + menu: 'none', + colors: { + theme: ObiColors.LightBlue, + icon: ObiColors.AzureBlue, + }, }, + footer: data => data.property || '', }, }; const ChoiceInputSchema: UIWidget = Object.assign({}, BaseInputSchema, { userInput: { - 'ui:widget': ActionCard, - title: data => `User Input (${getInputType(data.$type)})`, - disableSDKTitle: true, - icon: ElementIcon.User, - menu: 'none', - content: data => {data.property || ''}, - children: data => { - const renderItem = item => { - const content = item.value; - return ( - - {content} - - ); - }; - return ; - }, - colors: { - theme: ObiColors.LightBlue, - icon: ObiColors.AzureBlue, + 'ui:widget': CardTemplate, + header: { + 'ui:widget': ActionHeader, + title: data => `User Input (${getInputType(data.$type)})`, + disableSDKTitle: true, + icon: ElementIcon.User, + menu: 'none', + colors: { + theme: ObiColors.LightBlue, + icon: ObiColors.AzureBlue, + }, }, + body: data => ( + ( + + {item.value} + + )} + /> + ), + footer: data => {data.property || ''}, }, }); export const uiSchema: UISchema = { From e9f1fbe40034ba373dd5b7fc9c79707867ddfb66 Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Tue, 3 Mar 2020 23:46:16 +0800 Subject: [PATCH 09/42] assign ListOverview default value --- .../visual-designer/src/components/common/ListOverview.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/components/common/ListOverview.tsx b/Composer/packages/extensions/visual-designer/src/components/common/ListOverview.tsx index 50db32054e..d08a2f9ba0 100644 --- a/Composer/packages/extensions/visual-designer/src/components/common/ListOverview.tsx +++ b/Composer/packages/extensions/visual-designer/src/components/common/ListOverview.tsx @@ -8,10 +8,10 @@ import { SingleLineDiv } from '../elements/styledComponents'; export interface ListOverviewProps { items: T[]; renderItem: (item: T) => JSX.Element; - maxCount: number; + maxCount?: number; } -export const ListOverview: FC> = ({ items, renderItem, maxCount }) => { +export const ListOverview: FC> = ({ items, renderItem, maxCount = 3 }) => { if (!Array.isArray(items) || !items.length) { return null; } From f948fbbc78db56e2f52cd2600bfae5f906e2a4c9 Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Tue, 3 Mar 2020 23:49:05 +0800 Subject: [PATCH 10/42] make ActivityRenderer pure and apply to uischema --- .../visual-designer/src/schema/uischema.tsx | 40 +++++++++++------- .../src/widgets/ActivityRenderer.tsx | 42 ++----------------- 2 files changed, 29 insertions(+), 53 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx index 6ed305a79a..72f673dd22 100644 --- a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx +++ b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx @@ -26,14 +26,20 @@ import { UISchema, UIWidget } from './uischema.types'; const BaseInputSchema: UIWidget = { 'ui:widget': PromptWidget, botAsks: { - 'ui:widget': ActivityRenderer, - title: data => `Bot Asks (${getInputType(data.$type)})`, - field: 'prompt', - defaultContent: '', - icon: ElementIcon.MessageBot, - colors: { - theme: ObiColors.BlueMagenta20, - icon: ObiColors.BlueMagenta30, + 'ui:widget': CardTemplate, + header: { + 'ui:widget': ActionHeader, + title: data => `Bot Asks (${getInputType(data.$type)})`, + icon: ElementIcon.MessageBot, + colors: { + theme: ObiColors.BlueMagenta20, + icon: ObiColors.BlueMagenta30, + }, + }, + body: { + 'ui:widget': ActivityRenderer, + field: 'prompt', + defaultContent: '', }, }, userInput: { @@ -122,12 +128,18 @@ export const uiSchema: UISchema = { }, }, [SDKTypes.SendActivity]: { - 'ui:widget': ActivityRenderer, - field: 'activity', - icon: ElementIcon.MessageBot, - colors: { - theme: ObiColors.BlueMagenta20, - icon: ObiColors.BlueMagenta30, + 'ui:widget': CardTemplate, + header: { + 'ui:widget': ActionHeader, + icon: ElementIcon.MessageBot, + colors: { + theme: ObiColors.BlueMagenta20, + icon: ObiColors.BlueMagenta30, + }, + }, + body: { + 'ui:widget': ActivityRenderer, + field: 'activity', }, }, [SDKTypes.AttachmentInput]: BaseInputSchema, diff --git a/Composer/packages/extensions/visual-designer/src/widgets/ActivityRenderer.tsx b/Composer/packages/extensions/visual-designer/src/widgets/ActivityRenderer.tsx index 40ba5283a9..e4c62ba83d 100644 --- a/Composer/packages/extensions/visual-designer/src/widgets/ActivityRenderer.tsx +++ b/Composer/packages/extensions/visual-designer/src/widgets/ActivityRenderer.tsx @@ -2,58 +2,22 @@ // Licensed under the MIT License. import React from 'react'; -import { generateSDKTitle } from '@bfc/shared'; import get from 'lodash/get'; -import { ElementIcon } from '../utils/obiPropertyResolver'; -import { NodeMenu } from '../components/menus/NodeMenu'; -import { FormCard } from '../components/nodes/templates/FormCard'; import { useLgTemplate } from '../utils/hooks'; import { WidgetContainerProps } from '../schema/uischema.types'; -import { ObiColors } from '../constants/ElementColors'; export interface ActivityRenderer extends WidgetContainerProps { /** indicates which field contains lg activity. ('activity', 'prompt', 'invalidPropmt'...) */ field: string; - icon: ElementIcon; - title?: string; - disableSDKTitle?: boolean; defaultContent?: string; - colors?: { - theme: string; - icon: string; - }; } -const DefaultThemeColor = { - theme: ObiColors.BlueMagenta20, - icon: ObiColors.BlueMagenta30, -}; - -export const ActivityRenderer: React.FC = ({ - id, - data, - onEvent, - title, - disableSDKTitle, - field, - defaultContent, - icon = ElementIcon.MessageBot, - colors = DefaultThemeColor, -}) => { +export const ActivityRenderer: React.FC = ({ data, field, defaultContent }) => { const designerId = get(data, '$designer.id'); const activityTemplate = get(data, field, ''); const templateText = useLgTemplate(activityTemplate, designerId); - const nodeColors = { themeColor: colors.theme, iconColor: colors.icon }; - - return ( - } - nodeColors={nodeColors} - /> - ); + const displayedText = templateText || defaultContent; + return <>{displayedText}; }; From 997aa2fcb015e8c750f0ae71b0c2aead2ee995c9 Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Tue, 3 Mar 2020 23:50:29 +0800 Subject: [PATCH 11/42] migrate SetProperties to CardTemplate --- .../visual-designer/src/schema/uischema.tsx | 40 ++++++++++--------- 1 file changed, 22 insertions(+), 18 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx index 72f673dd22..04702674e4 100644 --- a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx +++ b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx @@ -76,7 +76,6 @@ const ChoiceInputSchema: UIWidget = Object.assign({}, BaseInputSchema, { body: data => ( ( {item.value} @@ -166,24 +165,29 @@ export const uiSchema: UISchema = { content: data => `{${data.property || '?'}} = ${data.value || '?'}`, }, [SDKTypes.SetProperties]: { - 'ui:widget': ActionCard, - content: data => `Set ${Array.isArray(data.assignments) ? data.assignments.length : 0} property values`, - children: data => { - const renderItem = item => { - const content = `${item.property} = ${item.value}`; - return ( - - {content} - - ); - }; - return ; + 'ui:widget': CardTemplate, + header: { + 'ui:widget': ActionHeader, }, + body: data => ( + { + const content = `${item.property} = ${item.value}`; + return ( + + {content} + + ); + }} + /> + ), + footer: data => `Set ${Array.isArray(data.assignments) ? data.assignments.length : 0} property values`, }, [SDKTypes.DeleteProperty]: { 'ui:widget': ActionCard, From 7a82f0e1cac31f3c533b60527043bdd13c30a641 Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Tue, 3 Mar 2020 23:50:50 +0800 Subject: [PATCH 12/42] adjust CardTemplate style --- .../nodes/templates/CardTemplate.tsx | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx b/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx index c0ac6c6d79..6738226d84 100644 --- a/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx +++ b/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx @@ -96,15 +96,27 @@ export const CardTemplate: FC = ({ ${fullWidthSection}; min-height: ${StandardSectionHeight}px; padding: 2px 8px; - border-top: 1px solid ${ObiColors.AzureGray3}; `} onClick={onClickFooter} > - {footer} +
+ {footer} +
); const renderSeparateline = () => ( -
+
); return (
Date: Wed, 4 Mar 2020 10:57:31 +0800 Subject: [PATCH 13/42] merge ChoiceInput schem into BaseInput --- .../visual-designer/src/schema/uischema.tsx | 40 ++++++------------- 1 file changed, 12 insertions(+), 28 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx index 04702674e4..8532e95835 100644 --- a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx +++ b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx @@ -55,37 +55,21 @@ const BaseInputSchema: UIWidget = { icon: ObiColors.AzureBlue, }, }, + body: data => + data.$type === SDKTypes.ChoiceInput ? ( + ( + + {item.value} + + )} + /> + ) : null, footer: data => data.property || '', }, }; -const ChoiceInputSchema: UIWidget = Object.assign({}, BaseInputSchema, { - userInput: { - 'ui:widget': CardTemplate, - header: { - 'ui:widget': ActionHeader, - title: data => `User Input (${getInputType(data.$type)})`, - disableSDKTitle: true, - icon: ElementIcon.User, - menu: 'none', - colors: { - theme: ObiColors.LightBlue, - icon: ObiColors.AzureBlue, - }, - }, - body: data => ( - ( - - {item.value} - - )} - /> - ), - footer: data => {data.property || ''}, - }, -}); export const uiSchema: UISchema = { default: { 'ui:widget': ActionCard, @@ -146,7 +130,7 @@ export const uiSchema: UISchema = { [SDKTypes.DateTimeInput]: BaseInputSchema, [SDKTypes.NumberInput]: BaseInputSchema, [SDKTypes.TextInput]: BaseInputSchema, - [SDKTypes.ChoiceInput]: ChoiceInputSchema, + [SDKTypes.ChoiceInput]: BaseInputSchema, [SDKTypes.BeginDialog]: { 'ui:widget': DialogRefCard, dialog: data => data.dialog, From f44133bd746ebe4e321f78a3164d1dd3435989ad Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Wed, 4 Mar 2020 12:10:11 +0800 Subject: [PATCH 14/42] migrate DialogRef to new template --- .../visual-designer/src/schema/uischema.tsx | 24 ++++++-- .../visual-designer/src/widgets/DialogRef.tsx | 30 ++++++++++ .../src/widgets/DialogRefCard.tsx | 59 ------------------- 3 files changed, 48 insertions(+), 65 deletions(-) create mode 100644 Composer/packages/extensions/visual-designer/src/widgets/DialogRef.tsx delete mode 100644 Composer/packages/extensions/visual-designer/src/widgets/DialogRefCard.tsx diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx index 8532e95835..7cbcd30c11 100644 --- a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx +++ b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx @@ -8,7 +8,7 @@ import get from 'lodash/get'; import { ActionCard } from '../widgets/ActionCard'; import { ActivityRenderer } from '../widgets/ActivityRenderer'; -import { DialogRefCard } from '../widgets/DialogRefCard'; +import { DialogRef } from '../widgets/DialogRef'; import { PromptWidget } from '../widgets/PromptWidget'; import { IfConditionWidget } from '../widgets/IfConditionWidget'; import { SwitchConditionWidget } from '../widgets/SwitchConditionWidget'; @@ -132,13 +132,25 @@ export const uiSchema: UISchema = { [SDKTypes.TextInput]: BaseInputSchema, [SDKTypes.ChoiceInput]: BaseInputSchema, [SDKTypes.BeginDialog]: { - 'ui:widget': DialogRefCard, - dialog: data => data.dialog, + 'ui:widget': CardTemplate, + header: { + 'ui:widget': ActionHeader, + }, + body: { + 'ui:widget': DialogRef, + dialog: data => data.dialog, + }, }, [SDKTypes.ReplaceDialog]: { - 'ui:widget': DialogRefCard, - dialog: data => data.dialog, - getRefContent: data => dialogRef => <>Switch to {dialogRef}, + 'ui:widget': CardTemplate, + header: { + 'ui:widget': ActionHeader, + }, + body: { + 'ui:widget': DialogRef, + dialog: data => data.dialog, + getRefContent: data => dialogRef => <>Switch to {dialogRef}, + }, }, [SDKTypes.EditArray]: { 'ui:widget': ActionCard, diff --git a/Composer/packages/extensions/visual-designer/src/widgets/DialogRef.tsx b/Composer/packages/extensions/visual-designer/src/widgets/DialogRef.tsx new file mode 100644 index 0000000000..4214ed5c0e --- /dev/null +++ b/Composer/packages/extensions/visual-designer/src/widgets/DialogRef.tsx @@ -0,0 +1,30 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import get from 'lodash/get'; + +import { LinkBtn } from '../components/elements/styledComponents'; +import { WidgetContainerProps, WidgetComponent } from '../schema/uischema.types'; +import { NodeEventTypes } from '../constants/NodeEventTypes'; + +export interface DialogRefCardProps extends WidgetContainerProps { + dialog: string | object; + getRefContent?: (dialogRef: JSX.Element) => JSX.Element; +} + +export const DialogRef: WidgetComponent = ({ id, onEvent, dialog, getRefContent }) => { + const calleeDialog = typeof dialog === 'object' ? get(dialog, '$ref') : dialog; + const dialogRef = ( + { + e.stopPropagation(); + onEvent(NodeEventTypes.OpenDialog, { caller: id, callee: calleeDialog }); + }} + > + {calleeDialog} + + ); + return typeof getRefContent === 'function' ? getRefContent(dialogRef) : dialogRef; +}; diff --git a/Composer/packages/extensions/visual-designer/src/widgets/DialogRefCard.tsx b/Composer/packages/extensions/visual-designer/src/widgets/DialogRefCard.tsx deleted file mode 100644 index 75a7a97a3d..0000000000 --- a/Composer/packages/extensions/visual-designer/src/widgets/DialogRefCard.tsx +++ /dev/null @@ -1,59 +0,0 @@ -// Copyright (c) Microsoft Corporation. -// Licensed under the MIT License. - -/** @jsx jsx */ -import { jsx } from '@emotion/core'; -import { generateSDKTitle } from '@bfc/shared'; -import get from 'lodash/get'; - -import { LinkBtn } from '../components/elements/styledComponents'; -import { FormCard } from '../components/nodes/templates/FormCard'; -import { WidgetContainerProps, WidgetComponent } from '../schema/uischema.types'; -import { ObiColors } from '../constants/ElementColors'; -import { NodeEventTypes } from '../constants/NodeEventTypes'; -import { NodeMenu } from '../components/menus/NodeMenu'; - -export interface DialogRefCardProps extends WidgetContainerProps { - dialog: string | object; - getRefContent?: (dialogRef: JSX.Element) => JSX.Element; - colors?: { - theme: string; - icon: string; - }; -} - -const DefaultCardColor = { - theme: ObiColors.AzureGray3, - icon: ObiColors.AzureGray2, -}; - -export const DialogRefCard: WidgetComponent = ({ - id, - data, - onEvent, - dialog, - getRefContent, - colors = DefaultCardColor, -}) => { - const header = generateSDKTitle(data); - const nodeColors = { themeColor: colors.theme, iconColor: colors.icon }; - const calleeDialog = typeof dialog === 'object' ? get(dialog, '$ref') : dialog; - const dialogRef = ( - { - e.stopPropagation(); - onEvent(NodeEventTypes.OpenDialog, { caller: id, callee: calleeDialog }); - }} - > - {calleeDialog} - - ); - return ( - } - label={typeof getRefContent === 'function' ? getRefContent(dialogRef) : dialogRef} - nodeColors={nodeColors} - /> - ); -}; From a779f5fec73cc8a401cf52fd1dd9ff4c141e156a Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Wed, 4 Mar 2020 12:42:32 +0800 Subject: [PATCH 15/42] deprecate FormCard with CardTemplate --- .../components/nodes/FormCard.test.tsx | 32 ---- .../components/nodes/templates/FormCard.tsx | 144 ------------------ .../src/widgets/ActionCard.tsx | 54 +------ 3 files changed, 5 insertions(+), 225 deletions(-) delete mode 100644 Composer/packages/extensions/visual-designer/__tests__/components/nodes/FormCard.test.tsx delete mode 100644 Composer/packages/extensions/visual-designer/src/components/nodes/templates/FormCard.tsx diff --git a/Composer/packages/extensions/visual-designer/__tests__/components/nodes/FormCard.test.tsx b/Composer/packages/extensions/visual-designer/__tests__/components/nodes/FormCard.test.tsx deleted file mode 100644 index 63d303ae46..0000000000 --- a/Composer/packages/extensions/visual-designer/__tests__/components/nodes/FormCard.test.tsx +++ /dev/null @@ -1,32 +0,0 @@ -// Copyright (c) Microsoft Corporation. -// Licensed under the MIT License. - -import React from 'react'; -import { render, fireEvent } from 'react-testing-library'; - -import { FormCard } from '../../../src/components/nodes/templates/FormCard'; -import { getElementColor } from '../../../src/utils/obiPropertyResolver'; - -describe('', () => { - let renderResult, header, label, nodeColors, onClick; - - beforeEach(() => { - header = 'InputFormCard'; - label = 'FormCard'; - nodeColors = getElementColor('Microsoft.SendActivity'); - - onClick = jest.fn(); - - renderResult = render( - } onClick={onClick} /> - ); - }); - - it('can be clicked', async () => { - const { findByTestId } = renderResult; - const formCard = await findByTestId('FormCard'); - - fireEvent.click(formCard); - expect(onClick).toHaveBeenCalled(); - }); -}); diff --git a/Composer/packages/extensions/visual-designer/src/components/nodes/templates/FormCard.tsx b/Composer/packages/extensions/visual-designer/src/components/nodes/templates/FormCard.tsx deleted file mode 100644 index 498663409e..0000000000 --- a/Composer/packages/extensions/visual-designer/src/components/nodes/templates/FormCard.tsx +++ /dev/null @@ -1,144 +0,0 @@ -// Copyright (c) Microsoft Corporation. -// Licensed under the MIT License. - -/** @jsx jsx */ -import { jsx } from '@emotion/core'; -import { FunctionComponent } from 'react'; - -import { InitNodeSize } from '../../../constants/ElementSizes'; -import { ElementIcon } from '../../../utils/obiPropertyResolver'; -import { Icon } from '../../decorations/icon'; - -const boxWidth = InitNodeSize.width; -const boxHeight = InitNodeSize.height; -const headerHeight = InitNodeSize.height / 2; -const contentHeight = boxHeight - headerHeight; - -const containerStyle = { - width: boxWidth, - minHeight: boxHeight, - fontSize: '12px', - cursor: 'pointer', - overflow: 'hidden', - backgroundColor: 'white', - borderRadius: '2px 2px 0 0', - boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.1)', -}; - -interface NodeProps { - header: string; - corner?: any; - label: any; - icon?: string; - iconSize?: number; - styles?: object; - nodeColors: { [key: string]: any }; - onClick?: () => void; - children?: any; -} -export const FormCard: FunctionComponent = ({ - header, - corner, - label, - icon, - iconSize, - nodeColors, - onClick, - children = null, - styles = {}, -}) => { - const { themeColor, iconColor } = nodeColors; - return ( -
{ - if (typeof onClick === 'function') { - e.stopPropagation(); - onClick(); - } - }} - > -
-
- {header} -
-
{corner}
-
-
-
- {icon && icon !== ElementIcon.None && ( -
- -
- )} -
- {label} -
-
- {children} -
-
- ); -}; diff --git a/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx b/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx index db45d55919..28cb5fc06a 100644 --- a/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx +++ b/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx @@ -2,61 +2,17 @@ // Licensed under the MIT License. import React from 'react'; -import { generateSDKTitle } from '@bfc/shared'; -import { FormCard } from '../components/nodes/templates/FormCard'; import { WidgetContainerProps, WidgetComponent } from '../schema/uischema.types'; -import { ObiColors } from '../constants/ElementColors'; -import { NodeMenu } from '../components/menus/NodeMenu'; +import { CardTemplate } from '../components/nodes/templates/CardTemplate'; + +import { ActionHeader } from './ActionHeader'; export interface ActionCardProps extends WidgetContainerProps { title: string; - disableSDKTitle?: boolean; - icon: string; content: string | number | JSX.Element; - menu?: JSX.Element | string; - children?: JSX.Element; - size?: { - width: number; - - height: number; - }; - colors?: { - theme: string; - icon: string; - }; } -const DefaultCardColor = { - theme: ObiColors.AzureGray3, - icon: ObiColors.AzureGray2, -}; - -export const ActionCard: WidgetComponent = ({ - id, - data, - onEvent, - title, - disableSDKTitle, - icon, - menu, - content, - children, - size, - colors = DefaultCardColor, -}) => { - const header = disableSDKTitle ? title : generateSDKTitle(data, title); - const nodeColors = { themeColor: colors.theme, iconColor: colors.icon }; - return ( - } - icon={icon} - label={content} - nodeColors={nodeColors} - styles={{ ...size }} - > - {children} - - ); +export const ActionCard: WidgetComponent = ({ id, data, onEvent, title, content }) => { + return } body={content} />; }; From be0e1e20cd45117b99f80f5ab9ff3e28b6d989c5 Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Wed, 4 Mar 2020 12:42:54 +0800 Subject: [PATCH 16/42] style: ActionHeader --- .../extensions/visual-designer/src/widgets/ActionHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Composer/packages/extensions/visual-designer/src/widgets/ActionHeader.tsx b/Composer/packages/extensions/visual-designer/src/widgets/ActionHeader.tsx index ce7b9448d3..44d1e6cbf3 100644 --- a/Composer/packages/extensions/visual-designer/src/widgets/ActionHeader.tsx +++ b/Composer/packages/extensions/visual-designer/src/widgets/ActionHeader.tsx @@ -17,7 +17,7 @@ export interface ActionHeaderProps extends WidgetContainerProps { disableSDKTitle?: boolean; icon?: string; menu?: JSX.Element | 'none'; - colors: { + colors?: { theme: string; icon: string; }; From 9617b6cb9a597ec359d29bc66735a23e0985df4b Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Wed, 4 Mar 2020 12:54:14 +0800 Subject: [PATCH 17/42] fix: null content bug --- .../extensions/visual-designer/src/schema/uischemaRenderer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx b/Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx index 8e5841aecc..b0a98d8992 100644 --- a/Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx +++ b/Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx @@ -34,7 +34,7 @@ const buildWidgetProp = (rawPropValue: UIWidgetProp, context: UIWidgetContext) = if (typeof rawPropValue === 'function') { const dataTransformer = rawPropValue; const element = dataTransformer(context.data); - return element; + return <>{element}; } if (typeof rawPropValue === 'object' && rawPropValue[UI_WIDGET_KEY]) { From adaa9b84694decd6701282dc7579f87fffc77c39 Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Wed, 4 Mar 2020 13:17:26 +0800 Subject: [PATCH 18/42] implement ArrowLine as card's separator --- .../src/components/lib/ArrowLine.tsx | 34 +++++++++++++++++++ .../nodes/templates/CardTemplate.tsx | 14 +++++++- 2 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 Composer/packages/extensions/visual-designer/src/components/lib/ArrowLine.tsx diff --git a/Composer/packages/extensions/visual-designer/src/components/lib/ArrowLine.tsx b/Composer/packages/extensions/visual-designer/src/components/lib/ArrowLine.tsx new file mode 100644 index 0000000000..3f052e6428 --- /dev/null +++ b/Composer/packages/extensions/visual-designer/src/components/lib/ArrowLine.tsx @@ -0,0 +1,34 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +/** @jsx jsx */ +import { jsx } from '@emotion/core'; + +export interface ArrowLineProps { + width: number; + arrowsize: number; + containerHeight?: number; + color?: string; +} +export const ArrowLine: React.FC = ({ width, arrowsize, color }) => { + const points = [ + { x: 0, y: 0 }, + { x: width / 2 - arrowsize, y: 0 }, + { x: width / 2, y: arrowsize }, + { x: width / 2 + arrowsize, y: 0 }, + { x: width, y: 0 }, + ]; + const pointsString = points.map(p => `${p.x},${p.y}`).join(' '); + return ( + + + + ); +}; + +ArrowLine.defaultProps = { + width: 200, + arrowsize: 8, + containerHeight: 1, + color: 'black', +}; diff --git a/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx b/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx index 6738226d84..2239929216 100644 --- a/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx +++ b/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx @@ -7,6 +7,7 @@ import { FC, ReactNode } from 'react'; import { StandardNodeWidth, HeaderHeight, StandardSectionHeight } from '../../../constants/ElementSizes'; import { ObiColors } from '../../../constants/ElementColors'; +import { ArrowLine } from '../../lib/ArrowLine'; const containerCSS = css` font-size: 12px; @@ -115,9 +116,20 @@ export const CardTemplate: FC = ({
); + const renderSeparateline = () => ( -
+
+ +
); + return (
Date: Wed, 4 Mar 2020 13:55:49 +0800 Subject: [PATCH 19/42] adjust Separator style --- .../src/components/nodes/templates/CardTemplate.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx b/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx index 2239929216..9550728110 100644 --- a/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx +++ b/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx @@ -30,6 +30,8 @@ const fullWidthSection = css` box-sizing: border-box; `; +const SeparatorHeight = 8; + export interface CardTemplateProps { header: ReactNode; body?: ReactNode; @@ -95,14 +97,13 @@ export const CardTemplate: FC = ({ className="CardNode__Footer" css={css` ${fullWidthSection}; - min-height: ${StandardSectionHeight}px; - padding: 2px 8px; + min-height: ${StandardSectionHeight - SeparatorHeight}px; + padding: 0px 8px; `} onClick={onClickFooter} >
= ({ className="Separator" css={css` display: block; - height: 0px; + height: ${SeparatorHeight}px; overflow: visible; `} > - +
); From ca1a2ec81f16bea951a2fdad5156178713a8e19b Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Wed, 4 Mar 2020 13:58:06 +0800 Subject: [PATCH 20/42] style: icon menu padding -> 0 --- .../visual-designer/src/components/menus/IconMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Composer/packages/extensions/visual-designer/src/components/menus/IconMenu.tsx b/Composer/packages/extensions/visual-designer/src/components/menus/IconMenu.tsx index 551c8b5b6c..4e70184efe 100644 --- a/Composer/packages/extensions/visual-designer/src/components/menus/IconMenu.tsx +++ b/Composer/packages/extensions/visual-designer/src/components/menus/IconMenu.tsx @@ -62,7 +62,7 @@ export const IconMenu: React.FC = ({ const buttonStyles: IButtonStyles = { root: { minWidth: 0, - padding: '0 8px', + padding: 0, margin: 0, alignSelf: 'stretch', height: 'auto', From 83133f813047c0999035bacaa3ef0469685db252 Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Wed, 4 Mar 2020 14:05:25 +0800 Subject: [PATCH 21/42] style: ArrowLine stroke fix --- .../visual-designer/src/components/lib/ArrowLine.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/components/lib/ArrowLine.tsx b/Composer/packages/extensions/visual-designer/src/components/lib/ArrowLine.tsx index 3f052e6428..ae07ba0611 100644 --- a/Composer/packages/extensions/visual-designer/src/components/lib/ArrowLine.tsx +++ b/Composer/packages/extensions/visual-designer/src/components/lib/ArrowLine.tsx @@ -13,9 +13,9 @@ export interface ArrowLineProps { export const ArrowLine: React.FC = ({ width, arrowsize, color }) => { const points = [ { x: 0, y: 0 }, - { x: width / 2 - arrowsize, y: 0 }, + { x: width / 2 - (arrowsize + 2), y: 0 }, { x: width / 2, y: arrowsize }, - { x: width / 2 + arrowsize, y: 0 }, + { x: width / 2 + (arrowsize + 2), y: 0 }, { x: width, y: 0 }, ]; const pointsString = points.map(p => `${p.x},${p.y}`).join(' '); From 99b03893d7a2177e0be9c27215b98af3da00cbf1 Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Wed, 4 Mar 2020 14:22:01 +0800 Subject: [PATCH 22/42] style: bigger node --- .../visual-designer/src/constants/ElementSizes.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/constants/ElementSizes.ts b/Composer/packages/extensions/visual-designer/src/constants/ElementSizes.ts index b704482735..6d46ceca03 100644 --- a/Composer/packages/extensions/visual-designer/src/constants/ElementSizes.ts +++ b/Composer/packages/extensions/visual-designer/src/constants/ElementSizes.ts @@ -1,13 +1,13 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT License. -export const StandardNodeWidth = 200; -export const StandardSectionHeight = 24; +export const StandardNodeWidth = 300; +export const StandardSectionHeight = 30; export const HeaderHeight = StandardSectionHeight; export const InitNodeSize = { width: StandardNodeWidth, - height: 48, + height: StandardSectionHeight * 2, }; export const DiamondSize = { From ac7baf60b24b97c256ee6d2de1e9cf429b6c3d46 Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Wed, 4 Mar 2020 14:22:15 +0800 Subject: [PATCH 23/42] style: ActionHeader --- .../extensions/visual-designer/src/widgets/ActionHeader.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/widgets/ActionHeader.tsx b/Composer/packages/extensions/visual-designer/src/widgets/ActionHeader.tsx index 44d1e6cbf3..b925ec9a69 100644 --- a/Composer/packages/extensions/visual-designer/src/widgets/ActionHeader.tsx +++ b/Composer/packages/extensions/visual-designer/src/widgets/ActionHeader.tsx @@ -35,6 +35,8 @@ const container = css` line-height: 14px; color: black; position: relative; + display: flex; + align-items: center; `; const headerText = css` @@ -97,9 +99,7 @@ export const ActionHeader: WidgetComponent = ({ {headerContent}
-
- {menu === 'none' ? null : menu || } -
+
{menu === 'none' ? null : menu || }
); }; From eaf1cf0ea01df705ce401a4f31231b083d609172 Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Wed, 4 Mar 2020 14:22:23 +0800 Subject: [PATCH 24/42] update dev demo --- .../demo/src/stories/VisualSDKDemo.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/demo/src/stories/VisualSDKDemo.js b/Composer/packages/extensions/visual-designer/demo/src/stories/VisualSDKDemo.js index 70b1ea7f12..35094375e1 100644 --- a/Composer/packages/extensions/visual-designer/demo/src/stories/VisualSDKDemo.js +++ b/Composer/packages/extensions/visual-designer/demo/src/stories/VisualSDKDemo.js @@ -35,9 +35,9 @@ export class VisualSDKDemo extends Component { return initalActions; } - appendActionPreview($type) { + insertActionPreview($type) { this.setState({ - actions: [...this.state.actions, seedNewDialog($type)], + actions: [seedNewDialog($type), ...this.state.actions], }); } @@ -51,7 +51,7 @@ export class VisualSDKDemo extends Component {
-
+
{renderUIWidget(uiSchemaPrivider.get(action.$type), { id: `actions[${index}]`, data: action, @@ -78,9 +78,9 @@ export class VisualSDKDemo extends Component { renderActionFactory() { return ( -
+

Create action by $type

- this.appendActionPreview($type)} /> + this.insertActionPreview($type)} />
); } @@ -90,8 +90,8 @@ export class VisualSDKDemo extends Component {

Visual SDK Demo

- {this.state.actions.map((action, index) => this.renderActionPreview(action, index))} {this.renderActionFactory()} + {this.state.actions.map((action, index) => this.renderActionPreview(action, index))}
); From c8024dc47fa5bf3cc7afbbbfc68d363e4bb10337 Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Wed, 4 Mar 2020 14:32:40 +0800 Subject: [PATCH 25/42] display more types in demo --- .../demo/src/stories/VisualSDKDemo.js | 21 +++++++------------ 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/demo/src/stories/VisualSDKDemo.js b/Composer/packages/extensions/visual-designer/demo/src/stories/VisualSDKDemo.js index 35094375e1..1d6e470b23 100644 --- a/Composer/packages/extensions/visual-designer/demo/src/stories/VisualSDKDemo.js +++ b/Composer/packages/extensions/visual-designer/demo/src/stories/VisualSDKDemo.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { seedNewDialog, SDKTypes } from '@bfc/shared'; +import { seedNewDialog, SDKTypes, dialogGroups, DialogGroup } from '@bfc/shared'; import { EdgeMenu } from '../../../src/components/menus/EdgeMenu'; import { JsonBlock } from '../components/json-block'; @@ -18,18 +18,13 @@ export class VisualSDKDemo extends Component { seedInitialActions() { const initialTypes = [ - SDKTypes.SendActivity, - SDKTypes.EditArray, - SDKTypes.SetProperties, - SDKTypes.SetProperty, - SDKTypes.DeleteProperties, - SDKTypes.DeleteProperty, - SDKTypes.BeginDialog, - SDKTypes.EndDialog, - SDKTypes.RepeatDialog, - SDKTypes.ReplaceDialog, - SDKTypes.CancelAllDialogs, - SDKTypes.EmitEvent, + ...dialogGroups[DialogGroup.RESPONSE].types, + ...dialogGroups[DialogGroup.INPUT].types, + ...dialogGroups[DialogGroup.BRANCHING].types, + ...dialogGroups[DialogGroup.MEMORY].types, + ...dialogGroups[DialogGroup.STEP].types, + ...dialogGroups[DialogGroup.CODE].types, + ...dialogGroups[DialogGroup.LOG].types, ]; const initalActions = initialTypes.map(t => seedNewDialog(t)); return initalActions; From b84a27f19b600032c11c9723d5c9b6900ab62e57 Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Wed, 4 Mar 2020 15:04:55 +0800 Subject: [PATCH 26/42] share duplicated font styles --- .../src/components/elements/sharedCSS.tsx | 11 +++++ .../components/elements/styledComponents.tsx | 9 +++++ .../nodes/templates/CardTemplate.tsx | 40 ++----------------- .../src/widgets/ActionHeader.tsx | 8 +--- 4 files changed, 26 insertions(+), 42 deletions(-) create mode 100644 Composer/packages/extensions/visual-designer/src/components/elements/sharedCSS.tsx diff --git a/Composer/packages/extensions/visual-designer/src/components/elements/sharedCSS.tsx b/Composer/packages/extensions/visual-designer/src/components/elements/sharedCSS.tsx new file mode 100644 index 0000000000..268c6fd927 --- /dev/null +++ b/Composer/packages/extensions/visual-designer/src/components/elements/sharedCSS.tsx @@ -0,0 +1,11 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +import { css } from '@emotion/core'; + +export const StandardFontCSS = css` + font-size: 12px; + line-height: 14px; + font-family: Segoe UI; + color: black; +`; diff --git a/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx b/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx index f4afc5467f..4854d1acaf 100644 --- a/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx +++ b/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx @@ -8,6 +8,7 @@ import { Link } from 'office-ui-fabric-react/lib/Link'; import { ObiColors } from '../../constants/ElementColors'; import { MultiLineDivProps, DivProps } from './styledComponents.types'; +import { StandardFontCSS } from './sharedCSS'; const dynamicStyle = props => css` @@ -62,3 +63,11 @@ export const SingleLineDiv = styled.div(props => ({ lineHeight: '19px', fontFamily: 'Segoe UI', })); + +export const TextDiv = styled.div` + ${StandardFontCSS}; + white-space: initial; + overflow-wrap: break-word; + word-break: break-all; + display: inline-block; +`; diff --git a/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx b/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx index 9550728110..2e4bf285e0 100644 --- a/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx +++ b/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx @@ -8,6 +8,7 @@ import { FC, ReactNode } from 'react'; import { StandardNodeWidth, HeaderHeight, StandardSectionHeight } from '../../../constants/ElementSizes'; import { ObiColors } from '../../../constants/ElementColors'; import { ArrowLine } from '../../lib/ArrowLine'; +import { TextDiv } from '../../elements/styledComponents'; const containerCSS = css` font-size: 12px; @@ -18,13 +19,6 @@ const containerCSS = css` box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1); `; -const headerCSS = css` - font-family: Segoe UI; - font-size: 12px; - line-height: 14px; - color: black; -`; - const fullWidthSection = css` width: 100%; box-sizing: border-box; @@ -55,7 +49,6 @@ export const CardTemplate: FC = ({
= ({ css={css` ${fullWidthSection}; min-height: ${StandardSectionHeight}px; - padding: 2px 8px; + padding: 7px 8px; `} onClick={onClickBody} > -
- {body} -
+ {body}
); @@ -102,19 +82,7 @@ export const CardTemplate: FC = ({ `} onClick={onClickFooter} > -
- {footer} -
+ {footer}
); diff --git a/Composer/packages/extensions/visual-designer/src/widgets/ActionHeader.tsx b/Composer/packages/extensions/visual-designer/src/widgets/ActionHeader.tsx index b925ec9a69..559108ebfa 100644 --- a/Composer/packages/extensions/visual-designer/src/widgets/ActionHeader.tsx +++ b/Composer/packages/extensions/visual-designer/src/widgets/ActionHeader.tsx @@ -11,6 +11,7 @@ import { ObiColors } from '../constants/ElementColors'; import { NodeMenu } from '../components/menus/NodeMenu'; import { ElementIcon } from '../utils/obiPropertyResolver'; import { Icon } from '../components/decorations/icon'; +import { StandardFontCSS } from '../components/elements/sharedCSS'; export interface ActionHeaderProps extends WidgetContainerProps { title: string; @@ -30,18 +31,13 @@ const DefaultColors = { const container = css` cursor: pointer; - font-family: Segoe UI; - font-size: 12px; - line-height: 14px; - color: black; position: relative; display: flex; align-items: center; `; const headerText = css` - font-size: 12px; - font-family: Segoe UI; + ${StandardFontCSS} overflow: hidden; text-overflow: ellipsis; white-space: pre; From 4589970e3bf082ca71a1ffd36b3c0b7660fe8014 Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Wed, 4 Mar 2020 15:14:09 +0800 Subject: [PATCH 27/42] removed MultilineDiv and unref defs --- .../src/components/elements/styledComponents.tsx | 16 +--------------- .../elements/styledComponents.types.ts | 8 ++------ 2 files changed, 3 insertions(+), 21 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx b/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx index 4854d1acaf..079413f35a 100644 --- a/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx +++ b/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx @@ -7,7 +7,7 @@ import { Link } from 'office-ui-fabric-react/lib/Link'; import { ObiColors } from '../../constants/ElementColors'; -import { MultiLineDivProps, DivProps } from './styledComponents.types'; +import { DivProps } from './styledComponents.types'; import { StandardFontCSS } from './sharedCSS'; const dynamicStyle = props => @@ -38,20 +38,6 @@ export const BorderedDiv = styled.div(props => ({ boxSizing: 'border-box', })); -export const MultiLineDiv = styled.div(props => ({ - color: props.color || ObiColors.Black, - fontSize: '12px', - height: `${(props.lineNum || 1) * 19}px`, - lineHeight: '19px', - fontFamily: 'Segoe UI', - overflow: 'hidden', - textOverflow: 'ellipsis', - wordBreak: 'break-word', - display: '-webkit-box', - '-webkit-line-clamp': `${props.lineNum || 1}`, - '-webkit-box-orient': 'vertical', -})); - export const SingleLineDiv = styled.div(props => ({ width: props.width || 150, height: props.height || '19px', diff --git a/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.types.ts b/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.types.ts index dd6d1680e8..df0e8a9c9e 100644 --- a/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.types.ts +++ b/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.types.ts @@ -1,15 +1,11 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT License. -import { DetailedHTMLProps, HTMLAttributes, ComponentClass, FC } from 'react'; +import { DetailedHTMLProps, HTMLAttributes } from 'react'; export type ElementProps = DetailedHTMLProps, HTMLDivElement>; + export interface DivProps extends ElementProps { width?: number; height?: number; } - -export interface MultiLineDivProps extends DivProps { - lineNum?: number; -} -export type ElementComponent = FC | ComponentClass; From e08af4a142130621ba4b65af0227c3c2be9a3182 Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Wed, 4 Mar 2020 15:30:24 +0800 Subject: [PATCH 28/42] extract css related to ellipsis --- .../visual-designer/src/components/elements/sharedCSS.tsx | 6 ++++++ .../visual-designer/src/widgets/ActionHeader.tsx | 8 +++----- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/components/elements/sharedCSS.tsx b/Composer/packages/extensions/visual-designer/src/components/elements/sharedCSS.tsx index 268c6fd927..bfcb43bdc2 100644 --- a/Composer/packages/extensions/visual-designer/src/components/elements/sharedCSS.tsx +++ b/Composer/packages/extensions/visual-designer/src/components/elements/sharedCSS.tsx @@ -9,3 +9,9 @@ export const StandardFontCSS = css` font-family: Segoe UI; color: black; `; + +export const EllipsisCSS = css` + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +`; diff --git a/Composer/packages/extensions/visual-designer/src/widgets/ActionHeader.tsx b/Composer/packages/extensions/visual-designer/src/widgets/ActionHeader.tsx index 559108ebfa..e50c58b6a3 100644 --- a/Composer/packages/extensions/visual-designer/src/widgets/ActionHeader.tsx +++ b/Composer/packages/extensions/visual-designer/src/widgets/ActionHeader.tsx @@ -11,7 +11,7 @@ import { ObiColors } from '../constants/ElementColors'; import { NodeMenu } from '../components/menus/NodeMenu'; import { ElementIcon } from '../utils/obiPropertyResolver'; import { Icon } from '../components/decorations/icon'; -import { StandardFontCSS } from '../components/elements/sharedCSS'; +import { StandardFontCSS, EllipsisCSS } from '../components/elements/sharedCSS'; export interface ActionHeaderProps extends WidgetContainerProps { title: string; @@ -37,10 +37,8 @@ const container = css` `; const headerText = css` - ${StandardFontCSS} - overflow: hidden; - text-overflow: ellipsis; - white-space: pre; + ${StandardFontCSS}; + ${EllipsisCSS}; `; export const ActionHeader: WidgetComponent = ({ From ba57933dc87d59bbbc8e889e8bf38f6aef1f1f24 Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Wed, 4 Mar 2020 15:42:07 +0800 Subject: [PATCH 29/42] apply EllipsisCSS to styledComponent --- .../components/elements/styledComponents.tsx | 47 ++++++++----------- 1 file changed, 20 insertions(+), 27 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx b/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx index 079413f35a..2d8b43de36 100644 --- a/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx +++ b/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx @@ -8,7 +8,7 @@ import { Link } from 'office-ui-fabric-react/lib/Link'; import { ObiColors } from '../../constants/ElementColors'; import { DivProps } from './styledComponents.types'; -import { StandardFontCSS } from './sharedCSS'; +import { StandardFontCSS, EllipsisCSS } from './sharedCSS'; const dynamicStyle = props => css` @@ -23,32 +23,25 @@ export const Span = styled.span` ${dynamicStyle} `; -export const BorderedDiv = styled.div(props => ({ - color: props.color || ObiColors.Black, - width: props.width, - height: props.height, - padding: '2px 0 0 8px', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - overflow: 'hidden', - fontFamily: 'Segoe UI', - fontSize: '12px', - lineHeight: '14px', - border: '1px solid #C4C4C4', - boxSizing: 'border-box', -})); - -export const SingleLineDiv = styled.div(props => ({ - width: props.width || 150, - height: props.height || '19px', - color: props.color || ObiColors.Black, - fontSize: '12px', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - overflow: 'hidden', - lineHeight: '19px', - fontFamily: 'Segoe UI', -})); +export const BorderedDiv = styled.div( + css` + ${StandardFontCSS}; + ${EllipsisCSS}; + padding: 2px 0 0 8px; + border: 1px solid #c4c4c4; + box-sizing: border-box; + `, + props => ({ + color: props.color || ObiColors.Black, + width: props.width, + height: props.height, + }) +); + +export const SingleLineDiv = styled.div` + ${StandardFontCSS}; + ${EllipsisCSS}; +`; export const TextDiv = styled.div` ${StandardFontCSS}; From a38690a7f6ad9b48bb06e15e5b1d8e3fe8fdb418 Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Wed, 4 Mar 2020 15:47:11 +0800 Subject: [PATCH 30/42] css: rename to TruncatedCSS --- .../visual-designer/src/components/elements/sharedCSS.tsx | 2 +- .../src/components/elements/styledComponents.tsx | 6 +++--- .../extensions/visual-designer/src/widgets/ActionHeader.tsx | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/components/elements/sharedCSS.tsx b/Composer/packages/extensions/visual-designer/src/components/elements/sharedCSS.tsx index bfcb43bdc2..d3ffa85300 100644 --- a/Composer/packages/extensions/visual-designer/src/components/elements/sharedCSS.tsx +++ b/Composer/packages/extensions/visual-designer/src/components/elements/sharedCSS.tsx @@ -10,7 +10,7 @@ export const StandardFontCSS = css` color: black; `; -export const EllipsisCSS = css` +export const TruncatedCSS = css` overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx b/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx index 2d8b43de36..48b28445c9 100644 --- a/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx +++ b/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx @@ -8,7 +8,7 @@ import { Link } from 'office-ui-fabric-react/lib/Link'; import { ObiColors } from '../../constants/ElementColors'; import { DivProps } from './styledComponents.types'; -import { StandardFontCSS, EllipsisCSS } from './sharedCSS'; +import { StandardFontCSS, TruncatedCSS } from './sharedCSS'; const dynamicStyle = props => css` @@ -26,7 +26,7 @@ export const Span = styled.span` export const BorderedDiv = styled.div( css` ${StandardFontCSS}; - ${EllipsisCSS}; + ${TruncatedCSS}; padding: 2px 0 0 8px; border: 1px solid #c4c4c4; box-sizing: border-box; @@ -40,7 +40,7 @@ export const BorderedDiv = styled.div( export const SingleLineDiv = styled.div` ${StandardFontCSS}; - ${EllipsisCSS}; + ${TruncatedCSS}; `; export const TextDiv = styled.div` diff --git a/Composer/packages/extensions/visual-designer/src/widgets/ActionHeader.tsx b/Composer/packages/extensions/visual-designer/src/widgets/ActionHeader.tsx index e50c58b6a3..9483175fb6 100644 --- a/Composer/packages/extensions/visual-designer/src/widgets/ActionHeader.tsx +++ b/Composer/packages/extensions/visual-designer/src/widgets/ActionHeader.tsx @@ -11,7 +11,7 @@ import { ObiColors } from '../constants/ElementColors'; import { NodeMenu } from '../components/menus/NodeMenu'; import { ElementIcon } from '../utils/obiPropertyResolver'; import { Icon } from '../components/decorations/icon'; -import { StandardFontCSS, EllipsisCSS } from '../components/elements/sharedCSS'; +import { StandardFontCSS, TruncatedCSS } from '../components/elements/sharedCSS'; export interface ActionHeaderProps extends WidgetContainerProps { title: string; @@ -38,7 +38,7 @@ const container = css` const headerText = css` ${StandardFontCSS}; - ${EllipsisCSS}; + ${TruncatedCSS}; `; export const ActionHeader: WidgetComponent = ({ From e5b48ebd650b9180cccef0548ba4d83e46bf3663 Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Wed, 4 Mar 2020 16:30:50 +0800 Subject: [PATCH 31/42] refine all ListOverview related styles --- .../src/components/common/ListOverview.tsx | 26 ++++++++++++++----- .../components/elements/styledComponents.tsx | 1 + .../nodes/templates/CardTemplate.tsx | 4 +-- .../visual-designer/src/schema/uischema.tsx | 11 +++----- 4 files changed, 26 insertions(+), 16 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/components/common/ListOverview.tsx b/Composer/packages/extensions/visual-designer/src/components/common/ListOverview.tsx index d08a2f9ba0..26640d92d6 100644 --- a/Composer/packages/extensions/visual-designer/src/components/common/ListOverview.tsx +++ b/Composer/packages/extensions/visual-designer/src/components/common/ListOverview.tsx @@ -1,7 +1,9 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT License. -import React, { FC } from 'react'; +/** @jsx jsx */ +import { jsx, css } from '@emotion/core'; +import { FC } from 'react'; import { SingleLineDiv } from '../elements/styledComponents'; @@ -9,17 +11,28 @@ export interface ListOverviewProps { items: T[]; renderItem: (item: T) => JSX.Element; maxCount?: number; + itemPadding?: number; } -export const ListOverview: FC> = ({ items, renderItem, maxCount = 3 }) => { +export const ListOverview: FC> = ({ + items, + renderItem, + maxCount = 3, + itemPadding: itemInterval = 4, +}) => { if (!Array.isArray(items) || !items.length) { return null; } return ( -
+
{items.slice(0, maxCount).map((item, index) => { return ( -
+
{renderItem(item)}
); @@ -27,9 +40,10 @@ export const ListOverview: FC> = ({ items, renderItem, ma {items.length > maxCount ? ( {`${items.length - maxCount} more`} diff --git a/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx b/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx index 48b28445c9..d96e19acfe 100644 --- a/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx +++ b/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx @@ -41,6 +41,7 @@ export const BorderedDiv = styled.div( export const SingleLineDiv = styled.div` ${StandardFontCSS}; ${TruncatedCSS}; + line-height: ${height => (height ? height + 'px' : undefined)}; `; export const TextDiv = styled.div` diff --git a/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx b/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx index 2e4bf285e0..bc7985e3ff 100644 --- a/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx +++ b/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx @@ -68,7 +68,7 @@ export const CardTemplate: FC = ({ `} onClick={onClickBody} > - {body} + {body}
); @@ -82,7 +82,7 @@ export const CardTemplate: FC = ({ `} onClick={onClickFooter} > - {footer} + {footer}
); diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx index 7cbcd30c11..888518713c 100644 --- a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx +++ b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx @@ -17,7 +17,6 @@ import { ActionHeader } from '../widgets/ActionHeader'; import { ElementIcon } from '../utils/obiPropertyResolver'; import { ObiColors } from '../constants/ElementColors'; import { SingleLineDiv, BorderedDiv } from '../components/elements/styledComponents'; -import { PropertyAssignmentSize, ChoiceInputSize } from '../constants/ElementSizes'; import { ListOverview } from '../components/common/ListOverview'; import { CardTemplate } from '../components/nodes/templates/CardTemplate'; @@ -60,7 +59,7 @@ const BaseInputSchema: UIWidget = { ( - + {item.value} )} @@ -168,15 +167,11 @@ export const uiSchema: UISchema = { body: data => ( { const content = `${item.property} = ${item.value}`; return ( - + {content} ); From 77d4fe57de216910d6c5b47bdc108a78c8d78fac Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Wed, 4 Mar 2020 17:07:19 +0800 Subject: [PATCH 32/42] control footer visibility in CardTemplate --- .../src/components/nodes/templates/CardTemplate.tsx | 8 +++++--- .../visual-designer/src/schema/uischemaRenderer.tsx | 2 +- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx b/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx index bc7985e3ff..193a412fd2 100644 --- a/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx +++ b/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx @@ -99,6 +99,9 @@ export const CardTemplate: FC = ({
); + // If body is null but footer not null, show footer as body. + const [displayedBody, displayedFooter] = [body, footer].filter(x => x !== undefined && x !== null); + const showFooter = displayedFooter !== undefined; return (
= ({ } > {renderHeader(header)} - {body && renderBody(body)} - {body && footer && renderSeparateline()} - {footer && renderFooter(footer)} + {renderBody(displayedBody)} + {showFooter ? [renderSeparateline(), renderFooter(footer)] : null}
); }; diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx b/Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx index b0a98d8992..8e5841aecc 100644 --- a/Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx +++ b/Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx @@ -34,7 +34,7 @@ const buildWidgetProp = (rawPropValue: UIWidgetProp, context: UIWidgetContext) = if (typeof rawPropValue === 'function') { const dataTransformer = rawPropValue; const element = dataTransformer(context.data); - return <>{element}; + return element; } if (typeof rawPropValue === 'object' && rawPropValue[UI_WIDGET_KEY]) { From 1c54a6915e9b6186673eb9e57ef839e2c2f7ea25 Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Wed, 4 Mar 2020 17:29:55 +0800 Subject: [PATCH 33/42] card footer style --- .../src/components/nodes/templates/CardTemplate.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx b/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx index 193a412fd2..45e541ce33 100644 --- a/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx +++ b/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx @@ -24,8 +24,6 @@ const fullWidthSection = css` box-sizing: border-box; `; -const SeparatorHeight = 8; - export interface CardTemplateProps { header: ReactNode; body?: ReactNode; @@ -77,8 +75,8 @@ export const CardTemplate: FC = ({ className="CardNode__Footer" css={css` ${fullWidthSection}; - min-height: ${StandardSectionHeight - SeparatorHeight}px; - padding: 0px 8px; + min-height: ${StandardSectionHeight}px; + padding: 7px 8px; `} onClick={onClickFooter} > @@ -91,11 +89,11 @@ export const CardTemplate: FC = ({ className="Separator" css={css` display: block; - height: ${SeparatorHeight}px; + height: 0px; overflow: visible; `} > - +
); From 3e9b70843e43d7d2232bf63d366f1e42b159d482 Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Wed, 4 Mar 2020 17:34:17 +0800 Subject: [PATCH 34/42] update footer of SetProperties & BaseInput --- .../src/components/elements/sharedCSS.tsx | 6 ++++++ .../src/components/elements/styledComponents.tsx | 16 ++++++++++++---- .../visual-designer/src/schema/uischema.tsx | 15 +++++++-------- 3 files changed, 25 insertions(+), 12 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/components/elements/sharedCSS.tsx b/Composer/packages/extensions/visual-designer/src/components/elements/sharedCSS.tsx index d3ffa85300..0b31181742 100644 --- a/Composer/packages/extensions/visual-designer/src/components/elements/sharedCSS.tsx +++ b/Composer/packages/extensions/visual-designer/src/components/elements/sharedCSS.tsx @@ -15,3 +15,9 @@ export const TruncatedCSS = css` text-overflow: ellipsis; white-space: nowrap; `; + +export const MultilineCSS = css` + white-space: initial; + overflow-wrap: break-word; + word-break: break-all; +`; diff --git a/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx b/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx index d96e19acfe..6aac3edb76 100644 --- a/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx +++ b/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx @@ -8,7 +8,7 @@ import { Link } from 'office-ui-fabric-react/lib/Link'; import { ObiColors } from '../../constants/ElementColors'; import { DivProps } from './styledComponents.types'; -import { StandardFontCSS, TruncatedCSS } from './sharedCSS'; +import { StandardFontCSS, TruncatedCSS, MultilineCSS } from './sharedCSS'; const dynamicStyle = props => css` @@ -46,8 +46,16 @@ export const SingleLineDiv = styled.div` export const TextDiv = styled.div` ${StandardFontCSS}; - white-space: initial; - overflow-wrap: break-word; - word-break: break-all; + ${MultilineCSS}; display: inline-block; `; + +export const Text = styled.span( + css` + ${StandardFontCSS}; + `, + ({ color }) => + css` + color: ${color}; + ` +); diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx index 888518713c..8e1a9e923b 100644 --- a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx +++ b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx @@ -16,7 +16,7 @@ import { ForeachWidget } from '../widgets/ForeachWidget'; import { ActionHeader } from '../widgets/ActionHeader'; import { ElementIcon } from '../utils/obiPropertyResolver'; import { ObiColors } from '../constants/ElementColors'; -import { SingleLineDiv, BorderedDiv } from '../components/elements/styledComponents'; +import { SingleLineDiv, BorderedDiv, Text } from '../components/elements/styledComponents'; import { ListOverview } from '../components/common/ListOverview'; import { CardTemplate } from '../components/nodes/templates/CardTemplate'; @@ -65,7 +65,10 @@ const BaseInputSchema: UIWidget = { )} /> ) : null, - footer: data => data.property || '', + footer: data => + data.property + ? [{data.property}, = Input({getInputType(data.$type)})] + : null, }, }; @@ -160,11 +163,8 @@ export const uiSchema: UISchema = { content: data => `{${data.property || '?'}} = ${data.value || '?'}`, }, [SDKTypes.SetProperties]: { - 'ui:widget': CardTemplate, - header: { - 'ui:widget': ActionHeader, - }, - body: data => ( + 'ui:widget': ActionCard, + content: data => ( ), - footer: data => `Set ${Array.isArray(data.assignments) ? data.assignments.length : 0} property values`, }, [SDKTypes.DeleteProperty]: { 'ui:widget': ActionCard, From 785bef087257934112ff0be77e9126ea9d118135 Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Wed, 4 Mar 2020 18:15:09 +0800 Subject: [PATCH 35/42] update rest types --- .../components/elements/styledComponents.tsx | 5 +++ .../visual-designer/src/schema/uischema.tsx | 42 +++++++++++++------ 2 files changed, 34 insertions(+), 13 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx b/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx index 6aac3edb76..5a1eab76fb 100644 --- a/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx +++ b/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx @@ -59,3 +59,8 @@ export const Text = styled.span( color: ${color}; ` ); + +export const FixedInfo = styled.span` + ${StandardFontCSS}; + color: #757575; +`; diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx index 8e1a9e923b..3e0c1223dc 100644 --- a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx +++ b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx @@ -16,7 +16,7 @@ import { ForeachWidget } from '../widgets/ForeachWidget'; import { ActionHeader } from '../widgets/ActionHeader'; import { ElementIcon } from '../utils/obiPropertyResolver'; import { ObiColors } from '../constants/ElementColors'; -import { SingleLineDiv, BorderedDiv, Text } from '../components/elements/styledComponents'; +import { SingleLineDiv, BorderedDiv, FixedInfo } from '../components/elements/styledComponents'; import { ListOverview } from '../components/common/ListOverview'; import { CardTemplate } from '../components/nodes/templates/CardTemplate'; @@ -66,9 +66,7 @@ const BaseInputSchema: UIWidget = { /> ) : null, footer: data => - data.property - ? [{data.property}, = Input({getInputType(data.$type)})] - : null, + data.property ? `${data.property} ${(= Input({getInputType(data.$type)}))}` : null, }, }; @@ -141,7 +139,9 @@ export const uiSchema: UISchema = { body: { 'ui:widget': DialogRef, dialog: data => data.dialog, + getRefContent: data => dialogRef => `${dialogRef} ${((Dialog))}`, }, + footer: data => (data.property ? `${data.property} ${(= Return value)}` : null), }, [SDKTypes.ReplaceDialog]: { 'ui:widget': CardTemplate, @@ -151,12 +151,16 @@ export const uiSchema: UISchema = { body: { 'ui:widget': DialogRef, dialog: data => data.dialog, - getRefContent: data => dialogRef => <>Switch to {dialogRef}, + getRefContent: data => dialogRef => `${dialogRef} ${((Dialog))}`, }, }, [SDKTypes.EditArray]: { - 'ui:widget': ActionCard, - content: data => `${data.changeType} {${data.itemsProperty || '?'}}`, + 'ui:widget': CardTemplate, + header: { + 'ui:widget': ActionHeader, + }, + body: data => `${({data.changeType})} ${data.itemsProperty || '?'}`, + footer: data => (data.resultProperty ? `${data.resultProperty} ${(= Result)}` : null), }, [SDKTypes.SetProperty]: { 'ui:widget': ActionCard, @@ -194,18 +198,26 @@ export const uiSchema: UISchema = { 'ui:widget': ActionHeader, }, [SDKTypes.CancelAllDialogs]: { - 'ui:widget': ActionHeader, + 'ui:widget': ActionCard, + content: data => (data.eventName ? `${data.eventName} ${((Event))}` : null), }, [SDKTypes.EndTurn]: { 'ui:widget': ActionHeader, }, [SDKTypes.EmitEvent]: { 'ui:widget': ActionCard, - content: data => data.eventName, + content: data => `${data.eventName} ${((Event))}`, }, [SDKTypes.HttpRequest]: { - 'ui:widget': ActionCard, - content: data => data.url, + 'ui:widget': CardTemplate, + body: data => ( + + {data.method} + {data.url} + + ), + footer: data => + data.resultProperty ? `${data.resultProperty} ${(= Result property)}` : null, }, [SDKTypes.TraceActivity]: { 'ui:widget': ActionHeader, @@ -222,7 +234,11 @@ export const uiSchema: UISchema = { content: data => data.hostname, }, [SDKTypes.OAuthInput]: { - 'ui:widget': ActionCard, - content: data => data.tokenProperty, + 'ui:widget': CardTemplate, + header: { + 'ui:widget': ActionHeader, + }, + body: data => {data.connectionName}, + footer: data => `${data.tokenProperty} ${(= Token Property)}`, }, }; From 3b77cfcab229ed81e6fc7fa1c9c2ee0c95d5b304 Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Wed, 4 Mar 2020 18:42:30 +0800 Subject: [PATCH 36/42] fix display problems --- .../components/elements/styledComponents.tsx | 1 + .../nodes/templates/CardTemplate.tsx | 2 +- .../visual-designer/src/schema/uischema.tsx | 74 ++++++++++++++++--- 3 files changed, 65 insertions(+), 12 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx b/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx index 5a1eab76fb..1bdc8fa122 100644 --- a/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx +++ b/Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx @@ -47,6 +47,7 @@ export const SingleLineDiv = styled.div` export const TextDiv = styled.div` ${StandardFontCSS}; ${MultilineCSS}; + line-height: 16px; display: inline-block; `; diff --git a/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx b/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx index 45e541ce33..5b478300c0 100644 --- a/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx +++ b/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx @@ -76,7 +76,7 @@ export const CardTemplate: FC = ({ css={css` ${fullWidthSection}; min-height: ${StandardSectionHeight}px; - padding: 7px 8px; + padding: 8px 8px; `} onClick={onClickFooter} > diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx index 3e0c1223dc..0f1d6d7b9c 100644 --- a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx +++ b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx @@ -66,7 +66,11 @@ const BaseInputSchema: UIWidget = { /> ) : null, footer: data => - data.property ? `${data.property} ${(= Input({getInputType(data.$type)}))}` : null, + data.property ? ( + <> + {data.property} = Input({getInputType(data.$type)}) + + ) : null, }, }; @@ -139,9 +143,18 @@ export const uiSchema: UISchema = { body: { 'ui:widget': DialogRef, dialog: data => data.dialog, - getRefContent: data => dialogRef => `${dialogRef} ${((Dialog))}`, + getRefContent: data => dialogRef => ( + <> + {dialogRef} (Dialog) + + ), }, - footer: data => (data.property ? `${data.property} ${(= Return value)}` : null), + footer: data => + data.property ? ( + <> + {data.property} = Return value + + ) : null, }, [SDKTypes.ReplaceDialog]: { 'ui:widget': CardTemplate, @@ -151,7 +164,11 @@ export const uiSchema: UISchema = { body: { 'ui:widget': DialogRef, dialog: data => data.dialog, - getRefContent: data => dialogRef => `${dialogRef} ${((Dialog))}`, + getRefContent: data => dialogRef => ( + <> + {dialogRef} (Dialog) + + ), }, }, [SDKTypes.EditArray]: { @@ -159,12 +176,23 @@ export const uiSchema: UISchema = { header: { 'ui:widget': ActionHeader, }, - body: data => `${({data.changeType})} ${data.itemsProperty || '?'}`, - footer: data => (data.resultProperty ? `${data.resultProperty} ${(= Result)}` : null), + body: data => ( + <> + {data.changeType} + {data.itemsProperty || '?'} + + ), + footer: data => + data.resultProperty ? ( + <> + {data.resultProperty} + = Result + + ) : null, }, [SDKTypes.SetProperty]: { 'ui:widget': ActionCard, - content: data => `{${data.property || '?'}} = ${data.value || '?'}`, + content: data => `${data.property || '?'} = ${data.value || '?'}`, }, [SDKTypes.SetProperties]: { 'ui:widget': ActionCard, @@ -199,17 +227,31 @@ export const uiSchema: UISchema = { }, [SDKTypes.CancelAllDialogs]: { 'ui:widget': ActionCard, - content: data => (data.eventName ? `${data.eventName} ${((Event))}` : null), + content: data => + data.eventName ? ( + <> + {data.eventName} + (Event) + + ) : null, }, [SDKTypes.EndTurn]: { 'ui:widget': ActionHeader, }, [SDKTypes.EmitEvent]: { 'ui:widget': ActionCard, - content: data => `${data.eventName} ${((Event))}`, + content: data => ( + <> + {data.eventName} + (Event) + + ), }, [SDKTypes.HttpRequest]: { 'ui:widget': CardTemplate, + header: { + 'ui:widget': ActionHeader, + }, body: data => ( {data.method} @@ -217,7 +259,12 @@ export const uiSchema: UISchema = { ), footer: data => - data.resultProperty ? `${data.resultProperty} ${(= Result property)}` : null, + data.resultProperty ? ( + <> + {data.resultProperty} + = Result property + + ) : null, }, [SDKTypes.TraceActivity]: { 'ui:widget': ActionHeader, @@ -239,6 +286,11 @@ export const uiSchema: UISchema = { 'ui:widget': ActionHeader, }, body: data => {data.connectionName}, - footer: data => `${data.tokenProperty} ${(= Token Property)}`, + footer: data => ( + <> + {data.tokenProperty} + = Token Property + + ), }, }; From a5503fce19be983d7ba41450cd5a04851748da5c Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Wed, 4 Mar 2020 18:46:09 +0800 Subject: [PATCH 37/42] fix placeholder problem of ChoiceInput --- .../packages/extensions/visual-designer/src/schema/uischema.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx index 0f1d6d7b9c..977a4b81bc 100644 --- a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx +++ b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx @@ -55,7 +55,7 @@ const BaseInputSchema: UIWidget = { }, }, body: data => - data.$type === SDKTypes.ChoiceInput ? ( + data.$type === SDKTypes.ChoiceInput && Array.isArray(data.choices) && data.choices.length ? ( ( From 46f906028022a7b040c33e34ddb02689bb159277 Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Wed, 4 Mar 2020 18:50:44 +0800 Subject: [PATCH 38/42] show '?' as some default values --- .../visual-designer/src/schema/uischema.tsx | 21 ++++++++++--------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx index 977a4b81bc..85185cef14 100644 --- a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx +++ b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx @@ -145,7 +145,7 @@ export const uiSchema: UISchema = { dialog: data => data.dialog, getRefContent: data => dialogRef => ( <> - {dialogRef} (Dialog) + {dialogRef || '?'} (Dialog) ), }, @@ -166,7 +166,7 @@ export const uiSchema: UISchema = { dialog: data => data.dialog, getRefContent: data => dialogRef => ( <> - {dialogRef} (Dialog) + {dialogRef || '?'} (Dialog) ), }, @@ -230,7 +230,7 @@ export const uiSchema: UISchema = { content: data => data.eventName ? ( <> - {data.eventName} + {data.eventName || '?'} (Event) ) : null, @@ -242,7 +242,7 @@ export const uiSchema: UISchema = { 'ui:widget': ActionCard, content: data => ( <> - {data.eventName} + {data.eventName || '?'} (Event) ), @@ -286,11 +286,12 @@ export const uiSchema: UISchema = { 'ui:widget': ActionHeader, }, body: data => {data.connectionName}, - footer: data => ( - <> - {data.tokenProperty} - = Token Property - - ), + footer: data => + data.tokenProperty ? ( + <> + {data.tokenProperty} + = Token Property + + ) : null, }, }; From aa5377e34b3f9381cea923dda711366c63cca483 Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Wed, 4 Mar 2020 18:59:23 +0800 Subject: [PATCH 39/42] fix DialogRef, CardTemplate --- .../src/components/nodes/templates/CardTemplate.tsx | 3 ++- .../extensions/visual-designer/src/schema/uischema.tsx | 3 +-- .../extensions/visual-designer/src/widgets/DialogRef.tsx | 6 +++--- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx b/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx index 5b478300c0..dd32126f8e 100644 --- a/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx +++ b/Composer/packages/extensions/visual-designer/src/components/nodes/templates/CardTemplate.tsx @@ -119,7 +119,8 @@ export const CardTemplate: FC = ({ > {renderHeader(header)} {renderBody(displayedBody)} - {showFooter ? [renderSeparateline(), renderFooter(footer)] : null} + {showFooter ? renderSeparateline() : null} + {showFooter ? renderFooter(footer) : null}
); }; diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx index 85185cef14..545b93ae56 100644 --- a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx +++ b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx @@ -178,8 +178,7 @@ export const uiSchema: UISchema = { }, body: data => ( <> - {data.changeType} - {data.itemsProperty || '?'} + {data.changeType || '?'} {data.itemsProperty || '?'} ), footer: data => diff --git a/Composer/packages/extensions/visual-designer/src/widgets/DialogRef.tsx b/Composer/packages/extensions/visual-designer/src/widgets/DialogRef.tsx index 4214ed5c0e..50f53ffdba 100644 --- a/Composer/packages/extensions/visual-designer/src/widgets/DialogRef.tsx +++ b/Composer/packages/extensions/visual-designer/src/widgets/DialogRef.tsx @@ -11,12 +11,12 @@ import { NodeEventTypes } from '../constants/NodeEventTypes'; export interface DialogRefCardProps extends WidgetContainerProps { dialog: string | object; - getRefContent?: (dialogRef: JSX.Element) => JSX.Element; + getRefContent?: (dialogRef: JSX.Element | null) => JSX.Element; } export const DialogRef: WidgetComponent = ({ id, onEvent, dialog, getRefContent }) => { const calleeDialog = typeof dialog === 'object' ? get(dialog, '$ref') : dialog; - const dialogRef = ( + const dialogRef = calleeDialog ? ( { e.stopPropagation(); @@ -25,6 +25,6 @@ export const DialogRef: WidgetComponent = ({ id, onEvent, di > {calleeDialog} - ); + ) : null; return typeof getRefContent === 'function' ? getRefContent(dialogRef) : dialogRef; }; From 19abddbc6380fc3cffef85e26f81c32b8b71d0b4 Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Wed, 4 Mar 2020 19:05:59 +0800 Subject: [PATCH 40/42] remove outdated titles --- .../extensions/visual-designer/src/schema/uischema.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx index 545b93ae56..90ab9cce63 100644 --- a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx +++ b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx @@ -82,7 +82,6 @@ export const uiSchema: UISchema = { 'ui:widget': IfConditionWidget, judgement: { 'ui:widget': ActionCard, - title: formatMessage('Branch'), content: data => data.condition, }, }, @@ -90,7 +89,6 @@ export const uiSchema: UISchema = { 'ui:widget': SwitchConditionWidget, judgement: { 'ui:widget': ActionCard, - title: formatMessage('Branch'), content: data => data.condition, }, }, @@ -98,7 +96,6 @@ export const uiSchema: UISchema = { 'ui:widget': ForeachWidget, loop: { 'ui:widget': ActionCard, - title: formatMessage('Loop: For Each'), content: data => `${formatMessage('Each value in')} {${data.itemsProperty || '?'}}`, }, }, @@ -106,7 +103,6 @@ export const uiSchema: UISchema = { 'ui:widget': ForeachWidget, loop: { 'ui:widget': ActionCard, - title: formatMessage('Loop: For Each Page'), content: data => { const pageSizeString = get(data, 'pageSize', '?'); const propString = get(data, 'itemsProperty', '?'); From 39dacc2fe36c42395b2f6034b4441c28347c49c4 Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Wed, 4 Mar 2020 19:13:21 +0800 Subject: [PATCH 41/42] use ActionCard in ReplaceDialog --- .../extensions/visual-designer/src/schema/uischema.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx index 90ab9cce63..b14450f168 100644 --- a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx +++ b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx @@ -153,11 +153,8 @@ export const uiSchema: UISchema = { ) : null, }, [SDKTypes.ReplaceDialog]: { - 'ui:widget': CardTemplate, - header: { - 'ui:widget': ActionHeader, - }, - body: { + 'ui:widget': ActionCard, + content: { 'ui:widget': DialogRef, dialog: data => data.dialog, getRefContent: data => dialogRef => ( From 4059db2bd8242f669e549269a3647169e3d07f7d Mon Sep 17 00:00:00 2001 From: Ze Ye Date: Wed, 4 Mar 2020 23:44:34 +0800 Subject: [PATCH 42/42] show DeleteProperties as ListOverview --- .../visual-designer/src/schema/uischema.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx index b14450f168..a6b805550f 100644 --- a/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx +++ b/Composer/packages/extensions/visual-designer/src/schema/uischema.tsx @@ -209,7 +209,17 @@ export const uiSchema: UISchema = { }, [SDKTypes.DeleteProperties]: { 'ui:widget': ActionCard, - content: data => `Delete ${Array.isArray(data.properties) ? data.properties.length : 0} properties`, + content: data => ( + ( + + {item} + + )} + /> + ), }, [SDKTypes.EndDialog]: { 'ui:widget': ActionHeader,