random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

New form style for groups

Browse Source
This commit is contained in:
2458773093 2019-07-18 22:37:53 +03:00
parent 6104e45d18
commit f33c178b5a
7 changed files with 144 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
app/javascript/gabsocial/features/groups/create/index.js
View File

@ -2,14 +2,15 @@ import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { changeValue, submit, reset } from '../../../actions/group_editor'; import { changeValue, submit, reset } from '../../../actions/group_editor';
import IconButton from '../../../components/icon_button'; import Icon from '../../../components/icon';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import classNames from 'classnames';
const messages = defineMessages({ const messages = defineMessages({
heading: { id: 'groups.create.heading', defaultMessage: 'New group' }, title: { id: 'groups.form.title', defaultMessage: 'Enter a new group title' },
title: { id: 'groups.form.title', defaultMessage: 'Title' }, description: { id: 'groups.form.description', defaultMessage: 'Enter the group description' },
description: { id: 'groups.form.description', defaultMessage: 'Description' }, coverImage: { id: 'groups.form.coverImage', defaultMessage: 'Upload a banner image' },
coverImage: { id: 'groups.form.coverImage', defaultMessage: 'Cover Image' }, coverImageChange: { id: 'groups.form.coverImageChange', defaultMessage: 'Banner image selected' },
create: { id: 'groups.form.create', defaultMessage: 'Create group' }, create: { id: 'groups.form.create', defaultMessage: 'Create group' },
}); });
@ -67,53 +68,46 @@ class Create extends React.PureComponent {
this.props.onSubmit(this.context.router.history); this.props.onSubmit(this.context.router.history);
} }
handleClick = () => {
this.props.onSubmit(this.context.router.history);
}
render () { render () {
const { title, description, coverImage, disabled, intl } = this.props; const { title, description, coverImage, disabled, intl } = this.props;
return ( return (
<form className='column-inline-form' onSubmit={this.handleSubmit}> <form className='group-form' onSubmit={this.handleSubmit}>
<h2>{intl.formatMessage(messages.heading)}</h2> <div>
<label>
<input <input
className='setting-text' className='group-form__input'
value={title} value={title}
disabled={disabled} disabled={disabled}
onChange={this.handleTitleChange} onChange={this.handleTitleChange}
placeholder={intl.formatMessage(messages.title)} placeholder={intl.formatMessage(messages.title)}
/> />
</label> </div>
<label> <div>
<input <input
className='setting-text' className='group-form__input'
value={description} value={description}
disabled={disabled} disabled={disabled}
onChange={this.handleDescriptionChange} onChange={this.handleDescriptionChange}
placeholder={intl.formatMessage(messages.description)} placeholder={intl.formatMessage(messages.description)}
/> />
</label> </div>
<div>
<label htmlFor='group_cover_image' className={classNames('group-form__file-label', { 'group-form__file-label--selected': coverImage !== null })}>
<Icon id='camera' /> {intl.formatMessage(coverImage === null ? messages.coverImage : messages.coverImageChange)}
</label>
<label>
<input <input
type='file' type='file'
className='setting-text' className='group-form__file'
id='group_cover_image'
disabled={disabled} disabled={disabled}
onChange={this.handleCoverImageChange} onChange={this.handleCoverImageChange}
placeholder={intl.formatMessage(messages.coverImage)}
/> />
</label>
<IconButton <button>{intl.formatMessage(messages.create)}</button>
disabled={disabled} </div>
icon='plus'
title={title}
onClick={this.handleClick}
/>
</form> </form>
); );
} }

42
app/javascript/gabsocial/features/groups/edit/index.js
View File

