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 <[email protected]> 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>
