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

create community ui tweaks, refs #106

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