aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/client/views/MainView.tsx1
-rw-r--r--src/client/views/nodes/PDFBox.scss107
-rw-r--r--src/client/views/nodes/PDFBox.tsx18
3 files changed, 28 insertions, 98 deletions
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 867a5a304..a3b2741d1 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -280,6 +280,7 @@ export class MainView extends ObservableReactComponent<object> {
library.add(
...[
fa.faMinimize,
+ fa.faMagic,
fa.faArrowsRotate,
fa.faFloppyDisk,
fa.faRepeat,
diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss
index c9edb2180..5c2da2b09 100644
--- a/src/client/views/nodes/PDFBox.scss
+++ b/src/client/views/nodes/PDFBox.scss
@@ -101,6 +101,7 @@
}
}
+ .pdfBox-fuzzy,
.pdfBox-nextIcon,
.pdfBox-prevIcon {
background: #121721;
@@ -116,6 +117,19 @@
padding: 0px;
}
+ .pdfBox-fuzzy {
+ background-color: #4a4a4a;
+
+ &.active {
+ background-color: #3498db;
+ color: white;
+ }
+
+ &:hover {
+ background-color: #2980b9;
+ }
+ }
+
.pdfBox-overlayButton:hover {
background: none;
}
@@ -198,7 +212,7 @@
pointer-events: all;
.pdfBox-searchBar {
- width: calc(100% - 120px); // less size of search buttons
+ width: calc(100% - 140px); // less size of search buttons
font-size: 14px;
}
}
@@ -276,94 +290,3 @@
}
}
}
-
-// 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: 60px;
- 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;
- color: white;
- }
-
- .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;
- }
-}
-
-.pdfBox-fuzzy {
- border: none;
- background-color: #4a4a4a;
- color: white;
- padding: 0 8px;
- height: 24px;
- cursor: pointer;
- margin-right: 4px;
- border-radius: 3px;
- display: flex;
- align-items: center;
- justify-content: center;
-
- &.active {
- background-color: #3498db;
- color: white;
- }
-
- &:hover {
- background-color: #2980b9;
- }
-}
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 9fb1b07c4..55440b028 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -1,3 +1,4 @@
+import { Toggle, ToggleType, Type } from '@dash/components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx';
import { observer } from 'mobx-react';
@@ -9,15 +10,18 @@ import { Doc, DocListCast, Opt } from '../../../fields/Doc';
import { DocData } from '../../../fields/DocSymbols';
import { Id } from '../../../fields/FieldSymbols';
import { InkTool } from '../../../fields/InkField';
+import { List } from '../../../fields/List';
import { ComputedField } from '../../../fields/ScriptField';
import { Cast, DocCast, FieldValue, NumCast, StrCast, toList } from '../../../fields/Types';
import { ImageField, PdfField } from '../../../fields/URLField';
import { TraceMobx } from '../../../fields/util';
import { emptyFunction } from '../../../Utils';
+import { gptAPICall, GPTCallType } from '../../apis/gpt/GPT';
import { Docs } from '../../documents/Documents';
import { CollectionViewType, DocumentType } from '../../documents/DocumentTypes';
import { DocUtils } from '../../documents/DocUtils';
import { KeyCodes } from '../../util/KeyCodes';
+import { SnappingManager } from '../../util/SnappingManager';
import { undoBatch, UndoManager } from '../../util/UndoManager';
import { CollectionFreeFormView } from '../collections/collectionFreeForm';
import { CollectionStackingView } from '../collections/CollectionStackingView';
@@ -33,9 +37,6 @@ import { ImageBox } from './ImageBox';
import { OpenWhere } from './OpenWhere';
import './PDFBox.scss';
import { CreateImage } from './WebBoxRenderer';
-import { gptAPICall } from '../../apis/gpt/GPT';
-import { List } from '../../../fields/List';
-import { GPTCallType } from '../../apis/gpt/GPT';
@observer
export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
@@ -456,9 +457,14 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
<button type="button" className="pdfBox-search" title="Search" onClick={e => this.search(this._searchString, e.shiftKey)}>
<FontAwesomeIcon icon="search" size="sm" />
</button>
- <button type="button" className={`pdfBox-fuzzy ${this._fuzzySearchEnabled ? 'active' : ''}`} title={`${this._fuzzySearchEnabled ? 'Disable' : 'Enable'} Fuzzy Search`} onClick={this.toggleFuzzySearch}>
- <FontAwesomeIcon icon="magic" size="sm" />
- </button>
+ <Toggle
+ type={Type.TERT}
+ toggleType={ToggleType.BUTTON}
+ icon={<FontAwesomeIcon icon={'magic'} onClick={this.toggleFuzzySearch} color={SnappingManager.userColor} />}
+ color={SnappingManager.userColor}
+ background={SnappingManager.userColor}
+ toggleStatus={this._fuzzySearchEnabled}
+ />
<button type="button" className="pdfBox-prevIcon" title="Previous Annotation" onClick={this.prevAnnotation}>
<FontAwesomeIcon icon="arrow-up" size="lg" />
</button>