Merge pull request elastic#5 from ryankeairns/feat/custom-elements

Custom elements design cleanup
ryankeairns · Apr 19, 2019 · 0149a00 · 0149a00
2 parents 4112f28 + 34dedec
commit 0149a00
Show file tree

Hide file tree

Showing 10 changed files with 91 additions and 44 deletions.
diff --git a/x-pack/plugins/canvas/public/components/element_types/element_types.js b/x-pack/plugins/canvas/public/components/element_types/element_types.js
@@ -79,7 +79,7 @@ export class ElementTypes extends Component {
             title={displayName}
             description={help}
             onClick={whenClicked}
-            className="canvasCard"
+            className={image ? 'canvasCard' : 'canvasCard canvasCard--hasIcon'}
           />
           {showControls && (
             <ElementControls
@@ -111,11 +111,11 @@ export class ElementTypes extends Component {
     const { elementToEdit } = this.state;
     return (
       <CustomElementModal
-        title="Edit your element"
+        title="Edit element"
         name={elementToEdit.displayName}
         description={elementToEdit.help}
         onSave={updateCustomElement(elementToEdit.id)}
-        onClose={this._hideEditModal}
+        onCancel={this._hideEditModal}
       />
     );
   };

diff --git a/x-pack/plugins/canvas/public/components/element_types/element_types.scss b/x-pack/plugins/canvas/public/components/element_types/element_types.scss
@@ -16,6 +16,11 @@
       left: 0;
       top: 0;
     }
+
+    &.canvasCard--hasIcon .euiCard__top {
+      min-width: $canvasElementCardWidth;
+      padding-top: $euiSize;
+    }
   }
 
   &:hover,

diff --git a/x-pack/plugins/canvas/public/components/sidebar/element_settings/element_settings.tsx b/x-pack/plugins/canvas/public/components/sidebar/element_settings/element_settings.tsx
@@ -73,7 +73,7 @@ export const ElementSettings: FunctionComponent<Props> = ({ element }) => {
 
   return (
     <Fragment>
-      <SidebarHeader title="Selected layer" />
+      <SidebarHeader title="Selected element" />
       <EuiTabbedContent tabs={tabs} initialSelectedTab={tabs[0]} size="s" />
     </Fragment>
   );

diff --git a/x-pack/plugins/canvas/public/components/sidebar/group_settings.tsx b/x-pack/plugins/canvas/public/components/sidebar/group_settings.tsx
@@ -13,8 +13,9 @@ export const GroupSettings: FunctionComponent = () => (
   <Fragment>
     <SidebarHeader title="Grouped element" groupIsSelected showLayerControls={false} />
     <EuiSpacer />
-    <EuiText>
-      <p>Ungroup (U) these layers to edit their individual settings</p>
+    <EuiText size="s">
+      <p>Ungroup (U) to edit individual element settings.</p>
+      <p>Save this group as a new element to re-use it throughout your workpad.</p>
     </EuiText>
   </Fragment>
 );
diff --git a/x-pack/plugins/canvas/public/components/sidebar/multi_element_settings.tsx b/x-pack/plugins/canvas/public/components/sidebar/multi_element_settings.tsx
@@ -13,15 +13,12 @@ export const MultiElementSettings: FunctionComponent = () => (
   <Fragment>
     <SidebarHeader title="Multiple elements" showLayerControls={false} />
     <EuiSpacer />
-    <EuiText>
-      <p>Multiple elements are selected.</p>
-    </EuiText>
-    <EuiSpacer />
-    <EuiText>
+    <EuiText size="s">
+      <p>Multiple elements are currently selected.</p>
       <p>
-        Deselect these elements to edit their settings or press (G) to group them. Grouped elements
-        can be saved as a new, reusable element.
-      </p>
+        Deselect these elements to edit their individual settings, press (G) to
+        group them, or save this selection as a new element to re-use it
+        throughout your workpad.</p>
     </EuiText>
   </Fragment>
 );
diff --git a/x-pack/plugins/canvas/public/components/sidebar/sidebar_section_title.js b/x-pack/plugins/canvas/public/components/sidebar/sidebar_section_title.js
@@ -10,7 +10,7 @@ import { EuiTitle, EuiFlexItem, EuiFlexGroup, EuiToolTip } from '@elastic/eui';
 
 export const SidebarSectionTitle = ({ title, tip, children }) => {
   const formattedTitle = (
-    <EuiTitle size="xs">
+    <EuiTitle size="xxs">
       <h4>{title}</h4>
     </EuiTitle>
   );
@@ -27,7 +27,12 @@ export const SidebarSectionTitle = ({ title, tip, children }) => {
   };
 
   return (
-    <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
+    <EuiFlexGroup
+      className="canvasSidebar__panelTitle"
+      gutterSize="xs"
+      alignItems="center"
+      justifyContent="spaceBetween"
+    >
       <EuiFlexItem grow={false}>{renderTitle(tip)}</EuiFlexItem>
       <EuiFlexItem grow={false}>{children}</EuiFlexItem>
     </EuiFlexGroup>

diff --git a/x-pack/plugins/canvas/public/components/sidebar_header/custom_element_modal.tsx b/x-pack/plugins/canvas/public/components/sidebar_header/custom_element_modal.tsx
@@ -11,14 +11,18 @@ import PropTypes from 'prop-types';
 import {
   EuiModal,
   EuiModalBody,
+  EuiModalFooter,
   EuiOverlayMask,
   EuiFormRow,
   EuiFieldText,
   EuiFlexGroup,
   EuiFlexItem,
   EuiButton,
   EuiButtonEmpty,
+  EuiSpacer,
   EuiTextArea,
+  EuiText,
+  EuiTitle,
   EuiModalHeaderTitle,
   EuiModalHeader,
   EuiIcon,
@@ -30,8 +34,8 @@ import {
 import { VALID_IMAGE_TYPES } from '../../../common/lib/constants';
 import { encode } from '../../../common/lib/dataurl';
 
-const MAX_NAME_LENGTH = 25;
-const MAX_DESCRIPTION_LENGTH = 70;
+const MAX_NAME_LENGTH = 20;
+const MAX_DESCRIPTION_LENGTH = 100;
 
 export interface Props {
   /**
@@ -96,8 +100,8 @@ export class CustomElementModal extends PureComponent<Props> {
       <EuiOverlayMask>
         <EuiModal
           {...rest}
-          className={`canvasCustomElementModal canvasModal--fixedSize`}
-          maxWidth="1000px"
+          className={`canvasCustomElementModal`}
+          maxWidth={700}
           onClose={onCancel}
           initialFocus=".canvasCustomElementForm__name"
         >
@@ -107,8 +111,8 @@ export class CustomElementModal extends PureComponent<Props> {
             </EuiModalHeaderTitle>
           </EuiModalHeader>
           <EuiModalBody>
-            <EuiFlexGroup>
-              <EuiFlexItem>
+            <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexStart">
+              <EuiFlexItem className="canvasCustomElementForm" grow={2}>
                 <EuiFormRow
                   label="Name"
                   helpText={`${MAX_NAME_LENGTH - name.length} characters remaining`}
@@ -130,50 +134,59 @@ export class CustomElementModal extends PureComponent<Props> {
                 >
                   <EuiTextArea
                     value={description}
+                    rows={2}
                     onChange={e =>
                       e.target.value.length <= MAX_DESCRIPTION_LENGTH &&
                       this._handleChange('description', e.target.value)
                     }
                   />
                 </EuiFormRow>
-                <EuiFormRow label="Description" compressed>
+                <EuiFormRow className="canvasCustomElementForm__thumbnail" label="Thumbnail image" compressed>
                   <EuiFilePicker
                     initialPromptText="Select or drag and drop an image"
                     onChange={this._handleUpload}
                     className="canvasImageUpload"
                     accept="image/*"
                   />
                 </EuiFormRow>
-                <EuiFormRow>
-                  <EuiFlexGroup>
-                    <EuiFlexItem grow={false}>
-                      <EuiButton
-                        fill
-                        onClick={() => {
-                          onSave(name, description, image);
-                          onCancel();
-                        }}
-                      >
-                        Save
-                      </EuiButton>
-                    </EuiFlexItem>
-                    <EuiFlexItem grow={false}>
-                      <EuiButtonEmpty onClick={onCancel}>Cancel</EuiButtonEmpty>
-                    </EuiFlexItem>
-                  </EuiFlexGroup>
-                </EuiFormRow>
+                <EuiText className="canvasCustomElementForm__thumbnailHelp" size="xs">
+                  <p>Take a screenshot of your element and upload it here. This can also be done after saving.</p>
+                </EuiText>
               </EuiFlexItem>
-              <EuiFlexItem>
+              <EuiFlexItem className="canvasElementCard canvasCustomElementForm__preview" grow={1}>
+                <EuiTitle size="xxxs">
+                  <h4>Element preview</h4>
+                </EuiTitle>
+                <EuiSpacer size="s" />
                 <EuiCard
                   textAlign="left"
                   image={image || null}
                   icon={image ? null : <EuiIcon type="canvasApp" size="xxl" />}
                   title={name}
                   description={description}
+                  className={image ? 'canvasCard' : 'canvasCard canvasCard--hasIcon'}
                 />
               </EuiFlexItem>
             </EuiFlexGroup>
           </EuiModalBody>
+          <EuiModalFooter>
+            <EuiFlexGroup justifyContent="flexEnd">
+              <EuiFlexItem grow={false}>
+                <EuiButtonEmpty onClick={onCancel}>Cancel</EuiButtonEmpty>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiButton
+                  fill
+                  onClick={() => {
+                    onSave(name, description, image);
+                    onCancel();
+                  }}
+                >
+                  Save
+                </EuiButton>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiModalFooter>
         </EuiModal>
       </EuiOverlayMask>
     );

diff --git a/x-pack/plugins/canvas/public/components/sidebar_header/sidebar_header.scss b/x-pack/plugins/canvas/public/components/sidebar_header/sidebar_header.scss
@@ -1,3 +1,24 @@
+.canvasLayout__sidebarHeader {
+  padding: $euiSizeS 0;
+}
+
 .canvasContextMenu--topBorder {
   border-top: $euiBorderThin;
 }
+
+.canvasCustomElementForm {
+  min-width: 400px;
+}
+
+.canvasCustomElementForm__preview {
+  max-width: $canvasElementCardWidth;
+  min-height: $canvasElementCardWidth;
+}
+
+.canvasCustomElementForm__thumbnail {
+  padding-bottom: 0;
+}
+
+.canvasCustomElementForm__thumbnailHelp {
+  color: $euiColorDarkShade;
+}
diff --git a/x-pack/plugins/canvas/public/components/sidebar_header/sidebar_header.tsx b/x-pack/plugins/canvas/public/components/sidebar_header/sidebar_header.tsx
@@ -286,9 +286,9 @@ export class SidebarHeader extends PureComponent<Props> {
 
     return (
       <Fragment>
-        <EuiFlexGroup gutterSize="none" alignItems="center" justifyContent="spaceBetween">
+        <EuiFlexGroup className="canvasLayout__sidebarHeader" gutterSize="none" alignItems="center" justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>
-            <EuiTitle size="s">
+            <EuiTitle size="xs">
               <h3>{title}</h3>
             </EuiTitle>
           </EuiFlexItem>

diff --git a/x-pack/plugins/canvas/public/style/main.scss b/x-pack/plugins/canvas/public/style/main.scss
@@ -1,3 +1,8 @@
+/*
+  Canvas global SASS varialbes
+*/
+$canvasElementCardWidth: 220px;
+
 .canvas.canvasContainer {
   display: flex;
   flex-grow: 1;