From 81100809b0f824cfc1481b19dbe38c31814539e1 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Wed, 14 Aug 2019 17:20:57 -0400 Subject: drag new webpage and easy URL change working --- src/client/views/nodes/WebBox.scss | 133 ++++++++++++++++++++++++++++++++++--- 1 file changed, 125 insertions(+), 8 deletions(-) (limited to 'src/client/views/nodes/WebBox.scss') diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss index eb09b0693..c37f08eca 100644 --- a/src/client/views/nodes/WebBox.scss +++ b/src/client/views/nodes/WebBox.scss @@ -1,16 +1,18 @@ - -.webBox-cont, .webBox-cont-interactive{ +.webBox-cont, +.webBox-cont-interactive { padding: 0vw; position: absolute; top: 0; - left:0; + left: 0; width: 100%; height: 100%; overflow: auto; - pointer-events: none ; + pointer-events: none; } + .webBox-cont-interactive { pointer-events: all; + span { user-select: text !important; } @@ -18,8 +20,8 @@ #webBox-htmlSpan { position: absolute; - top:0; - left:0; + top: 0; + left: 0; } .webBox-overlay { @@ -29,8 +31,123 @@ } .webBox-button { - padding : 0vw; + padding: 0vw; border: none; - width : 100%; + width: 100%; + height: 100%; +} + +.webView-urlEditor { + position: relative; + opacity: 0.9; + z-index: 9001; + transition: top .5s; + background: lightgrey; + padding: 10px; + + + .urlEditor { + display: grid; + grid-template-columns: 1fr auto; + padding-bottom: 10px; + overflow: hidden; + + .collectionViewBaseChrome { + display: flex; + + .collectionViewBaseChrome-viewPicker { + font-size: 75%; + text-transform: uppercase; + letter-spacing: 2px; + background: rgb(238, 238, 238); + color: grey; + outline-color: black; + border: none; + padding: 12px 10px 11px 10px; + margin-left: 50px; + } + + .collectionViewBaseChrome-viewPicker:active { + outline-color: black; + } + + .collectionViewBaseChrome-collapse { + transition: all .5s, opacity 0.3s; + position: absolute; + width: 40px; + transform-origin: top left; + // margin-top: 10px; + } + + .collectionViewBaseChrome-viewSpecs { + margin-left: 10px; + display: grid; + + + + .collectionViewBaseChrome-viewSpecsMenu { + overflow: hidden; + transition: height .5s, display .5s; + position: absolute; + top: 60px; + z-index: 100; + display: flex; + flex-direction: column; + background: rgb(238, 238, 238); + box-shadow: grey 2px 2px 4px; + + .qs-datepicker { + left: unset; + right: 0; + } + + .collectionViewBaseChrome-viewSpecsMenu-row { + display: grid; + grid-template-columns: 150px 200px 150px; + margin-top: 10px; + margin-right: 10px; + + .collectionViewBaseChrome-viewSpecsMenu-rowLeft, + .collectionViewBaseChrome-viewSpecsMenu-rowMiddle, + .collectionViewBaseChrome-viewSpecsMenu-rowRight { + font-size: 75%; + letter-spacing: 2px; + color: grey; + margin-left: 10px; + padding: 5px; + border: none; + outline-color: black; + } + } + + .collectionViewBaseChrome-viewSpecsMenu-lastRow { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-gap: 10px; + margin: 10px; + } + } + } + } + + button:hover { + transform: scale(1); + } + + .collectionStackingViewChrome-sectionFilter:hover { + cursor: text; + } + } +} + +.webpage-urlInput { + padding: 12px 10px 11px 10px; + border: 0px; + color: grey; + letter-spacing: 2px; + outline-color: black; + background: rgb(238, 238, 238); + width: 100%; + margin-right: 10px; height: 100%; } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 7e4aacb09e8c80a3452ca24145b1f094170a897b Mon Sep 17 00:00:00 2001 From: monikahedman Date: Thu, 15 Aug 2019 16:44:57 -0400 Subject: cleaning up --- src/client/util/RichTextSchema.tsx | 43 ------------------- src/client/views/GlobalKeyHandler.ts | 2 - src/client/views/MainOverlayTextBox.tsx | 3 -- src/client/views/nodes/WebBox.scss | 75 +-------------------------------- src/client/views/nodes/WebBox.tsx | 4 +- 5 files changed, 4 insertions(+), 123 deletions(-) (limited to 'src/client/views/nodes/WebBox.scss') diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx index a581b7578..8a15c212d 100644 --- a/src/client/util/RichTextSchema.tsx +++ b/src/client/util/RichTextSchema.tsx @@ -526,49 +526,6 @@ export class ImageResizeView { } } -export class CheckboxView { - _view: any; - _collapsed: HTMLElement; - - constructor(node: any, view: any, getPos: any) { - this._collapsed = document.createElement("span"); - this._collapsed.textContent = node.attrs.visibility ? "⬛" : "⬜"; - this._collapsed.style.position = "relative"; - // this._collapsed.style.width = "80px"; - this._collapsed.style.height = "20px"; - let self = this; - this._view = view; - const js = node.toJSON; - node.toJSON = function () { - - return js.apply(this, arguments); - }; - this._collapsed.onpointerdown = function (e: any) { - console.log(node.attrs.visibility) - if (node.attrs.visibility) { - let y = getPos(); - const attrs = { ...node.attrs }; - attrs.visibility = !attrs.visibility; - view.dispatch(view.state.tr.setNodeMarkup(y, undefined, attrs)); - self._collapsed.textContent = "⬜"; - } else { - let y = getPos(); - const attrs = { ...node.attrs }; - attrs.visibility = !attrs.visibility; - console.log(attrs.visibility) - view.dispatch(view.state.tr.setNodeMarkup(y, undefined, attrs)); - self._collapsed.textContent = "⬛"; - } - e.preventDefault(); - e.stopPropagation(); - console.log(node.attrs.visibility) - - }; - (this as any).dom = this._collapsed; - } - -} - export class SummarizedView { // TODO: highlight text that is summarized. to find end of region, walk along mark _collapsed: HTMLElement; diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts index f55953bd4..833bacedb 100644 --- a/src/client/views/GlobalKeyHandler.ts +++ b/src/client/views/GlobalKeyHandler.ts @@ -181,8 +181,6 @@ export default class KeyManager { break; case "a": case "v": - this.printClipboard(); - break; case "x": case "c": stopPropagation = false; diff --git a/src/client/views/MainOverlayTextBox.tsx b/src/client/views/MainOverlayTextBox.tsx index f315b6d59..b14a1e0ea 100644 --- a/src/client/views/MainOverlayTextBox.tsx +++ b/src/client/views/MainOverlayTextBox.tsx @@ -60,20 +60,17 @@ export class MainOverlayTextBox extends React.Component return new Transform(-sxf.translateX, -sxf.translateY, 1 / sxf.scale); }; this.setTextDoc(box.props.fieldKey, box.CurrentDiv, xf, BoolCast(box.props.Document.autoHeight, false) || box.props.height === "min-content"); - console.log("makin text doc?") } else { this.TextDoc = undefined; this.TextDataDoc = undefined; this.setTextDoc(); - console.log("deletin text doc?") } }); } @action private setTextDoc(textFieldKey?: string, div?: HTMLDivElement, tx?: () => Transform, autoHeight?: boolean) { - console.log("what is going on") if (this._textTargetDiv) { this._textTargetDiv.style.color = this._textColor; } diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss index c37f08eca..07774263c 100644 --- a/src/client/views/nodes/WebBox.scss +++ b/src/client/views/nodes/WebBox.scss @@ -52,91 +52,20 @@ padding-bottom: 10px; overflow: hidden; - .collectionViewBaseChrome { + .editorBase { display: flex; - .collectionViewBaseChrome-viewPicker { - font-size: 75%; - text-transform: uppercase; - letter-spacing: 2px; - background: rgb(238, 238, 238); - color: grey; - outline-color: black; - border: none; - padding: 12px 10px 11px 10px; - margin-left: 50px; - } - - .collectionViewBaseChrome-viewPicker:active { - outline-color: black; - } - - .collectionViewBaseChrome-collapse { + .editor-collapse { transition: all .5s, opacity 0.3s; position: absolute; width: 40px; transform-origin: top left; - // margin-top: 10px; - } - - .collectionViewBaseChrome-viewSpecs { - margin-left: 10px; - display: grid; - - - - .collectionViewBaseChrome-viewSpecsMenu { - overflow: hidden; - transition: height .5s, display .5s; - position: absolute; - top: 60px; - z-index: 100; - display: flex; - flex-direction: column; - background: rgb(238, 238, 238); - box-shadow: grey 2px 2px 4px; - - .qs-datepicker { - left: unset; - right: 0; - } - - .collectionViewBaseChrome-viewSpecsMenu-row { - display: grid; - grid-template-columns: 150px 200px 150px; - margin-top: 10px; - margin-right: 10px; - - .collectionViewBaseChrome-viewSpecsMenu-rowLeft, - .collectionViewBaseChrome-viewSpecsMenu-rowMiddle, - .collectionViewBaseChrome-viewSpecsMenu-rowRight { - font-size: 75%; - letter-spacing: 2px; - color: grey; - margin-left: 10px; - padding: 5px; - border: none; - outline-color: black; - } - } - - .collectionViewBaseChrome-viewSpecsMenu-lastRow { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - grid-gap: 10px; - margin: 10px; - } - } } } button:hover { transform: scale(1); } - - .collectionStackingViewChrome-sectionFilter:hover { - cursor: text; - } } } diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 91170e99a..0a4af7318 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -73,8 +73,8 @@ export class WebBox extends React.Component { return (
-
- - +
+ +
-- cgit v1.2.3-70-g09d2 From 135da417387b5fef28df8f07266d404be8211320 Mon Sep 17 00:00:00 2001 From: monikahedman Date: Thu, 22 Aug 2019 12:04:40 -0400 Subject: done? --- src/client/views/nodes/WebBox.scss | 51 -------------------------------------- 1 file changed, 51 deletions(-) (limited to 'src/client/views/nodes/WebBox.scss') diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss index b28f950c2..43220df71 100644 --- a/src/client/views/nodes/WebBox.scss +++ b/src/client/views/nodes/WebBox.scss @@ -62,7 +62,6 @@ position: absolute; width: 40px; transform-origin: top left; - // margin-top: 10px; } .switchToText { @@ -72,56 +71,6 @@ .switchToText:hover { color: $dark-color; } - - .collectionViewBaseChrome-viewSpecs { - margin-left: 10px; - display: grid; - - - - .collectionViewBaseChrome-viewSpecsMenu { - overflow: hidden; - transition: height .5s, display .5s; - position: absolute; - top: 60px; - z-index: 100; - display: flex; - flex-direction: column; - background: rgb(238, 238, 238); - box-shadow: grey 2px 2px 4px; - - .qs-datepicker { - left: unset; - right: 0; - } - - .collectionViewBaseChrome-viewSpecsMenu-row { - display: grid; - grid-template-columns: 150px 200px 150px; - margin-top: 10px; - margin-right: 10px; - - .collectionViewBaseChrome-viewSpecsMenu-rowLeft, - .collectionViewBaseChrome-viewSpecsMenu-rowMiddle, - .collectionViewBaseChrome-viewSpecsMenu-rowRight { - font-size: 75%; - letter-spacing: 2px; - color: grey; - margin-left: 10px; - padding: 5px; - border: none; - outline-color: black; - } - } - - .collectionViewBaseChrome-viewSpecsMenu-lastRow { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - grid-gap: 10px; - margin: 10px; - } - } - } } button:hover { -- cgit v1.2.3-70-g09d2