From 31368b599dee83ccd2538f33b760ae25f19073cc Mon Sep 17 00:00:00 2001 From: srichman333 Date: Thu, 20 Jul 2023 16:42:50 -0400 Subject: components + homepage --- src/client/util/GroupManager.scss | 66 ++++++++++++++------- src/client/util/GroupManager.tsx | 112 +++++++++++++++++++---------------- src/client/util/GroupMemberView.scss | 33 ++++++++--- src/client/util/GroupMemberView.tsx | 47 +++++++++++---- src/client/util/SharingManager.scss | 109 +++++++++++++++++----------------- src/client/util/SharingManager.tsx | 72 ++++++++++++---------- src/client/views/DashboardView.tsx | 2 +- src/client/views/PropertiesView.scss | 44 +++++--------- src/client/views/PropertiesView.tsx | 59 +++++++++--------- src/client/views/topbar/TopBar.tsx | 18 +++--- 10 files changed, 312 insertions(+), 250 deletions(-) (limited to 'src') diff --git a/src/client/util/GroupManager.scss b/src/client/util/GroupManager.scss index 253ed5d2a..673af16ee 100644 --- a/src/client/util/GroupManager.scss +++ b/src/client/util/GroupManager.scss @@ -7,33 +7,48 @@ .group-create { display: flex; flex-direction: column; - height: 90%; + overflow: visible; + height: 100%; + width: 98.5%; + padding: 5px; justify-content: space-between; margin-left: 5px; - input { - border-radius: 5px; - padding: 8px; - min-width: 100%; - border: 1px solid hsl(0, 0%, 80%); - outline: none; - height: 30; - - &:focus { - border: 2.5px solid #2684FF; - } - } - p { font-size: 20px; text-align: left; - color: black; } + } - button { - align-self: flex-end; + .group-input { + + input { + padding: 8px; + width: 100%; + outline: none; + border: none; + min-width: 100%; + border: 2px solid; + border-radius: 4px; + border-color: inherit; + background: white; + color: black; + height: 30; } } + + .select-users { + margin-right: 3; + max-height: 30; + width: 100%; + display: inline-flex; + flex-direction: row; + border: 2px solid; + border-radius: 4px; + border-color: inherit; + background: white; + color: black; + } } @@ -55,11 +70,14 @@ .group-interface { display: flex; flex-direction: column; + overflow: hidden; + padding: 10px; .overlay { transform: translate(-10px, -10px); width: 400px; height: 320px; + overflow: hidden; } .delete-button { @@ -81,7 +99,6 @@ font-size: 20px; text-align: left; margin-right: 15px; - color: black; } } @@ -94,18 +111,24 @@ margin-left: 5; width: 50px; cursor: pointer; + display: flex; + flex-direction: row; + } + + .style-divider { + width: 100%; + height: 1px; } .group-body { justify-content: space-between; - height: 220; - background-color: #e8e8e8; + height: 225; padding-right: 1em; justify-content: space-around; text-align: left; - overflow-y: auto; + overflow-y: hidden; width: 100%; .group-row { @@ -117,7 +140,6 @@ .group-name { max-width: 65%; margin: 0 10; - color: black; } .group-info { diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx index da947aba6..5802d5ee0 100644 --- a/src/client/util/GroupManager.tsx +++ b/src/client/util/GroupManager.tsx @@ -15,6 +15,7 @@ import { SharingManager, User } from './SharingManager'; import { listSpec } from '../../fields/Schema'; import { DateField } from '../../fields/DateField'; import { Id } from '../../fields/FieldSymbols'; +import { Button, IconButton, Size } from 'browndash-components'; /** * Interface for options for the react-select component @@ -280,47 +281,59 @@ export class GroupManager extends React.Component<{}> { */ private get groupCreationModal() { const contents = ( -
+

New Group

-
{ - this.createGroupModalOpen = false; - TaskCompletionBox.taskCompleted = false; - })}> - +
+
- (this.buttonColour = this.inputRef.current?.value ? 'black' : '#979797'))} /> - (this.buttonColour = this.inputRef.current?.value ? 'black' : '#979797'))} /> +
+
+ { disabled={!hasEditAccess} > -
- +
+
{GroupManager.Instance.hasEditAccess(this.props.group) ?
-
- GroupManager.Instance.addMemberToGroup(this.props.group, (selectedOption as UserOptions).value)} placeholder={"Add members"} value={null} styles={{ - dropdownIndicator: (base, state) => ({ - ...base, - transition: '0.5s all ease', - transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : undefined - }) + control: () => ({ + display: 'inline-flex', + width: '100%', + }), + indicatorSeparator: () => ({ + display: 'inline-flex', + visibility: 'hidden', + }), + indicatorsContainer: () => ({ + display: 'inline-flex', + textDecorationColor: 'black', + }), + valueContainer: () => ({ + display: 'inline-flex', + fontStyle: StrCast(Doc.UserDoc().userColor), + color: StrCast(Doc.UserDoc().userColor), + width: '100%', + }), }} />
- +
+
: null}
{ Emails {this.memberSort === "ascending" ? "↑" : this.memberSort === "descending" ? "↓" : ""} {/* → */}
-
+
@@ -83,7 +104,7 @@ export class GroupMemberView extends React.Component {
{hasEditAccess ?
GroupManager.Instance.removeMemberFromGroup(this.props.group, member)}> - + } size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} onClick={() => GroupManager.Instance.removeMemberFromGroup(this.props.group, member)} />
: null}
diff --git a/src/client/util/SharingManager.scss b/src/client/util/SharingManager.scss index b11e694ff..c9f86f0e1 100644 --- a/src/client/util/SharingManager.scss +++ b/src/client/util/SharingManager.scss @@ -2,10 +2,6 @@ width: 600px; // height: 360px; - .overlay { - transform: translate(-20px, -20px); - } - .select { text-align: justify; text-align-last: end @@ -33,12 +29,7 @@ } .share-copy-link { - display: inline; border-radius: 4px; - border: solid gray 1px; - font-size: x-small; - background: #E8E8E8; - color: black; margin-top: -15px; margin-bottom: 15px; width: fit-content; @@ -50,13 +41,22 @@ display: flex; margin-bottom: 20px; align-items: center; - height: 36; + max-height: 28; .user-search { + max-height: 30; width: 90%; + display: inline-flex; + flex-direction: row; + border: 2px solid; + border-radius: 4px; + border-color: inherit; + background: white; + color: black; input { - height: 30; + height: 20px; + width: 100px; } } @@ -68,14 +68,12 @@ text-align-last: end; font-size: 13px; min-width: 90px; - height: 36; + height: 28; margin-left: 2px; } .share-button { - height: 36; margin-left: 3%; - background-color: black; } } @@ -131,6 +129,7 @@ display: flex; top:0; flex-direction: column; + border-radius: 4px; .user-sort { text-align: left; @@ -147,11 +146,12 @@ .groups-list, .users-list { font-style: italic; - background: #e8e8e8; - border: 2px solid gray; + border: 2px solid; padding-left: 10px; padding-right: 10px; width: 97%; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; overflow-y: scroll; overflow-x: hidden; text-align: left; @@ -160,7 +160,6 @@ align-items: center; text-align: center; justify-content: center; - color: black; height: 250px; margin: 0 2; @@ -175,7 +174,6 @@ outline: none; border-radius: 5px; border: 0px; - color: #fcfbf7; text-transform: none; letter-spacing: 2px; font-size: 75%; @@ -194,11 +192,10 @@ font-size: 20px; text-align: left; margin: 0 0 20px 0; - color: black; } .hr-substitute { - border: solid black 0.5px; + border: solid 0.5px; margin-top: 20px; } @@ -223,11 +220,12 @@ height: 25px; padding-left: 2; width: 97%; + border-radius: 4px; margin-top: 10px; margin-left: -8px; font-size: 14; margin-bottom: -4; - border: 2px solid gray; + border: 2px solid; border-bottom: none; align-items: center; display: flex; @@ -237,11 +235,12 @@ height: 25px; padding-left: 2; width: 97%; + border-radius: 4px; margin-top: 10px; - margin-left: -.5px; + margin-left: -8px; font-size: 14; margin-bottom: -4; - border: 2px solid gray; + border: 2px solid; border-bottom: none; align-items: center; display: flex; @@ -264,7 +263,7 @@ font-weight: normal; padding: 3px; - border-bottom: 0.5px solid grey; + border-bottom: 0.5px solid; .group-info { cursor: pointer; @@ -368,35 +367,35 @@ margin-top: 20px; } - .link-container { - display: flex; - flex-direction: row; - margin-bottom: 10px; - margin-left: auto; - margin-right: auto; - - .link-box, - .copy { - padding: 10px; - border-radius: 10px; - padding: 10px; - border: solid black 1px; - } - - .link-box { - background: white; - color: blue; - text-decoration: underline; - } - - .copy { - margin-left: 20px; - cursor: alias; - border-radius: 50%; - width: 42px; - height: 42px; - transition: 1.5s all ease; - padding-top: 12px; - } - } + // .link-container { + // display: flex; + // flex-direction: row; + // margin-bottom: 10px; + // margin-left: auto; + // margin-right: auto; + + // .link-box, + // .copy { + // padding: 10px; + // border-radius: 10px; + // padding: 10px; + // border: solid black 1px; + // } + + // .link-box { + // background: white; + // color: blue; + // text-decoration: underline; + // } + + // .copy { + // margin-left: 20px; + // cursor: alias; + // border-radius: 50%; + // width: 42px; + // height: 42px; + // transition: 1.5s all ease; + // padding-top: 12px; + // } + // } } \ No newline at end of file diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx index abec58a26..795df9c08 100644 --- a/src/client/util/SharingManager.tsx +++ b/src/client/util/SharingManager.tsx @@ -1,5 +1,5 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Colors } from 'browndash-components'; +import { Button, IconButton, Size } from 'browndash-components'; import { concat, intersection } from 'lodash'; import { action, computed, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; @@ -525,13 +525,11 @@ export class SharingManager extends React.Component<{}> { const permissions = uniform ? StrCast(targetDoc?.[groupKey]) : '-multiple-'; return !permissions ? null : ( -
+
{StrCast(group.title)}
  {group instanceof Doc ? ( -
(GroupManager.Instance.currentGroup = group))}> - -
+ } size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} onClick={action(() => (GroupManager.Instance.currentGroup = group))} /> ) : null}
{admin || this.myDocAcls ? ( @@ -557,28 +555,26 @@ export class SharingManager extends React.Component<{}> { color: StrCast(Doc.UserDoc().userColor) }} > -

+

window.open('https://brown-dash.github.io/Dash-Documentation/features/collaboration/', '_blank')}> window.open('https://brown-dash.github.io/Dash-Documentation/features/collaboration/', '_blank')} />
- Share + Share {this.focusOn(docs.length < 2 ? StrCast(targetDoc?.title, 'this document') : '-multiple-')}

