diff --git a/Apps/frontend/cypress/e2e/3-control-panel-top/on-off-button.cy.js b/Apps/frontend/cypress/e2e/3-control-panel-top/on-off-button.cy.js index f6e2a670..7c8cb964 100644 --- a/Apps/frontend/cypress/e2e/3-control-panel-top/on-off-button.cy.js +++ b/Apps/frontend/cypress/e2e/3-control-panel-top/on-off-button.cy.js @@ -12,6 +12,6 @@ describe("onOffButton", () => { it("is clickable", () => { cy.get('[data-cy="on-off-button"]').click(); - cy.get('[data-cy="on-off-button"]').should("have.class", "mui-icon--off"); + cy.get('[data-cy="on-off-button"]').should("have.class", "icon--off"); }); }); diff --git a/Apps/frontend/src/app.scss b/Apps/frontend/src/app.scss index 0acbf5ec..eb042f7e 100644 --- a/Apps/frontend/src/app.scss +++ b/Apps/frontend/src/app.scss @@ -1,11 +1,11 @@ :root { font-family: Inter, Avenir, Helvetica, Arial, sans-serif; - font-size: min(1em, 2vw); - line-height: min(1.6em, 2vw); + font-size: 16px; + line-height: 22px; font-weight: 400; color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); + color: white; background-color: #242424; font-synthesis: none; @@ -19,11 +19,12 @@ body { margin: 0; min-width: 320px; min-height: 100vh; - overflow: hidden; + overflow: auto; + color: white !important; + background-color: #242424 !important; } #app { - width: 100%; margin: 0 auto; text-align: center; } @@ -52,14 +53,38 @@ input[type="range"] { width: 40%; appearance: none; -webkit-appearance: none; - height: 0.2em; + background: transparent; + + &::-moz-range-track { + background: white; + height: 0.2em; + } + + &::-webkit-slider-runnable-track { + background: white; + height: 0.2em; + } + + &::-moz-range-thumb { + height: calc(0.6vmax + 0.4em); + width: calc(0.6vmax + 0.4em); + border-radius: 100%; + background: #242424; + border: 0.5px solid white; + cursor: pointer; + } &::-webkit-slider-thumb { + appearance: none; -webkit-appearance: none; - height: calc(0.5vmax + 0.5em); - width: calc(0.5vmax + 0.5em); + height: calc(0.6vmax + 0.4em); + width: calc(0.6vmax + 0.4em); + margin-top: calc( + (0.2em / 2) - (0.6vmax + 0.4em) / 2 + ); //track height/2 - thumb height/2 border-radius: 100%; - background: #efefef; + background: #242424; + border: 0.5px solid white; cursor: pointer; } } @@ -69,20 +94,49 @@ nav { bottom: 0; right: 0; width: 100%; - height: calc(14vmax + 8em); + min-height: fit-content; + max-height: 80vh; box-shadow: 0 0 2em rgba(80, 80, 80, 1); background-color: #242424; z-index: 3; + overflow: auto; } @media (prefers-color-scheme: light) { :root { - color: #213547; - background-color: #efefef; + color: #242424 !important; + background-color: white !important; + } + + body { + color: #242424 !important; + background-color: white !important; } nav { - background-color: #efefef; + background-color: white; + } + + input[type="range"] { + &::-moz-range-track { + background: #242424; + height: 0.2em; + } + + &::-webkit-slider-runnable-track { + background: #242424; + height: 0.2em; + } + + &::-moz-range-thumb { + background: white; + border: 1px solid black; + } + + &::-webkit-slider-thumb { + background: white; + border: 1px solid black; + } } .icon-button { @@ -114,10 +168,9 @@ nav { calc(100vh - 1 / 2 * (8vmax + 100vw - 2 * (8vmax + 16vw - 2em))); width: 100%; height: 100%; - overflow: auto; } -.slider_label { +.slider-label { display: inline; } @@ -166,7 +219,7 @@ nav { inset: 0; & > canvas { - border: 0.1vw solid #efefef; + border: 0.1vw solid white; background-color: black; } } @@ -174,6 +227,7 @@ nav { &--waves { position: absolute; margin-top: 0.1vw; + margin-left: 0.1vw; inset: 0; } } @@ -198,7 +252,7 @@ nav { grid-column: 1/6; grid-row: 3; padding: 0.5% 0; - padding-top: 12px; + padding-top: 0.5%; &_switch { width: 28px; @@ -208,7 +262,6 @@ nav { &_expand-accordion { width: 100%; - padding: 1vh 0; display: flex; justify-content: center; align-content: center; @@ -228,11 +281,11 @@ nav { } & > table { - display: flex; - flex-flow: column; - height: 100%; width: 100%; - border-collapse: unset; + height: 100%; + text-align: center; + border-collapse: collapse; + table-layout: fixed; & tr:nth-child(even) { background-color: #242424; @@ -241,36 +294,22 @@ nav { & tr:nth-child(odd) { background-color: #404040; } - } - & > table thead { - /* head takes the height it requires, - and it's not scaled when table is resized */ - flex: 0 0 auto; - width: calc(100% - 0.9em); - } - & > table tbody { - /* body takes all the remaining available space */ - flex: 1 1 auto; - display: block; - overflow-y: scroll; - } - & > table tbody tr { - width: 100%; - text-align: center; - } - & > table thead, - table tbody tr { - display: table; - table-layout: fixed; - } - & > tr { - padding: 3px; - } - } - &--entry { - & > input { - background-color: #222222; + & > th { + vertical-align: middle; + font-weight: normal; + padding-top: 0.5%; + } + + & > * { + padding: 0; + margin: 0; + + & > * { + padding: 0; + margin: 0; + } + } } } } @@ -294,7 +333,7 @@ nav { background-size: 64%; &--small { - padding: 2vmax !important; + padding: calc(1.2vmax + 8px) !important; } &--big { @@ -319,48 +358,49 @@ nav { } /* Icon definitions */ -.mui-icon { +/* https://fonts.google.com/icons */ +.icon { &--on { - background-image: url("./assets/mui_play.svg"); + background-image: url("./assets/icon_play.svg"); } &--off { - background-image: url("./assets/mui_stop.svg"); + background-image: url("./assets/icon_stop.svg"); } &--reset { - background-image: url("./assets/mui_reset.svg"); + background-image: url("./assets/icon_reset.svg"); } &--expand-more { - background-image: url("./assets/mui_expand_more.svg"); + background-image: url("./assets/icon_expand_more.svg"); } &--expand-less { - background-image: url("./assets/mui_expand_less.svg"); + background-image: url("./assets/icon_expand_less.svg"); } &--close { - background-image: url("./assets/mui_close.svg"); + background-image: url("./assets/icon_close.svg"); } - &--drop-down { - background-image: url("./assets/mui_drop-down.svg"); + &--ground { + background-image: url("./assets/icon_ground.svg"); } &--distribute { - background-image: url("./assets/mui_distribute.svg"); + background-image: url("./assets/icon_distribute.svg"); } &--save { - background-image: url("./assets/mui_save.svg"); + background-image: url("./assets/icon_save.svg"); } &--publish { - background-image: url("./assets/mui_publish.svg"); + background-image: url("./assets/icon_publish.svg"); } &--settings { - background-image: url("./assets/mui_settings.svg"); + background-image: url("./assets/icon_settings.svg"); } } diff --git a/Apps/frontend/src/assets/mui_close.svg b/Apps/frontend/src/assets/icon_close.svg similarity index 100% rename from Apps/frontend/src/assets/mui_close.svg rename to Apps/frontend/src/assets/icon_close.svg diff --git a/Apps/frontend/src/assets/icon_distribute.svg b/Apps/frontend/src/assets/icon_distribute.svg new file mode 100644 index 00000000..209d918c --- /dev/null +++ b/Apps/frontend/src/assets/icon_distribute.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/Apps/frontend/src/assets/mui_expand_less.svg b/Apps/frontend/src/assets/icon_expand_less.svg similarity index 100% rename from Apps/frontend/src/assets/mui_expand_less.svg rename to Apps/frontend/src/assets/icon_expand_less.svg diff --git a/Apps/frontend/src/assets/mui_expand_more.svg b/Apps/frontend/src/assets/icon_expand_more.svg similarity index 100% rename from Apps/frontend/src/assets/mui_expand_more.svg rename to Apps/frontend/src/assets/icon_expand_more.svg diff --git a/Apps/frontend/src/assets/icon_ground.svg b/Apps/frontend/src/assets/icon_ground.svg new file mode 100644 index 00000000..238e12d0 --- /dev/null +++ b/Apps/frontend/src/assets/icon_ground.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/Apps/frontend/src/assets/mui_play.svg b/Apps/frontend/src/assets/icon_play.svg similarity index 100% rename from Apps/frontend/src/assets/mui_play.svg rename to Apps/frontend/src/assets/icon_play.svg diff --git a/Apps/frontend/src/assets/mui_publish.svg b/Apps/frontend/src/assets/icon_publish.svg similarity index 100% rename from Apps/frontend/src/assets/mui_publish.svg rename to Apps/frontend/src/assets/icon_publish.svg diff --git a/Apps/frontend/src/assets/icon_reset.svg b/Apps/frontend/src/assets/icon_reset.svg new file mode 100644 index 00000000..5634c4ef --- /dev/null +++ b/Apps/frontend/src/assets/icon_reset.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/Apps/frontend/src/assets/mui_save.svg b/Apps/frontend/src/assets/icon_save.svg similarity index 100% rename from Apps/frontend/src/assets/mui_save.svg rename to Apps/frontend/src/assets/icon_save.svg diff --git a/Apps/frontend/src/assets/mui_settings.svg b/Apps/frontend/src/assets/icon_settings.svg similarity index 100% rename from Apps/frontend/src/assets/mui_settings.svg rename to Apps/frontend/src/assets/icon_settings.svg diff --git a/Apps/frontend/src/assets/mui_stop.svg b/Apps/frontend/src/assets/icon_stop.svg similarity index 100% rename from Apps/frontend/src/assets/mui_stop.svg rename to Apps/frontend/src/assets/icon_stop.svg diff --git a/Apps/frontend/src/assets/mui_distribute.svg b/Apps/frontend/src/assets/mui_distribute.svg deleted file mode 100644 index 1f4d7d2e..00000000 --- a/Apps/frontend/src/assets/mui_distribute.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/Apps/frontend/src/assets/mui_drop-down.svg b/Apps/frontend/src/assets/mui_drop-down.svg deleted file mode 100644 index 0b186dcd..00000000 --- a/Apps/frontend/src/assets/mui_drop-down.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - \ No newline at end of file diff --git a/Apps/frontend/src/assets/mui_reset.svg b/Apps/frontend/src/assets/mui_reset.svg deleted file mode 100644 index 7028cdc8..00000000 --- a/Apps/frontend/src/assets/mui_reset.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/Apps/frontend/src/components/DistributeOffsetButton.svelte b/Apps/frontend/src/components/DistributeOffsetButton.svelte index b3172466..dbc10f49 100644 --- a/Apps/frontend/src/components/DistributeOffsetButton.svelte +++ b/Apps/frontend/src/components/DistributeOffsetButton.svelte @@ -13,7 +13,7 @@ - diff --git a/Apps/frontend/src/views/ChannelConfigPopup.svelte b/Apps/frontend/src/views/ChannelConfigPopup.svelte deleted file mode 100644 index 888ab61a..00000000 --- a/Apps/frontend/src/views/ChannelConfigPopup.svelte +++ /dev/null @@ -1,80 +0,0 @@ - - -
-
-

