Skip to content

Commit

Permalink
fixed caption formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@shahzad31
shahzad31 committed Feb 15, 2021
1 parent ab8b268 commit b4396e2
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 55 deletions.
71 changes: 36 additions & 35 deletions ...gins/uptime/public/components/monitor/ping_list/columns/ping_timestamp/ping_timestamp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
import React, { useContext, useEffect, useState } from 'react';
import useIntersection from 'react-use/lib/useIntersection';
import styled from 'styled-components';
import moment from 'moment';
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { Ping } from '../../../../../../common/runtime_types/ping';
import { useFetcher, FETCH_STATUS } from '../../../../../../../observability/public';
import { getJourneyScreenshot } from '../../../../../state/api/journey';
Expand All @@ -17,6 +19,7 @@ import { NoImageDisplay } from './no_image_display';
import { StepImageCaption } from './step_image_caption';
import { StepImagePopover } from './step_image_popover';
import { formatCaptionContent } from './translations';
import { getShortTimeStamp } from '../../../../overview/monitor_list/columns/monitor_status_column';

const StepDiv = styled.div`
figure.euiImage {
Expand All @@ -25,15 +28,6 @@ const StepDiv = styled.div`
}
}
figure.euiImage-isFullScreen {
div.stepArrowsFullScreen {
display: flex;
background-color: #fff;
}
.euiImage__caption {
background-color: #fff;
}
}
position: relative;
div.stepArrows {
display: none;
Expand Down Expand Up @@ -95,31 +89,38 @@ export const PingTimestamp = ({ timestamp, ping }: Props) => {
);

return (
<StepDiv
onMouseEnter={() => setIsImagePopoverOpen(true)}
onMouseLeave={() => setIsImagePopoverOpen(false)}
ref={intersectionRef}
>
{imgSrc ? (
<StepImagePopover
captionContent={captionContent}
imageCaption={ImageCaption}
imgSrc={imgSrc}
isImagePopoverOpen={isImagePopoverOpen}
/>
) : (
<NoImageDisplay
imageCaption={ImageCaption}
isLoading={status === FETCH_STATUS.LOADING}
isPending={status === FETCH_STATUS.PENDING}
/>
)}
<NavButtons
maxSteps={data?.maxSteps}
setIsImagePopoverOpen={setIsImagePopoverOpen}
setStepNumber={setStepNumber}
stepNumber={stepNumber}
/>
</StepDiv>
<EuiFlexGroup alignItems="center">
<EuiFlexItem grow={false}>
<StepDiv
onMouseEnter={() => setIsImagePopoverOpen(true)}
onMouseLeave={() => setIsImagePopoverOpen(false)}
ref={intersectionRef}
>
{imgSrc ? (
<StepImagePopover
captionContent={captionContent}
imageCaption={ImageCaption}
imgSrc={imgSrc}
isImagePopoverOpen={isImagePopoverOpen}
/>
) : (
<NoImageDisplay
imageCaption={ImageCaption}
isLoading={status === FETCH_STATUS.LOADING}
isPending={status === FETCH_STATUS.PENDING}
/>
)}
<NavButtons
maxSteps={data?.maxSteps}
setIsImagePopoverOpen={setIsImagePopoverOpen}
setStepNumber={setStepNumber}
stepNumber={stepNumber}
/>
</StepDiv>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<span className="eui-textNoWrap">{getShortTimeStamp(moment(timestamp))}</span>
</EuiFlexItem>
</EuiFlexGroup>
);
};
35 changes: 22 additions & 13 deletions .../uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_caption.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,12 @@
* 2.0.
*/

import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
import React from 'react';
import moment from 'moment';
import { nextAriaLabel, prevAriaLabel } from './translations';
import { getShortTimeStamp } from '../../../../overview/monitor_list/columns/monitor_status_column';
import { euiStyled } from '../../../../../../../../../src/plugins/kibana_react/common';

export interface StepImageCaptionProps {
captionContent: string;
Expand All @@ -20,6 +21,13 @@ export interface StepImageCaptionProps {
timestamp: string;
}

const ImageCaption = euiStyled.div`
background-color: ${(props) => props.theme.eui.euiColorLightestShade};
display: inline-block;
width: 100%;
text-decoration: none;
`;

export const StepImageCaption: React.FC<StepImageCaptionProps> = ({
captionContent,
imgSrc,
Expand All @@ -29,41 +37,42 @@ export const StepImageCaption: React.FC<StepImageCaptionProps> = ({
timestamp,
}) => {
return (
<>
<ImageCaption>
<div className="stepArrowsFullScreen">
{imgSrc && (
<EuiFlexGroup gutterSize="s" alignItems="center" justifyContent="center">
<EuiFlexGroup alignItems="center" justifyContent="center">
<EuiFlexItem grow={false}>
<EuiButtonIcon
<EuiButtonEmpty
disabled={stepNumber === 1}
size="m"
onClick={() => {
setStepNumber(stepNumber - 1);
}}
iconType="arrowLeft"
aria-label={prevAriaLabel}
/>
>
{prevAriaLabel}
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiText>{captionContent}</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonIcon
<EuiButtonEmpty
disabled={stepNumber === maxSteps}
size="m"
onClick={() => {
setStepNumber(stepNumber + 1);
}}
iconType="arrowRight"
iconSide="right"
aria-label={nextAriaLabel}
/>
>
{nextAriaLabel}
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
)}
<span className="eui-textNoWrap">{getShortTimeStamp(moment(timestamp))}</span>
</div>
{/* TODO: Add link to details page once it's available */}
<span className="eui-textNoWrap">{getShortTimeStamp(moment(timestamp))}</span>
<EuiSpacer size="s" />
</>
</ImageCaption>
);
};
14 changes: 7 additions & 7 deletions .../uptime/public/components/monitor/ping_list/columns/ping_timestamp/step_image_popover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,11 @@ const POPOVER_IMG_WIDTH = 640;
const StepImage = styled(EuiImage)`
&&& {
display: flex;
figcaption {
white-space: nowrap;
align-self: center;
margin-left: 8px;
margin-top: 8px;
text-decoration: none !important;
figure.euiImage-isFullScreen {
display: flex;
div.stepArrowsFullScreen {
display: flex;
}
}
}
`;
Expand All @@ -39,7 +38,7 @@ export const StepImagePopover: React.FC<StepImagePopoverProps> = ({
isImagePopoverOpen,
}) => (
<EuiPopover
anchorPosition="rightCenter"
anchorPosition="upCenter"
button={
<StepImage
allowFullScreen={true}
Expand All @@ -49,6 +48,7 @@ export const StepImagePopover: React.FC<StepImagePopoverProps> = ({
hasShadow
url={imgSrc}
size="s"
className="syntheticsStepImage"
/>
}
isOpen={isImagePopoverOpen}
Expand Down

0 comments on commit b4396e2

Please sign in to comment.