feat: repaint ui for setProperties in visual editor

Composer/packages/extensions/visual-designer/package.json

@@ -25,7 +25,8 @@
   },
   "dependencies": {
     "@bfc/shared": "*",
-    "@emotion/core": "^10.0.7",
+    "@emotion/core": "^10.0.27",
+    "@emotion/styled": "^10.0.27",
     "@types/react": "16.9.0",
     "classnames": "^2.2.6",
     "create-react-class": "^15.6.3",

Composer/packages/extensions/visual-designer/src/components/common/ListOverview.tsx

@@ -0,0 +1,39 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React, { FC, ComponentClass } from 'react';
+
+import { MultiLineDiv } from '../elements/styledComponents';
+
+export interface ListOverviewProps {
+  items: string[];
+  ItemRender: FC<any> | ComponentClass<any, any>;
+  maxCount: number;
+  styles?: Record<string, any>;
+}
+export const ListOverview: React.FC<ListOverviewProps> = ({ items, ItemRender, maxCount, styles }) => {
+  return (
+    <>
+      {items.map((value, index) => {
+        if (index < 3) {
+          return (
+            <ItemRender key={index} title={typeof value === 'string' ? value : ''}>
+              {value}
+            </ItemRender>
+          );
+        }
+      })}
+      {items.length > maxCount ? (
+        <MultiLineDiv
+          data-testid="hasMore"
+          style={{
+            ...styles,
+            textAlign: 'center',
+          }}
+        >
+          {`${items.length - 3} more`}
+        </MultiLineDiv>
+      ) : null}
+    </>
+  );
+};

Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.tsx

@@ -0,0 +1,64 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
+import { Link } from 'office-ui-fabric-react/lib/Link';
+
+import { ObiColors } from '../../constants/ElementColors';
+import { ChoiceInputSize } from '../../constants/ElementSizes';
+
+import { ElementProps, MultiLineDivProps, ElementComponent } from './styledComponents.types';
+
+const dynamicStyle = props =>
+  css`
+    color: ${props.color || ObiColors.Black};
+  `;
+
+export const LinkBtn = styled(Link)(props => ({
+  color: props.color || ObiColors.AzureBlue,
+}));
+
+export const Span = styled.span`
+  ${dynamicStyle}
+`;
+
+export const BorderedDiv: ElementComponent<ElementProps> = styled.div<ElementProps>(props => ({
+  color: props.color || ObiColors.Black,
+  width: ChoiceInputSize.width,
+  height: ChoiceInputSize.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 MultiLineDiv = styled.div<MultiLineDivProps>(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<ElementProps>(props => ({
+  color: props.color || ObiColors.Black,
+  fontSize: '12px',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  lineHeight: '19px',
+  height: '19px',
+  fontFamily: 'Segoe UI',
+}));

Composer/packages/extensions/visual-designer/src/components/elements/styledComponents.types.ts

@@ -0,0 +1,10 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { DetailedHTMLProps, HTMLAttributes, ComponentClass, FC } from 'react';
+
+export type ElementProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+export interface MultiLineDivProps extends ElementProps {
+  lineNum?: number;
+}
+export type ElementComponent<T extends ElementProps> = FC<T> | ComponentClass<T, any>;

Composer/packages/extensions/visual-designer/src/components/nodes/templates/ListOverviewCard.tsx

@@ -0,0 +1,133 @@
+// 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';
+import { SingleLineDiv } from '../../elements/styledComponents';
+
+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 ListOverviewCard: FunctionComponent<NodeProps> = ({
+  header,
+  corner,
+  label,
+  icon,
+  iconSize,
+  nodeColors,
+  onClick,
+  children = null,
+  styles = {},
+}) => {
+  const { themeColor, iconColor } = nodeColors;
+  return (
+    <div
+      className="card"
+      data-testid="FormCard"
+      css={[containerStyle, { ...styles }]}
+      onClick={e => {
+        if (typeof onClick === 'function') {
+          e.stopPropagation();
+          onClick();
+        }
+      }}
+    >
+      <div
+        className="card__header"
+        css={{
+          width: '100%',
+          height: `${headerHeight}px`,
+          backgroundColor: themeColor,
+          fontFamily: 'Segoe UI',
+          fontSize: '12px',
+          lineHeight: '14px',
+          color: 'black',
+        }}
+      >
+        <div
+          css={{
+            padding: '4px 8px',
+            fontSize: '12px',
+            fontFamily: 'Segoe UI',
+            lineHeight: '14px',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            width: 'calc(100% - 40px)',
+            whiteSpace: 'pre',
+          }}
+        >
+          {header}
+        </div>
+        <div css={{ position: 'absolute', top: 4, right: 0 }}>{corner}</div>
+      </div>
+      <div
+        className="card__content"
+        css={{
+          width: '100%',
+          minHeight: contentHeight,
+          display: 'inline-block',
+        }}
+      >
+        {label && (
+          <div
+            css={{
+              fontWeight: 400,
+              paddingLeft: '5px',
+              margin: '3px 5px',
+              fontSize: '14px',
+              lineHeight: '19px',
+              display: 'flex',
+              alignItems: 'center',
+            }}
+          >
+            {icon && icon !== ElementIcon.None && (
+              <div
+                css={{
+                  width: 16,
+                  height: 16,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  marginRight: '5px',
+                }}
+              >
+                <Icon icon={icon} color={iconColor} size={iconSize || 16} />
+              </div>
+            )}
+            <SingleLineDiv title={typeof label === 'string' ? label : ''}>{label}</SingleLineDiv>
+          </div>
+        )}
+        {children}
+      </div>
+    </div>
+  );
+};

Composer/packages/extensions/visual-designer/src/constants/ElementSizes.ts

@@ -36,6 +36,14 @@ export const ChoiceInputSize = {
 export const ChoiceInputMarginTop = 8;
 export const ChoiceInputMarginBottom = 10;
 
+export const PropertyAssignmentSize = {
+  width: 155,
+  height: 16,
+};
+
+export const AssignmentMarginTop = 6;
+export const AssignmentMarginBottom = 8;
+
 export const EventNodeSize = {
   width: 240,
   height: 125,