diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/DocumentDecorations.scss | 4 | ||||
| -rw-r--r-- | src/client/views/nodes/LinkBox.scss | 28 | ||||
| -rw-r--r-- | src/client/views/nodes/LinkBox.tsx | 19 |
3 files changed, 39 insertions, 12 deletions
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index 9e3034829..5912d5901 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -95,8 +95,8 @@ } .linkButton-nonempty { - height: 16px; - width: 16px; + height: 20px; + width: 20px; margin-top: 10px; border-radius: 50%; opacity: 0.9; diff --git a/src/client/views/nodes/LinkBox.scss b/src/client/views/nodes/LinkBox.scss index bdedbc103..5d5f782d2 100644 --- a/src/client/views/nodes/LinkBox.scss +++ b/src/client/views/nodes/LinkBox.scss @@ -1,14 +1,14 @@ @import "../global_variables"; .link-container { width: 100%; - height: 30px; + height: 35px; display: flex; flex-direction: row; border-top: 0.5px solid #bababa; } .info-container { - width: 60%; + width: 55%; padding-top: 5px; padding-left: 5px; display: flex; @@ -24,14 +24,14 @@ } .button-container { - width: 40%; + width: 45%; display: flex; flex-direction: row; } .button { - height: 16px; - width: 16px; + height: 20px; + width: 20px; margin: 8px 4px; border-radius: 50%; opacity: 0.9; @@ -40,12 +40,26 @@ color: $light-color; text-transform: uppercase; letter-spacing: 2px; - font-size: 75%; + font-size: 60%; transition: transform 0.2s; } .button:hover { background: $main-accent; - transform: scale(1.05); cursor: pointer; +} + +.fa-icon-view { + margin-left: 3px; + margin-top: 5px; +} + +.fa-icon-edit { + margin-left: 5px; + margin-top: 5px; +} + +.fa-icon-delete { + margin-left: 6px; + margin-top: 5px; }
\ No newline at end of file diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx index 44b3dccb7..430c1b694 100644 --- a/src/client/views/nodes/LinkBox.tsx +++ b/src/client/views/nodes/LinkBox.tsx @@ -11,6 +11,16 @@ import { ListField } from "../../../fields/ListField"; import { DocumentManager } from "../../util/DocumentManager"; import { LinkEditor } from "./LinkEditor"; import { CollectionDockingView } from "../collections/CollectionDockingView"; +import { library } from '@fortawesome/fontawesome-svg-core'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faEye } from '@fortawesome/free-solid-svg-icons'; +import { faEdit } from '@fortawesome/free-solid-svg-icons'; +import { faTimes } from '@fortawesome/free-solid-svg-icons'; + + +library.add(faEye); +library.add(faEdit); +library.add(faTimes); interface Props { linkDoc: Document; @@ -79,9 +89,12 @@ export class LinkBox extends React.Component<Props> { </div> <div className="button-container"> - <div title="Follow Link" className="button" onPointerDown={this.onViewButtonPressed}></div> - <div title="Edit Link" className="button" onPointerDown={this.onEditButtonPressed}></div> - <div title="Delete Link" className="button" onPointerDown={this.onDeleteButtonPressed}></div> + <div title="Follow Link" className="button" onPointerDown={this.onViewButtonPressed}> + <FontAwesomeIcon className="fa-icon-view" icon="eye" size="sm" /></div> + <div title="Edit Link" className="button" onPointerDown={this.onEditButtonPressed}> + <FontAwesomeIcon className="fa-icon-edit" icon="edit" size="sm" /></div> + <div title="Delete Link" className="button" onPointerDown={this.onDeleteButtonPressed}> + <FontAwesomeIcon className="fa-icon-delete" icon="times" size="sm" /></div> </div> </div> ) |