From f33c178b5a6f607ea072d97f9d34a942ea1798eb Mon Sep 17 00:00:00 2001
From: 2458773093 <2458773093@protonmail.com>
Date: Thu, 18 Jul 2019 22:37:53 +0300
Subject: [PATCH] New form style for groups

---
 .../gabsocial/features/groups/create/index.js | 50 +++++++-------
 .../gabsocial/features/groups/edit/index.js   | 42 ++++++------
 .../gabsocial/features/groups/index/index.js  | 55 +++++++++-------
 app/javascript/gabsocial/features/ui/index.js |  2 +-
 app/javascript/styles/application.scss        |  1 +
 .../gabsocial/components/group-form.scss      | 66 +++++++++++++++++++
 .../styles/gabsocial/variables.scss           |  1 +
 7 files changed, 144 insertions(+), 73 deletions(-)
 create mode 100644 app/javascript/styles/gabsocial/components/group-form.scss

diff --git a/app/javascript/gabsocial/features/groups/create/index.js b/app/javascript/gabsocial/features/groups/create/index.js
index e10a7c0b..653516ec 100644
--- a/app/javascript/gabsocial/features/groups/create/index.js
+++ b/app/javascript/gabsocial/features/groups/create/index.js
@@ -2,14 +2,15 @@ import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 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 classNames from 'classnames';
 
 const messages = defineMessages({
-	heading: { id: 'groups.create.heading', defaultMessage: 'New group' },
-	title: { id: 'groups.form.title', defaultMessage: 'Title' },
-	description: { id: 'groups.form.description', defaultMessage: 'Description' },
-	coverImage: { id: 'groups.form.coverImage', defaultMessage: 'Cover Image' },
+	title: { id: 'groups.form.title', defaultMessage: 'Enter a new group title' },
+	description: { id: 'groups.form.description', defaultMessage: 'Enter the group description' },
+	coverImage: { id: 'groups.form.coverImage', defaultMessage: 'Upload a banner image' },
+	coverImageChange: { id: 'groups.form.coverImageChange', defaultMessage: 'Banner image selected' },
 	create: { id: 'groups.form.create', defaultMessage: 'Create group' },
 });
 
@@ -67,53 +68,46 @@ class Create extends React.PureComponent {
 		this.props.onSubmit(this.context.router.history);
 	}
 
-	handleClick = () => {
-		this.props.onSubmit(this.context.router.history);
-	}
-
 	render () {
 		const { title, description, coverImage, disabled, intl } = this.props;
 
 		return (
-			<form className='column-inline-form' onSubmit={this.handleSubmit}>
-				<h2>{intl.formatMessage(messages.heading)}</h2>
-				
-				<label>
+			<form className='group-form' onSubmit={this.handleSubmit}>
+				<div>
 					<input
-						className='setting-text'
+						className='group-form__input'
 						value={title}
 						disabled={disabled}
 						onChange={this.handleTitleChange}
 						placeholder={intl.formatMessage(messages.title)}
 					/>
-				</label>
+				</div>
 					
-				<label>
+				<div>
 					<input
-						className='setting-text'
+						className='group-form__input'
 						value={description}
 						disabled={disabled}
 						onChange={this.handleDescriptionChange}
 						placeholder={intl.formatMessage(messages.description)}
 					/>
-				</label>
+				</div>
 
-				<label>
+				<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>
+					
 					<input
 						type='file'
-						className='setting-text'
+						className='group-form__file'
+						id='group_cover_image'
 						disabled={disabled}
 						onChange={this.handleCoverImageChange}
-						placeholder={intl.formatMessage(messages.coverImage)}
 					/>
-				</label>
 
-				<IconButton
-					disabled={disabled}
-					icon='plus'
-					title={title}
-					onClick={this.handleClick}
-				/>
+					<button>{intl.formatMessage(messages.create)}</button>
+				</div>
 			</form>
 		);
 	}
diff --git a/app/javascript/gabsocial/features/groups/edit/index.js b/app/javascript/gabsocial/features/groups/edit/index.js
index 7f55a824..a58e4b5d 100644
--- a/app/javascript/gabsocial/features/groups/edit/index.js
+++ b/app/javascript/gabsocial/features/groups/edit/index.js
@@ -3,16 +3,17 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 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 LoadingIndicator from '../../../components/loading_indicator';
 import Column from '../../../components/column';
+import classNames from 'classnames';
 
 const messages = defineMessages({
-	heading: { id: 'groups.edit.heading', defaultMessage: 'Edit group' },
 	title: { id: 'groups.form.title', defaultMessage: 'Title' },
 	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' },
 });
 
