External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-14 21:07:39 -02:30
Code Issues Packages Projects Releases Wiki Activity

Turns all the workflow tool buttons in to pf button components.

Browse Source
This commit is contained in:
mabashian
2020-01-24 14:52:03 -05:00
parent e34bf90ca7
commit c971e9d61c
1 changed files with 26 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
awx/ui_next/src/components/Workflow/WorkflowTools.jsx
View File

@@ -3,7 +3,7 @@ import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import styled from 'styled-components'; import styled from 'styled-components';
import { func, number } from 'prop-types'; import { func, number } from 'prop-types';
import { Tooltip } from '@patternfly/react-core'; import { Button, Tooltip } from '@patternfly/react-core';
import { import {
CaretDownIcon, CaretDownIcon,
CaretLeftIcon, CaretLeftIcon,
@@ -19,7 +19,7 @@ import {
const Wrapper = styled.div` const Wrapper = styled.div`
background-color: white; background-color: white;
border: 1px solid #c7c7c7; border: 1px solid #c7c7c7;
height: 135px; height: 215px;
position: relative; position: relative;
`; `;
@@ -87,10 +87,14 @@ function WorkflowTools({
content={i18n._(t`Fit the graph to the available screen size`)} content={i18n._(t`Fit the graph to the available screen size`)}
position="bottom" position="bottom"
> >
<DesktopIcon onClick={() => onFitGraph()} css="margin-right: 30px;" /> <Button variant="tertiary" css="margin-right: 30px;" onClick={() => onFitGraph()}>
<DesktopIcon />
</Button>
</Tooltip> </Tooltip>
<Tooltip content={i18n._(t`Zoom Out`)} position="bottom"> <Tooltip content={i18n._(t`Zoom Out`)} position="bottom">
<MinusIcon onClick={() => zoomOut()} css="margin-right: 10px;" /> <Button variant="tertiary" css="margin-right: 10px;" onClick={() => zoomOut()}>
<MinusIcon />
</Button>
</Tooltip> </Tooltip>
<input <input
id="zoom-slider" id="zoom-slider"
@@ -104,28 +108,40 @@ function WorkflowTools({
value={zoomPercentage} value={zoomPercentage}
/> />
<Tooltip content={i18n._(t`Zoom In`)} position="bottom"> <Tooltip content={i18n._(t`Zoom In`)} position="bottom">
<PlusIcon onClick={() => zoomIn()} css="margin: 0px 25px 0px 10px;" /> <Button variant="tertiary" css="margin: 0px 25px 0px 10px;" onClick={() => zoomIn()}>
<PlusIcon />
</Button>
</Tooltip> </Tooltip>
<Pan> <Pan>
<Tooltip content={i18n._(t`Pan Left`)} position="left"> <Tooltip content={i18n._(t`Pan Left`)} position="left">
<CaretLeftIcon onClick={() => onPan('left')} /> <Button variant="tertiary" css="margin-right: 10px;" onClick={() => onPan('left')}>
<CaretLeftIcon />
</Button>
</Tooltip> </Tooltip>
<PanCenter> <PanCenter>
<Tooltip content={i18n._(t`Pan Up`)} position="top"> <Tooltip content={i18n._(t`Pan Up`)} position="top">
<CaretUpIcon onClick={() => onPan('up')} /> <Button variant="tertiary" css="margin-bottom: 10px;" onClick={() => onPan('up')}>
<CaretUpIcon />
</Button>
</Tooltip> </Tooltip>
<Tooltip <Tooltip
content={i18n._(t`Set zoom to 100% and center graph`)} content={i18n._(t`Set zoom to 100% and center graph`)}
position="top" position="top"
> >
<HomeIcon onClick={() => onPanToMiddle()} /> <Button variant="tertiary" onClick={() => onPanToMiddle()}>
<HomeIcon />
</Button>
</Tooltip> </Tooltip>
<Tooltip content={i18n._(t`Pan Down`)} position="bottom"> <Tooltip content={i18n._(t`Pan Down`)} position="bottom">
<CaretDownIcon onClick={() => onPan('down')} /> <Button variant="tertiary" css="margin-top: 10px;" onClick={() => onPan('down')}>
<CaretDownIcon />
</Button>
</Tooltip> </Tooltip>
</PanCenter> </PanCenter>
<Tooltip content={i18n._(t`Pan Right`)} position="right"> <Tooltip content={i18n._(t`Pan Right`)} position="right">
<CaretRightIcon onClick={() => onPan('right')} /> <Button variant="tertiary" css="margin-left: 10px;" onClick={() => onPan('right')}>
<CaretRightIcon />
</Button>
</Tooltip> </Tooltip>
</Pan> </Pan>
</Tools> </Tools>