From 3fa27ef718ff3ed855e0ae2b4fc35d51fe60fb25 Mon Sep 17 00:00:00 2001 From: ab Date: Wed, 5 Jun 2019 15:25:30 -0400 Subject: menu doesn't flicker --- src/client/util/TooltipTextMenu.scss | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) (limited to 'src/client/util/TooltipTextMenu.scss') diff --git a/src/client/util/TooltipTextMenu.scss b/src/client/util/TooltipTextMenu.scss index 437da0d63..e2862f093 100644 --- a/src/client/util/TooltipTextMenu.scss +++ b/src/client/util/TooltipTextMenu.scss @@ -36,7 +36,7 @@ position: relative; padding-right: 15px; margin: 3px; - background: #333333; + background: white; border-radius: 3px; text-align: center; } @@ -69,6 +69,7 @@ .ProseMirror-menu-dropdown-menu { z-index: 15; min-width: 6em; + background: white; } .linking { @@ -82,7 +83,7 @@ } .ProseMirror-menu-dropdown-item:hover { - background: #2e2b2b; + background: white; } .ProseMirror-menu-submenu-wrap { @@ -155,7 +156,7 @@ } .ProseMirror-icon svg { - fill: currentColor; + fill:white; height: 1em; } @@ -184,7 +185,7 @@ position: fixed; border-radius: 3px; z-index: 11; - box-shadow: -.5px 2px 5px rgba(0, 0, 0, .2); + box-shadow: -.5px 2px 5px white(255, 255, 255, 0.2); } .ProseMirror-prompt h5 { @@ -196,7 +197,7 @@ .ProseMirror-prompt input[type="text"], .ProseMirror-prompt textarea { - background: #eee; + background: white; border: none; outline: none; } @@ -233,12 +234,12 @@ .tooltipMenu { position: absolute; - z-index: 200; - background: $dark-color; + z-index: 50; + background: whitesmoke; border: 1px solid silver; - border-radius: 4px; + border-radius: 15px; padding: 2px 10px; - margin-bottom: 7px; + margin-bottom: 15px; -webkit-transform: translateX(-50%); transform: translateX(-50%); pointer-events: all; @@ -282,9 +283,9 @@ .menuicon { display: inline-block; - border-right: 1px solid rgba(0, 0, 0, 0.2); + border-right: 1px solid white(0, 0, 0, 0.2); //color: rgb(19, 18, 18); - color: white; + color: rgb(226, 21, 21); line-height: 1; padding: 0px 2px; margin: 1px; -- cgit v1.2.3-70-g09d2 From 08134c962bab2cd62507415f1a67cd921069d8e3 Mon Sep 17 00:00:00 2001 From: ab Date: Fri, 7 Jun 2019 15:00:36 -0400 Subject: fixed marquee --- src/client/util/ProsemirrorKeymap.ts | 19 ++++++++++++- src/client/util/RichTextSchema.tsx | 17 ++++++++++++ src/client/util/TooltipTextMenu.scss | 6 +++-- src/client/util/TooltipTextMenu.tsx | 31 +++++++++++++++++++++- src/client/views/MainOverlayTextBox.tsx | 2 +- .../collections/collectionFreeForm/MarqueeView.tsx | 9 ++++--- 6 files changed, 76 insertions(+), 8 deletions(-) (limited to 'src/client/util/TooltipTextMenu.scss') diff --git a/src/client/util/ProsemirrorKeymap.ts b/src/client/util/ProsemirrorKeymap.ts index 71644cd88..89d01486e 100644 --- a/src/client/util/ProsemirrorKeymap.ts +++ b/src/client/util/ProsemirrorKeymap.ts @@ -1,4 +1,4 @@ -import { Schema } from "prosemirror-model"; +import { Schema, NodeType } from "prosemirror-model"; import { wrapIn, setBlockType, chainCommands, toggleMark, exitCode, joinUp, joinDown, lift, selectParentNode @@ -24,6 +24,22 @@ export default function buildKeymap>(schema: S, mapKeys?: keys[key] = cmd; } + function insertStar(state: EditorState, dispatch: ((tr: Transaction) => void)) { + console.log("creating star..."); + let type = schema.nodes.star as NodeType; + let { $from } = state.selection; + if (!$from.parent.canReplaceWith($from.index(), $from.index(), type)) { + return false; + } + if (dispatch) { + dispatch(state.tr.replaceSelectionWith(type.create())); + } + return true; + } + + console.log("star? hullo"); + bind("Mod-space", insertStar); + bind("Mod-z", undo); bind("Shift-Mod-z", redo); bind("Backspace", undoInputRule); @@ -79,6 +95,7 @@ export default function buildKeymap>(schema: S, mapKeys?: } if (type = schema.nodes.paragraph) { bind("Shift-Ctrl-0", setBlockType(type)); + bind("Mod-space", insertStar); } if (type = schema.nodes.code_block) { bind("Shift-Ctrl-\\", setBlockType(type)); diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx index 3e3e98206..8fae821a5 100644 --- a/src/client/util/RichTextSchema.tsx +++ b/src/client/util/RichTextSchema.tsx @@ -26,6 +26,13 @@ export const nodes: { [index: string]: NodeSpec } = { toDOM() { return pDOM; } }, + star: { + inline: true, + group: "inline", + toDOM() { return ["star", "🟊"]; }, + parseDOM: [{ tag: "star" }] + }, + // :: NodeSpec A blockquote (`
`) wrapping one or more blocks. blockquote: { content: "block+", @@ -222,6 +229,15 @@ export const marks: { [index: string]: MarkSpec } = { toDOM: () => ['sup'] }, + collapse: { + parseDOM: [{ style: 'color: blue' }], + toDOM() { + return ['span', { + style: 'color: blue' + }] + } + }, + // :: MarkSpec Code font mark. Represented as a `` element. code: { @@ -280,6 +296,7 @@ export const marks: { [index: string]: MarkSpec } = { }] }, + /** FONT SIZES */ p10: { diff --git a/src/client/util/TooltipTextMenu.scss b/src/client/util/TooltipTextMenu.scss index e2862f093..0720a73a3 100644 --- a/src/client/util/TooltipTextMenu.scss +++ b/src/client/util/TooltipTextMenu.scss @@ -133,7 +133,7 @@ position: relative; min-height: 1em; color: white; - padding: 1px 6px; + padding: 10px 10px; top: 0; left: 0; right: 0; border-bottom: 1px solid silver; background:$dark-color; @@ -239,10 +239,12 @@ border: 1px solid silver; border-radius: 15px; padding: 2px 10px; - margin-bottom: 15px; + margin-bottom: 60px; -webkit-transform: translateX(-50%); transform: translateX(-50%); pointer-events: all; + height: 100px; + width:500px; .ProseMirror-example-setup-style hr { padding: 2px 10px; border: none; diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx index 7c5437510..1f1ad9cd4 100644 --- a/src/client/util/TooltipTextMenu.tsx +++ b/src/client/util/TooltipTextMenu.tsx @@ -22,12 +22,12 @@ import { throwStatement } from "babel-types"; import { View } from "@react-pdf/renderer"; import { DragManager } from "./DragManager"; import { Doc, Opt, Field } from "../../new_fields/Doc"; -import { Utils } from "../northstar/utils/Utils"; import { DocServer } from "../DocServer"; import { CollectionFreeFormDocumentView } from "../views/nodes/CollectionFreeFormDocumentView"; import { CollectionDockingView } from "../views/collections/CollectionDockingView"; import { DocumentManager } from "./DocumentManager"; import { Id } from "../../new_fields/FieldSymbols"; +import { Utils } from "../../Utils"; const SVG = "http://www.w3.org/2000/svg"; @@ -74,6 +74,7 @@ export class TooltipTextMenu { { command: toggleMark(schema.marks.strikethrough), dom: this.icon("S", "strikethrough", "Strikethrough") }, { command: toggleMark(schema.marks.superscript), dom: this.icon("s", "superscript", "Superscript") }, { command: toggleMark(schema.marks.subscript), dom: this.icon("s", "subscript", "Subscript") }, + { command: toggleMark(schema.marks.collapse), dom: this.icon("C", 'collapse', 'Collapse') } // { command: wrapInList(schema.nodes.bullet_list), dom: this.icon(":", "bullets") }, // { command: wrapInList(schema.nodes.ordered_list), dom: this.icon("1)", "bullets") }, // { command: lift, dom: this.icon("<", "lift") }, @@ -231,6 +232,15 @@ export class TooltipTextMenu { this.linkEditor.appendChild(this.linkText); this.linkEditor.appendChild(linkBtn); this.tooltip.appendChild(this.linkEditor); + + let starButton = document.createElement("button"); + starButton.textContent = "ST"; + starButton.onclick = () => { + let state = this.view.state; + this.insertStar(state, this.view.dispatch); + } + + this.tooltip.appendChild(starButton); } let node = this.view.state.selection.$from.nodeAfter; @@ -256,6 +266,19 @@ export class TooltipTextMenu { link = node && node.marks.find(m => m.type.name === "link"); } + insertStar(state: any, dispatch: any) { + console.log("creating star..."); + let type = schema.nodes.star; + let { $from } = state.selection; + if (!$from.parent.canReplaceWith($from.index(), $from.index(), type)) { + return false; + } + if (dispatch) { + dispatch(state.tr.replaceSelectionWith(type.create())); + } + return true; + } + //will display a remove-list-type button if selection is in list, otherwise will show list type dropdown updateListItemDropdown(label: string, listTypeBtn: Node) { //remove old btn @@ -426,6 +449,12 @@ export class TooltipTextMenu { this.tooltip.style.width = 225 + "px"; this.tooltip.style.bottom = (box.bottom - start.top) * this.editorProps.ScreenToLocalTransform().Scale + "px"; + this.tooltip.style.top = "-100px"; + //this.tooltip.style.height = "100px"; + + // let transform = this.editorProps.ScreenToLocalTransform(); + // this.tooltip.style.width = `${225 / transform.Scale}px`; + // Utils //UPDATE LIST ITEM DROPDOWN this.listTypeBtnDom = this.updateListItemDropdown(":", this.listTypeBtnDom!); diff --git a/src/client/views/MainOverlayTextBox.tsx b/src/client/views/MainOverlayTextBox.tsx index 24327b995..d1224febe 100644 --- a/src/client/views/MainOverlayTextBox.tsx +++ b/src/client/views/MainOverlayTextBox.tsx @@ -102,6 +102,6 @@ export class MainOverlayTextBox extends React.Component ; } - else return (null); Z + else return (null); } } \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 9ec941eff..563fbb186 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -45,12 +45,14 @@ export class MarqueeView extends React.Component _commandExecuted = false; @action - cleanupInteractions = (all: boolean = false) => { + cleanupInteractions = (all: boolean = false, rem_keydown: boolean = true) => { if (all) { document.removeEventListener("pointerup", this.onPointerUp, true); document.removeEventListener("pointermove", this.onPointerMove, true); } - document.removeEventListener("keydown", this.marqueeCommand, true); + if (rem_keydown) { + document.removeEventListener("keydown", this.marqueeCommand, true); + } this._visible = false; } @@ -180,6 +182,7 @@ export class MarqueeView extends React.Component @action onPointerUp = (e: PointerEvent): void => { + console.log("pointer up!"); if (this._visible) { let mselect = this.marqueeSelect(); if (!e.shiftKey) { @@ -187,7 +190,7 @@ export class MarqueeView extends React.Component } this.props.selectDocuments(mselect.length ? mselect : [this.props.container.props.Document]); } - this.cleanupInteractions(true); + this.cleanupInteractions(true, false); if (e.altKey) { e.preventDefault(); } -- cgit v1.2.3-70-g09d2 From ef24cc445aa466cae3b6c40029f7d7bc9baa81b7 Mon Sep 17 00:00:00 2001 From: ab Date: Fri, 7 Jun 2019 16:37:10 -0400 Subject: frustrated! --- src/client/util/ProsemirrorKeymap.ts | 17 --------------- src/client/util/TooltipTextMenu.scss | 11 +++++----- src/client/util/TooltipTextMenu.tsx | 24 +++++++++++++++------- .../collections/collectionFreeForm/MarqueeView.tsx | 9 +++++++- 4 files changed, 31 insertions(+), 30 deletions(-) (limited to 'src/client/util/TooltipTextMenu.scss') diff --git a/src/client/util/ProsemirrorKeymap.ts b/src/client/util/ProsemirrorKeymap.ts index 89d01486e..cf656dc17 100644 --- a/src/client/util/ProsemirrorKeymap.ts +++ b/src/client/util/ProsemirrorKeymap.ts @@ -24,22 +24,6 @@ export default function buildKeymap>(schema: S, mapKeys?: keys[key] = cmd; } - function insertStar(state: EditorState, dispatch: ((tr: Transaction) => void)) { - console.log("creating star..."); - let type = schema.nodes.star as NodeType; - let { $from } = state.selection; - if (!$from.parent.canReplaceWith($from.index(), $from.index(), type)) { - return false; - } - if (dispatch) { - dispatch(state.tr.replaceSelectionWith(type.create())); - } - return true; - } - - console.log("star? hullo"); - bind("Mod-space", insertStar); - bind("Mod-z", undo); bind("Shift-Mod-z", redo); bind("Backspace", undoInputRule); @@ -95,7 +79,6 @@ export default function buildKeymap>(schema: S, mapKeys?: } if (type = schema.nodes.paragraph) { bind("Shift-Ctrl-0", setBlockType(type)); - bind("Mod-space", insertStar); } if (type = schema.nodes.code_block) { bind("Shift-Ctrl-\\", setBlockType(type)); diff --git a/src/client/util/TooltipTextMenu.scss b/src/client/util/TooltipTextMenu.scss index 0720a73a3..0099c1e4d 100644 --- a/src/client/util/TooltipTextMenu.scss +++ b/src/client/util/TooltipTextMenu.scss @@ -239,12 +239,13 @@ border: 1px solid silver; border-radius: 15px; padding: 2px 10px; - margin-bottom: 60px; - -webkit-transform: translateX(-50%); - transform: translateX(-50%); + //margin-bottom: 100px; + //-webkit-transform: translateX(-50%); + //transform: translateX(-50%); + transform: translateY(-50%); pointer-events: all; - height: 100px; - width:500px; + height: 125px; + width:400px; .ProseMirror-example-setup-style hr { padding: 2px 10px; border: none; diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx index 1f1ad9cd4..366105ad9 100644 --- a/src/client/util/TooltipTextMenu.tsx +++ b/src/client/util/TooltipTextMenu.tsx @@ -234,7 +234,12 @@ export class TooltipTextMenu { this.tooltip.appendChild(this.linkEditor); let starButton = document.createElement("button"); - starButton.textContent = "ST"; + // starButton.style.width = '10px'; + // starButton.style.height = '10px'; + starButton.style.marginLeft = '10px'; + starButton.textContent = "Summarize"; + starButton.style.color = 'black'; + starButton.style.backgroundColor = 'white'; starButton.onclick = () => { let state = this.view.state; this.insertStar(state, this.view.dispatch); @@ -266,16 +271,21 @@ export class TooltipTextMenu { link = node && node.marks.find(m => m.type.name === "link"); } - insertStar(state: any, dispatch: any) { + insertStar(state: EditorState, dispatch: any) { console.log("creating star..."); let type = schema.nodes.star; - let { $from } = state.selection; - if (!$from.parent.canReplaceWith($from.index(), $from.index(), type)) { - return false; - } + //let {$from} = state.selection; + let select = state.selection; if (dispatch) { - dispatch(state.tr.replaceSelectionWith(type.create())); + dispatch(state.tr.setMeta('select.visible', false)); } + // console.log($from); + // if (!$from.parent.canReplaceWith($from.index(), $from.index(), type)) { + // return false; + // } + // if (dispatch) { + // dispatch(state.tr.replaceSelectionWith(type.create())); + // } return true; } diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 563fbb186..6b81cc597 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -147,6 +147,7 @@ export class MarqueeView extends React.Component this._downY = this._lastY = e.pageY; this._commandExecuted = false; PreviewCursor.Visible = false; + this.cleanupInteractions(true); if (e.button === 2 || (e.button === 0 && e.altKey)) { if (!this.props.container.props.active()) this.props.selectDocuments([this.props.container.props.Document]); document.addEventListener("pointermove", this.onPointerMove, true); @@ -184,13 +185,19 @@ export class MarqueeView extends React.Component onPointerUp = (e: PointerEvent): void => { console.log("pointer up!"); if (this._visible) { + console.log("visible"); let mselect = this.marqueeSelect(); if (!e.shiftKey) { SelectionManager.DeselectAll(mselect.length ? undefined : this.props.container.props.Document); } this.props.selectDocuments(mselect.length ? mselect : [this.props.container.props.Document]); + mselect.length ? this.cleanupInteractions(true, false) : this.cleanupInteractions(true); } - this.cleanupInteractions(true, false); + else { + console.log("invisible"); + this.cleanupInteractions(true); + } + if (e.altKey) { e.preventDefault(); } -- cgit v1.2.3-70-g09d2 From b3144df1abdd4919d3a04c85fe9a75de1cdc2782 Mon Sep 17 00:00:00 2001 From: Abdullah Ahmed Date: Wed, 12 Jun 2019 17:40:23 -0400 Subject: ui changes --- src/client/util/TooltipTextMenu.scss | 48 ++++++++++++++++++------------------ src/client/util/TooltipTextMenu.tsx | 6 +++-- 2 files changed, 28 insertions(+), 26 deletions(-) (limited to 'src/client/util/TooltipTextMenu.scss') diff --git a/src/client/util/TooltipTextMenu.scss b/src/client/util/TooltipTextMenu.scss index 0099c1e4d..4d4eb386d 100644 --- a/src/client/util/TooltipTextMenu.scss +++ b/src/client/util/TooltipTextMenu.scss @@ -244,8 +244,8 @@ //transform: translateX(-50%); transform: translateY(-50%); pointer-events: all; - height: 125px; - width:400px; + height: auto; + width:inherit; .ProseMirror-example-setup-style hr { padding: 2px 10px; border: none; @@ -261,28 +261,28 @@ } } -.tooltipMenu:before { - content: ""; - height: 0; width: 0; - position: absolute; - left: 50%; - margin-left: -5px; - bottom: -6px; - border: 5px solid transparent; - border-bottom-width: 0; - border-top-color: silver; - } - .tooltipMenu:after { - content: ""; - height: 0; width: 0; - position: absolute; - left: 50%; - margin-left: -5px; - bottom: -4.5px; - border: 5px solid transparent; - border-bottom-width: 0; - border-top-color: $dark-color; - } +// .tooltipMenu:before { +// content: ""; +// height: 0; width: 0; +// position: absolute; +// left: 50%; +// margin-left: -5px; +// bottom: -6px; +// border: 5px solid transparent; +// border-bottom-width: 0; +// border-top-color: silver; +// } +// .tooltipMenu:after { +// content: ""; +// height: 0; width: 0; +// position: absolute; +// left: 50%; +// margin-left: -5px; +// bottom: -4.5px; +// border: 5px solid transparent; +// border-bottom-width: 0; +// border-top-color: $dark-color; +// } .menuicon { display: inline-block; diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx index 87a4c33a1..e12d4ed3c 100644 --- a/src/client/util/TooltipTextMenu.tsx +++ b/src/client/util/TooltipTextMenu.tsx @@ -234,13 +234,15 @@ export class TooltipTextMenu { this.linkEditor.appendChild(linkBtn); this.tooltip.appendChild(this.linkEditor); - let starButton = document.createElement("button"); + let starButton = document.createElement("span"); // starButton.style.width = '10px'; // starButton.style.height = '10px'; starButton.style.marginLeft = '10px'; starButton.textContent = "Summarize"; starButton.style.color = 'black'; + starButton.style.height = '20px'; starButton.style.backgroundColor = 'white'; + starButton.style.textAlign = 'center'; starButton.onclick = () => { let state = this.view.state; this.insertStar(state, this.view.dispatch); @@ -450,7 +452,7 @@ export class TooltipTextMenu { let width = Math.abs(start.left - end.left) / 2 * this.editorProps.ScreenToLocalTransform().Scale; let mid = Math.min(start.left, end.left) + width; - this.tooltip.style.width = 225 + "px"; + //this.tooltip.style.width = 225 + "px"; this.tooltip.style.bottom = (box.bottom - start.top) * this.editorProps.ScreenToLocalTransform().Scale + "px"; this.tooltip.style.top = "-100px"; //this.tooltip.style.height = "100px"; -- cgit v1.2.3-70-g09d2