aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes')
-rw-r--r--src/client/views/nodes/AudioBox.scss153
-rw-r--r--src/client/views/nodes/AudioBox.tsx6
-rw-r--r--src/client/views/nodes/ColorBox.tsx2
-rw-r--r--src/client/views/nodes/DocumentLinksButton.tsx2
-rw-r--r--src/client/views/nodes/DocumentView.tsx34
-rw-r--r--src/client/views/nodes/ImageBox.tsx11
-rw-r--r--src/client/views/nodes/LinkDocPreview.tsx2
-rw-r--r--src/client/views/nodes/PDFBox.scss325
-rw-r--r--src/client/views/nodes/PDFBox.tsx9
-rw-r--r--src/client/views/nodes/PresBox.scss65
-rw-r--r--src/client/views/nodes/RadialMenu.tsx6
-rw-r--r--src/client/views/nodes/formattedText/FormattedTextBox.scss297
-rw-r--r--src/client/views/nodes/formattedText/FormattedTextBox.tsx5
13 files changed, 691 insertions, 226 deletions
diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index 53b54d7e4..c959b79f5 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -1,141 +1,169 @@
-.audiobox-container, .audiobox-container-interactive {
+.audiobox-container,
+.audiobox-container-interactive {
width: 100%;
height: 100%;
position: inherit;
- display:flex;
+ display: flex;
pointer-events: all;
- cursor:default;
+ cursor: default;
+
.audiobox-buttons {
display: flex;
width: 100%;
align-items: center;
}
+
.audiobox-handle {
- width:20px;
- height:100%;
- display:inline-block;
+ width: 20px;
+ height: 100%;
+ display: inline-block;
}
- .audiobox-control, .audiobox-control-interactive {
- top:0;
+
+ .audiobox-control,
+ .audiobox-control-interactive {
+ top: 0;
max-height: 32px;
width: 100%;
- display:inline-block;
+ display: inline-block;
pointer-events: none;
}
+
.audiobox-control-interactive {
pointer-events: all;
}
+
.audiobox-record {
pointer-events: all;
- width:100%;
- height:100%;
+ width: 100%;
+ height: 100%;
position: relative;
pointer-events: none;
}
+
.audiobox-record-interactive {
pointer-events: all;
- width:100%;
- height:100%;
+ width: 100%;
+ height: 100%;
position: relative;
}
+
.audiobox-controls {
- width:100%;
- height:100%;
+ width: 100%;
+ height: 100%;
position: relative;
display: flex;
padding-left: 2px;
+
.audiobox-player {
- margin-top:auto;
- margin-bottom:auto;
- width:100%;
+ margin-top: auto;
+ margin-bottom: auto;
+ width: 100%;
height: 80%;
position: relative;
padding-right: 5px;
display: flex;
- .audiobox-playhead, .audiobox-dictation {
+
+ .audiobox-playhead,
+ .audiobox-dictation {
position: relative;
margin-top: auto;
margin-bottom: auto;
width: 25px;
padding: 2px;
}
+
.audiobox-dictation {
align-items: center;
display: inherit;
background: dimgray;
}
+
.audiobox-timeline {
- position:relative;
- height:100%;
- width:100%;
+ position: relative;
+ height: 100%;
+ width: 100%;
background: white;
border: gray solid 1px;
border-radius: 3px;
+
.audiobox-current {
width: 1px;
- height:100%;
+ height: 100%;
background-color: red;
position: absolute;
}
- .audiobox-linker, .audiobox-linker-mini {
- position:absolute;
- width:15px;
- min-height:10px;
- height:15px;
- margin-left:-2.55px;
- background:gray;
+
+ .audiobox-linker,
+ .audiobox-linker-mini {
+ position: absolute;
+ width: 15px;
+ min-height: 10px;
+ height: 15px;
+ margin-left: -2.55px;
+ background: gray;
border-radius: 100%;
- opacity:0.9;
+ opacity: 0.9;
background-color: transparent;
box-shadow: black 2px 2px 1px;
+
.linkAnchorBox-cont {
position: relative !important;
- height: 100% !important;
+ height: 100% !important;
width: 100% !important;
- left:unset !important;
- top:unset !important;
+ left: unset !important;
+ top: unset !important;
}
}
+
.audiobox-linker-mini {
- width:8px;
- min-height:8px;
- height:8px;
+ width: 8px;
+ min-height: 8px;
+ height: 8px;
box-shadow: black 1px 1px 1px;
margin-left: -1;
margin-top: -2;
+
.linkAnchorBox-cont {
position: relative !important;
- height: 100% !important;
+ height: 100% !important;
width: 100% !important;
- left:unset !important;
- top:unset !important;
+ left: unset !important;
+ top: unset !important;
}
}
- .audiobox-linker:hover, .audiobox-linker-mini:hover {
- opacity:1;
+
+ .audiobox-linker:hover,
+ .audiobox-linker-mini:hover {
+ opacity: 1;
}
- .audiobox-marker-container, .audiobox-marker-minicontainer {
- position:absolute;
- width:10px;
- height:90%;
- top:2.5%;
- background:gray;
+
+ .audiobox-marker-container,
+ .audiobox-marker-minicontainer {
+ position: absolute;
+ width: 10px;
+ height: 90%;
+ top: 2.5%;
+ background: gray;
border-radius: 5px;
box-shadow: black 2px 2px 1px;
+
.audiobox-marker {
- position:relative;
+ position: relative;
height: calc(100% - 15px);
margin-top: 15px;
}
+
.audio-marker:hover {
border: orange 2px solid;
}
}
+
.audiobox-marker-minicontainer {
- width:5px;
+ width: 5px;
border-radius: 1px;
+
.audiobox-marker {
- position:relative;
+ position: relative;
height: calc(100% - 8px);
margin-top: 8px;
}
@@ -143,4 +171,27 @@
}
}
}
+}
+
+
+@media only screen and (max-device-width: 480px) {
+ .audiobox-dictation {
+ font-size: 5em;
+ display: flex;
+ width: 100;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .audiobox-container .audiobox-record,
+ .audiobox-container-interactive .audiobox-record {
+ font-size: 3em;
+ }
+
+ .audiobox-container .audiobox-controls .audiobox-player .audiobox-playhead,
+ .audiobox-container .audiobox-controls .audiobox-player .audiobox-dictation,
+ .audiobox-container-interactive .audiobox-controls .audiobox-player .audiobox-playhead {
+ width: 70px;
+ }
} \ No newline at end of file
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 1a935d9b0..d5288fff6 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -161,7 +161,7 @@ export class AudioBox extends ViewBoxBaseComponent<FieldViewProps, AudioDocument
const funcs: ContextMenuProps[] = [];
funcs.push({ description: (this.layoutDoc.playOnSelect ? "Don't play" : "Play") + " when document selected", event: () => this.layoutDoc.playOnSelect = !this.layoutDoc.playOnSelect, icon: "expand-arrows-alt" });
- ContextMenu.Instance.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" });
+ ContextMenu.Instance?.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" });
}
stopRecording = action(() => {
@@ -193,7 +193,7 @@ export class AudioBox extends ViewBoxBaseComponent<FieldViewProps, AudioDocument
const newDoc = Docs.Create.TextDocument("", {
title: "", _chromeStatus: "disabled",
x: NumCast(this.props.Document.x), y: NumCast(this.props.Document.y) + NumCast(this.props.Document._height) + 10,
- _width: NumCast(this.props.Document._width), _height: 3 * NumCast(this.props.Document._height)
+ _width: NumCast(this.props.Document._width), _height: 2 * NumCast(this.props.Document._height)
});
Doc.GetProto(newDoc).recordingSource = this.dataDoc;
Doc.GetProto(newDoc).recordingStart = ComputedField.MakeFunction(`self.recordingSource["${this.props.fieldKey}-recordingStart"]`);
@@ -228,7 +228,7 @@ export class AudioBox extends ViewBoxBaseComponent<FieldViewProps, AudioDocument
{!this.path ?
<div className="audiobox-buttons">
<div className="audiobox-dictation" onClick={this.onFile}>
- <FontAwesomeIcon style={{ width: "30px", background: this.layoutDoc.playOnSelect ? "yellow" : "dimGray" }} icon="file-alt" size={this.props.PanelHeight() < 36 ? "1x" : "2x"} />
+ <FontAwesomeIcon style={{ width: "30px", background: this.layoutDoc.playOnSelect ? "yellow" : "rgba(0,0,0,0)" }} icon="file-alt" size={this.props.PanelHeight() < 36 ? "1x" : "2x"} />
</div>
<button className={`audiobox-record${interactive}`} style={{ backgroundColor: this.audioState === "recording" ? "red" : "black" }}>
{this.audioState === "recording" ? "STOP" : "RECORD"}
diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx
index 137b387c0..b3a9b6fee 100644
--- a/src/client/views/nodes/ColorBox.tsx
+++ b/src/client/views/nodes/ColorBox.tsx
@@ -71,4 +71,4 @@ export class ColorBox extends ViewBoxBaseComponent<FieldViewProps, ColorDocument
</div>
</div>;
}
-} \ No newline at end of file
+}
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index 4f4f12521..3940b7a98 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -101,4 +101,4 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
render() {
return this.linkButton;
}
-} \ No newline at end of file
+}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 09eeaee36..98adab5fa 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -29,7 +29,6 @@ import { SelectionManager } from "../../util/SelectionManager";
import SharingManager from '../../util/SharingManager';
import { Transform } from "../../util/Transform";
import { undoBatch, UndoManager } from "../../util/UndoManager";
-import { CollectionDockingView } from "../collections/CollectionDockingView";
import { CollectionView, CollectionViewType } from '../collections/CollectionView';
import { ContextMenu } from "../ContextMenu";
import { ContextMenuProps } from '../ContextMenuItem';
@@ -42,6 +41,7 @@ import { LinkAnchorBox } from './LinkAnchorBox';
import { RadialMenu } from './RadialMenu';
import React = require("react");
import { DocumentLinksButton } from './DocumentLinksButton';
+import { MobileInterface } from '../../../mobile/MobileInterface';
library.add(fa.faEdit, fa.faTrash, fa.faShare, fa.faDownload, fa.faExpandArrowsAlt, fa.faCompressArrowsAlt, fa.faLayerGroup, fa.faExternalLinkAlt, fa.faAlignCenter, fa.faCaretSquareRight,
fa.faSquare, fa.faConciergeBell, fa.faWindowRestore, fa.faFolder, fa.faMapPin, fa.faLink, fa.faFingerprint, fa.faCrosshairs, fa.faDesktop, fa.faUnlock, fa.faLock, fa.faLaptopCode, fa.faMale,
@@ -181,10 +181,11 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
const pt = me.touchEvent.touches[me.touchEvent.touches.length - 1];
RadialMenu.Instance.openMenu(pt.pageX - 15, pt.pageY - 15);
- RadialMenu.Instance.addItem({ description: "Open Fields", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "onRight"), icon: "map-pin", selected: -1 });
- RadialMenu.Instance.addItem({ description: "Delete this document", event: () => { this.props.ContainingCollectionView?.removeDocument(this.props.Document), RadialMenu.Instance.closeMenu(); }, icon: "layer-group", selected: -1 });
- RadialMenu.Instance.addItem({ description: "Open in a new tab", event: () => this.props.addDocTab(this.props.Document, "onRight"), icon: "trash", selected: -1 });
- RadialMenu.Instance.addItem({ description: "Pin to Presentation", event: () => this.props.pinToPres(this.props.Document), icon: "folder", selected: -1 });
+ // RadialMenu.Instance.addItem({ description: "Open Fields", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "onRight"), icon: "map-pin", selected: -1 });
+ RadialMenu.Instance.addItem({ description: "Delete", event: () => { this.props.ContainingCollectionView?.removeDocument(this.props.Document), RadialMenu.Instance.closeMenu(); }, icon: "external-link-square-alt", selected: -1 });
+ // RadialMenu.Instance.addItem({ description: "Open in a new tab", event: () => this.props.addDocTab(this.props.Document, "onRight"), icon: "trash", selected: -1 });
+ RadialMenu.Instance.addItem({ description: "Pin", event: () => this.props.pinToPres(this.props.Document), icon: "map-pin", selected: -1 });
+ RadialMenu.Instance.addItem({ description: "Open", event: () => MobileInterface.Instance.handleClick(this.props.Document), icon: "trash", selected: -1 });
SelectionManager.DeselectAll();
}
@@ -345,12 +346,12 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
// depending on the followLinkLocation property of the source (or the link itself as a fallback);
followLinkClick = async (altKey: boolean, ctrlKey: boolean, shiftKey: boolean) => {
const batch = UndoManager.StartBatch("follow link click");
- // open up target if it's not already in view ...
+ // open up target if it's not already in view ...
const createViewFunc = (doc: Doc, followLoc: string, finished: Opt<() => void>) => {
const targetFocusAfterDocFocus = () => {
const where = StrCast(this.Document.followLinkLocation) || followLoc;
const hackToCallFinishAfterFocus = () => {
- finished && setTimeout(finished, 0); // finished() needs to be called right after hackToCallFinishAfterFocus(), but there's no callback for that so we use the hacky timeout.
+ finished && setTimeout(finished, 0); // finished() needs to be called right after hackToCallFinishAfterFocus(), but there's no callback for that so we use the hacky timeout.
return false; // we must return false here so that the zoom to the document is not reversed. If it weren't for needing to call finished(), we wouldn't need this function at all since not having it is equivalent to returning false
};
this.props.addDocTab(doc, where) && this.props.focus(doc, BoolCast(this.Document.followLinkZoom, true), undefined, hackToCallFinishAfterFocus); // add the target and focus on it.
@@ -724,17 +725,18 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
return;
}
e.persist();
- e?.stopPropagation();
+ e.stopPropagation();
- if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3 ||
- e.isDefaultPrevented()) {
- e.preventDefault();
+ if (Math.abs(this._downX - e?.clientX) > 3 || Math.abs(this._downY - e?.clientY) > 3 ||
+ e?.isDefaultPrevented()) {
+ e?.preventDefault();
return;
}
e.preventDefault();
}
const cm = ContextMenu.Instance;
+ if (!cm) return;
const customScripts = Cast(this.props.Document.contextMenuScripts, listSpec(ScriptField), []);
Cast(this.props.Document.contextMenuLabels, listSpec("string"), []).forEach((label, i) =>
@@ -875,7 +877,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
// DocumentViews should stop propagation of this event
e.stopPropagation();
}
- ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15);
+ cm.displayMenu(e.pageX - 15, e.pageY - 15);
!SelectionManager.IsSelected(this, true) && SelectionManager.SelectDoc(this, false);
});
const path = this.props.LibraryPath.reduce((p: string, d: Doc) => p + "/" + (Doc.AreProtosEqual(d, (Doc.UserDoc()["tabs-button-library"] as Doc).sourcePanel as Doc) ? "" : d.title), "");
@@ -943,7 +945,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
recommendations.documentIconHeight = 150;
recommendations.sourceDoc = this.props.Document;
recommendations.sourceDocContext = this.props.ContainingCollectionView!.props.Document;
- CollectionDockingView.AddRightSplit(recommendations, undefined);
+ this.props.addDocTab(recommendations, "onRight");
// RecommendationsBox.Instance.displayRecommendations(e.pageX + 100, e.pageY);
}
@@ -975,13 +977,13 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
body.href = urls[i];
bodies.push(body);
}
- CollectionDockingView.AddRightSplit(Docs.Create.SchemaDocument(headers, bodies, { title: `Showing External Recommendations for "${StrCast(doc.title)}"` }), undefined);
+ this.props.addDocTab(Docs.Create.SchemaDocument(headers, bodies, { title: `Showing External Recommendations for "${StrCast(doc.title)}"` }), "onRight");
this._showKPQuery = true;
this._queries = kps.toString();
}
// does Document set a layout prop
- // does Document set a layout prop
+ // does Document set a layout prop
setsLayoutProp = (prop: string) => this.props.Document[prop] !== this.props.Document["default" + prop[0].toUpperCase() + prop.slice(1)] && this.props.Document["default" + prop[0].toUpperCase() + prop.slice(1)];
// get the a layout prop by first choosing the prop from Document, then falling back to the layout doc otherwise.
getLayoutPropStr = (prop: string) => StrCast(this.setsLayoutProp(prop) ? this.props.Document[prop] : this.layoutDoc[prop]);
@@ -1233,4 +1235,4 @@ Scripting.addGlobal(function toggleDetail(doc: any, layoutKey: string, otherKey:
const dv = DocumentManager.Instance.getDocumentView(doc);
if (dv?.props.Document.layoutKey === layoutKey) dv?.switchViews(otherKey !== "layout", otherKey.replace("layout_", ""));
else dv?.switchViews(true, layoutKey.replace("layout_", ""));
-}); \ No newline at end of file
+});
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index c1c6f6baf..d16aa528c 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -120,7 +120,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps, ImageD
});
const files = await res.json();
const url = Utils.prepend(files[0].path);
- // upload to server with known URL
+ // upload to server with known URL
const audioDoc = Docs.Create.AudioDocument(url, { title: "audio test", _width: 200, _height: 32 });
audioDoc.treeViewExpandedView = "layout";
const audioAnnos = Cast(this.dataDoc[this.fieldKey + "-audioAnnotations"], listSpec(Doc));
@@ -174,14 +174,14 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps, ImageD
// }), icon: "expand-arrows-alt"
// });
- const existingAnalyze = ContextMenu.Instance.findByDescription("Analyzers...");
+ const existingAnalyze = ContextMenu.Instance?.findByDescription("Analyzers...");
const modes: ContextMenuProps[] = existingAnalyze && "subitems" in existingAnalyze ? existingAnalyze.subitems : [];
modes.push({ description: "Generate Tags", event: this.generateMetadata, icon: "tag" });
modes.push({ description: "Find Faces", event: this.extractFaces, icon: "camera" });
//modes.push({ description: "Recommend", event: this.extractText, icon: "brain" });
- !existingAnalyze && ContextMenu.Instance.addItem({ description: "Analyzers...", subitems: modes, icon: "hand-point-right" });
+ !existingAnalyze && ContextMenu.Instance?.addItem({ description: "Analyzers...", subitems: modes, icon: "hand-point-right" });
- ContextMenu.Instance.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" });
+ ContextMenu.Instance?.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" });
}
}
@@ -236,6 +236,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps, ImageD
if (this._curSuffix === "_m") this._mediumRetryCount++;
if (this._curSuffix === "_l") this._largeRetryCount++;
}
+
@action onError = (error: any) => {
const timeout = this._curSuffix === "_s" ? this._smallRetryCount : this._curSuffix === "_m" ? this._mediumRetryCount : this._largeRetryCount;
if (timeout < 5) {
@@ -490,4 +491,4 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps, ImageD
</CollectionFreeFormView>
</div >);
}
-} \ No newline at end of file
+}
diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx
index 92b443d3b..e8a08abb5 100644
--- a/src/client/views/nodes/LinkDocPreview.tsx
+++ b/src/client/views/nodes/LinkDocPreview.tsx
@@ -104,4 +104,4 @@ export class LinkDocPreview extends React.Component<Props> {
{this.targetDocView}
</div>;
}
-} \ No newline at end of file
+}
diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss
index c6a83b662..f2ab37984 100644
--- a/src/client/views/nodes/PDFBox.scss
+++ b/src/client/views/nodes/PDFBox.scss
@@ -5,24 +5,26 @@
height: 100%;
width: 100%;
overflow: hidden;
- cursor:auto;
+ cursor: auto;
transform-origin: top left;
z-index: 0;
+
.pdfBox-ui {
position: absolute;
- width: 100%;
- height: 100%;
- z-index: 1;
- pointer-events: none;
+ width: 100%;
+ height: 100%;
+ z-index: 1;
+ pointer-events: none;
- .pdfBox-pageNums {
+ .pdfBox-pageNums {
display: flex;
flex-direction: row;
height: 25px;
position: absolute;
left: 5px;
top: 5px;
- .pdfBox-overlayButton-fwd,
+
+ .pdfBox-overlayButton-fwd,
.pdfBox-overlayButton-back {
background: #121721;
height: 25px;
@@ -34,29 +36,29 @@
border-radius: 3px;
pointer-events: all;
}
- }
-
- .pdfBox-overlayButton {
- border-bottom-left-radius: 50%;
- display: flex;
- justify-content: space-evenly;
- align-items: center;
- height: 20px;
- background: none;
- padding: 0;
- position: absolute;
- pointer-events: all;
-
- .pdfBox-overlayButton-arrow {
- width: 0;
- height: 0;
- border-top: 10px solid transparent;
- border-bottom: 10px solid transparent;
- border-right: 15px solid #121721;
- transition: all 0.5s;
- }
-
- .pdfBox-overlayButton-iconCont {
+ }
+
+ .pdfBox-overlayButton {
+ border-bottom-left-radius: 50%;
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+ height: 20px;
+ background: none;
+ padding: 0;
+ position: absolute;
+ pointer-events: all;
+
+ .pdfBox-overlayButton-arrow {
+ width: 0;
+ height: 0;
+ border-top: 10px solid transparent;
+ border-bottom: 10px solid transparent;
+ border-right: 15px solid #121721;
+ transition: all 0.5s;
+ }
+
+ .pdfBox-overlayButton-iconCont {
background: #121721;
height: 20px;
width: 25px;
@@ -66,11 +68,11 @@
justify-content: center;
border-radius: 3px;
pointer-events: all;
- }
+ }
}
- .pdfBox-nextIcon,
- .pdfBox-prevIcon {
+ .pdfBox-nextIcon,
+ .pdfBox-prevIcon {
background: #121721;
height: 20px;
width: 25px;
@@ -81,96 +83,97 @@
border-radius: 3px;
pointer-events: all;
padding: 0px;
- }
-
- .pdfBox-overlayButton:hover {
- background: none;
- }
-
-
- .pdfBox-settingsCont {
- position: absolute;
- right: 0;
- top: 3;
- pointer-events: all;
-
- .pdfBox-settingsButton {
- border-bottom-left-radius: 50%;
- display: flex;
- justify-content: space-evenly;
- align-items: center;
- height: 20px;
- background: none;
- padding: 0;
-
- .pdfBox-settingsButton-arrow {
- width: 0;
- height: 0;
- border-top: 10px solid transparent;
- border-bottom: 10px solid transparent;
- border-right: 15px solid #121721;
- transition: all 0.5s;
- }
-
- .pdfBox-settingsButton-iconCont {
- background: #121721;
- height: 20px;
- width: 25px;
- display: flex;
- justify-content: center;
- align-items: center;
- margin-left: -2px;
- border-radius: 3px;
- }
- }
-
- .pdfBox-settingsButton:hover {
- background: none;
- }
-
- .pdfBox-settingsFlyout {
- position: absolute;
- background: #323232;
- box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
- right: 20px;
- border-radius: 7px;
- padding: 20px;
- display: flex;
- flex-direction: column;
- font-size: 14px;
- transition: all 0.5s;
-
- .pdfBox-settingsFlyout-title {
- color: white;
- }
-
- .pdfBox-settingsFlyout-kvpInput {
- margin-top: 20px;
- display: grid;
- grid-template-columns: 47.5% 5% 47.5%;
- }
- }
- }
-
- .pdfBox-overlayCont {
- position: absolute;
- width: calc(100% - 40px);
- height: 20px;
- background: #121721;
- bottom: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- overflow: hidden;
- transition: left .5s;
- pointer-events: all;
-
- .pdfBox-searchBar {
- width: 70%;
- font-size: 14px;
- }
- }
+ }
+
+ .pdfBox-overlayButton:hover {
+ background: none;
+ }
+
+
+ .pdfBox-settingsCont {
+ position: absolute;
+ right: 0;
+ top: 3;
+ pointer-events: all;
+
+ .pdfBox-settingsButton {
+ border-bottom-left-radius: 50%;
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+ height: 20px;
+ background: none;
+ padding: 0;
+
+ .pdfBox-settingsButton-arrow {
+ width: 0;
+ height: 0;
+ border-top: 10px solid transparent;
+ border-bottom: 10px solid transparent;
+ border-right: 15px solid #121721;
+ transition: all 0.5s;
+ }
+
+ .pdfBox-settingsButton-iconCont {
+ background: #121721;
+ height: 20px;
+ width: 25px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-left: -2px;
+ border-radius: 3px;
+ }
+ }
+
+ .pdfBox-settingsButton:hover {
+ background: none;
+ }
+
+ .pdfBox-settingsFlyout {
+ position: absolute;
+ background: #323232;
+ box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
+ right: 20px;
+ border-radius: 7px;
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ font-size: 14px;
+ transition: all 0.5s;
+
+ .pdfBox-settingsFlyout-title {
+ color: white;
+ }
+
+ .pdfBox-settingsFlyout-kvpInput {
+ margin-top: 20px;
+ display: grid;
+ grid-template-columns: 47.5% 5% 47.5%;
+ }
+ }
+ }
+
+ .pdfBox-overlayCont {
+ position: absolute;
+ width: calc(100% - 40px);
+ height: 20px;
+ background: #121721;
+ bottom: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ overflow: hidden;
+ transition: left .5s;
+ pointer-events: all;
+
+ .pdfBox-searchBar {
+ width: 70%;
+ font-size: 14px;
+ }
+ }
}
+
.pdfBox-title-outer {
width: 150%;
height: 100%;
@@ -179,9 +182,9 @@
z-index: 0;
background: lightslategray;
transform-origin: top left;
-
+
.pdfBox-title {
- color:lightgray;
+ color: lightgray;
margin-top: auto;
margin-bottom: auto;
transform-origin: 42% 15%;
@@ -217,4 +220,76 @@
}
}
}
-} \ No newline at end of file
+}
+
+// CSS adjusted for mobile devices
+@media only screen and (max-device-width: 480px) {
+
+ .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton,
+ .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton {
+ height: 60px;
+
+ .pdfBox-settingsButton-iconCont {
+ height: 60px;
+ width: 75px;
+ font-size: 30px;
+ }
+
+ .pdfBox-settingsButton-arrow {
+ height: 60;
+ border-top: 30px solid transparent;
+ border-bottom: 30px solid transparent;
+ border-right: 30px solid #121721;
+ }
+ }
+
+
+
+ .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsFlyout,
+ .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsFlyout {
+ font-size: 30px;
+ }
+
+
+
+ .pdfBox .pdfBox-ui .pdfBox-overlayCont,
+ .pdfBox-interactive .pdfBox-ui .pdfBox-overlayCont {
+ height: 60px;
+
+ .pdfBox-searchBar {
+ font-size: 40px;
+ }
+ }
+
+ .pdfBox .pdfBox-ui .pdfBox-overlayButton,
+ .pdfBox-interactive .pdfBox-ui .pdfBox-overlayButton {
+ height: 60px;
+
+ .pdfBox-overlayButton-iconCont {
+ height: 60px;
+ width: 75px;
+ font-size: 30;
+ }
+
+ .pdfBox-overlayButton-arrow {
+ border-top: 30px solid transparent;
+ border-bottom: 30px solid transparent;
+ border-right: 30px solid #121721;
+ }
+ }
+
+ button.pdfBox-search {
+ font-size: 30px;
+ width: 50px;
+ height: 50px;
+ }
+
+ .pdfBox .pdfBox-ui .pdfBox-nextIcon,
+ .pdfBox .pdfBox-ui .pdfBox-prevIcon,
+ .pdfBox-interactive .pdfBox-ui .pdfBox-nextIcon,
+ .pdfBox-interactive .pdfBox-ui .pdfBox-prevIcon {
+ height: 50px;
+ width: 50px;
+ font-size: 30px;
+ }
+}
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index eb2a85eeb..1c5825a8f 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -157,7 +157,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps, PdfDocum
<div className="pdfBox-overlayCont" key="cont" onPointerDown={(e) => e.stopPropagation()} style={{ left: `${this._searching ? 0 : 100}%` }}>
<button className="pdfBox-overlayButton" title={searchTitle} />
<input className="pdfBox-searchBar" placeholder="Search" ref={this._searchRef} onChange={this.searchStringChanged} onKeyDown={e => e.keyCode === KeyCodes.ENTER && this.search(this._searchString, !e.shiftKey)} />
- <button title="Search" onClick={e => this.search(this._searchString, !e.shiftKey)}>
+ <button className="pdfBox-search" title="Search" onClick={e => this.search(this._searchString, !e.shiftKey)}>
<FontAwesomeIcon icon="search" size="sm" color="white" /></button>
<button className="pdfBox-prevIcon " title="Previous Annotation" onClick={this.prevAnnotation} >
<FontAwesomeIcon style={{ color: "white" }} icon={"arrow-up"} size="lg" />
@@ -189,7 +189,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps, PdfDocum
<FontAwesomeIcon style={{ color: "white" }} icon="cog" size="lg" />
</div>
</button>
- <div className="pdfBox-settingsFlyout" style={{ right: `${this._flyout ? 20 : -600}px` }} >
+ <div className="pdfBox-settingsFlyout" style={{ right: `${this._flyout ? 20 : -1000}px` }} >
<div className="pdfBox-settingsFlyout-title">
Annotation View Settings
</div>
@@ -229,7 +229,8 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps, PdfDocum
const classname = "pdfBox" + (this.active() ? "-interactive" : "");
return <div className={classname} style={{
width: !this.props.Document._fitWidth ? this.Document._nativeWidth || 0 : `${100 / this.contentScaling}%`,
- height: !this.props.Document._fitWidth ? this.Document._nativeHeight || 0 : `${100 / this.contentScaling}%`,
+ //height adjusted for mobile (window.screen.width > 600)
+ height: !this.props.Document._fitWidth && (window.screen.width > 600) ? this.Document._nativeHeight || 0 : `${100 / this.contentScaling}%`,
transform: `scale(${this.contentScaling})`
}} >
<div className="pdfBox-title-outer">
@@ -241,7 +242,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps, PdfDocum
isChildActive = (outsideReaction?: boolean) => this._isChildActive;
@computed get renderPdfView() {
const pdfUrl = Cast(this.dataDoc[this.props.fieldKey], PdfField);
- return <div className={"pdfBox"} onContextMenu={this.specificContextMenu} style={{ height: this.props.Document._scrollTop && !this.Document._fitWidth ? NumCast(this.Document._height) * this.props.PanelWidth() / NumCast(this.Document._width) : undefined }}>
+ return <div className={"pdfBox"} onContextMenu={this.specificContextMenu} style={{ height: this.props.Document._scrollTop && !this.Document._fitWidth && (window.screen.width > 600) ? NumCast(this.Document._height) * this.props.PanelWidth() / NumCast(this.Document._width) : undefined }}>
<PDFViewer {...this.props} pdf={this._pdf!} url={pdfUrl!.url.pathname} active={this.props.active} loaded={this.loaded}
setPdfViewer={this.setPdfViewer} ContainingCollectionView={this.props.ContainingCollectionView}
renderDepth={this.props.renderDepth} PanelHeight={this.props.PanelHeight} PanelWidth={this.props.PanelWidth}
diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index d48000e16..9f6af1bde 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -16,6 +16,7 @@
height: calc(100% - 25px);
width: 100%;
}
+
.presBox-buttons {
width: 100%;
background: gray;
@@ -24,6 +25,7 @@
display: grid;
grid-column-end: 4;
grid-column-start: 1;
+
.presBox-viewPicker {
height: 25;
position: relative;
@@ -31,10 +33,12 @@
grid-column: 1/2;
min-width: 15px;
}
+
select {
background: #323232;
color: white;
}
+
.presBox-button {
margin-right: 2.5%;
margin-left: 2.5%;
@@ -44,10 +48,12 @@
align-items: center;
background: #323232;
color: white;
+
svg {
margin: auto;
}
}
+
.collectionViewBaseChrome-viewPicker {
min-width: 50;
width: 5%;
@@ -56,17 +62,68 @@
display: inline-block;
}
}
- .presBox-backward, .presBox-forward {
+
+ .presBox-backward,
+ .presBox-forward {
width: 25px;
border-radius: 5px;
- top:50%;
+ top: 50%;
position: absolute;
display: inline-block;
}
+
.presBox-backward {
- left:5;
+ left: 5;
}
+
.presBox-forward {
- right:5;
+ right: 5;
+ }
+}
+
+// CSS adjusted for mobile devices
+@media only screen and (max-device-width: 480px) {
+ .presBox-cont .presBox-buttons {
+ position: absolute;
+ top: 70%;
+ left: 50%;
+ transform: translate(-50%, 0);
+ width: max-content;
+ height: 15%;
+ z-index: 2;
+ align-items: center;
+ background: rgba(0, 0, 0, 0);
+ display: inline-flex;
+
+ .presBox-button {
+ margin-top: 5%;
+ height: 250;
+ width: 300;
+ font-size: 100;
+ display: flex;
+ align-items: center;
+ background: #323232;
+ color: white;
+ }
+
+ .presBox-viewPicker {
+ top: -70;
+ left: 2.5%;
+ height: 50;
+ width: 95%;
+ font-size: 30px;
+ position: absolute;
+ min-width: 50px;
+ }
+ }
+
+ .presBox-cont .presBox-listCont {
+ top: 50;
+ height: calc(100% - 80px);
+ }
+
+ .input,
+ .select {
+ font-size: 100%;
}
} \ No newline at end of file
diff --git a/src/client/views/nodes/RadialMenu.tsx b/src/client/views/nodes/RadialMenu.tsx
index ddfdb67b4..a3ac09a11 100644
--- a/src/client/views/nodes/RadialMenu.tsx
+++ b/src/client/views/nodes/RadialMenu.tsx
@@ -1,7 +1,6 @@
import React = require("react");
import { action, computed, IReactionDisposer, observable, reaction, runInAction } from "mobx";
import { observer } from "mobx-react";
-import MobileInterface from "../../../mobile/MobileInterface";
import "./RadialMenu.scss";
import { RadialMenuItem, RadialMenuProps } from "./RadialMenuItem";
@@ -26,7 +25,6 @@ export class RadialMenu extends React.Component {
catchTouch = (te: React.TouchEvent) => {
- console.log("caught");
te.stopPropagation();
te.preventDefault();
}
@@ -38,7 +36,6 @@ export class RadialMenu extends React.Component {
this._mouseY = e.clientY;
this.used = false;
document.addEventListener("pointermove", this.onPointerMove);
-
}
@observable
@@ -176,7 +173,6 @@ export class RadialMenu extends React.Component {
@action
openMenu = (x: number, y: number) => {
-
this._pageX = x;
this._pageY = y;
this._shouldDisplay;
@@ -216,7 +212,7 @@ export class RadialMenu extends React.Component {
render() {
- if (!this._display || MobileInterface.Instance) {
+ if (!this._display) {
return null;
}
const style = this._yRelativeToTop ? { left: this._pageX - 130, top: this._pageY - 130 } :
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss
index 678494b27..0a094ba6a 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.scss
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss
@@ -37,6 +37,7 @@
position: absolute;
}
}
+
.formattedTextBox-outer {
position: relative;
overflow: auto;
@@ -72,7 +73,7 @@
.collectionfreeformview-container {
position: relative;
}
-
+
>.formattedTextBox-sidebar-handle {
right: unset;
left: -5;
@@ -95,7 +96,7 @@
.formattedTextBox-inner-rounded, .formattedTextBox-inner-rounded-selected,
.formattedTextBox-inner, .formattedTextBox-inner-selected {
height: 100%;
- white-space: pre-wrap;
+ white-space: pre-wrap;
.ProseMirror:hover {
background: rgba(200,200,200,0.8);
}
@@ -262,19 +263,19 @@ footnote::after {
border:unset;
padding:0px;
}
-
+
.prosemirror-links a {
float: left;
color: white;
text-decoration: none;
border-radius: 3px;
}
-
+
.prosemirror-links a:hover {
background-color: #eee;
color: black;
}
-
+
.prosemirror-anchor:hover .prosemirror-links {
display: grid;
}
@@ -321,7 +322,7 @@ footnote::after {
.multi2-ol { counter-reset: multi2; p {display: inline-block; font-family: inherit} font-size: smaller; padding-left: 1.4em;}
.multi3-ol { counter-reset: multi3; p {display: inline-block; font-family: inherit} font-size: smaller; padding-left: 2em;}
.multi4-ol { counter-reset: multi4; p {display: inline-block; font-family: inherit} font-size: smaller; padding-left: 3.4em;}
-
+
.bullet:before, .bullet1:before, .bullet2:before, .bullet3:before, .bullet4:before, .bullet5:before { transition: 0.5s; display: inline-block; vertical-align: top; margin-left: -1em; width: 1em; content:" " }
.decimal1:before { transition: 0.5s;counter-increment: deci1; display: inline-block; vertical-align: top; margin-left: -1em; width: 1em; content: counter(deci1) ". "; }
@@ -331,7 +332,7 @@ footnote::after {
.decimal5:before { transition: 0.5s;counter-increment: deci5; display: inline-block; vertical-align: top; margin-left: -2em; width: 5em; content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) ". "; }
.decimal6:before { transition: 0.5s;counter-increment: deci6; display: inline-block; vertical-align: top; margin-left: -2em; width: 6em; content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) "."counter(deci6) ". "; }
.decimal7:before { transition: 0.5s;counter-increment: deci7; display: inline-block; vertical-align: top; margin-left: -2em; width: 7em; content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) "."counter(deci6) "."counter(deci7) ". "; }
-
+
.multi1:before { transition: 0.5s;counter-increment: multi1; display: inline-block; vertical-align: top; margin-left: -1em; width: 1.2em; content: counter(multi1, upper-alpha) ". "; }
.multi2:before { transition: 0.5s;counter-increment: multi2; display: inline-block; vertical-align: top; margin-left: -2em; width: 2em; content: counter(multi1, upper-alpha) "."counter(multi2, decimal) ". "; }
.multi3:before { transition: 0.5s;counter-increment: multi3; display: inline-block; vertical-align: top; margin-left: -2.85em; width:2.85em; content: counter(multi1, upper-alpha) "."counter(multi2, decimal) "."counter(multi3, lower-alpha) ". "; }
@@ -346,4 +347,284 @@ footnote::after {
.ProseMirror:hover {
background: unset;
}
-} \ No newline at end of file
+}
+
+@media only screen and (max-width: 1000px) {
+ @import "../../globalCssVariables";
+
+ .ProseMirror {
+ width: 100%;
+ height: 100%;
+ min-height: 100%;
+ }
+
+ .ProseMirror:focus {
+ outline: none !important;
+ }
+
+ .formattedTextBox-cont {
+ touch-action: none;
+ cursor: text;
+ background: inherit;
+ padding: 0;
+ border-width: 0px;
+ border-radius: inherit;
+ border-color: $intermediate-color;
+ box-sizing: border-box;
+ background-color: inherit;
+ border-style: solid;
+ overflow-y: auto;
+ overflow-x: hidden;
+ color: initial;
+ max-height: 100%;
+ display: flex;
+ flex-direction: row;
+ transition: opacity 1s;
+
+ .formattedTextBox-dictation {
+ height: 12px;
+ width: 10px;
+ top: 0px;
+ left: 0px;
+ position: absolute;
+ }
+ }
+
+ .formattedTextBox-outer {
+ position: relative;
+ overflow: auto;
+ display: inline-block;
+ width: 100%;
+ height: 100%;
+ }
+
+ .formattedTextBox-sidebar-handle {
+ position: absolute;
+ top: calc(50% - 17.5px);
+ width: 10px;
+ height: 35px;
+ background: lightgray;
+ border-radius: 20px;
+ cursor:grabbing;
+ }
+
+ .formattedTextBox-cont>.formattedTextBox-sidebar-handle {
+ right: 0;
+ left: unset;
+ }
+
+ .formattedTextBox-sidebar,
+ .formattedTextBox-sidebar-inking {
+ border-left: dashed 1px black;
+ height: 100%;
+ display: inline-block;
+ position: absolute;
+ right: 0;
+
+ .collectionfreeformview-container {
+ position: relative;
+ }
+
+ >.formattedTextBox-sidebar-handle {
+ right: unset;
+ left: -5;
+ }
+ }
+
+ .formattedTextBox-sidebar-inking {
+ pointer-events: all;
+ }
+
+ .formattedTextBox-inner-rounded {
+ height: 70%;
+ width: 85%;
+ position: absolute;
+ overflow: auto;
+ top: 15%;
+ left: 10%;
+ }
+
+ .formattedTextBox-inner-rounded,
+ .formattedTextBox-inner {
+ height: 100%;
+ white-space: pre-wrap;
+ hr {
+ display: block;
+ unicode-bidi: isolate;
+ margin-block-start: 0.5em;
+ margin-block-end: 0.5em;
+ margin-inline-start: auto;
+ margin-inline-end: auto;
+ overflow: hidden;
+ border-style: inset;
+ border-width: 1px;
+ }
+ }
+
+ // .menuicon {
+ // display: inline-block;
+ // border-right: 1px solid rgba(0, 0, 0, 0.2);
+ // color: #888;
+ // line-height: 1;
+ // padding: 0 7px;
+ // margin: 1px;
+ // cursor: pointer;
+ // text-align: center;
+ // min-width: 1.4em;
+ // }
+
+ .strong,
+ .heading {
+ font-weight: bold;
+ }
+
+ .em {
+ font-style: italic;
+ }
+
+ .userMarkOpen {
+ background: rgba(255, 255, 0, 0.267);
+ display: inline;
+ }
+
+ .userMark {
+ background: rgba(255, 255, 0, 0.267);
+ font-size: 2px;
+ display: inline-grid;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ width: 10px;
+ min-height: 10px;
+ text-align: center;
+ align-content: center;
+ }
+
+ footnote {
+ display: inline-block;
+ position: relative;
+ cursor: pointer;
+
+ div {
+ padding: 0 !important;
+ }
+ }
+
+ footnote::after {
+ content: counter(prosemirror-footnote);
+ vertical-align: super;
+ font-size: 75%;
+ counter-increment: prosemirror-footnote;
+ }
+
+ .ProseMirror {
+ counter-reset: prosemirror-footnote;
+ }
+
+ .footnote-tooltip {
+ cursor: auto;
+ font-size: 75%;
+ position: absolute;
+ left: -30px;
+ top: calc(100% + 10px);
+ background: silver;
+ padding: 3px;
+ border-radius: 2px;
+ max-width: 100px;
+ min-width: 50px;
+ width: max-content;
+ }
+
+ .prosemirror-attribution {
+ font-size: 8px;
+ }
+
+ .footnote-tooltip::before {
+ border: 5px solid silver;
+ border-top-width: 0px;
+ border-left-color: transparent;
+ border-right-color: transparent;
+ position: absolute;
+ top: -5px;
+ left: 27px;
+ content: " ";
+ height: 0;
+ width: 0;
+ }
+
+
+ .formattedTextBox-inlineComment {
+ position: relative;
+ width: 40px;
+ height: 20px;
+ &::before {
+ content: "→";
+ }
+ &:hover {
+ background: orange;
+ }
+ }
+
+ .formattedTextBox-summarizer {
+ opacity: 0.5;
+ position: relative;
+ width: 40px;
+ height: 20px;
+ &::after {
+ content: "←";
+ }
+ }
+
+ .formattedTextBox-summarizer-collapsed {
+ opacity: 0.5;
+ position: relative;
+ width: 40px;
+ height: 20px;
+ &::after {
+ content: "...";
+ }
+ }
+
+ .ProseMirror {
+ touch-action: none;
+ span {
+ font-family: inherit;
+ }
+
+ ol, ul {
+ counter-reset: deci1 0 multi1 0;
+ padding-left: 1em;
+ font-family: inherit;
+ }
+ ol {
+ margin-left: 1em;
+ font-family: inherit;
+ }
+
+ .decimal1-ol { counter-reset: deci1; p {display: inline; font-family: inherit} margin-left: 0; }
+ .decimal2-ol { counter-reset: deci2; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 1em;}
+ .decimal3-ol { counter-reset: deci3; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 2em;}
+ .decimal4-ol { counter-reset: deci4; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 3em;}
+ .decimal5-ol { counter-reset: deci5; p {display: inline; font-family: inherit} font-size: smaller; }
+ .decimal6-ol { counter-reset: deci6; p {display: inline; font-family: inherit} font-size: smaller; }
+ .decimal7-ol { counter-reset: deci7; p {display: inline; font-family: inherit} font-size: smaller; }
+
+ .multi1-ol { counter-reset: multi1; p {display: inline; font-family: inherit} margin-left: 0; padding-left: 1.2em }
+ .multi2-ol { counter-reset: multi2; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 1.4em;}
+ .multi3-ol { counter-reset: multi3; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 2em;}
+ .multi4-ol { counter-reset: multi4; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 3.4em;}
+
+ .decimal1:before { transition: 0.5s;counter-increment: deci1; display: inline-block; margin-left: -1em; width: 1em; content: counter(deci1) ". "; }
+ .decimal2:before { transition: 0.5s;counter-increment: deci2; display: inline-block; margin-left: -2.1em; width: 2.1em; content: counter(deci1) "."counter(deci2) ". "; }
+ .decimal3:before { transition: 0.5s;counter-increment: deci3; display: inline-block; margin-left: -2.85em;width: 2.85em; content: counter(deci1) "."counter(deci2) "."counter(deci3) ". "; }
+ .decimal4:before { transition: 0.5s;counter-increment: deci4; display: inline-block; margin-left: -3.85em;width: 3.85em; content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) ". "; }
+ .decimal5:before { transition: 0.5s;counter-increment: deci5; display: inline-block; margin-left: -2em; width: 5em; content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) ". "; }
+ .decimal6:before { transition: 0.5s;counter-increment: deci6; display: inline-block; margin-left: -2em; width: 6em; content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) "."counter(deci6) ". "; }
+ .decimal7:before { transition: 0.5s;counter-increment: deci7; display: inline-block; margin-left: -2em; width: 7em; content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) "."counter(deci6) "."counter(deci7) ". "; }
+
+ .multi1:before { transition: 0.5s;counter-increment: multi1; display: inline-block; margin-left: -1em; width: 1.2em; content: counter(multi1, upper-alpha) ". "; }
+ .multi2:before { transition: 0.5s;counter-increment: multi2; display: inline-block; margin-left: -2em; width: 2em; content: counter(multi1, upper-alpha) "."counter(multi2, decimal) ". "; }
+ .multi3:before { transition: 0.5s;counter-increment: multi3; display: inline-block; margin-left: -2.85em; width:2.85em; content: counter(multi1, upper-alpha) "."counter(multi2, decimal) "."counter(multi3, lower-alpha) ". "; }
+ .multi4:before { transition: 0.5s;counter-increment: multi4; display: inline-block; margin-left: -4.2em; width: 4.2em; content: counter(multi1, upper-alpha) "."counter(multi2, decimal) "."counter(multi3, lower-alpha) "."counter(multi4, lower-roman) ". "; }
+ }
+}
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 9c7c46ae9..69708e7a0 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -296,7 +296,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
}
public unhighlightSearchTerms = () => {
- if (this._editorView && (this._editorView as any).docView) {
+ if (window.screen.width < 600) null;
+ else if (this._editorView && (this._editorView as any).docView) {
const mark = this._editorView.state.schema.mark(this._editorView.state.schema.marks.search_highlight);
const activeMark = this._editorView.state.schema.mark(this._editorView.state.schema.marks.search_highlight, { selected: true });
const end = this._editorView.state.doc.nodeSize - 2;
@@ -1173,7 +1174,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
e.stopPropagation();
const view = this._editorView as any;
- // this interposes on prosemirror's upHandler to prevent prosemirror's up from invoked multiple times when there
+ // this interposes on prosemirror's upHandler to prevent prosemirror's up from invoked multiple times when there
// are nested prosemirrors. We only want the lowest level prosemirror to be invoked.
if (view.mouseDown) {
const originalUpHandler = view.mouseDown.up;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-12-01 12:59:18 +0000