aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/client/views/MainView.tsx2
-rw-r--r--src/client/views/collections/CollectionVideoView.tsx2
-rw-r--r--src/client/views/collections/collectionFreeForm/MarqueeView.tsx2
-rw-r--r--src/client/views/nodes/PDFBox.tsx2
-rw-r--r--src/client/views/search/IconBar.scss0
-rw-r--r--src/client/views/search/IconBar.tsx0
-rw-r--r--src/client/views/search/SearchBox.scss (renamed from src/client/views/SearchBox.scss)0
-rw-r--r--src/client/views/search/SearchBox.tsx (renamed from src/client/views/SearchBox.tsx)89
-rw-r--r--src/client/views/search/SearchItem.scss (renamed from src/client/views/SearchItem.scss)2
-rw-r--r--src/client/views/search/SearchItem.tsx (renamed from src/client/views/SearchItem.tsx)20
-rw-r--r--src/client/views/search/ToggleBar.scss0
-rw-r--r--src/client/views/search/ToggleBar.tsx74
12 files changed, 100 insertions, 93 deletions
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index b3a0fde8d..307f23df1 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -23,7 +23,7 @@ import "./Main.scss";
import { MainOverlayTextBox } from './MainOverlayTextBox';
import { DocumentView } from './nodes/DocumentView';
import { PreviewCursor } from './PreviewCursor';
-import { SearchBox } from './SearchBox';
+import { SearchBox } from './search/SearchBox';
import { SelectionManager } from '../util/SelectionManager';
import { FieldResult, Field, Doc, Opt, DocListCast } from '../../new_fields/Doc';
import { Cast, FieldValue, StrCast, PromiseValue } from '../../new_fields/Types';
diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx
index 7853544d5..c1a6ca44e 100644
--- a/src/client/views/collections/CollectionVideoView.tsx
+++ b/src/client/views/collections/CollectionVideoView.tsx
@@ -12,7 +12,7 @@ import { Id } from "../../../new_fields/FieldSymbols";
import { VideoBox } from "../nodes/VideoBox";
import { NumCast, Cast, StrCast } from "../../../new_fields/Types";
import { VideoField } from "../../../new_fields/URLField";
-import { SearchBox } from "../SearchBox";
+import { SearchBox } from "../search/SearchBox";
import { DocServer } from "../../DocServer";
import { Docs, DocUtils } from "../../documents/Documents";
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 9ec941eff..658f18f6a 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -14,7 +14,7 @@ import { Transform } from "../../../util/Transform";
import { undoBatch } from "../../../util/UndoManager";
import { InkingCanvas } from "../../InkingCanvas";
import { PreviewCursor } from "../../PreviewCursor";
-import { SearchBox } from "../../SearchBox";
+import { SearchBox } from "../../search/SearchBox";
import { Templates } from "../../Templates";
import { CollectionViewType } from "../CollectionBaseView";
import { CollectionFreeFormView } from "./CollectionFreeFormView";
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index aa29a7170..b1fd54df1 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -15,7 +15,7 @@ import { Utils } from '../../../Utils';
import { DocServer } from "../../DocServer";
import { DocComponent } from "../DocComponent";
import { InkingControl } from "../InkingControl";
-import { SearchBox } from "../SearchBox";
+import { SearchBox } from "../search/SearchBox";
import { Annotation } from './Annotation';
import { positionSchema } from "./DocumentView";
import { FieldView, FieldViewProps } from './FieldView';
diff --git a/src/client/views/search/IconBar.scss b/src/client/views/search/IconBar.scss
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/src/client/views/search/IconBar.scss
diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/src/client/views/search/IconBar.tsx
diff --git a/src/client/views/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 91d17d001..91d17d001 100644
--- a/src/client/views/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
diff --git a/src/client/views/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 812876d14..0dd32d4fa 100644
--- a/src/client/views/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -7,19 +7,20 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import * as rp from 'request-promise';
import { SearchItem } from './SearchItem';
-import { DocServer } from '../DocServer';
-import { Doc } from '../../new_fields/Doc';
-import { Id } from '../../new_fields/FieldSymbols';
-import { SetupDrag } from '../util/DragManager';
-import { Docs, DocTypes } from '../documents/Documents';
-import { RouteStore } from '../../server/RouteStore';
-import { NumCast } from '../../new_fields/Types';
-import { SearchUtil } from '../util/SearchUtil';
+import { DocServer } from '../../DocServer';
+import { Doc } from '../../../new_fields/Doc';
+import { Id } from '../../../new_fields/FieldSymbols';
+import { SetupDrag } from '../../util/DragManager';
+import { Docs, DocTypes } from '../../documents/Documents';
+import { RouteStore } from '../../../server/RouteStore';
+import { NumCast } from '../../../new_fields/Types';
+import { SearchUtil } from '../../util/SearchUtil';
import * as anime from 'animejs';
-import { updateFunction } from '../../new_fields/util';
+import { updateFunction } from '../../../new_fields/util';
import * as _ from "lodash";
// import "./globalCssVariables.scss";
import { findDOMNode } from 'react-dom';
+import { ToggleBar } from './ToggleBar';
// import * as anime from '../../../node_modules/@types';
// const anime = require('lib/anime.js');
@@ -84,7 +85,7 @@ export class IconBar extends React.Component<IconBarProps> {
else {
//turns "none" button off
let noneDoc = document.getElementById(DocTypes.NONE)
- if(noneDoc){
+ if (noneDoc) {
noneDoc.style.backgroundColor = "#121721";
}
if (oldIcons.includes(value)) {
@@ -156,74 +157,6 @@ export class IconBar extends React.Component<IconBarProps> {
}
}
-export interface ToggleBarProps {
- //false = right, true = left
- // status: boolean;
- changeStatus(value: boolean): void;
- optionOne: string;
- optionTwo: string;
-}
-
-//TODO: justify content will align to specific side. Maybe do status passed in and out?
-@observer
-export class ToggleBar extends React.Component<ToggleBarProps>{
-
- @observable _status: boolean = false;
- @observable timeline: anime.AnimeTimelineInstance;
- @observable _toggleButton: React.RefObject<HTMLDivElement>;
-
- constructor(props: ToggleBarProps) {
- super(props);
- this._toggleButton = React.createRef();
- this.timeline = anime.timeline({
- autoplay: false,
- direction: "reverse"
- });
- }
-
- componentDidMount = () => {
-
- let bar = document.getElementById("toggle-bar");
- let tog = document.getElementById("toggle-button");
- let barwidth = 0;
- let togwidth = 0;
- if (bar && tog) {
- barwidth = bar.clientWidth;
- togwidth = tog.clientWidth;
- }
- let totalWidth = (barwidth - togwidth - 10);
-
- this.timeline.add({
- targets: this._toggleButton.current,
- loop: false,
- translateX: totalWidth,
- easing: "easeInOutQuad",
- duration: 500
- });
- }
-
- @action.bound
- onclick() {
- this._status = !this._status;
- this.props.changeStatus(this._status);
- this.timeline.play();
- this.timeline.reverse();
- }
-
- render() {
- return (
- <div>
- <div className="toggle-title">
- <div className="toggle-option">{this.props.optionOne}</div>
- <div className="toggle-option">{this.props.optionTwo}</div>
- </div>
- <div className="toggle-bar" id="toggle-bar">
- <div className="toggle-button" id="toggle-button" ref={this._toggleButton} onClick={this.onclick} />
- </div>
- </div>
- );
- };
-}
@observer
diff --git a/src/client/views/SearchItem.scss b/src/client/views/search/SearchItem.scss
index 4c1d781e3..4c90643f9 100644
--- a/src/client/views/SearchItem.scss
+++ b/src/client/views/search/SearchItem.scss
@@ -1,4 +1,4 @@
-@import "globalCssVariables";
+@import "././globalCssVariables";
.search-item {
width: 500px;
diff --git a/src/client/views/SearchItem.tsx b/src/client/views/search/SearchItem.tsx
index acb7eeac4..9b4170f4c 100644
--- a/src/client/views/SearchItem.tsx
+++ b/src/client/views/search/SearchItem.tsx
@@ -2,19 +2,19 @@ import React = require("react");
import { library } from '@fortawesome/fontawesome-svg-core';
import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Cast, NumCast } from "../../new_fields/Types";
+import { Cast, NumCast } from "../../../new_fields/Types";
import { observable, runInAction } from "mobx";
-import { listSpec } from "../../new_fields/Schema";
-import { Doc } from "../../new_fields/Doc";
-import { DocumentManager } from "../util/DocumentManager";
-import { SetupDrag } from "../util/DragManager";
-import { SearchUtil } from "../util/SearchUtil";
-import { Id } from "../../new_fields/FieldSymbols";
-import { CollectionDockingView } from "./collections/CollectionDockingView";
+import { listSpec } from "../../../new_fields/Schema";
+import { Doc } from "../../../new_fields/Doc";
+import { DocumentManager } from "../../util/DocumentManager";
+import { SetupDrag } from "../../util/DragManager";
+import { SearchUtil } from "../../util/SearchUtil";
+import { Id } from "../../../new_fields/FieldSymbols";
+import { CollectionDockingView } from "../collections/CollectionDockingView";
import { observer } from "mobx-react";
import "./SearchItem.scss";
-import { CollectionViewType } from "./collections/CollectionBaseView";
-import { DocTypes } from "../documents/Documents";
+import { CollectionViewType } from "../collections/CollectionBaseView";
+import { DocTypes } from "../../documents/Documents";
export interface SearchItemProps {
doc: Doc;
diff --git a/src/client/views/search/ToggleBar.scss b/src/client/views/search/ToggleBar.scss
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/src/client/views/search/ToggleBar.scss
diff --git a/src/client/views/search/ToggleBar.tsx b/src/client/views/search/ToggleBar.tsx
new file mode 100644
index 000000000..74aa5dd9a
--- /dev/null
+++ b/src/client/views/search/ToggleBar.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { observable, action, runInAction } from 'mobx';
+import "./SearchBox.scss";
+import * as anime from 'animejs';
+
+export interface ToggleBarProps {
+ //false = right, true = left
+ // status: boolean;
+ changeStatus(value: boolean): void;
+ optionOne: string;
+ optionTwo: string;
+}
+
+//TODO: justify content will align to specific side. Maybe do status passed in and out?
+@observer
+export class ToggleBar extends React.Component<ToggleBarProps>{
+
+ @observable _status: boolean = false;
+ @observable timeline: anime.AnimeTimelineInstance;
+ @observable _toggleButton: React.RefObject<HTMLDivElement>;
+
+ constructor(props: ToggleBarProps) {
+ super(props);
+ this._toggleButton = React.createRef();
+ this.timeline = anime.timeline({
+ autoplay: false,
+ direction: "reverse"
+ });
+ }
+
+ componentDidMount = () => {
+
+ let bar = document.getElementById("toggle-bar");
+ let tog = document.getElementById("toggle-button");
+ let barwidth = 0;
+ let togwidth = 0;
+ if (bar && tog) {
+ barwidth = bar.clientWidth;
+ togwidth = tog.clientWidth;
+ }
+ let totalWidth = (barwidth - togwidth - 10);
+
+ this.timeline.add({
+ targets: this._toggleButton.current,
+ loop: false,
+ translateX: totalWidth,
+ easing: "easeInOutQuad",
+ duration: 500
+ });
+ }
+
+ @action.bound
+ onclick() {
+ this._status = !this._status;
+ this.props.changeStatus(this._status);
+ this.timeline.play();
+ this.timeline.reverse();
+ }
+
+ render() {
+ return (
+ <div>
+ <div className="toggle-title">
+ <div className="toggle-option">{this.props.optionOne}</div>
+ <div className="toggle-option">{this.props.optionTwo}</div>
+ </div>
+ <div className="toggle-bar" id="toggle-bar">
+ <div className="toggle-button" id="toggle-button" ref={this._toggleButton} onClick={this.onclick} />
+ </div>
+ </div>
+ );
+ };
+} \ No newline at end of file