From 95df27f9083ebf3f1ba8da2ca389b7b7e8d31522 Mon Sep 17 00:00:00 2001 From: Hannah Chow Date: Tue, 9 Apr 2019 18:37:43 -0400 Subject: fixed the stupid bottom left menu --- src/client/views/Main.scss | 66 ++++++++++++++++++++++++++++------------------ 1 file changed, 40 insertions(+), 26 deletions(-) (limited to 'src/client/views/Main.scss') diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss index fe7f007b0..6139f4113 100644 --- a/src/client/views/Main.scss +++ b/src/client/views/Main.scss @@ -1,5 +1,6 @@ @import "global_variables"; @import "nodeModuleOverrides"; + html, body { width: 100%; @@ -7,9 +8,9 @@ body { overflow: auto; font-family: $sans-serif; margin: 0; - position:absolute; + position: absolute; top: 0; - left:0; + left: 0; } #dash-title { @@ -42,7 +43,7 @@ h1 { } .jsx-parser { - width:100% + width: 100% } p { @@ -114,6 +115,7 @@ button:hover { position: absolute; bottom: 62px; left: 24px; + .toolbar-button { display: block; margin-bottom: 10px; @@ -123,8 +125,9 @@ button:hover { // add nodes menu. Note that the + button is actually an input label, not an actual button. #add-nodes-menu { position: absolute; - bottom: 24px; + bottom: 22px; left: 24px; + label { background: $dark-color; color: $light-color; @@ -137,61 +140,71 @@ button:hover { cursor: pointer; transition: transform 0.2s; } + label p { padding-left: 10.5px; - padding-top: 3px; } + label:hover { background: $main-accent; transform: scale(1.15); } + input { display: none; } + input:not(:checked)~#add-options-content { display: none; } + input:checked~label { transform: rotate(45deg); transition: transform 0.5s; cursor: pointer; } } + #root { overflow: visible; } + #main-div { - width:100%; - height:100%; - position:absolute; + width: 100%; + height: 100%; + position: absolute; top: 0; - left:0; + left: 0; overflow: scroll; } + .mainDiv-textInput { - background:pink; - width: 200px; - height: 200px; - position:absolute; - overflow: visible; + background: pink; + width: 200px; + height: 200px; + position: absolute; + overflow: visible; + top: 0; + left: 0; + + .formattedTextBox-cont { + background: pink; + width: 100%; + height: 100%; + position: absolute; top: 0; left: 0; - .formattedTextBox-cont { - background:pink; - width: 100%; - height: 100%; - position:absolute; - top: 0; - left: 0; } } + #mainContent-div { - width:100%; - height:100%; - position:absolute; + width: 100%; + height: 100%; + position: absolute; top: 0; - left:0; + left: 0; } + #add-options-content { display: table; opacity: 1; @@ -205,7 +218,8 @@ button:hover { ul#add-options-list { list-style: none; - padding: 0; + padding: 5 0 0 0; + li { display: inline-block; padding: 0; -- cgit v1.2.3-70-g09d2 From af2e5dbf49e0e82d76f267c681761968d4bafc62 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sat, 4 May 2019 23:03:49 -0400 Subject: fixed tree view. added non-data keys. --- src/client/views/Main.scss | 1 + .../views/collections/CollectionTreeView.scss | 17 +++++++--- .../views/collections/CollectionTreeView.tsx | 37 ++++++++++++++-------- src/new_fields/Doc.ts | 2 +- 4 files changed, 38 insertions(+), 19 deletions(-) (limited to 'src/client/views/Main.scss') diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss index cbf920793..5c5c252e9 100644 --- a/src/client/views/Main.scss +++ b/src/client/views/Main.scss @@ -182,6 +182,7 @@ button:hover { top: 0; left: 0; overflow: scroll; + z-index: 1; } #mainContent-div { width: 100%; diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss index 19d4abc05..6ce13cf56 100644 --- a/src/client/views/collections/CollectionTreeView.scss +++ b/src/client/views/collections/CollectionTreeView.scss @@ -33,9 +33,10 @@ } .bullet { - position: absolute; - width: 1.5em; - display: inline-block; + float:left; + position: relative; + width: 15px; + display: block; color: $intermediate-color; margin-top: 3px; transform: scale(1.3,1.3); @@ -50,7 +51,7 @@ .docContainer { margin-left: 10px; display: block; - width: max-content; + width:100%;//width: max-content; } .docContainer:hover { @@ -59,6 +60,9 @@ // width: auto; } } + .editableView-container { + font-weight: bold; + } .delete-button { color: $intermediate-color; @@ -67,4 +71,9 @@ // margin-top: 3px; display: inline; } + + .collectionTreeView-keyHeader { + font-style: italic; + font-size: 8pt; + } } \ No newline at end of file diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index b67d6f965..17109508d 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -18,6 +18,8 @@ import { Main } from '../Main'; import { CurrentUserUtils } from '../../../server/authentication/models/current_user_utils'; import { CollectionDockingView } from './CollectionDockingView'; import { DocumentManager } from '../../util/DocumentManager'; +import { Utils } from '../../../Utils'; +import { List } from '../../../new_fields/List'; export interface TreeViewProps { @@ -122,17 +124,25 @@ class TreeView extends React.Component { render() { let bulletType = BulletType.List; - let contentElement: JSX.Element | null = (null); - var children = Cast(this.props.document.data, listSpec(Doc)); - if (children) { // add children for a collection - if (!this._collapsed) { - bulletType = BulletType.Collapsible; - contentElement =
    - {TreeView.GetChildElements(children, this.remove, this.move, this.props.dropAction)} -
; - } - else bulletType = BulletType.Collapsed; + let contentElement: (JSX.Element | null)[] = []; + let keys = Array.from(Object.keys(this.props.document)); + if (this.props.document.proto instanceof Doc) { + keys.push(...Array.from(Object.keys(this.props.document.proto))); } + keys.map(key => { + let docList = Cast(this.props.document[key], listSpec(Doc)); + if (docList instanceof List && docList.length && docList[0] instanceof Doc) { + if (!this._collapsed) { + bulletType = BulletType.Collapsible; + contentElement.push(
    + {(key === "data") ? (null) : + {key}} + {TreeView.GetChildElements(docList, key !== "data", this.remove, this.move, this.props.dropAction)} +
); + } else + bulletType = BulletType.Collapsed; + } + }); return
{
; } - public static GetChildElements(docs: Doc[], remove: ((doc: Doc) => void), move: DragManager.MoveFunction, dropAction: dropActionType) { - return docs.filter(child => !child.excludeFromLibrary).filter(doc => FieldValue(doc)).map(child => + public static GetChildElements(docs: Doc[], allowMinimized: boolean, remove: ((doc: Doc) => void), move: DragManager.MoveFunction, dropAction: dropActionType) { + return docs.filter(child => !child.excludeFromLibrary && (allowMinimized || !child.isMinimized)).filter(doc => FieldValue(doc)).map(child => ); } } @@ -168,13 +178,12 @@ export class CollectionTreeView extends CollectionSubView(Document) { } } render() { - trace(); const children = this.children; let dropAction = StrCast(this.props.Document.dropAction, "alias") as dropActionType; if (!children) { return (null); } - let childElements = TreeView.GetChildElements(children, this.remove, this.props.moveDocument, dropAction); + let childElements = TreeView.GetChildElements(children, false, this.remove, this.props.moveDocument, dropAction); return (
{ let linkDoc = Docs.TextDocument({ width: 100, height: 30, borderRounding: -1 }); //let linkDoc = new Doc; - linkDoc.title = "-link name-"; + linkDoc.proto!.title = "-link name-"; linkDoc.linkDescription = ""; linkDoc.linkTags = "Default"; -- cgit v1.2.3-70-g09d2