From 67be968047ccf52acf117a23cc8a02b3ea6ba92d Mon Sep 17 00:00:00 2001
From: Xiao Gui <xgui3783@gmail.com>
Date: Fri, 2 Dec 2022 13:55:09 +0100
Subject: [PATCH] update color palette
---
.../pureDumb/pureATPSelector.components.ts | 16 +++++++++++-----
.../pureDumb/pureATPSelector.stories.ts | 14 +++++++-------
.../ATPSelector/wrapper/wrapper.component.ts | 9 ++++++---
.../ATPSelector/wrapper/wrapper.template.html | 2 +-
.../smartChip/component/smartChip.component.ts | 11 ++++++-----
.../smartChip/component/smartChip.style.css | 2 +-
6 files changed, 32 insertions(+), 22 deletions(-)
diff --git a/src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.components.ts b/src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.components.ts
index 17615f1d4..13c9abbb1 100644
--- a/src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.components.ts
+++ b/src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.components.ts
@@ -2,10 +2,16 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Out
import { SapiAtlasModel, SapiParcellationModel, SapiSpaceModel } from "src/atlasComponents/sapi/type";
import { FilterGroupedParcellationPipe, GroupedParcellation } from "src/atlasComponents/sapiViews/core/parcellation";
-export const defaultColorPalette = [
- "#480202",
- "#6b1205",
- "#921d1d",
+export const darkThemePalette = [
+ "#141414",
+ "#242424",
+ "#333333",
+]
+
+export const lightThemePalette = [
+ "#ffffff",
+ "#fafafa",
+ "#f5f5f5",
]
export type ATP = {
@@ -37,7 +43,7 @@ const pipe = new FilterGroupedParcellationPipe()
export class PureATPSelector implements OnChanges{
@Input('sxplr-pure-atp-selector-color-palette')
- colorPalette: string[] = defaultColorPalette
+ colorPalette: string[] = darkThemePalette
@Input(`sxplr-pure-atp-selector-selected-atp`)
public selectedATP: ATP
diff --git a/src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.stories.ts b/src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.stories.ts
index 1113a1873..421b47409 100644
--- a/src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.stories.ts
+++ b/src/atlasComponents/sapiViews/core/rich/ATPSelector/pureDumb/pureATPSelector.stories.ts
@@ -7,7 +7,7 @@ import { atlasId, provideDarkTheme } from "src/atlasComponents/sapi/stories.base
import { SapiAtlasModel, SapiParcellationModel, SapiSpaceModel } from "src/atlasComponents/sapi/type";
import { UtilModule } from "src/util";
import { ATPSelectorModule } from "../module";
-import { defaultColorPalette } from "./pureATPSelector.components"
+import { darkThemePalette } from "./pureATPSelector.components"
import { loadAtlasEtcData, wrapperDecoratorFn } from "../story.base"
import { provideMockStore } from "@ngrx/store/testing";
@@ -39,9 +39,9 @@ import { provideMockStore } from "@ngrx/store/testing";
]
})
class AtlasLayerSelectorWrapper {
- atlasColor: string = defaultColorPalette[0]
- spaceColor: string = defaultColorPalette[1]
- parcellationColor: string = defaultColorPalette[2]
+ atlasColor: string = darkThemePalette[0]
+ spaceColor: string = darkThemePalette[1]
+ parcellationColor: string = darkThemePalette[2]
allAtlases: SapiAtlasModel[]
availableTemplates: SapiSpaceModel[]
selectedATP: {
@@ -122,9 +122,9 @@ const Template: Story<AtlasLayerSelectorWrapper> = (args: AtlasLayerSelectorWrap
export const Default = Template.bind({})
Default.args = {
- atlasColor: defaultColorPalette[0],
- spaceColor: defaultColorPalette[1],
- parcellationColor: defaultColorPalette[2],
+ atlasColor: darkThemePalette[0],
+ spaceColor: darkThemePalette[1],
+ parcellationColor: darkThemePalette[2],
}
Default.loaders = [
async () => {
diff --git a/src/atlasComponents/sapiViews/core/rich/ATPSelector/wrapper/wrapper.component.ts b/src/atlasComponents/sapiViews/core/rich/ATPSelector/wrapper/wrapper.component.ts
index 06cb6e4e2..e5a3ef9ee 100644
--- a/src/atlasComponents/sapiViews/core/rich/ATPSelector/wrapper/wrapper.component.ts
+++ b/src/atlasComponents/sapiViews/core/rich/ATPSelector/wrapper/wrapper.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnDestroy } from "@angular/core";
+import { Component, Inject, OnDestroy } from "@angular/core";
import { MatDialog } from "@angular/material/dialog";
import { Store } from "@ngrx/store";
import { Observable, of, Subject, Subscription } from "rxjs";
@@ -8,8 +8,9 @@ import { ParcellationSupportedInSpacePipe } from "src/atlasComponents/sapiViews/
import { atlasSelection } from "src/state";
import { fromRootStore } from "src/state/atlasSelection";
import { DialogFallbackCmp } from "src/ui/dialogInfo";
+import { DARKTHEME } from "src/util/injectionTokens";
import { ParcellationVisibilityService } from "../../../parcellation/parcellationVis.service";
-import { defaultColorPalette, ATP } from "../pureDumb/pureATPSelector.components"
+import { darkThemePalette, lightThemePalette, ATP } from "../pureDumb/pureATPSelector.components"
function isATPGuard(obj: any): obj is ATP {
if (!obj) return false
@@ -25,7 +26,8 @@ function isATPGuard(obj: any): obj is ATP {
})
export class WrapperATPSelector implements OnDestroy{
- defaultColorPalette = defaultColorPalette
+ darkThemePalette = darkThemePalette
+ lightThemePalette = lightThemePalette
#subscription: Subscription[] = []
#parcSupportedInSpacePipe = new ParcellationSupportedInSpacePipe(this.sapi)
@@ -63,6 +65,7 @@ export class WrapperATPSelector implements OnDestroy{
private store$: Store,
private sapi: SAPI,
private svc: ParcellationVisibilityService,
+ @Inject(DARKTHEME) public darktheme$: Observable<boolean>
){
this.#subscription.push(
this.selectLeaf$.pipe(
diff --git a/src/atlasComponents/sapiViews/core/rich/ATPSelector/wrapper/wrapper.template.html b/src/atlasComponents/sapiViews/core/rich/ATPSelector/wrapper/wrapper.template.html
index 52b49096e..bf9b3f0e7 100644
--- a/src/atlasComponents/sapiViews/core/rich/ATPSelector/wrapper/wrapper.template.html
+++ b/src/atlasComponents/sapiViews/core/rich/ATPSelector/wrapper/wrapper.template.html
@@ -1,5 +1,5 @@
<sxplr-pure-atp-selector
- [sxplr-pure-atp-selector-color-palette]="defaultColorPalette"
+ [sxplr-pure-atp-selector-color-palette]="(darktheme$ | async) ? darkThemePalette : lightThemePalette"
[sxplr-pure-atp-selector-selected-atp]="selectedATP$ | async"
[sxplr-pure-atp-selector-atlases]="allAtlases$ | async"
[sxplr-pure-atp-selector-templates]="availableTemplates$ | async"
diff --git a/src/components/smartChip/component/smartChip.component.ts b/src/components/smartChip/component/smartChip.component.ts
index 3e29b7b22..d933960ef 100644
--- a/src/components/smartChip/component/smartChip.component.ts
+++ b/src/components/smartChip/component/smartChip.component.ts
@@ -3,7 +3,7 @@ import { SmartChipContent } from "../smartChip.content.directive"
import { SmartChipMenu } from "../smartChip.menu.directive";
import { rgbToHsl, hexToRgb } from 'common/util'
-const cssColorIsDark = (input: string) => {
+const cssColorToHsl = (input: string) => {
if (/rgb/i.test(input)) {
const match = /\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(input)
if (!match) throw new Error(`rgb cannot be extracted ${input}`)
@@ -13,7 +13,7 @@ const cssColorIsDark = (input: string) => {
parseInt(match[3]),
]
const [_h, _s, l] = rgbToHsl(...rgb)
- return l < 0.4
+ return l
}
if (/hsl/i.test(input)) {
const match = /\((.*)\)/.exec(input)
@@ -21,13 +21,13 @@ const cssColorIsDark = (input: string) => {
const trimmedL = l.trim()
if (/%$/.test(trimmedL)) {
const match = /^([0-9]+)%/.exec(trimmedL)
- return (parseInt(match[1]) / 100) < 0.4
+ return parseInt(match[1]) / 100
}
}
if (/^#/i.test(input) && input.length === 7) {
const [r, g, b] = hexToRgb(input)
const [_h, _s, l] = rgbToHsl(r, g, b)
- return l < 0.6
+ return l
}
throw new Error(`Cannot parse css color: ${input}`)
}
@@ -73,7 +73,8 @@ export class SmartChip<T extends object> implements OnChanges{
ngOnChanges(simpleChanges: SimpleChanges) {
if (simpleChanges.color) {
- this.darkTheme = cssColorIsDark(this.color)
+ const brightness = cssColorToHsl(this.color)
+ this.darkTheme = brightness < 0.4
? 'darktheme'
: 'lighttheme'
}
diff --git a/src/components/smartChip/component/smartChip.style.css b/src/components/smartChip/component/smartChip.style.css
index f05cd3d5b..3b0e26623 100644
--- a/src/components/smartChip/component/smartChip.style.css
+++ b/src/components/smartChip/component/smartChip.style.css
@@ -7,9 +7,9 @@
.smart-chip
{
+ box-sizing: border-box;
height: 100%;
- display: inline-block;
padding: 0.5rem 1rem;
border-radius: 1rem;
--
GitLab