From af71834676842ee807096afa3769d2fe27ebe436 Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Fri, 2 Oct 2020 09:32:20 +0300 Subject: [PATCH] Moving dock info panel to the top (#1007) * Moving EditorPanel to the top Signed-off-by: Alex Andreev * Preventing save with empty yaml Signed-off-by: Alex Andreev * Make tooltips in @withTooltip narrower Signed-off-by: Alex Andreev * Not showing api errors in icon Signed-off-by: Alex Andreev * Success notification for create resource operation Signed-off-by: Alex Andreev * Button outlined style Signed-off-by: Alex Andreev * Making second button to stay outlined Signed-off-by: Alex Andreev * Fine-tuning dock info panel colors Signed-off-by: Alex Andreev * Removing border-radius from ace-editor Signed-off-by: Alex Andreev --- .../components/ace-editor/ace-editor.scss | 2 - src/renderer/components/button/button.scss | 11 +++++ src/renderer/components/button/button.tsx | 5 ++- .../components/dock/create-resource.tsx | 15 ++++--- .../components/dock/edit-resource.tsx | 10 ++--- src/renderer/components/dock/info-panel.scss | 29 +----------- src/renderer/components/dock/info-panel.tsx | 44 ++++++------------- .../components/dock/install-chart.tsx | 10 ++--- .../components/dock/upgrade-chart.tsx | 12 ++--- .../components/tooltip/withTooltip.tsx | 1 + src/renderer/themes/kontena-dark.json | 4 +- 11 files changed, 58 insertions(+), 85 deletions(-) diff --git a/src/renderer/components/ace-editor/ace-editor.scss b/src/renderer/components/ace-editor/ace-editor.scss index 26b74d1b64..7aabbf01d5 100644 --- a/src/renderer/components/ace-editor/ace-editor.scss +++ b/src/renderer/components/ace-editor/ace-editor.scss @@ -7,7 +7,6 @@ .theme-light & { border: 1px solid gainsboro; - border-radius: $radius; .ace_scrollbar { @include custom-scrollbar(dark); @@ -19,7 +18,6 @@ width: inherit; height: inherit; font-size: 90%; - border-radius: $radius; } // --Theme customization diff --git a/src/renderer/components/button/button.scss b/src/renderer/components/button/button.scss index e85647ca9f..f586a03c5a 100644 --- a/src/renderer/components/button/button.scss +++ b/src/renderer/components/button/button.scss @@ -41,6 +41,17 @@ } } + &.outlined { + color: inherit; + background: transparent; + + &.active, + &:focus { + color: inherit; + box-shadow: 0 0 0 1px inset; + } + } + &.big { font-size: 2.2 * $unit; border-radius: 50px; diff --git a/src/renderer/components/button/button.tsx b/src/renderer/components/button/button.tsx index c0cb8dcc49..65aa3a979e 100644 --- a/src/renderer/components/button/button.tsx +++ b/src/renderer/components/button/button.tsx @@ -9,6 +9,7 @@ export interface ButtonProps extends ButtonHTMLAttributes, TooltipDecorator primary?: boolean; accent?: boolean; plain?: boolean; + outlined?: boolean; hidden?: boolean; active?: boolean; big?: boolean; @@ -23,12 +24,12 @@ export class Button extends React.PureComponent { private button: HTMLButtonElement; render() { - const { className, waiting, label, primary, accent, plain, hidden, active, big, round, tooltip, children, ...props } = this.props; + const { className, waiting, label, primary, accent, plain, hidden, active, big, round, outlined, tooltip, children, ...props } = this.props; const btnProps = props as Partial; if (hidden) return null; btnProps.className = cssNames('Button', className, { - waiting, primary, accent, plain, active, big, round, + waiting, primary, accent, plain, active, big, round, outlined }); const btnContent: ReactNode = ( diff --git a/src/renderer/components/dock/create-resource.tsx b/src/renderer/components/dock/create-resource.tsx index 6d89455b3b..e665c831a0 100644 --- a/src/renderer/components/dock/create-resource.tsx +++ b/src/renderer/components/dock/create-resource.tsx @@ -39,6 +39,7 @@ export class CreateResource extends React.Component { create = async () => { if (this.error) return; + if (!this.data.trim()) return; // do not save when field is empty const resources = jsYaml.safeLoadAll(this.data) .filter(v => !!v) // skip empty documents if "---" pasted at the beginning or end const createdResources: string[] = []; @@ -54,12 +55,14 @@ export class CreateResource extends React.Component { errors.forEach(Notifications.error); if (!createdResources.length) throw errors[0]; } - return ( + const successMessage = (

{" "} {createdResources.join(", ")} successfully created

) + Notifications.ok(successMessage) + return successMessage } render() { @@ -67,11 +70,6 @@ export class CreateResource extends React.Component { const { className } = this.props; return (
- { submitLabel={_i18n._(t`Create`)} showNotifications={false} /> +
) } diff --git a/src/renderer/components/dock/edit-resource.tsx b/src/renderer/components/dock/edit-resource.tsx index 8168af28bc..6d9aa961c2 100644 --- a/src/renderer/components/dock/edit-resource.tsx +++ b/src/renderer/components/dock/edit-resource.tsx @@ -90,11 +90,6 @@ export class EditResource extends React.Component { const { kind, getNs, getName } = resource; return (
- {
)} /> + ) } diff --git a/src/renderer/components/dock/info-panel.scss b/src/renderer/components/dock/info-panel.scss index 3bc3f94f82..23dcc52243 100644 --- a/src/renderer/components/dock/info-panel.scss +++ b/src/renderer/components/dock/info-panel.scss @@ -2,7 +2,7 @@ @include hidden-scrollbar; background: $dockInfoBackground; - border-top: 1px solid $dockInfoBorderColor; + border-bottom: 1px solid $dockInfoBorderColor; padding: $padding $padding * 2; flex-shrink: 0; @@ -12,37 +12,12 @@ > .controls { white-space: nowrap; - - &:empty { - display: none; - } + flex: 1 1; &:not(:empty) + .info { - border: 1px solid $borderColor; - border-top: 0; - border-bottom: 0; min-height: 25px; padding-left: $padding; padding-right: $padding; } } - - > .info { - @include hidden-scrollbar; - - min-width: 40px; // min-space for icon - flex: 1 1; - white-space: nowrap; - text-overflow: ellipsis; - - > div { - padding-right: $padding; - flex-shrink: 0; - } - - .Icon { - margin: 0; - margin-right: $padding; - } - } } \ No newline at end of file diff --git a/src/renderer/components/dock/info-panel.tsx b/src/renderer/components/dock/info-panel.tsx index 39d998d9d4..122fea6d9f 100644 --- a/src/renderer/components/dock/info-panel.tsx +++ b/src/renderer/components/dock/info-panel.tsx @@ -38,35 +38,29 @@ export class InfoPanel extends Component { showNotifications: true, } - @observable.ref result: ReactNode; @observable error = ""; @observable waiting = false; componentDidMount() { disposeOnUnmount(this, [ reaction(() => this.props.tabId, () => { - this.result = "" - this.error = "" this.waiting = false }) ]) } @computed get errorInfo() { - return this.error || this.props.error; + return this.props.error; } submit = async () => { const { showNotifications } = this.props; - this.result = ""; - this.error = ""; this.waiting = true; try { - this.result = await this.props.submit() - if (showNotifications) Notifications.ok(this.result); + const result = await this.props.submit(); + if (showNotifications) Notifications.ok(result); } catch (error) { - this.error = error.toString(); - if (showNotifications) Notifications.error(this.error); + if (showNotifications) Notifications.error(error.toString()); } finally { this.waiting = false } @@ -81,27 +75,15 @@ export class InfoPanel extends Component { dockStore.closeTab(this.props.tabId); } - renderInfo() { - if (!this.props.showInlineInfo) { + renderErrorIcon() { + if (!this.props.showInlineInfo || !this.errorInfo) { return; } - const { result, errorInfo } = this; return ( - <> - {result && ( -
- - {result} -
- )} - {errorInfo && ( -
- - {errorInfo} -
- )} - - ) +
+ +
+ ); } render() { @@ -114,11 +96,13 @@ export class InfoPanel extends Component { {controls}
- {waiting ? <> {submittingMessage} : this.renderInfo()} + {waiting ? <> {submittingMessage} : this.renderErrorIcon()}