jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change(ui): add more icon to steps

Browse source
This commit is contained in:
sylenien 2022-10-28 11:09:24 +02:00 • committed by Delirium
parent f2c9250cc8
commit 049e44319d
7 changed files with 44 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx
View file

@ -1,5 +1,5 @@
import React from 'react';
import { Icon } from 'UI';
import { Icon, ItemMenu } from 'UI';
import { Step as IStep } from '../../types';
const STEP_NAMES = { CLICKRAGE: 'Multiple click', CLICK: 'Clicked', LOCATION: 'Visited' };
import { useStore } from 'App/mstore';
@ -8,24 +8,47 @@ import { Duration } from 'luxon';
function Step({ step, ind, isDefault }: { step: IStep; ind: number; isDefault?: boolean }) {
const { bugReportStore } = useStore();
const [menuOpen, setMenu] = React.useState(false);
const menuItems = [
{ icon: 'quotes', text: 'Add Note', onClick: () => console.log('note') },
{ icon: 'info-circle', text: `Add Error`, onClick: () => console.log('note') },
{ icon: 'network', text: 'Add Fetch/XHR', onClick: () => console.log('note') },
];
return (
<div
className={cn(
'py-1 px-2 flex items-center gap-2 w-full rounded',
isDefault ? '' : 'hover:bg-figmaColors-secondary-outlined-hover-background group'
menuOpen
? 'bg-figmaColors-secondary-outlined-hover-background'
: isDefault
? ''
: 'hover:bg-figmaColors-secondary-outlined-hover-background group'
)}
>
<div className="rounded-3xl px-4 bg-gray-lightest">{ind + 1}</div>
<div className="flex items-center gap-2">
{/* @ts-ignore */}
<Icon name={step.icon} size={16} color="gray-darkest" />
<div className="px-2 text-disabled-text rounded bg-light-blue-bg">{Duration.fromMillis(step.time).toFormat('hh:mm:ss')}</div>
<div className="px-2 text-disabled-text rounded bg-light-blue-bg">
{Duration.fromMillis(step.time).toFormat('hh:mm:ss')}
</div>
{/* @ts-ignore */}
<div className="font-semibold">{STEP_NAMES[step.type]}</div>
<div className="text-gray-medium">{step.details}</div>
</div>
<div className="hidden group-hover:flex items-center ml-auto gap-4">
<Icon name="plus" size={16} className="cursor-pointer hover:fill-gray-darkest" />
<div
className={cn('group-hover:flex items-center ml-auto gap-4', menuOpen ? 'flex' : 'hidden')}
>
<ItemMenu
label={
<Icon name="plus" size={16} className="cursor-pointer hover:fill-gray-darkest" />
}
items={menuItems}
flat
onToggle={(isOpen) => setMenu(isOpen)}
/>
<div onClick={() => bugReportStore.removeStep(step)}>
<Icon name="trash" size={16} className="cursor-pointer hover:fill-gray-darkest" />
</div>

80
frontend/app/components/ui/ItemMenu/ItemMenu.js
View file

@ -1,80 +0,0 @@
import React from 'react';
import { Icon } from 'UI';
import styles from './itemMenu.module.css';
import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
import cn from 'classnames';
export default class ItemMenu extends React.PureComponent {
state = {
displayed: false,
};
handleEsc = (e) => e.key === 'Escape' && this.closeMenu();
componentDidMount() {
document.addEventListener('keydown', this.handleEsc, false);
}
componentWillUnmount() {
document.removeEventListener('keydown', this.handleEsc, false);
}
onClick = (callback) => (e) => {
e.stopPropagation();
callback(e);
};
toggleMenu = (e) => {
this.setState({ displayed: !this.state.displayed });
};
closeMenu = () => this.setState({ displayed: false });
render() {
const { items, label = '', bold } = this.props;
const { displayed } = this.state;
const parentStyles = label ? 'rounded px-2 py-2 hover:bg-gray-light' : '';
return (
<div className={styles.wrapper}>
<OutsideClickDetectingDiv onClickOutside={this.closeMenu}>
<div
onClick={this.toggleMenu}
className={cn('flex items-center cursor-pointer select-none hover rounded-full', parentStyles, { 'bg-gray-light': displayed && label })}
>
{label && <span className={cn('mr-1', bold ? 'font-medium color-gray-darkest' : 'color-gray-medium')}>{label}</span>}
<div
ref={(ref) => {
this.menuBtnRef = ref;
}}
className={cn('rounded-full flex items-center justify-center', { 'bg-gray-light': displayed, 'w-10 h-10': !label })}
role="button"
>
<Icon name="ellipsis-v" size="16" />
</div>
</div>
</OutsideClickDetectingDiv>
<div className={cn(styles.menu, { [styles.menuDim]: !bold })} data-displayed={displayed}>
{items
.filter(({ hidden }) => !hidden)
.map(({ onClick, text, icon, disabled = false }) => (
<div
key={text}
onClick={!disabled ? this.onClick(onClick) : () => {}}
className={disabled ? 'cursor-not-allowed' : ''}
role="menuitem"
>
<div className={cn(styles.menuItem, 'text-neutral-700', { disabled: disabled })}>
{icon && (
<div className={styles.iconWrapper}>
<Icon name={icon} size="13" color="gray-dark" />
</div>
)}
<div>{text}</div>
</div>
</div>
))}
</div>
</div>
);
}
}

2
frontend/app/components/ui/ItemMenu/ItemMenu.tsx
View file

@ -16,7 +16,7 @@ interface Props {
bold?: boolean;
flat?: boolean;
items: Item[];
label?: React.ReactNode;
label: React.ReactNode;
onToggle?: (args: any) => void;
}

0
frontend/app/components/ui/ItemMenu/index.js → frontend/app/components/ui/ItemMenu/index.ts
View file

3
frontend/app/components/ui/SVG.tsx
View file

File diff suppressed because one or more lines are too long

4
frontend/app/svg/icons/info-circle.svg
View file

@ -1,4 +1,4 @@
<svg viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg viewBox="0 0 35 35" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_10_16)">
<path d="M17.5 32.8125C13.4389 32.8125 9.54408 31.1992 6.67243 28.3276C3.80078 25.4559 2.1875 21.5611 2.1875 17.5C2.1875 13.4389 3.80078 9.54408 6.67243 6.67243C9.54408 3.80078 13.4389 2.1875 17.5 2.1875C21.5611 2.1875 25.4559 3.80078 28.3276 6.67243C31.1992 9.54408 32.8125 13.4389 32.8125 17.5C32.8125 21.5611 31.1992 25.4559 28.3276 28.3276C25.4559 31.1992 21.5611 32.8125 17.5 32.8125ZM17.5 35C22.1413 35 26.5925 33.1563 29.8744 29.8744C33.1563 26.5925 35 22.1413 35 17.5C35 12.8587 33.1563 8.40752 29.8744 5.12563C26.5925 1.84375 22.1413 0 17.5 0C12.8587 0 8.40752 1.84375 5.12563 5.12563C1.84375 8.40752 0 12.8587 0 17.5C0 22.1413 1.84375 26.5925 5.12563 29.8744C8.40752 33.1563 12.8587 35 17.5 35V35Z" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 13C18.3284 13 19 12.3284 19 11.5C19 10.6716 18.3284 10 17.5 10C16.6716 10 16 10.6716 16 11.5C16 12.3284 16.6716 13 17.5 13ZM19 15.877C19 15.0485 18.3284 14.377 17.5 14.377C16.6716 14.377 16 15.0485 16 15.877V24.5C16 25.3284 16.6716 26 17.5 26C18.3284 26 19 25.3284 19 24.5V15.877Z" />
@ -8,4 +8,4 @@
<rect width="35" height="35" fill="white"/>
</clipPath>
</defs>
</svg>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

11
frontend/app/svg/icons/network.svg Normal file
View file

@ -0,0 +1,11 @@
<svg viewBox="0 0 13 14" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2199_12097)">
<path d="M3.64902 4.87542C3.75408 4.87542 3.85483 4.83368 3.92912 4.7594C4.0034 4.68511 4.04514 4.58436 4.04514 4.4793C4.04514 4.37425 4.0034 4.2735 3.92912 4.19921C3.85483 4.12492 3.75408 4.08319 3.64902 4.08319C3.54397 4.08319 3.44322 4.12492 3.36893 4.19921C3.29464 4.2735 3.25291 4.37425 3.25291 4.4793C3.25291 4.58436 3.29464 4.68511 3.36893 4.7594C3.44322 4.83368 3.54397 4.87542 3.64902 4.87542ZM2.46068 4.4793C2.46068 4.58436 2.41895 4.68511 2.34467 4.7594C2.27038 4.83368 2.16963 4.87542 2.06457 4.87542C1.95951 4.87542 1.85876 4.83368 1.78448 4.7594C1.71019 4.68511 1.66846 4.58436 1.66846 4.4793C1.66846 4.37425 1.71019 4.2735 1.78448 4.19921C1.85876 4.12492 1.95951 4.08319 2.06457 4.08319C2.16963 4.08319 2.27038 4.12492 2.34467 4.19921C2.41895 4.2735 2.46068 4.37425 2.46068 4.4793Z" fill-opacity="0.6"/>
<path d="M0.0839844 4.08317C0.0839844 3.66295 0.250917 3.25994 0.54806 2.96279C0.845203 2.66565 1.24822 2.49872 1.66844 2.49872H11.1752C11.5954 2.49872 11.9984 2.66565 12.2955 2.96279C12.5927 3.25994 12.7596 3.66295 12.7596 4.08317V4.8754C12.7596 5.29562 12.5927 5.69864 12.2955 5.99578C11.9984 6.29292 11.5954 6.45985 11.1752 6.45985H6.81791V8.83653C7.13308 8.83653 7.43534 8.96173 7.6582 9.18459C7.88106 9.40745 8.00626 9.70971 8.00626 10.0249H12.3635C12.4686 10.0249 12.5693 10.0666 12.6436 10.1409C12.7179 10.2152 12.7596 10.3159 12.7596 10.421C12.7596 10.526 12.7179 10.6268 12.6436 10.7011C12.5693 10.7754 12.4686 10.8171 12.3635 10.8171H8.00626C8.00626 11.1323 7.88106 11.4345 7.6582 11.6574C7.43534 11.8802 7.13308 12.0054 6.81791 12.0054H6.02569C5.71052 12.0054 5.40826 11.8802 5.1854 11.6574C4.96255 11.4345 4.83735 11.1323 4.83735 10.8171H0.480098C0.375042 10.8171 0.274289 10.7754 0.200003 10.7011C0.125718 10.6268 0.0839844 10.526 0.0839844 10.421C0.0839844 10.3159 0.125718 10.2152 0.200003 10.1409C0.274289 10.0666 0.375042 10.0249 0.480098 10.0249H4.83735C4.83735 9.70971 4.96255 9.40745 5.1854 9.18459C5.40826 8.96173 5.71052 8.83653 6.02569 8.83653V6.45985H1.66844C1.24822 6.45985 0.845203 6.29292 0.54806 5.99578C0.250917 5.69864 0.0839844 5.29562 0.0839844 4.8754V4.08317ZM0.876211 4.08317V4.8754C0.876211 5.08551 0.959678 5.28702 1.10825 5.43559C1.25682 5.58416 1.45833 5.66763 1.66844 5.66763H11.1752C11.3853 5.66763 11.5868 5.58416 11.7354 5.43559C11.8839 5.28702 11.9674 5.08551 11.9674 4.8754V4.08317C11.9674 3.87306 11.8839 3.67155 11.7354 3.52298C11.5868 3.37441 11.3853 3.29095 11.1752 3.29095H1.66844C1.45833 3.29095 1.25682 3.37441 1.10825 3.52298C0.959678 3.67155 0.876211 3.87306 0.876211 4.08317ZM5.62957 10.0249V10.8171C5.62957 10.9222 5.67131 11.0229 5.74559 11.0972C5.81988 11.1715 5.92063 11.2132 6.02569 11.2132H6.81791C6.92297 11.2132 7.02372 11.1715 7.09801 11.0972C7.1723 11.0229 7.21403 10.9222 7.21403 10.8171V10.0249C7.21403 9.91982 7.1723 9.81907 7.09801 9.74478C7.02372 9.6705 6.92297 9.62876 6.81791 9.62876H6.02569C5.92063 9.62876 5.81988 9.6705 5.74559 9.74478C5.67131 9.81907 5.62957 9.91982 5.62957 10.0249Z" />
</g>
<defs>
<clipPath id="clip0_2199_12097">
<rect width="12.6756" height="12.6756" transform="translate(0.0839844 0.914276)"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.2 KiB