diff --git a/src/renderer/components/nav.component.ts b/src/renderer/components/nav.component.ts
index fd263e1a5b..6db8952b9f 100644
--- a/src/renderer/components/nav.component.ts
+++ b/src/renderer/components/nav.component.ts
@@ -25,7 +25,6 @@ import { EventEmitter } from "@angular/core";
})
export class NavComponent implements OnDestroy {
isExceptionsUnsaved: boolean = false;
- dummy: boolean = true;
private userConfigurations: {
saved: UserConfiguration;
current: UserConfiguration;
@@ -106,7 +105,6 @@ export class NavComponent implements OnDestroy {
this.subscriptions.add(
this.exceptionsService.isUnsavedObservable.subscribe((val: boolean) => {
this.isExceptionsUnsaved = val;
- this.refreshActiveRoute();
this.changeRef.detectChanges();
}),
);
@@ -115,10 +113,6 @@ export class NavComponent implements OnDestroy {
});
}
- private refreshActiveRoute() {
- this.dummy = !this.dummy;
- }
-
getParserControls() {
return (this.navForm.get("parserStatuses") as FormArray).controls;
}
diff --git a/src/renderer/components/settings.component.ts b/src/renderer/components/settings.component.ts
index 917205dace..0cc571b0bd 100644
--- a/src/renderer/components/settings.component.ts
+++ b/src/renderer/components/settings.component.ts
@@ -216,6 +216,13 @@ export class SettingsComponent implements OnDestroy {
loadLanguage() {
this.languageService.loadLanguage(this.settings.language);
}
+ changeTheme(newTheme: string) {
+ if(this.settings.theme!==newTheme){
+ this.settings.theme = newTheme;
+ this.loadTheme();
+ this.onSettingsChange();
+ }
+ }
loadTheme() {
document.querySelector("html").className = "";
diff --git a/src/renderer/styles/nav-link.component.scss b/src/renderer/styles/nav-link.component.scss
index c155d5b140..c352936a21 100644
--- a/src/renderer/styles/nav-link.component.scss
+++ b/src/renderer/styles/nav-link.component.scss
@@ -24,4 +24,11 @@ nav-link {
display: flex;
}
}
+ &.unsaved {
+ img {
+ // calculated using https://isotropic.co/tool/hex-color-to-css-filter/
+ // target was #fbfd81
+ filter: sepia(20%) saturate(7471%) hue-rotate(315deg) brightness(124%) contrast(98%);
+ }
+ }
}
diff --git a/src/renderer/styles/theme.component.scss b/src/renderer/styles/theme.component.scss
deleted file mode 100644
index 874262588d..0000000000
--- a/src/renderer/styles/theme.component.scss
+++ /dev/null
@@ -1,236 +0,0 @@
-@import "mixins";
-
-:host {
- visibility: hidden;
- position: absolute;
- bottom: 0;
- left: 0;
-
- > div {
- visibility: visible;
- position: relative;
-
- display: flex;
-
- height: 275px;
- padding: 0.5em;
-
- cursor: move;
-
- background: var(--color-theme-background);
-
- .menu {
- display: flex;
- flex-direction: column;
-
- max-width: 10em;
- padding: 0 0.25em;
-
- cursor: default;
-
- background: var(--color-theme-menu-background);
-
- flex-shrink: 0;
-
- .themeContainer {
- overflow-x: hidden;
- overflow-y: auto;
- flex: 1;
-
- box-sizing: border-box;
- margin: 0 0.25em 0.25em 0.25em;
-
- background: var(--color-theme-themes-background);
-
- @include webkitScrollbar(theme-themes-scrollbar, 0.4em);
- &.empty {
- position: relative;
- &::before {
- position: absolute;
- top: 50%;
- right: 0;
- left: 0;
-
- display: inline-block;
-
- content: "No user themes";
- transform: translateY(-50%);
- text-align: center;
-
- color: var(--color-theme-text);
- }
- }
- * {
- cursor: pointer;
- }
-
- div {
- overflow: hidden;
-
- white-space: nowrap;
- text-overflow: ellipsis;
-
- color: var(--color-theme-text);
- }
- }
-
- .inputContainer {
- box-sizing: border-box;
- width: 100%;
- padding: 0.25em;
-
- input {
- font-family: "Roboto";
- font-size: 1em;
-
- box-sizing: border-box;
- width: 100%;
- margin: 0;
- padding: 0.2em 0.1em;
-
- cursor: text;
-
- @include ngTextInputColor(input);
- }
- }
-
- .buttonContainer {
- display: flex;
-
- flex-wrap: wrap;
-
- .clickButton {
- font-family: "Roboto";
-
- display: inline-block;
-
- margin: 0.15em 0.25em;
- padding: 0.2em 0.5em;
-
- cursor: pointer;
- user-select: none;
- text-align: center;
-
- border: 1px solid;
-
- flex-grow: 1;
-
- @include clickButtonColor(click-button);
- }
- }
- }
-
- .ruleContainer {
- font-family: "Hack";
- font-size: 0.75em;
-
- overflow: auto;
-
- color: var(--color-theme-text);
- background: var(--color-theme-rules-background);
-
- @include webkitScrollbar(theme-items-scrollbar, 0.5em);
-
- * {
- cursor: pointer;
- }
-
- > div {
- white-space: nowrap;
-
- color: var(--color-theme-text);
-
- span {
- display: inline-block;
-
- vertical-align: middle;
- }
-
- &:hover {
- color: var(--color-theme-rules-item-text-hover);
- background-color: var(--color-theme-rules-item-background-hover);
- }
-
- &.active {
- color: var(--color-theme-rules-item-text-active);
- background-color: var(--color-theme-rules-item-background-active);
- }
-
- .colorText {
- white-space: nowrap;
- }
-
- .colorSquare {
- width: 0.75em;
- height: 0.75em;
- margin: 0 0.5em;
-
- border: 1px solid var(--color-theme-rules-item-square);
- }
- }
- }
-
- .colorPickerContainer {
- position: relative;
-
- width: 232px;
- height: 275px;
-
- flex-shrink: 0;
-
- .colorPicker {
- position: absolute;
-
- * {
- cursor: initial;
- user-select: initial;
- }
- }
- }
-
- &.loading {
- &:before {
- position: absolute;
- z-index: 10000;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
-
- display: block;
-
- content: "";
-
- background-color: var(--color-theme-loading-background);
- }
- &:after {
- position: absolute;
- z-index: 10001;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
-
- display: block;
-
- width: 150px;
- height: 150px;
- margin: auto;
-
- content: "";
- animation: spinner 0.6s linear infinite;
-
- border-top: 0.325em solid transparent;
- border-top-color: var(--color-theme-loading-spinner);
- border-right: 0.325em solid transparent;
- border-radius: 50%;
- }
- }
-
- @keyframes spinner {
- to {
- transform: rotate(360deg);
- }
- }
- }
-}
diff --git a/src/renderer/styles/themes.global.scss b/src/renderer/styles/themes.global.scss
index 9ad0a1c6ab..d0a81c66d3 100644
--- a/src/renderer/styles/themes.global.scss
+++ b/src/renderer/styles/themes.global.scss
@@ -1275,7 +1275,7 @@
--font-markdown-h6: 0.85em;
--margin-markdown-hx: 3rem 0 1rem 0;
--color-nav-border: rgba(0, 0, 0, 0);
- --color-nav-border-drag: #249a3b;
+ --color-nav-border-drag: black;
--color-nav-background: #32353d; //
--display-nav-border: none;
--height-nav-area: 260px;
@@ -1436,15 +1436,15 @@
--color-nav-link-text: #cccfd4;
--color-nav-link-text-active: #f0fff0;
--color-nav-link-text-hover: #f0fff0;
- --color-nav-link-enabled: #258045;
- --color-nav-link-enabled-active: #22c65d;
- --color-nav-link-enabled-hover: #22c65d;
- --color-nav-link-disabled: #991d47;
- --color-nav-link-disabled-active: #c22359;
- --color-nav-link-disabled-hover: #c22359;
- --color-nav-link-unsaved: #b8ba00;
- --color-nav-link-unsaved-active: #b8ba00;
- --color-nav-link-unsaved-hover: #d9dc00;
+ --color-nav-link-enabled: var(--color--filled);
+ --color-nav-link-enabled-active: var(--color--filled);
+ --color-nav-link-enabled-hover: var(--color--filled);
+ --color-nav-link-disabled: var(--color--missing);
+ --color-nav-link-disabled-active: var(--color--missing);
+ --color-nav-link-disabled-hover:var(--color--missing);
+ --color-nav-link-unsaved: var(--color-nested-form-error-border);
+ --color-nav-link-unsaved-active: var(--color-nested-form-error-border);
+ --color-nav-link-unsaved-hover: var(--color-nested-form-error-border);
--color-nav-link-background-active: #4f596b;
--color-nav-link-bg-hover: transparent;
--padding-nav-link: 16px;
@@ -1675,7 +1675,7 @@
--font-markdown-h6: 0.85em;
--margin-markdown-hx: 3rem 0 1rem 0;
--color-nav-border: rgba(0, 0, 0, 0);
- --color-nav-border-drag: #249a3b;
+ --color-nav-border-drag: var(--color--filled);
--color-nav-background: #32353d;
--display-nav-border: inherit;
--height-nav-area: 260px;
diff --git a/src/renderer/templates/nav.component.html b/src/renderer/templates/nav.component.html
index 269e7d0b4f..94f563f984 100644
--- a/src/renderer/templates/nav.component.html
+++ b/src/renderer/templates/nav.component.html
@@ -47,17 +47,11 @@
[routerLinkActiveOptions]="{ exact: true }"
(click)="navClick.emit()"
>
-
-
- 
{{
- lang.userExceptions
- }}
-
-
- 
{{
- lang.userExceptions
- }}
-
+
+ {{
+ lang.userExceptions
+ }}
+
diff --git a/src/renderer/templates/settings.component.html b/src/renderer/templates/settings.component.html
index c57f236552..3e5c342238 100644
--- a/src/renderer/templates/settings.component.html
+++ b/src/renderer/templates/settings.component.html
@@ -55,9 +55,7 @@
style="font-size: 0.85em"
class="ngSelect"
[ngModel]="settings.theme"
- (ngModelChange)="
- settings.theme = $event; loadTheme(); onSettingsChange()
- "
+ (ngModelChange)="changeTheme($event);"
[values]="themes"
>
@@ -178,8 +176,6 @@
"
>{{ lang.text.fuzzy_verbose }}
-
-
+
+