@ -3,16 +3,17 @@ import { connect } from 'react-redux';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { changeValue, submit, setUp } from '../../../actions/group_editor'; import { changeValue, submit, setUp } from '../../../actions/group_editor';
import IconButton from '../../../components/icon_button'; import Icon from '../../../components/icon';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import LoadingIndicator from '../../../components/loading_indicator'; import LoadingIndicator from '../../../components/loading_indicator';
import Column from '../../../components/column'; import Column from '../../../components/column';
import classNames from 'classnames';
const messages = defineMessages({ const messages = defineMessages({
heading: { id: 'groups.edit.heading', defaultMessage: 'Edit group' },
title: { id: 'groups.form.title', defaultMessage: 'Title' }, title: { id: 'groups.form.title', defaultMessage: 'Title' },
description: { id: 'groups.form.description', defaultMessage: 'Description' }, description: { id: 'groups.form.description', defaultMessage: 'Description' },
coverImage: { id: 'groups.form.coverImage', defaultMessage: 'Cover Image' }, coverImage: { id: 'groups.form.coverImage', defaultMessage: 'Upload new banner image (optional)' },
coverImageChange: { id: 'groups.form.coverImageChange', defaultMessage: 'Banner image selected' },
update: { id: 'groups.form.update', defaultMessage: 'Update group' }, update: { id: 'groups.form.update', defaultMessage: 'Update group' },
}); });
@ -102,45 +103,42 @@ class Edit extends React.PureComponent {
} }
return ( return (
<form className='column-inline-form' onSubmit={this.handleSubmit}> <form className='group-form' onSubmit={this.handleSubmit}>
<h2>{intl.formatMessage(messages.heading)}</h2> <div>
<label>
<input <input
className='setting-text' className='group-form__input'
value={title} value={title}
disabled={disabled} disabled={disabled}
onChange={this.handleTitleChange} onChange={this.handleTitleChange}
placeholder={intl.formatMessage(messages.title)} placeholder={intl.formatMessage(messages.title)}
/> />
</label> </div>
<label> <div>
<input <input
className='setting-text' className='group-form__input'
value={description} value={description}
disabled={disabled} disabled={disabled}
onChange={this.handleDescriptionChange} onChange={this.handleDescriptionChange}
placeholder={intl.formatMessage(messages.description)} placeholder={intl.formatMessage(messages.description)}
/> />
</label> </div>
<div>
<label htmlFor='group_cover_image' className={classNames('group-form__file-label', { 'group-form__file-label--selected': coverImage !== null })}>
<Icon id='camera' /> {intl.formatMessage(coverImage === null ? messages.coverImage : messages.coverImageChange)}
</label>
<label>
<input <input
type='file' type='file'
className='setting-text' className='group-form__file'
id='group_cover_image'
disabled={disabled} disabled={disabled}
onChange={this.handleCoverImageChange} onChange={this.handleCoverImageChange}
placeholder={intl.formatMessage(messages.coverImage)}
/> />
</label>
<IconButton <button>{intl.formatMessage(messages.update)}</button>
disabled={disabled} </div>
icon='plus'
title={title}
onClick={this.handleClick}
/>
</form> </form>
); );
} }

53
app/javascript/gabsocial/features/groups/index/index.js
View File

