diff options
Diffstat (limited to 'src/client')
| -rw-r--r-- | src/client/views/Main.scss | 5 | ||||
| -rw-r--r-- | src/client/views/Main.tsx | 42 |
2 files changed, 42 insertions, 5 deletions
diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss index 66b5000d7..e8b522cbb 100644 --- a/src/client/views/Main.scss +++ b/src/client/views/Main.scss @@ -78,6 +78,10 @@ button:hover { margin-right: 0.4em; } +.add-button:hover { + transform: scale(1.15); +} + .main-undoButtons { position: absolute; width: 150px; @@ -150,6 +154,7 @@ div .lm_header { min-height: 1.4em; padding-bottom: 0px; border-radius: 5px; + font-family: 'Work Sans', sans-serif !important; } .lm_header .lm_controls { diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 835ba68b5..071694de9 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -18,6 +18,14 @@ import { DocumentDecorations } from './DocumentDecorations'; import { DocumentView } from './nodes/DocumentView'; import "./Main.scss"; import { InkingControl } from './InkingControl'; +import { library } from '@fortawesome/fontawesome-svg-core'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faFont } from '@fortawesome/free-solid-svg-icons'; +import { faImage } from '@fortawesome/free-solid-svg-icons'; +import { faFilePdf } from '@fortawesome/free-solid-svg-icons'; +import { faObjectGroup } from '@fortawesome/free-solid-svg-icons'; +import { faTable } from '@fortawesome/free-solid-svg-icons'; +import { faGlobeAsia } from '@fortawesome/free-solid-svg-icons'; configure({ enforceActions: "observed" }); // causes errors to be generated when modifying an observable outside of an action @@ -29,11 +37,17 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) { } }), true) - const mainDocId = "mainDoc"; let mainContainer: Document; let mainfreeform: Document; +library.add(faFont); +library.add(faImage); +library.add(faFilePdf); +library.add(faObjectGroup); +library.add(faTable); +library.add(faGlobeAsia); + Documents.initProtos(mainDocId, (res?: Document) => { if (res instanceof Document) { mainContainer = res; @@ -75,6 +89,9 @@ Documents.initProtos(mainDocId, (res?: Document) => { let schemaRef = React.createRef<HTMLDivElement>(); let colRef = React.createRef<HTMLDivElement>(); + // fontawesome stuff + library.add() + ReactDOM.render(( <div style={{ position: "absolute", width: "100%", height: "100%" }}> <DocumentView Document={mainContainer} @@ -97,9 +114,24 @@ Documents.initProtos(mainDocId, (res?: Document) => { <div id="add-options-content"> <ul id="add-options-list"> - <li><button className="add-button" onClick={() => console.log("yes")}>T</button></li> - <li><button className="add-button">I</button></li> - <li><button className="add-button">P</button></li> + <li><button className="add-button" onClick={() => console.log("yes")}> + <FontAwesomeIcon icon="font" size="sm" /> + </button></li> + <li><button className="add-button"> + <FontAwesomeIcon icon="image" size="sm" /> + </button></li> + <li><button className="add-button"> + <FontAwesomeIcon icon="file-pdf" size="sm" /> + </button></li> + <li><button className="add-button"> + <FontAwesomeIcon icon="globe-asia" size="sm" /> + </button></li> + <li><button className="add-button"> + <FontAwesomeIcon icon="object-group" size="sm" /> + </button></li> + <li><button className="add-button"> + <FontAwesomeIcon icon="table" size="sm" /> + </button></li> </ul> </div> @@ -109,6 +141,6 @@ Documents.initProtos(mainDocId, (res?: Document) => { <button className="main-undoButtons" style={{ bottom: '0px' }} onClick={() => UndoManager.Redo()}>Redo</button> <InkingControl /> - </div>), + </div >), document.getElementById('root')); }) |