diff options
| -rw-r--r-- | src/client/views/nodes/ComparisonBox.scss | 24 | ||||
| -rw-r--r-- | src/client/views/nodes/ComparisonBox.tsx | 10 |
2 files changed, 24 insertions, 10 deletions
diff --git a/src/client/views/nodes/ComparisonBox.scss b/src/client/views/nodes/ComparisonBox.scss index e2852c5f1..74e80236d 100644 --- a/src/client/views/nodes/ComparisonBox.scss +++ b/src/client/views/nodes/ComparisonBox.scss @@ -15,7 +15,8 @@ .beforeBox-cont { height: 100%; - background-color: red; + overflow: auto; + background-color: rgb(230, 230, 230); } .slide-bar { @@ -35,23 +36,36 @@ right: 0; height: 100%; width: 100%; - background-color: orange; + overflow: auto; + background-color: rgb(200, 200, 200); } .clear-button { position: absolute; - opacity: 1; + top: 3px; + opacity: 0.8; pointer-events: all; cursor: pointer; } .clear-button.before { - top: 3px; left: 3px; } .clear-button.after { - top: 3px; right: 3px; } + + .placeholder { + width: 50%; + height: 50%; + margin-top: 25%; + margin-left: 25%; + + .upload-icon { + width: 100%; + height: 100%; + opacity: 0.5; + } + } }
\ No newline at end of file diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx index dbaad360b..6ca0397e2 100644 --- a/src/client/views/nodes/ComparisonBox.tsx +++ b/src/client/views/nodes/ComparisonBox.tsx @@ -1,6 +1,6 @@ import { library } from '@fortawesome/fontawesome-svg-core'; import { faEye } from '@fortawesome/free-regular-svg-icons'; -import { faAsterisk, faBrain, faFileAudio, faImage, faPaintBrush, faTimes } from '@fortawesome/free-solid-svg-icons'; +import { faAsterisk, faBrain, faFileAudio, faImage, faPaintBrush, faTimes, faCloudUploadAlt } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, observable, runInAction, Lambda } from 'mobx'; import { observer } from "mobx-react"; @@ -133,7 +133,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C </> : <div className="placeholder"> - upload before image! + <FontAwesomeIcon className="upload-icon" icon={faCloudUploadAlt} size="lg" /> </div> } </div> @@ -157,11 +157,11 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C </div> </> : - <div className="placeholder" style={{ textAlign: "right" }}> - upload after image! + <div className="placeholder"> + <FontAwesomeIcon className="upload-icon" icon={faCloudUploadAlt} size="lg" /> </div> } </div> - </div>); + </div >); } }
\ No newline at end of file |