@@ -102,45 +103,42 @@ class Edit extends React.PureComponent {
 		}
 
 		return (
-			<form className='column-inline-form' onSubmit={this.handleSubmit}>
-				<h2>{intl.formatMessage(messages.heading)}</h2>
-				
-				<label>
+			<form className='group-form' onSubmit={this.handleSubmit}>
+				<div>
 					<input
-						className='setting-text'
+						className='group-form__input'
 						value={title}
 						disabled={disabled}
 						onChange={this.handleTitleChange}
 						placeholder={intl.formatMessage(messages.title)}
 					/>
-				</label>
+				</div>
 					
-				<label>
+				<div>
 					<input
-						className='setting-text'
+						className='group-form__input'
 						value={description}
 						disabled={disabled}
 						onChange={this.handleDescriptionChange}
 						placeholder={intl.formatMessage(messages.description)}
 					/>
-				</label>
+				</div>
 
-				<label>
+				<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>
+					
 					<input
 						type='file'
-						className='setting-text'
+						className='group-form__file'
+						id='group_cover_image'
 						disabled={disabled}
 						onChange={this.handleCoverImageChange}
-						placeholder={intl.formatMessage(messages.coverImage)}
 					/>
-				</label>
 
-				<IconButton
-					disabled={disabled}
-					icon='plus'
-					title={title}
-					onClick={this.handleClick}
-				/>
+					<button>{intl.formatMessage(messages.update)}</button>
+				</div>
 			</form>
 		);
 	}
diff --git a/app/javascript/gabsocial/features/groups/index/index.js b/app/javascript/gabsocial/features/groups/index/index.js
index 8374cae2..14c44e37 100644
--- a/app/javascript/gabsocial/features/groups/index/index.js
+++ b/app/javascript/gabsocial/features/groups/index/index.js
@@ -8,6 +8,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { Link } from 'react-router-dom';
 import classNames from 'classnames';
 import GroupCard from './card';
+import GroupCreate from '../create';
 
 const messages = defineMessages({
 	heading: { id: 'column.groups', defaultMessage: 'Groups' },
@@ -27,6 +28,7 @@ class Groups extends ImmutablePureComponent {
 	static propTypes = {
 		params: PropTypes.object.isRequired,
 		activeTab: PropTypes.string.isRequired,
+		showCreateForm: PropTypes.bool,
 		dispatch: PropTypes.func.isRequired,
 		groups: ImmutablePropTypes.map,
 		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 () {
-		const { intl, groupIds, activeTab } = this.props;
-		
+		const { groupIds, showCreateForm } = this.props;
+
 		return (
 			<div>
-				<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>
+				{!showCreateForm && this.renderHeader()}
+				{showCreateForm && <GroupCreate /> }
 				
 				<div className="group-card-list">
 					{groupIds.map(id => <GroupCard key={id} id={id} />)}
diff --git a/app/javascript/gabsocial/features/ui/index.js b/app/javascript/gabsocial/features/ui/index.js
index d9d55dac..623a8e23 100644
--- a/app/javascript/gabsocial/features/ui/index.js
+++ b/app/javascript/gabsocial/features/ui/index.js
@@ -176,7 +176,7 @@ class SwitchingColumnsArea extends React.PureComponent {
         <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/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/admin' page={GroupsPage} component={Groups} content={children} componentParams={{ activeTab: 'admin' }} />
         <WrappedRoute path='/groups/:id/members' page={GroupPage} component={GroupMembers} content={children} />
diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.scss
index 2e0d7580..9931e084 100644
--- a/app/javascript/styles/application.scss
+++ b/app/javascript/styles/application.scss
@@ -26,6 +26,7 @@
 @import 'gabsocial/components/compose-form';
 @import 'gabsocial/components/group-card';
 @import 'gabsocial/components/group-detail';
+@import 'gabsocial/components/group-form';
 
 @import 'gabsocial/polls';
 @import 'gabsocial/introduction';
diff --git a/app/javascript/styles/gabsocial/components/group-form.scss b/app/javascript/styles/gabsocial/components/group-form.scss
new file mode 100644
index 00000000..948155b7
--- /dev/null
+++ b/app/javascript/styles/gabsocial/components/group-form.scss
@@ -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;
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/gabsocial/variables.scss b/app/javascript/styles/gabsocial/variables.scss
index a06a028b..787f1bde 100644
--- a/app/javascript/styles/gabsocial/variables.scss
+++ b/app/javascript/styles/gabsocial/variables.scss
@@ -12,6 +12,7 @@ $gab-brand-default: #21cf7a;
 $gab-alert-red: #cc6643;
 $gab-secondary-text: #999;
 $gab-text-highlight: $gab-brand-default;
+$gab-blue: #627ff2;
 
 
 // THEME COLORS