From 8e76c6267d502ab75b5d9e3fdbf5839c0967cdb1 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Fri, 19 Jun 2020 13:19:44 +0530 Subject: set up ui --- src/client/util/GroupManager.scss | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/client/util/GroupManager.scss (limited to 'src/client/util/GroupManager.scss') diff --git a/src/client/util/GroupManager.scss b/src/client/util/GroupManager.scss new file mode 100644 index 000000000..e69de29bb -- cgit v1.2.3-70-g09d2 From 6f4b35d24b2e4cbceaa6dffa46a909c3e92db0b5 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Wed, 24 Jun 2020 18:20:30 +0530 Subject: a lot of ui stuff --- src/client/util/GroupManager.scss | 167 ++++++++++++++++++++++++++++++++++++++ src/client/util/GroupManager.tsx | 87 ++++++++++++-------- 2 files changed, 220 insertions(+), 34 deletions(-) (limited to 'src/client/util/GroupManager.scss') diff --git a/src/client/util/GroupManager.scss b/src/client/util/GroupManager.scss index e69de29bb..973a988d7 100644 --- a/src/client/util/GroupManager.scss +++ b/src/client/util/GroupManager.scss @@ -0,0 +1,167 @@ +@import "../views/globalCssVariables"; + +.group-interface { + background-color: whitesmoke !important; + color: grey; + width: 450px; + height: 300px; + + button { + background: $lighter-alt-accent; + outline: none; + border-radius: 5px; + border: 0px; + color: #fcfbf7; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 75%; + padding: 10px; + margin: 10px; + transition: transform 0.2s; + margin: 2px; + } +} + +.group-interface { + display: flex; + flex-direction: column; + + button { + width: 100%; + align-self: center; + background: $darker-alt-accent; + margin-top: 4px; + } + + .delete-button { + background: rgb(227, 86, 86); + } + + .close-button { + position: absolute; + right: 1em; + top: 1em; + cursor: pointer; + } + + .group-heading { + letter-spacing: .5em; + } + + + .group-body { + display: flex; + justify-content: space-between; + max-height: 80%; + + .group-create { + display: flex; + flex-direction: column; + flex-basis: 30%; + margin-left: 5px; + + input { + border-radius: 5px; + border: none; + padding: 4px; + min-width: 100%; + margin: 4px 0 4px 0; + } + + } + + .group-content { + padding-left: 1em; + padding-right: 1em; + justify-content: space-around; + text-align: left; + + overflow-y: auto; + width: 100%; + + .group-row { + display: flex; + position: relative; + + margin-bottom: 17.5; + + .group-name { + position: relative; + max-width: 65%; + } + + button { + position: absolute; + width: 30%; + right: 0; + } + } + + + + ::placeholder { + color: $intermediate-color; + } + + input { + border-radius: 5px; + border: none; + padding: 4px; + min-width: 100%; + margin: 2px 0; + } + + .error-text { + color: #C40233; + } + + .success-text { + color: #009F6B; + } + + p { + padding: 0 0 .1em .2em; + } + + } + } + + .focus-span { + text-decoration: underline; + } + + h1 { + color: $dark-color; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 120%; + } + + .container { + display: block; + position: relative; + margin-top: 10px; + margin-bottom: 10px; + font-size: 22px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: 700px; + min-width: 700px; + max-width: 700px; + text-align: left; + font-style: normal; + font-size: 15; + font-weight: normal; + padding: 0; + + .padding { + padding: 0 0 0 20px; + color: black; + } + + + + } +} \ No newline at end of file diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx index 881583d37..2617047f7 100644 --- a/src/client/util/GroupManager.tsx +++ b/src/client/util/GroupManager.tsx @@ -12,9 +12,15 @@ import SharingManager, { User } from "./SharingManager"; import { Utils } from "../../Utils"; import * as RequestPromise from "request-promise"; import Select from 'react-select'; +import "./GroupManager.scss"; library.add(fa.faWindowClose); +interface UserOptions { + label: string; + value: string; +} + @observer export default class GroupManager extends React.Component<{}> { @@ -23,7 +29,8 @@ export default class GroupManager extends React.Component<{}> { @observable private dialogueBoxOpacity: number = 1; @observable private overlayOpacity: number = 0.4; @observable private users: string[] = []; - @observable private selectedUsers: string[] | null = null; + @observable private selectedUsers: UserOptions[] | null = null; + private inputRef: React.RefObject = React.createRef(); constructor(props: Readonly<{}>) { super(props); @@ -65,7 +72,7 @@ export default class GroupManager extends React.Component<{}> { } getGroup(groupName: string): Doc | undefined { - const groupDoc = GroupManager.Instance.getAllGroups().find(group => group.name === groupName); + const groupDoc = GroupManager.Instance.getAllGroups().find(group => group.groupName === groupName); return groupDoc; } @@ -74,6 +81,7 @@ export default class GroupManager extends React.Component<{}> { } hasEditAccess(groupDoc: Doc): boolean { + if (!groupDoc) return false; const accessList: string[] = JSON.parse(groupDoc.owners as string); return accessList.includes(Doc.CurrentUserEmail) || GroupManager.Instance.adminGroupMembers.includes(Doc.CurrentUserEmail); } @@ -87,25 +95,17 @@ export default class GroupManager extends React.Component<{}> { } addGroup(groupDoc: Doc): boolean { - // const groupList = GroupManager.Instance.getAllGroups(); - // groupList.push(groupDoc); if (GroupManager.Instance.GroupManagerDoc) { Doc.AddDocToList(GroupManager.Instance.GroupManagerDoc, "data", groupDoc); - // GroupManager.Instance.GroupManagerDoc.data = new List(groupList); return true; } return false; } deleteGroup(groupName: string): boolean { - // const groupList = GroupManager.Instance.getAllGroups(); - // const index = groupList.indexOf(groupDoc); - // if (index !== -1) { - // groupList.splice(index, 1); const groupDoc = GroupManager.Instance.getGroup(groupName); if (groupDoc) { if (GroupManager.Instance.GroupManagerDoc && GroupManager.Instance.hasEditAccess(groupDoc)) { - // GroupManager.Instance.GroupManagerDoc.data = new List(groupList); Doc.RemoveDocFromList(GroupManager.Instance.GroupManagerDoc, "data", groupDoc); return true; } @@ -134,44 +134,63 @@ export default class GroupManager extends React.Component<{}> { @action handleChange = (selectedOptions: any) => { - const castOptions = selectedOptions as { label: string, value: string }[]; - console.log(castOptions); - this.selectedUsers = castOptions.map(option => option.value); + console.log(selectedOptions); + this.selectedUsers = selectedOptions as UserOptions[]; } @action - resetSelection = () => { - console.log(this.selectedUsers?.[0]); - this.selectedUsers = null; - } - createGroup = () => { + if (!this.inputRef.current?.value) { + alert("Please enter a group name"); + return; + } + if (!this.selectedUsers) { + alert("Please select users"); + return; + } + if (this.getAllGroups().find(group => group.groupName === this.inputRef.current!.value)) { // why do I need null check here? + alert("Please select a unique group name"); + return; + } + this.createGroupDoc(this.inputRef.current.value, this.selectedUsers.map(user => user.value)); this.selectedUsers = null; + this.inputRef.current.value = ""; } private get groupInterface() { return ( -
-
+
+

Groups

-
- - - +
+
+ + + this.addMemberToGroup(this.currentGroup!, (selectedOption as UserOptions).value)} + placeholder={"Add members"} + value={null} + closeMenuOnSelect={true} + /> +
+ +
: + null} +
+
+ {members.map(member => ( +
+
+ {member} +
+ {this.hasEditAccess(this.currentGroup!) ? : null} +
+ ))} +
+
); } @@ -175,7 +208,7 @@ export default class GroupManager extends React.Component<{}> {
{
- + GroupManager.Instance.addMemberToGroup(this.props.group, (selectedOption as UserOptions).value)} + placeholder={"Add members"} + value={null} + closeMenuOnSelect={true} + /> +
+ +
: + null} +
+
+ {members.map(member => ( +
+
+ {member} +
+ {GroupManager.Instance.hasEditAccess(this.props.group) ? : null} +
+ ))} +
+
+ ); + + } + + render() { + return ; + } + + +} \ No newline at end of file diff --git a/src/client/util/SharingManager.scss b/src/client/util/SharingManager.scss index 7b7412ec7..aac9a33e8 100644 --- a/src/client/util/SharingManager.scss +++ b/src/client/util/SharingManager.scss @@ -1,11 +1,33 @@ +@import "../views/globalCssVariables"; + .sharing-interface { display: flex; flex-direction: column; width: 730px; + .dialogue-box { + width: 450; + height: 300; + } + .sharing-contents { display: flex; + button { + background: $darker-alt-accent; + outline: none; + border-radius: 5px; + border: 0px; + color: #fcfbf7; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 75%; + padding: 0 10; + margin: 0 5; + transition: transform 0.2s; + height: 25; + } + .individual-container, .group-container { width: 50%; @@ -72,12 +94,10 @@ } } - - .container { - display: block; + display: flex; position: relative; - margin-top: 10px; + margin-top: 5px; margin-bottom: 10px; font-size: 22px; -webkit-user-select: none; @@ -92,15 +112,24 @@ font-size: 14; font-weight: normal; padding: 0; + align-items: baseline; .padding { - padding: 0 0 0 10px; + padding: 0 10px 0 0; color: black; } .permissions-dropdown { outline: none; + height: 25; } + + .edit-actions { + display: flex; + position: absolute; + right: 51.5%; + } + } .no-users { diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx index 521e5366c..1f62c824d 100644 --- a/src/client/util/SharingManager.tsx +++ b/src/client/util/SharingManager.tsx @@ -18,6 +18,7 @@ import { DocumentManager } from "./DocumentManager"; import { CollectionView } from "../views/collections/CollectionView"; import { DictationOverlay } from "../views/DictationOverlay"; import GroupManager from "./GroupManager"; +import GroupMemberView from "./GroupMemberView"; library.add(fa.faCopy); @@ -75,6 +76,7 @@ export default class SharingManager extends React.Component<{}> { @observable private copied = false; @observable private dialogueBoxOpacity = 1; @observable private overlayOpacity = 0.4; + @observable private groupToView: Opt; private get linkVisible() { return this.sharingDoc ? this.sharingDoc[PublicKey] !== SharingPermissions.None : false; @@ -266,12 +268,18 @@ export default class SharingManager extends React.Component<{}> { return StrCast(metadata instanceof Doc ? metadata.maxPermission : metadata, SharingPermissions.None); } - private get sharingInterface() { const existOtherUsers = this.users.length > 0; const existGroups = this.groups.length > 0; return (
+ {this.groupToView ? + this.groupToView = undefined)} + /> : + null} +

Manage the public link to {this.focusOn("this document...")}

{!this.linkVisible ? (null) :
@@ -316,15 +324,17 @@ export default class SharingManager extends React.Component<{}> { key={userKey} className={"container"} > - {user.email} +
+ +
); }) @@ -343,15 +353,18 @@ export default class SharingManager extends React.Component<{}> { key={StrCast(group.groupName)} className={"container"} > - {group.groupName} +
+ + +
); }) -- cgit v1.2.3-70-g09d2