Commit f8f58b0d authored by / /\ / /\/'s avatar / /\ / /\/
Browse files

create community ui tweaks, refs #106

parent b6f861aa
...@@ -25,6 +25,7 @@ ...@@ -25,6 +25,7 @@
@import './elements/SanitizedLink/styles'; @import './elements/SanitizedLink/styles';
@import './elements/HelpTip/styles'; @import './elements/HelpTip/styles';
@import './elements/Dropdown'; @import './elements/Dropdown';
@import './elements/CreateCommunity';
// modules // modules
@import './modules/Header/styles'; @import './modules/Header/styles';
......
...@@ -23,13 +23,11 @@ class CreateCommunity extends React.Component { ...@@ -23,13 +23,11 @@ class CreateCommunity extends React.Component {
communityCreateSuccess, communityCreateSuccess,
createCommunity, createCommunity,
communityDescription, communityDescription,
communityNSFW,
communityOwnerWifPassword, communityOwnerWifPassword,
communityOwnerName, communityOwnerName,
communityTitle, communityTitle,
updateCommunityTitle, updateCommunityTitle,
updateCommunityDescription, updateCommunityDescription,
updateCommunityNSFW,
updateCommunityOwnerAccountName, updateCommunityOwnerAccountName,
updateCommunityOwnerWifPassword, updateCommunityOwnerWifPassword,
broadcastOps, broadcastOps,
...@@ -53,15 +51,13 @@ class CreateCommunity extends React.Component { ...@@ -53,15 +51,13 @@ class CreateCommunity extends React.Component {
} }
updateCommunityTitle(e.target.value); updateCommunityTitle(e.target.value);
}; };
const handleCommunityDescriptionInput = e => { const handleCommunityDescriptionInput = e => {
if (e.target.value.length > 120) { if (e.target.value.length > 120) {
return; return;
} }
updateCommunityDescription(e.target.value); updateCommunityDescription(e.target.value);
}; };
const handleCommunityNSFWInput = e => {
updateCommunityNSFW(e.target.checked);
};
const handleCommunitySubmit = e => { const handleCommunitySubmit = e => {
e.preventDefault(); e.preventDefault();
...@@ -69,7 +65,6 @@ class CreateCommunity extends React.Component { ...@@ -69,7 +65,6 @@ class CreateCommunity extends React.Component {
accountName, accountName,
communityTitle, communityTitle,
communityDescription, communityDescription,
communityNSFW,
communityOwnerName, communityOwnerName,
communityOwnerWifPassword, communityOwnerWifPassword,
createAccountSuccessCB: handleAccountCreateSuccess, createAccountSuccessCB: handleAccountCreateSuccess,
...@@ -109,7 +104,7 @@ class CreateCommunity extends React.Component { ...@@ -109,7 +104,7 @@ class CreateCommunity extends React.Component {
const generateCommunityCredentialsButton = ( const generateCommunityCredentialsButton = (
<button <button
type="button" type="button"
className="button hollow" className="button hollow community__button"
onClick={generateCommunityCredentials} onClick={generateCommunityCredentials}
> >
{tt('g.click_to_generate_password')} {tt('g.click_to_generate_password')}
...@@ -118,17 +113,25 @@ class CreateCommunity extends React.Component { ...@@ -118,17 +113,25 @@ class CreateCommunity extends React.Component {
const rememberCredentialsPrompt = ( const rememberCredentialsPrompt = (
<div> <div>
<div>{`${tt( <div className="community-credentials community-credentials__name">
'g.community_owner_name_is' {`${tt('g.community_owner_name_is')}:`}
)}: ${communityOwnerName}`}</div> <br />
<div>{`${tt( <code className="community-credentials__owner-name">
'g.community_password_is' {communityOwnerName}
)}: ${communityOwnerWifPassword}`}</div> </code>
</div>
<div className="community-credentials community-credentials__password">
{`${tt('g.community_password_is')}:`}
<br />
<code className="community-credentials__owner-password">
{communityOwnerWifPassword}
</code>
</div>
</div> </div>
); );
const rememberCredentialsCheckbox1 = ( const rememberCredentialsCheckbox1 = (
<label htmlFor="box1"> <label htmlFor="box1" className="community-credentials">
<input type="checkbox" name="box1" required /> <input type="checkbox" name="box1" required />
{tt('g.understand_that_APP_NAME_cannot_recover_password', { {tt('g.understand_that_APP_NAME_cannot_recover_password', {
APP_NAME, APP_NAME,
...@@ -137,39 +140,43 @@ class CreateCommunity extends React.Component { ...@@ -137,39 +140,43 @@ class CreateCommunity extends React.Component {
); );
const rememberCredentialsCheckbox2 = ( const rememberCredentialsCheckbox2 = (
<label htmlFor="box2"> <label htmlFor="box2" className="community-credentials">
<input type="checkbox" name="box2" required /> <input type="checkbox" name="box2" required />
{tt('g.i_saved_password')}. {tt('g.i_saved_password')}.
</label> </label>
); );
const submitCreateCommunityFormButton = ( const submitCreateCommunityFormButton = (
<input type="submit" value="Submit" /> <input
className="button hollow community__button"
type="submit"
value="Submit"
/>
); );
const createCommunityAccountSuccessMessage = ( const createCommunityAccountSuccessMessage = (
<div> <div className="community-message community-message--progress">
Community account created on the blockchain. Setting current Community account created on the blockchain. Setting current
user to be community admin... user to be community admin...
</div> </div>
); );
const createCommunityAccountErrorMessage = ( const createCommunityAccountErrorMessage = (
<div> <div className="community-message community-message--error">
Unable to create that community. Please ensure you used the Unable to create that community. Please ensure you used the
correct key. correct key.
</div> </div>
); );
const createCommunityBroadcastOpsErrorMessage = ( const createCommunityBroadcastOpsErrorMessage = (
<div> <div className="community-message community-message--error">
The community was created but setting current user to be admin The community was created but setting current user to be admin
failed. Wait a moment and try again failed. Wait a moment and try again
</div> </div>
); );
const createCommunitySuccessMessage = ( const createCommunitySuccessMessage = (
<div> <div className="community-message community-message--success">
<p>Your community was created!</p> <p>Your community was created!</p>
<a <a
href={`https://steemitdev.com/trending/${communityOwnerName}`} href={`https://steemitdev.com/trending/${communityOwnerName}`}
...@@ -179,15 +186,20 @@ class CreateCommunity extends React.Component { ...@@ -179,15 +186,20 @@ class CreateCommunity extends React.Component {
</div> </div>
); );
const createCommunityErrorMessage = ( const createCommunityErrorMessage = (
<div>{tt('g.community_error')}</div> <div className="community-message community-message--error">
{tt('g.community_error')}
</div>
); );
const createCommunityLoading = <div>{tt('g.community_creating')}</div>; const createCommunityLoading = (
<div className="community-message community-message--progress">
{tt('g.community_creating')}
</div>
);
const createCommunityForm = ( const createCommunityForm = (
<form onSubmit={handleCommunitySubmit}> <form onSubmit={handleCommunitySubmit}>
<div>{tt('g.community_create')}</div> <label htmlFor="community_title" className="community__label">
<label htmlFor="community_title">
Title Title
<input <input
id="community_title" id="community_title"
...@@ -200,7 +212,10 @@ class CreateCommunity extends React.Component { ...@@ -200,7 +212,10 @@ class CreateCommunity extends React.Component {
required required
/> />
</label> </label>
<label htmlFor="community_description"> <label
htmlFor="community_description"
className="community__label"
>
{tt('g.community_description')} {tt('g.community_description')}
<input <input
id="community_description" id="community_description"
...@@ -213,15 +228,6 @@ class CreateCommunity extends React.Component { ...@@ -213,15 +228,6 @@ class CreateCommunity extends React.Component {
required required
/> />
</label> </label>
<label id="is_nsfw" htmlFor="is_nsfw">
{tt('g.community_nsfw')}
<input
type="checkbox"
name="is_nsfw"
checked={communityNSFW}
onChange={handleCommunityNSFWInput}
/>
</label>
{communityOwnerWifPassword.length <= 0 && {communityOwnerWifPassword.length <= 0 &&
generateCommunityCredentialsButton} generateCommunityCredentialsButton}
{communityOwnerWifPassword.length > 0 && {communityOwnerWifPassword.length > 0 &&
...@@ -237,6 +243,7 @@ class CreateCommunity extends React.Component { ...@@ -237,6 +243,7 @@ class CreateCommunity extends React.Component {
return ( return (
<div className="row"> <div className="row">
<div className="column large-6 small-12"> <div className="column large-6 small-12">
<div>{tt('g.community_create')}</div>
{this.state.accountError && {this.state.accountError &&
createCommunityAccountErrorMessage} createCommunityAccountErrorMessage}
{this.state.accountCreated && {this.state.accountCreated &&
...@@ -285,9 +292,6 @@ export default connect( ...@@ -285,9 +292,6 @@ export default connect(
updateCommunityDescription: description => { updateCommunityDescription: description => {
dispatch(communityActions.setCommunityDescription(description)); dispatch(communityActions.setCommunityDescription(description));
}, },
updateCommunityNSFW: isNSFW => {
dispatch(communityActions.setCommunityNSFW(isNSFW));
},
updateCommunityOwnerAccountName: accountName => { updateCommunityOwnerAccountName: accountName => {
dispatch( dispatch(
communityActions.setCommunityOwnerAccountName(accountName) communityActions.setCommunityOwnerAccountName(accountName)
......
.community__label {
padding: 0.5rem 0rem;
}
.community__button {
margin: 1rem 0rem;
}
.community-credentials {
padding: 0.5rem 0rem;
}
.community-credentials__name {
}
.community-credentials__owner-password {
text-transform: none;
display: block;
padding: 0.2rem 0.5rem;
color: rgb(199, 37, 78);
font-size: 1rem;
background: #fff;
word-break: break-all;
text-align: center;
}
.community-message {
font-weight: bold;
}
.community-message--progress {
color: rgb(0, 153, 0)
}
.community-message--success {
color: rgb(0,0,204)
}
.community-message--error {
color: rgb(199, 37, 78)
}
...@@ -29,8 +29,7 @@ ...@@ -29,8 +29,7 @@
"community_error": "community_error":
"Oops, there was an error creating the community, please try again.", "Oops, there was an error creating the community, please try again.",
"community_create": "CREATE A COMMUNITY", "community_create": "CREATE A COMMUNITY",
"community_description": "Description", "community_description": "About",
"community_nsfw": "Is Not Safe For Work",
"confirm": "Confirm", "confirm": "Confirm",
"convert": "Convert", "convert": "Convert",
"date": "Date", "date": "Date",
......
...@@ -3,7 +3,6 @@ import { fromJS } from 'immutable'; ...@@ -3,7 +3,6 @@ import { fromJS } from 'immutable';
// Action constants // Action constants
const SET_COMMUNITY_TITLE = 'community/SET_COMMUNITY_TITLE'; const SET_COMMUNITY_TITLE = 'community/SET_COMMUNITY_TITLE';
const SET_COMMUNITY_DESCRIPTION = 'community/SET_COMMUNITY_DESCRIPTION'; const SET_COMMUNITY_DESCRIPTION = 'community/SET_COMMUNITY_DESCRIPTION';
const SET_COMMUNITY_NSFW = 'community/SET_COMMUNITY_NSFW';
const SET_COMMUNITY_OWNER_ACCOUNT_NAME = const SET_COMMUNITY_OWNER_ACCOUNT_NAME =
'community/SET_COMMUNITY_OWNER_ACCOUNT_NAME'; 'community/SET_COMMUNITY_OWNER_ACCOUNT_NAME';
...@@ -28,7 +27,6 @@ const COMMUNITY_HIVEMIND_OPERATION_ERROR = ...@@ -28,7 +27,6 @@ const COMMUNITY_HIVEMIND_OPERATION_ERROR =
const defaultState = fromJS({ const defaultState = fromJS({
communityTitle: '', communityTitle: '',
communityDescription: '', communityDescription: '',
communityNSFW: false,
communityOwnerName: '', communityOwnerName: '',
communityOwnerWifPassword: '', communityOwnerWifPassword: '',
communityCreatePending: false, communityCreatePending: false,
...@@ -49,10 +47,6 @@ export default function reducer(state = defaultState, action) { ...@@ -49,10 +47,6 @@ export default function reducer(state = defaultState, action) {
const description = fromJS(payload); const description = fromJS(payload);
return state.merge({ communityDescription: description }); return state.merge({ communityDescription: description });
} }
case SET_COMMUNITY_NSFW: {
const nsfw = fromJS(payload);
return state.merge({ communityNSFW: nsfw });
}
case SET_COMMUNITY_OWNER_ACCOUNT_NAME: { case SET_COMMUNITY_OWNER_ACCOUNT_NAME: {
const name = fromJS(payload); const name = fromJS(payload);
return state.merge({ communityOwnerName: name }); return state.merge({ communityOwnerName: name });
...@@ -107,10 +101,6 @@ export const setCommunityDescription = payload => ({ ...@@ -107,10 +101,6 @@ export const setCommunityDescription = payload => ({
type: SET_COMMUNITY_DESCRIPTION, type: SET_COMMUNITY_DESCRIPTION,
payload, payload,
}); });
export const setCommunityNSFW = payload => ({
type: SET_COMMUNITY_NSFW,
payload,
});
export const setCommunityOwnerAccountName = payload => ({ export const setCommunityOwnerAccountName = payload => ({
type: SET_COMMUNITY_OWNER_ACCOUNT_NAME, type: SET_COMMUNITY_OWNER_ACCOUNT_NAME,
......
...@@ -49,7 +49,6 @@ export function* customOps(action) { ...@@ -49,7 +49,6 @@ export function* customOps(action) {
accountName, accountName,
communityTitle, communityTitle,
communityDescription, communityDescription,
communityNSFW,
communityOwnerName, communityOwnerName,
communityOwnerWifPassword, communityOwnerWifPassword,
createAccountSuccessCB, createAccountSuccessCB,
...@@ -82,7 +81,6 @@ export function* customOps(action) { ...@@ -82,7 +81,6 @@ export function* customOps(action) {
props: { props: {
title: communityTitle, title: communityTitle,
about: communityDescription, about: communityDescription,
is_nsfw: !!communityNSFW,
}, },
}, },
communityOwnerName, communityOwnerName,
...@@ -143,7 +141,6 @@ export function* createCommunityAccount(createCommunityAction) { ...@@ -143,7 +141,6 @@ export function* createCommunityAccount(createCommunityAction) {
accountName, accountName,
communityTitle, communityTitle,
communityDescription, communityDescription,
communityNSFW,
communityOwnerName, communityOwnerName,
communityOwnerWifPassword, communityOwnerWifPassword,
broadcastOpsCb, broadcastOpsCb,
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment