From 58b780563c7fc4a1496f5c676f2d14faddb096e0 Mon Sep 17 00:00:00 2001 From: Melissa Zhang Date: Fri, 3 Jul 2020 17:32:40 -0700 Subject: merge with master --- .../collectionFreeForm/CollectionFreeFormView.tsx | 7 ++-- .../collectionFreeForm/InkOptionsMenu.scss | 39 +++++++++++++++++++++- .../collectionFreeForm/InkOptionsMenu.tsx | 6 +++- 3 files changed, 46 insertions(+), 6 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 546a4307c..21b0473c9 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -602,7 +602,6 @@ export class CollectionFreeFormView extends CollectionSubView { // bcz: theres should be a better way of doing these than referencing these static instances directly MarqueeOptionsMenu.Instance?.fadeOut(true);// I think it makes sense for the marquee menu to go away when panned. -syip2 - PDFMenu.Instance.fadeOut(true); const [dx, dy] = this.getTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY); this.setPan((this.Document._panX || 0) - dx, (this.Document._panY || 0) - dy, undefined, true); @@ -870,7 +869,7 @@ export class CollectionFreeFormView extends CollectionSubView boolean) => { const state = HistoryUtil.getState(); - // TODO This technically isn't correct if type !== "doc", as + // TODO This technically isn't correct if type !== "doc", as // currently nothing is done, but we should probably push a new state if (state.type === "doc" && this.Document._panX !== undefined && this.Document._panY !== undefined) { const init = state.initializers![this.Document[Id]]; @@ -1204,7 +1203,7 @@ export class CollectionFreeFormView extends CollectionSubView { - if (this.props.annotationsKey) return; + if (this.props.annotationsKey || !ContextMenu.Instance) return; const appearance = ContextMenu.Instance.findByDescription("Appearance..."); const appearanceItems = appearance && "subitems" in appearance ? appearance.subitems : []; @@ -1453,4 +1452,4 @@ class CollectionFreeFormViewPannableContents extends React.Component; } -} \ No newline at end of file +} diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss index a9fab4c1e..753de6bef 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss @@ -9,7 +9,6 @@ height: 100%; } - } .sketch-picker { @@ -36,6 +35,44 @@ background: #323232; display: block; + } +} + +@media only screen and (max-device-width: 480px) { + .antimodeMenu-button { + font-size: 50%; + + .color-preview { + width: 100%; + height: 100%; + } + + } + + .sketch-picker { + background: #323232; + + .flexbox-fit { + background: #323232; + } + } + + .btn-group { + display: grid; + grid-template-columns: auto auto; + /* Make the buttons appear below each other */ + } + + .btn2-group { + display: block; + background: #323232; + grid-template-columns: auto; + /* Make the buttons appear below each other */ + .antimodeMenu-button { + background: #323232; + display: block; + font-size: 50%; + } } } \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx index f1032adaa..f47fca6ac 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx @@ -20,6 +20,8 @@ import { faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSubscr library.add(faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper, faCaretDown, faPalette, faArrowsAlt, faHighlighter, faLink, faPaintRoller, faBars, faFillDrip, faBrush, faPenNib, faShapes, faArrowLeft, faEllipsisH, faBezierCurve); + + @observer export default class InkOptionsMenu extends AntimodeMenu { static Instance: InkOptionsMenu; @@ -42,6 +44,8 @@ export default class InkOptionsMenu extends AntimodeMenu { @observable _dashBtn = false; @observable _shapeBtn = false; + + constructor(props: Readonly<{}>) { super(props); InkOptionsMenu.Instance = this; @@ -325,4 +329,4 @@ Scripting.addGlobal(function activatePen(penBtn: any) { Doc.SetSelectedTool(InkTool.None); InkOptionsMenu.Instance.fadeOut(true); } -}); \ No newline at end of file +}); -- cgit v1.2.3-70-g09d2 From 1713f5415294b996e6dbbe9ca45f0f4511c69824 Mon Sep 17 00:00:00 2001 From: Melissa Zhang Date: Mon, 3 Aug 2020 14:52:59 -0700 Subject: linking bug fixes, WebDocument size fixes --- src/client/apis/hypothesis/HypothesisUtils.ts | 111 +++++++++++++++++---- src/client/views/MainView.tsx | 43 +------- .../collections/collectionFreeForm/MarqueeView.tsx | 2 +- src/client/views/linking/LinkMenuItem.tsx | 7 +- src/client/views/nodes/DocumentLinksButton.tsx | 38 +------ 5 files changed, 103 insertions(+), 98 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm') diff --git a/src/client/apis/hypothesis/HypothesisUtils.ts b/src/client/apis/hypothesis/HypothesisUtils.ts index 855964bf6..5c6e4d31d 100644 --- a/src/client/apis/hypothesis/HypothesisUtils.ts +++ b/src/client/apis/hypothesis/HypothesisUtils.ts @@ -1,15 +1,45 @@ import { StrCast, Cast } from "../../../fields/Types"; import { SearchUtil } from "../../util/SearchUtil"; -import { action } from "mobx"; +import { action, runInAction } from "mobx"; import { Doc } from "../../../fields/Doc"; import { DocumentType } from "../../documents/DocumentTypes"; -import { Docs } from "../../documents/Documents"; +import { Docs, DocUtils } from "../../documents/Documents"; import { SelectionManager } from "../../util/SelectionManager"; +import { WebField } from "../../../fields/URLField"; +import { DocumentManager } from "../../util/DocumentManager"; +import { DocumentLinksButton } from "../../views/nodes/DocumentLinksButton"; +import { LinkManager } from "../../util/LinkManager"; +import { TaskCompletionBox } from "../../views/nodes/TaskCompletedBox"; +import { Utils } from "../../../Utils"; +import { LinkDescriptionPopup } from "../../views/nodes/LinkDescriptionPopup"; +import { Id } from "../../../fields/FieldSymbols"; export namespace Hypothesis { + // Return web doc with the given uri, or create and create a new doc with the given uri + export const getSourceWebDoc = async (uri: string) => { + const currentDoc = SelectionManager.SelectedDocuments()[0].props.Document; + console.log(Cast(currentDoc.data, WebField)?.url.href === uri, uri, Cast(currentDoc.data, WebField)?.url.href); + if (Cast(currentDoc.data, WebField)?.url.href === uri) return currentDoc; // always check first whether the current doc is the source, only resort to Search otherwise + + const results: Doc[] = []; + await SearchUtil.Search("web", true).then(action(async (res: SearchUtil.DocSearchResult) => { + const docs = await Promise.all(res.docs.map(async doc => (await Cast(doc.extendsDoc, Doc)) || doc)); + const filteredDocs = docs.filter(doc => + doc.author === Doc.CurrentUserEmail && doc.type === DocumentType.WEB && doc.data + ); + filteredDocs.forEach(doc => console.log("web docs:", doc.title, Cast(doc.data, WebField)?.url.href)); + filteredDocs.forEach(doc => { uri === Cast(doc.data, WebField)?.url.href && results.push(doc); }); // TODO check history? imperfect matches? + })); + + results.forEach(doc => console.log(doc.title, StrCast(doc.data))); + + return results.length ? results[0] : Docs.Create.WebDocument(uri, { _nativeWidth: 850, _nativeHeight: 962, _width: 600, UseCors: true }); // create and return a new Web doc with given uri if no matching docs are found + }; + // Send Hypothes.is client request to edit an annotation to add a Dash hyperlink export const makeLink = async (title: string, url: string, annotationId: string) => { + console.log("SEND addLink"); const newHyperlink = `[${title}\n](${url})`; document.dispatchEvent(new CustomEvent<{ newHyperlink: string, id: string }>("addLink", { detail: { newHyperlink: newHyperlink, id: annotationId }, @@ -25,22 +55,56 @@ export namespace Hypothesis { })); }; - // Construct an URL which will automatically scroll the web page to a specific annotation's position - export const makeAnnotationUrl = (annotationId: string, baseUrl: string) => { - console.log("baseUrl", baseUrl, annotationId); - return `${baseUrl}#annotations:${annotationId}`; - }; + // listen for event from Hypothes.is plugin to link an annotation to Dash + export const linkListener = async (e: any) => { + const annotationId: string = e.detail.id; + const annotationUri: string = e.detail.uri; + const sourceDoc: Doc = await getSourceWebDoc(annotationUri); + + if (!DocumentLinksButton.StartLink) { // start link if there were none already started + runInAction(() => { + DocumentLinksButton.AnnotationId = annotationId; + DocumentLinksButton.AnnotationUri = annotationUri; + DocumentLinksButton.StartLink = sourceDoc; + }); + } else if (!Doc.AreProtosEqual(sourceDoc, DocumentLinksButton.StartLink)) { // if a link has already been started, complete the link to the sourceDoc + console.log("completing link", sourceDoc.title); + runInAction(() => { + DocumentLinksButton.AnnotationId = annotationId; + DocumentLinksButton.AnnotationUri = annotationUri; + }); + + const linkDoc = DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink }, { doc: sourceDoc }, DocumentLinksButton.AnnotationId ? "hypothes.is annotation" : "long drag"); + LinkManager.currentLink = linkDoc; - // Extract username from Hypothe.is's userId format - export const extractUsername = (userid: string) => { - const regex = new RegExp('(?<=\:)(.*?)(?=\@)/'); - return regex.exec(userid)![0]; + Doc.GetProto(linkDoc as Doc).linksToAnnotation = true; + Doc.GetProto(linkDoc as Doc).annotationId = DocumentLinksButton.AnnotationId; + Doc.GetProto(linkDoc as Doc).annotationUri = DocumentLinksButton.AnnotationUri; + makeLink(StrCast(DocumentLinksButton.StartLink.title), Utils.prepend("/doc/" + DocumentLinksButton.StartLink[Id]), StrCast(DocumentLinksButton.AnnotationId)); // update and link placeholder annotation + + runInAction(() => { + if (linkDoc) { + TaskCompletionBox.textDisplayed = "Link Created"; + TaskCompletionBox.popupX = screenX; + TaskCompletionBox.popupY = screenY - 133; + TaskCompletionBox.taskCompleted = true; + + if (LinkDescriptionPopup.showDescriptions === "ON" || !LinkDescriptionPopup.showDescriptions) { + LinkDescriptionPopup.popupX = screenX; + LinkDescriptionPopup.popupY = screenY - 100; + LinkDescriptionPopup.descriptionPopup = true; + } + setTimeout(action(() => { TaskCompletionBox.taskCompleted = false; }), 2500); + } + }); + } }; - // Return corres - export const getSourceWebDoc = async (uri: string) => { + // Return web doc with the given uri, or create and create a new doc with the given uri + export const getSourceWebDocView = async (uri: string) => { const currentDoc = SelectionManager.SelectedDocuments()[0].props.Document; - if (StrCast(currentDoc.data) === uri) return currentDoc; // always check first whether the current doc is the source, only resort to Search otherwise + console.log(Cast(currentDoc.data, WebField)?.url.href === uri, uri, Cast(currentDoc.data, WebField)?.url.href); + if (Cast(currentDoc.data, WebField)?.url.href === uri) return currentDoc; // always check first whether the current doc is the source, only resort to Search otherwise const results: Doc[] = []; await SearchUtil.Search("web", true).then(action(async (res: SearchUtil.DocSearchResult) => { @@ -48,12 +112,23 @@ export namespace Hypothesis { const filteredDocs = docs.filter(doc => doc.author === Doc.CurrentUserEmail && doc.type === DocumentType.WEB && doc.data ); - filteredDocs.forEach(doc => { uri === StrCast(doc.data) && results.push(doc); }); // TODO check history? imperfect matches? + filteredDocs.forEach(doc => console.log("web docs:", doc.title, Cast(doc.data, WebField)?.url.href)); + filteredDocs.forEach(doc => { uri === Cast(doc.data, WebField)?.url.href && results.push(doc); }); // TODO check history? imperfect matches? })); - results.forEach(doc => console.log(doc.title, StrCast(doc.data))); + results.forEach(doc => { + const docView = DocumentManager.Instance.getFirstDocumentView(doc); + if (docView) { + console.log(doc.title, StrCast(doc.data)); + return docView; + } + }); + + return undefined; + }; - return results.length ? results[0] : Docs.Create.WebDocument(uri, { _nativeWidth: 850, _nativeHeight: 962, _width: 600 }); // create and return a new Web doc with given uri if no matching docs are found + export const createInvisibleDoc = (uri: string) => { + const newDoc = Docs.Create.WebDocument(uri, { _nativeWidth: 0, _nativeHeight: 0, _width: 0, UseCors: true }); }; export const scrollToAnnotation = (annotationId: string) => { @@ -71,7 +146,7 @@ export namespace Hypothesis { detail: annotationId, bubbles: true })); - }, 200); + }, 250); document.addEventListener('scrollSuccess', onSuccess); // listen for success message from client setTimeout(() => !success && clearTimeout(interval), 10000); // give up if no success after 10s diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 954b8b998..5c34233b4 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -104,47 +104,7 @@ export class MainView extends React.Component { } }); }); - document.addEventListener("linkAnnotationToDash", async (e: any) => { // listen for event from Hypothes.is plugin to link an annotation to Dash - const annotationId = e.detail.id; - const annotationUri = e.detail.uri; - const sourceDoc = await Hypothesis.getSourceWebDoc(annotationUri); - console.log("sourceDoc: ", sourceDoc.title); - - if (!DocumentLinksButton.StartLink) { // starts link only if there are none already started (else, a listener in DocumentLinksButton will handle link completion) - runInAction(() => { - DocumentLinksButton.AnnotationId = annotationId; - DocumentLinksButton.AnnotationUri = annotationUri; - DocumentLinksButton.StartLink = sourceDoc; - }); - } else { // if a link's already started in Dash, send event to DocumentLinksButton tofinish the link to the annotation - document.dispatchEvent(new CustomEvent<{ id: string, uri: string, sourceDoc: Doc }>("completeLinkToAnnotation", { - detail: { - id: annotationId, - uri: annotationUri, - sourceDoc: sourceDoc - }, - bubbles: true - })); - } - }); - - // reaction(() => SelectionManager.SelectedDocuments(), selected => { - // console.log("selection changed"); - // const selectedWebDocs = selected.map(docView => docView.props.Document).filter(doc => doc.type === DocumentType.WEB); - // const urls = selectedWebDocs.map(doc => Cast(doc.data, WebField)?.url.href).filter(url => url !== undefined); - // console.log("urls", urls); - - // const frame = document.getElementById('hyp_sidebar') as HTMLIFrameElement; - // console.log("contentwindow?", frame.contentDocument); - // if (frame.contentWindow) { - // frame.contentWindow.postMessage("hello sidebar", window.origin); - // } - - // document.dispatchEvent(new CustomEvent('showAnnotations', { - // detail: urls, - // bubbles: true - // })); - // }); + document.addEventListener("linkAnnotationToDash", Hypothesis.linkListener); } componentWillUnMount() { @@ -152,6 +112,7 @@ export class MainView extends React.Component { window.removeEventListener("pointerdown", this.globalPointerDown); window.removeEventListener("pointerup", this.globalPointerUp); window.removeEventListener("paste", KeyManager.Instance.paste as any); + document.removeEventListener("linkAnnotationToDash", Hypothesis.linkListener); } constructor(props: Readonly<{}>) { diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 764758eee..c3d81bda4 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -74,7 +74,7 @@ export class MarqueeView extends React.Component { const textDoc = Docs.Create.WebDocument(`https://bing.com/search?q=${str}`, { - _width: 200, x, y, _nativeHeight: 962, _nativeWidth: 800, isAnnotating: false, + _width: 200, x, y, _nativeHeight: 962, _nativeWidth: 850, isAnnotating: false, title: "bing", UseCors: true }); this.props.addDocTab(textDoc, "onRight"); diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index 8503bcbeb..40a16961a 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -11,7 +11,7 @@ import { ContextMenu } from '../ContextMenu'; import './LinkMenuItem.scss'; import React = require("react"); import { DocumentManager } from '../../util/DocumentManager'; -import { setupMoveUpEvents, emptyFunction, Utils } from '../../../Utils'; +import { setupMoveUpEvents, emptyFunction, Utils, simulateMouseClick } from '../../../Utils'; import { DocumentView } from '../nodes/DocumentView'; import { DocumentLinksButton } from '../nodes/DocumentLinksButton'; import { LinkDocPreview } from '../nodes/LinkDocPreview'; @@ -20,6 +20,7 @@ import { Id } from '../../../fields/FieldSymbols'; import { Tooltip } from '@material-ui/core'; import { DocumentType } from '../../documents/DocumentTypes'; import { undoBatch } from '../../util/UndoManager'; +import { WebField } from '../../../fields/URLField'; library.add(faEye, faEdit, faTimes, faArrowRight, faChevronDown, faChevronUp, faPencilAlt, faEyeSlash); @@ -156,7 +157,7 @@ export class LinkMenuItem extends React.Component { const linkDoc = this.props.linkDoc; if (linkDoc.followLinkLocation === "openExternal" && this.props.destinationDoc.type === DocumentType.WEB) { - window.open(Hypothesis.makeAnnotationUrl(StrCast(linkDoc.annotationId), StrCast(linkDoc.annotationUri)), '_blank'); + window.open(`${StrCast(linkDoc.annotationUri)}#annotations:${StrCast(linkDoc.annotationId)}`, '_blank'); return; } @@ -244,7 +245,7 @@ export class LinkMenuItem extends React.Component {

- {this.props.linkDoc.linksToAnnotation ? "Annotation in" : ""} {title} + {this.props.linkDoc.linksToAnnotation && Cast(this.props.destinationDoc.data, WebField)?.url.href === this.props.linkDoc.annotationUri ? "Annotation in" : ""} {title}

{this.props.linkDoc.description !== "" ?

diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index be7c3e135..3736cd3b2 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -40,35 +40,6 @@ export class DocumentLinksButton extends React.Component { - const annotationId: string = e.detail.id; - const annotationUri: string = e.detail.uri; - const sourceDoc: Doc = e.detail.sourceDoc; - - // DocumentLinksButton.StartLink && this.props.View.props.Document.type === DocumentType.WEB && console.log( - // sourceDoc.title, - // this.props.View.props.Document.title, - // sourceDoc.data, - // this.props.View.props.Document.data, - // Doc.AreProtosEqual(sourceDoc, this.props.View.props.Document)); - - if (Doc.AreProtosEqual(sourceDoc, this.props.View.props.Document) && sourceDoc !== DocumentLinksButton.StartLink) { - DocumentLinksButton.AnnotationId = annotationId; - DocumentLinksButton.AnnotationUri = annotationUri; - this.finishLinkClick(500, 100); - console.log("completed link from annotation"); - } - } - @action @undoBatch onLinkButtonMoved = (e: PointerEvent) => { if (this.props.InMenu && this.props.StartLink) { @@ -181,15 +152,12 @@ export class DocumentLinksButton extends React.Component DocumentLinksButton.StartLink!._link = this.props.View._link = undefined), 0); LinkManager.currentLink = linkDoc; - // if the link is to a Hypothes.is annotation - if (DocumentLinksButton.AnnotationId && DocumentLinksButton.AnnotationUri) { - // figure out whether the StartLink doc or the current doc is the one to be linked to the annotation (the one NOT containing the annotation) - const toBeLinked: Doc = DocumentLinksButton.AnnotationUri === Cast(DocumentLinksButton.StartLink.data, WebField)?.url.href ? - this.props.View.props.Document : DocumentLinksButton.StartLink; + if (DocumentLinksButton.AnnotationId && DocumentLinksButton.AnnotationUri) { // if linking from a Hypothes.is annotation + const targetDoc = this.props.View.props.Document; Doc.GetProto(linkDoc as Doc).linksToAnnotation = true; Doc.GetProto(linkDoc as Doc).annotationId = DocumentLinksButton.AnnotationId; Doc.GetProto(linkDoc as Doc).annotationUri = DocumentLinksButton.AnnotationUri; - Hypothesis.makeLink(StrCast(toBeLinked.title), Utils.prepend("/doc/" + toBeLinked[Id]), DocumentLinksButton.AnnotationId); // update and link placeholder annotation + Hypothesis.makeLink(StrCast(targetDoc.title), Utils.prepend("/doc/" + targetDoc[Id]), DocumentLinksButton.AnnotationId); // edit annotation to add a Dash hyperlink to the linked doc } runInAction(() => { -- cgit v1.2.3-70-g09d2 From e1ad098f0756f7a11d4a43bdc47499c8cb4b0842 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Thu, 6 Aug 2020 01:30:41 -0500 Subject: scrolling bugs for properties --- .../collectionFreeForm/PropertiesView.scss | 60 +++++++++++----------- .../collectionFreeForm/PropertiesView.tsx | 28 +++++----- 2 files changed, 43 insertions(+), 45 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm') diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index 5b41db90e..ce0eee744 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -23,8 +23,9 @@ height: 20px; padding-left: 38px; margin-top: -5px; - right: 19; - position: absolute; + align-items: flex-end; + margin-left: auto; + margin-right: 10px; &:hover { color: grey; @@ -66,9 +67,9 @@ .propertiesView-settings-title-icon { float: right; - right: 0; - position: absolute; - margin-left: 2px; + justify-items: right; + align-items: flex-end; + margin-left: auto; margin-right: 9px; &:hover { @@ -104,9 +105,9 @@ .propertiesView-sharing-title-icon { float: right; - right: 0; - position: absolute; - margin-left: 2px; + justify-items: right; + align-items: flex-end; + margin-left: auto; margin-right: 9px; &:hover { @@ -141,9 +142,9 @@ .propertiesView-appearance-title-icon { float: right; - right: 0; - position: absolute; - margin-left: 2px; + justify-items: right; + align-items: flex-end; + margin-left: auto; margin-right: 9px; &:hover { @@ -178,9 +179,9 @@ .propertiesView-transform-title-icon { float: right; - right: 0; - position: absolute; - margin-left: 2px; + justify-items: right; + align-items: flex-end; + margin-left: auto; margin-right: 9px; &:hover { @@ -266,9 +267,8 @@ .propertiesView-sharingTable-item-permission { display: flex; - right: 34; - float: right; - position: absolute; + align-items: flex-end; + margin-left: auto; .permissions-select { z-index: 1; @@ -307,25 +307,18 @@ cursor: pointer; } - .propertiesView-fields-title-name { - font-size: 12.5px; - font-weight: bold; - white-space: nowrap; - width: 35px; - display: flex; - } - .propertiesView-fields-title-icon { float: right; - right: 0; - position: absolute; - margin-left: 2px; + justify-items: right; + align-items: flex-end; + margin-left: auto; margin-right: 9px; &:hover { cursor: pointer; } } + } .propertiesView-fields-checkbox { @@ -388,9 +381,9 @@ .propertiesView-layout-title-icon { float: right; - right: 0; - position: absolute; - margin-left: 2px; + justify-items: right; + align-items: flex-end; + margin-left: auto; margin-right: 9px; &:hover { @@ -674,4 +667,9 @@ &:hover { border: 0.75px solid rgb(122, 28, 28); } +} + + +.properties-flyout { + grid-column: 2/4; } \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 89f48fc65..3b449d941 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -598,16 +598,18 @@ export class PropertiesView extends React.Component { set colorStk(value) { value && (this._lastLine = value); this.selectedDoc && (this.selectedDoc.color = value ? value : undefined); } colorButton(value: string, type: string, setter: () => {}) { - return -

setter()))}> -
- {value === "" || value === "transparent" ?

☒

: ""} -
- ; + return
+ +
setter()))}> +
+ {value === "" || value === "transparent" ?

☒

: ""} +
+ +
; } @@ -844,11 +846,9 @@ export class PropertiesView extends React.Component {
runInAction(() => { this.openFields = !this.openFields; })} style={{ backgroundColor: this.openFields ? "black" : "" }}> -
- Fields {"&"} Tags + Fields {"&"} Tags
- -
+
{!novice && this.openFields ?
-- cgit v1.2.3-70-g09d2 From ecadf91fa662a45b7e0c2302f9423a2032589909 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Thu, 6 Aug 2020 11:21:33 -0500 Subject: ink fix --- src/client/util/SettingsManager.tsx | 2 +- .../collectionFreeForm/PropertiesView.tsx | 37 ++++++++++++++-------- 2 files changed, 24 insertions(+), 15 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm') diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 155c7f60c..8124b7676 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -257,7 +257,7 @@ export default class SettingsManager extends React.Component<{}> { ; })} -
; +
; return preferencesContent; diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 3b449d941..8aeb80ace 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -83,6 +83,8 @@ export class PropertiesView extends React.Component { @computed get isInk() { return this.selectedDoc?.type === DocumentType.INK; } + @observable scrolling: boolean = true; + @action rtfWidth = () => { if (this.selectedDoc) { @@ -598,21 +600,28 @@ export class PropertiesView extends React.Component { set colorStk(value) { value && (this._lastLine = value); this.selectedDoc && (this.selectedDoc.color = value ? value : undefined); } colorButton(value: string, type: string, setter: () => {}) { - return
- -
setter()))}> -
- {value === "" || value === "transparent" ?

☒

: ""} -
- + // return
this.changeScrolling(false)} + // onPointerLeave={e => this.changeScrolling(true)}> + // + return
setter()))}> +
+ {value === "" || value === "transparent" ?

☒

: ""}
; + // + //
; } + @action + changeScrolling = (scroll: boolean) => { + console.log(scroll); + this.scrolling = scroll; + } + @undoBatch @action switchStk = (color: ColorState) => { @@ -654,8 +663,8 @@ export class PropertiesView extends React.Component {
{this.lineButton}
- {/* {this._fillBtn ? this.fillPicker : ""} - {this._lineBtn ? this.linePicker : ""} */} + {this._fillBtn ? this.fillPicker : ""} + {this._lineBtn ? this.linePicker : ""}
; } @@ -771,7 +780,7 @@ export class PropertiesView extends React.Component { if (this.selectedDoc && !this.isPres) { return
Properties -- cgit v1.2.3-70-g09d2 From 4b48414585910fc83e1599913f8a23672f895995 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Thu, 6 Aug 2020 11:29:42 -0500 Subject: last ink fix --- .../views/collections/collectionFreeForm/PropertiesView.tsx | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm') diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 8aeb80ace..6dcfdf161 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -83,8 +83,6 @@ export class PropertiesView extends React.Component { @computed get isInk() { return this.selectedDoc?.type === DocumentType.INK; } - @observable scrolling: boolean = true; - @action rtfWidth = () => { if (this.selectedDoc) { @@ -616,12 +614,6 @@ export class PropertiesView extends React.Component { } - @action - changeScrolling = (scroll: boolean) => { - console.log(scroll); - this.scrolling = scroll; - } - @undoBatch @action switchStk = (color: ColorState) => { @@ -780,7 +772,7 @@ export class PropertiesView extends React.Component { if (this.selectedDoc && !this.isPres) { return
Properties -- cgit v1.2.3-70-g09d2 From 1e84a64ffb1f1933eb7e506fa133835fdb1a0972 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Thu, 6 Aug 2020 23:39:53 -0500 Subject: finished all properties UI changes --- src/client/views/collections/CollectionView.tsx | 2 +- .../views/collections/collectionFreeForm/PropertiesView.scss | 6 +++--- src/client/views/collections/collectionFreeForm/PropertiesView.tsx | 7 ++----- 3 files changed, 6 insertions(+), 9 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm') diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 4d1cb670c..837ae7e86 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -594,7 +594,7 @@ export class CollectionView extends Touchable + style={{ right: this.facetWidth() - 1, top: this.props.Document._viewType === CollectionViewType.Docking ? "25%" : "60%" }} /> } {Doc.UserDoc()?.noviceMode || this.facetWidth() < 10 ? (null) : this.filterView}
); diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index c952dc358..aee28366a 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -437,9 +437,9 @@ .propertiesView-presTrails-title-icon { float: right; - right: 0; - position: absolute; - margin-left: 2px; + justify-items: right; + align-items: flex-end; + margin-left: auto; margin-right: 9px; &:hover { diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 4610c0143..2d76e109c 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -950,12 +950,9 @@ export class PropertiesView extends React.Component { } if (this.isPres) { const selectedItem: boolean = PresBox.Instance._selectedArray.length > 0; - return
-
+ return
+
Presentation -
- -
{this.editableTitle} -- cgit v1.2.3-70-g09d2 From 625882842ca6af7563983c52a22543469a0fa319 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Fri, 7 Aug 2020 00:58:58 -0500 Subject: smaller buttons and bug fix --- src/client/views/PropertiesButtons.scss | 18 +++++++++--------- src/client/views/PropertiesButtons.tsx | 2 +- .../collections/collectionFreeForm/PropertiesView.tsx | 2 +- src/client/views/nodes/FontIconBox.scss | 2 +- src/client/views/nodes/PresBox.tsx | 3 ++- 5 files changed, 14 insertions(+), 13 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm') diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss index 6199d34d0..8d9d56c9e 100644 --- a/src/client/views/PropertiesButtons.scss +++ b/src/client/views/PropertiesButtons.scss @@ -20,8 +20,8 @@ $linkGap : 3px; .propertiesButtons-linkButton-empty, .propertiesButtons-linkButton-nonempty { - height: 30px; - width: 32px; + height: 25px; + width: 29px; border-radius: 6px; pointer-events: auto; background-color: #121721; @@ -35,7 +35,7 @@ $linkGap : 3px; justify-content: center; align-items: center; margin-right: 10px; - margin-left: 3.5px; + margin-left: 4px; &:hover { background: $main-accent; @@ -68,7 +68,7 @@ $linkGap : 3px; padding-right: 5px; width: 25px; border-radius: 5px; - margin-right: 22px; + margin-right: 20px; margin-bottom: 8px; } @@ -76,9 +76,9 @@ $linkGap : 3px; background: #121721; color: white; font-size: 6px; - width: 40px; + width: 37px; padding: 3px; - height: 13px; + height: 12px; border-radius: 7px; text-transform: uppercase; text-align: center; @@ -86,8 +86,8 @@ $linkGap : 3px; } .propertiesButtons-linker { - height: 30px; - width: 32px; + height: 25px; + width: 29px; text-align: center; border-radius: 6px; pointer-events: auto; @@ -96,7 +96,7 @@ $linkGap : 3px; transition: 0.2s ease all; margin-right: 5px; padding-top: 5px; - margin-left: 3.5px; + margin-left: 4px; &:hover { background: $main-accent; diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index a905dc1e7..4255e5caa 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -259,7 +259,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { } }}> -
V
+
V
{"View"}
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 2d76e109c..5e9159dc2 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -52,7 +52,7 @@ export class PropertiesView extends React.Component { @computed get selectedDocumentView() { if (SelectionManager.SelectedDocuments().length) { return SelectionManager.SelectedDocuments()[0]; - } else if (PresBox.Instance._selectedArray.length) { + } else if (PresBox.Instance && PresBox.Instance._selectedArray.length) { return DocumentManager.Instance.getDocumentView(PresBox.Instance.rootDoc); } else { return undefined; } } diff --git a/src/client/views/nodes/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss index 9709e1dbd..6a540269e 100644 --- a/src/client/views/nodes/FontIconBox.scss +++ b/src/client/views/nodes/FontIconBox.scss @@ -60,7 +60,7 @@ .menuButton-icon-square { width: auto; - height: 32px; + height: 29px; padding: 4px; } diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 502fd51f3..b7af4683e 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -34,7 +34,8 @@ const PresBoxDocument = makeInterface(documentSchema); @observer export class PresBox extends ViewBoxBaseComponent(PresBoxDocument) { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(PresBox, fieldKey); } - static Instance: PresBox; + + public static Instance: PresBox; @observable _isChildActive = false; @observable _moveOnFromAudio: boolean = true; -- cgit v1.2.3-70-g09d2 From cdd96649cb4a32ee9991deb314c4bd14a8352a6f Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 7 Aug 2020 08:23:11 -0400 Subject: added novice mode entries for creator buttons. fixed screentransform for propertiesview preview. fixed other runtime errors. --- src/client/util/CurrentUserUtils.ts | 18 +++++----- .../collectionFreeForm/PropertiesView.tsx | 38 ++++++++++++++-------- 2 files changed, 35 insertions(+), 21 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 37ffcb78e..0ed03cebe 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -387,7 +387,7 @@ export class CurrentUserUtils { static creatorBtnDescriptors(doc: Doc): { title: string, toolTip: string, icon: string, drag?: string, ignoreClick?: boolean, - click?: string, ischecked?: string, activeInkPen?: Doc, backgroundColor?: string, dragFactory?: Doc + click?: string, ischecked?: string, activeInkPen?: Doc, backgroundColor?: string, dragFactory?: Doc, noviceMode?: boolean }[] { if (doc.emptyPresentation === undefined) { doc.emptyPresentation = Docs.Create.PresDocument(new List(), @@ -427,16 +427,16 @@ export class CurrentUserUtils { this.setupActiveMobileMenu(doc); } return [ - { toolTip: "Drag a collection", title: "Col", icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc }, - { toolTip: "Drag a web page", title: "Web", icon: "globe-asia", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyWebpage as Doc }, + { toolTip: "Drag a collection", title: "Col", icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc, noviceMode: true }, + { toolTip: "Drag a web page", title: "Web", icon: "globe-asia", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyWebpage as Doc, noviceMode: true }, { toolTip: "Drag a cat image", title: "Image", icon: "cat", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyImage as Doc }, - { toolTip: "Drag a comparison box", title: "Compare", icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc }, + { toolTip: "Drag a comparison box", title: "Compare", icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc, noviceMode: true }, { toolTip: "Drag a screengrabber", title: "Grab", icon: "photo-video", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScreenshot as Doc }, // { title: "Drag a webcam", title: "Cam", icon: "video", ignoreClick: true, drag: 'Docs.Create.WebCamDocument("", { _width: 400, _height: 400, title: "a test cam" })' }, - { toolTip: "Drag a audio recorder", title: "Audio", icon: "microphone", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyAudio as Doc }, - { toolTip: "Drag a button", title: "Button", icon: "bolt", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyButton as Doc }, + { toolTip: "Drag a audio recorder", title: "Audio", icon: "microphone", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyAudio as Doc, noviceMode: true }, + { toolTip: "Drag a button", title: "Button", icon: "bolt", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyButton as Doc, noviceMode: true }, - { toolTip: "Drag a presentation view", title: "Prezi", icon: "tv", click: 'openOnRight(Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true))', drag: `Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true)`, dragFactory: doc.emptyPresentation as Doc }, + { toolTip: "Drag a presentation view", title: "Prezi", icon: "tv", click: 'openOnRight(Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true))', drag: `Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true)`, dragFactory: doc.emptyPresentation as Doc, noviceMode: true }, { toolTip: "Drag a search box", title: "Query", icon: "search", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptySearch as Doc }, { toolTip: "Drag a scripting box", title: "Script", icon: "terminal", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScript as Doc }, // { title: "Drag an import folder", title: "Load", icon: "cloud-upload-alt", ignoreClick: true, drag: 'Docs.Create.DirectoryImportDocument({ title: "Directory Import", _width: 400, _height: 400 })' }, @@ -465,7 +465,7 @@ export class CurrentUserUtils { } } const buttons = CurrentUserUtils.creatorBtnDescriptors(doc).filter(d => !alreadyCreatedButtons?.includes(d.title)); - const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag, click, ischecked, activeInkPen, backgroundColor, dragFactory }) => Docs.Create.FontIconDocument({ + const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag, click, ischecked, activeInkPen, backgroundColor, dragFactory, noviceMode }) => Docs.Create.FontIconDocument({ _nativeWidth: 50, _nativeHeight: 50, _width: 50, _height: 50, icon, title, @@ -479,6 +479,8 @@ export class CurrentUserUtils { backgroundColor, removeDropProperties: new List(["dropAction"]), dragFactory, + target: noviceMode ? undefined as any : doc, + hidden: noviceMode ? undefined as any : ComputedField.MakeFunction("self.target.noviceMode") })); if (dragCreatorSet === undefined) { diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 1a8ee3ea1..bc2c9422c 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -22,13 +22,13 @@ import { InkField } from "../../../../fields/InkField"; import { undoBatch, UndoManager } from "../../../util/UndoManager"; import { ColorState, SketchPicker } from "react-color"; import "./FormatShapePane.scss"; -import { discovery_v1 } from "googleapis"; import { PresBox } from "../../nodes/PresBox"; import { DocumentManager } from "../../../util/DocumentManager"; import FormatShapePane from "./FormatShapePane"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; +const _global = (window /* browser */ || global /* node */) as any; // import * as fa from '@fortawesome/free-solid-svg-icons'; // import { library } from "@fortawesome/fontawesome-svg-core"; @@ -52,7 +52,7 @@ export class PropertiesView extends React.Component { @computed get selectedDocumentView() { if (SelectionManager.SelectedDocuments().length) { return SelectionManager.SelectedDocuments()[0]; - } else if (PresBox.Instance._selectedArray.length) { + } else if (PresBox.Instance?._selectedArray.length) { return DocumentManager.Instance.getDocumentView(PresBox.Instance.rootDoc); } else { return undefined; } } @@ -247,12 +247,22 @@ export class PropertiesView extends React.Component { return false; } + @observable transform: Transform = Transform.Identity(); + getTransform = () => { return this.transform; } + propertiesDocViewRef = (ref: HTMLDivElement) => { + const observer = new _global.ResizeObserver(action((entries: any) => { + const cliRect = ref.getBoundingClientRect(); + this.transform = new Transform(-cliRect.x, -cliRect.y, 1); + })); + ref && observer.observe(ref); + } + @computed get layoutPreview() { if (this.selectedDoc) { const layoutDoc = Doc.Layout(this.selectedDoc); const panelHeight = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : this.docHeight; const panelWidth = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : this.docWidth; - return
+ return
{ PanelWidth={panelWidth} PanelHeight={panelHeight} focus={returnFalse} - ScreenToLocalTransform={this.props.ScreenToLocalTransform} + ScreenToLocalTransform={this.getTransform} docFilters={returnEmptyFilter} ContainingCollectionDoc={undefined} ContainingCollectionView={undefined} @@ -320,7 +330,7 @@ export class PropertiesView extends React.Component { * @returns the notification icon. On clicking, it should notify someone of a document been shared with them. */ @computed get notifyIcon() { - return
Notify with message
}> + return Notify with message
}>
@@ -331,7 +341,7 @@ export class PropertiesView extends React.Component { * ... next to the owner that opens the main SharingManager interface on click. */ @computed get expansionIcon() { - return
{"Show more permissions"}
}> + return {"Show more permissions"}
}>
{ if (this.selectedDocumentView) { SharingManager.Instance.open(this.selectedDocumentView); @@ -346,7 +356,7 @@ export class PropertiesView extends React.Component { * @returns a row of the permissions panel */ sharingItem(name: string, effectiveAcl: symbol, permission: string) { - return
this.selectedUser = this.selectedUser === name ? "" : name)} > @@ -378,7 +388,9 @@ export class PropertiesView extends React.Component { if (this.selectedDoc![AclSym]) { for (const [key, value] of Object.entries(this.selectedDoc![AclSym])) { const name = key.substring(4).replace("_", "."); - if (name !== Doc.CurrentUserEmail && name !== this.selectedDoc!.author/* && sidebarUsersDisplayed![name] !== false*/) tableEntries.push(this.sharingItem(name, effectiveAcl, AclMap.get(value)!)); + if (name !== Doc.CurrentUserEmail && name !== this.selectedDoc!.author/* && sidebarUsersDisplayed![name] !== false*/) { + tableEntries.push(this.sharingItem(name, effectiveAcl, AclMap.get(value)!)); + } } } @@ -484,17 +496,17 @@ export class PropertiesView extends React.Component { @computed get controlPointsButton() { return
-
{"Edit points"}
}> + {"Edit points"}
}>
FormatShapePane.Instance._controlBtn = !FormatShapePane.Instance._controlBtn)} style={{ backgroundColor: FormatShapePane.Instance._controlBtn ? "black" : "" }}>
-
{FormatShapePane.Instance._lock ? "Unlock ratio" : "Lock ratio"}
}> + {FormatShapePane.Instance._lock ? "Unlock ratio" : "Lock ratio"}
}>
FormatShapePane.Instance._lock = !FormatShapePane.Instance._lock)} >
-
{"Rotate 90˚"}
}> + {"Rotate 90˚"}
}>
this.rotate(Math.PI / 2))}>
@@ -943,12 +955,12 @@ export class PropertiesView extends React.Component {
- {this.openLayout ?
{this.layoutPreview}
: null} + {this.openLayout ?
{this.layoutPreview}
: null}
; } if (this.isPres) { - const selectedItem: boolean = PresBox.Instance._selectedArray.length > 0; + const selectedItem: boolean = PresBox.Instance?._selectedArray.length > 0; return
Presentation -- cgit v1.2.3-70-g09d2 From 58f67868c705899562b3a35dd0bf3771d074d6a0 Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 7 Aug 2020 08:27:53 -0400 Subject: made propertiesview preview unclickable. --- src/client/views/collections/collectionFreeForm/PropertiesView.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm') diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index bc2c9422c..15900aa33 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -257,12 +257,13 @@ export class PropertiesView extends React.Component { ref && observer.observe(ref); } + previewBackground = () => "lightgrey"; @computed get layoutPreview() { if (this.selectedDoc) { const layoutDoc = Doc.Layout(this.selectedDoc); const panelHeight = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : this.docHeight; const panelWidth = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : this.docWidth; - return
+ return
{ renderDepth={this.props.renderDepth + 1} rootSelected={returnFalse} treeViewDoc={undefined} - backgroundColor={() => "lightgrey"} + backgroundColor={this.previewBackground} fitToBox={true} FreezeDimensions={true} NativeWidth={layoutDoc.type === -- cgit v1.2.3-70-g09d2 From d6bbd8bd52231ffaea6d0f01c9e1447087e17914 Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 7 Aug 2020 22:48:37 -0400 Subject: code cleanup --- src/client/documents/Documents.ts | 1 + src/client/util/SettingsManager.scss | 5 + src/client/util/SettingsManager.tsx | 281 +++++++-------------- .../collectionFreeForm/PropertiesView.tsx | 2 +- 4 files changed, 97 insertions(+), 192 deletions(-) (limited to 'src/client/views/collections/collectionFreeForm') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index a06b4a581..f902da0a2 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -94,6 +94,7 @@ export interface DocumentOptions { title?: string; label?: string; hidden?: boolean; + userDoc?: Doc; // the userDocument toolTip?: string; // tooltip to display on hover style?: string; page?: number; diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index 41bce8a1b..3bae095d0 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -217,6 +217,11 @@ cursor: pointer; } + .logout-button { + right: 35; + position: absolute; + } + .settings-content { background: #e4e4e4; border-radius: 6px; diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 68ed32c0f..a6c5e518e 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -2,7 +2,6 @@ import { observable, runInAction, action, computed } from "mobx"; import * as React from "react"; import MainViewModal from "../views/MainViewModal"; import { observer } from "mobx-react"; -import { library } from '@fortawesome/fontawesome-svg-core'; import * as fa from '@fortawesome/free-solid-svg-icons'; import { SelectionManager } from "./SelectionManager"; import "./SettingsManager.scss"; @@ -22,220 +21,135 @@ const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; -library.add(fa.faTimes); - @observer export default class SettingsManager extends React.Component<{}> { public static Instance: SettingsManager; static _settingsStyle = addStyleSheet(); - @observable private isOpen = false; - @observable private dialogueBoxOpacity = 1; - @observable private overlayOpacity = 0.4; - @observable private settingsContent = "password"; - @observable private errorText = ""; - @observable private successText = ""; - @observable private playgroundMode = false; private curr_password_ref = React.createRef(); private new_password_ref = React.createRef(); private new_confirm_ref = React.createRef(); - + @observable private isOpen = false; + @observable private passwordResultText = ""; + @observable private playgroundMode = false; @computed get backgroundColor() { return Doc.UserDoc().defaultColor; } - public open = action(() => { - SelectionManager.DeselectAll(); - this.isOpen = true; - }); - - public close = action(() => { - this.isOpen = false; - }); - constructor(props: {}) { super(props); SettingsManager.Instance = this; } - @action - private dispatchRequest = async () => { + public close = action(() => this.isOpen = false); + public open = action(() => (this.isOpen = true) && SelectionManager.DeselectAll()); + + private googleAuthorize = action(() => GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true)); + private hypothesisAuthorize = action(() => HypothesisAuthenticationManager.Instance.fetchAccessToken(true)); + private changePassword = async () => { const curr_pass = this.curr_password_ref.current?.value; const new_pass = this.new_password_ref.current?.value; const new_confirm = this.new_confirm_ref.current?.value; if (!(curr_pass && new_pass && new_confirm)) { - this.changeAlertText("Hey, we're missing some fields!", ""); - return; - } - - const passwordBundle = { - curr_pass, - new_pass, - new_confirm - }; - - const { error } = await Networking.PostToServer('/internalResetPassword', passwordBundle); - if (error) { - this.changeAlertText("Uh oh! " + error[0].msg + "...", ""); - return; + runInAction(() => this.passwordResultText = "Error: Hey, we're missing some fields!"); + } else { + const passwordBundle = { curr_pass, new_pass, new_confirm }; + const { error } = await Networking.PostToServer('/internalResetPassword', passwordBundle); + runInAction(() => this.passwordResultText = error ? "Error: " + error[0].msg + "..." : "Password successfully updated!"); } - - this.changeAlertText("", "Password successfully updated!"); - } - - @action - private changeAlertText = (errortxt: string, successtxt: string) => { - this.errorText = errortxt; - this.successText = successtxt; - } - - @action - onClick = (event: any) => { - this.settingsContent = event.currentTarget.value; - this.errorText = ""; - this.successText = ""; - } - @action - noviceToggle = (event: any) => { - Doc.UserDoc().noviceMode = !Doc.UserDoc().noviceMode; - } - @action - googleAuthorize = (event: any) => { - GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true); - } - @action - hypothesisAuthorize = (event: any) => { - HypothesisAuthenticationManager.Instance.fetchAccessToken(true); } - @action - togglePlaygroundMode = () => { + @undoBatch selectUserMode = action((e: React.ChangeEvent) => Doc.UserDoc().noviceMode = (e.currentTarget as any)?.value === "Novice"); + @undoBatch changeFontFamily = action((e: React.ChangeEvent) => Doc.UserDoc().fontFamily = (e.currentTarget as any).value); + @undoBatch changeFontSize = action((e: React.ChangeEvent) => Doc.UserDoc().fontSize = (e.currentTarget as any).value); + @undoBatch switchColor = action((color: ColorState) => Doc.UserDoc().defaultColor = String(color.hex)); + @undoBatch + playgroundModeToggle = action(() => { this.playgroundMode = !this.playgroundMode; - if (this.playgroundMode) DocServer.Control.makeReadOnly(); + if (this.playgroundMode) { + DocServer.Control.makeReadOnly(); + addStyleSheetRule(SettingsManager._settingsStyle, "lm_header", { background: "pink !important" }); + } else DocServer.Control.makeEditable(); + }); - addStyleSheetRule(SettingsManager._settingsStyle, "lm_header", { background: "pink !important" }); - } - - @action - changeMode = (e: any) => { - if (e.currentTarget.value === "Novice") { - Doc.UserDoc().noviceMode = true; - } else { - Doc.UserDoc().noviceMode = false; - } - } + @computed get preferencesContent() { + const colorBox = ; - @action - changeFontFamily = (e: any) => { - Doc.UserDoc().fontFamily = e.currentTarget.value; - } + const colorFlyout =
+ +
e.stopPropagation()} > + +
+ +
; - @action - changeFontSize = (e: any) => { - Doc.UserDoc().fontSize = e.currentTarget.value; - } + const fontFamilies = ["Times New Roman", "Arial", "Georgia", "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"]; + const fontSizes = ["7pt", "8pt", "9pt", "10pt", "12pt", "14pt", "16pt", "18pt", "20pt", "24pt", "32pt", "48pt", "72pt"]; - @action @undoBatch - switchColor = (color: ColorState) => { - const val = String(color.hex); - Doc.UserDoc().defaultColor = val; - return true; + return
+
+
Background Color
+ {colorFlyout} +
+
+
Default Font
+ + +
+
; } - private get settingsInterface() { - - - const passwordContent =
+ @computed get passwordContent() { + return
- {this.errorText ?
{this.errorText}
: undefined} - {this.successText ?
{this.successText}
: undefined} - - forgot password? + {!this.passwordResultText ??
{this.passwordResultText}
} + + forgot password?
; + } - const modesContent =
- + +
- this.togglePlaygroundMode()))} - />
Playground Mode
+ +
Playground Mode
; + } - const accountsContent =
- - - -
; - - const colorBox = ; - - const colorFlyout =
- -
-
e.stopPropagation()} > - -
-
- -
; - - const fontFamilies: string[] = ["Times New Roman", "Arial", "Georgia", "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"]; - const fontSizes: string[] = ["7pt", "8pt", "9pt", "10pt", "12pt", "14pt", "16pt", "18pt", "20pt", "24pt", "32pt", "48pt", "72pt"]; - - const preferencesContent =
-
-
Background Color
{colorFlyout} -
-
-
Default Font
- - -
+ @computed get accountsContent() { + return
+ + +
; + } - return (
+ private get settingsInterface() { + const pairs = [{ title: "Password", ele: this.passwordContent }, { title: "Modes", ele: this.modesContent }, + { title: "Accounts", ele: this.accountsContent }, { title: "Preferences", ele: this.preferencesContent }]; + return
Settings
{Doc.CurrentUserEmail}
-
@@ -243,36 +157,21 @@ export default class SettingsManager extends React.Component<{}> {
-
-
Password
-
{passwordContent}
-
-
-
Modes
-
{modesContent}
-
-
-
Accounts
-
{accountsContent}
-
-
-
Preferences
-
{preferencesContent}
+ {pairs.map(pair =>
+
{pair.title}
+
{pair.ele}
+ )}
-
); +
; } render() { - return ( - - ); + return ; } - } \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 15900aa33..baa32e59b 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -248,7 +248,7 @@ export class PropertiesView extends React.Component { } @observable transform: Transform = Transform.Identity(); - getTransform = () => { return this.transform; } + getTransform = () => this.transform; propertiesDocViewRef = (ref: HTMLDivElement) => { const observer = new _global.ResizeObserver(action((entries: any) => { const cliRect = ref.getBoundingClientRect(); -- cgit v1.2.3-70-g09d2