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

Style the unread message as a badge

master
Torjus 2018-07-12 17:39:53 +02:00
parent 8d9436a10e
commit 9af194769b
2 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,7 +35,11 @@ class ToolArea extends React.Component
checked={currentToolTab === 'chat'} checked={currentToolTab === 'chat'}
/> />
<label htmlFor='tab-chat'> <label htmlFor='tab-chat'>
Chat ({unread} new) Chat
{unread > 0 && (
<span className='badge'>{unread}</span>
)}
</label> </label>
<div className='tab'> <div className='tab'>

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

@ -63,7 +63,7 @@
> label { > label {
order: 1; order: 1;
display: block; display: block;
padding: 1vmin 0 1vmin 0; padding: 1vmin 0 0.8vmin 0;
cursor: pointer; cursor: pointer;
background: rgba(#000, 0.3); background: rgba(#000, 0.3);
font-weight: bold; font-weight: bold;
@ -72,6 +72,18 @@
width: 33.33%; width: 33.33%;
font-size: 1.3vmin; font-size: 1.3vmin;
height: 3vmin; height: 3vmin;
> .badge {
padding: 0.1vmin 1vmin;
text-align: center;
font-weight: 300;
font-size: 1.2vmin;
color: #fff;
background-color: #b12525;
border-radius: 2px;
margin-left: 1vmin;
}
} }
> .tab { > .tab {