♻️ Minor refactor

.eslintrc.js

@@ -61,12 +61,6 @@ module.exports = {
     // renderer/browser-specific rules
     {
       files: ['src/renderer/**/*.ts', 'src/renderer/**/*.tsx'],
-      extends: [
-        // 'plugin:import/typescript',
-        // 'plugin:@typescript-eslint/recommended', // A plugin that contains a bunch of ESLint rules that are TypeScript specific
-        // 'plugin:@typescript-eslint/recommended-requiring-type-checking',
-        // 'prettier',
-      ],
       env: {
         browser: true,
       },

.prettierignore

@@ -28,7 +28,6 @@ coverage
 # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
 .grunt
 
-=======
 # Bower dependency directory (https://bower.io/)
 bower_components
 
@@ -52,7 +51,6 @@ typings/
 .node_repl_history
 
 dist*
-=======
 # Optional eslint cache
 .eslintcache
 

README.md

@@ -52,7 +52,7 @@ You can download MacOS and Linux standalone applications
 
 Some configuration options can be set in the `config.json` file at the root of the project.
 In particular, you can change the default parameters for the computation back-end, by setting values
-for the `'server_ip'` and `'server_port'` keys.
+for the `'inpainting_api_ip'` and `'inpainting_api_port'` keys.
 
 ## Issues
 

src/common/default_config.json

@@ -1,7 +1,9 @@
 {
   "app_name": "NOTONO",
 
-  "disable_server_parameters_input": false,
+  "disable_inpainting_api_parameters_input": false,
+  "inpainting_api_ip": "localhost",
+  "inpainting_api_port": "5000",
 
   "annotation_types": ["fermata"],
 

src/common/localization.json

@@ -56,8 +56,8 @@
       "en": "Gain"
     },
 
-    "select-midi-out-label": {
-      "en": "Midi Out Device"
+    "select-midi-output-device-label": {
+      "en": "MIDI Out Device"
     },
 
     "select-midi-input-device-label": {

src/common/styles/controls.scss

@@ -1,10 +1,8 @@
 @use "mixins/colors.module";
 @use "mixins/measures";
 
-$main-filter: drop-shadow(0px 0px 1.3px rgba(0, 0, 0, 0.3));
-
-control-item,
-control-label {
+.control-item,
+.control-label {
   align-self: center;
   align-content: normal;
   align-items: center;
@@ -13,10 +11,6 @@ control-label {
   width: max-content;
 }
 
-control-item {
-  filter: $main-filter;
-}
-
 .fas {
   font-size: measures.$CycleSelect-size;
 }
@@ -49,18 +43,13 @@ control-item {
   }
 }
 
-control-item:hover {
-  filter: brightness(1.03) $main-filter;
-}
-
-control-item {
+.control-item {
   font-size: calc(min(10px + 0.5vw, 1em)) !important;
   font-weight: 500;
 }
 
-control-label {
+.control-label {
   font-weight: 400;
-
   font-size: calc(min(10px + 1vw, 1.1em));
 }
 
@@ -162,8 +151,8 @@ control-label {
   grid-template-rows: 2.5fr 1fr;
   grid-auto-flow: column;
 
-  control-label,
-  control-item {
+  .control-label,
+  .control-item {
     flex-basis: auto;
   }
 }

src/common/styles/mixins/_colors.module.scss

@@ -1,3 +1,4 @@
+@use './measures';
 @use 'sass:color';
 
 $millenial-pink-body-background: #fff7f8;
@@ -18,7 +19,9 @@ $panes-background: #beb9d4;
   $panes: $lavender-panes-background;
   $idle-control: $lavender-idle-control;
   $active-control: $lavender-active-control;
-  $scrollbar-lightness-factor: 1;
+  $overlay-lightness-factor: -1;
+  $overlay-lightness-factor: -1;
+  $text: black;
   @if $theme == lavender {
     $scrollbar-lightness-factor: -1;
   } @else if $theme == millenial-pink {
@@ -27,17 +30,26 @@ $panes-background: #beb9d4;
     $panes: $millenial-pink-panes-background;
     $active-control: $millenial-pink-active-control;
     $idle-control: $millenial-pink-idle-control;
-    // $scrollbar-lightness-factor: 0.1;
+    $overlay-lightness-factor: 1;
   } @else {
     @error "Unknown theme #{$theme}.";
   }
 
+  $panes-border: color.scale($panes,
+    $lightness: $overlay-lightness-factor * 20%
+  );
+
+  color: $text;
+  .trip-navigation * {
+    color: $text;
+  }
   background-color: $body;
   header,
   footer {
     background-color: $panes;
     .expand-tab {
-      background-color: darken($panes, 10%);
+      background-color: color.scale($panes,
+        $lightness: $overlay-lightness-factor * 10%);
     }
   }
   .trip-block {
@@ -46,11 +58,11 @@ $panes-background: #beb9d4;
 
   $simplebar-track-color: color.scale(
     $body,
-    $lightness: 20% * $scrollbar-lightness-factor
+    $lightness: 20% * $overlay-lightness-factor
   );
   $simplebar-scrollbar-color: color.scale(
     $panes,
-    $lightness: -20% * $scrollbar-lightness-factor
+    $lightness: -20% * $overlay-lightness-factor
   );
   @if $theme == millenial-pink {
     $simplebar-track-color: $panes;
@@ -62,13 +74,13 @@ $panes-background: #beb9d4;
     box-shadow: inset 0px 3px 20px 0.5px
         color.scale(
           $simplebar-track-color,
-          $lightness: 30% * $scrollbar-lightness-factor,
+          $lightness: 30% * $overlay-lightness-factor,
           $alpha: -30%
         ),
       0 0 10px 0.2px
         color.scale(
           $simplebar-scrollbar-color,
-          $lightness: 50% * $scrollbar-lightness-factor,
+          $lightness: 50% * $overlay-lightness-factor,
           $alpha: -70%
         );
   }
@@ -88,22 +100,59 @@ $panes-background: #beb9d4;
     }
   }
 
-  control-item * {
+  .control-item * {
+    color: $idle-control;
+  }
+  .control-item.active * {
+    color: $active-control;
+  }
+  .control-item option {
+    color: black;
+  }
+
+  .CycleSelect-container {
     color: $idle-control;
   }
 
-  #play-button-interface {
-    & > .playing {
-      color: $active-control;
+  #spectrogram-container-interface-container {
+    &:before {
+      left: calc(0vw - #{measures.$spectrogram-margin-width});
+      background: radial-gradient(
+        ellipse farthest-corner at right,
+        transparent 0vw,
+        $body measures.$spectrogram-margin-width
+      );
     }
 
-    & > .stopped {
-      color: $idle-control;
+    &:after {
+      right: calc(0vw - #{measures.$spectrogram-margin-width});
+      background: radial-gradient(
+        ellipse farthest-corner at left,
+        transparent 0vw,
+        $body measures.$spectrogram-margin-width
+      );
+    }
+    div span {
+      z-index: 100;
+      opacity: 0.3;
     }
   }
 
-  .CycleSelect-container {
-    color: $idle-control;
+  .control-item {
+    filter: main-filter($idle-control, $overlay-lightness-factor);
+
+    &:hover {
+      filter: brightness(1.03)
+        main-filter($idle-control, $overlay-lightness-factor);
+    }
+  }
+  .control-item.active {
+    filter: main-filter($active-control, $overlay-lightness-factor);
+
+    &:hover {
+      filter: brightness(1.03)
+        main-filter($active-control, $overlay-lightness-factor);
+    }
   }
 }
 

src/common/styles/mixins/_measures.scss

@@ -5,5 +5,6 @@ $advanced-controls-height: 70px;
 $expand-tab-height: clamp(10px, 3vh, 20px);
 
 $spectrogram-width: 90%;
+$spectrogram-margin-width: 5vw;
 
 $CycleSelect-size: min(calc(30px + 1.5vw), calc(30px + 2vh), 54px);

src/common/styles/overlays.scss

@@ -1,6 +1,6 @@
 $chords-font-stack: 'Boogaloo', cursive;
 
-.timecontainer {
+.timeContainer {
   position: absolute;
   pointer-events: auto;
 
@@ -70,42 +70,32 @@ $chords-font-stack: 'Boogaloo', cursive;
       border: solid 0.2em;
       border-color: blue;
       opacity: 0.25;
-      // box-shadow: 2px 1px black;
 
       &:hover {
         opacity: 0.3;
       }
     }
 
     &.dragover {
-      // background-color: purple;
       opacity: 0.3;
     }
   }
-
-  // .playing {
-  //     background-color: #f40081;
-  // }
 }
 
 .Fermata {
   position: absolute;
   pointer-events: auto;
   z-index: 1;
   width: 100%;
-  height: 2em; // HACK hardcoded
+  height: 2em; // FIXME(theis, 2021_04_27): hardcoded value
   top: -4.5em;
-  // opacity: 0;
-  // background-color: rgb(252, 252, 108, 0);
 
   box-sizing: border-box;
   border-radius: 15px;
   border: dashed 0.15em;
   border-color: rgb(0, 0, 0); // if no support for transparency
   border-color: rgba(0, 0, 0, 0.7);
 
-  // border-width: thick;
-
   &:hover {
     cursor: pointer;
     background-color: rgba(0, 0, 0, 0.3);
@@ -119,10 +109,6 @@ $chords-font-stack: 'Boogaloo', cursive;
     background-color: rgba(0, 0, 0, 0.8);
     cursor: not-allowed;
   }
-  // &:last-child {
-  //     background-color: rgba(0, 0, 0, 0.8);
-  //     cursor: not-allowed;
-  // }
 }
 
 .ChordSelector {
@@ -203,5 +189,5 @@ path[id*='-spreader'] {
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
   user-select: none; /* Non-prefixed version, currently
-                                  supported by Chrome and Opera */
+                      supported by Chrome and Opera */
 }

src/common/styles/simplebar.scss

@@ -43,9 +43,6 @@ $scrollbar-color: #009ceb;
   // no hover effects on touch screens since the effect remains active
   // until the user effectively touches another zone on the viewport
   .simplebar-scrollbar:hover {
-    background-color: lighten(
-      $scrollbar-color,
-      20%
-    ); // lighter blue // #ffc7cf;  // lighter pink
+    background-color: lighten($scrollbar-color, 20%);
   }
 }

src/common/styles/spectrogram.scss

@@ -118,11 +118,9 @@ $spectrogram-height-no-scroll: 90%;
   pointer-events: none;
 }
 
-$spectrogram-margin-width: 5vw;
-
 #spectrogram-container-interface-container {
   position: absolute;
-  margin-left: $spectrogram-margin-width;
+  margin-left: measures.$spectrogram-margin-width;
   width: measures.$spectrogram-width !important;
   top: 5vh;
   z-index: 0;
@@ -132,35 +130,14 @@ $spectrogram-margin-width: 5vw;
     z-index: 0;
     content: '';
     position: absolute;
-    width: $spectrogram-margin-width;
+    width: measures.$spectrogram-margin-width;
     top: 0;
     height: 100%;
     background-size: cover;
     will-change: width;
     backdrop-filter: brightness(1.3) blur(2px);
     transform: perspective(500px);
   }
-  &:before {
-    left: calc(0vw - #{$spectrogram-margin-width});
-    background: radial-gradient(
-      ellipse farthest-corner at right,
-      transparent 0vw,
-      colors.$body-background $spectrogram-margin-width
-    );
-  }
-
-  &:after {
-    right: calc(0vw - #{$spectrogram-margin-width});
-    background: radial-gradient(
-      ellipse farthest-corner at left,
-      transparent 0vw,
-      colors.$body-background $spectrogram-margin-width
-    );
-  }
-  div span {
-    z-index: 100;
-    opacity: 0.3;
-  }
 }
 
 .highlight {