You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@camel.apache.org by ma...@apache.org on 2022/11/28 17:36:04 UTC
[camel-karavan] 08/10: Projects buttons design
This is an automated email from the ASF dual-hosted git repository.
marat pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git
commit 54d21d6ca2e6b0673aba693473dfc4295a3e8499
Author: Marat Gubaidullin <ma...@gmail.com>
AuthorDate: Mon Nov 28 09:46:47 2022 -0500
Projects buttons design
---
.../src/main/webui/src/designer/DesignerPage.tsx | 113 ---------------------
karavan-app/src/main/webui/src/index.css | 12 +++
.../main/webui/src/projects/ProjectsTableRow.tsx | 50 +++++----
3 files changed, 44 insertions(+), 131 deletions(-)
diff --git a/karavan-app/src/main/webui/src/designer/DesignerPage.tsx b/karavan-app/src/main/webui/src/designer/DesignerPage.tsx
deleted file mode 100644
index baee350..0000000
--- a/karavan-app/src/main/webui/src/designer/DesignerPage.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
-import {
- Toolbar,
- ToolbarContent,
- ToolbarItem,
- PageSection, TextContent, Text, PageSectionVariants, Flex, FlexItem, Badge, Button, Tooltip
-} from '@patternfly/react-core';
-import '../designer/karavan.css';
-import DownloadIcon from "@patternfly/react-icons/dist/esm/icons/download-icon";
-import DownloadImageIcon from "@patternfly/react-icons/dist/esm/icons/image-icon";
-import {KaravanDesigner} from "./KaravanDesigner";
-
-interface Props {
- name: string,
- yaml: string,
- dark: boolean,
- onSave: (filename: string, yaml: string, propertyOnly: boolean) => void
-}
-
-interface State {
- karavanDesignerRef: any,
-}
-
-export class DesignerPage extends React.Component<Props, State> {
-
- public state: State = {
-
- karavanDesignerRef: React.createRef(),
- };
-
- componentDidMount() {
- }
-
- save(filename: string, yaml: string, propertyOnly: boolean) {
- this.props.onSave?.call(this, filename, yaml, propertyOnly);
- }
-
- download = () => {
- const {name, yaml} = this.props;
- if (name && yaml) {
- const a = document.createElement('a');
- a.setAttribute('download', 'example.yaml');
- a.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(yaml));
- a.click();
- }
- }
-
- downloadImage = () => {
- if (this.state.karavanDesignerRef) {
- this.state.karavanDesignerRef.current.downloadImage();
- }
- }
-
- render() {
- const {name, yaml} = this.props;
- return (
- <PageSection className="kamelet-section designer-page" padding={{default: 'noPadding'}}>
- <PageSection className="tools-section" padding={{default: 'noPadding'}}
- style={{backgroundColor:"transparent", paddingLeft: "var(--pf-c-page__main-section--PaddingLeft)"}}>
- <Flex className="tools" justifyContent={{default: 'justifyContentSpaceBetween'}}>
- <FlexItem>
- <TextContent className="header">
- <Text component="h2">Designer</Text>
- </TextContent>
- </FlexItem>
- <FlexItem>
- <Toolbar id="toolbar-group-types">
- <ToolbarContent>
- <ToolbarItem>
- <Tooltip content="Download YAML" position={"bottom"}>
- <Button variant="primary" icon={<DownloadIcon/>} onClick={e => this.download()}>
- YAML
- </Button>
- </Tooltip>
- </ToolbarItem>
- <ToolbarItem>
- <Tooltip content="Download image" position={"bottom"}>
- <Button variant="secondary" icon={<DownloadImageIcon/>} onClick={e => this.downloadImage()}>
- Image
- </Button>
- </Tooltip>
- </ToolbarItem>
- </ToolbarContent>
- </Toolbar>
- </FlexItem>
- </Flex>
- </PageSection>
- <KaravanDesigner
- dark={this.props.dark}
- ref={this.state.karavanDesignerRef}
- filename={name}
- yaml={yaml}
- onSave={(filename, yaml, propertyOnly) => this.save(filename, yaml, propertyOnly)}/>
- </PageSection>
- );
- }
-};
\ No newline at end of file
diff --git a/karavan-app/src/main/webui/src/index.css b/karavan-app/src/main/webui/src/index.css
index c9a66fb..872cc41 100644
--- a/karavan-app/src/main/webui/src/index.css
+++ b/karavan-app/src/main/webui/src/index.css
@@ -287,4 +287,16 @@
.new-project .runtime-label {
font-size: 14px;
margin-left: 6px;
+}
+
+.projects-page .project-action-buttons {
+ opacity: 0.5;
+}
+
+.projects-page tr:hover .project-action-buttons {
+ opacity: 1;
+}
+
+.projects-page .pf-c-table.pf-m-compact tr:not(.pf-c-table__expandable-row) > *:last-child {
+ --pf-c-table--cell--PaddingRight: 0;
}
\ No newline at end of file
diff --git a/karavan-app/src/main/webui/src/projects/ProjectsTableRow.tsx b/karavan-app/src/main/webui/src/projects/ProjectsTableRow.tsx
index 8b8107a..7e3505f 100644
--- a/karavan-app/src/main/webui/src/projects/ProjectsTableRow.tsx
+++ b/karavan-app/src/main/webui/src/projects/ProjectsTableRow.tsx
@@ -104,25 +104,39 @@ export class ProjectsTableRow extends React.Component<Props, State> {
</Flex>
}
</Td>
- <Td isActionCell>
+ <Td className="project-action-buttons">
{!isBuildIn &&
- <OverflowMenu breakpoint="md">
- <OverflowMenuContent>
- <OverflowMenuGroup groupType="button">
- <OverflowMenuItem>
- <Tooltip content={"Copy project"} position={"bottom"}>
- <Button variant={"plain"} icon={<CopyIcon/>}
- onClick={e => onProjectCopy.call(this, project)}></Button>
- </Tooltip>
- </OverflowMenuItem>
- <OverflowMenuItem>
- <Tooltip content={"Delete project"} position={"bottom"}>
- <Button variant={"plain"} icon={<DeleteIcon/>} onClick={e => onProjectDelete.call(this, project)}></Button>
- </Tooltip>
- </OverflowMenuItem>
- </OverflowMenuGroup>
- </OverflowMenuContent>
- </OverflowMenu>
+ <Flex direction={{default: "row"}} justifyContent={{default: "justifyContentFlexEnd"}} spaceItems={{ default: 'spaceItemsNone' }}>
+ <FlexItem>
+ <Tooltip content={"Copy project"} position={"bottom"}>
+ <Button variant={"plain"} icon={<CopyIcon/>}
+ onClick={e => onProjectCopy.call(this, project)}></Button>
+ </Tooltip>
+ </FlexItem>
+ <FlexItem>
+ <Tooltip content={"Delete project"} position={"bottom"}>
+ <Button variant={"plain"} icon={<DeleteIcon/>} onClick={e => onProjectDelete.call(this, project)}></Button>
+ </Tooltip>
+ </FlexItem>
+ </Flex>
+
+ // <OverflowMenu breakpoint="md">
+ // <OverflowMenuContent >
+ // <OverflowMenuGroup groupType="button">
+ // <OverflowMenuItem>
+ // <Tooltip content={"Copy project"} position={"bottom"}>
+ // <Button variant={"plain"} icon={<CopyIcon/>}
+ // onClick={e => onProjectCopy.call(this, project)}></Button>
+ // </Tooltip>
+ // </OverflowMenuItem>
+ // <OverflowMenuItem>
+ // <Tooltip content={"Delete project"} position={"bottom"}>
+ // <Button variant={"plain"} icon={<DeleteIcon/>} onClick={e => onProjectDelete.call(this, project)}></Button>
+ // </Tooltip>
+ // </OverflowMenuItem>
+ // </OverflowMenuGroup>
+ // </OverflowMenuContent>
+ // </OverflowMenu>
}
</Td>
</Tr>