Merge pull request #111 from agh-space-systems-rover/background-ui-improvements

Background image

Author: RafalS3

kalman_gs/node_project/src/components/file-input.module.css

@@ -1,33 +1,19 @@
 .file-input-container {
   display: flex;
-  align-items: stretch;
-  margin: 5px;
-  height: calc(1em + 10px);
+  flex: 1;
+  width: 100%;
+  min-width: 0;
 }
 
 .file-hidden {
   display: none;
 }
 
-.file-main,
-.file-clear {
-  background-color: var(--dark-background);
-  border: none;
-  color: var(--strong-foreground);
-  height: 100%;
-  display: flex;
-  align-items: center;
-}
-
 .file-main {
   flex: 1;
-  border-top-left-radius: 5px;
-  border-bottom-left-radius: 5px;
-
-  border-right: 1px solid var(--background);
-
-  padding: 0 10px;
+  background-color: var(--dark-background) !important;
   min-width: 0;
+  justify-content: flex-start;
 }
 
 .file-main-inner {
@@ -36,32 +22,11 @@
   gap: 8px;
   width: 100%;
   min-width: 0;
+  padding: 2px 5px 4px 5px;
 }
 
 .file-main-text {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
-.file-clear {
-  width: 38px;
-  justify-content: center;
-
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
-
-  padding: 0;
-}
-
-.file-main:hover:not(:disabled),
-.file-clear:hover:not(:disabled) {
-  filter: brightness(1.08);
-}
-
-.file-main:disabled,
-.file-clear:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-  filter: none;
-}

kalman_gs/node_project/src/components/file-input.tsx

@@ -35,7 +35,7 @@ export default class FileInput extends Component<Props, State> {
   };
 
   private get emptyLabel() {
-    return this.props.emptyLabel ?? 'Choose image...';
+    return this.props.emptyLabel ?? 'Choose file...';
   }
 
   componentDidUpdate(prevProps: Props) {
@@ -66,9 +66,12 @@ export default class FileInput extends Component<Props, State> {
   clear() {
     if (!this.ref.current) return;
     this.ref.current.value = '';
-    this.updateLabelFromInput();
     this.props.onChange?.(null);
     this.props.onClear?.();
+    this.setState({
+      label: this.emptyLabel,
+      hasFiles: false
+    });
   }
 
   render() {
@@ -77,7 +80,7 @@ export default class FileInput extends Component<Props, State> {
     const { label, hasFiles } = this.state;
 
     return (
-      <div className={`${styles['file-input-container']}${className ? ` ${className}` : ''}`} {...props}>
+      <>
         {/* hidden real input */}
         <input
           ref={this.ref}
@@ -92,29 +95,28 @@ export default class FileInput extends Component<Props, State> {
           }}
         />
 
-        {/* main button */}
-        <Button
-          className={styles['file-main']}
-          tooltip={hasFiles ? 'Change file' : 'Choose file'}
-          onClick={() => this.openPicker()}
-          disabled={disabled}
-        >
-          <span className={styles['file-main-inner']}>
-            <FontAwesomeIcon icon={faUpload} />
-            <span className={styles['file-main-text']}>{label}</span>
-          </span>
-        </Button>
-
-        {/* clear button (X) */}
-        <Button
-          className={styles['file-clear']}
-          tooltip='Usuń'
-          onClick={() => this.clear()}
-          disabled={(disabled || !hasFiles) && !this.props.canClearEmpty}
-        >
-          <FontAwesomeIcon icon={faXmark} />
-        </Button>
-      </div>
+        <div className={`${styles['file-input-container']}${className ? ` ${className}` : ''}`} {...props}>
+          <Button
+            className={styles['file-main']}
+            tooltip={hasFiles ? 'Change file' : 'Choose file'}
+            onClick={() => this.openPicker()}
+            disabled={disabled}
+          >
+            <span className={styles['file-main-inner']}>
+              <FontAwesomeIcon icon={faUpload} />
+              <span className={styles['file-main-text']}>{label}</span>
+            </span>
+          </Button>
+
+          <Button
+            tooltip='Remove selected files.'
+            onClick={() => this.clear()}
+            disabled={(disabled || !hasFiles) && !this.props.canClearEmpty}
+          >
+            <FontAwesomeIcon icon={faXmark} />
+          </Button>
+        </div>
+      </>
     );
   }
 }

kalman_gs/node_project/src/components/settings.module.css

@@ -141,7 +141,7 @@
   font-size: 18px;
 }
 
-.background-selector{
+.background-selector {
   display: flex;
   flex-direction: column;
   margin-top: -5px;