@ -8,6 +8,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import classNames from 'classnames'; import classNames from 'classnames';
import GroupCard from './card'; import GroupCard from './card';
import GroupCreate from '../create';
const messages = defineMessages({ const messages = defineMessages({
heading: { id: 'column.groups', defaultMessage: 'Groups' }, heading: { id: 'column.groups', defaultMessage: 'Groups' },
@ -27,6 +28,7 @@ class Groups extends ImmutablePureComponent {
static propTypes = { static propTypes = {
params: PropTypes.object.isRequired, params: PropTypes.object.isRequired,
activeTab: PropTypes.string.isRequired, activeTab: PropTypes.string.isRequired,
showCreateForm: PropTypes.bool,
dispatch: PropTypes.func.isRequired, dispatch: PropTypes.func.isRequired,
groups: ImmutablePropTypes.map, groups: ImmutablePropTypes.map,
groupIds: ImmutablePropTypes.list, groupIds: ImmutablePropTypes.list,
@ -43,31 +45,40 @@ class Groups extends ImmutablePureComponent {
} }
} }
renderHeader() {
const { intl, activeTab } = this.props;
return (
<div className="group-column-header">
<div className="group-column-header__cta"><Link to="/groups/create">{intl.formatMessage(messages.create)}</Link></div>
<div className="group-column-header__title">{intl.formatMessage(messages.heading)}</div>
<div className="column-header__wrapper">
<h1 className="column-header">
<Link to='/groups' className={classNames('btn grouped', {'active': 'featured' === activeTab})}>
{intl.formatMessage(messages.tab_featured)}
</Link>
<Link to='/groups/browse/member' className={classNames('btn grouped', {'active': 'member' === activeTab})}>
{intl.formatMessage(messages.tab_member)}
</Link>
<Link to='/groups/browse/admin' className={classNames('btn grouped', {'active': 'admin' === activeTab})}>
{intl.formatMessage(messages.tab_admin)}
</Link>
</h1>
</div>
</div>
);
}
render () { render () {
const { intl, groupIds, activeTab } = this.props; const { groupIds, showCreateForm } = this.props;
return ( return (
<div> <div>
<div className="group-column-header"> {!showCreateForm && this.renderHeader()}
<div className="group-column-header__cta"><Link to="/groups/create">{intl.formatMessage(messages.create)}</Link></div> {showCreateForm && <GroupCreate /> }
<div className="group-column-header__title">{intl.formatMessage(messages.heading)}</div>
<div className="column-header__wrapper">
<h1 className="column-header">
<Link to='/groups' className={classNames('btn grouped', {'active': 'featured' === activeTab})}>
{intl.formatMessage(messages.tab_featured)}
</Link>
<Link to='/groups/browse/member' className={classNames('btn grouped', {'active': 'member' === activeTab})}>
{intl.formatMessage(messages.tab_member)}
</Link>
<Link to='/groups/browse/admin' className={classNames('btn grouped', {'active': 'admin' === activeTab})}>
{intl.formatMessage(messages.tab_admin)}
</Link>
</h1>
</div>
</div>
<div className="group-card-list"> <div className="group-card-list">
{groupIds.map(id => <GroupCard key={id} id={id} />)} {groupIds.map(id => <GroupCard key={id} id={id} />)}

2
app/javascript/gabsocial/features/ui/index.js
View File

@ -176,7 +176,7 @@ class SwitchingColumnsArea extends React.PureComponent {
<WrappedRoute path='/timeline/all' exact page={HomePage} component={CommunityTimeline} content={children} /> <WrappedRoute path='/timeline/all' exact page={HomePage} component={CommunityTimeline} content={children} />
<WrappedRoute path='/groups' exact page={GroupsPage} component={Groups} content={children} componentParams={{ activeTab: 'featured' }} /> <WrappedRoute path='/groups' exact page={GroupsPage} component={Groups} content={children} componentParams={{ activeTab: 'featured' }} />
<WrappedRoute path='/groups/create' page={GroupsPage} component={GroupCreate} content={children} /> <WrappedRoute path='/groups/create' page={GroupsPage} component={Groups} content={children} componentParams={{ showCreateForm: true, activeTab: 'featured' }} />
<WrappedRoute path='/groups/browse/member' page={GroupsPage} component={Groups} content={children} componentParams={{ activeTab: 'member' }} /> <WrappedRoute path='/groups/browse/member' page={GroupsPage} component={Groups} content={children} componentParams={{ activeTab: 'member' }} />
<WrappedRoute path='/groups/browse/admin' page={GroupsPage} component={Groups} content={children} componentParams={{ activeTab: 'admin' }} /> <WrappedRoute path='/groups/browse/admin' page={GroupsPage} component={Groups} content={children} componentParams={{ activeTab: 'admin' }} />
<WrappedRoute path='/groups/:id/members' page={GroupPage} component={GroupMembers} content={children} /> <WrappedRoute path='/groups/:id/members' page={GroupPage} component={GroupMembers} content={children} />

1
app/javascript/styles/application.scss
View File

@ -26,6 +26,7 @@
@import 'gabsocial/components/compose-form'; @import 'gabsocial/components/compose-form';
@import 'gabsocial/components/group-card'; @import 'gabsocial/components/group-card';
@import 'gabsocial/components/group-detail'; @import 'gabsocial/components/group-detail';
@import 'gabsocial/components/group-form';
@import 'gabsocial/polls'; @import 'gabsocial/polls';
@import 'gabsocial/introduction'; @import 'gabsocial/introduction';

66
app/javascript/styles/gabsocial/components/group-form.scss Normal file
View File

@ -0,0 +1,66 @@
.group-form {
background: $gab-background-container;
padding: 15px;
border-radius: 10px;
.group-form__input {
height: 40px;
padding: 0 15px;
display: block;
color: $primary-text-color;
background: none;
border: 1px solid $secondary-text-color;
border-radius: 4px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
&:focus {
outline: none;
border-color: $primary-text-color;
}
}
.group-form__file-label {
font-size: 13px;
color: $secondary-text-color;
cursor: pointer;
&:hover {
color: $primary-text-color;
}
.fa {
font-size: 18px;
margin-right: 5px;
transform: translatey(2px);
}
&.group-form__file-label--selected {
color: $primary-text-color;
}
}
.group-form__file {
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
position: absolute;
pointer-events: none;
}
button {
background: $gab-blue;
color: white;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
border: none;
border-radius: 4px;
height: 25px;
padding: 1px 12px;
font-weight: bold;
float: right;
}
}

1
app/javascript/styles/gabsocial/variables.scss
View File

@ -12,6 +12,7 @@ $gab-brand-default: #21cf7a;
$gab-alert-red: #cc6643; $gab-alert-red: #cc6643;
$gab-secondary-text: #999; $gab-secondary-text: #999;
$gab-text-highlight: $gab-brand-default; $gab-text-highlight: $gab-brand-default;
$gab-blue: #627ff2;
// THEME COLORS // THEME COLORS