diff options
| -rw-r--r-- | src/client/views/Main.scss | 35 | ||||
| -rw-r--r-- | src/client/views/Main.tsx | 20 |
2 files changed, 29 insertions, 26 deletions
diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss index 9bc5c551f..89a9e1bd1 100644 --- a/src/client/views/Main.scss +++ b/src/client/views/Main.scss @@ -71,10 +71,10 @@ button:hover { } .round-button { - width: 2em; - height: 2em; - border-radius: 1em; - font-size: 24px; + width: 36px; + height: 36px; + border-radius: 18px; + font-size: 15px; } .round-button:hover { @@ -83,7 +83,7 @@ button:hover { .add-button { position: relative; - margin-right: 0.4em; + margin-right: 10px; } .main-undoButtons { @@ -95,33 +95,36 @@ button:hover { //toolbar stuff #toolbar { position: absolute; - bottom: 3.95em; - left: 1em; + bottom: 62px; + left: 24px; .toolbar-button { display: block; - margin-bottom: 0.4em; + margin-bottom: 10px; } } // add nodes menu. Note that the + button is actually an input label, not an actual button. #add-nodes-menu { position: absolute; - bottom: 1em; - left: 1em; + bottom: 24px; + left: 24px; label { background: $dark-color; color: $light-color; - padding: 10px; display: inline-block; - border-radius: 1em; - font-size: 24px; - width: 1.09em; - margin-right: 0.4em; - text-align: center; + border-radius: 18px; + font-size: 25px; + width: 36px; + height: 36px; + margin-right: 10px; cursor: pointer; transition: transform 0.5s; } + label p { + padding-left: 10.5px; + padding-top: 3px; + } label:hover { background: $main-accent; } diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index f9a54678a..38a3d4b69 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -115,35 +115,35 @@ Documents.initProtos(mainDocId, (res?: Document) => { {/* @TODO this should really be moved into a moveable toolbar component, but for now let's put it here to meet the deadline */} <div id="toolbar"> - <button className="toolbar-button round-button" onClick={() => UndoManager.Undo()}><FontAwesomeIcon icon="undo-alt" size="sm" /></button> - <button className="toolbar-button round-button" onClick={() => UndoManager.Redo()}><FontAwesomeIcon icon="redo-alt" size="sm" /></button> + <button className="toolbar-button round-button" title="Undo" onClick={() => UndoManager.Undo()}><FontAwesomeIcon icon="undo-alt" size="sm" /></button> + <button className="toolbar-button round-button" title="Redo" onClick={() => UndoManager.Redo()}><FontAwesomeIcon icon="redo-alt" size="sm" /></button> {/* @TODO do the ink thing */} - <button className="toolbar-button round-button"><FontAwesomeIcon icon="pen-nib" size="sm" /></button> + <button className="toolbar-button round-button" title="Ink"><FontAwesomeIcon icon="pen-nib" size="sm" /></button> </div> {/* for the expandable add nodes menu. Not included with the above because once it expands it expands the whole div with it, making canvas interactions limited. */} <div id="add-nodes-menu"> <input type="checkbox" id="add-menu-toggle" /> - <label htmlFor="add-menu-toggle">+</label> + <label htmlFor="add-menu-toggle" title="Add Node"><p>+</p></label> <div id="add-options-content"> <ul id="add-options-list"> - <li><div ref={textRef}><button className="round-button add-button" onPointerDown={setupDrag(textRef, addTextNode)} onClick={addClick(addTextNode)}> + <li><div ref={textRef}><button className="round-button add-button" title="Add Textbox" onPointerDown={setupDrag(textRef, addTextNode)} onClick={addClick(addTextNode)}> <FontAwesomeIcon icon="font" size="sm" /> </button></div></li> - <li><div ref={imgRef}><button className="round-button add-button" onPointerDown={setupDrag(imgRef, addImageNode)} onClick={addClick(addImageNode)}> + <li><div ref={imgRef}><button className="round-button add-button" title="Add Image" onPointerDown={setupDrag(imgRef, addImageNode)} onClick={addClick(addImageNode)}> <FontAwesomeIcon icon="image" size="sm" /> </button></div></li> - <li><div ref={pdfRef}><button className="round-button add-button" onPointerDown={setupDrag(pdfRef, addPDFNode)} onClick={addClick(addPDFNode)}> + <li><div ref={pdfRef}><button className="round-button add-button" title="Add PDF" onPointerDown={setupDrag(pdfRef, addPDFNode)} onClick={addClick(addPDFNode)}> <FontAwesomeIcon icon="file-pdf" size="sm" /> </button></div></li> - <li><div ref={webRef}><button className="round-button add-button" onPointerDown={setupDrag(webRef, addWebNode)} onClick={addClick(addWebNode)}> + <li><div ref={webRef}><button className="round-button add-button" title="Add Web Clipping" onPointerDown={setupDrag(webRef, addWebNode)} onClick={addClick(addWebNode)}> <FontAwesomeIcon icon="globe-asia" size="sm" /> </button></div></li> - <li><div ref={colRef}><button className="round-button add-button" onPointerDown={setupDrag(colRef, addColNode)} onClick={addClick(addColNode)}> + <li><div ref={colRef}><button className="round-button add-button" title="Add Collection" onPointerDown={setupDrag(colRef, addColNode)} onClick={addClick(addColNode)}> <FontAwesomeIcon icon="object-group" size="sm" /> </button></div></li> - <li><div ref={schemaRef}><button className="round-button add-button" onPointerDown={setupDrag(schemaRef, addSchemaNode)} onClick={addClick(addSchemaNode)}> + <li><div ref={schemaRef}><button className="round-button add-button" title="Add Schema" onPointerDown={setupDrag(schemaRef, addSchemaNode)} onClick={addClick(addSchemaNode)}> <FontAwesomeIcon icon="table" size="sm" /> </button></div></li> </ul> |