From 34d2f93f467491383cc6bc785a2fb4c04e71f579 Mon Sep 17 00:00:00 2001 From: koen1711 Date: Tue, 23 Apr 2024 10:40:09 +0200 Subject: [PATCH 01/29] chore: start on scss rewrite --- src/styles.scss | 2 ++ src/theme.scss | 24 ++++++++++++++++++------ 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/src/styles.scss b/src/styles.scss index 53a40ead..4868adb4 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,3 +1,5 @@ +@use '@angular/material' as mat; + /* You can add global styles to this file, and also import other style files */ @import url("./assets/fonts/inter/inter.css"); @font-face { diff --git a/src/theme.scss b/src/theme.scss index 8abb1375..9d6ae7fd 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -16,19 +16,31 @@ $light-mode-palette: ( contrast: (), ); -$leaphy-color-accent: mat.define-palette($light-mode-palette, 50); -$leaphy-color-primary: mat.define-palette($light-mode-palette, A100); -$leaphy-color-warn: mat.define-palette($light-mode-palette, 900); +$leaphy-color-accent-light: mat.define-palette($light-mode-palette, 50); +$leaphy-color-primary-light: mat.define-palette($light-mode-palette, A100); +$leaphy-color-warn-light: mat.define-palette($light-mode-palette, 900); $light-mode: mat.define-light-theme( ( color: ( - primary: $leaphy-color-primary, - accent: $leaphy-color-accent, - warn: $leaphy-color-warn, + primary: $leaphy-color-primary-light, + accent: $leaphy-color-accent-light, + warn: $leaphy-color-warn-light, + ), + typography: mat.define-legacy-typography-config(), + ) +); + +$dark-mode: mat.define-dark-theme( + ( + color: ( + primary: $leaphy-color-primary-light, + accent: $leaphy-color-accent-light, + warn: $leaphy-color-warn-light, ), typography: mat.define-legacy-typography-config(), ) ); @include mat.all-component-themes($light-mode); +@include mat.select-theme($light-mode); From bb1378a667f19724c83337b152fd8a1edb594bb1 Mon Sep 17 00:00:00 2001 From: koen1711 Date: Tue, 23 Apr 2024 14:46:54 +0200 Subject: [PATCH 02/29] chore: rewrite done, added themes --- src/app/effects/blockly-editor.effects.ts | 13 +-- .../blockly-editor/blockly-editor.page.scss | 7 +- .../code-view/code-view.component.scss | 2 + .../code-view/code-view.component.ts | 13 ++- .../code-editor-cpp/code-editor-cpp.page.ts | 13 ++- .../code-editor-python.page.scss | 6 ++ .../code-editor-python.page.ts | 13 ++- .../components/header/header.component.scss | 16 +++- .../robot-selection.component.scss | 28 ++++++- .../components/start/start.component.scss | 1 + .../button-bar/button-bar.component.scss | 8 +- .../services/{toolbox => blockly}/category.ts | 0 src/app/services/blockly/theme.ts | 84 +++++++++++++++++++ .../services/{toolbox => blockly}/toolbox.ts | 0 src/styles.scss | 63 ++++++++++---- src/theme.scss | 48 ++++++++--- 16 files changed, 264 insertions(+), 51 deletions(-) rename src/app/services/{toolbox => blockly}/category.ts (100%) create mode 100644 src/app/services/blockly/theme.ts rename src/app/services/{toolbox => blockly}/toolbox.ts (100%) diff --git a/src/app/effects/blockly-editor.effects.ts b/src/app/effects/blockly-editor.effects.ts index 1aa9c6c3..ae482ff4 100644 --- a/src/app/effects/blockly-editor.effects.ts +++ b/src/app/effects/blockly-editor.effects.ts @@ -10,15 +10,15 @@ import "@blockly/field-bitmap"; import { CATEGORIES, - THEME, EXTENSIONS, translations, arduino, getBlocks, constantBlocks, } from "@leaphy-robotics/leaphy-blocks"; -import { LeaphyCategory } from "../services/toolbox/category"; -import { LeaphyToolbox } from "../services/toolbox/toolbox"; +import * as THEME from "../services/blockly/theme"; +import { LeaphyCategory } from "../services/blockly/category"; +import { LeaphyToolbox } from "../services/blockly/toolbox"; import { CodeEditorState } from "../state/code-editor.state"; import { genericRobotType, microPythonRobotType } from "../domain/robots"; import { RobotType } from "../domain/robot.type"; @@ -137,12 +137,7 @@ export class BlocklyEditorEffects { } Blockly.defineBlocksWithJsonArray(allBlocks); - config.theme = Blockly.Theme.defineTheme("leaphy", { - blockStyles: THEME.defaultBlockStyles, - categoryStyles: THEME.categoryStyles, - componentStyles: THEME.componentStyles, - name: "leaphy", - }); + config.theme = Blockly.Theme.defineTheme("dark", THEME.theme); const toolboxXmlString = this.loadToolBox( baseToolboxXml, leaphyToolboxXml, diff --git a/src/app/modules/blockly-editor/blockly-editor.page.scss b/src/app/modules/blockly-editor/blockly-editor.page.scss index 9d34ef94..f7dd2740 100644 --- a/src/app/modules/blockly-editor/blockly-editor.page.scss +++ b/src/app/modules/blockly-editor/blockly-editor.page.scss @@ -9,7 +9,12 @@ .sidenav-container { flex: 1 1 auto; - background: #eee; + @media (prefers-color-scheme: dark) { + background: #333; + } + @media (prefers-color-scheme: light) { + background: #eee; + } } #sidenav { diff --git a/src/app/modules/blockly-editor/components/code-view/code-view.component.scss b/src/app/modules/blockly-editor/components/code-view/code-view.component.scss index 2b52e80d..981dc4c7 100644 --- a/src/app/modules/blockly-editor/components/code-view/code-view.component.scss +++ b/src/app/modules/blockly-editor/components/code-view/code-view.component.scss @@ -3,4 +3,6 @@ height: 100%; margin: 0; overflow-x: scroll; +// set the scrollbar color to #9c9a9a + scrollbar-color: #ccc #9c9a9a; } diff --git a/src/app/modules/blockly-editor/components/code-view/code-view.component.ts b/src/app/modules/blockly-editor/components/code-view/code-view.component.ts index 4fac14fc..fd8c8757 100644 --- a/src/app/modules/blockly-editor/components/code-view/code-view.component.ts +++ b/src/app/modules/blockly-editor/components/code-view/code-view.component.ts @@ -7,11 +7,20 @@ import { CodeEditorState } from "../../../../state/code-editor.state"; styleUrls: ["./code-view.component.scss"], }) export class CodeViewComponent { - editorOptions = { + editorOptions : any = { language: "cpp", readOnly: true, automaticLayout: true, }; - constructor(public codeEditor: CodeEditorState) {} + constructor(public codeEditor: CodeEditorState) { + // check if we are currently in dark mode + const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches; + if (isDarkMode) { + this.editorOptions = { + ...this.editorOptions, + theme: "vs-dark", + }; + } + } } diff --git a/src/app/modules/code-editor-cpp/code-editor-cpp.page.ts b/src/app/modules/code-editor-cpp/code-editor-cpp.page.ts index 8702b8dd..7713ab81 100644 --- a/src/app/modules/code-editor-cpp/code-editor-cpp.page.ts +++ b/src/app/modules/code-editor-cpp/code-editor-cpp.page.ts @@ -14,7 +14,7 @@ import { MonacoEditorModule } from "ngx-monaco-editor-v2"; imports: [CommonModule, SharedModule, CoreModule, MonacoEditorModule], }) export class CodeEditorCppPage implements AfterViewInit { - editorOptions = { + editorOptions: any = { language: "cpp", automaticLayout: true, }; @@ -22,7 +22,16 @@ export class CodeEditorCppPage implements AfterViewInit { constructor( public codeEditorState: CodeEditorState, private workspaceService: WorkspaceService, - ) {} + ) { + // check if we are currently in dark mode + const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches; + if (isDarkMode) { + this.editorOptions = { + ...this.editorOptions, + theme: "vs-dark", + }; + } + } ngAfterViewInit(): void { window.addEventListener("beforeunload", async () => { diff --git a/src/app/modules/code-editor-python/code-editor-python.page.scss b/src/app/modules/code-editor-python/code-editor-python.page.scss index ee901bd8..a26f805b 100644 --- a/src/app/modules/code-editor-python/code-editor-python.page.scss +++ b/src/app/modules/code-editor-python/code-editor-python.page.scss @@ -10,6 +10,12 @@ height: calc(100% - 64px); width: 100%; overflow: hidden; + @media (prefers-color-scheme: dark) { + background-color: #343444; + } + @media (prefers-color-scheme: light) { + background-color: #ffffff; + } } .sidenav-container { diff --git a/src/app/modules/code-editor-python/code-editor-python.page.ts b/src/app/modules/code-editor-python/code-editor-python.page.ts index 45a2fd92..7ba7d132 100644 --- a/src/app/modules/code-editor-python/code-editor-python.page.ts +++ b/src/app/modules/code-editor-python/code-editor-python.page.ts @@ -14,7 +14,7 @@ import { MonacoEditorModule } from "ngx-monaco-editor-v2"; imports: [CommonModule, SharedModule, CoreModule, MonacoEditorModule], }) export class CodeEditorPythonPage implements AfterViewInit { - editorOptions = { + editorOptions: any = { language: "python", automaticLayout: true, }; @@ -22,7 +22,16 @@ export class CodeEditorPythonPage implements AfterViewInit { constructor( public codeEditorState: CodeEditorState, private workspaceService: WorkspaceService, - ) {} + ) { + // check if we are currently in dark mode + const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches; + if (isDarkMode) { + this.editorOptions = { + ...this.editorOptions, + theme: "vs-dark", + }; + } + } ngAfterViewInit(): void { window.addEventListener("beforeunload", async () => { diff --git a/src/app/modules/components/header/header.component.scss b/src/app/modules/components/header/header.component.scss index 83739336..f1c9957b 100644 --- a/src/app/modules/components/header/header.component.scss +++ b/src/app/modules/components/header/header.component.scss @@ -1,10 +1,15 @@ .robot-select-dropdown { padding-top: 5%; padding-right: 5%; + color: white; } .header-container { - background-color: var(--leaphy-color-primary); + @media (prefers-color-scheme: dark) { + background-color: var(--leaphy-color-primary-dark-tint); + } @media (prefers-color-scheme: light) { + background-color: var(--leaphy-color-primary); + } padding: 10px 0; /* Added padding to prevent content from being too close to the edges */ } @@ -36,8 +41,13 @@ button { [mat-stroked-button], [mat-flat-button] { - color: var(--leaphy-color-light) !important; - border-color: var(--leaphy-color-secundary) !important; + @media (prefers-color-scheme: dark) { + background-color: var(--leaphy-color-primary-dark-tint); + border-color: var(--leaphy-color-secundary); + } @media (prefers-color-scheme: light) { + background-color: var(--leaphy-color-primary); + border-color: var(--leaphy-color-secundary); + } font-size: 12px; font-weight: normal; border-radius: 20px; diff --git a/src/app/modules/components/robot-selection/robot-selection.component.scss b/src/app/modules/components/robot-selection/robot-selection.component.scss index 0fa0bb13..7c3229a6 100644 --- a/src/app/modules/components/robot-selection/robot-selection.component.scss +++ b/src/app/modules/components/robot-selection/robot-selection.component.scss @@ -1,24 +1,44 @@ .robot-name { margin-top: 10px; + @media (prefers-color-scheme: dark) { + color: lightgrey; + } } .robot-button { - background-color: #ffffff; - border: solid 1px #f1f1f1; + @media (prefers-color-scheme: dark) { + background-color: #343444; + border: solid 1px #343444; + } + @media (prefers-color-scheme: light) { + background-color: #ffffff; + border: solid 1px #f1f1f1; + } width: 10vw; max-width: 180px !important; aspect-ratio: 1 / 1; &:hover, &:active { - background-color: #ffffff !important; - border: 3px solid var(--leaphy-color-primary) !important; + @media (prefers-color-scheme: dark) { + background-color: #444452 !important; + border: 3px solid var(--leaphy-color-primary) !important; + } + @media (prefers-color-scheme: light) { + background-color: #ffffff !important; + border: 3px solid var(--leaphy-color-primary) !important; + } } } + + .robot-button img { max-width: 90%; max-height: 90%; + @media (prefers-color-scheme: dark) { + filter: invert(20%); + } } .selected { diff --git a/src/app/modules/components/start/start.component.scss b/src/app/modules/components/start/start.component.scss index 2d884b44..1e3ce2b7 100644 --- a/src/app/modules/components/start/start.component.scss +++ b/src/app/modules/components/start/start.component.scss @@ -6,4 +6,5 @@ justify-content: center; flex-direction: column; position: relative; + background-color: var(--start-screen-bg); } diff --git a/src/app/modules/shared/components/button-bar/button-bar.component.scss b/src/app/modules/shared/components/button-bar/button-bar.component.scss index e85dfe7b..151dc68c 100644 --- a/src/app/modules/shared/components/button-bar/button-bar.component.scss +++ b/src/app/modules/shared/components/button-bar/button-bar.component.scss @@ -6,7 +6,13 @@ padding: 0 20px; & > button { - background-color: var(--leaphy-color-primary); + @media (prefers-color-scheme: dark) { + background-color: var(--leaphy-color-primary-dark-tint); + } + @media (prefers-color-scheme: light) { + background-color: var(--leaphy-color-primary); + } + border: 2px solid transparent; box-sizing: content-box; margin-bottom: 40px; diff --git a/src/app/services/toolbox/category.ts b/src/app/services/blockly/category.ts similarity index 100% rename from src/app/services/toolbox/category.ts rename to src/app/services/blockly/category.ts diff --git a/src/app/services/blockly/theme.ts b/src/app/services/blockly/theme.ts new file mode 100644 index 00000000..5f649337 --- /dev/null +++ b/src/app/services/blockly/theme.ts @@ -0,0 +1,84 @@ + +// check if user is using dark or light theme +import Blockly from "blockly/core"; +import {ITheme} from "blockly/core/theme"; + +const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches; + + +let theme: ITheme = { + name: "leaphy", +}; +if (isDarkMode) { + theme = { + base: Blockly.Themes.Classic, + blockStyles: { + leaphy_blocks: {colourPrimary: "#06434f", hat: "cap"}, + loop_blocks: {colourPrimary: "#69530d"}, + math_blocks: {colourPrimary: "#45662a"}, + text_blocks: {colourPrimary: "#45662a"}, + logic_blocks: {colourPrimary: "#45662a"}, + variable_blocks: {colourPrimary: "#87451a"}, + list_blocks: {colourPrimary: "#3f144a"}, + procedure_blocks: {colourPrimary: "#10324a"}, + }, + + categoryStyles: { + leaphy_category: {colour: "#06434f"}, + situation_category: {colour: "#69530d"}, + numbers_category: {colour: "#45662a"}, + variables_category: {colour: "#87451a"}, + lists_category: {colour: "#3f144a"}, + functions_category: {colour: "#10324a"}, + }, + componentStyles: { + workspaceBackgroundColour: "#1e1e1e", + toolboxBackgroundColour: "#343444", + toolboxForegroundColour: "#fff", + flyoutBackgroundColour: "#1e1e1e", + flyoutForegroundColour: "#ccc", + scrollbarColour: "#9c9a9a", + flyoutOpacity: 1, + }, + name: "leaphy", + } + +} else { + theme = { + base: Blockly.Themes.Classic, + blockStyles: { + leaphy_blocks: {colourPrimary: "#06778f", hat: "cap"}, + loop_blocks: {colourPrimary: "#D9B53F"}, + math_blocks: {colourPrimary: "#75B342"}, + text_blocks: {colourPrimary: "#75B342"}, + logic_blocks: {colourPrimary: "#75B342"}, + variable_blocks: {colourPrimary: "#DE7C3B"}, + list_blocks: {colourPrimary: "#a500cf"}, + procedure_blocks: {colourPrimary: "#4095CE"}, + }, + + categoryStyles: { + leaphy_category: {colour: "#06778f"}, + situation_category: {colour: "#D9B53F"}, + numbers_category: {colour: "#75B342"}, + variables_category: {colour: "#DE7C3B"}, + lists_category: {colour: "#a500cf"}, + functions_category: {colour: "#4095CE"}, + }, + componentStyles: { + workspaceBackgroundColour: "#E5E5E5", + toolboxBackgroundColour: "#343444", + toolboxForegroundColour: "#fff", + flyoutBackgroundColour: "#FFFFFF", + flyoutForegroundColour: "#ccc", + insertionMarkerColour: "#000", + scrollbarColour: "#ccc", + flyoutOpacity: 1, + }, + name: "leaphy", + } + +} + + +export { theme }; diff --git a/src/app/services/toolbox/toolbox.ts b/src/app/services/blockly/toolbox.ts similarity index 100% rename from src/app/services/toolbox/toolbox.ts rename to src/app/services/blockly/toolbox.ts diff --git a/src/styles.scss b/src/styles.scss index 4868adb4..8a3c4787 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -68,23 +68,54 @@ pre[class*="language-"]:after { // global variables :root { - --leaphy-color-primary: #06778f; - --leaphy-color-primary-dark-tint: #035e72; - --leaphy-color-secundary: #32a5a9; - --leaphy-color-dark: #343444; - --leaphy-color-light: #ffffff; - - --leaphy-block-default: #06778f; - --leaphy-block-yellow: #d9b53f; - --leaphy-block-green: #75b342; - --leaphy-block-orange: #de7c3b; - --leaphy-block-blue: #4095ce; - --leaphy-block-yellow: #d9b53f; - --leaphy-block-grey: #7d7d80; - - --mat-menu-item-label-text-size: 12px !important; + @media (prefers-color-scheme: light) { + --leaphy-color-primary: #06778f; + --leaphy-color-primary-dark-tint: #104d59; + --leaphy-color-secundary: #32a5a9; + --leaphy-color-dark: #343444; + --leaphy-color-light: #ffffff; + + --leaphy-block-default: #06778f; + --leaphy-block-yellow: #d9b53f; + --leaphy-block-green: #75b342; + --leaphy-block-orange: #de7c3b; + --leaphy-block-blue: #4095ce; + --leaphy-block-yellow: #d9b53f; + --leaphy-block-grey: #7d7d80; + + --mat-menu-item-label-text-size: 12px !important; + + --start-screen-bg: white; + } + @media (prefers-color-scheme: dark) { + --leaphy-color-primary: #06778f; + --leaphy-color-primary-dark-tint: #104d59; + --leaphy-color-secundary: #32a5a9; + --leaphy-color-dark: #343444; + --leaphy-color-light: #ffffff; + + --leaphy-block-default: #06778f; + --leaphy-block-yellow: #d9b53f; + --leaphy-block-green: #75b342; + --leaphy-block-orange: #de7c3b; + --leaphy-block-blue: #4095ce; + --leaphy-block-yellow: #d9b53f; + --leaphy-block-grey: #7d7d80; + + --mat-menu-item-label-text-size: 12px !important; + + --start-screen-bg: #1e1e1e; + } + } .blocklySvg { - background-color: transparent !important; + /* Light mode */ + @media (prefers-color-scheme: light) { + background-color: transparent !important; + } + /* Dark mode */ + @media (prefers-color-scheme: dark) { + background-color: var(--leaphy-color-dark) !important; + } } diff --git a/src/theme.scss b/src/theme.scss index 9d6ae7fd..ed9092a3 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -16,10 +16,29 @@ $light-mode-palette: ( contrast: (), ); +$dark-mode-palette: ( + 50: transparent, + 100: #b2dfdb, + 200: #80cbc4, + 300: #4db6ac, + 400: #26a69a, + 500: #009688, + 600: #00897b, + 700: #00796b, + 800: #00695c, + 900: #004d40, + A100: #10324a, + contrast: (), +); + $leaphy-color-accent-light: mat.define-palette($light-mode-palette, 50); $leaphy-color-primary-light: mat.define-palette($light-mode-palette, A100); $leaphy-color-warn-light: mat.define-palette($light-mode-palette, 900); +$leaphy-color-accent-dark: mat.define-palette($dark-mode-palette, 50); +$leaphy-color-primary-dark: mat.define-palette($dark-mode-palette, A100); +$leaphy-color-warn-dark: mat.define-palette($dark-mode-palette, 900); + $light-mode: mat.define-light-theme( ( color: ( @@ -31,16 +50,23 @@ $light-mode: mat.define-light-theme( ) ); -$dark-mode: mat.define-dark-theme( - ( - color: ( - primary: $leaphy-color-primary-light, - accent: $leaphy-color-accent-light, - warn: $leaphy-color-warn-light, - ), - typography: mat.define-legacy-typography-config(), - ) +$dark-theme: mat.define-dark-theme( + ( + color: ( + primary: $leaphy-color-primary-dark, + accent: $leaphy-color-accent-light, + warn: $leaphy-color-warn-light, + ), + typography: mat.define-legacy-typography-config(), + ) ); -@include mat.all-component-themes($light-mode); -@include mat.select-theme($light-mode); +/* Light mode */ +@media (prefers-color-scheme: light) { + @include mat.all-component-themes($light-mode); +} +/* Dark mode */ +@media (prefers-color-scheme: dark) { + @include mat.all-component-themes($dark-theme); +} + From 462a968079b628365064ee6ae9c5c1812e802085 Mon Sep 17 00:00:00 2001 From: koen1711 Date: Tue, 23 Apr 2024 22:29:43 +0200 Subject: [PATCH 03/29] chore: almost done with themes --- src/app/app.component.html | 1 + src/app/app.component.ts | 17 +++ src/app/effects/app.effects.ts | 1 - src/app/effects/blockly-editor.effects.ts | 67 +++++---- .../blockly-editor/blockly-editor.page.scss | 8 +- .../code-view/code-view.component.ts | 2 +- .../code-editor-cpp/code-editor-cpp.page.ts | 2 +- .../code-editor-python.page.scss | 11 +- .../code-editor-python.page.ts | 2 +- .../components/header/header.component.html | 38 ++++- .../components/header/header.component.scss | 22 ++- .../components/header/header.component.ts | 8 + .../robot-selection.component.scss | 21 +-- .../components/start/start.component.scss | 5 +- .../button-bar/button-bar.component.scss | 11 +- src/app/services/blockly/theme.ts | 141 +++++++++--------- src/app/state/blockly-editor.state.ts | 4 + src/assets/i18n/en.json | 3 + src/assets/i18n/nl.json | 3 + src/main.ts | 1 + src/styles.scss | 44 ++++-- src/theme.scss | 21 ++- 22 files changed, 257 insertions(+), 176 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index 3cb52de5..cfdcaa81 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -4,3 +4,4 @@ } @else { } + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index f01bc4ce..8dc3aee3 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -15,6 +15,23 @@ export class AppComponent { private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer, ) { + // get theme from local storage + const theme = localStorage.getItem('theme'); + + if (theme) { + console.log('theme', theme); + const body = document.querySelector('body'); + body.setAttribute("data-theme", theme); + body.setAttribute("data-bs-theme", theme); + } else { + localStorage.setItem('theme', 'light'); + document.addEventListener('DOMContentLoaded', function() { + const body = document.querySelector('body'); + body.setAttribute("data-theme", "light"); + body.setAttribute("data-bs-theme", "light"); + }); + } + this.matIconRegistry.addSvgIcon( "block", this.domSanitizer.bypassSecurityTrustResourceUrl( diff --git a/src/app/effects/app.effects.ts b/src/app/effects/app.effects.ts index ef23b66c..99001dbe 100644 --- a/src/app/effects/app.effects.ts +++ b/src/app/effects/app.effects.ts @@ -137,7 +137,6 @@ export class AppEffects { this.localStorage.store("releaseVersion", releaseVersion); const robotId = this.localStorage.fetch("changedLanguage"); - console.log(robotId); if (robotId) { this.localStorage.store("changedLanguage", ""); this.workspaceService diff --git a/src/app/effects/blockly-editor.effects.ts b/src/app/effects/blockly-editor.effects.ts index ae482ff4..1e125b71 100644 --- a/src/app/effects/blockly-editor.effects.ts +++ b/src/app/effects/blockly-editor.effects.ts @@ -1,29 +1,29 @@ -import { Injectable } from "@angular/core"; -import { BlocklyEditorState } from "../state/blockly-editor.state"; -import { filter, pairwise, withLatestFrom } from "rxjs/operators"; -import { HttpClient, HttpHeaders } from "@angular/common/http"; -import { combineLatest, Observable } from "rxjs"; -import { AppState } from "../state/app.state"; -import { CodeEditorType } from "../domain/code-editor.type"; +import {Injectable} from "@angular/core"; +import {BlocklyEditorState} from "../state/blockly-editor.state"; +import {filter, pairwise, withLatestFrom} from "rxjs/operators"; +import {HttpClient, HttpHeaders} from "@angular/common/http"; +import {combineLatest, Observable} from "rxjs"; +import {AppState} from "../state/app.state"; +import {CodeEditorType} from "../domain/code-editor.type"; import * as Blockly from "blockly"; import "@blockly/field-bitmap"; import { + arduino, CATEGORIES, + constantBlocks, EXTENSIONS, - translations, - arduino, getBlocks, - constantBlocks, + translations, } from "@leaphy-robotics/leaphy-blocks"; -import * as THEME from "../services/blockly/theme"; -import { LeaphyCategory } from "../services/blockly/category"; -import { LeaphyToolbox } from "../services/blockly/toolbox"; -import { CodeEditorState } from "../state/code-editor.state"; -import { genericRobotType, microPythonRobotType } from "../domain/robots"; -import { RobotType } from "../domain/robot.type"; -import { WorkspaceService } from "../services/workspace.service"; -import { LocalStorageService } from "../services/localstorage.service"; +import {LeaphyCategory} from "../services/blockly/category"; +import {LeaphyToolbox} from "../services/blockly/toolbox"; +import {CodeEditorState} from "../state/code-editor.state"; +import {genericRobotType, microPythonRobotType} from "../domain/robots"; +import {RobotType} from "../domain/robot.type"; +import {WorkspaceService} from "../services/workspace.service"; +import {LocalStorageService} from "../services/localstorage.service"; +import getTheme from "../services/blockly/theme"; @Injectable({ providedIn: "root", @@ -32,6 +32,7 @@ import { LocalStorageService } from "../services/localstorage.service"; // Defines the effects on the Blockly Editor that different state changes have export class BlocklyEditorEffects { private firstRun = true; + private startWorkspaceXml = ``; constructor( private blocklyState: BlocklyEditorState, @@ -41,6 +42,10 @@ export class BlocklyEditorEffects { private workspaceService: WorkspaceService, private localStorage: LocalStorageService, ) { + this.getXmlContent("./assets/blockly/leaphy-start.xml").subscribe( + (xml) => (this.startWorkspaceXml = xml), + ); + Blockly.registry.register( Blockly.registry.Type.TOOLBOX_ITEM, Blockly.ToolboxCategory.registrationName, @@ -120,16 +125,15 @@ export class BlocklyEditorEffects { withLatestFrom( this.getXmlContent("./assets/blockly/base-toolbox.xml"), this.getXmlContent("./assets/blockly/leaphy-toolbox.xml"), - this.getXmlContent("./assets/blockly/leaphy-start.xml"), ), ) .subscribe( - ([ - [[element, config], robotType], - baseToolboxXml, - leaphyToolboxXml, - startWorkspaceXml, - ]) => { + async ([ + [[element, config], robotType], + baseToolboxXml, + leaphyToolboxXml, + ]) => { + let THEME = getTheme(); let allBlocks = getBlocks(robotType.id).block; if (this.firstRun) { this.firstRun = false; @@ -137,7 +141,7 @@ export class BlocklyEditorEffects { } Blockly.defineBlocksWithJsonArray(allBlocks); - config.theme = Blockly.Theme.defineTheme("dark", THEME.theme); + config.theme = Blockly.Theme.defineTheme("leaphy", THEME); const toolboxXmlString = this.loadToolBox( baseToolboxXml, leaphyToolboxXml, @@ -152,7 +156,7 @@ export class BlocklyEditorEffects { CATEGORIES.LISTS, ); toolbox.getFlyout().autoClose = false; - const xml = Blockly.utils.xml.textToDom(startWorkspaceXml); + const xml = Blockly.utils.xml.textToDom(this.startWorkspaceXml); Blockly.Xml.domToWorkspace(xml, workspace); this.blocklyState.workspace = workspace; this.blocklyState.toolboxXml = toolboxXmlString; @@ -161,7 +165,8 @@ export class BlocklyEditorEffects { ) { this.workspaceService .restoreWorkspaceTemp() - .then(() => {}); + .then(() => { + }); } toolbox.selectItemByPosition(0); toolbox.refreshTheme(); @@ -172,8 +177,7 @@ export class BlocklyEditorEffects { robotType.features.showCodeOnStart), 200, ); - }, - ); + }); // When a new project is started, reset the blockly code this.appState.selectedRobotType$ @@ -200,12 +204,11 @@ export class BlocklyEditorEffects { leaphyToolboxXml, startWorkspaceXml, ]) => { - const toolboxXmlString = this.loadToolBox( + this.blocklyState.toolboxXml = this.loadToolBox( baseToolboxXml, leaphyToolboxXml, robotType, ); - this.blocklyState.toolboxXml = toolboxXmlString; workspace.clear(); const xml = Blockly.utils.xml.textToDom(startWorkspaceXml); diff --git a/src/app/modules/blockly-editor/blockly-editor.page.scss b/src/app/modules/blockly-editor/blockly-editor.page.scss index f7dd2740..571fb5f0 100644 --- a/src/app/modules/blockly-editor/blockly-editor.page.scss +++ b/src/app/modules/blockly-editor/blockly-editor.page.scss @@ -9,12 +9,8 @@ .sidenav-container { flex: 1 1 auto; - @media (prefers-color-scheme: dark) { - background: #333; - } - @media (prefers-color-scheme: light) { - background: #eee; - } + background: var(--leaphy-background-color); + } #sidenav { diff --git a/src/app/modules/blockly-editor/components/code-view/code-view.component.ts b/src/app/modules/blockly-editor/components/code-view/code-view.component.ts index fd8c8757..e00b00e4 100644 --- a/src/app/modules/blockly-editor/components/code-view/code-view.component.ts +++ b/src/app/modules/blockly-editor/components/code-view/code-view.component.ts @@ -15,7 +15,7 @@ export class CodeViewComponent { constructor(public codeEditor: CodeEditorState) { // check if we are currently in dark mode - const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches; + const isDarkMode = document.getElementsByTagName('body')[0].getAttribute('data-theme') === 'dark'; if (isDarkMode) { this.editorOptions = { ...this.editorOptions, diff --git a/src/app/modules/code-editor-cpp/code-editor-cpp.page.ts b/src/app/modules/code-editor-cpp/code-editor-cpp.page.ts index 7713ab81..568dec35 100644 --- a/src/app/modules/code-editor-cpp/code-editor-cpp.page.ts +++ b/src/app/modules/code-editor-cpp/code-editor-cpp.page.ts @@ -24,7 +24,7 @@ export class CodeEditorCppPage implements AfterViewInit { private workspaceService: WorkspaceService, ) { // check if we are currently in dark mode - const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches; + const isDarkMode = document.getElementsByTagName('body')[0].getAttribute('data-theme') === 'dark'; if (isDarkMode) { this.editorOptions = { ...this.editorOptions, diff --git a/src/app/modules/code-editor-python/code-editor-python.page.scss b/src/app/modules/code-editor-python/code-editor-python.page.scss index a26f805b..c7459474 100644 --- a/src/app/modules/code-editor-python/code-editor-python.page.scss +++ b/src/app/modules/code-editor-python/code-editor-python.page.scss @@ -1,3 +1,4 @@ + .monaco-editor { width: 100%; height: 80%; @@ -10,14 +11,11 @@ height: calc(100% - 64px); width: 100%; overflow: hidden; - @media (prefers-color-scheme: dark) { - background-color: #343444; - } - @media (prefers-color-scheme: light) { - background-color: #ffffff; - } + background-color: var(--leaphy-background-color); + } + .sidenav-container { flex: 1 1 auto; background: #eee; @@ -40,3 +38,4 @@ app-button-bar { height: calc(20% - 20px); width: 100%; } + diff --git a/src/app/modules/code-editor-python/code-editor-python.page.ts b/src/app/modules/code-editor-python/code-editor-python.page.ts index 7ba7d132..58040973 100644 --- a/src/app/modules/code-editor-python/code-editor-python.page.ts +++ b/src/app/modules/code-editor-python/code-editor-python.page.ts @@ -24,7 +24,7 @@ export class CodeEditorPythonPage implements AfterViewInit { private workspaceService: WorkspaceService, ) { // check if we are currently in dark mode - const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches; + const isDarkMode = document.getElementsByTagName('body')[0].getAttribute('data-theme') === 'dark'; if (isDarkMode) { this.editorOptions = { ...this.editorOptions, diff --git a/src/app/modules/components/header/header.component.html b/src/app/modules/components/header/header.component.html index 57dd1153..cc8a20c1 100644 --- a/src/app/modules/components/header/header.component.html +++ b/src/app/modules/components/header/header.component.html @@ -31,20 +31,20 @@ } - - - @if ( (this.appState.selectedRobotType$ | async) !== microPythonRobotType ) { - } @@ -95,7 +95,7 @@ " (click)="onCodeEditorClicked()" > - editoreditor{{ "CODE" | translate }} } @@ -107,12 +107,12 @@ " (click)="onCodeEditorClicked()" > - {{ "BLOCKS" | translate }} } @if (this.appState.selectedRobotType$ | async) { @@ -134,7 +134,6 @@ microPythonRobotType ) { + } + + + + + + + diff --git a/src/app/modules/components/header/header.component.scss b/src/app/modules/components/header/header.component.scss index f1c9957b..113247a0 100644 --- a/src/app/modules/components/header/header.component.scss +++ b/src/app/modules/components/header/header.component.scss @@ -1,3 +1,4 @@ + .robot-select-dropdown { padding-top: 5%; padding-right: 5%; @@ -5,14 +6,11 @@ } .header-container { - @media (prefers-color-scheme: dark) { - background-color: var(--leaphy-color-primary-dark-tint); - } @media (prefers-color-scheme: light) { - background-color: var(--leaphy-color-primary); - } padding: 10px 0; /* Added padding to prevent content from being too close to the edges */ + background-color: var(--leaphy-header-bg); } + .header-logo { height: 18px; width: auto; @@ -41,17 +39,16 @@ button { [mat-stroked-button], [mat-flat-button] { - @media (prefers-color-scheme: dark) { - background-color: var(--leaphy-color-primary-dark-tint); - border-color: var(--leaphy-color-secundary); - } @media (prefers-color-scheme: light) { - background-color: var(--leaphy-color-primary); - border-color: var(--leaphy-color-secundary); - } + background-color: transparent; + border-color: var(--leaphy-color-secundary); font-size: 12px; font-weight: normal; border-radius: 20px; padding: 5px 15px; /* Added padding to buttons */ + + span { + color: var(--leaphy-color-light); + } } #block-icon { @@ -108,6 +105,7 @@ mat-button-toggle { align-content: center; mat-icon { + color: var(--leaphy-color-light) !important; width: 100%; height: 100%; margin-top: 15px; diff --git a/src/app/modules/components/header/header.component.ts b/src/app/modules/components/header/header.component.ts index e6ea62be..edde5519 100644 --- a/src/app/modules/components/header/header.component.ts +++ b/src/app/modules/components/header/header.component.ts @@ -268,4 +268,12 @@ export class HeaderComponent { } protected readonly genericRobots = genericRobots; + + onThemeChanged(theme: any) { + const body = document.getElementsByTagName("body")[0]; + body.setAttribute("data-theme", theme); + body.setAttribute("data-bs-theme", theme); + } + + protected readonly document = document; } diff --git a/src/app/modules/components/robot-selection/robot-selection.component.scss b/src/app/modules/components/robot-selection/robot-selection.component.scss index 7c3229a6..5fac3063 100644 --- a/src/app/modules/components/robot-selection/robot-selection.component.scss +++ b/src/app/modules/components/robot-selection/robot-selection.component.scss @@ -1,30 +1,23 @@ + .robot-name { margin-top: 10px; - @media (prefers-color-scheme: dark) { - color: lightgrey; - } + color: var(--leaphy-text-color); } .robot-button { - @media (prefers-color-scheme: dark) { - background-color: #343444; - border: solid 1px #343444; - } - @media (prefers-color-scheme: light) { - background-color: #ffffff; - border: solid 1px #f1f1f1; - } + background-color: var(--leaphy-robot-tile) !important; + border: solid 1px var(--leaphy-robot-tile-border) !important; width: 10vw; max-width: 180px !important; aspect-ratio: 1 / 1; &:hover, &:active { - @media (prefers-color-scheme: dark) { + body[data-theme='dark'] & { background-color: #444452 !important; border: 3px solid var(--leaphy-color-primary) !important; } - @media (prefers-color-scheme: light) { + body[data-theme='light'] & { background-color: #ffffff !important; border: 3px solid var(--leaphy-color-primary) !important; } @@ -36,7 +29,7 @@ .robot-button img { max-width: 90%; max-height: 90%; - @media (prefers-color-scheme: dark) { + body[data-theme='dark'] & { filter: invert(20%); } } diff --git a/src/app/modules/components/start/start.component.scss b/src/app/modules/components/start/start.component.scss index 1e3ce2b7..bd58e635 100644 --- a/src/app/modules/components/start/start.component.scss +++ b/src/app/modules/components/start/start.component.scss @@ -1,3 +1,5 @@ + + #start-container { width: 100vw; height: calc(100vh - 64px); @@ -6,5 +8,6 @@ justify-content: center; flex-direction: column; position: relative; - background-color: var(--start-screen-bg); + background-color: var(--leaphy-background-color); + color: var(--leaphy-text-color); } diff --git a/src/app/modules/shared/components/button-bar/button-bar.component.scss b/src/app/modules/shared/components/button-bar/button-bar.component.scss index 151dc68c..247c2bcb 100644 --- a/src/app/modules/shared/components/button-bar/button-bar.component.scss +++ b/src/app/modules/shared/components/button-bar/button-bar.component.scss @@ -1,3 +1,4 @@ + .sidenav-buttons { pointer-events: initial; display: flex; @@ -6,13 +7,7 @@ padding: 0 20px; & > button { - @media (prefers-color-scheme: dark) { - background-color: var(--leaphy-color-primary-dark-tint); - } - @media (prefers-color-scheme: light) { - background-color: var(--leaphy-color-primary); - } - + background-color: var(--leaphy-color-primary); border: 2px solid transparent; box-sizing: content-box; margin-bottom: 40px; @@ -32,7 +27,7 @@ } &:enabled::before { - background: var(--leaphy-color-dark); + background-color: var(--leaphy-color-dark); border-radius: 5px; content: attr(tooltip); display: inline-block; diff --git a/src/app/services/blockly/theme.ts b/src/app/services/blockly/theme.ts index 5f649337..44b1cdc8 100644 --- a/src/app/services/blockly/theme.ts +++ b/src/app/services/blockly/theme.ts @@ -1,84 +1,83 @@ // check if user is using dark or light theme -import Blockly from "blockly/core"; import {ITheme} from "blockly/core/theme"; -const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches; -let theme: ITheme = { - name: "leaphy", -}; -if (isDarkMode) { - theme = { - base: Blockly.Themes.Classic, - blockStyles: { - leaphy_blocks: {colourPrimary: "#06434f", hat: "cap"}, - loop_blocks: {colourPrimary: "#69530d"}, - math_blocks: {colourPrimary: "#45662a"}, - text_blocks: {colourPrimary: "#45662a"}, - logic_blocks: {colourPrimary: "#45662a"}, - variable_blocks: {colourPrimary: "#87451a"}, - list_blocks: {colourPrimary: "#3f144a"}, - procedure_blocks: {colourPrimary: "#10324a"}, - }, +function getTheme(): ITheme { + const isDarkMode = document.getElementsByTagName('body')[0].getAttribute('data-theme') === 'dark'; - categoryStyles: { - leaphy_category: {colour: "#06434f"}, - situation_category: {colour: "#69530d"}, - numbers_category: {colour: "#45662a"}, - variables_category: {colour: "#87451a"}, - lists_category: {colour: "#3f144a"}, - functions_category: {colour: "#10324a"}, - }, - componentStyles: { - workspaceBackgroundColour: "#1e1e1e", - toolboxBackgroundColour: "#343444", - toolboxForegroundColour: "#fff", - flyoutBackgroundColour: "#1e1e1e", - flyoutForegroundColour: "#ccc", - scrollbarColour: "#9c9a9a", - flyoutOpacity: 1, - }, - name: "leaphy", - } + let theme: ITheme; + if (isDarkMode) { + theme = { + blockStyles: { + leaphy_blocks: {colourPrimary: "#06434f", hat: "cap"}, + loop_blocks: {colourPrimary: "#69530d"}, + math_blocks: {colourPrimary: "#45662a"}, + text_blocks: {colourPrimary: "#45662a"}, + logic_blocks: {colourPrimary: "#45662a"}, + variable_blocks: {colourPrimary: "#87451a"}, + list_blocks: {colourPrimary: "#3f144a"}, + procedure_blocks: {colourPrimary: "#10324a"}, + }, + + categoryStyles: { + leaphy_category: {colour: "#06434f"}, + situation_category: {colour: "#69530d"}, + numbers_category: {colour: "#45662a"}, + variables_category: {colour: "#87451a"}, + lists_category: {colour: "#3f144a"}, + functions_category: {colour: "#10324a"}, + }, + componentStyles: { + workspaceBackgroundColour: "#1e1e1e", + toolboxBackgroundColour: "#343444", + toolboxForegroundColour: "#fff", + flyoutBackgroundColour: "#1e1e1e", + flyoutForegroundColour: "#ccc", + scrollbarColour: "#9c9a9a", + flyoutOpacity: 1, + }, + name: "leaphy", + } -} else { - theme = { - base: Blockly.Themes.Classic, - blockStyles: { - leaphy_blocks: {colourPrimary: "#06778f", hat: "cap"}, - loop_blocks: {colourPrimary: "#D9B53F"}, - math_blocks: {colourPrimary: "#75B342"}, - text_blocks: {colourPrimary: "#75B342"}, - logic_blocks: {colourPrimary: "#75B342"}, - variable_blocks: {colourPrimary: "#DE7C3B"}, - list_blocks: {colourPrimary: "#a500cf"}, - procedure_blocks: {colourPrimary: "#4095CE"}, - }, + } else { + theme = { + blockStyles: { + leaphy_blocks: {colourPrimary: "#06778f", hat: "cap"}, + loop_blocks: {colourPrimary: "#D9B53F"}, + math_blocks: {colourPrimary: "#75B342"}, + text_blocks: {colourPrimary: "#75B342"}, + logic_blocks: {colourPrimary: "#75B342"}, + variable_blocks: {colourPrimary: "#DE7C3B"}, + list_blocks: {colourPrimary: "#a500cf"}, + procedure_blocks: {colourPrimary: "#4095CE"}, + }, + + categoryStyles: { + leaphy_category: {colour: "#06778f"}, + situation_category: {colour: "#D9B53F"}, + numbers_category: {colour: "#75B342"}, + variables_category: {colour: "#DE7C3B"}, + lists_category: {colour: "#a500cf"}, + functions_category: {colour: "#4095CE"}, + }, + componentStyles: { + workspaceBackgroundColour: "#E5E5E5", + toolboxBackgroundColour: "#343444", + toolboxForegroundColour: "#fff", + flyoutBackgroundColour: "#FFFFFF", + flyoutForegroundColour: "#ccc", + insertionMarkerColour: "#000", + scrollbarColour: "#ccc", + flyoutOpacity: 1, + }, + name: "leaphy", + } - categoryStyles: { - leaphy_category: {colour: "#06778f"}, - situation_category: {colour: "#D9B53F"}, - numbers_category: {colour: "#75B342"}, - variables_category: {colour: "#DE7C3B"}, - lists_category: {colour: "#a500cf"}, - functions_category: {colour: "#4095CE"}, - }, - componentStyles: { - workspaceBackgroundColour: "#E5E5E5", - toolboxBackgroundColour: "#343444", - toolboxForegroundColour: "#fff", - flyoutBackgroundColour: "#FFFFFF", - flyoutForegroundColour: "#ccc", - insertionMarkerColour: "#000", - scrollbarColour: "#ccc", - flyoutOpacity: 1, - }, - name: "leaphy", } + return theme; } - -export { theme }; +export default getTheme; diff --git a/src/app/state/blockly-editor.state.ts b/src/app/state/blockly-editor.state.ts index a8fa2c6d..e7682895 100644 --- a/src/app/state/blockly-editor.state.ts +++ b/src/app/state/blockly-editor.state.ts @@ -129,4 +129,8 @@ export class BlocklyEditorState { get workspaceJSON(): string { return this.workspaceJSONSubject$.getValue(); } + + get blocklyConfig(): any { + return this.blocklyConfigSubject$.getValue(); + } } diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index aa6e2dc4..a2068165 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -57,6 +57,9 @@ "SHOW_ON_SCREEN": "Show on screen", "EDIT_CODE": "Edit code", "LANGUAGE": "Language", + "THEME": "Theme", + "DARK_THEME": "Dark", + "LIGHT_THEME": "Light", "CHOOSE_A_ROBOT": "CONNECT A ROBOT", "SELECT_ROBOT_START_PROJECT": "Select your programming environment", "VIEW_LOG": "View log", diff --git a/src/assets/i18n/nl.json b/src/assets/i18n/nl.json index 49ae4a26..a65a4b36 100644 --- a/src/assets/i18n/nl.json +++ b/src/assets/i18n/nl.json @@ -57,6 +57,9 @@ "SHOW_ON_SCREEN": "Toon op scherm", "EDIT_CODE": "Code bewerken", "LANGUAGE": "Taal", + "THEME": "Thema", + "DARK": "Donker", + "LIGHT": "Licht", "CHOOSE_A_ROBOT": "KIES EEN ROBOT", "SELECT_ROBOT_START_PROJECT": "Selecteer je programmeeromgeving en start je nieuwe project", "VIEW_LOG": "Bekijk log", diff --git a/src/main.ts b/src/main.ts index acf3fabf..2164dbcf 100644 --- a/src/main.ts +++ b/src/main.ts @@ -12,6 +12,7 @@ if (environment.production) { enableProdMode(); } + platformBrowserDynamic() .bootstrapModule(AppModule) .catch((err) => console.error(err)); diff --git a/src/styles.scss b/src/styles.scss index 8a3c4787..81b09246 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -18,7 +18,7 @@ html { html, body { height: 100%; - background-color: #f1f1f1; + //background-color: #f1f1f1; } body { margin: 0; @@ -67,8 +67,14 @@ pre[class*="language-"]:after { // global variables +// check on the root element if the theme is light or dark + + :root { - @media (prefers-color-scheme: light) { + + body[data-theme='light'] { + --leaphy-header-bg: #06778f; + --leaphy-color-primary: #06778f; --leaphy-color-primary-dark-tint: #104d59; --leaphy-color-secundary: #32a5a9; @@ -86,9 +92,20 @@ pre[class*="language-"]:after { --mat-menu-item-label-text-size: 12px !important; --start-screen-bg: white; + + --leaphy-background-color: #eeeeee; + + --leaphy-robot-tile: #ffffff; + --leaphy-robot-tile-border: #f1f1f1; + + --leaphy-text-color: #000000; + + --leaphy-blockly-bg: #ffffff; } - @media (prefers-color-scheme: dark) { - --leaphy-color-primary: #06778f; + body[data-theme='dark'] { + --leaphy-header-bg: #104d59; + + --leaphy-color-primary: #104d59; --leaphy-color-primary-dark-tint: #104d59; --leaphy-color-secundary: #32a5a9; --leaphy-color-dark: #343444; @@ -105,17 +122,20 @@ pre[class*="language-"]:after { --mat-menu-item-label-text-size: 12px !important; --start-screen-bg: #1e1e1e; + --leaphy-background-color: #1e1e1e; + + --leaphy-robot-tile: #343444; + --leaphy-robot-tile-border: #343444; + + --leaphy-text-color: lightgray; + + --leaphy-blockly-bg: #353444; } } .blocklySvg { - /* Light mode */ - @media (prefers-color-scheme: light) { - background-color: transparent !important; - } - /* Dark mode */ - @media (prefers-color-scheme: dark) { - background-color: var(--leaphy-color-dark) !important; - } + background-color: var(--leaphy-blockly-bg) !important; } + + diff --git a/src/theme.scss b/src/theme.scss index ed9092a3..235f99bb 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -1,6 +1,20 @@ @use "@angular/material" as mat; @include mat.core(); +:root { + --dark-mode: 0; + +} + +body[data-theme='light'] { + --dark-mode: 0; +} + +body[data-theme='dark'] { + --dark-mode: 1; +} + + $light-mode-palette: ( 50: transparent, 100: #b2dfdb, @@ -62,11 +76,14 @@ $dark-theme: mat.define-dark-theme( ); /* Light mode */ -@media (prefers-color-scheme: light) { +body[data-theme='light'] { @include mat.all-component-themes($light-mode); } + /* Dark mode */ -@media (prefers-color-scheme: dark) { +body[data-theme='dark'] { @include mat.all-component-themes($dark-theme); } + + From 2bfc12f97a4bbbc580db32530aa2381d19a70a4a Mon Sep 17 00:00:00 2001 From: koen1711 Date: Wed, 24 Apr 2024 10:48:57 +0200 Subject: [PATCH 04/29] chore: almost done with themes.... --- src/app/effects/blockly-editor.effects.ts | 118 ++++++++++-------- .../components/header/header.component.html | 2 +- .../components/header/header.component.scss | 2 +- .../components/header/header.component.ts | 6 + .../robot-selection.component.scss | 14 +-- .../components/start/start.component.scss | 2 +- .../connect-python/connect-python.dialog.html | 6 +- .../connect-python/connect-python.dialog.scss | 5 +- .../serial-output.component.scss | 2 +- src/app/services/blockly/theme.ts | 17 +-- src/app/state/app.state.ts | 4 + src/app/state/blockly-editor.state.ts | 9 ++ src/styles.scss | 34 +++-- 13 files changed, 123 insertions(+), 98 deletions(-) diff --git a/src/app/effects/blockly-editor.effects.ts b/src/app/effects/blockly-editor.effects.ts index 1e125b71..7110c696 100644 --- a/src/app/effects/blockly-editor.effects.ts +++ b/src/app/effects/blockly-editor.effects.ts @@ -33,6 +33,68 @@ import getTheme from "../services/blockly/theme"; export class BlocklyEditorEffects { private firstRun = true; private startWorkspaceXml = ``; + private baseToolboxXml = ``; + private leaphyToolboxXml = ``; + + private readonly darkTheme = getTheme("dark"); + private readonly lightTheme = getTheme("light"); + + public async loadTheme() { + const workspace = this.blocklyState.workspace; + const darkMode = document.getElementsByTagName('body')[0].getAttribute('data-theme') === 'dark'; + const blocklyTheme = darkMode ? this.darkTheme : this.lightTheme; + workspace.setTheme(blocklyTheme); + workspace.refreshTheme(); + } + + public async loadBlockly(element, robotType: RobotType, config: Blockly.BlocklyOptions) { + let allBlocks = getBlocks(robotType.id).block; + if (this.firstRun) { + this.firstRun = false; + allBlocks = allBlocks.concat(constantBlocks); + } + + Blockly.defineBlocksWithJsonArray(allBlocks); + + const toolboxXmlString = this.loadToolBox( + robotType, + ); + config.toolbox = toolboxXmlString; + // @ts-ignore + const workspace = Blockly.inject(element, config); + const darkMode = document.getElementsByTagName('body')[0].getAttribute('data-theme') === 'dark'; + const blocklyTheme = darkMode ? this.darkTheme : this.lightTheme; + workspace.setTheme(blocklyTheme); + const toolbox = workspace.getToolbox(); + workspace.registerToolboxCategoryCallback( + "LISTS", + CATEGORIES.LISTS, + ); + toolbox.getFlyout().autoClose = false; + const xml = Blockly.utils.xml.textToDom(this.startWorkspaceXml); + Blockly.Xml.domToWorkspace(xml, workspace); + this.blocklyState.workspace = workspace; + this.blocklyState.toolboxXml = toolboxXmlString; + if ( + this.appState.currentEditor == CodeEditorType.Beginner + ) { + this.workspaceService + .restoreWorkspaceTemp() + .then(() => { + }); + } + toolbox.selectItemByPosition(0); + toolbox.refreshTheme(); + + setTimeout( + () => + (this.blocklyState.isSideNavOpen = + robotType.features.showCodeOnStart), + 200, + ); + } + + constructor( private blocklyState: BlocklyEditorState, @@ -133,50 +195,9 @@ export class BlocklyEditorEffects { baseToolboxXml, leaphyToolboxXml, ]) => { - let THEME = getTheme(); - let allBlocks = getBlocks(robotType.id).block; - if (this.firstRun) { - this.firstRun = false; - allBlocks = allBlocks.concat(constantBlocks); - } - - Blockly.defineBlocksWithJsonArray(allBlocks); - config.theme = Blockly.Theme.defineTheme("leaphy", THEME); - const toolboxXmlString = this.loadToolBox( - baseToolboxXml, - leaphyToolboxXml, - robotType, - ); - config.toolbox = toolboxXmlString; - // @ts-ignore - const workspace = Blockly.inject(element, config); - const toolbox = workspace.getToolbox(); - workspace.registerToolboxCategoryCallback( - "LISTS", - CATEGORIES.LISTS, - ); - toolbox.getFlyout().autoClose = false; - const xml = Blockly.utils.xml.textToDom(this.startWorkspaceXml); - Blockly.Xml.domToWorkspace(xml, workspace); - this.blocklyState.workspace = workspace; - this.blocklyState.toolboxXml = toolboxXmlString; - if ( - this.appState.currentEditor == CodeEditorType.Beginner - ) { - this.workspaceService - .restoreWorkspaceTemp() - .then(() => { - }); - } - toolbox.selectItemByPosition(0); - toolbox.refreshTheme(); - - setTimeout( - () => - (this.blocklyState.isSideNavOpen = - robotType.features.showCodeOnStart), - 200, - ); + this.baseToolboxXml = baseToolboxXml; + this.leaphyToolboxXml = leaphyToolboxXml; + await this.loadBlockly(element, robotType, config); }); // When a new project is started, reset the blockly code @@ -205,8 +226,6 @@ export class BlocklyEditorEffects { startWorkspaceXml, ]) => { this.blocklyState.toolboxXml = this.loadToolBox( - baseToolboxXml, - leaphyToolboxXml, robotType, ); @@ -333,19 +352,18 @@ export class BlocklyEditorEffects { return category; } + private loadToolBox( - baseToolboxXml: string, - leaphyToolboxXml: string, robotType: RobotType, ): string { const parser = new DOMParser(); const toolboxXmlDoc = parser.parseFromString( - baseToolboxXml, + this.baseToolboxXml, "text/xml", ); const toolboxElement = toolboxXmlDoc.getElementById("easyBloqsToolbox"); const leaphyCategories = parser.parseFromString( - leaphyToolboxXml, + this.leaphyToolboxXml, "text/xml", ); const leaphyRobotCategory = leaphyCategories.getElementById( diff --git a/src/app/modules/components/header/header.component.html b/src/app/modules/components/header/header.component.html index cc8a20c1..c2907ca2 100644 --- a/src/app/modules/components/header/header.component.html +++ b/src/app/modules/components/header/header.component.html @@ -243,7 +243,7 @@ {{ "LANGUAGE" | translate }} - {{ "FLASH_FIRMWARE" | translate }} + } @if (didUpload | async) {
- - @if ( (this.appState.selectedRobotType$ | async) !== microPythonRobotType ) { - } @@ -107,7 +123,11 @@ " (click)="onCodeEditorClicked()" > - {{ "BLOCKS" | translate }} } @@ -297,17 +317,23 @@ - - diff --git a/src/app/modules/components/header/header.component.scss b/src/app/modules/components/header/header.component.scss index a0295d27..545a300b 100644 --- a/src/app/modules/components/header/header.component.scss +++ b/src/app/modules/components/header/header.component.scss @@ -1,4 +1,3 @@ - .robot-select-dropdown { padding-top: 5%; padding-right: 5%; @@ -10,7 +9,6 @@ background-color: var(--leaphy-header-bg); } - .header-logo { height: 18px; width: auto; diff --git a/src/app/modules/components/header/header.component.ts b/src/app/modules/components/header/header.component.ts index be8f70ef..b3194b79 100644 --- a/src/app/modules/components/header/header.component.ts +++ b/src/app/modules/components/header/header.component.ts @@ -23,7 +23,7 @@ import { StatusMessageDialog } from "../../core/dialogs/status-message/status-me import { WorkspaceService } from "../../../services/workspace.service"; import { MatSelectChange } from "@angular/material/select"; import { RobotType } from "../../../domain/robot.type"; -import {BlocklyEditorEffects} from "../../../effects/blockly-editor.effects"; +import { BlocklyEditorEffects } from "../../../effects/blockly-editor.effects"; @Component({ selector: "app-header", @@ -273,7 +273,6 @@ export class HeaderComponent { onThemeChanged(theme: any) { this.appState.selectedTheme = theme; - } protected readonly document = document; diff --git a/src/app/modules/components/robot-selection/robot-selection.component.scss b/src/app/modules/components/robot-selection/robot-selection.component.scss index fa315758..f31c4ea1 100644 --- a/src/app/modules/components/robot-selection/robot-selection.component.scss +++ b/src/app/modules/components/robot-selection/robot-selection.component.scss @@ -1,4 +1,3 @@ - .robot-name { margin-top: 10px; color: var(--leaphy-text-color); @@ -17,13 +16,10 @@ } } - - .robot-button img { max-width: 90%; max-height: 90%; filter: var(--leaphy-robot-icon-filter); - } .selected { diff --git a/src/app/modules/components/start/start.component.scss b/src/app/modules/components/start/start.component.scss index 970b0ad4..ee3c8ac6 100644 --- a/src/app/modules/components/start/start.component.scss +++ b/src/app/modules/components/start/start.component.scss @@ -1,5 +1,3 @@ - - #start-container { width: 100vw; height: calc(100vh - 64px); diff --git a/src/app/modules/core/dialogs/connect-python/connect-python.dialog.html b/src/app/modules/core/dialogs/connect-python/connect-python.dialog.html index 01c0f888..10210002 100644 --- a/src/app/modules/core/dialogs/connect-python/connect-python.dialog.html +++ b/src/app/modules/core/dialogs/connect-python/connect-python.dialog.html @@ -26,8 +26,8 @@ - } @if (didUpload | async) {
diff --git a/src/app/modules/shared/components/button-bar/button-bar.component.scss b/src/app/modules/shared/components/button-bar/button-bar.component.scss index 247c2bcb..bf3eab27 100644 --- a/src/app/modules/shared/components/button-bar/button-bar.component.scss +++ b/src/app/modules/shared/components/button-bar/button-bar.component.scss @@ -1,4 +1,3 @@ - .sidenav-buttons { pointer-events: initial; display: flex; diff --git a/src/app/modules/shared/components/serial-output/serial-output.component.scss b/src/app/modules/shared/components/serial-output/serial-output.component.scss index 79cff18a..228a4829 100644 --- a/src/app/modules/shared/components/serial-output/serial-output.component.scss +++ b/src/app/modules/shared/components/serial-output/serial-output.component.scss @@ -23,7 +23,7 @@ height: calc(100% + 29px); margin: 0; overflow-y: scroll; - background-color: var(--start-screen-bg) + background-color: var(--start-screen-bg); } [mat-stroked-button], diff --git a/src/app/services/blockly/theme.ts b/src/app/services/blockly/theme.ts index a19c2937..35018b2d 100644 --- a/src/app/services/blockly/theme.ts +++ b/src/app/services/blockly/theme.ts @@ -1,34 +1,30 @@ - // check if user is using dark or light theme import * as Blockly from "blockly"; -import {ITheme, Theme} from "blockly/core/theme"; - - +import { ITheme, Theme } from "blockly/core/theme"; function getTheme(themeStr): Theme { - let theme: ITheme; if (themeStr === "dark") { console.log("Dark mode"); theme = { blockStyles: { - leaphy_blocks: {colourPrimary: "#06434f", hat: "cap"}, - loop_blocks: {colourPrimary: "#69530d"}, - math_blocks: {colourPrimary: "#45662a"}, - text_blocks: {colourPrimary: "#45662a"}, - logic_blocks: {colourPrimary: "#45662a"}, - variable_blocks: {colourPrimary: "#87451a"}, - list_blocks: {colourPrimary: "#3f144a"}, - procedure_blocks: {colourPrimary: "#10324a"}, + leaphy_blocks: { colourPrimary: "#06434f", hat: "cap" }, + loop_blocks: { colourPrimary: "#69530d" }, + math_blocks: { colourPrimary: "#45662a" }, + text_blocks: { colourPrimary: "#45662a" }, + logic_blocks: { colourPrimary: "#45662a" }, + variable_blocks: { colourPrimary: "#87451a" }, + list_blocks: { colourPrimary: "#3f144a" }, + procedure_blocks: { colourPrimary: "#10324a" }, }, categoryStyles: { - leaphy_category: {colour: "#06434f"}, - situation_category: {colour: "#69530d"}, - numbers_category: {colour: "#45662a"}, - variables_category: {colour: "#87451a"}, - lists_category: {colour: "#3f144a"}, - functions_category: {colour: "#10324a"}, + leaphy_category: { colour: "#06434f" }, + situation_category: { colour: "#69530d" }, + numbers_category: { colour: "#45662a" }, + variables_category: { colour: "#87451a" }, + lists_category: { colour: "#3f144a" }, + functions_category: { colour: "#10324a" }, }, componentStyles: { workspaceBackgroundColour: "#1e1e1e", @@ -40,28 +36,27 @@ function getTheme(themeStr): Theme { flyoutOpacity: 1, }, name: "dark", - } - + }; } else if (themeStr === "light") { theme = { blockStyles: { - leaphy_blocks: {colourPrimary: "#06778f", hat: "cap"}, - loop_blocks: {colourPrimary: "#D9B53F"}, - math_blocks: {colourPrimary: "#75B342"}, - text_blocks: {colourPrimary: "#75B342"}, - logic_blocks: {colourPrimary: "#75B342"}, - variable_blocks: {colourPrimary: "#DE7C3B"}, - list_blocks: {colourPrimary: "#a500cf"}, - procedure_blocks: {colourPrimary: "#4095CE"}, + leaphy_blocks: { colourPrimary: "#06778f", hat: "cap" }, + loop_blocks: { colourPrimary: "#D9B53F" }, + math_blocks: { colourPrimary: "#75B342" }, + text_blocks: { colourPrimary: "#75B342" }, + logic_blocks: { colourPrimary: "#75B342" }, + variable_blocks: { colourPrimary: "#DE7C3B" }, + list_blocks: { colourPrimary: "#a500cf" }, + procedure_blocks: { colourPrimary: "#4095CE" }, }, categoryStyles: { - leaphy_category: {colour: "#06778f"}, - situation_category: {colour: "#D9B53F"}, - numbers_category: {colour: "#75B342"}, - variables_category: {colour: "#DE7C3B"}, - lists_category: {colour: "#a500cf"}, - functions_category: {colour: "#4095CE"}, + leaphy_category: { colour: "#06778f" }, + situation_category: { colour: "#D9B53F" }, + numbers_category: { colour: "#75B342" }, + variables_category: { colour: "#DE7C3B" }, + lists_category: { colour: "#a500cf" }, + functions_category: { colour: "#4095CE" }, }, componentStyles: { workspaceBackgroundColour: "#E5E5E5", @@ -74,8 +69,7 @@ function getTheme(themeStr): Theme { flyoutOpacity: 1, }, name: "light", - } - + }; } return Blockly.Theme.defineTheme(themeStr, theme); diff --git a/src/app/state/blockly-editor.state.ts b/src/app/state/blockly-editor.state.ts index 66990193..5a4c8dbb 100644 --- a/src/app/state/blockly-editor.state.ts +++ b/src/app/state/blockly-editor.state.ts @@ -137,5 +137,4 @@ export class BlocklyEditorState { get blocklyConfig(): any { return this.blocklyConfigSubject$.getValue(); } - } diff --git a/src/main.ts b/src/main.ts index 2164dbcf..acf3fabf 100644 --- a/src/main.ts +++ b/src/main.ts @@ -12,7 +12,6 @@ if (environment.production) { enableProdMode(); } - platformBrowserDynamic() .bootstrapModule(AppModule) .catch((err) => console.error(err)); diff --git a/src/styles.scss b/src/styles.scss index af6b4618..ca6eda1d 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,4 +1,4 @@ -@use '@angular/material' as mat; +@use "@angular/material" as mat; /* You can add global styles to this file, and also import other style files */ @import url("./assets/fonts/inter/inter.css"); @@ -69,7 +69,6 @@ pre[class*="language-"]:after { // check on the root element if the theme is light or dark - :root { --leaphy-block-default: #06778f; --leaphy-block-yellow: #d9b53f; @@ -79,7 +78,7 @@ pre[class*="language-"]:after { --leaphy-block-yellow: #d9b53f; --leaphy-block-grey: #7d7d80; - body[data-theme='light'] { + body[data-theme="light"] { --leaphy-header-bg: #06778f; --leaphy-header-icon-color: #06778f; @@ -102,7 +101,7 @@ pre[class*="language-"]:after { --leaphy-blockly-bg: #ececec; } - body[data-theme='dark'] { + body[data-theme="dark"] { --leaphy-header-bg: #104d59; --leaphy-header-icon-color: #32a5a9; @@ -125,11 +124,8 @@ pre[class*="language-"]:after { --leaphy-blockly-bg: #353444; } - } .blocklySvg { background-color: var(--leaphy-blockly-bg) !important; } - - diff --git a/src/theme.scss b/src/theme.scss index 235f99bb..3604e188 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -3,18 +3,16 @@ :root { --dark-mode: 0; - } -body[data-theme='light'] { +body[data-theme="light"] { --dark-mode: 0; } -body[data-theme='dark'] { +body[data-theme="dark"] { --dark-mode: 1; } - $light-mode-palette: ( 50: transparent, 100: #b2dfdb, @@ -65,25 +63,22 @@ $light-mode: mat.define-light-theme( ); $dark-theme: mat.define-dark-theme( - ( - color: ( - primary: $leaphy-color-primary-dark, - accent: $leaphy-color-accent-light, - warn: $leaphy-color-warn-light, - ), - typography: mat.define-legacy-typography-config(), - ) + ( + color: ( + primary: $leaphy-color-primary-dark, + accent: $leaphy-color-accent-light, + warn: $leaphy-color-warn-light, + ), + typography: mat.define-legacy-typography-config(), + ) ); /* Light mode */ -body[data-theme='light'] { +body[data-theme="light"] { @include mat.all-component-themes($light-mode); } /* Dark mode */ -body[data-theme='dark'] { +body[data-theme="dark"] { @include mat.all-component-themes($dark-theme); } - - - From c44ac12db1b094fc4f5f779e17b57656f33af015 Mon Sep 17 00:00:00 2001 From: koen_1711 Date: Wed, 24 Apr 2024 15:14:58 +0200 Subject: [PATCH 09/29] chore: fix some mistakes --- .../components/leaphy-blockly/leaphy-blockly.component.scss | 2 +- .../components/robot-selection/robot-selection.component.scss | 1 + .../components/robot-selection/robot-selection.component.ts | 3 --- src/assets/i18n/nl.json | 4 ++-- 4 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/app/modules/blockly-editor/components/leaphy-blockly/leaphy-blockly.component.scss b/src/app/modules/blockly-editor/components/leaphy-blockly/leaphy-blockly.component.scss index b472857e..0b7318ed 100644 --- a/src/app/modules/blockly-editor/components/leaphy-blockly/leaphy-blockly.component.scss +++ b/src/app/modules/blockly-editor/components/leaphy-blockly/leaphy-blockly.component.scss @@ -16,5 +16,5 @@ max-height: 600px; top: 50%; translate: -50% -50%; - z-index: -1; + z-index: 0; } diff --git a/src/app/modules/components/robot-selection/robot-selection.component.scss b/src/app/modules/components/robot-selection/robot-selection.component.scss index f31c4ea1..70f0f9b5 100644 --- a/src/app/modules/components/robot-selection/robot-selection.component.scss +++ b/src/app/modules/components/robot-selection/robot-selection.component.scss @@ -43,6 +43,7 @@ top: 0; height: calc(100vh - 64px); width: 50vw; + background-color: var(--start-screen-bg); } .robot-row { diff --git a/src/app/modules/components/robot-selection/robot-selection.component.ts b/src/app/modules/components/robot-selection/robot-selection.component.ts index 2697b2e5..6f27ffc5 100644 --- a/src/app/modules/components/robot-selection/robot-selection.component.ts +++ b/src/app/modules/components/robot-selection/robot-selection.component.ts @@ -20,21 +20,18 @@ import { "center", style({ translate: "-50%", - background: "#ffffff00", }), ), state( "left", style({ translate: "-100%", - background: "#ffffff00", }), ), state( "right", style({ translate: "0", - background: "#fff", }), ), transition("center => left", [animate(".3s ease-out")]), diff --git a/src/assets/i18n/nl.json b/src/assets/i18n/nl.json index a65a4b36..3b76d83d 100644 --- a/src/assets/i18n/nl.json +++ b/src/assets/i18n/nl.json @@ -58,8 +58,8 @@ "EDIT_CODE": "Code bewerken", "LANGUAGE": "Taal", "THEME": "Thema", - "DARK": "Donker", - "LIGHT": "Licht", + "DARK_THEME": "Donker", + "LIGHT_THEME": "Licht", "CHOOSE_A_ROBOT": "KIES EEN ROBOT", "SELECT_ROBOT_START_PROJECT": "Selecteer je programmeeromgeving en start je nieuwe project", "VIEW_LOG": "Bekijk log", From b8f5897beaa67ad1ada5688712eb1b3f7bcfb24e Mon Sep 17 00:00:00 2001 From: koen_1711 Date: Wed, 24 Apr 2024 15:18:18 +0200 Subject: [PATCH 10/29] chore: fix select color --- src/app/modules/components/header/header.component.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/app/modules/components/header/header.component.scss b/src/app/modules/components/header/header.component.scss index 545a300b..cfe1857b 100644 --- a/src/app/modules/components/header/header.component.scss +++ b/src/app/modules/components/header/header.component.scss @@ -28,6 +28,11 @@ button { font-size: 12px; line-height: 36px; height: 40px; + color: var(--leaphy-text-color); + + .selected { + color: var(--leaphy-header-icon-color); + } mat-icon { color: var(--leaphy-header-icon-color); From f6c2199bb5353a1177f9823299f57624b2fc9714 Mon Sep 17 00:00:00 2001 From: koen_1711 Date: Wed, 24 Apr 2024 16:52:42 +0200 Subject: [PATCH 11/29] chore: fix all issues --- .../code-editor-cpp/code-editor-cpp.page.ts | 20 +++++++------------ .../debug-information.dialog.scss | 9 +++++---- .../examples/examples-dialog.component.scss | 7 ++++--- 3 files changed, 16 insertions(+), 20 deletions(-) diff --git a/src/app/modules/code-editor-cpp/code-editor-cpp.page.ts b/src/app/modules/code-editor-cpp/code-editor-cpp.page.ts index 3f63f83f..78f81882 100644 --- a/src/app/modules/code-editor-cpp/code-editor-cpp.page.ts +++ b/src/app/modules/code-editor-cpp/code-editor-cpp.page.ts @@ -6,6 +6,8 @@ import { CoreModule } from "../core/core.module"; import { WorkspaceService } from "../../services/workspace.service"; import { MonacoEditorModule } from "ngx-monaco-editor-v2"; import { AppState } from "../../state/app.state"; +import {editor} from "monaco-editor"; +import EditorOption = editor.EditorOption; @Component({ standalone: true, @@ -15,9 +17,10 @@ import { AppState } from "../../state/app.state"; imports: [CommonModule, SharedModule, CoreModule, MonacoEditorModule], }) export class CodeEditorCppPage implements AfterViewInit { - editorOptions: any = { + editorOptions = { language: "cpp", automaticLayout: true, + theme: "vs" }; constructor( @@ -28,23 +31,14 @@ export class CodeEditorCppPage implements AfterViewInit { // check if we are currently in dark mode const isDarkMode = appState.selectedTheme === "dark"; if (isDarkMode) { - this.editorOptions = { - ...this.editorOptions, - theme: "vs-dark", - }; + this.editorOptions.theme = "vs-dark" } appState.selectedTheme$.subscribe((theme) => { if (theme === "dark") { - this.editorOptions = { - ...this.editorOptions, - theme: "vs-dark", - }; + this.editorOptions.theme = "vs-dark" } else { - this.editorOptions = { - ...this.editorOptions, - theme: "vs", - }; + this.editorOptions.theme= "vs" } }); } diff --git a/src/app/modules/core/dialogs/debug-information/debug-information.dialog.scss b/src/app/modules/core/dialogs/debug-information/debug-information.dialog.scss index 3b84e5d0..7269f53c 100644 --- a/src/app/modules/core/dialogs/debug-information/debug-information.dialog.scss +++ b/src/app/modules/core/dialogs/debug-information/debug-information.dialog.scss @@ -30,14 +30,14 @@ height: 50vh; margin: 0; overflow-y: scroll; - background-color: lightgray; + background-color: var(--leaphy-background-color); } .device-information { width: 50vh; height: fit-content; margin: 0; - background-color: lightgray; + background-color: var(--leaphy-background-color); } #header:hover { @@ -46,7 +46,7 @@ #header { background-color: var(--leaphy-color-primary); - color: var(--leaphy-color-light); + color: var(--leaphy-text-color); display: flex; justify-content: space-between; align-items: center; @@ -56,7 +56,7 @@ #device-information { background-color: var(--leaphy-color-primary); - color: var(--leaphy-color-light); + color: var(--leaphy-text-color); display: flex; justify-content: space-between; align-items: center; @@ -65,4 +65,5 @@ } .device-specification { margin-left: 10px; + color: var(--leaphy-text-color); } diff --git a/src/app/modules/core/dialogs/examples/examples-dialog.component.scss b/src/app/modules/core/dialogs/examples/examples-dialog.component.scss index a7965567..6b64a034 100644 --- a/src/app/modules/core/dialogs/examples/examples-dialog.component.scss +++ b/src/app/modules/core/dialogs/examples/examples-dialog.component.scss @@ -14,7 +14,6 @@ input::placeholder { width: 100%; height: calc(100% - 64px); max-height: 60vh; - background: #f1f1f1; } #header:hover { @@ -54,9 +53,11 @@ input::placeholder { .example { aspect-ratio: 1/1; - border: 3px solid #fff; + border: 3px solid var(--leaphy-robot-tile-border); border-radius: 10px; - background: #fff; + background: var(--leaphy-robot-tile); + color: var(--leaphy-text-color); + transition: 0.3s ease; display: flex; From 8fa7d34d19eaaf83f61d3cf0d184b504ae477858 Mon Sep 17 00:00:00 2001 From: koen_1711 Date: Wed, 24 Apr 2024 23:23:33 +0200 Subject: [PATCH 12/29] chore: fix last issues --- .../code-view/code-view.component.ts | 4 +++- .../code-editor-cpp/code-editor-cpp.page.ts | 4 ++-- .../code-editor-python.page.ts | 18 +++++------------- 3 files changed, 10 insertions(+), 16 deletions(-) diff --git a/src/app/modules/blockly-editor/components/code-view/code-view.component.ts b/src/app/modules/blockly-editor/components/code-view/code-view.component.ts index 9cdc4890..3ba565d2 100644 --- a/src/app/modules/blockly-editor/components/code-view/code-view.component.ts +++ b/src/app/modules/blockly-editor/components/code-view/code-view.component.ts @@ -1,5 +1,7 @@ import { Component } from "@angular/core"; import { CodeEditorState } from "../../../../state/code-editor.state"; +import {editor} from "monaco-editor"; +import IStandaloneEditorConstructionOptions = editor.IStandaloneEditorConstructionOptions; @Component({ selector: "app-code-view", @@ -7,7 +9,7 @@ import { CodeEditorState } from "../../../../state/code-editor.state"; styleUrls: ["./code-view.component.scss"], }) export class CodeViewComponent { - editorOptions: any = { + editorOptions: IStandaloneEditorConstructionOptions = { language: "cpp", readOnly: true, automaticLayout: true, diff --git a/src/app/modules/code-editor-cpp/code-editor-cpp.page.ts b/src/app/modules/code-editor-cpp/code-editor-cpp.page.ts index 78f81882..68d542a9 100644 --- a/src/app/modules/code-editor-cpp/code-editor-cpp.page.ts +++ b/src/app/modules/code-editor-cpp/code-editor-cpp.page.ts @@ -7,7 +7,7 @@ import { WorkspaceService } from "../../services/workspace.service"; import { MonacoEditorModule } from "ngx-monaco-editor-v2"; import { AppState } from "../../state/app.state"; import {editor} from "monaco-editor"; -import EditorOption = editor.EditorOption; +import IStandaloneEditorConstructionOptions = editor.IStandaloneEditorConstructionOptions; @Component({ standalone: true, @@ -17,7 +17,7 @@ import EditorOption = editor.EditorOption; imports: [CommonModule, SharedModule, CoreModule, MonacoEditorModule], }) export class CodeEditorCppPage implements AfterViewInit { - editorOptions = { + editorOptions: IStandaloneEditorConstructionOptions = { language: "cpp", automaticLayout: true, theme: "vs" diff --git a/src/app/modules/code-editor-python/code-editor-python.page.ts b/src/app/modules/code-editor-python/code-editor-python.page.ts index 4176e723..ff28eef7 100644 --- a/src/app/modules/code-editor-python/code-editor-python.page.ts +++ b/src/app/modules/code-editor-python/code-editor-python.page.ts @@ -15,9 +15,10 @@ import { AppState } from "../../state/app.state"; imports: [CommonModule, SharedModule, CoreModule, MonacoEditorModule], }) export class CodeEditorPythonPage implements AfterViewInit { - editorOptions: any = { + editorOptions = { language: "python", automaticLayout: true, + theme: "vs" }; constructor( @@ -28,23 +29,14 @@ export class CodeEditorPythonPage implements AfterViewInit { // check if we are currently in dark mode const isDarkMode = appState.selectedTheme === "dark"; if (isDarkMode) { - this.editorOptions = { - ...this.editorOptions, - theme: "vs-dark", - }; + this.editorOptions.theme = "vs-dark" } appState.selectedTheme$.subscribe((theme) => { if (theme === "dark") { - this.editorOptions = { - ...this.editorOptions, - theme: "vs-dark", - }; + this.editorOptions.theme = "vs-dark" } else { - this.editorOptions = { - ...this.editorOptions, - theme: "vs", - }; + this.editorOptions.theme= "vs" } }); } From 6c487d8c3fe5f6d174eac39f913db27fca0f7a49 Mon Sep 17 00:00:00 2001 From: koen_1711 Date: Wed, 24 Apr 2024 23:40:22 +0200 Subject: [PATCH 13/29] chore: prettier --- .../components/code-view/code-view.component.ts | 2 +- .../modules/code-editor-cpp/code-editor-cpp.page.ts | 12 ++++++------ .../code-editor-python/code-editor-python.page.ts | 8 ++++---- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/app/modules/blockly-editor/components/code-view/code-view.component.ts b/src/app/modules/blockly-editor/components/code-view/code-view.component.ts index 3ba565d2..cb410876 100644 --- a/src/app/modules/blockly-editor/components/code-view/code-view.component.ts +++ b/src/app/modules/blockly-editor/components/code-view/code-view.component.ts @@ -1,6 +1,6 @@ import { Component } from "@angular/core"; import { CodeEditorState } from "../../../../state/code-editor.state"; -import {editor} from "monaco-editor"; +import { editor } from "monaco-editor"; import IStandaloneEditorConstructionOptions = editor.IStandaloneEditorConstructionOptions; @Component({ diff --git a/src/app/modules/code-editor-cpp/code-editor-cpp.page.ts b/src/app/modules/code-editor-cpp/code-editor-cpp.page.ts index 68d542a9..10d4459c 100644 --- a/src/app/modules/code-editor-cpp/code-editor-cpp.page.ts +++ b/src/app/modules/code-editor-cpp/code-editor-cpp.page.ts @@ -6,7 +6,7 @@ import { CoreModule } from "../core/core.module"; import { WorkspaceService } from "../../services/workspace.service"; import { MonacoEditorModule } from "ngx-monaco-editor-v2"; import { AppState } from "../../state/app.state"; -import {editor} from "monaco-editor"; +import { editor } from "monaco-editor"; import IStandaloneEditorConstructionOptions = editor.IStandaloneEditorConstructionOptions; @Component({ @@ -16,11 +16,11 @@ import IStandaloneEditorConstructionOptions = editor.IStandaloneEditorConstructi styleUrls: ["./code-editor-cpp.page.scss"], imports: [CommonModule, SharedModule, CoreModule, MonacoEditorModule], }) -export class CodeEditorCppPage implements AfterViewInit { +export class prCodeEditorCppPage implements AfterViewInit { editorOptions: IStandaloneEditorConstructionOptions = { language: "cpp", automaticLayout: true, - theme: "vs" + theme: "vs", }; constructor( @@ -31,14 +31,14 @@ export class CodeEditorCppPage implements AfterViewInit { // check if we are currently in dark mode const isDarkMode = appState.selectedTheme === "dark"; if (isDarkMode) { - this.editorOptions.theme = "vs-dark" + this.editorOptions.theme = "vs-dark"; } appState.selectedTheme$.subscribe((theme) => { if (theme === "dark") { - this.editorOptions.theme = "vs-dark" + this.editorOptions.theme = "vs-dark"; } else { - this.editorOptions.theme= "vs" + this.editorOptions.theme = "vs"; } }); } diff --git a/src/app/modules/code-editor-python/code-editor-python.page.ts b/src/app/modules/code-editor-python/code-editor-python.page.ts index ff28eef7..da9a2e28 100644 --- a/src/app/modules/code-editor-python/code-editor-python.page.ts +++ b/src/app/modules/code-editor-python/code-editor-python.page.ts @@ -18,7 +18,7 @@ export class CodeEditorPythonPage implements AfterViewInit { editorOptions = { language: "python", automaticLayout: true, - theme: "vs" + theme: "vs", }; constructor( @@ -29,14 +29,14 @@ export class CodeEditorPythonPage implements AfterViewInit { // check if we are currently in dark mode const isDarkMode = appState.selectedTheme === "dark"; if (isDarkMode) { - this.editorOptions.theme = "vs-dark" + this.editorOptions.theme = "vs-dark"; } appState.selectedTheme$.subscribe((theme) => { if (theme === "dark") { - this.editorOptions.theme = "vs-dark" + this.editorOptions.theme = "vs-dark"; } else { - this.editorOptions.theme= "vs" + this.editorOptions.theme = "vs"; } }); } From 8717f70dc8ac1edfa1fef82ad23cf749ca3f3652 Mon Sep 17 00:00:00 2001 From: Koen <98043234+koen1711@users.noreply.github.com> Date: Wed, 24 Apr 2024 23:49:06 +0200 Subject: [PATCH 14/29] fix: oops --- src/app/modules/code-editor-cpp/code-editor-cpp.page.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/modules/code-editor-cpp/code-editor-cpp.page.ts b/src/app/modules/code-editor-cpp/code-editor-cpp.page.ts index 10d4459c..db9071eb 100644 --- a/src/app/modules/code-editor-cpp/code-editor-cpp.page.ts +++ b/src/app/modules/code-editor-cpp/code-editor-cpp.page.ts @@ -16,7 +16,7 @@ import IStandaloneEditorConstructionOptions = editor.IStandaloneEditorConstructi styleUrls: ["./code-editor-cpp.page.scss"], imports: [CommonModule, SharedModule, CoreModule, MonacoEditorModule], }) -export class prCodeEditorCppPage implements AfterViewInit { +export class CodeEditorCppPage implements AfterViewInit { editorOptions: IStandaloneEditorConstructionOptions = { language: "cpp", automaticLayout: true, From e693b407f80bc26288de7484ee3d35ddff48b922 Mon Sep 17 00:00:00 2001 From: koen_1711 Date: Thu, 25 Apr 2024 09:37:05 +0200 Subject: [PATCH 15/29] chore: fix last issues... (again) --- .../blockly-editor/blockly-editor.page.scss | 2 +- .../code-view/code-view.component.ts | 18 +++++++------- .../leaphy-blockly.component.scss | 2 +- .../code-editor-cpp/code-editor-cpp.page.ts | 8 ------- .../code-editor-python.page.ts | 8 ------- .../components/header/header.component.html | 24 +++++++------------ .../components/header/header.component.scss | 3 ++- .../robot-selection.component.html | 4 +++- .../robot-selection.component.scss | 4 ++++ .../file-explorer/file-explorer.dialog.scss | 5 ++-- .../location-select.dialog.scss | 1 + src/app/services/blockly/theme.ts | 3 --- src/styles.scss | 11 +++++++-- 13 files changed, 39 insertions(+), 54 deletions(-) diff --git a/src/app/modules/blockly-editor/blockly-editor.page.scss b/src/app/modules/blockly-editor/blockly-editor.page.scss index 5170fa7f..4bbd6d4e 100644 --- a/src/app/modules/blockly-editor/blockly-editor.page.scss +++ b/src/app/modules/blockly-editor/blockly-editor.page.scss @@ -9,7 +9,7 @@ .sidenav-container { flex: 1 1 auto; - background: var(--leaphy-background-color); + background: transparent !important; } #sidenav { diff --git a/src/app/modules/blockly-editor/components/code-view/code-view.component.ts b/src/app/modules/blockly-editor/components/code-view/code-view.component.ts index cb410876..97022715 100644 --- a/src/app/modules/blockly-editor/components/code-view/code-view.component.ts +++ b/src/app/modules/blockly-editor/components/code-view/code-view.component.ts @@ -1,7 +1,8 @@ -import { Component } from "@angular/core"; +import {AfterViewInit, ChangeDetectorRef, Component, OnInit} from "@angular/core"; import { CodeEditorState } from "../../../../state/code-editor.state"; import { editor } from "monaco-editor"; import IStandaloneEditorConstructionOptions = editor.IStandaloneEditorConstructionOptions; +import {AppState} from "../../../../state/app.state"; @Component({ selector: "app-code-view", @@ -13,19 +14,16 @@ export class CodeViewComponent { language: "cpp", readOnly: true, automaticLayout: true, + theme: "vs" }; - constructor(public codeEditor: CodeEditorState) { + constructor(private cdr: ChangeDetectorRef, public codeEditor: CodeEditorState, private appState: AppState) { + + // check if we are currently in dark mode - const isDarkMode = - document - .getElementsByTagName("body")[0] - .getAttribute("data-theme") === "dark"; + const isDarkMode = this.appState.selectedTheme === "dark"; if (isDarkMode) { - this.editorOptions = { - ...this.editorOptions, - theme: "vs-dark", - }; + this.editorOptions.theme= "vs-dark"; } } } diff --git a/src/app/modules/blockly-editor/components/leaphy-blockly/leaphy-blockly.component.scss b/src/app/modules/blockly-editor/components/leaphy-blockly/leaphy-blockly.component.scss index 0b7318ed..b472857e 100644 --- a/src/app/modules/blockly-editor/components/leaphy-blockly/leaphy-blockly.component.scss +++ b/src/app/modules/blockly-editor/components/leaphy-blockly/leaphy-blockly.component.scss @@ -16,5 +16,5 @@ max-height: 600px; top: 50%; translate: -50% -50%; - z-index: 0; + z-index: -1; } diff --git a/src/app/modules/code-editor-cpp/code-editor-cpp.page.ts b/src/app/modules/code-editor-cpp/code-editor-cpp.page.ts index db9071eb..49a5e503 100644 --- a/src/app/modules/code-editor-cpp/code-editor-cpp.page.ts +++ b/src/app/modules/code-editor-cpp/code-editor-cpp.page.ts @@ -33,14 +33,6 @@ export class CodeEditorCppPage implements AfterViewInit { if (isDarkMode) { this.editorOptions.theme = "vs-dark"; } - - appState.selectedTheme$.subscribe((theme) => { - if (theme === "dark") { - this.editorOptions.theme = "vs-dark"; - } else { - this.editorOptions.theme = "vs"; - } - }); } ngAfterViewInit(): void { diff --git a/src/app/modules/code-editor-python/code-editor-python.page.ts b/src/app/modules/code-editor-python/code-editor-python.page.ts index da9a2e28..bd15653e 100644 --- a/src/app/modules/code-editor-python/code-editor-python.page.ts +++ b/src/app/modules/code-editor-python/code-editor-python.page.ts @@ -31,14 +31,6 @@ export class CodeEditorPythonPage implements AfterViewInit { if (isDarkMode) { this.editorOptions.theme = "vs-dark"; } - - appState.selectedTheme$.subscribe((theme) => { - if (theme === "dark") { - this.editorOptions.theme = "vs-dark"; - } else { - this.editorOptions.theme = "vs"; - } - }); } ngAfterViewInit(): void { diff --git a/src/app/modules/components/header/header.component.html b/src/app/modules/components/header/header.component.html index be8e9462..d83384ea 100644 --- a/src/app/modules/components/header/header.component.html +++ b/src/app/modules/components/header/header.component.html @@ -316,24 +316,16 @@ diff --git a/src/app/modules/components/header/header.component.scss b/src/app/modules/components/header/header.component.scss index cfe1857b..5ac52ea9 100644 --- a/src/app/modules/components/header/header.component.scss +++ b/src/app/modules/components/header/header.component.scss @@ -31,7 +31,8 @@ button { color: var(--leaphy-text-color); .selected { - color: var(--leaphy-header-icon-color); + color: var(--leaphy-header-icon-color) !important; + } mat-icon { diff --git a/src/app/modules/components/robot-selection/robot-selection.component.html b/src/app/modules/components/robot-selection/robot-selection.component.html index 3271fcce..f0e0f421 100644 --- a/src/app/modules/components/robot-selection/robot-selection.component.html +++ b/src/app/modules/components/robot-selection/robot-selection.component.html @@ -1,4 +1,6 @@ -
+ + +
@for (row of robots; track row) {
diff --git a/src/app/modules/components/robot-selection/robot-selection.component.scss b/src/app/modules/components/robot-selection/robot-selection.component.scss index 70f0f9b5..222a965e 100644 --- a/src/app/modules/components/robot-selection/robot-selection.component.scss +++ b/src/app/modules/components/robot-selection/robot-selection.component.scss @@ -46,6 +46,10 @@ background-color: var(--start-screen-bg); } +.right-select { + background-color: var(--leaphy-robot-right-bg); +} + .robot-row { margin-left: auto; margin-right: auto; diff --git a/src/app/modules/core/dialogs/file-explorer/file-explorer.dialog.scss b/src/app/modules/core/dialogs/file-explorer/file-explorer.dialog.scss index 45435f23..27da7a01 100644 --- a/src/app/modules/core/dialogs/file-explorer/file-explorer.dialog.scss +++ b/src/app/modules/core/dialogs/file-explorer/file-explorer.dialog.scss @@ -4,15 +4,15 @@ align-items: center; padding: 0 1rem; height: 3rem; - background-color: #f5f5f5; border-bottom: 1px solid #e0e0e0; } .current-path { + background-color: transparent; display: flex; align-items: center; font-size: 0.9rem; - color: #757575; + color: var(--leaphy-text-color); } .folder-content { @@ -21,7 +21,6 @@ flex-direction: column; height: 30vw; overflow-y: auto; - background-color: #f5f5f5; } .item { diff --git a/src/app/modules/core/dialogs/location-select/location-select.dialog.scss b/src/app/modules/core/dialogs/location-select/location-select.dialog.scss index 9edd85fa..6e79e468 100644 --- a/src/app/modules/core/dialogs/location-select/location-select.dialog.scss +++ b/src/app/modules/core/dialogs/location-select/location-select.dialog.scss @@ -34,6 +34,7 @@ width: 100%; align-content: center; flex: 1; + color: var(--leaphy-text-color); } } } diff --git a/src/app/services/blockly/theme.ts b/src/app/services/blockly/theme.ts index 35018b2d..21accf31 100644 --- a/src/app/services/blockly/theme.ts +++ b/src/app/services/blockly/theme.ts @@ -5,7 +5,6 @@ import { ITheme, Theme } from "blockly/core/theme"; function getTheme(themeStr): Theme { let theme: ITheme; if (themeStr === "dark") { - console.log("Dark mode"); theme = { blockStyles: { leaphy_blocks: { colourPrimary: "#06434f", hat: "cap" }, @@ -27,7 +26,6 @@ function getTheme(themeStr): Theme { functions_category: { colour: "#10324a" }, }, componentStyles: { - workspaceBackgroundColour: "#1e1e1e", toolboxBackgroundColour: "#343444", toolboxForegroundColour: "#fff", flyoutBackgroundColour: "#1e1e1e", @@ -59,7 +57,6 @@ function getTheme(themeStr): Theme { functions_category: { colour: "#4095CE" }, }, componentStyles: { - workspaceBackgroundColour: "#E5E5E5", toolboxBackgroundColour: "#343444", toolboxForegroundColour: "#fff", flyoutBackgroundColour: "#FFFFFF", diff --git a/src/styles.scss b/src/styles.scss index ca6eda1d..2f604d33 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -18,7 +18,7 @@ html { html, body { height: 100%; - //background-color: #f1f1f1; + } body { margin: 0; @@ -96,10 +96,11 @@ pre[class*="language-"]:after { --leaphy-robot-tile: #ffffff; --leaphy-robot-tile-border: #f1f1f1; --leaphy-robot-icon-filter: invert(0); + --leaphy-robot-right-bg: #d5d4d4; --leaphy-text-color: #000000; - --leaphy-blockly-bg: #ececec; + --leaphy-blockly-bg: #e1e1e1; } body[data-theme="dark"] { --leaphy-header-bg: #104d59; @@ -119,6 +120,7 @@ pre[class*="language-"]:after { --leaphy-robot-tile: #343444; --leaphy-robot-tile-border: #343444; --leaphy-robot-icon-filter: invert(20%); + --leaphy-robot-right-bg: #363645; --leaphy-text-color: lightgray; @@ -127,5 +129,10 @@ pre[class*="language-"]:after { } .blocklySvg { + z-index: 0; + background-color: transparent !important; +} + +body { background-color: var(--leaphy-blockly-bg) !important; } From 40a8731c9588a20f578896b8c29d5b4f76fc0925 Mon Sep 17 00:00:00 2001 From: koen_1711 Date: Thu, 25 Apr 2024 09:45:29 +0200 Subject: [PATCH 16/29] chore: prettier --- .../code-view/code-view.component.ts | 21 ++++++++++------ .../components/header/header.component.html | 24 +++++++++---------- .../components/header/header.component.scss | 1 - .../robot-selection.component.html | 3 +-- src/styles.scss | 1 - 5 files changed, 27 insertions(+), 23 deletions(-) diff --git a/src/app/modules/blockly-editor/components/code-view/code-view.component.ts b/src/app/modules/blockly-editor/components/code-view/code-view.component.ts index 97022715..489141e9 100644 --- a/src/app/modules/blockly-editor/components/code-view/code-view.component.ts +++ b/src/app/modules/blockly-editor/components/code-view/code-view.component.ts @@ -1,8 +1,13 @@ -import {AfterViewInit, ChangeDetectorRef, Component, OnInit} from "@angular/core"; +import { + AfterViewInit, + ChangeDetectorRef, + Component, + OnInit, +} from "@angular/core"; import { CodeEditorState } from "../../../../state/code-editor.state"; import { editor } from "monaco-editor"; import IStandaloneEditorConstructionOptions = editor.IStandaloneEditorConstructionOptions; -import {AppState} from "../../../../state/app.state"; +import { AppState } from "../../../../state/app.state"; @Component({ selector: "app-code-view", @@ -14,16 +19,18 @@ export class CodeViewComponent { language: "cpp", readOnly: true, automaticLayout: true, - theme: "vs" + theme: "vs", }; - constructor(private cdr: ChangeDetectorRef, public codeEditor: CodeEditorState, private appState: AppState) { - - + constructor( + private cdr: ChangeDetectorRef, + public codeEditor: CodeEditorState, + private appState: AppState, + ) { // check if we are currently in dark mode const isDarkMode = this.appState.selectedTheme === "dark"; if (isDarkMode) { - this.editorOptions.theme= "vs-dark"; + this.editorOptions.theme = "vs-dark"; } } } diff --git a/src/app/modules/components/header/header.component.html b/src/app/modules/components/header/header.component.html index d83384ea..05e66be4 100644 --- a/src/app/modules/components/header/header.component.html +++ b/src/app/modules/components/header/header.component.html @@ -314,18 +314,18 @@ - - diff --git a/src/app/modules/components/header/header.component.scss b/src/app/modules/components/header/header.component.scss index 5ac52ea9..4b9b686e 100644 --- a/src/app/modules/components/header/header.component.scss +++ b/src/app/modules/components/header/header.component.scss @@ -32,7 +32,6 @@ button { .selected { color: var(--leaphy-header-icon-color) !important; - } mat-icon { diff --git a/src/app/modules/components/robot-selection/robot-selection.component.html b/src/app/modules/components/robot-selection/robot-selection.component.html index f0e0f421..ea145be0 100644 --- a/src/app/modules/components/robot-selection/robot-selection.component.html +++ b/src/app/modules/components/robot-selection/robot-selection.component.html @@ -1,6 +1,5 @@ - -
+
@for (row of robots; track row) {
diff --git a/src/styles.scss b/src/styles.scss index 2f604d33..c199ff06 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -18,7 +18,6 @@ html { html, body { height: 100%; - } body { margin: 0; From 417cdb1a4803d0b0e30c67a5c39ecbecd4f926ca Mon Sep 17 00:00:00 2001 From: koen_1711 Date: Thu, 25 Apr 2024 09:52:33 +0200 Subject: [PATCH 17/29] fix: more contrast to file explorer names --- .../core/dialogs/file-explorer/file-explorer.dialog.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/modules/core/dialogs/file-explorer/file-explorer.dialog.scss b/src/app/modules/core/dialogs/file-explorer/file-explorer.dialog.scss index 27da7a01..d6d41583 100644 --- a/src/app/modules/core/dialogs/file-explorer/file-explorer.dialog.scss +++ b/src/app/modules/core/dialogs/file-explorer/file-explorer.dialog.scss @@ -29,7 +29,7 @@ .folder-content-header-name { font-size: 0.9rem; - color: #757575; + color: var(--leaphy-text-color); } .folder-content-header-name:hover { From f98175ca24c2fed7fa7d64966e66843bd4a0fc65 Mon Sep 17 00:00:00 2001 From: koen_1711 Date: Thu, 25 Apr 2024 09:56:36 +0200 Subject: [PATCH 18/29] chore: fix color of second selection screen --- src/styles.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles.scss b/src/styles.scss index c199ff06..31406e70 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -95,7 +95,7 @@ pre[class*="language-"]:after { --leaphy-robot-tile: #ffffff; --leaphy-robot-tile-border: #f1f1f1; --leaphy-robot-icon-filter: invert(0); - --leaphy-robot-right-bg: #d5d4d4; + --leaphy-robot-right-bg: white; --leaphy-text-color: #000000; From cb1150d9fc11dad4b0322c2be08db699f134ca0f Mon Sep 17 00:00:00 2001 From: koen_1711 Date: Thu, 25 Apr 2024 10:47:27 +0200 Subject: [PATCH 19/29] chore: last header border color --- src/app/modules/components/header/header.component.scss | 2 +- src/styles.scss | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/modules/components/header/header.component.scss b/src/app/modules/components/header/header.component.scss index 4b9b686e..934c9eef 100644 --- a/src/app/modules/components/header/header.component.scss +++ b/src/app/modules/components/header/header.component.scss @@ -43,7 +43,7 @@ button { [mat-stroked-button], [mat-flat-button] { background-color: transparent; - border-color: var(--leaphy-color-secundary); + border-color: var(--leaphy-header-button-border) !important; font-size: 12px; font-weight: normal; border-radius: 20px; diff --git a/src/styles.scss b/src/styles.scss index 31406e70..1399e72b 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -80,6 +80,7 @@ pre[class*="language-"]:after { body[data-theme="light"] { --leaphy-header-bg: #06778f; --leaphy-header-icon-color: #06778f; + --leaphy-header-button-border: #32a5a9; --leaphy-color-primary: #06778f; --leaphy-color-primary-dark-tint: #104d59; @@ -104,6 +105,7 @@ pre[class*="language-"]:after { body[data-theme="dark"] { --leaphy-header-bg: #104d59; --leaphy-header-icon-color: #32a5a9; + --leaphy-header-button-border: #343444; --leaphy-color-primary: #104d59; --leaphy-color-primary-dark-tint: #104d59; From 8f8a478ea4891e8c222e3f039ff54546c19df8cf Mon Sep 17 00:00:00 2001 From: koen_1711 Date: Thu, 25 Apr 2024 15:56:00 +0200 Subject: [PATCH 20/29] chore: last few styling issues --- .../file-explorer/file-explorer.dialog.html | 2 +- .../file-explorer/file-explorer.dialog.scss | 4 ++ src/app/services/blockly/theme.ts | 4 +- src/styles.scss | 41 ++++--------------- src/theme.scss | 24 ++++++++++- 5 files changed, 39 insertions(+), 36 deletions(-) diff --git a/src/app/modules/core/dialogs/file-explorer/file-explorer.dialog.html b/src/app/modules/core/dialogs/file-explorer/file-explorer.dialog.html index 89598a4d..a4b7783d 100644 --- a/src/app/modules/core/dialogs/file-explorer/file-explorer.dialog.html +++ b/src/app/modules/core/dialogs/file-explorer/file-explorer.dialog.html @@ -23,7 +23,7 @@ class="folder-content-header-name" (click)="openFile(items.name)" > - + {{ items.name }}
} diff --git a/src/app/modules/core/dialogs/file-explorer/file-explorer.dialog.scss b/src/app/modules/core/dialogs/file-explorer/file-explorer.dialog.scss index d6d41583..539a610a 100644 --- a/src/app/modules/core/dialogs/file-explorer/file-explorer.dialog.scss +++ b/src/app/modules/core/dialogs/file-explorer/file-explorer.dialog.scss @@ -27,6 +27,10 @@ margin-left: 10px; } +.file { + color: var(--leaphy-text-color) !important; +} + .folder-content-header-name { font-size: 0.9rem; color: var(--leaphy-text-color); diff --git a/src/app/services/blockly/theme.ts b/src/app/services/blockly/theme.ts index 21accf31..631cfd7b 100644 --- a/src/app/services/blockly/theme.ts +++ b/src/app/services/blockly/theme.ts @@ -14,7 +14,7 @@ function getTheme(themeStr): Theme { logic_blocks: { colourPrimary: "#45662a" }, variable_blocks: { colourPrimary: "#87451a" }, list_blocks: { colourPrimary: "#3f144a" }, - procedure_blocks: { colourPrimary: "#10324a" }, + procedure_blocks: { colourPrimary: "#06416c" }, }, categoryStyles: { @@ -23,7 +23,7 @@ function getTheme(themeStr): Theme { numbers_category: { colour: "#45662a" }, variables_category: { colour: "#87451a" }, lists_category: { colour: "#3f144a" }, - functions_category: { colour: "#10324a" }, + functions_category: { colour: "#06416c" }, }, componentStyles: { toolboxBackgroundColour: "#343444", diff --git a/src/styles.scss b/src/styles.scss index 1399e72b..4eb3967c 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -39,43 +39,15 @@ pre[class*="language-"]:after { display: none; } -.blocklyToolboxCategory { - margin: 3px 0; - .blocklyTreeRow { - box-sizing: content-box; - border-left: 6px solid var(--leaphy-block-default); - - &#l_situation { - border-color: var(--leaphy-block-yellow); - } - - &#l_numbers { - border-color: var(--leaphy-block-green); - } - - &#l_variables { - border-color: var(--leaphy-block-orange); - } - - &#l_functions { - border-color: var(--leaphy-block-blue); - } - } -} // global variables // check on the root element if the theme is light or dark :root { - --leaphy-block-default: #06778f; - --leaphy-block-yellow: #d9b53f; - --leaphy-block-green: #75b342; - --leaphy-block-orange: #de7c3b; - --leaphy-block-blue: #4095ce; - --leaphy-block-yellow: #d9b53f; - --leaphy-block-grey: #7d7d80; + --leaphy-color-light: #ffffff; + body[data-theme="light"] { --leaphy-header-bg: #06778f; @@ -86,7 +58,6 @@ pre[class*="language-"]:after { --leaphy-color-primary-dark-tint: #104d59; --leaphy-color-secundary: #32a5a9; --leaphy-color-dark: #343444; - --leaphy-color-light: #ffffff; --mat-menu-item-label-text-size: 12px !important; @@ -111,7 +82,6 @@ pre[class*="language-"]:after { --leaphy-color-primary-dark-tint: #104d59; --leaphy-color-secundary: #32a5a9; --leaphy-color-dark: #343444; - --leaphy-color-light: #ffffff; --mat-menu-item-label-text-size: 12px !important; @@ -124,16 +94,23 @@ pre[class*="language-"]:after { --leaphy-robot-right-bg: #363645; --leaphy-text-color: lightgray; + --mat-option-selected-state-label-text-color: #32a5a9; // OVERRIDE --leaphy-blockly-bg: #353444; + } } + .blocklySvg { z-index: 0; background-color: transparent !important; } +.blocklyHtmlInput { + background-color: white !important; +} + body { background-color: var(--leaphy-blockly-bg) !important; } diff --git a/src/theme.scss b/src/theme.scss index 3604e188..19b20828 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -1,4 +1,5 @@ @use "@angular/material" as mat; +@use "sass:map"; @include mat.core(); :root { @@ -40,7 +41,19 @@ $dark-mode-palette: ( 800: #00695c, 900: #004d40, A100: #10324a, - contrast: (), + contrast: ( + 50: transparent, + 100: #b2dfdb, + 200: #80cbc4, + 300: #4db6ac, + 400: #26a69a, + 500: #009688, + 600: #00897b, + 700: #00796b, + 800: #00695c, + 900: #004d40, + A100: #32a5a9, + ), ); $leaphy-color-accent-light: mat.define-palette($light-mode-palette, 50); @@ -50,6 +63,7 @@ $leaphy-color-warn-light: mat.define-palette($light-mode-palette, 900); $leaphy-color-accent-dark: mat.define-palette($dark-mode-palette, 50); $leaphy-color-primary-dark: mat.define-palette($dark-mode-palette, A100); $leaphy-color-warn-dark: mat.define-palette($dark-mode-palette, 900); +$leaphy-color-selected-dark: mat.define-palette($light-mode-palette, A100); $light-mode: mat.define-light-theme( ( @@ -62,6 +76,11 @@ $light-mode: mat.define-light-theme( ) ); +$dark-background: ( + card: #424242, + selected-button: #32a5a9, +); + $dark-theme: mat.define-dark-theme( ( color: ( @@ -73,6 +92,9 @@ $dark-theme: mat.define-dark-theme( ) ); +$color-map: map.get($dark-theme, 'color'); +$modified-color-map: map.merge($color-map, ('background': $dark-background)); +$dark-theme: map.merge($dark-theme, ('color': $modified-color-map)); /* Light mode */ body[data-theme="light"] { @include mat.all-component-themes($light-mode); From b0ec423bde5fd04937f22dfc8c108daded42b5cd Mon Sep 17 00:00:00 2001 From: koen_1711 Date: Thu, 25 Apr 2024 15:56:19 +0200 Subject: [PATCH 21/29] chore: prettier --- src/styles.scss | 5 ----- src/theme.scss | 16 +++++++++++++--- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/styles.scss b/src/styles.scss index 4eb3967c..913b5f42 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -39,8 +39,6 @@ pre[class*="language-"]:after { display: none; } - - // global variables // check on the root element if the theme is light or dark @@ -48,7 +46,6 @@ pre[class*="language-"]:after { :root { --leaphy-color-light: #ffffff; - body[data-theme="light"] { --leaphy-header-bg: #06778f; --leaphy-header-icon-color: #06778f; @@ -97,11 +94,9 @@ pre[class*="language-"]:after { --mat-option-selected-state-label-text-color: #32a5a9; // OVERRIDE --leaphy-blockly-bg: #353444; - } } - .blocklySvg { z-index: 0; background-color: transparent !important; diff --git a/src/theme.scss b/src/theme.scss index 19b20828..5581a17f 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -92,9 +92,19 @@ $dark-theme: mat.define-dark-theme( ) ); -$color-map: map.get($dark-theme, 'color'); -$modified-color-map: map.merge($color-map, ('background': $dark-background)); -$dark-theme: map.merge($dark-theme, ('color': $modified-color-map)); +$color-map: map.get($dark-theme, "color"); +$modified-color-map: map.merge( + $color-map, + ( + "background": $dark-background, + ) +); +$dark-theme: map.merge( + $dark-theme, + ( + "color": $modified-color-map, + ) +); /* Light mode */ body[data-theme="light"] { @include mat.all-component-themes($light-mode); From 8db66913da173a4ee1a45f0aaddffa3f1ba13a97 Mon Sep 17 00:00:00 2001 From: koen_1711 Date: Thu, 25 Apr 2024 16:28:42 +0200 Subject: [PATCH 22/29] fix: oops --- src/theme.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/theme.scss b/src/theme.scss index 5581a17f..dc9a4128 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -77,6 +77,7 @@ $light-mode: mat.define-light-theme( ); $dark-background: ( + modal: #424242, card: #424242, selected-button: #32a5a9, ); From e6dc7bbae137cba547f8f219bbdf05c1f4e00b7e Mon Sep 17 00:00:00 2001 From: koen_1711 Date: Thu, 25 Apr 2024 16:29:35 +0200 Subject: [PATCH 23/29] fix: modal -> dialog --- src/theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme.scss b/src/theme.scss index dc9a4128..3527a686 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -77,7 +77,7 @@ $light-mode: mat.define-light-theme( ); $dark-background: ( - modal: #424242, + dialog: #424242, card: #424242, selected-button: #32a5a9, ); From 076a021e09a67101a767706228ae9ea60d58667d Mon Sep 17 00:00:00 2001 From: koen_1711 Date: Thu, 25 Apr 2024 16:34:50 +0200 Subject: [PATCH 24/29] chore: remove change of color on file explorer --- .../modules/core/dialogs/file-explorer/file-explorer.dialog.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/modules/core/dialogs/file-explorer/file-explorer.dialog.scss b/src/app/modules/core/dialogs/file-explorer/file-explorer.dialog.scss index 539a610a..f6316ff0 100644 --- a/src/app/modules/core/dialogs/file-explorer/file-explorer.dialog.scss +++ b/src/app/modules/core/dialogs/file-explorer/file-explorer.dialog.scss @@ -38,5 +38,4 @@ .folder-content-header-name:hover { cursor: pointer; - color: #000000; } From 35a7317f3ba031d3e0b5fbe987efc51b11b99dce Mon Sep 17 00:00:00 2001 From: koen_1711 Date: Fri, 26 Apr 2024 08:16:05 +0200 Subject: [PATCH 25/29] fix: background overrides all props, also when none --- src/app/services/blockly/theme.ts | 4 ++-- src/theme.scss | 31 +++++++++++++++++++++++++++++++ 2 files changed, 33 insertions(+), 2 deletions(-) diff --git a/src/app/services/blockly/theme.ts b/src/app/services/blockly/theme.ts index 631cfd7b..510b1c82 100644 --- a/src/app/services/blockly/theme.ts +++ b/src/app/services/blockly/theme.ts @@ -7,7 +7,7 @@ function getTheme(themeStr): Theme { if (themeStr === "dark") { theme = { blockStyles: { - leaphy_blocks: { colourPrimary: "#06434f", hat: "cap" }, + leaphy_blocks: { colourPrimary: "#066c80", hat: "cap" }, loop_blocks: { colourPrimary: "#69530d" }, math_blocks: { colourPrimary: "#45662a" }, text_blocks: { colourPrimary: "#45662a" }, @@ -18,7 +18,7 @@ function getTheme(themeStr): Theme { }, categoryStyles: { - leaphy_category: { colour: "#06434f" }, + leaphy_category: { colour: "#066c80" }, situation_category: { colour: "#69530d" }, numbers_category: { colour: "#45662a" }, variables_category: { colour: "#87451a" }, diff --git a/src/theme.scss b/src/theme.scss index 3527a686..5b6a676f 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -76,10 +76,41 @@ $light-mode: mat.define-light-theme( ) ); +$grey-palette: ( + 50: #fafafa, + 100: #f5f5f5, + 200: #eeeeee, + 300: #e0e0e0, + 400: #bdbdbd, + 500: #9e9e9e, + 600: #757575, + 700: #616161, + 800: #424242, + 900: #212121, + A100: #ffffff, + A200: #eeeeee, + A400: #bdbdbd, + A700: #616161, +); + $dark-background: ( + status-bar: black, + app-bar: #212121, + background: #303030, + hover: rgba(white, 0.04), + card: #424242, + dialog: #424242, + disabled-button: rgba(white, 0.12), + raised-button: #424242, + focused-button: rgba(white, 0.12), dialog: #424242, card: #424242, selected-button: #32a5a9, + selected-disabled-button: #424242, + disabled-button-toggle: black, + unselected-chip: #616161, + disabled-list-option: rgba(white, 0.12), + tooltip: #616161, ); $dark-theme: mat.define-dark-theme( From 22a12a123e070ffbef773ebb45fc057626d731c8 Mon Sep 17 00:00:00 2001 From: koen_1711 Date: Fri, 26 Apr 2024 08:18:21 +0200 Subject: [PATCH 26/29] fix: duplicate keys --- src/theme.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/theme.scss b/src/theme.scss index 5b6a676f..4d625319 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -98,8 +98,6 @@ $dark-background: ( app-bar: #212121, background: #303030, hover: rgba(white, 0.04), - card: #424242, - dialog: #424242, disabled-button: rgba(white, 0.12), raised-button: #424242, focused-button: rgba(white, 0.12), From 6661b9a133a849e6c2e4816dde3b13f90e49bcfe Mon Sep 17 00:00:00 2001 From: koen_1711 Date: Fri, 26 Apr 2024 08:21:43 +0200 Subject: [PATCH 27/29] chore: fix last styling issue --- src/styles.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles.scss b/src/styles.scss index 913b5f42..05304fa1 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -85,7 +85,7 @@ pre[class*="language-"]:after { --start-screen-bg: #1e1e1e; --leaphy-background-color: #1e1e1e; - --leaphy-robot-tile: #343444; + --leaphy-robot-tile: #414145; --leaphy-robot-tile-border: #343444; --leaphy-robot-icon-filter: invert(20%); --leaphy-robot-right-bg: #363645; From 32bb3fdefd10fab95e7115066fcfe54bc80879a1 Mon Sep 17 00:00:00 2001 From: koen_1711 Date: Fri, 26 Apr 2024 08:22:05 +0200 Subject: [PATCH 28/29] chore: prettier --- src/theme.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/theme.scss b/src/theme.scss index 4d625319..0ea743d8 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -95,9 +95,9 @@ $grey-palette: ( $dark-background: ( status-bar: black, - app-bar: #212121, + app-bar: #212121, background: #303030, - hover: rgba(white, 0.04), + hover: rgba(white, 0.04), disabled-button: rgba(white, 0.12), raised-button: #424242, focused-button: rgba(white, 0.12), From 1c726276b08a0be1293dfc24b981827cd49bd462 Mon Sep 17 00:00:00 2001 From: Koen <98043234+koen1711@users.noreply.github.com> Date: Fri, 26 Apr 2024 10:29:14 +0200 Subject: [PATCH 29/29] fix: change text color of upload log --- .../dialogs/debug-information/debug-information.dialog.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/modules/core/dialogs/debug-information/debug-information.dialog.scss b/src/app/modules/core/dialogs/debug-information/debug-information.dialog.scss index 7269f53c..d9f967fe 100644 --- a/src/app/modules/core/dialogs/debug-information/debug-information.dialog.scss +++ b/src/app/modules/core/dialogs/debug-information/debug-information.dialog.scss @@ -21,7 +21,7 @@ max-width: 99%; flex: 1 0 auto; padding-left: 5px; - color: black; + color: var(--leaphy-text-color) !important; word-break: break-all; }