Briq
/
multiparty-meeting
7
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix toolarea button, remove the old and bring the new.

master
Håvar Aambø Fosstveit 2018-12-11 11:45:58 +01:00
parent 8c60046ea3
commit 66e2c3660f
3 changed files with 109 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/lib/components/Room.jsx
View File

@ -13,7 +13,7 @@ import Me from './Me';
import Peers from './Peers'; import Peers from './Peers';
import AudioPeers from './PeerAudio/AudioPeers'; import AudioPeers from './PeerAudio/AudioPeers';
import Notifications from './Notifications'; import Notifications from './Notifications';
import ToolAreaButton from './ToolArea/ToolAreaButton'; // import ToolAreaButton from './ToolArea/ToolAreaButton';
import ToolArea from './ToolArea/ToolArea'; import ToolArea from './ToolArea/ToolArea';
import FullScreenView from './FullScreenView'; import FullScreenView from './FullScreenView';
import VideoWindow from './VideoWindow/VideoWindow'; import VideoWindow from './VideoWindow/VideoWindow';
@ -97,8 +97,6 @@ class Room extends React.Component
<Notifications /> <Notifications />
<ToolAreaButton />
{room.advancedMode ? {room.advancedMode ?
<div className='state' data-tip='Server status'> <div className='state' data-tip='Server status'>
<div className={classnames('icon', room.state)} /> <div className={classnames('icon', room.state)} />

27
app/lib/components/ToolArea/ToolArea.jsx
View File

@ -24,7 +24,7 @@ class ToolArea extends React.Component
unreadMessages, unreadMessages,
unreadFiles, unreadFiles,
toggleToolArea, toggleToolArea,
closeToolArea unread
} = this.props; } = this.props;
const VisibleTab = { const VisibleTab = {
@ -50,11 +50,21 @@ class ToolArea extends React.Component
})} })}
> >
<div <div
className={classNames('toolarea-close-button button', { className='toolarea-button'
on : toolAreaOpen onClick={toggleToolArea}
})} >
onClick={closeToolArea} <span className='content'>
<div
className='toolarea-icon'
/> />
<p>Toolbox</p>
</span>
{!toolAreaOpen && unread > 0 && (
<span className={classNames('badge', { long: unread >= 10 })}>
{unread}
</span>
)}
</div>
<div className='tab-headers'> <div className='tab-headers'>
<TabHeader <TabHeader
id='chat' id='chat'
@ -97,14 +107,17 @@ ToolArea.propTypes =
unreadFiles : PropTypes.number.isRequired, unreadFiles : PropTypes.number.isRequired,
toolAreaOpen : PropTypes.bool, toolAreaOpen : PropTypes.bool,
toggleToolArea : PropTypes.func.isRequired, toggleToolArea : PropTypes.func.isRequired,
closeToolArea : PropTypes.func.isRequired closeToolArea : PropTypes.func.isRequired,
unread : PropTypes.number.isRequired
}; };
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
currentToolTab : state.toolarea.currentToolTab, currentToolTab : state.toolarea.currentToolTab,
unreadMessages : state.toolarea.unreadMessages, unreadMessages : state.toolarea.unreadMessages,
unreadFiles : state.toolarea.unreadFiles, unreadFiles : state.toolarea.unreadFiles,
toolAreaOpen : state.toolarea.toolAreaOpen toolAreaOpen : state.toolarea.toolAreaOpen,
unread : state.toolarea.unreadMessages +
state.toolarea.unreadFiles
}); });
const mapDispatchToProps = { const mapDispatchToProps = {

87
app/stylus/components/ToolArea.styl
View File

@ -63,6 +63,93 @@
} }
} }
> .toolarea-button {
text-align: center;
writing-mode: vertical-rl;
text-orientation: mixed;
list-style: none;
height: 115px;
width: 35px;
left: -35px;
top: 50%;
transform: translate(0, -50%);
position: absolute;
cursor: pointer;
> .badge {
border-radius: 50%;
writing-mode: horizontal-tb;
font-size: 1rem;
background: #b12525;
color: #fff;
text-align: center;
margin-top: -10px;
line-height: 1rem;
margin-left: -0px;
position: absolute;
padding: 0.2rem 0.4rem;
top: 0;
left: 0;
&.long {
border-radius: 25% / 50%;
margin-top: -13px;
margin-left: -4px;
}
}
> .content {
border: 1px solid #AAA;
width: 100%;
height: 100%;
display: flex;
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
background: #FFF;
color: #333;
z-index: 2;
border-right-color: #FFF;
&:before, &:after {
border: 1px solid #AAA;
position: absolute;
width: 6px;
height: 6px;
content: "";
}
&:before {
top: -6px;
right: 0;
border-bottom-right-radius: 6px;
border-width: 0px 1px 1px 0px;
box-shadow: 0px 3px 0 #FFF;
}
&:after {
bottom: -6px;
right: 0;
border-top-right-radius: 6px;
border-width: 1px 1px 0px 0px;
box-shadow: 0px -3px 0 #FFF;
}
> .toolarea-icon {
background-position: center;
background-size: 75%;
background-repeat: no-repeat;
border-radius: 100%;
height: 32px;
width: 32px;
background-image: url('/resources/images/icon_tool_area_black.svg');
}
> p {
padding: 9px;
}
}
}
} }
@media (min-width: 600px) { @media (min-width: 600px) {