diff --git a/pkg/arvo/app/publish.hoon b/pkg/arvo/app/publish.hoon index 678fb023f..d0ca7df53 100644 --- a/pkg/arvo/app/publish.hoon +++ b/pkg/arvo/app/publish.hoon @@ -722,6 +722,8 @@ |= who=@p ?. (allowed who %read u.book) [%give %kick [/notebook/[u.book]]~ `who]~ + ?: ?=(%remove -.upd) + ~ =/ uid (sham %publish who u.book eny.bol) =/ inv=invite :* our.bol %publish /notebook/[u.book] who diff --git a/pkg/interface/publish/src/js/components/lib/dropdown.js b/pkg/interface/publish/src/js/components/lib/dropdown.js new file mode 100644 index 000000000..4f12099a6 --- /dev/null +++ b/pkg/interface/publish/src/js/components/lib/dropdown.js @@ -0,0 +1,73 @@ +import React, { Component } from 'react'; +import { Link } from 'react-router-dom'; + +export class Dropdown extends Component { + constructor(props) { + super(props); + + this.toggleDropdown = this.toggleDropdown.bind(this); + this.handleClickOutside = this.handleClickOutside.bind(this); + this.collapseAndDispatch = this.collapseAndDispatch.bind(this); + this.state = { + open: false + } + } + + componentDidMount() { + document.addEventListener('mousedown', this.handleClickOutside); + } + + componentWillUnmount() { + document.removeEventListener('mousedown', this.handleClickOutside); + } + + handleClickOutside(evt) { + if (this.optsList && !this.optsList.contains(evt.target) && + this.optsButton && !this.optsButton.contains(evt.target)) { + this.setState({open: false}); + } + } + + toggleDropdown() { + this.setState({open: !this.state.open}); + } + + collapseAndDispatch(action){ + this.setState({open: false}, action); + } + + render() { + let display = (this.state.open) + ? "block" : "none"; + + let optionsColor = (this.state.open) + ? '#e6e6e6' : 'white'; + + let optionsList = this.props.options.map((val, i) => { + return ( + + ); + }); + + return ( +
{this.optsButton = el}}> + +
{this.optsList = el}} + style={{right:0, width:this.props.width, display: display}}> + {optionsList} +
+
+ ) + } +} + +export default Dropdown diff --git a/pkg/interface/publish/src/js/components/lib/new-post.js b/pkg/interface/publish/src/js/components/lib/new-post.js index e823cff30..e965599b5 100644 --- a/pkg/interface/publish/src/js/components/lib/new-post.js +++ b/pkg/interface/publish/src/js/components/lib/new-post.js @@ -89,8 +89,6 @@ export class NewPost extends Component { let hiddenOnPopout = (props.popout) ? "" : "dib-m dib-l dib-xl"; - let submitButtonPadding = (props.sidebarShown && !props.popout) - ? " pl8" : " pl4"; return (
@@ -100,7 +98,7 @@ export class NewPost extends Component { popout={props.popout} /> - ]; - } - } else if (this.props.section === 'subscribers') { - width = 162; - options = [ - , - - ]; - } else if (this.props.section === 'banned') { - width = 72; - options = [ - - ]; - } - - let optionsColor = (this.state.optionsSelected) - ? '#e6e6e6' : 'white'; - - return ( -
-
{this.props.who}
-
{this.optsButton = el}}> - -
{this.optsList = el}} - style={{right:0, width:width, display: display}}> - {options} -
-
-
- ) - } -} - -export default SubscriberItem diff --git a/pkg/interface/publish/src/js/components/lib/subscribers.js b/pkg/interface/publish/src/js/components/lib/subscribers.js index 97cad447e..2d36247b1 100644 --- a/pkg/interface/publish/src/js/components/lib/subscribers.js +++ b/pkg/interface/publish/src/js/components/lib/subscribers.js @@ -1,9 +1,36 @@ import React, { Component } from 'react'; -import { SubscriberItem } from './subscriber-item'; +import { Dropdown } from './dropdown'; export class Subscribers extends Component { constructor(props){ super(props); + this.redirect = this.redirect.bind(this); + this.addUser = this.addUser.bind(this); + this.removeUser = this.removeUser.bind(this); + } + + addUser(who, path) { + let action = { + add: { + members: [who], + path: path, + } + } + window.api.action("group-store", "group-action", action); + } + + removeUser(who, path) { + let action = { + remove: { + members: [who], + path: path, + } + } + window.api.action("group-store", "group-action", action); + } + + redirect(url) { + window.location.href = url; } render() { @@ -21,15 +48,33 @@ export class Subscribers extends Component { let withoutUs = new Set(writePerms.who) withoutUs.delete(window.ship); writers = Array.from(withoutUs).map((who, i) => { + let width = 0; + let options = []; + if (readPath === writePath) { + width = 258; + let url = `/~contacts${writePath}`; + options = [{ + cls: "tl pointer", + txt: "Manage this group in the contacts view", + action: () => {this.redirect(url)} + }]; + } else { + width = 157; + options = [{ + cls: "tl pointer", + txt: "Demote to subscriber", + action: () => {this.removeUser(`~${who}`, writePath)} + }]; + } return ( - +
+
{`~${who}`}
+ +
) }); } @@ -43,32 +88,28 @@ export class Subscribers extends Component { let subscribers = null; if (readPath !== writePath) { - if (readPerms && readPerms.kind === 'white') { - let withoutUs = new Set(readPerms.who) - withoutUs.delete(window.ship); - subscribers = Array.from(withoutUs).map((who, i) => { - return ( - - ) - }); - } else if (this.props.notebook.subscribers){ + if (this.props.notebook.subscribers){ + let width = 162; subscribers = this.props.notebook.subscribers.map((who, i) => { + let options = [ + { cls: "tl mb2 pointer", + txt: "Promote to participant", + action: () => {this.addUser(who, writePath)} + }, + { cls: "tl red2 pointer", + txt: "Ban", + action: () => {this.addUser(who, readPath)} + }, + ]; return ( - +
+
{who}
+ +
) }); } @@ -90,16 +131,22 @@ export class Subscribers extends Component { let bannedContainer = null; if (readPerms && readPerms.kind === 'black') { + let width = 72; let banned = Array.from(readPerms.who).map((who, i) => { + let options = [{ + cls: "tl red2 pointer", + txt: "Unban", + action: () => {this.removeUser(`~${who}`, readPath)} + }]; return ( - +
+
{`~${who}`}
+ +
) }); if (banned.length === 0) {