feature(ui) - assist ui wip
This commit is contained in:
Shekar Siri
parent
70159bbeb6
commit
5f4b417f97
10 changed files with 101 additions and 33 deletions
|
|
@ -4,7 +4,7 @@ import { connect } from 'react-redux'
|
|||
import cn from 'classnames'
|
||||
import { callPeer } from 'App/player';
|
||||
import { toggleChatWindow } from 'Duck/sessions';
|
||||
// import stl from './AassistActions.css'
|
||||
import stl from './AassistActions.css'
|
||||
|
||||
interface Props {
|
||||
isLive: false;
|
||||
|
|
@ -20,6 +20,7 @@ function AssistActions({ toggleChatWindow }: Props) {
|
|||
>
|
||||
<Icon name="telephone" size="20" />
|
||||
</div>
|
||||
<div className="mx-1" />
|
||||
<div className="flex items-center p-2 cursor-pointer">
|
||||
<Icon name="controller" size="20" />
|
||||
<span className="ml-2">Request Control</span>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useEffect } from 'react';
|
||||
import { fetchLiveList } from 'Duck/sessions';
|
||||
import { connect } from 'react-redux';
|
||||
import { NoContent } from 'UI';
|
||||
import { NoContent, Loader } from 'UI';
|
||||
import { List } from 'immutable';
|
||||
import SessionItem from 'Shared/SessionItem';
|
||||
|
||||
|
|
@ -26,19 +26,22 @@ function LiveSessionList(props: Props) {
|
|||
icon="exclamation-circle"
|
||||
show={ !loading && list && list.size === 0}
|
||||
>
|
||||
{list?.map(session => (
|
||||
<SessionItem
|
||||
key={ session.sessionId }
|
||||
session={ session }
|
||||
// hasUserFilter={hasUserFilter}
|
||||
// onUserClick={this.onUserClick}
|
||||
/>
|
||||
))}
|
||||
<Loader loading={ loading }>
|
||||
{list?.map(session => (
|
||||
<SessionItem
|
||||
key={ session.sessionId }
|
||||
session={ session }
|
||||
live
|
||||
// hasUserFilter={hasUserFilter}
|
||||
/>
|
||||
))}
|
||||
</Loader>
|
||||
</NoContent>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default connect(state => ({
|
||||
list: state.getIn(['sessions', 'liveSessions'])
|
||||
list: state.getIn(['sessions', 'liveSessions']),
|
||||
loading: state.getIn([ 'sessions', 'loading' ]),
|
||||
}), { fetchLiveList })(LiveSessionList)
|
||||
|
|
|
|||
|
|
@ -73,15 +73,6 @@ function SessionsMenu(props) {
|
|||
))}
|
||||
|
||||
<div className={stl.divider} />
|
||||
<div className="my-3">
|
||||
<SideMenuitem
|
||||
title="Bookmarks"
|
||||
iconName="star"
|
||||
active={activeTab.type === 'bookmark'}
|
||||
onClick={() => onMenuItemClick({ name: 'Bookmarks', type: 'bookmark' })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="my-3">
|
||||
<SideMenuitem
|
||||
title="Assist"
|
||||
|
|
@ -90,6 +81,16 @@ function SessionsMenu(props) {
|
|||
onClick={() => onMenuItemClick({ name: 'Assist', type: 'live' })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={stl.divider} />
|
||||
<div className="my-3">
|
||||
<SideMenuitem
|
||||
title="Bookmarks"
|
||||
iconName="star"
|
||||
active={activeTab.type === 'bookmark'}
|
||||
onClick={() => onMenuItemClick({ name: 'Bookmarks', type: 'bookmark' })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={cn(stl.divider, 'mb-4')} />
|
||||
<SavedSearchList />
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import {
|
|||
selectStorageType,
|
||||
selectStorageListNow,
|
||||
} from 'Player/store';
|
||||
import LiveTag from 'Shared/LiveTag';
|
||||
|
||||
import { Popup, Icon } from 'UI';
|
||||
import {
|
||||
|
|
@ -275,10 +276,11 @@ export default class Controls extends React.Component {
|
|||
</div>
|
||||
:
|
||||
<div className={ styles.buttonsLeft }>
|
||||
<button onClick={ this.goLive } className={ styles.liveTag } data-is-live={ livePlay }>
|
||||
<LiveTag onClick={ this.goLive } isLive={livePlay} />
|
||||
{/* <button onClick={ this.goLive } className={ styles.liveTag } data-is-live={ livePlay }>
|
||||
<Icon name="circle" size="8" marginRight="5" color="white" />
|
||||
<div>{'Live'}</div>
|
||||
</button>
|
||||
</button> */}
|
||||
{'Elapsed'}
|
||||
<ReduxTime name="time" />
|
||||
</div>
|
||||
|
|
|
|||
33
frontend/app/components/shared/LiveTag/LiveTag.css
Normal file
33
frontend/app/components/shared/LiveTag/LiveTag.css
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
@keyframes fade {
|
||||
0% { opacity: 1}
|
||||
50% { opacity: 0}
|
||||
100% { opacity: 1}
|
||||
}
|
||||
|
||||
.liveTag {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
height: 26px;
|
||||
width: 56px;
|
||||
border-radius: 3px;
|
||||
background-color: $gray-light;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $gray-dark;
|
||||
text-transform: uppercase;
|
||||
font-size: 10px;
|
||||
letter-spacing: 1px;
|
||||
margin-right: 10px;
|
||||
& svg {
|
||||
fill: $gray-dark;
|
||||
}
|
||||
&[data-is-live=true] {
|
||||
background-color: #42AE5E;
|
||||
color: white;
|
||||
& svg {
|
||||
fill: white;
|
||||
animation: fade 1s infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
19
frontend/app/components/shared/LiveTag/LiveTag.tsx
Normal file
19
frontend/app/components/shared/LiveTag/LiveTag.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import React from 'react'
|
||||
import { Icon } from 'UI'
|
||||
import stl from './LiveTag.css'
|
||||
|
||||
interface Props {
|
||||
onClick: () => void,
|
||||
isLive: Boolean
|
||||
}
|
||||
|
||||
function LiveTag({ isLive, onClick }: Props) {
|
||||
return (
|
||||
<button onClick={ onClick } className={ stl.liveTag } data-is-live={ isLive }>
|
||||
<Icon name="circle" size="8" marginRight="5" color="white" />
|
||||
<div>{'Live'}</div>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export default LiveTag
|
||||
1
frontend/app/components/shared/LiveTag/index.js
Normal file
1
frontend/app/components/shared/LiveTag/index.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
export { default } from './LiveTag'
|
||||
|
|
@ -14,6 +14,7 @@ import { toggleFavorite } from 'Duck/sessions';
|
|||
import { session as sessionRoute } from 'App/routes';
|
||||
import { durationFormatted, formatTimeOrDate } from 'App/date';
|
||||
import stl from './sessionItem.css';
|
||||
import LiveTag from 'Shared/LiveTag';
|
||||
|
||||
const Label = ({ label = '', color = 'color-gray-medium'}) => (
|
||||
<div className={ cn('font-light text-sm', color)}>{label}</div>
|
||||
|
|
@ -51,7 +52,8 @@ export default class SessionItem extends React.PureComponent {
|
|||
favorite,
|
||||
userDeviceType,
|
||||
userUuid,
|
||||
userNumericHash,
|
||||
userNumericHash,
|
||||
live
|
||||
},
|
||||
timezone,
|
||||
onUserClick,
|
||||
|
|
@ -89,18 +91,24 @@ export default class SessionItem extends React.PureComponent {
|
|||
<Label label="Duration" />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center px-4">
|
||||
<div className={ stl.count }>{ eventsCount }</div>
|
||||
<Label label={ eventsCount === 0 || eventsCount > 1 ? 'Events' : 'Event' } />
|
||||
</div>
|
||||
{!live && (
|
||||
<div className="flex flex-col items-center px-4">
|
||||
<div className={ stl.count }>{ eventsCount }</div>
|
||||
<Label label={ eventsCount === 0 || eventsCount > 1 ? 'Events' : 'Event' } />
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<div className="flex flex-col items-center px-4">
|
||||
<div className={ cn(stl.count, { "color-gray-medium": errorsCount === 0 }) } >{ errorsCount }</div>
|
||||
<Label label="Errors" color={errorsCount > 0 ? '' : 'color-gray-medium'} />
|
||||
</div>
|
||||
{!live && (
|
||||
<div className="flex flex-col items-center px-4">
|
||||
<div className={ cn(stl.count, { "color-gray-medium": errorsCount === 0 }) } >{ errorsCount }</div>
|
||||
<Label label="Errors" color={errorsCount > 0 ? '' : 'color-gray-medium'} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{ live && <LiveTag isLive={true} /> }
|
||||
|
||||
<div className={ cn(stl.iconDetails, 'px-4') }>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone-fill" viewBox="0 0 16 16">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-telephone-fill" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 545 B After Width: | Height: | Size: 502 B |
|
|
@ -1,3 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone" viewBox="0 0 16 16">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-telephone" viewBox="0 0 16 16">
|
||||
<path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 892 B After Width: | Height: | Size: 849 B |
Loading…
Add table
Reference in a new issue