aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/util/GroupManager.scss66
-rw-r--r--src/client/util/GroupManager.tsx112
-rw-r--r--src/client/util/GroupMemberView.scss33
-rw-r--r--src/client/util/GroupMemberView.tsx47
-rw-r--r--src/client/util/SharingManager.scss109
-rw-r--r--src/client/util/SharingManager.tsx72
-rw-r--r--src/client/views/DashboardView.tsx2
-rw-r--r--src/client/views/PropertiesView.scss44
-rw-r--r--src/client/views/PropertiesView.tsx59
-rw-r--r--src/client/views/topbar/TopBar.tsx18
10 files changed, 312 insertions, 250 deletions
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 = (
- <div className="group-create">
+ <div className="group-create" style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
<div className="group-heading" style={{ marginBottom: 0 }}>
<p>
<b>New Group</b>
</p>
- <div
- className={'close-button'}
- onClick={action(() => {
- this.createGroupModalOpen = false;
- TaskCompletionBox.taskCompleted = false;
- })}>
- <FontAwesomeIcon icon={'times'} color={'black'} size={'lg'} />
+ <div className="close-button">
+ <Button
+ icon={<FontAwesomeIcon icon={'times'} size={'lg'} />}
+ onClick={action(() => {
+ this.createGroupModalOpen = false;
+ TaskCompletionBox.taskCompleted = false;
+ })}
+ color={StrCast(Doc.UserDoc().userColor)}
+ />
</div>
</div>
- <input className="group-input" ref={this.inputRef} onKeyDown={this.handleKeyDown} autoFocus type="text" placeholder="Group name" onChange={action(() => (this.buttonColour = this.inputRef.current?.value ? 'black' : '#979797'))} />
- <Select
- isMulti
- options={this.options}
- onChange={this.handleChange}
- placeholder={'Select users'}
- value={this.selectedUsers}
- closeMenuOnSelect={false}
- styles={{
- dropdownIndicator: (base, state) => ({
- ...base,
- transition: '0.5s all ease',
- transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : undefined,
- }),
- multiValue: base => ({
- ...base,
- maxWidth: '50%',
-
- '&:hover': {
- maxWidth: 'unset',
- },
- }),
- }}
- />
- <button ref={this.createGroupButtonRef} onClick={this.createGroup} style={{ background: this.buttonColour }} disabled={this.buttonColour === '#979797'}>
- Create
- </button>
+ <div className="group-input" style={{border: StrCast(Doc.UserDoc().userColor)}} >
+ <input ref={this.inputRef} onKeyDown={this.handleKeyDown} autoFocus type="text" placeholder="Group name" onChange={action(() => (this.buttonColour = this.inputRef.current?.value ? 'black' : '#979797'))} />
+ </div>
+ <div style={{border: StrCast(Doc.UserDoc().userColor)}}>
+ <Select
+ className="select-users"
+ isMulti
+ options={this.options}
+ onChange={this.handleChange}
+ placeholder={'Select users'}
+ value={this.selectedUsers}
+ closeMenuOnSelect={false}
+ styles={{
+ 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%',
+ }),
+ }}
+ />
+ </div>
+ <div className={"create-button"}>
+ <Button text={"Create"} type={"tertiary"} color={StrCast(Doc.UserDoc().userColor)} onClick={this.createGroup} />
+ </div>
</div>
);
@@ -353,37 +366,34 @@ export class GroupManager extends React.Component<{}> {
const groups = this.groupSort === 'ascending' ? this.allGroups.sort(sortGroups) : this.groupSort === 'descending' ? this.allGroups.sort(sortGroups).reverse() : this.allGroups;
return (
- <div className="group-interface">
+ <div className="group-interface" style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
{this.groupCreationModal}
{this.currentGroup ? <GroupMemberView group={this.currentGroup} onCloseButtonClick={action(() => (this.currentGroup = undefined))} /> : null}
<div className="group-heading">
<p>
<b>Manage Groups</b>
</p>
- <button onClick={action(() => (this.createGroupModalOpen = true))}>
- <FontAwesomeIcon icon={'plus'} size={'sm'} /> Create Group
- </button>
- <div className={'close-button'} onClick={this.close}>
- <FontAwesomeIcon icon={'times'} color={'black'} size={'lg'} />
+ <Button icon={<FontAwesomeIcon icon={'plus'}/>} iconPlacement={'left'} text={"Create Group"} type={"tertiary"} color={StrCast(Doc.UserDoc().userColor)} onClick={action(() => (this.createGroupModalOpen = true))} />
+ <div className={'close-button'} >
+ <Button
+ icon={<FontAwesomeIcon icon={'times'} size={'lg'} />}
+ onClick={this.close}
+ color={StrCast(Doc.UserDoc().userColor)}
+ />
</div>
</div>
<div className="main-container">
<div className="sort-groups" onClick={action(() => (this.groupSort = this.groupSort === 'ascending' ? 'descending' : this.groupSort === 'descending' ? 'none' : 'ascending'))}>
- Name{' '}
- {this.groupSort === 'ascending' ? (
- <FontAwesomeIcon icon={'caret-up'} size={'xs'} />
- ) : this.groupSort === 'descending' ? (
- <FontAwesomeIcon icon={'caret-down'} size={'xs'} />
- ) : (
- <FontAwesomeIcon icon={'caret-right'} size={'xs'} />
- )}
+ Name
+ <IconButton icon={<FontAwesomeIcon icon={this.groupSort === 'ascending' ? 'caret-up' : this.groupSort === 'descending' ? 'caret-down' : 'caret-right'}/>} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} />
</div>
- <div className="group-body">
+ <div className={'style-divider'} style={{background: StrCast(Doc.UserDoc().userColor)}}/>
+ <div className="group-body" style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
{groups.map(group => (
<div className="group-row" key={StrCast(group.title || group.groupName)}>
<div className="group-name">{StrCast(group.title || group.groupName)}</div>
<div className="group-info" onClick={action(() => (this.currentGroup = group))}>
- <FontAwesomeIcon icon={'info-circle'} color={'#e8e8e8'} size={'sm'} style={{ backgroundColor: '#1e89d7', borderRadius: '100%', border: '1px solid #1e89d7' }} />
+ <IconButton icon={<FontAwesomeIcon icon={'info-circle'} />} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} onClick={action(() => (this.currentGroup = group))} />
</div>
</div>
))}
diff --git a/src/client/util/GroupMemberView.scss b/src/client/util/GroupMemberView.scss
index 2eb164988..d50569b26 100644
--- a/src/client/util/GroupMemberView.scss
+++ b/src/client/util/GroupMemberView.scss
@@ -1,6 +1,9 @@
.editing-interface {
width: 100%;
height: 100%;
+ padding: 10px;
+ float: right;
+ overflow: visible;
hr {
margin-top: 20;
@@ -10,7 +13,6 @@
outline: none;
border-radius: 5px;
border: 0px;
- color: #fcfbf7;
text-transform: none;
letter-spacing: 2px;
font-size: 75%;
@@ -37,8 +39,6 @@
text-align: center;
border: none;
outline: none;
- color: black;
- margin-top: -5;
height: 20;
text-overflow: ellipsis;
background: none;
@@ -61,21 +61,36 @@
margin-bottom: 25;
.add-member-dropdown {
- width: 65%;
- margin: 0 5;
+ margin-right: 3;
+ max-height: 30;
+ width: 250px;
+ display: inline-flex;
+ flex-direction: row;
+ border: 2px solid;
+ border-radius: 4px;
+ border-color: inherit;
+ background: white;
+ color: black;
+ }
- input {
- height: 30;
- }
+ .delete-button {
+ align-self: center;
+ background: inherit;
}
}
}
+ .style-divider {
+ width: 98%;
+ height: 1px;
+ margin-top: 20px;
+ margin-bottom: 20px;
+ }
+
.editing-contents {
overflow-y: auto;
height: 62%;
width: 100%;
- color: black;
margin-top: -15px;
.editing-row {
diff --git a/src/client/util/GroupMemberView.tsx b/src/client/util/GroupMemberView.tsx
index b7f89794d..f2050dc61 100644
--- a/src/client/util/GroupMemberView.tsx
+++ b/src/client/util/GroupMemberView.tsx
@@ -8,6 +8,7 @@ import { StrCast } from "../../fields/Types";
import { MainViewModal } from "../views/MainViewModal";
import { GroupManager, UserOptions } from "./GroupManager";
import "./GroupMemberView.scss";
+import { Button, IconButton, Size } from "browndash-components";
interface GroupMemberViewProps {
group: Doc;
@@ -28,7 +29,7 @@ export class GroupMemberView extends React.Component<GroupMemberViewProps> {
const hasEditAccess = GroupManager.Instance.hasEditAccess(this.props.group);
return (!this.props.group ? null :
- <div className="editing-interface">
+ <div className="editing-interface" style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
<div className="editing-header">
<input
className="group-title"
@@ -38,28 +39,48 @@ export class GroupMemberView extends React.Component<GroupMemberViewProps> {
disabled={!hasEditAccess}
>
</input>
- <div className={"memberView-closeButton"} onClick={action(this.props.onCloseButtonClick)}>
- <FontAwesomeIcon icon={"times"} color={"black"} size={"lg"} />
+ <div className={"memberView-closeButton"} >
+ <Button
+ icon={<FontAwesomeIcon icon={'times'} size={'lg'} />}
+ onClick={action(this.props.onCloseButtonClick)}
+ color={StrCast(Doc.UserDoc().userColor)}
+ />
</div>
{GroupManager.Instance.hasEditAccess(this.props.group) ?
<div className="group-buttons">
- <div className="add-member-dropdown">
- <Select
+ <div style={{border: StrCast(Doc.UserDoc().userColor)}} >
+ <Select
+ className="add-member-dropdown"
isSearchable={true}
options={options}
onChange={selectedOption => 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%',
+ }),
}}
/>
</div>
- <button onClick={() => GroupManager.Instance.deleteGroup(this.props.group)}>Delete group</button>
+ <div className={"delete-button"}>
+ <Button text={"Delete Group"} type={"tertiary"} color={StrCast(Doc.UserDoc().userColor)} onClick={() => GroupManager.Instance.deleteGroup(this.props.group)} />
+ </div>
</div> :
null}
<div
@@ -69,7 +90,7 @@ export class GroupMemberView extends React.Component<GroupMemberViewProps> {
Emails {this.memberSort === "ascending" ? "↑" : this.memberSort === "descending" ? "↓" : ""} {/* → */}
</div>
</div>
- <hr />
+ <div className={'style-divider'} style={{background: StrCast(Doc.UserDoc().userColor)}}/>
<div className="editing-contents"
style={{ height: hasEditAccess ? "62%" : "85%" }}
>
@@ -83,7 +104,7 @@ export class GroupMemberView extends React.Component<GroupMemberViewProps> {
</div>
{hasEditAccess ?
<div className={"remove-button"} onClick={() => GroupManager.Instance.removeMemberFromGroup(this.props.group, member)}>
- <FontAwesomeIcon icon={"trash-alt"} size={"sm"} />
+ <IconButton icon={<FontAwesomeIcon icon={'trash-alt'} />} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} onClick={() => GroupManager.Instance.removeMemberFromGroup(this.props.group, member)} />
</div>
: null}
</div>
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 : (
- <div key={groupKey} className={'container'}>
+ <div key={groupKey} className={'container'} style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
<div className={'padding'}>{StrCast(group.title)}</div>
&nbsp;
{group instanceof Doc ? (
- <div className="group-info" onClick={action(() => (GroupManager.Instance.currentGroup = group))}>
- <FontAwesomeIcon icon={'info-circle'} color={'#e8e8e8'} size={'sm'} style={{ backgroundColor: '#1e89d7', borderRadius: '100%', border: '1px solid #1e89d7' }} />
- </div>
+ <IconButton icon={<FontAwesomeIcon icon={'info-circle'} />} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} onClick={action(() => (GroupManager.Instance.currentGroup = group))} />
) : null}
<div className={'edit-actions'}>
{admin || this.myDocAcls ? (
@@ -557,28 +555,26 @@ export class SharingManager extends React.Component<{}> {
color: StrCast(Doc.UserDoc().userColor)
}}
>
- <p className="share-title">
+ <p className="share-title" style={{color: StrCast(Doc.UserDoc().userColor)}}>
<div className="share-info" onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/features/collaboration/', '_blank')}>
<FontAwesomeIcon icon={'question-circle'} size={'sm'} onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/features/collaboration/', '_blank')} />
</div>
- <b>Share </b>
+ <b >Share </b>
{this.focusOn(docs.length < 2 ? StrCast(targetDoc?.title, 'this document') : '-multiple-')}
</p>
- <button
- className="share-copy-link"
- style={{ background: this._buttonDown ? Colors.LIGHT_BLUE : undefined }}
- onPointerDown={action(e => (this._buttonDown = true))}
- onPointerUp={action(e => (this._buttonDown = false))}
- onClick={this.copyURL}>
- <FontAwesomeIcon title="Copy Public URL" icon="copy" size="sm" />
- &nbsp; Copy Public URL
- </button>
- <div className="close-button" onClick={this.close}>
- <FontAwesomeIcon icon="times" color="black" size="lg" />
+ <div className="share-copy-link">
+ <Button type={"tertiary"} color={StrCast(Doc.UserDoc().userColor)} icon={<FontAwesomeIcon icon={"copy"} size="sm" />} iconPlacement={"left"} text={"Copy Guest URL"} />
+ </div>
+ <div className="close-button">
+ <Button
+ icon={<FontAwesomeIcon icon={'times'} size={'lg'} />}
+ onClick={this.close}
+ color={StrCast(Doc.UserDoc().userColor)}
+ />
</div>
{admin ? (
<div className="share-container">
- <div className="share-setup">
+ <div className="share-setup" style={{border: StrCast(Doc.UserDoc().userColor)}}>
<Select
className="user-search"
placeholder="Enter user or group name..."
@@ -590,9 +586,24 @@ export class SharingManager extends React.Component<{}> {
onChange={this.handleUsersChange}
value={this.selectedUsers}
styles={{
+ 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%',
+ }),
}}
/>
<div className="permissions-select">
@@ -600,9 +611,9 @@ export class SharingManager extends React.Component<{}> {
{this.sharingOptions(true)}
</select>
</div>
- <button ref={this.shareDocumentButtonRef} className="share-button" onClick={this.share}>
- Share
- </button>
+ <div className='share-button'>
+ <Button text={"SHARE"} type={"tertiary"} color={StrCast(Doc.UserDoc().userColor)} onClick={this.share} />
+ </div>
</div>
<div className="sort-checkboxes">
<input type="checkbox" onChange={action(() => (this.showUserOptions = !this.showUserOptions))} /> <label style={{ marginRight: 10 }}>Individuals</label>
@@ -627,25 +638,22 @@ export class SharingManager extends React.Component<{}> {
</div>
</div>
)}
- <div className="main-container">
+ <div className="main-container" style={{color: StrCast(Doc.UserDoc().userColor), border: StrCast(Doc.UserDoc().userColor)}}>
<div className={'individual-container'}>
<div className="user-sort" onClick={action(() => (this.individualSort = this.individualSort === 'ascending' ? 'descending' : this.individualSort === 'descending' ? 'none' : 'ascending'))}>
<div className="title-individual">
- Individuals &nbsp;
- <FontAwesomeIcon icon={this.individualSort === 'ascending' ? 'caret-up' : this.individualSort === 'descending' ? 'caret-down' : 'caret-right'} size="xs" />
+ Individuals
+ <IconButton icon={<FontAwesomeIcon icon={this.individualSort === 'ascending' ? 'caret-up' : this.individualSort === 'descending' ? 'caret-down' : 'caret-right'}/>} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} />
</div>
</div>
<div className="users-list">{userListContents}</div>
</div>
<div className={'group-container'}>
<div className="user-sort" onClick={action(() => (this.groupSort = this.groupSort === 'ascending' ? 'descending' : this.groupSort === 'descending' ? 'none' : 'ascending'))}>
- <div className="title-group">
- Groups &nbsp;
- <div className="group-info" onClick={action(() => GroupManager.Instance?.open())}>
- <FontAwesomeIcon icon={'info-circle'} color={'#e8e8e8'} size={'sm'} style={{ backgroundColor: '#1e89d7', borderRadius: '100%', border: '1px solid #1e89d7' }} />
- </div>
- &nbsp;
- <FontAwesomeIcon icon={this.groupSort === 'ascending' ? 'caret-up' : this.groupSort === 'descending' ? 'caret-down' : 'caret-right'} size="xs" />
+ <div className="title-group" >
+ Groups
+ <IconButton icon={<FontAwesomeIcon icon={'info-circle'} />} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} onClick={action(() => (GroupManager.Instance.open()))} />
+ <IconButton icon={<FontAwesomeIcon icon={this.groupSort === 'ascending' ? 'caret-up' : this.groupSort === 'descending' ? 'caret-down' : 'caret-right'}/>} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} />
</div>
</div>
<div className={'groups-list'}>{groupListContents}</div>
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 {
<div
className="dashboard-container"
key={dashboard[Id]}
- style={{ background: this.isUnviewedSharedDashboard(dashboard) && this.selectedDashboardGroup === DashboardGroup.SharedDashboards ? 'green' : shared ? 'blue' : '' }}
+ style={{ background: this.isUnviewedSharedDashboard(dashboard) && this.selectedDashboardGroup === DashboardGroup.SharedDashboards ? '#6CB982' : shared ? variant : '' }}
onContextMenu={e => this.onContextMenu(dashboard, e)}
onClick={e => this.clickDashboard(e, dashboard)}>
<img
diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss
index 060b506e3..b79486167 100644
--- a/src/client/views/PropertiesView.scss
+++ b/src/client/views/PropertiesView.scss
@@ -42,16 +42,6 @@
padding: 0;
margin-top: -5;
}
-
- .propertiesView-acls-checkbox {
- margin-top: -15px;
- margin-bottom: -10px;
-
- .propertiesView-acls-checkbox-text {
- display: inline;
- font-size: 9px;
- }
- }
}
.change-buttons {
@@ -68,14 +58,19 @@
}
}
+ .propertiesView-acls-checkbox {
+ float: right;
+ margin-left: 50px;
+ }
+
.propertiesView-shareDropDown{
margin-right: 10px;
min-width: 65px;
& .propertiesView-shareDropDownNone{
- height: 16px;
padding: 0px;
padding-left: 3px;
+ padding-right: 3px;
background: grey;
color: rgb(71, 71, 71);
border-radius: 6px;
@@ -83,18 +78,18 @@
}
& .propertiesView-shareDropDownEdit,
.propertiesView-shareDropDownAdmin{
- height: 16px;
padding: 0px;
padding-left: 3px;
+ padding-right: 3px;
background: rgb(254, 254, 199);
color: rgb(75, 75, 5);
border-radius: 6px;
border: 1px solid rgb(75, 75, 5);
}
& .propertiesView-shareDropDownAugment{
- height: 16px;
padding: 0px;
padding-left: 3px;
+ padding-right: 3px;
background: rgb(208, 255, 208);
color:rgb(19, 80, 19);
border-radius: 6px;
@@ -102,18 +97,18 @@
}
& .propertiesView-shareDropDownView{
- height: 16px;
padding: 0px;
padding-left: 3px;
+ padding-right: 3px;
background: rgb(213, 213, 255);
color: rgb(25, 25, 101);
border-radius: 6px;
border: 1px solid rgb(25, 25, 101);
}
& .propertiesView-shareDropDownNot-Shared{
- height: 16px;
padding: 0px;
padding-left: 3px;
+ padding-right: 3px;
background: rgb(255, 207, 207);
color: rgb(138, 47, 47);
border-radius: 6px;
@@ -177,19 +172,7 @@
}
.expansion-button {
- margin-left: -15px;
- margin-right: 20px;
-
- .expansion-button-icon {
- width: 11px;
- height: 11px;
- color: black;
-
- &:hover {
- color: rgb(131, 131, 131);
- cursor: pointer;
- }
- }
+ margin-right: 10px;
}
.propertiesView-sharingTable {
@@ -238,6 +221,11 @@
}
}
+ .propertiesView-permissions-select {
+ background: inherit;
+ border: none;
+ }
+
.propertiesView-field {
display: flex;
font-size: 7px;
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index a4b3899eb..27b9c3c7a 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -3,7 +3,7 @@ import { IconLookup } from '@fortawesome/fontawesome-svg-core';
import { faAnchor, faArrowRight, faWindowMaximize } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Checkbox, Tooltip } from '@material-ui/core';
-import { Button, Colors, EditableText, NumberInput, Size, Slider, Type } from 'browndash-components';
+import { Button, Colors, EditableText, IconButton, NumberInput, Size, Slider, Type } from 'browndash-components';
import { concat } from 'lodash';
import { Lambda, action, computed, observable } from 'mobx';
import { observer } from 'mobx-react';
@@ -367,17 +367,18 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
*/
@computed get expansionIcon() {
return (
- <Tooltip title={<div className="dash-tooltip">Show more permissions</div>}>
- <div
- className="expansion-button"
- onPointerDown={() => {
+ <div className="expansion-button" >
+ <IconButton
+ icon={<FontAwesomeIcon icon={'ellipsis-h'} />}
+ 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);
}
- }}>
- <FontAwesomeIcon className="expansion-button-icon" icon="ellipsis-h" color="black" size="sm" />
- </div>
- </Tooltip>
+ })}
+ />
+ </div>
);
}
@@ -417,7 +418,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
<div>
<div className={'propertiesView-shareDropDown'}>
<div className={`propertiesView-shareDropDown${permission}`}>
- <div className="propertiesView-shareDropDown">{admin && permission !== 'Owner' ? this.getPermissionsSelect(name, permission, showGuestOptions) : concat(shareImage, ' ', permission)}</div>
+ <div >{admin && permission !== 'Owner' ? this.getPermissionsSelect(name, permission, showGuestOptions) : concat(shareImage, ' ', permission)}</div>
</div>
</div>
</div>
@@ -449,6 +450,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
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<PropertiesViewProps> {
}
});
- // 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 (
<div>
<div>
- <br></br> Individual Users with Access to this Document
+ <br></br> Individuals with Access to this Document
+ </div>
+ <div className="propertiesView-sharingTable" style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
+ {<div> {individualTableEntries}</div>}
</div>
- <div className="propertiesView-sharingTable">{<div> {individualTableEntries}</div>}</div>
{groupTableEntries.length > 0 ? (
<div>
<div>
<br></br> Groups with Access to this Document
</div>
- <div className="propertiesView-sharingTable">{<div> {groupTableEntries}</div>}</div>
+ <div className="propertiesView-sharingTable" style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
+ {<div> {groupTableEntries}</div>}
+ </div>
</div>
) : null}
<br></br> Guest
- <div>{this.colorACLDropDown('Guest', true, publicPermission!, true)}</div>
+ <div>{this.colorACLDropDown('Guest', showAdmin, guestPermission!, true)}</div>
</div>
);
}
@@ -1142,26 +1148,17 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
return <PropertiesSection
title="Sharing & Permissions"
content={<>
- <div className="propertiesView-buttonContainer">
- {!Doc.noviceMode ? (
- <div className="propertiesView-buttonContainer">
- <div className="propertiesView-acls-checkbox">
- <div className="propertiesView-acls-checkbox-text"> Show / Contol Layout Permissions </div>
- <Checkbox color="primary" onChange={action(() => (this.layoutDocAcls = !this.layoutDocAcls))} checked={this.layoutDocAcls} />
- </div>
- {/* <Tooltip title={<><div className="dash-tooltip">{"Re-distribute sharing settings"}</div></>}>
- <button onPointerDown={() => SharingManager.Instance.distributeOverCollection(this.selectedDoc!)}>
- <FontAwesomeIcon icon="redo-alt" color="white" size="1x" />
- </button>
- </Tooltip> */}
- </div>
- ) : null}
+ {/* <div className="propertiesView-buttonContainer"> */}
+ <div className="propertiesView-acls-checkbox">
+ Layout Permissions
+ <Checkbox color="primary" onChange={action(() => (this.layoutDocAcls = !this.layoutDocAcls))} checked={this.layoutDocAcls} />
+ </div>
{/* <Tooltip title={<><div className="dash-tooltip">{"Re-distribute sharing settings"}</div></>}>
<button onPointerDown={() => SharingManager.Instance.distributeOverCollection(this.selectedDoc!)}>
<FontAwesomeIcon icon="redo-alt" size="1x" />
</button>
</Tooltip> */}
- </div>
+ {/* </div> */}
{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 (
<div className="topbar-right">
- <Button
- text={GetEffectiveAcl(Doc.ActiveDashboard) === AclAdmin ? 'Share' : 'View Original'}
- type={Type.TERT}
- color={this.variantColor}
- onClick={() => {
- SharingManager.Instance.open(undefined, Doc.ActiveDashboard);
- }}
- />
+ {Doc.ActiveDashboard ?
+ <Button
+ text={GetEffectiveAcl(Doc.ActiveDashboard) === AclAdmin ? 'Share' : 'View Original'}
+ type={Type.TERT}
+ color={this.variantColor}
+ onClick={() => {
+ SharingManager.Instance.open(undefined, Doc.ActiveDashboard);
+ }}
+ />
+ : null }
<IconButton tooltip={"Issue Reporter ⌘I"} size={Size.SMALL} color={this.color} onClick={ReportManager.Instance.open} icon={<FaBug />} />
<IconButton tooltip={"Documentation ⌘D"} size={Size.SMALL} color={this.color} onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank')} icon={<FontAwesomeIcon icon="question-circle" />} />
<IconButton tooltip={"Settings ⌘⇧S"} size={Size.SMALL} color={this.color} onClick={SettingsManager.Instance.open} icon={<FontAwesomeIcon icon="cog" />} />
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 16:48:55 +0000