urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-11-29 14:57:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

publish: update groupify UI

Browse Source
This commit is contained in:
ejdiv 2020-06-01 20:18:29 -04:00 committed by GitHub
parent d1d417fb22
commit ea960e0ee2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
pkg/interface/src/apps/publish/components/lib/settings.js
View File

@ -162,11 +162,9 @@ export class Settings extends Component {
return (
<div>
<div className={'w-100 fl mt3 mb3'} style={{ maxWidth: '29rem' }}>
<p className="f8 mt3 lh-copy db">Convert Notebook</p>
<p className="f9 gray2 db mb4">
Convert this notebook into a group with associated chat, or select a
group to add this notebook to.
</p>
{this.renderHeader(
'Convert Notebook',
'Convert this notebook into a group with associated chat, or select a group to add this notebook to.')}
<InviteSearch
groups={props.groups}
contacts={props.contacts}
@ -185,7 +183,7 @@ export class Settings extends Component {
className={'dib f9 black gray4-d bg-gray0-d ba pa2 mt4 b--black b--gray1-d pointer'}
disabled={this.state.disabled}
>
Convert to group
{state.targetGroup ? 'Add to group' : 'Convert to group'}
</button>
</div>
</div>
@ -193,14 +191,22 @@ export class Settings extends Component {
}
}
renderHeader(title, subtitle) {
return (
<>
<p className="f9 mt6 lh-copy">{title}</p>
<p className="f9 gray2 db mb4">{subtitle}</p>
</>
);
}
render() {
const commentsSwitchClasses = (this.state.comments)
? 'relative checked bg-green2 br3 h1 toggle v-mid z-0'
: 'relative bg-gray4 bg-gray1-d br3 h1 toggle v-mid z-0';
const copyShortcode = <div>
<p className="f9 mt3 lh-copy">Share</p>
<p className="f9 gray2 mb4">Share a shortcode to join this notebook</p>
{this.renderHeader('Share', 'Share a shortcode to join this notebook')}
<div className="relative w-100 flex" style={{ maxWidth: '29rem' }}>
<input
className={'f8 mono ba b--gray3 b--gray2-d bg-gray0-d white-d ' +
@ -226,19 +232,16 @@ export class Settings extends Component {
<div className="flex-column">
{copyShortcode}
{this.renderGroupify()}
<p className="f9 mt6 lh-copy db">Delete Notebook</p>
<p className="f9 gray2 db mb4">
Permanently delete this notebook. (All current members will no
longer see this notebook)
</p>
{this.renderHeader(
'Delete Notebook',
'Permanently delete this notebook. (All current members will no longer see this notebook)')}
<button
className="bg-transparent b--red2 red2 pointer dib f9 ba pa2"
onClick={this.deleteNotebook}
>
Delete this notebook
</button>
<p className="f9 mt6 lh-copy">Rename</p>
<p className="f9 gray2 db mb4">Change the name of this notebook</p>
{this.renderHeader('Rename', 'Change the name of this notebook')}
<div className="relative w-100 flex" style={{ maxWidth: '29rem' }}>
<input
className={
@ -266,8 +269,7 @@ export class Settings extends Component {
}}
/>
</div>
<p className="f9 mt6 lh-copy">Change description</p>
<p className="f9 gray2 db mb4">Change the description of this notebook</p>
{this.renderHeader("Change description", "Change the description of this notebook")}
<div className="relative w-100 flex" style={{ maxWidth: '29rem' }}>
<input
className={