aboutsummaryrefslogtreecommitdiff
path: root/src/client/views
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views')
-rw-r--r--src/client/views/ContextMenu.tsx17
-rw-r--r--src/client/views/DashboardView.tsx2
-rw-r--r--src/client/views/DocumentDecorations.tsx4
-rw-r--r--src/client/views/MainView.scss8
-rw-r--r--src/client/views/MainView.tsx16
-rw-r--r--src/client/views/PropertiesButtons.tsx92
-rw-r--r--src/client/views/PropertiesView.scss44
-rw-r--r--src/client/views/PropertiesView.tsx70
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx3
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss12
-rw-r--r--src/client/views/nodes/DocumentView.tsx2
-rw-r--r--src/client/views/nodes/LoadingBox.scss4
-rw-r--r--src/client/views/pdf/AnchorMenu.tsx106
-rw-r--r--src/client/views/pdf/PDFViewer.tsx6
-rw-r--r--src/client/views/topbar/TopBar.tsx20
15 files changed, 185 insertions, 221 deletions
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 1fffb3dbc..8412a9aae 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -192,11 +192,11 @@ export class ContextMenu extends React.Component {
}
return this.filteredItems.map((value, index) =>
Array.isArray(value) ? (
- <div className="contextMenu-group"
+ <div
+ className="contextMenu-group"
style={{
- background: StrCast(Doc.UserDoc().userVariantColor)
- }}
- >
+ background: StrCast(Doc.UserDoc().userVariantColor),
+ }}>
<div className="contextMenu-description">{value.join(' -> ')}</div>
</div>
) : (
@@ -219,17 +219,18 @@ export class ContextMenu extends React.Component {
this._height = Number(getComputedStyle(r).height.replace('px', ''));
}
})}
- style={{
- left: this.pageX, ...(this._yRelativeToTop ? { top: this.pageY } : { bottom: this.pageY }),
+ style={{
+ left: this.pageX,
+ ...(this._yRelativeToTop ? { top: this.pageY } : { bottom: this.pageY }),
background: StrCast(Doc.UserDoc().userBackgroundColor),
- color: StrCast(Doc.UserDoc().userColor)
+ color: StrCast(Doc.UserDoc().userColor),
}}>
{!this.itemsNeedSearch ? null : (
<span className={'search-icon'}>
<span className="icon-background">
<FontAwesomeIcon icon="search" size="lg" />
</span>
- <input className="contextMenu-item contextMenu-description search" type="text" placeholder="Filter Menu..." value={this._searchString} onKeyDown={this.onKeyDown} onChange={this.onChange} autoFocus />
+ <input style={{ color: 'black' }} className="contextMenu-item contextMenu-description search" type="text" placeholder="Filter Menu..." value={this._searchString} onKeyDown={this.onKeyDown} onChange={this.onChange} autoFocus />
</span>
)}
{this.menuItems}
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/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 3522830e5..bab07ac96 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -831,7 +831,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
&nbsp;
{shareSymbolIcon + ' ' + shareMode}
&nbsp;
- {!Doc.noviceMode ? (
+ {/* {!Doc.noviceMode ? (
<div className="checkbox">
<div className="checkbox-box">
<input type="checkbox" checked={this.showLayoutAcl} onChange={action(() => (this.showLayoutAcl = !this.showLayoutAcl))} />
@@ -839,7 +839,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
<div className="checkbox-text"> Layout </div>
</div>
) : null}
- &nbsp;
+ &nbsp; */}
</div>
</div>
) : (
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index 0c377730e..b3faff442 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -47,6 +47,10 @@ h1,
align-items: center;
justify-content: space-between;
gap: 10px;
+ background: rgb(0, 0, 0);
+ border-radius: 8px;
+ padding-left: 5px;
+ padding-right: 5px;
}
.mainView-snapLines {
@@ -190,10 +194,10 @@ h1,
left: 0;
position: absolute;
z-index: 2;
- background-color: linen;//$light-gray;
+ background-color: linen; //$light-gray;
.editable-title {
- background-color: linen;//$light-gray;
+ background-color: linen; //$light-gray;
}
}
}
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 5ab8a2f55..44eeb253c 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -21,7 +21,7 @@ import { DocumentManager } from '../util/DocumentManager';
import { GroupManager } from '../util/GroupManager';
import { HistoryUtil } from '../util/History';
import { Hypothesis } from '../util/HypothesisUtils';
-import { ReportManager } from '../util/ReportManager';
+import { ReportManager } from '../util/reportManager/ReportManager';
import { RTFMarkup } from '../util/RTFMarkup';
import { ScriptingGlobals } from '../util/ScriptingGlobals';
import { SelectionManager } from '../util/SelectionManager';
@@ -66,6 +66,8 @@ import { PreviewCursor } from './PreviewCursor';
import { PropertiesView } from './PropertiesView';
import { DashboardStyleProvider, DefaultStyleProvider } from './StyleProvider';
import { TopBar } from './topbar/TopBar';
+import { ThemeProvider } from '@mui/material';
+import { theme } from '../theme';
const _global = (window /* browser */ || global) /* node */ as any;
@observer
@@ -749,8 +751,7 @@ export class MainView extends React.Component {
@computed get leftMenuPanel() {
return (
- <div key="menu" className="mainView-leftMenuPanel" style={{ background: StrCast(Doc.UserDoc().userBackgroundColor),
- display: LightboxView.LightboxDoc ? 'none' : undefined }}>
+ <div key="menu" className="mainView-leftMenuPanel" style={{ background: StrCast(Doc.UserDoc().userBackgroundColor), display: LightboxView.LightboxDoc ? 'none' : undefined }}>
<DocumentView
Document={Doc.MyLeftSidebarMenu}
DataDoc={undefined}
@@ -805,14 +806,17 @@ export class MainView extends React.Component {
{this._hideUI ? null : this.leftMenuPanel}
<div key="inner" className={`mainView-innerContent${this.colorScheme}`}>
{this.flyout}
- <div className="mainView-libraryHandle" style={{ background: StrCast(Doc.UserDoc().userBackgroundColor), left: leftMenuFlyoutWidth - 10 /* ~half width of handle */, display: !this._leftMenuFlyoutWidth ? 'none' : undefined }} onPointerDown={this.onFlyoutPointerDown}>
+ <div
+ className="mainView-libraryHandle"
+ style={{ background: StrCast(Doc.UserDoc().userBackgroundColor), left: leftMenuFlyoutWidth - 10 /* ~half width of handle */, display: !this._leftMenuFlyoutWidth ? 'none' : undefined }}
+ onPointerDown={this.onFlyoutPointerDown}>
<FontAwesomeIcon icon="chevron-left" color={StrCast(Doc.UserDoc().userColor)} style={{ opacity: '50%' }} size="sm" />
</div>
<div className="mainView-innerContainer" style={{ width: `calc(100% - ${width}px)` }}>
{this.dockingContent}
{this._hideUI ? null : (
- <div className="mainView-propertiesDragger" key="props" onPointerDown={this.onPropertiesPointerDown} style={{ right: this.propertiesWidth() - 1, background : 'linen' }}>
+ <div className="mainView-propertiesDragger" key="props" onPointerDown={this.onPropertiesPointerDown} style={{ right: this.propertiesWidth() - 1, background: 'linen' }}>
<FontAwesomeIcon icon={this.propertiesWidth() < 10 ? 'chevron-left' : 'chevron-right'} color={this.colorScheme === ColorScheme.Dark ? Colors.WHITE : Colors.BLACK} size="sm" />
</div>
)}
@@ -879,7 +883,7 @@ export class MainView extends React.Component {
@computed get docButtons() {
return !Doc.MyDockedBtns ? null : (
- <div className="mainView-docButtons" ref={this._docBtnRef}>
+ <div className="mainView-docButtons" style={{ background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor) }} ref={this._docBtnRef}>
<CollectionLinearView
Document={Doc.MyDockedBtns}
DataDoc={undefined}
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 6105cc1b5..2e3668268 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -56,24 +56,25 @@ export class PropertiesButtons extends React.Component<{}, {}> {
propertyToggleBtn = (label: (on?: any) => string, property: string, tooltip: (on?: any) => string, icon: (on?: any) => any, onClick?: (dv: Opt<DocumentView>, doc: Doc, property: string) => void, useUserDoc?: boolean) => {
const targetDoc = useUserDoc ? Doc.UserDoc() : this.selectedDoc;
const onPropToggle = (dv: Opt<DocumentView>, doc: Doc, prop: string) => ((dv?.layoutDoc || doc)[prop] = (dv?.layoutDoc || doc)[prop] ? false : true);
- return !targetDoc ? null : <Toggle
- toggleStatus={BoolCast(targetDoc[property])}
- text={label(targetDoc?.[property])}
- color={StrCast(Doc.UserDoc().userColor)}
- icon={icon(targetDoc?.[property] as any)}
- iconPlacement={'left'}
- align={'flex-start'}
- fillWidth={true}
- toggleType={ToggleType.BUTTON}
- onClick={undoable(() => {
- if (SelectionManager.Views().length > 1) {
- SelectionManager.Views().forEach(dv => (onClick ?? onPropToggle)(dv, dv.rootDoc, property));
- } else if (targetDoc) (onClick ?? onPropToggle)(undefined, targetDoc, property);
- }, property)}
- />
+ return !targetDoc ? null : (
+ <Toggle
+ toggleStatus={BoolCast(targetDoc[property])}
+ text={label(targetDoc?.[property])}
+ color={StrCast(Doc.UserDoc().userColor)}
+ icon={icon(targetDoc?.[property] as any)}
+ iconPlacement={'left'}
+ align={'flex-start'}
+ fillWidth={true}
+ toggleType={ToggleType.BUTTON}
+ onClick={undoable(() => {
+ if (SelectionManager.Views().length > 1) {
+ SelectionManager.Views().forEach(dv => (onClick ?? onPropToggle)(dv, dv.rootDoc, property));
+ } else if (targetDoc) (onClick ?? onPropToggle)(undefined, targetDoc, property);
+ }, property)}
+ />
+ );
};
-
// this implments a container pattern by marking the targetDoc (collection) as a lightbox
// that always fits its contents to its container and that hides all other documents when
// a link is followed that targets a 'lightbox' destination
@@ -110,7 +111,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
(dv, doc) => {
const tdoc = dv?.rootDoc || doc;
const newtitle = !tdoc._layout_showTitle ? 'title' : tdoc._layout_showTitle === 'title' ? 'title:hover' : '';
- tdoc._layout_showTitle = newtitle;
+ tdoc._layout_showTitle = newtitle ? newtitle : undefined;
}
);
}
@@ -148,7 +149,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
@computed get clustersButton() {
return this.propertyToggleBtn(
- on => (on ?'DISABLE CLUSTERS' : 'HIGHLIGHT CLUSTERS'),
+ on => (on ? 'DISABLE CLUSTERS' : 'HIGHLIGHT CLUSTERS'),
'_freeform_useClusters',
on => `${on ? 'Hide' : 'Show'} clusters`,
on => <FaBraille />
@@ -163,12 +164,13 @@ export class PropertiesButtons extends React.Component<{}, {}> {
);
}
- @computed get forceActiveButton() { //select text
+ @computed get forceActiveButton() {
+ //select text
return this.propertyToggleBtn(
- on => on ? 'INACTIVE INTERACTION' : 'ACTIVE INTERACTION',
+ on => (on ? 'INACTIVE INTERACTION' : 'ACTIVE INTERACTION'),
'_forceActive',
on => `${on ? 'Select to activate' : 'Contents always active'} `,
- on => <MdTouchApp/> // 'eye'
+ on => <MdTouchApp /> // 'eye'
);
}
@@ -218,7 +220,8 @@ export class PropertiesButtons extends React.Component<{}, {}> {
}
@computed get captionButton() {
- return this.propertyToggleBtn( //DEVELOPER
+ return this.propertyToggleBtn(
+ //DEVELOPER
on => (on ? 'HIDE CAPTION' : 'SHOW CAPTION'), //'Caption',
'_layout_showCaption',
on => `${on ? 'Hide' : 'Show'} caption footer`,
@@ -227,17 +230,19 @@ export class PropertiesButtons extends React.Component<{}, {}> {
);
}
- @computed get chromeButton() { // developer -- removing UI decoration
+ @computed get chromeButton() {
+ // developer -- removing UI decoration
return this.propertyToggleBtn(
- on => on ? 'ENABLE UI CONTROLS' : 'DISABLE UI CONTROLS',
+ on => (on ? 'ENABLE UI CONTROLS' : 'DISABLE UI CONTROLS'),
'_chromeHidden',
on => `${on ? 'Show' : 'Hide'} editing UI`,
- on => on? <TbEditCircle/> : <TbEditCircleOff/> , // 'edit',
+ on => (on ? <TbEditCircle /> : <TbEditCircleOff />), // 'edit',
(dv, doc) => ((dv?.rootDoc || doc)._chromeHidden = !(dv?.rootDoc || doc)._chromeHidden)
);
}
- @computed get layout_autoHeightButton() { // store previous dimensions to store old values
+ @computed get layout_autoHeightButton() {
+ // store previous dimensions to store old values
return this.propertyToggleBtn(
on => 'Auto\xA0Size',
'_layout_autoHeight',
@@ -251,7 +256,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
on => (on ? 'HIDE GRID' : 'DISPLAY GRID'),
'_freeform_backgroundGrid',
on => `Display background grid in collection`,
- on => (on ? <MdGridOff /> :<MdGridOn /> ) //'border-all'
+ on => (on ? <MdGridOff /> : <MdGridOn />) //'border-all'
);
}
@@ -288,13 +293,14 @@ export class PropertiesButtons extends React.Component<{}, {}> {
// }
// );
// }
- @computed get snapButton() { // THESE ARE NOT COMING
+ @computed get snapButton() {
+ // THESE ARE NOT COMING
return this.propertyToggleBtn(
on => (on ? 'HIDE SNAP LINES' : 'SHOW SNAP LINES'),
'freeform_snapLines',
on => `Display snapping lines when objects are dragged`,
on => <TfiBarChart />, //'th',
- undefined,
+ undefined
);
}
@@ -346,11 +352,11 @@ export class PropertiesButtons extends React.Component<{}, {}> {
const followLoc = this.selectedDoc._followLinkLocation;
const linkedToLightboxView = () => LinkManager.Links(this.selectedDoc).some(link => LinkManager.getOppositeAnchor(link, this.selectedDoc)?._isLightbox);
- if (followLoc === OpenWhere.lightbox && !linkedToLightboxView()) return 'linkInPlace'
- else if (linkButton && followLoc === OpenWhere.addRight) return 'linkOnRight'
- else if (linkButton && this.selectedDoc._followLinkLocation === OpenWhere.lightbox && linkedToLightboxView()) return 'enterPortal'
- else if (ScriptCast(this.selectedDoc.onClick)?.script.originalScript.includes('toggleDetail')) return 'toggleDetail'
- else return 'nothing'
+ if (followLoc === OpenWhere.lightbox && !linkedToLightboxView()) return 'linkInPlace';
+ else if (linkButton && followLoc === OpenWhere.addRight) return 'linkOnRight';
+ else if (linkButton && this.selectedDoc._followLinkLocation === OpenWhere.lightbox && linkedToLightboxView()) return 'enterPortal';
+ else if (ScriptCast(this.selectedDoc.onClick)?.script.originalScript.includes('toggleDetail')) return 'toggleDetail';
+ else return 'nothing';
}
@computed
@@ -362,22 +368,20 @@ export class PropertiesButtons extends React.Component<{}, {}> {
['linkInPlace', 'Open Link in Lightbox'],
['linkOnRight', 'Open Link on Right'],
];
-
+
const items: IListItemProps[] = buttonList.map(value => {
- return (
- {
- text: value[1],
- val: value[1],
- }
- );
+ return {
+ text: value[1],
+ val: value[1],
+ };
});
- console.log("click val: ", this.onClickVal)
+ console.log('click val: ', this.onClickVal);
return !this.selectedDoc ? null : (
<Dropdown
- tooltip={'Choose onClick behavior'}
+ tooltip={'Choose onClick behavior'}
items={items}
selectedVal={this.onClickVal}
- setSelectedVal={(val) => this.handleOptionChange(val as string)}
+ setSelectedVal={val => this.handleOptionChange(val as string)}
title={'Choose onClick behaviour'}
color={StrCast(Doc.UserDoc().userColor)}
dropdownType={DropdownType.SELECT}
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 a6a99b3cc..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,28 +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>
- <br />
- <div className="propertiesView-sharingTable">{<div> {individualTableEntries}</div>}</div>
+ <div>
+ <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>
{groupTableEntries.length > 0 ? (
<div>
<div>
- {' '}
- <br></br> Groups with Access to this Document{' '}
+ <br></br> Groups with Access to this Document
+ </div>
+ <div className="propertiesView-sharingTable" style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
+ {<div> {groupTableEntries}</div>}
</div>
- <div className="propertiesView-sharingTable">{<div> {groupTableEntries}</div>}</div>
</div>
) : null}
- Guest
- <div>{this.colorACLDropDown('Guest', true, publicPermission!, true)}</div>
- <div>
- {' '}
- <br></br> Individual Users with Access to this Document{' '}
- </div>
+ <br></br> Guest
+ <div>{this.colorACLDropDown('Guest', showAdmin, guestPermission!, true)}</div>
</div>
);
}
@@ -1145,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/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index f1d98d22a..fb8ec93b2 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -235,6 +235,9 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
bActive,
textX,
textY,
+ // pt1,
+ // pt2,
+ // this code adds space between links
pt1: [pt1[0] + pt1normalized[0] * 13, pt1[1] + pt1normalized[1] * 13],
pt2: [pt2[0] + pt2normalized[0] * 13, pt2[1] + pt2normalized[1] * 13],
};
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss
index cb5cef29c..4ada1731f 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.scss
@@ -1,11 +1,13 @@
-.collectionfreeformlinksview-svgCanvas{
+// TODO: change z-index to -1 when a modal is active?
+
+.collectionfreeformlinksview-svgCanvas {
position: absolute;
top: 0;
left: 0;
- width: 100%;
+ width: 100%;
height: 100%;
pointer-events: none;
- }
- .collectionfreeformlinksview-container {
+}
+.collectionfreeformlinksview-container {
pointer-events: none;
- } \ No newline at end of file
+}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 38922cb24..66352678c 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1236,7 +1236,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
const renderDoc = this.renderDoc({
borderRadius: this.borderRounding,
outline: highlighting && !this.borderRounding && !highlighting.highlightStroke ? `${highlighting.highlightColor} ${highlighting.highlightStyle} ${highlighting.highlightIndex}px` : 'solid 0px',
- border: highlighting && this.borderRounding && highlighting.highlightStyle === 'dashed' ? `${highlighting.highlightStyle} ${highlighting.highlightColor} ${highlighting.highlightIndex}px` : undefined,
+ border: highlighting && this.borderRounding && highlighting.highlightStyle === 'dashed' ? `${highlighting.highlightStyle} ${highlighting.highlightColor} ${highlighting.highlightIndex}px` : undefined,
boxShadow,
clipPath: borderPath?.clipPath,
});
diff --git a/src/client/views/nodes/LoadingBox.scss b/src/client/views/nodes/LoadingBox.scss
index 4c3b8dabe..d4a7e18f2 100644
--- a/src/client/views/nodes/LoadingBox.scss
+++ b/src/client/views/nodes/LoadingBox.scss
@@ -12,6 +12,10 @@
text-overflow: ellipsis;
max-width: 80%;
text-align: center;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ align-items: center;
}
}
diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx
index 07b2afd91..17a3d0a03 100644
--- a/src/client/views/pdf/AnchorMenu.tsx
+++ b/src/client/views/pdf/AnchorMenu.tsx
@@ -253,21 +253,18 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
};
@computed get highlighter() {
- return <Group>
- <IconButton
- icon={<FontAwesomeIcon icon="highlighter" style={{ transition: 'transform 0.1s', transform: 'rotate(-45deg)' }} />}
- tooltip={'Click to Highlight'}
- onClick={this.highlightClicked}
- colorPicker={this.highlightColor}
- color={StrCast(Doc.UserDoc().userColor)}
- />
- <ColorPicker
- colorPickerType={'github'}
- selectedColor={this.highlightColor}
- setSelectedColor={color => this.changeHighlightColor(color)}
- size={Size.XSMALL}
- />
- </Group>
+ return (
+ <Group>
+ <IconButton
+ icon={<FontAwesomeIcon icon="highlighter" style={{ transition: 'transform 0.1s', transform: 'rotate(-45deg)' }} />}
+ tooltip={'Click to Highlight'}
+ onClick={this.highlightClicked}
+ colorPicker={this.highlightColor}
+ color={StrCast(Doc.UserDoc().userColor)}
+ />
+ <ColorPicker colorPickerType={'github'} selectedColor={this.highlightColor} setSelectedColor={color => this.changeHighlightColor(color)} size={Size.XSMALL} />
+ </Group>
+ );
}
@action changeHighlightColor = (color: string) => {
@@ -312,12 +309,7 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
this.Status === 'marquee' ? (
<>
{this.highlighter}
- <IconButton
- tooltip={'Drag to Place Annotation'}
- onPointerDown={this.pointerDown}
- icon={<FontAwesomeIcon icon="comment-alt"/>}
- color={StrCast(Doc.UserDoc().userColor)}
- />
+ <IconButton tooltip={'Drag to Place Annotation'} onPointerDown={this.pointerDown} icon={<FontAwesomeIcon icon="comment-alt" />} color={StrCast(Doc.UserDoc().userColor)} />
{/* GPT Summarize icon only shows up when text is highlighted, not on marquee selection*/}
{AnchorMenu.Instance.StartCropDrag === unimplementedFunction && this.canSummarize() && (
<Tooltip key="gpt" title={<div className="dash-tooltip">Summarize with AI</div>}>
@@ -338,66 +330,30 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
mode={this.GPTMode}
/>
{AnchorMenu.Instance.OnAudio === unimplementedFunction ? null : (
- <IconButton
- tooltip={'Click to Record Annotation'}
- onPointerDown={this.audioDown}
- icon={<FontAwesomeIcon icon="microphone" />}
- color={StrCast(Doc.UserDoc().userColor)}
- />
- )}
- {this.canEdit() && (
- <IconButton
- tooltip={'AI edit suggestions'}
- onPointerDown={this.gptEdit}
- icon={<FontAwesomeIcon icon="pencil-alt" />}
- color={StrCast(Doc.UserDoc().userColor)}
- />
+ <IconButton tooltip={'Click to Record Annotation'} onPointerDown={this.audioDown} icon={<FontAwesomeIcon icon="microphone" />} color={StrCast(Doc.UserDoc().userColor)} />
)}
- <Popup
- tooltip='Find document to link to selected text'
- type={Type.PRIM}
- icon={<FontAwesomeIcon icon={'search'} />}
- popup={<LinkPopup key="popup" linkCreateAnchor={this.onMakeAnchor} />}
- color={StrCast(Doc.UserDoc().userColor)}
- />
+ {this.canEdit() && <IconButton tooltip={'AI edit suggestions'} onPointerDown={this.gptEdit} icon={<FontAwesomeIcon icon="pencil-alt" />} color={StrCast(Doc.UserDoc().userColor)} />}
+ <Popup tooltip="Find document to link to selected text" type={Type.PRIM} icon={<FontAwesomeIcon icon={'search'} />} popup={<LinkPopup key="popup" linkCreateAnchor={this.onMakeAnchor} />} color={StrCast(Doc.UserDoc().userColor)} />
{AnchorMenu.Instance.StartCropDrag === unimplementedFunction ? null : (
- <IconButton
- tooltip={'Click/Drag to create cropped image'}
- onPointerDown={this.cropDown}
- icon={<FontAwesomeIcon icon="image"/>}
- color={StrCast(Doc.UserDoc().userColor)}
- />
+ <IconButton tooltip={'Click/Drag to create cropped image'} onPointerDown={this.cropDown} icon={<FontAwesomeIcon icon="image" />} color={StrCast(Doc.UserDoc().userColor)} />
)}
</>
) : (
<>
- {this.Delete !== returnFalse && <IconButton
- tooltip={'Remove Link Anchor'}
- onPointerDown={this.Delete}
- icon={<FontAwesomeIcon icon="trash-alt" />}
- color={StrCast(Doc.UserDoc().userColor)}
- />}
- {this.PinToPres !== returnFalse && <IconButton
- tooltip={'Pin to Presentation'}
- onPointerDown={this.PinToPres}
- icon={<FontAwesomeIcon icon="map-pin" />}
- color={StrCast(Doc.UserDoc().userColor)}
- />}
- {this.ShowTargetTrail !== returnFalse && <IconButton
- tooltip={'Show Linked Trail'}
- onPointerDown={this.ShowTargetTrail}
- icon={<FontAwesomeIcon icon="taxi" />}
- color={StrCast(Doc.UserDoc().userColor)}
- />}
- {this.IsTargetToggler !== returnFalse && <Toggle
- tooltip={'Make target visibility toggle on click'}
- type={Type.PRIM}
- toggleType={ToggleType.BUTTON}
- toggleStatus={this.IsTargetToggler()}
- onClick={this.MakeTargetToggle}
- icon={<FontAwesomeIcon icon="thumbtack" />}
- color={StrCast(Doc.UserDoc().userColor)}
- />}
+ {this.Delete !== returnFalse && <IconButton tooltip={'Remove Link Anchor'} onPointerDown={this.Delete} icon={<FontAwesomeIcon icon="trash-alt" />} color={StrCast(Doc.UserDoc().userColor)} />}
+ {this.PinToPres !== returnFalse && <IconButton tooltip={'Pin to Presentation'} onPointerDown={this.PinToPres} icon={<FontAwesomeIcon icon="map-pin" />} color={StrCast(Doc.UserDoc().userColor)} />}
+ {this.ShowTargetTrail !== returnFalse && <IconButton tooltip={'Show Linked Trail'} onPointerDown={this.ShowTargetTrail} icon={<FontAwesomeIcon icon="taxi" />} color={StrCast(Doc.UserDoc().userColor)} />}
+ {this.IsTargetToggler !== returnFalse && (
+ <Toggle
+ tooltip={'Make target visibility toggle on click'}
+ type={Type.PRIM}
+ toggleType={ToggleType.BUTTON}
+ toggleStatus={this.IsTargetToggler()}
+ onClick={this.MakeTargetToggle}
+ icon={<FontAwesomeIcon icon="thumbtack" />}
+ color={StrCast(Doc.UserDoc().userColor)}
+ />
+ )}
</>
);
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index 0fd93868a..1319a236d 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -26,6 +26,7 @@ import { Annotation } from './Annotation';
import './PDFViewer.scss';
import React = require('react');
import { GPTPopup } from './GPTPopup/GPTPopup';
+import { InkingStroke } from '../InkingStroke';
const PDFJSViewer = require('pdfjs-dist/web/pdf_viewer');
const pdfjsLib = require('pdfjs-dist');
const _global = (window /* browser */ || global) /* node */ as any;
@@ -519,7 +520,8 @@ export class PDFViewer extends React.Component<IViewerProps> {
childStyleProvider = (doc: Doc | undefined, props: Opt<DocumentViewProps>, property: string): any => {
if (doc instanceof Doc && property === StyleProp.PointerEvents) {
if (this.inlineTextAnnotations.includes(doc) || this.props.isContentActive() === false) return 'none';
- return 'all';
+ const isInk = doc && StrCast(Doc.Layout(doc).layout).includes(InkingStroke.name) && !props?.LayoutTemplateString;
+ return isInk ? 'visiblePainted' : 'all';
}
return this.props.styleProvider?.(doc, props, property);
};
@@ -537,7 +539,7 @@ export class PDFViewer extends React.Component<IViewerProps> {
NativeWidth={returnZero}
NativeHeight={returnZero}
setContentView={emptyFunction} // override setContentView to do nothing
- pointerEvents={SnappingManager.GetIsDragging() && this.props.isContentActive() ? returnAll : returnNone} // freeform view doesn't get events unless something is being dragged onto it.
+ pointerEvents={this.props.isContentActive() && (SnappingManager.GetIsDragging() || Doc.ActiveTool !== InkTool.None) ? returnAll : returnNone} // freeform view doesn't get events unless something is being dragged onto it.
childPointerEvents={this.props.isContentActive() !== false ? 'all' : 'none'} // but freeform children need to get events to allow text editing, etc
renderDepth={this.props.renderDepth + 1}
isAnnotationOverlay={true}
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index 79f41fe9d..cb8eda9de 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -10,7 +10,7 @@ import { StrCast } from '../../../fields/Types';
import { GetEffectiveAcl } from '../../../fields/util';
import { DocumentManager } from '../../util/DocumentManager';
import { PingManager } from '../../util/PingManager';
-import { ReportManager } from '../../util/ReportManager';
+import { ReportManager } from '../../util/reportManager/ReportManager';
import { ServerStats } from '../../util/ServerStats';
import { SettingsManager } from '../../util/SettingsManager';
import { SharingManager } from '../../util/SharingManager';
@@ -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-11-27 10:35:52 +0000