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

change(ui) - notes updates and other changes

Browse source
This commit is contained in:
Shekar Siri 2022-10-26 18:28:32 +02:00
parent 1d9c26d8cd
commit 1a15fc1089
12 changed files with 165 additions and 154 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/app/components/Session_/EventsBlock/NoteEvent.tsx
View file

@ -73,7 +73,7 @@ function NoteEvent(props: Props) {
return (
<div
className="flex items-start flex-col p-2 border rounded"
style={{ background: 'rgba(253, 243, 155, 0.1)' }}
style={{ background: '#FFFEF5' }}
>
<div className="flex items-center w-full relative">
<div className="p-3 bg-gray-light rounded-full">
@ -83,7 +83,7 @@ function NoteEvent(props: Props) {
<div
className="text-base"
style={{
maxWidth: 160,
maxWidth: 150,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
@ -95,12 +95,12 @@ function NoteEvent(props: Props) {
{formatTimeOrDate(props.note.createdAt as unknown as number, timezone)}
</div>
</div>
<div className="cursor-pointer absolute" style={{ right: -10 }}>
<div className="cursor-pointer absolute" style={{ right: -5 }}>
<ItemMenu bold items={menuItems} />
</div>
</div>
<div
className="text-xl my-3 overflow-y-scroll overflow-x-hidden"
className="text-base capitalize-first my-3 overflow-y-scroll overflow-x-hidden"
style={{ maxHeight: 200, maxWidth: 220 }}
>
{props.note.message}

87
frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx
View file

@ -4,7 +4,7 @@ import { tagProps, Note } from 'App/services/NotesService';
import { formatTimeOrDate } from 'App/date';
import { useStore } from 'App/mstore';
import { observer } from 'mobx-react-lite';
import { TeamBadge } from 'Shared/SessionListContainer/components/Notes'
import { TeamBadge } from 'Shared/SessionListContainer/components/Notes';
interface Props {
userEmail: string;
@ -25,16 +25,18 @@ function ReadNote(props: Props) {
style={{ background: '#FFFEF5', width: 400 }}
>
<div className="flex items-start font-semibold w-full text-xl">
<div style={{ flex: 9 }}>You do not have access to this note. <br /> Or it’s deleted.</div>
<div style={{ flex: 9 }}>
You do not have access to this note. <br /> Or it’s deleted.
</div>
<div style={{ flex: 1 }} className="cursor-pointer ml-auto" onClick={props.onClose}>
<Icon name="close" size={18} />
</div>
</div>
<div
onClick={props.onClose}
className="rounded py-2 px-4 mt-2 bg-active-blue flex items-center text-blue gap-2 cursor-pointer hover:bg-active-blue-border"
className="rounded py-2 px-4 mt-2 flex items-center text-blue gap-2 cursor-pointer hover:bg-active-blue"
>
<Icon size={16} name="play-fill" color="main" />
<Icon size={20} name="play-fill" color="main" />
<span>Play Session</span>
</div>
</div>
@ -43,51 +45,54 @@ function ReadNote(props: Props) {
}
return (
<div style={{ position: 'absolute', top: 0, left: 0, height: '100%', width: '100%' }} className="flex items-center justify-center">
<div
className="flex items-start !text-lg flex-col p-4 border gap-2 rounded"
style={{ background: '#FFFEF5', width: 500 }}
>
<div className="flex items-center w-full">
<div className="p-2 bg-gray-light rounded-full">
<Icon name="quotes" color="main" size={16} />
</div>
<div className="ml-2">
<div className="text-base">{props.userEmail}</div>
<div className="text-disabled-text text-sm">
{formatTimeOrDate(props.note.createdAt as unknown as number, timezone)}
</div>
</div>
<div className="ml-auto cursor-pointer self-start" onClick={props.onClose}>
<Icon name="close" size={18} />
<div
style={{ position: 'absolute', top: 0, left: 0, height: '100%', width: '100%' }}
className="flex items-center justify-center"
>
<div
className="flex items-start !text-lg flex-col p-4 border gap-2 rounded"
style={{ background: '#FFFEF5', width: 500 }}
>
<div className="flex items-center w-full">
<div className="p-2 bg-gray-light rounded-full">
<Icon name="quotes" color="main" size={16} />
</div>
<div className="ml-2">
<div className="text-base">{props.userEmail}</div>
<div className="text-disabled-text text-sm">
{formatTimeOrDate(props.note.createdAt as unknown as number, timezone)}
</div>
</div>
<div className="text-xl py-3 overflow-y-scroll" style={{ maxHeight: 400 }}>{props.note.message}</div>
<div className="w-full">
<div className="flex items-center gap-2 flex-wrap w-full">
{props.note.tag ? (
<div
// @ts-ignore
style={{ background: tagProps[props.note.tag], userSelect: 'none', fontSize: 11 }}
className="rounded-full text-sm px-2 py-1 text-white flex items-center justify-center"
>
{props.note.tag}
</div>
) : null}
{!props.note.isPublic ? null : (
<TeamBadge />
)}
<div className="ml-auto cursor-pointer self-start" onClick={props.onClose}>
<Icon name="close" size={18} />
</div>
</div>
<div className="text-xl py-3 overflow-y-scroll capitalize-first" style={{ maxHeight: 400 }}>
{props.note.message}
</div>
<div className="w-full">
<div className="flex items-center gap-2 flex-wrap w-full">
{props.note.tag ? (
<div
onClick={props.onClose}
className="ml-auto rounded py-2 px-4 flex items-center text-blue gap-2 cursor-pointer border border-main hover:bg-light-blue-bg"
// @ts-ignore
style={{ background: tagProps[props.note.tag], userSelect: 'none', fontSize: 11 }}
className="rounded-full text-sm px-2 py-1 text-white flex items-center justify-center"
>
<Icon size={16} name="play-fill" color="main" />
<span>Play Session</span>
{props.note.tag}
</div>
) : null}
{!props.note.isPublic ? null : <TeamBadge />}
<div
onClick={props.onClose}
className="ml-auto rounded py-2 px-4 flex items-center text-blue gap-2 cursor-pointer hover:bg-active-blue"
>
<Icon size={20} name="play-fill" color="main" />
<span>Play Session</span>
</div>
</div>
</div>
</div>
</div>
);
}

11
frontend/app/components/Session_/components/NotePopup.tsx
View file

@ -3,7 +3,7 @@ import { Icon } from 'UI';
import { connectPlayer, pause } from 'Player';
import { connect } from 'react-redux';
import { setCreateNoteTooltip } from 'Duck/sessions';
import cn from 'classnames'
import cn from 'classnames';
function NotePopup({
setCreateNoteTooltip,
@ -28,13 +28,12 @@ function NotePopup({
<div
onClick={toggleNotePopup}
className={cn(
'mr-4 hover:bg-gray-light-shade rounded-md p-1 flex items-center', tooltipActive
? 'cursor-not-allowed'
: 'cursor-pointer')
}
'mr-4 hover:bg-gray-light-shade rounded-md p-1 flex items-center',
tooltipActive ? 'cursor-not-allowed' : 'cursor-pointer'
)}
>
<Icon name="quotes" size="16" className="mr-2" />
Add note
Add Note
</div>
);
}

22
frontend/app/components/shared/SessionListContainer/components/Notes/NoteItem.tsx
View file

@ -9,7 +9,7 @@ import { ItemMenu } from 'UI';
import copy from 'copy-to-clipboard';
import { toast } from 'react-toastify';
import { session } from 'App/routes';
import TeamBadge from './TeamBadge'
import TeamBadge from './TeamBadge';
interface Props {
note: Note;
@ -39,11 +39,12 @@ function NoteItem(props: Props) {
{ icon: 'trash', text: 'Delete', onClick: onDelete },
];
const safeStrMessage = props.note.message.length > 150 ? props.note.message.slice(0, 150) + '...' : props.note.message
const safeStrMessage =
props.note.message.length > 150 ? props.note.message.slice(0, 150) + '...' : props.note.message;
return (
<div
className="flex items-center p-4 border-b"
style={{ background: 'rgba(253, 243, 155, 0.1)' }}
className="flex items-center p-2 border-b"
// style={{ background: '#FFFEF5' }}
>
<Link
style={{ width: '90%' }}
@ -54,8 +55,8 @@ function NoteItem(props: Props) {
: '')
}
>
<div className="flex flex-col gap-1 cursor-pointer">
<div className="text-xl py-3">{safeStrMessage}</div>
<div className="flex flex-col gap-1 p-2 rounded cursor-pointer note-hover">
<div className="py-1 capitalize-first">{safeStrMessage}</div>
<div className="flex items-center gap-2">
{props.note.tag ? (
<div
@ -71,13 +72,12 @@ function NoteItem(props: Props) {
{props.note.tag}
</div>
) : null}
<div className="text-disabled-text flex items-center">
<span className="text-figmaColors-text-primary mr-1">By </span>
<div className="text-disabled-text flex items-center text-sm">
<span className="color-gray-darkest mr-1">By </span>
{props.userEmail},{' '}
{formatTimeOrDate(props.note.createdAt as unknown as number, timezone)}
{!props.note.isPublic ? null : (
<TeamBadge />
)}
<div className="mx-2" />
{!props.note.isPublic ? null : <TeamBadge />}
</div>
</div>
</div>

4
frontend/app/components/shared/SessionListContainer/components/Notes/NoteTags.tsx
View file

@ -34,9 +34,9 @@ function NoteTags() {
</div>
))}
<div className="ml-2" />
<Select name="sortNotes" plain right options={sortOptions} onChange={({ value }) => notesStore.toggleSort(value.value)} defaultValue={sortOptions[0].value} />
<div className="ml-2" />
<Select name="notesOwner" plain right options={notesOwner} onChange={({ value }) => notesStore.toggleShared(value.value === '1')} defaultValue={notesOwner[0].value} />
<div className="ml-2" />
<Select name="sortNotes" plain right options={sortOptions} onChange={({ value }) => notesStore.toggleSort(value.value)} defaultValue={sortOptions[0].value} />
</div>
);
}

4
frontend/app/components/shared/SessionListContainer/components/Notes/TeamBadge.tsx
View file

@ -4,8 +4,8 @@ import { Icon } from 'UI'
export default function TeamBadge() {
return (
<div className="flex items-center ml-2">
<Icon name="user-friends" className="mr-1" color="gray-dark" />
<span className="text-disabled-text">Team</span>
<Icon name="user-friends" className="mr-1" color="gray-darkest" />
<span className="text-disabled-text text-sm">Team</span>
</div>
)
}

145
frontend/app/components/shared/SessionListContainer/components/SessionHeader/SessionHeader.tsx
View file

@ -13,88 +13,87 @@ import SessionSettingButton from '../SessionSettingButton';
// @ts-ignore
const Tab = ({ addBorder, onClick, children }) => (
<div
className={cn('py-3 cursor-pointer', {
'border-b color-teal border-teal': addBorder,
})}
onClick={onClick}
>
{children}
</div>
)
<div
className={cn('py-3 cursor-pointer border-b', {
'border-b color-teal border-teal': addBorder,
'border-transparent': !addBorder,
})}
onClick={onClick}
>
{children}
</div>
);
interface Props {
listCount: number;
filter: any;
activeTab: string;
isEnterprise: boolean;
applyFilter: (filter: any) => void;
setActiveTab: (tab: any) => void;
listCount: number;
filter: any;
activeTab: string;
isEnterprise: boolean;
applyFilter: (filter: any) => void;
setActiveTab: (tab: any) => void;
}
function SessionHeader(props: Props) {
const {
filter: { startDate, endDate, rangeValue },
activeTab,
isEnterprise,
} = props;
const {
filter: { startDate, endDate, rangeValue },
activeTab,
isEnterprise,
} = props;
const period = Period({ start: startDate, end: endDate, rangeName: rangeValue });
const period = Period({ start: startDate, end: endDate, rangeName: rangeValue });
const onDateChange = (e: any) => {
const dateValues = e.toJSON();
props.applyFilter(dateValues);
};
const onDateChange = (e: any) => {
const dateValues = e.toJSON();
props.applyFilter(dateValues);
};
return (
<div className="flex items-center px-4 justify-between">
<div className="flex items-center justify-between">
<div className="mr-3 text-lg flex items-center gap-4">
<Tab
onClick={() => props.setActiveTab({ type: 'all' })}
addBorder={activeTab === 'all'}
>
<span className="font-bold">SESSIONS</span>
</Tab>
<Tab
onClick={() => props.setActiveTab({ type: 'bookmark' })}
addBorder={activeTab === 'bookmark'}
>
<span className="font-bold">{`${isEnterprise ? 'VAULT' : 'BOOKMARKS'}`}</span>
</Tab>
<Tab
addBorder={activeTab === 'notes'}
onClick={() => props.setActiveTab({ type: 'notes' })}
>
<span className="font-bold">NOTES</span>
</Tab>
</div>
</div>
{activeTab !== 'notes' && activeTab !== 'bookmark' ? (
<div className="flex items-center">
<SessionTags />
<div className="mx-4" />
<SelectDateRange period={period} onChange={onDateChange} right={true} />
<div className="mx-2" />
<SessionSort />
<SessionSettingButton />
</div>
) : null}
{activeTab === 'notes' && (
<div className="flex items-center">
<NoteTags />
</div>
)}
return (
<div className="flex items-center px-4 justify-between">
<div className="flex items-center justify-between">
<div className="mr-3 text-base flex items-center gap-4">
<Tab onClick={() => props.setActiveTab({ type: 'all' })} addBorder={activeTab === 'all'}>
<span className="font-bold">SESSIONS</span>
</Tab>
<Tab
onClick={() => props.setActiveTab({ type: 'bookmark' })}
addBorder={activeTab === 'bookmark'}
>
<span className="font-bold">{`${isEnterprise ? 'VAULT' : 'BOOKMARKS'}`}</span>
</Tab>
<Tab
addBorder={activeTab === 'notes'}
onClick={() => props.setActiveTab({ type: 'notes' })}
>
<span className="font-bold">NOTES</span>
</Tab>
</div>
);
</div>
{activeTab !== 'notes' && activeTab !== 'bookmark' ? (
<div className="flex items-center">
<SessionTags />
<div className="mx-4" />
<SelectDateRange period={period} onChange={onDateChange} right={true} />
<div className="mx-2" />
<SessionSort />
<SessionSettingButton />
</div>
) : null}
{activeTab === 'notes' && (
<div className="flex items-center">
<NoteTags />
</div>
)}
</div>
);
}
export default connect(
(state: any) => ({
filter: state.getIn(['search', 'instance']),
listCount: numberWithCommas(state.getIn(['sessions', 'total'])),
activeTab: state.getIn(['search', 'activeTab', 'type']),
isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
}),
{ applyFilter, setActiveTab }
(state: any) => ({
filter: state.getIn(['search', 'instance']),
listCount: numberWithCommas(state.getIn(['sessions', 'total'])),
activeTab: state.getIn(['search', 'activeTab', 'type']),
isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
}),
{ applyFilter, setActiveTab }
)(SessionHeader);

2
frontend/app/components/shared/XRayButton/xrayButton.module.css
View file

@ -2,7 +2,7 @@
text-align: center;
padding: 4px 14px;
border: none;
border-radius: 6px;
border-radius: 3px;
font-weight: 500;
&.default {

2
frontend/app/components/ui/BackLink/BackLink.js
View file

@ -12,7 +12,7 @@ export default function BackLink ({
{ label && <div className="ml-1">{ label }</div> }
</div>
);
const verticalClassName = cn(className, cls.backLink, "flex justify-center items-center pr-4 color-gray-dark", { "flex-col": vertical });
const verticalClassName = cn(className, cls.backLink, "flex justify-center items-center pr-2 color-gray-dark", { "flex-col": vertical });
return to ?
<Link
className={ verticalClassName }

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

@ -39,7 +39,7 @@ export default class ItemMenu extends React.PureComponent {
<OutsideClickDetectingDiv onClickOutside={this.closeMenu}>
<div
onClick={this.toggleMenu}
className={cn('flex items-center cursor-pointer select-none', parentStyles, { 'bg-gray-light': displayed && label })}
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

2
frontend/app/mstore/notesStore.ts
View file

@ -11,7 +11,7 @@ export default class NotesStore {
sessionNotes: SessionNotes = {}
loading: boolean
page = 1
pageSize = 15
pageSize = 10
activeTags: iTag[] = []
sort = 'createdAt'
order: 'DESC' | 'ASC' = 'DESC'

30
frontend/app/styles/main.css
View file

@ -6,7 +6,7 @@
}
* {
border-color: #EEEEEE;
border-color: #eeeeee;
}
.page {
padding-top: 50px;
@ -24,23 +24,23 @@
}
@media only screen and (max-width: 1380px) {
.container-70 {
.container-70 {
width: 90%;
}
}
@media only screen and (min-width: 1380px) {
.container-70 {
width: 1280px;
width: 1280px;
}
}
.container-70 {
position: relative;
position: relative;
margin: 0 auto;
}
.container-90 {
.container-90 {
width: 98%;
margin: 0 auto;
}
@ -84,7 +84,7 @@
& .title {
margin-right: 15px;
& span {
color: $gray-medium;
font-weight: 300;
@ -97,13 +97,13 @@
align-items: center;
}
[data-hidden=true] {
[data-hidden='true'] {
display: none !important;
}
[data-disabled=true] {
[data-disabled='true'] {
pointer-events: none;
opacity: .5;
opacity: 0.5;
}
.form-group {
@ -125,6 +125,14 @@
}
}
.note-hover {
border: solid thin transparent;
&:hover {
background-color: #FFFEF5;
border-color: $gray-lightest;
}
}
.text-dotted-underline {
text-decoration: underline dotted !important;
}
@ -143,8 +151,8 @@
background-color: $gray-light;
} */
.no-scroll {
.no-scroll {
height: 100vh;
overflow-y: hidden;
padding-right: 15px;
}
}