{LABEL_HEADER_LOAD_FROM_LIST_CHANNEL_CONFIG}

- - -
-
-

{LABEL_HEADER_CREATE_CHANNEL_CONFIG}

- - -
-
- -
diff --git a/Apps/frontend/src/views/ControlPanelBottom.svelte b/Apps/frontend/src/views/ControlPanelBottom.svelte index 64ad2254..22798b31 100644 --- a/Apps/frontend/src/views/ControlPanelBottom.svelte +++ b/Apps/frontend/src/views/ControlPanelBottom.svelte @@ -22,87 +22,83 @@ - - - - - - - - - + + + + + + + + + + + + + + + {#each { length: NUM_CHANNELS } as _, index} - - - - + + + + + - - {#each { length: NUM_CHANNELS } as _, index} - - - - - - - - - {/each} - - + {/each} +
- {#if $expandedPanelOpen && controlPanelBottomHeight <= MIN_CONTROL_PANEL_BOTTOM_HEIGHT} - Start/StopThicknessOffsetTime SweepAmplitude
+ {#if $expandedPanelOpen && controlPanelBottomHeight <= MIN_CONTROL_PANEL_BOTTOM_HEIGHT} + Start/StopThicknessOffsetTime SweepAmplitude
Common + + { + for (let index = 0; index < NUM_CHANNELS; index++) { + $timeSweep[index] = $timeSweep[NUM_CHANNELS]; + } + }} + bind:value={$timeSweep[NUM_CHANNELS]} + min={MIN_SWEEP_SLIDER_VALUE} + max={MAX_SWEEP_SLIDER_VALUE} + dataCy={`timesweepSlider-${NUM_CHANNELS}`} + /> +
Common Ch. {index + 1} + + + + - { - for (let index = 0; index < NUM_CHANNELS; index++) { - $timeSweep[index] = $timeSweep[NUM_CHANNELS]; - } - }} - bind:value={$timeSweep[NUM_CHANNELS]} + bind:value={$offsetAdjustment[index]} + min={-1.0} + max={1.0} + step={0.01} + dataCy={`offsetSlider-${index}`} + /> + + + + (1 / value).toFixed(2)} + dataCy={`amplitudeSlider-${index}`} />
Ch. {index + 1} - - - - - - - - - (1 / value).toFixed(2)} - dataCy={`amplitudeSlider-${index}`} - /> -
diff --git a/Apps/frontend/src/views/ExpandableControlPanel.svelte b/Apps/frontend/src/views/ExpandableControlPanel.svelte index eb65ec1a..c89bf12a 100644 --- a/Apps/frontend/src/views/ExpandableControlPanel.svelte +++ b/Apps/frontend/src/views/ExpandableControlPanel.svelte @@ -15,8 +15,8 @@ diff --git a/Apps/frontend/src/views/GeneralButtons.svelte b/Apps/frontend/src/views/GeneralButtons.svelte index c3624228..d603e147 100644 --- a/Apps/frontend/src/views/GeneralButtons.svelte +++ b/Apps/frontend/src/views/GeneralButtons.svelte @@ -34,5 +34,4 @@ }} /> - diff --git a/Apps/frontend/src/views/SettingsPopup.svelte b/Apps/frontend/src/views/SettingsPopup.svelte index 702d280a..4879a59e 100644 --- a/Apps/frontend/src/views/SettingsPopup.svelte +++ b/Apps/frontend/src/views/SettingsPopup.svelte @@ -61,7 +61,7 @@