aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorlaurawilsonri <laura_wilson@brown.edu>2019-04-02 18:31:37 -0400
committerlaurawilsonri <laura_wilson@brown.edu>2019-04-02 18:31:37 -0400
commit03b2c984d581e18ed898cb097b12ab3ec70c833d (patch)
tree7dc80a2ea7057f28eaa502715a493f186bf001af
parentdd561b6b81a2832972d15e6226327a49ec1cdf06 (diff)
bullets work
-rw-r--r--package.json1
-rw-r--r--src/client/util/TooltipTextMenu.tsx52
-rw-r--r--src/client/views/collections/CollectionSchemaView.scss5
-rw-r--r--src/client/views/collections/CollectionTreeView.scss2
-rw-r--r--src/server/database.ts2
5 files changed, 48 insertions, 14 deletions
diff --git a/package.json b/package.json
index 27b3eead1..7bcf941b7 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
"@types/prosemirror-history": "^1.0.1",
"@types/prosemirror-inputrules": "^1.0.2",
"@types/prosemirror-keymap": "^1.0.1",
+ "@types/prosemirror-menu": "^1.0.1",
"@types/prosemirror-model": "^1.7.0",
"@types/prosemirror-schema-basic": "^1.0.1",
"@types/prosemirror-schema-list": "^1.0.1",
diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx
index 2a613ba8b..eaf18825c 100644
--- a/src/client/util/TooltipTextMenu.tsx
+++ b/src/client/util/TooltipTextMenu.tsx
@@ -1,25 +1,29 @@
import { action, IReactionDisposer, reaction } from "mobx";
-import { baseKeymap } from "prosemirror-commands";
+import { baseKeymap, lift } from "prosemirror-commands";
import { history, redo, undo } from "prosemirror-history";
import { keymap } from "prosemirror-keymap";
import { EditorState, Transaction, NodeSelection } from "prosemirror-state";
import { EditorView } from "prosemirror-view";
import { schema } from "./RichTextSchema";
-import { Schema, NodeType } from "prosemirror-model"
-import React = require("react")
+import { Schema, NodeType } from "prosemirror-model";
+import { liftItem } from "prosemirror-menu";
+import React = require("react");
import "./TooltipTextMenu.scss";
const { toggleMark, setBlockType, wrapIn } = require("prosemirror-commands");
import { library } from '@fortawesome/fontawesome-svg-core'
-import { wrapInList, bulletList } from 'prosemirror-schema-list'
+import { wrapInList, bulletList, liftListItem, listItem } from 'prosemirror-schema-list'
import {
faListUl,
} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+const SVG = "http://www.w3.org/2000/svg"
//appears above a selection of text in a RichTextBox to give user options such as Bold, Italics, etc.
export class TooltipTextMenu {
private tooltip: HTMLElement;
+ private num_icons = 0;
constructor(view: EditorView) {
this.tooltip = document.createElement("div");
@@ -39,20 +43,28 @@ export class TooltipTextMenu {
{ command: toggleMark(schema.marks.strikethrough), dom: this.icon("S", "strikethrough") },
{ command: toggleMark(schema.marks.superscript), dom: this.icon("s", "superscript") },
{ command: toggleMark(schema.marks.subscript), dom: this.icon("s", "subscript") },
- //this doesn't work currently - look into notion of active block
{ command: wrapInList(schema.nodes.bullet_list), dom: this.icon(":", "bullets") },
+ //{ command: lift, dom: this.icon("<", "unindent") },
+
+ { command: lift, dom: this.unorderedListIcon() },
]
- items.forEach(({ dom }) => this.tooltip.appendChild(dom));
+ //add menu items
+ items.forEach(({ dom, command }) => {
+ this.tooltip.appendChild(dom);
+ });
//pointer down handler to activate button effects
this.tooltip.addEventListener("pointerdown", e => {
e.preventDefault();
view.focus();
+ //update view of icons
+ this.num_icons = 0;
items.forEach(({ command, dom }) => {
if (dom.contains(e.srcElement)) {
+ //let active = command(view.state, view.dispatch, view);
let active = command(view.state, view.dispatch, view);
//uncomment this if we want the bullet button to disappear if current selection is bulleted
- // dom.style.display = active ? "" : "none"
+ //dom.style.display = active ? "" : "none";
}
})
})
@@ -90,9 +102,24 @@ export class TooltipTextMenu {
//this doesn't currently work but could be used to use icons for buttons
unorderedListIcon(): HTMLSpanElement {
let span = document.createElement("span");
- let icon = document.createElement("FontAwesomeIcon");
- icon.className = "menuicon fa fa-smile-o";
- span.appendChild(icon);
+ //let icon = document.createElement("FontAwesomeIcon");
+ //icon.className = "menuicon";
+ //icon.style.color = "white";
+ //span.appendChild(<i style={{ color: "white" }} icon="list-ul" size="lg" />);
+ let i = document.createElement("i");
+ i.className = "fa falist-ul";
+ span.appendChild(i);
+ //span.appendChild(icon);
+ //return liftItem.spec.icon.sty
+
+ //let sym = document.createElementNS(SVG, "symbol")
+ // sym.id = name
+ //sym.style.color = "white";
+ //width then height
+ //sym.setAttribute("viewBox", "0 0 " + 1024 + " " + 1024);
+ //let path = sym.appendChild(document.createElementNS(SVG, "path"));
+ //path.setAttribute("d", "M219 310v329q0 7-5 12t-12 5q-8 0-13-5l-164-164q-5-5-5-13t5-13l164-164q5-5 13-5 7 0 12 5t5 12zM1024 749v109q0 7-5 12t-12 5h-987q-7 0-12-5t-5-12v-109q0-7 5-12t12-5h987q7 0 12 5t5 12zM1024 530v109q0 7-5 12t-12 5h-621q-7 0-12-5t-5-12v-109q0-7 5-12t12-5h621q7 0 12 5t5 12zM1024 310v109q0 7-5 12t-12 5h-621q-7 0-12-5t-5-12v-109q0-7 5-12t12-5h621q7 0 12 5t5 12zM1024 91v109q0 7-5 12t-12 5h-987q-7 0-12-5t-5-12v-109q0-7 5-12t12-5h987q7 0 12 5t5 12z");
+ //span.appendChild(sym);
return span;
}
@@ -127,11 +154,12 @@ export class TooltipTextMenu {
// crossing lines, end may be more to the left)
let left = Math.max((start.left + end.left) / 2, start.left + 3)
this.tooltip.style.left = (left - box.left) + "px"
- let width = Math.abs(start.left - end.left) / 2;
+ //let width = Math.abs(start.left - end.left) / 2;
+ let width = 8 * 16 + 15;
let mid = Math.min(start.left, end.left) + width;
//THIS WIDTH IS 15 * NUMBER OF ICONS + 15
- this.tooltip.style.width = 122 + "px";
+ this.tooltip.style.width = width + "px";
this.tooltip.style.bottom = (box.bottom - start.top) + "px";
}
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index c3a2e88ac..9cd6c8a39 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -15,6 +15,11 @@
padding: 0px;
font-size: 100%;
}
+
+ul {
+ list-style-type: disc;
+}
+
#schema-options-header {
text-align: center;
padding: 0px;
diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
index 5a14aa54d..8ec996326 100644
--- a/src/client/views/collections/CollectionTreeView.scss
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -8,7 +8,7 @@
overflow: scroll;
}
-ul {
+.no-indent {
list-style: none;
padding-left: 20px;
}
diff --git a/src/server/database.ts b/src/server/database.ts
index a42d29aac..87a0b3c70 100644
--- a/src/server/database.ts
+++ b/src/server/database.ts
@@ -27,7 +27,7 @@ export class Database {
console.log(err.errmsg);
}
if (res) {
- console.log(JSON.stringify(res.result));
+ // console.log(JSON.stringify(res.result));
}
callback()
});