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

modals?

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2022-04-16 23:25:15 +02:00
parent fe92b37d6d
commit 239e4b9d61
3 changed files with 24 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
app/soapbox/features/list_adder/index.js
View file

@ -6,16 +6,15 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
import IconButton from 'soapbox/components/icon_button'; import { setupListAdder, resetListAdder } from 'soapbox/actions/lists';
import { CardHeader, CardTitle, Modal } from 'soapbox/components/ui';
import { setupListAdder, resetListAdder } from '../../actions/lists';
import NewListForm from '../lists/components/new_list_form'; import NewListForm from '../lists/components/new_list_form';
import ColumnSubheading from '../ui/components/column_subheading';
import Account from './components/account'; import Account from './components/account';
import List from './components/list'; import List from './components/list';
// hack
// hack
const getOrderedLists = createSelector([state => state.get('lists')], lists => { const getOrderedLists = createSelector([state => state.get('lists')], lists => {
if (!lists) { if (!lists) {
return lists; return lists;
@ -72,13 +71,10 @@ class ListAdder extends ImmutablePureComponent {
const { accountId, listIds, intl } = this.props; const { accountId, listIds, intl } = this.props;
return ( return (
<div className='modal-root__modal compose-modal list-editor__content'> <Modal
<div className='compose-modal__header'> title={<FormattedMessage id='list_adder.header_title' defaultMessage='Add or Remove from Lists' />}
<h3 className='compose-modal__header__title'> onClose={this.onClickClose}
<FormattedMessage id='list_adder.header_title' defaultMessage='Add or Remove from Lists' /> >
</h3>
<IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={this.onClickClose} />
</div>
<div className='compose-modal__content'> <div className='compose-modal__content'>
<div className='list-adder'> <div className='list-adder'>
<div className='list-adder__account'> <div className='list-adder__account'>
@ -87,18 +83,22 @@ class ListAdder extends ImmutablePureComponent {
<br /> <br />
<ColumnSubheading text={intl.formatMessage(messages.add)} /> <CardHeader>
<CardTitle title={intl.formatMessage(messages.add)} />
</CardHeader>
<NewListForm /> <NewListForm />
<br /> <br />
<ColumnSubheading text={intl.formatMessage(messages.subheading)} /> <CardHeader>
<CardTitle title={intl.formatMessage(messages.subheading)} />
</CardHeader>
<div className='list-adder__lists'> <div className='list-adder__lists'>
{listIds.map(ListId => <List key={ListId} listId={ListId} />)} {listIds.map(ListId => <List key={ListId} listId={ListId} />)}
</div> </div>
</div> </div>
</div> </div>
</div> </Modal>
); );
} }

16
app/soapbox/features/list_editor/index.js
View file

@ -6,9 +6,7 @@ import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { setupListEditor, clearListSuggestions, resetListEditor } from 'soapbox/actions/lists'; import { setupListEditor, clearListSuggestions, resetListEditor } from 'soapbox/actions/lists';
import { Modal } from 'soapbox/components/ui'; import { CardHeader, CardTitle, Modal } from 'soapbox/components/ui';
import ColumnSubheading from '../ui/components/column_subheading';
import Account from './components/account'; import Account from './components/account';
import EditListForm from './components/edit_list_form'; import EditListForm from './components/edit_list_form';
@ -72,14 +70,18 @@ class ListEditor extends ImmutablePureComponent {
> >
<div className='compose-modal__content list-editor__content'> <div className='compose-modal__content list-editor__content'>
<div className='list-editor'> <div className='list-editor'>
<ColumnSubheading text={intl.formatMessage(messages.changeTitle)} /> <CardHeader>
<CardTitle title={intl.formatMessage(messages.changeTitle)} />
</CardHeader>
<EditListForm /> <EditListForm />
<br /> <br />
{ {
accountIds.size > 0 && accountIds.size > 0 &&
<div> <div>
<ColumnSubheading text={intl.formatMessage(messages.removeFromList)} /> <CardHeader>
<CardTitle title={intl.formatMessage(messages.removeFromList)} />
</CardHeader>
<div className='list-editor__accounts'> <div className='list-editor__accounts'>
{accountIds.map(accountId => <Account key={accountId} accountId={accountId} added />)} {accountIds.map(accountId => <Account key={accountId} accountId={accountId} added />)}
</div> </div>
@ -87,7 +89,9 @@ class ListEditor extends ImmutablePureComponent {
} }
<br /> <br />
<ColumnSubheading text={intl.formatMessage(messages.addToList)} /> <CardHeader>
<CardTitle title={intl.formatMessage(messages.addToList)} />
</CardHeader>
<Search /> <Search />
<div className='list-editor__accounts'> <div className='list-editor__accounts'>
{searchAccountIds.map(accountId => <Account key={accountId} accountId={accountId} />)} {searchAccountIds.map(accountId => <Account key={accountId} accountId={accountId} />)}

3
app/styles/components/modal.scss
View file

@ -709,9 +709,6 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex: 1; flex: 1;
padding: 10px;
padding-left: max(10px, env(safe-area-inset-left));
padding-right: max(10px, env(safe-area-inset-right));
overflow-y: hidden; overflow-y: hidden;
&--scroll { &--scroll {