bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Chats: mobile styling

Browse source
This commit is contained in:
Alex Gleason 2020-08-28 14:42:58 -05:00
parent 46323e088a
commit 572a1db9f7
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
3 changed files with 54 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
app/soapbox/features/ui/index.js
View file

@ -158,8 +158,6 @@ const LAYOUT = {
},
};
const shouldHideFAB = path => path.match(/^\/posts\/|^\/search|^\/getting-started|^\/chats/);
class SwitchingColumnsArea extends React.PureComponent {
static propTypes = {
@ -577,6 +575,16 @@ class UI extends React.PureComponent {
this.props.dispatch(openModal('COMPOSE'));
}
shouldHideFAB = () => {
const path = this.context.router.history.location.pathname;
return path.match(/^\/posts\/|^\/search|^\/getting-started|^\/chats/);
}
isChatRoomLocation = () => {
const path = this.context.router.history.location.pathname;
return path.match(/^\/chats\/(.*)/);
}
render() {
const { streamingUrl } = this.props;
const { draggingOver, mobile } = this.state;
@ -602,11 +610,31 @@ class UI extends React.PureComponent {
goToRequests: this.handleHotkeyGoToRequests,
} : {};
const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <button key='floating-action-button' onClick={this.handleOpenComposeModal} className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}><Icon id='pencil' fixedWidth /></button>;
const fabElem = (
<button
key='floating-action-button'
onClick={this.handleOpenComposeModal}
className='floating-action-button'
aria-label={intl.formatMessage(messages.publish)}
>
<Icon id='pencil' fixedWidth />
</button>
);
const floatingActionButton = this.shouldHideFAB() ? null : fabElem;
const classnames = classNames('ui', {
'is-composing': isComposing,
'ui--chatroom': this.isChatRoomLocation(),
});
const style = {
pointerEvents: dropdownMenuIsOpen ? 'none' : null,
};
return (
<HotKeys keyMap={keyMap} handlers={handlers} ref={this.setHotkeysRef} attach={window} focused>
<div className={classNames('ui', { 'is-composing': isComposing })} ref={this.setRef} style={{ pointerEvents: dropdownMenuIsOpen ? 'none' : null }}>
<div className={classnames} ref={this.setRef} style={style}>
<TabsBar />
<SwitchingColumnsArea location={location} onLayoutChange={this.handleLayoutChange}>
{children}

3
app/soapbox/reducers/accounts.js
View file

@ -3,7 +3,7 @@ import {
ACCOUNTS_IMPORT,
ACCOUNT_FETCH_FAIL_FOR_USERNAME_LOOKUP,
} from '../actions/importer';
import { CHATS_FETCH_SUCCESS } from 'soapbox/actions/chats';
import { CHATS_FETCH_SUCCESS, CHAT_FETCH_SUCCESS } from 'soapbox/actions/chats';
import { STREAMING_CHAT_UPDATE } from 'soapbox/actions/streaming';
import { normalizeAccount as normalizeAccount2 } from 'soapbox/actions/importer/normalizer';
import { Map as ImmutableMap, fromJS } from 'immutable';
@ -48,6 +48,7 @@ export default function accounts(state = initialState, action) {
}));
case CHATS_FETCH_SUCCESS:
return importAccountsFromChats(state, action.chats);
case CHAT_FETCH_SUCCESS:
case STREAMING_CHAT_UPDATE:
return importAccountsFromChats(state, [action.chat]);
default:

25
app/styles/chats.scss
View file

@ -176,9 +176,24 @@
}
}
.column .chat-box {
max-height: calc(100vh - 125px);
overflow: hidden;
display: flex;
flex-direction: column;
.ui--chatroom {
padding-bottom: 0;
.columns-area__panels__main .columns-area {
height: calc(100vh - 100px);
box-sizing: border-box;
overflow: hidden;
@media(max-width: 630px) {
height: calc(100vh - 50px);
}
}
.page {
.chat-box {
display: flex;
flex-direction: column;
overflow: hidden;
}
}
}