aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/client/documents/DocumentTypes.ts1
-rw-r--r--src/client/goldenLayout.js2
-rw-r--r--src/client/util/RichTextSchema.tsx2
-rw-r--r--src/client/views/DocumentDecorations.tsx24
-rw-r--r--src/client/views/MainView.scss22
-rw-r--r--src/client/views/MainView.tsx36
-rw-r--r--src/client/views/collections/CollectionDockingView.scss20
-rw-r--r--src/client/views/collections/CollectionDockingView.tsx27
-rw-r--r--src/client/views/collections/CollectionView.tsx3
-rw-r--r--src/client/views/nodes/DocumentView.tsx4
-rw-r--r--src/client/views/search/FilterBox.tsx2
-rw-r--r--src/client/views/search/SearchBox.tsx2
-rw-r--r--src/server/authentication/models/current_user_utils.ts3
13 files changed, 95 insertions, 53 deletions
diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts
index 1220e9923..0e6b59b33 100644
--- a/src/client/documents/DocumentTypes.ts
+++ b/src/client/documents/DocumentTypes.ts
@@ -14,7 +14,6 @@ export enum DocumentType {
LINKDOC = "linkdoc",
BUTTON = "button",
SLIDER = "slider",
- TEMPLATE = "template",
EXTENSION = "extension",
YOUTUBE = "youtube",
WEBCAM = "webcam",
diff --git a/src/client/goldenLayout.js b/src/client/goldenLayout.js
index 29b750720..b510385ff 100644
--- a/src/client/goldenLayout.js
+++ b/src/client/goldenLayout.js
@@ -2868,7 +2868,7 @@
* @type {String}
*/
lm.controls.Tab._template = '<li class="lm_tab"><i class="lm_left"></i>' +
- '<span class="lm_title"></span><div class="lm_close_tab"></div>' +
+ '<div class="lm_title_wrap"><input class="lm_title"/></div><div class="lm_close_tab"></div>' +
'<i class="lm_right"></i></li>';
lm.utils.copy(lm.controls.Tab.prototype, {
diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx
index 80bd75771..3a3bcd1ad 100644
--- a/src/client/util/RichTextSchema.tsx
+++ b/src/client/util/RichTextSchema.tsx
@@ -824,7 +824,7 @@ export class DashDocView {
ScreenToLocalTransform={this.getDocTransform}
addDocTab={this._textBox.props.addDocTab}
pinToPres={returnFalse}
- renderDepth={1}
+ renderDepth={self._textBox.props.renderDepth + 1}
PanelWidth={finalLayout[WidthSym]}
PanelHeight={finalLayout[HeightSym]}
focus={this.outerFocus}
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 12427cdac..3388ea46c 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -491,16 +491,16 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
{SelectionManager.SelectedDocuments().length === 1 ? DocumentDecorations.DocumentIcon(StrCast(seldoc.props.Document.layout, "...")) : "..."}
</div>);
- const titleArea = this._edtingTitle ?
- <>
- <input ref={this._keyinput} className="title" type="text" name="dynbox" autoComplete="on" value={this._accumulatedTitle} style={{ width: "calc(100% - 20px)" }}
- onBlur={e => this.titleBlur(true)} onChange={this.titleChanged} onKeyPress={this.titleEntered} />
- <div className="publishBox" title="make document referenceable by its title"
- onPointerDown={e => DocUtils.Publish(seldoc.props.Document, this._accumulatedTitle, seldoc.props.addDocument, seldoc.props.removeDocument)}>
- <FontAwesomeIcon size="lg" color={SelectionManager.SelectedDocuments()[0].props.Document.title === SelectionManager.SelectedDocuments()[0].props.Document[Id] ? "green" : undefined} icon="sticky-note"></FontAwesomeIcon>
- </div>
- </>:
- <div className="title" style={{ background:darkScheme}} onPointerDown={this.onTitleDown} ><span>{`${this.selectionTitle}`}</span></div> ;
+ const titleArea = this._edtingTitle ?
+ <>
+ <input ref={this._keyinput} className="title" type="text" name="dynbox" autoComplete="on" value={this._accumulatedTitle} style={{ width: "calc(100% - 20px)" }}
+ onBlur={e => this.titleBlur(true)} onChange={this.titleChanged} onKeyPress={this.titleEntered} />
+ <div className="publishBox" title="make document referenceable by its title"
+ onPointerDown={e => DocUtils.Publish(seldoc.props.Document, this._accumulatedTitle, seldoc.props.addDocument, seldoc.props.removeDocument)}>
+ <FontAwesomeIcon size="lg" color={SelectionManager.SelectedDocuments()[0].props.Document.title === SelectionManager.SelectedDocuments()[0].props.Document[Id] ? "green" : undefined} icon="sticky-note"></FontAwesomeIcon>
+ </div>
+ </> :
+ <div className="title" style={{ background: darkScheme }} onPointerDown={this.onTitleDown} ><span>{`${this.selectionTitle}`}</span></div>;
bounds.x = Math.max(0, bounds.x - this._resizeBorderWidth / 2) + this._resizeBorderWidth / 2;
bounds.y = Math.max(0, bounds.y - this._resizeBorderWidth / 2 - this._titleHeight) + this._resizeBorderWidth / 2 + this._titleHeight;
@@ -539,7 +539,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
<div id="documentDecorations-topLeftResizer" className="documentDecorations-resizer"
style={{ background: darkScheme }} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
<div id="documentDecorations-topResizer" className="documentDecorations-resizer"
- style={{ background: darkScheme}} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
+ style={{ background: darkScheme }} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
<div id="documentDecorations-topRightResizer" className="documentDecorations-resizer"
style={{ background: darkScheme }} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
<div id="documentDecorations-leftResizer" className="documentDecorations-resizer"
@@ -554,7 +554,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
<div id="documentDecorations-bottomRightResizer" className="documentDecorations-resizer"
style={{ background: darkScheme }} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
<div id="documentDecorations-borderRadius" className="documentDecorations-radius"
- style={{ background: darkScheme }} onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
+ style={{ background: darkScheme }} onPointerDown={this.onRadiusDown} onContextMenu={(e) => e.preventDefault()}></div>
</div >
<div className="link-button-container" style={{ left: bounds.x - this._resizeBorderWidth / 2, top: bounds.b + this._resizeBorderWidth / 2 }}>
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index b8fd7be0b..e91f7e94c 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -29,12 +29,30 @@
left: 0;
z-index: 1;
touch-action: none;
+ .searchBox-container {
+ background: lightgray;
+ }
}
.mainView-container-dark {
- .lm_splitter {
+ .lm_goldenlayout {
background: dimgray;
- opacity: 0.5;
+ }
+ .marquee {
+ border-color: white;
+ }
+ #search-input {
+ background: lightgray;
+ }
+ .searchBox-container {
+ background: rgb(45,45,45);
+ }
+ .contextMenu-cont, .contextMenu-item {
+ background: dimGray;
+ color: lightgray;
+ }
+ .contextMenu-item:hover {
+ background: gray;
}
}
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 5d739474e..7948da3c5 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -274,15 +274,25 @@ export class MainView extends React.Component {
getPHeight = () => this._panelHeight;
getContentsHeight = () => this._panelHeight - this._buttonBarHeight;
- childBackgroundColor = (doc: Doc) => {
+ defaultBackgroundColors = (doc: Doc) => {
if (this.darkScheme) {
- return doc.type === DocumentType.TEXT ? "#2d2d2d" : "black";
+ switch (doc.type) {
+ case DocumentType.TEXT || DocumentType.BUTTON: return "#2d2d2d";
+ case DocumentType.COL: {
+ if (doc._viewType !== CollectionViewType.Freeform && doc._viewType !== CollectionViewType.Time) return "rgb(62,62,62)";
+ }
+ default: return "black";
+ }
+ } else {
+ switch (doc.type) {
+ case DocumentType.TEXT: return "#f1efeb";
+ case DocumentType.BUTTON: return "lightgray";
+ case DocumentType.COL: {
+ if (doc._viewType !== CollectionViewType.Freeform && doc._viewType !== CollectionViewType.Time) return "lightgray";
+ }
+ default: return "white";
+ }
}
- return doc.type === DocumentType.TEXT ? "#f1efeb" :
- doc.type === DocumentType.COL && doc._viewType === CollectionViewType.Tree ? "lightgray" : "white";
- }
- sidebarBackgroundColor = (doc: Doc) => {
- return this.childBackgroundColor(doc);
}
@computed get mainDocView() {
return <DocumentView Document={this.mainContainer!}
@@ -292,7 +302,7 @@ export class MainView extends React.Component {
addDocTab={this.addDocTabFunc}
pinToPres={emptyFunction}
onClick={undefined}
- backgroundColor={this.childBackgroundColor}
+ backgroundColor={this.defaultBackgroundColors}
removeDocument={undefined}
ScreenToLocalTransform={Transform.Identity}
ContentScaling={returnOne}
@@ -383,7 +393,7 @@ export class MainView extends React.Component {
}
const sidebarButtonsDoc = Cast(CurrentUserUtils.UserDocument.sidebarButtons, Doc) as Doc;
return <div className="mainView-flyoutContainer" >
- <div className="mainView-tabButtons" style={{ height: `${this._buttonBarHeight}px` }}>
+ <div className="mainView-tabButtons" style={{ height: `${this._buttonBarHeight}px`, paddingTop: 10, backgroundColor: StrCast(sidebarButtonsDoc.backgroundColor) }}>
<DocumentView
Document={sidebarButtonsDoc}
DataDoc={undefined}
@@ -399,7 +409,7 @@ export class MainView extends React.Component {
PanelHeight={this.getPHeight}
renderDepth={0}
focus={emptyFunction}
- backgroundColor={this.sidebarBackgroundColor}
+ backgroundColor={this.defaultBackgroundColors}
parentActive={returnTrue}
whenActiveChanged={emptyFunction}
bringToFront={emptyFunction}
@@ -425,7 +435,7 @@ export class MainView extends React.Component {
PanelHeight={this.getContentsHeight}
renderDepth={0}
focus={emptyFunction}
- backgroundColor={this.sidebarBackgroundColor}
+ backgroundColor={this.defaultBackgroundColors}
parentActive={returnTrue}
whenActiveChanged={emptyFunction}
bringToFront={emptyFunction}
@@ -444,14 +454,14 @@ export class MainView extends React.Component {
{this.docButtons}
</div>;
}
-
+ //`${StrCast(sidebar.backgroundColor, this.darkScheme ? "dimGray" : "black")}` }} >
@computed get mainContent() {
const sidebar = this.userDoc && this.userDoc.sidebarContainer;
return !this.userDoc || !(sidebar instanceof Doc) ? (null) : (
<div className="mainView-mainContent" style={{ color: this.darkScheme ? "dimGray" : "black" }} >
<div className="mainView-flyoutContainer" onPointerLeave={this.pointerLeaveDragger} style={{ width: this.flyoutWidth }}>
<div className="mainView-libraryHandle" onPointerDown={this.onPointerDown} onPointerOver={this.pointerOverDragger}
- style={{ backgroundColor: `${StrCast(sidebar.backgroundColor, this.darkScheme ? "dimGray" : "black")}` }} >
+ style={{ backgroundColor: this.defaultBackgroundColors(sidebar) }}>
<span title="library View Dragger" style={{
width: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "3vw",
//height: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "100vh",
diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index 819332d86..2fafcecb2 100644
--- a/src/client/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -1,8 +1,22 @@
@import "../../views/globalCssVariables.scss";
-.lm_active .messageCounter {
- color: white;
- background: #999999;
+.lm_title {
+ margin-top: 3px;
+ background: black;
+ border-radius: 5px;
+ border: solid 1px dimgray;
+ border-width: 2px 2px 0px;
+ height: 20px;
+ transform: translate(0px, -3px);
+}
+.lm_title_wrap {
+ overflow: hidden;
+ height: 19px;
+ margin-top: -3px;
+ display:inline-block;
+}
+.lm_active .lm_title {
+ border: solid 1px lightgray;
}
.lm_header .lm_tab .lm_close_tab {
position: absolute;
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 67a7577eb..6abfb59c3 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -379,16 +379,6 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
});
window.addEventListener("pointerup", onPointerUp);
const className = (e.target as any).className;
- if (className === "messageCounter") {
- e.stopPropagation();
- e.preventDefault();
- const x = e.clientX;
- const y = e.clientY;
- const docid = (e.target as any).DashDocId;
- const tab = (e.target as any).parentElement as HTMLElement;
- DocServer.GetRefField(docid).then(action(async (sourceDoc: Opt<Field>) =>
- (sourceDoc instanceof Doc) && DragManager.StartLinkTargetsDrag(tab, x, y, sourceDoc)));
- }
if (className === "lm_drag_handle" || className === "lm_close" || className === "lm_maximise" || className === "lm_minimise" || className === "lm_close_tab") {
this._flush = true;
}
@@ -430,6 +420,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
}
tabCreated = async (tab: any) => {
+ tab.titleElement[0].Tab = tab;
if (tab.hasOwnProperty("contentItem") && tab.contentItem.config.type !== "stack") {
if (tab.contentItem.config.fixed) {
tab.contentItem.parent.config.fixed = true;
@@ -438,6 +429,14 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
const doc = await DocServer.GetRefField(tab.contentItem.config.props.documentId) as Doc;
const dataDoc = await DocServer.GetRefField(tab.contentItem.config.props.dataDocumentId) as Doc;
if (doc instanceof Doc) {
+ //tab.titleElement[0].outerHTML = `<input class='lm_title' style="background:black" value='${doc.title}' />`;
+ tab.titleElement[0].onclick = (e: any) => tab.titleElement[0].focus();
+ tab.titleElement[0].onchange = (e: any) => {
+ tab.titleElement[0].size = e.currentTarget.value.length + 1;
+ Doc.SetInPlace(doc, "title", e.currentTarget.value, true);
+ }
+ tab.titleElement[0].size = StrCast(doc.title).length + 1;
+ tab.titleElement[0].value = doc.title;
const gearSpan = document.createElement("span");
gearSpan.className = "collectionDockingView-gear";
gearSpan.style.position = "relative";
@@ -464,15 +463,15 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
}}><DockingViewButtonSelector Document={doc} Stack={stack} /></span>, gearSpan);
tab.reactComponents = [gearSpan];
tab.element.append(gearSpan);
- tab.reactionDisposer = reaction(() => [doc.title, Doc.IsBrushedDegree(doc)], () => {
- tab.titleElement[0].textContent = doc.title, { fireImmediately: true };
- tab.titleElement[0].style.outline = `${["transparent", "white", "white"][Doc.IsBrushedDegreeUnmemoized(doc)]} ${["none", "dashed", "solid"][Doc.IsBrushedDegreeUnmemoized(doc)]} 1px`;
+ tab.reactionDisposer = reaction(() => ({ title: doc.title, degree: Doc.IsBrushedDegree(doc) }), ({ title, degree }) => {
+ tab.titleElement[0].textContent = title, { fireImmediately: true };
+ tab.titleElement[0].style.padding = degree ? 0 : 2;
+ tab.titleElement[0].style.border = `${["gray", "gray", "gray"][degree]} ${["none", "dashed", "solid"][degree]} 2px`;
});
//TODO why can't this just be doc instead of the id?
tab.titleElement[0].DashDocId = tab.contentItem.config.props.documentId;
}
}
- tab.titleElement[0].Tab = tab;
tab.closeElement.off('click') //unbind the current click handler
.click(async function () {
tab.reactionDisposer && tab.reactionDisposer();
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index be971eda6..48294f9c2 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -293,7 +293,8 @@ export class CollectionView extends Touchable<FieldViewProps> {
return (<div className={"collectionView"}
style={{
pointerEvents: this.props.Document.isBackground ? "none" : "all",
- boxShadow: this.props.Document.isBackground || this.collectionViewType === CollectionViewType.Linear ? undefined : `#9c9396 ${StrCast(this.props.Document.boxShadow, "0.2vw 0.2vw 0.8vw")}`
+ boxShadow: this.props.Document.isBackground || this.collectionViewType === CollectionViewType.Linear ? undefined :
+ `${Cast(Doc.UserDoc().activeWorkspace, Doc, null)?.darkScheme ? "rgb(30, 32, 31)" : "#9c9396"} ${StrCast(this.props.Document.boxShadow, "0.2vw 0.2vw 0.8vw")}`
}}
onContextMenu={this.onContextMenu}>
{this.showIsTagged()}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 52928e8cb..3447f0380 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -913,7 +913,9 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
const borderRounding = this.layoutDoc.borderRounding;
const localScale = fullDegree;
- const highlightColors = ["transparent", "maroon", "maroon", "yellow", "magenta", "cyan", "orange"];
+ const highlightColors = Cast(Doc.UserDoc().activeWorkspace, Doc, null)?.darkScheme ?
+ ["transparent", "#65350c", "#65350c", "yellow", "magenta", "cyan", "orange"] :
+ ["transparent", "maroon", "maroon", "yellow", "magenta", "cyan", "orange"];
const highlightStyles = ["solid", "dashed", "solid", "solid", "solid", "solid", "solid"];
let highlighting = fullDegree && this.layoutDoc.type !== DocumentType.FONTICON && this.layoutDoc._viewType !== CollectionViewType.Linear;
highlighting = highlighting && this.props.focus !== emptyFunction; // bcz: hack to turn off highlighting onsidebar panel documents. need to flag a document as not highlightable in a more direct way
diff --git a/src/client/views/search/FilterBox.tsx b/src/client/views/search/FilterBox.tsx
index 684f50766..d4c9e67fb 100644
--- a/src/client/views/search/FilterBox.tsx
+++ b/src/client/views/search/FilterBox.tsx
@@ -33,7 +33,7 @@ export enum Keys {
export class FilterBox extends React.Component {
static Instance: FilterBox;
- public _allIcons: string[] = [DocumentType.AUDIO, DocumentType.COL, DocumentType.IMG, DocumentType.LINK, DocumentType.PDF, DocumentType.TEXT, DocumentType.VID, DocumentType.WEB, DocumentType.TEMPLATE];
+ public _allIcons: string[] = [DocumentType.AUDIO, DocumentType.COL, DocumentType.IMG, DocumentType.LINK, DocumentType.PDF, DocumentType.TEXT, DocumentType.VID, DocumentType.WEB];
//if true, any keywords can be used. if false, all keywords are required.
//this also serves as an indicator if the word status filter is applied
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index be13dae03..9bd42b516 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -234,7 +234,7 @@ export class SearchBox extends React.Component {
y += 300;
}
}
- return Docs.Create.TreeDocument(docs, { _width: 200, _height: 400, backgroundColor: "grey", title: `Search Docs: "${this._searchString}"` });
+ return Docs.Create.TreeDocument(docs, { _width: 200, _height: 400, title: `Search Docs: "${this._searchString}"` });
}
@action.bound
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index d09837d96..930b021a4 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -227,8 +227,7 @@ export class CurrentUserUtils {
// Finally, setup the list of buttons to display in the sidebar
doc.sidebarButtons = Docs.Create.StackingDocument([doc.SearchBtn as Doc, doc.LibraryBtn as Doc, doc.ToolsBtn as Doc], {
_width: 500, _height: 80, boxShadow: "0 0", sectionFilter: "title", hideHeadings: true, ignoreClick: true,
- backgroundColor: "rgb(100, 100, 100)", _chromeStatus: "disabled", title: "library stack",
- _yMargin: 10,
+ _chromeStatus: "disabled", title: "library stack", backgroundColor: "dimGray",
});
}