From 31368b599dee83ccd2538f33b760ae25f19073cc Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Thu, 20 Jul 2023 16:42:50 -0400
Subject: components + homepage

---
 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 ++++++-----
 4 files changed, 55 insertions(+), 68 deletions(-)

(limited to 'src/client/views')

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" />} />
-- 
cgit v1.2.3-70-g09d2