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
index a3baff775f94aa..3de7e26d35fbf8 100644
--- 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 && (
);
};
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
index 389c3350be1173..cc3cdec747e3d5 100644
--- 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
index 9bef835bfb8e9c..5cb960cf6a5bf5 100644
--- 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 = ({ element }) => {
return (
-
+
);
diff --git a/x-pack/plugins/canvas/public/components/sidebar/group_settings.tsx b/x-pack/plugins/canvas/public/components/sidebar/group_settings.tsx
index 268a7a46352359..08ddd3768d3d83 100644
--- 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 = () => (
-
- Ungroup (U) these layers to edit their individual settings
+
+ Ungroup (U) to edit individual element settings.
+ Save this group as a new element to re-use it throughout your workpad.
);
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
index 46a52f42e09bb4..5cda074940f609 100644
--- 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 = () => (
-
- Multiple elements are selected.
-
-
-
+
+ Multiple elements are currently selected.
- Deselect these elements to edit their settings or press (G) to group them. Grouped elements
- can be saved as a new, reusable element.
-
+ 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.
);
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
index 2d9888b969452f..192786ae86a450 100644
--- 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 = (
-
+
{title}
);
@@ -27,7 +27,12 @@ export const SidebarSectionTitle = ({ title, tip, children }) => {
};
return (
-
+
{renderTitle(tip)}
{children}
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
index eaad8f189b77a7..dea74594283f76 100644
--- 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,6 +11,7 @@ import PropTypes from 'prop-types';
import {
EuiModal,
EuiModalBody,
+ EuiModalFooter,
EuiOverlayMask,
EuiFormRow,
EuiFieldText,
@@ -18,7 +19,10 @@ import {
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 {
@@ -107,8 +111,8 @@ export class CustomElementModal extends PureComponent {
-
-
+
+
{
>
e.target.value.length <= MAX_DESCRIPTION_LENGTH &&
this._handleChange('description', e.target.value)
}
/>
-
+
{
accept="image/*"
/>
-
-
-
- {
- onSave(name, description, image);
- onCancel();
- }}
- >
- Save
-
-
-
- Cancel
-
-
-
+
+ Take a screenshot of your element and upload it here. This can also be done after saving.
+
-
+
+
+ Element preview
+
+
}
title={name}
description={description}
+ className={image ? 'canvasCard' : 'canvasCard canvasCard--hasIcon'}
/>
+
+
+
+ Cancel
+
+
+ {
+ onSave(name, description, image);
+ onCancel();
+ }}
+ >
+ Save
+
+
+
+
);
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
index e6745858ed6dbb..5f31af697a731a 100644
--- 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;
+}
\ No newline at end of file
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
index 5b97c2893af65d..3e8b86e1ab17e4 100644
--- 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 {
return (
-
+
-
+
{title}
diff --git a/x-pack/plugins/canvas/public/style/main.scss b/x-pack/plugins/canvas/public/style/main.scss
index ca22b3648a4da6..9e1e7cc175b513 100644
--- 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;