diff --git a/src/components/Endpoint/Endpoint.tsx b/src/components/Endpoint/Endpoint.tsx index 21bffa52..cc1197ad 100644 --- a/src/components/Endpoint/Endpoint.tsx +++ b/src/components/Endpoint/Endpoint.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { ShelfIcon } from '../../common-elements'; -import { OperationModel } from '../../services'; +import { ClipboardService, OperationModel } from '../../services'; import { Markdown } from '../Markdown/Markdown'; import { OptionsContext } from '../OptionsProvider'; import { SelectOnClick } from '../SelectOnClick/SelectOnClick'; @@ -21,10 +21,13 @@ export interface EndpointProps { hideHostname?: boolean; inverted?: boolean; + handleUrl: any; } export interface EndpointState { expanded: boolean; + selectedItem: number; + tooltipShown: boolean; } export class Endpoint extends React.Component { @@ -32,6 +35,8 @@ export class Endpoint extends React.Component { super(props); this.state = { expanded: false, + selectedItem: 0, + tooltipShown: false, }; } @@ -48,6 +53,9 @@ export class Endpoint extends React.Component { {options => ( +
+ Copied +
{operation.httpVerb}{' '} {operation.path} @@ -60,11 +68,11 @@ export class Endpoint extends React.Component { /> - {operation.servers.map(server => { + {operation.servers.map((server, index) => { return ( - - - + + + {hideHostname || options.hideHostname @@ -83,4 +91,19 @@ export class Endpoint extends React.Component {
); } + + handleUrl(url: number) { + this.props.handleUrl(url); + this.setState({ + selectedItem: url, + expanded: false, + tooltipShown: true, + }); + ClipboardService.copyCustom(this.props.operation.servers[url].url + this.props.operation.path); + setTimeout(() => { + this.setState({ + tooltipShown: false, + }); + }, 1000); + } } diff --git a/src/components/Endpoint/styled.elements.ts b/src/components/Endpoint/styled.elements.ts index 853f38b1..9913d842 100644 --- a/src/components/Endpoint/styled.elements.ts +++ b/src/components/Endpoint/styled.elements.ts @@ -4,6 +4,26 @@ export const OperationEndpointWrap = styled.div` cursor: pointer; position: relative; margin-bottom: 5px; + .showToolTip { + visibility: initial; + background-color: white; + color: black; + padding: 3px; + position: initial; + width: 53px; + text-align: center; + margin-bottom: 10px; + border-radius: 4px; + }; + .hideToolTip { + visibility:hidden; + padding: 3px; + position: initial; + width: 53px; + text-align: center; + margin-bottom: 10px; + border-radius: 4px; + } `; export const ServerRelativeURL = styled.span` @@ -66,16 +86,28 @@ export const ServersOverlay = styled.div<{ expanded: boolean }>` export const ServerItem = styled.div` padding: 10px; + background-color: #002c2d; + color: white; + display: flex; + flex-wrap: nowrap; + &.selected { + background-color: #3c7173; + } + div:first-child { + width: 20%; + padding-top: 5px; + } `; export const ServerUrl = styled.div` text-align: left; - padding: 5px; - border: 1px solid #ccc; - background: #fff; + user-select: none; + padding: 5px !important; + background-color: #ffffff33; word-break: break-all; - color: ${props => props.theme.colors.primary.main}; + width: 100% !important; + color: #00ff1c; > span { - color: ${props => props.theme.colors.text.primary}; + color: white; }; `; diff --git a/src/components/Markdown/Markdown.tsx b/src/components/Markdown/Markdown.tsx index 544a2bc8..ec3443ef 100644 --- a/src/components/Markdown/Markdown.tsx +++ b/src/components/Markdown/Markdown.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { MarkdownRenderer } from '../../services'; +import styled from '../../styled-components'; import { SanitizedMarkdownHTML } from './SanitizedMdBlock'; export interface StylingMarkdownProps { @@ -17,19 +18,31 @@ export type MarkdownProps = BaseMarkdownProps & StylingMarkdownProps & { source: string; className?: string; + onSelectUrl?: any; }; export class Markdown extends React.Component { + handleClick = () => { + this.props.onSelectUrl(); + }; render() { const { source, inline, compact, className } = this.props; const renderer = new MarkdownRenderer(); return ( - + + + ); } } +const MarkWrapper = styled.div` + div { + width: 100% !important; + padding-top: 0 !important; + } +`; diff --git a/src/components/Operation/Operation.tsx b/src/components/Operation/Operation.tsx index ef6bc251..742f6f38 100644 --- a/src/components/Operation/Operation.tsx +++ b/src/components/Operation/Operation.tsx @@ -38,6 +38,7 @@ export interface OperationProps { export interface OperationState { executeMode: boolean; + urlIndex: number; } @observer @@ -47,6 +48,7 @@ export class Operation extends React.Component { super(props); this.state = { executeMode: false, + urlIndex: 0, }; } @@ -78,7 +80,7 @@ export class Operation extends React.Component { {consoleButtonLabel} } - {options.pathInMiddlePanel && } + {options.pathInMiddlePanel && } {hasDescription && ( {description !== undefined && } @@ -91,10 +93,10 @@ export class Operation extends React.Component { - {!options.pathInMiddlePanel && } + {!options.pathInMiddlePanel && } {executeMode &&
- +
} {!executeMode && @@ -109,4 +111,9 @@ export class Operation extends React.Component { ); } + onUrlChanged = (index= 0) => { + this.setState({ + urlIndex: index, + }); + } } diff --git a/src/components/SelectOnClick/SelectOnClick.tsx b/src/components/SelectOnClick/SelectOnClick.tsx index 9856905c..0f3b879b 100644 --- a/src/components/SelectOnClick/SelectOnClick.tsx +++ b/src/components/SelectOnClick/SelectOnClick.tsx @@ -1,19 +1,28 @@ import * as React from 'react'; import { ClipboardService } from '../../services'; +import styled from '../../styled-components'; -export class SelectOnClick extends React.PureComponent { +interface SelectOnClickProps { + onSelectUrl: () => void; +} + +export class SelectOnClick extends React.PureComponent { private child: HTMLDivElement | null; handleClick = () => { ClipboardService.selectElement(this.child); + this.props.onSelectUrl(); }; render() { const { children } = this.props; return ( -
(this.child = el)} onClick={this.handleClick}> + (this.child = el)} onClick={this.handleClick.bind(this, children)}> {children} -
+ ); } } +const SelectArea = styled.div` + width: 80%; +`;