moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Chats: improve toggle surface area

This commit is contained in:
Alex Gleason 2020-08-25 19:13:54 -05:00
parent c2c3fefbaa
commit a2cd0b7630
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
2 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/soapbox/features/chats/components/chat_panes.js
View File

@ -79,11 +79,9 @@ class ChatPanes extends ImmutablePureComponent {
<div key={i} className={`pane pane--${pane.get('state')}`} style={{ right: `${right}px` }}> <div key={i} className={`pane pane--${pane.get('state')}`} style={{ right: `${right}px` }}>
<div className='pane__header'> <div className='pane__header'>
<Avatar account={account} size={18} /> <Avatar account={account} size={18} />
<div className='display-name__account'> <button className='pane__title' onClick={this.handleChatToggle(chat.get('id'))}>
<a onClick={this.handleChatToggle(chat.get('id'))}> @{acctFull(account)}
@{acctFull(account)} </button>
</a>
</div>
<div className='pane__close'> <div className='pane__close'>
<IconButton icon='close' title='Close chat' onClick={this.handleChatClose(chat.get('id'))} /> <IconButton icon='close' title='Close chat' onClick={this.handleChatClose(chat.get('id'))} />
</div> </div>
@ -113,9 +111,9 @@ class ChatPanes extends ImmutablePureComponent {
<div className='chat-panes'> <div className='chat-panes'>
<div className={`pane pane--main pane--${mainWindow}`}> <div className={`pane pane--main pane--${mainWindow}`}>
<div className='pane__header'> <div className='pane__header'>
<a onClick={this.handleMainWindowToggle}> <button className='pane__title' onClick={this.handleMainWindowToggle}>
<FormattedMessage id='chat_panels.main_window.title' defaultMessage='Chats' /> <FormattedMessage id='chat_panels.main_window.title' defaultMessage='Chats' />
</a> </button>
</div> </div>
<div className='pane__content'> <div className='pane__content'>
<ChatList onClickChat={this.handleClickChat} /> <ChatList onClickChat={this.handleClickChat} />

18
app/styles/chats.scss
View File

@ -13,6 +13,10 @@
&--main { &--main {
height: calc(100vh - 70px); height: calc(100vh - 70px);
.pane__header {
font-size: 16px;
}
} }
&--minimized { &--minimized {
@ -23,8 +27,7 @@
box-sizing: border-box; box-sizing: border-box;
background: var(--brand-color); background: var(--brand-color);
color: #fff; color: #fff;
padding: 6px 10px; padding: 0 10px;
font-size: 16px;
font-weight: bold; font-weight: bold;
border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0;
display: flex; display: flex;
@ -35,10 +38,19 @@
margin-right: 7px; margin-right: 7px;
} }
.display-name__account { .pane__title {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
width: 100%;
height: 100%;
background: transparent;
border: 0;
padding: 0;
color: #fff;
font-weight: bold;
text-align: left;
font-size: 14px;
} }
.icon-button { .icon-button {