- -
- +
+
+
+
{admin ? (
-
+
- +
+
(this.showUserOptions = !this.showUserOptions))} /> @@ -627,25 +638,22 @@ export class SharingManager extends React.Component<{}> {
)} -
+
(this.individualSort = this.individualSort === 'ascending' ? 'descending' : this.individualSort === 'descending' ? 'none' : 'ascending'))}>
- Individuals   - + Individuals + } size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} />
{userListContents}
(this.groupSort = this.groupSort === 'ascending' ? 'descending' : this.groupSort === 'descending' ? 'none' : 'ascending'))}> -
- Groups   -
GroupManager.Instance?.open())}> - -
-   - +
+ Groups + } size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} onClick={action(() => (GroupManager.Instance.open()))} /> + } size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} />
{groupListContents}
diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx index 1a5781df0..ae55c8ebf 100644 --- a/src/client/views/DashboardView.tsx +++ b/src/client/views/DashboardView.tsx @@ -199,7 +199,7 @@ export class DashboardView extends React.Component {
this.onContextMenu(dashboard, e)} onClick={e => this.clickDashboard(e, dashboard)}> { */ @computed get expansionIcon() { return ( - Show more permissions
}> -
{ +
+ } + size={Size.XSMALL} + color={StrCast(Doc.UserDoc().userColor)} + onClick={action(() => { if (this.selectedDocumentView || this.selectedDoc) { SharingManager.Instance.open(this.selectedDocumentView?.props.Document === this.selectedDoc ? this.selectedDocumentView : undefined, this.selectedDoc); } - }}> - -
- + })} + /> +
); } @@ -417,7 +418,7 @@ export class PropertiesView extends React.Component {
-
{admin && permission !== 'Owner' ? this.getPermissionsSelect(name, permission, showGuestOptions) : concat(shareImage, ' ', permission)}
+
{admin && permission !== 'Owner' ? this.getPermissionsSelect(name, permission, showGuestOptions) : concat(shareImage, ' ', permission)}
@@ -449,6 +450,7 @@ export class PropertiesView extends React.Component { const target = docs[0]; const showAdmin = GetEffectiveAcl(target) == AclAdmin; + console.log(GetEffectiveAcl(target), Doc.GetProto(target)[`acl-${normalizeEmail(Doc.CurrentUserEmail)}`]) const individualTableEntries = []; const usersAdded: string[] = []; // all shared users being added - organized by denormalized email @@ -512,25 +514,29 @@ export class PropertiesView extends React.Component { } }); - // public permission - const publicPermission = StrCast((this.layoutDocAcls ? target : Doc.GetProto(target))['acl-Guest']); + // guest permission + const guestPermission = StrCast((this.layoutDocAcls ? target : Doc.GetProto(target))['acl-Guest']); return (
-

Individual Users with Access to this Document +

Individuals with Access to this Document +
+
+ {
{individualTableEntries}
}
-
{
{individualTableEntries}
}
{groupTableEntries.length > 0 ? (


Groups with Access to this Document
-
{
{groupTableEntries}
}
+
+ {
{groupTableEntries}
} +
) : null}

Guest -
{this.colorACLDropDown('Guest', true, publicPermission!, true)}
+
{this.colorACLDropDown('Guest', showAdmin, guestPermission!, true)}
); } @@ -1142,26 +1148,17 @@ export class PropertiesView extends React.Component { return -
- {!Doc.noviceMode ? ( -
-
-
Show / Contol Layout Permissions
- (this.layoutDocAcls = !this.layoutDocAcls))} checked={this.layoutDocAcls} /> -
- {/*
{"Re-distribute sharing settings"}
}> - - */} -
- ) : null} + {/*
*/} +
+ Layout Permissions + (this.layoutDocAcls = !this.layoutDocAcls))} checked={this.layoutDocAcls} /> +
{/*
{"Re-distribute sharing settings"}
}> */} -
+ {/*
*/} {this.sharingTable} } isOpen={this.openSharing} diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx index 79f41fe9d..ec4252eb8 100644 --- a/src/client/views/topbar/TopBar.tsx +++ b/src/client/views/topbar/TopBar.tsx @@ -134,14 +134,16 @@ export class TopBar extends React.Component { @computed get topbarRight() { return (
-