diff --git a/apps/cloud/src/app/@shared/story/story-card/story-card.component.html b/apps/cloud/src/app/@shared/story/story-card/story-card.component.html index 49528f25a..9ec751e5d 100644 --- a/apps/cloud/src/app/@shared/story/story-card/story-card.component.html +++ b/apps/cloud/src/app/@shared/story/story-card/story-card.component.html @@ -1,47 +1,45 @@ -
-
-
- -
+
+
+ +
-
-
- -
+
+
+ +
-

- {{ story.updatedBy | createdBy }} - - {{ 'PAC.SHARED.StoryCard.LastUpdated' | translate: {Default: 'Last updated'} }} {{ updatedAt }} - -

+

+ {{ story.updatedBy | createdBy }} + + {{ 'PAC.SHARED.StoryCard.LastUpdated' | translate: {Default: 'Last updated'} }} {{ updatedAt }} + +

-
-

- -

-
+
+

+ +

+
-
-
- - play_circle - - {{story.pv | number}} - - -
- - {{ 'PAC.SHARED.StoryCard.Open' | translate: {Default: 'Open'} }} - - +
+
+ + play_circle + + {{story.pv | number}} + +
+ + {{ 'PAC.SHARED.StoryCard.Open' | translate: {Default: 'Open'} }} + +
\ No newline at end of file diff --git a/apps/cloud/src/app/@shared/story/story-card/story-card.component.scss b/apps/cloud/src/app/@shared/story/story-card/story-card.component.scss new file mode 100644 index 000000000..f8ca3b564 --- /dev/null +++ b/apps/cloud/src/app/@shared/story/story-card/story-card.component.scss @@ -0,0 +1,14 @@ +@use '@angular/material/core/tokens/token-utils'; + +$global-prefix: ngm; +$prefix: (ngm, color); + +@include token-utils.use-tokens($prefix, (surface-container-high: null)) { + :host { + background-color: var(#{token-utils.get-token-variable(surface-container-high)}); + } +} + +:host { + @apply max-w-full rounded-lg shadow-lg overflow-hidden; +} \ No newline at end of file diff --git a/apps/cloud/src/app/@shared/story/story-card/story-card.component.ts b/apps/cloud/src/app/@shared/story/story-card/story-card.component.ts index 3f235d957..72c92eb85 100644 --- a/apps/cloud/src/app/@shared/story/story-card/story-card.component.ts +++ b/apps/cloud/src/app/@shared/story/story-card/story-card.component.ts @@ -3,7 +3,7 @@ import { ChangeDetectionStrategy, Component, inject, Input } from '@angular/core import { MatButtonModule } from '@angular/material/button' import { MatIconModule } from '@angular/material/icon' import { RouterModule } from '@angular/router' -import { HighlightDirective } from '@metad/components/core' +import { NgmHighlightDirective } from '@metad/ocap-angular/common' import { AppearanceDirective, ButtonGroupDirective, DensityDirective } from '@metad/ocap-angular/core' import { TranslateModule, TranslateService } from '@ngx-translate/core' import { formatRelative } from 'date-fns' @@ -16,14 +16,7 @@ import { CreatedByPipe } from '../../pipes' changeDetection: ChangeDetectionStrategy.OnPush, selector: 'pac-story-card', templateUrl: 'story-card.component.html', - styles: [ - ` - :host { - flex: 1; - max-width: 100%; - } - ` - ], + styleUrl: 'story-card.component.scss', imports: [ CommonModule, RouterModule, @@ -36,7 +29,7 @@ import { CreatedByPipe } from '../../pipes' CreatedByPipe, LazyImgDirective, - HighlightDirective + NgmHighlightDirective ] }) export class StoryCardComponent { diff --git a/apps/cloud/src/app/@shared/user/profile/profile.component.scss b/apps/cloud/src/app/@shared/user/profile/profile.component.scss index a1cdcaa82..a77698250 100644 --- a/apps/cloud/src/app/@shared/user/profile/profile.component.scss +++ b/apps/cloud/src/app/@shared/user/profile/profile.component.scss @@ -1,5 +1,15 @@ +@use '@angular/material/core/tokens/token-utils'; + +$global-prefix: ngm; +$prefix: (ngm, color); + +@include token-utils.use-tokens($prefix, (surface-container-high: null)) { + :host { + background-color: var(#{token-utils.get-token-variable(surface-container-high)}); + border-color: var(--mdc-outlined-card-outline-color); + } +} + :host { - background-color: var(--mdc-outlined-card-container-color); - border-color: var(--mdc-outlined-card-outline-color); @apply border rounded-lg; -} \ No newline at end of file +} diff --git a/apps/cloud/src/app/features/features.component.scss b/apps/cloud/src/app/features/features.component.scss index b25bc7818..85eac2f3f 100644 --- a/apps/cloud/src/app/features/features.component.scss +++ b/apps/cloud/src/app/features/features.component.scss @@ -2,6 +2,8 @@ flex: 1; height: 100%; max-width: 100%; + --mat-sidenav-container-divider-color: transparent; + --mat-sidenav-container-background-color: transparent; } .mat-drawer.mat-sidenav { diff --git a/apps/cloud/src/app/features/project/project.component.scss b/apps/cloud/src/app/features/project/project.component.scss index 926d675e3..00a556d9c 100644 --- a/apps/cloud/src/app/features/project/project.component.scss +++ b/apps/cloud/src/app/features/project/project.component.scss @@ -1,14 +1,50 @@ +@use '@angular/material/core/tokens/token-utils'; +@use '@angular/material/core/style/sass-utils'; + +// The prefix used to generate the fully qualified name for tokens in this file. +$global-prefix: ngm; +$prefix: (ngm, project); +$prefix-color: (#{$prefix}, color); + +@function get-unthemable-tokens() { + @return ( + primary-container-rounded: var(--#{$global-prefix}-primary-container-rounded) + ); +} + +@function get-color-tokens() { + @return ( + color-surface: var(--#{$global-prefix}-color-surface), + ); +} + +@function get-token-slots() { + @return sass-utils.deep-merge-all( + get-unthemable-tokens(), + get-color-tokens(), + ); +} + :host { --mat-sidenav-container-background-color: transparent; - --mat-sidenav-container-text-color: var(--ngm-text-primary-color); + --mat-sidenav-container-text-color: var(--#{$global-prefix}-text-primary-color); + --mat-sidenav-container-divider-color: transparent; + + @include token-utils.create-token-values($prefix, get-token-slots()); + flex: 1; max-width: 100%; } -.mat-drawer-content { - @apply flex overflow-visible; -} - .pac-project__anchor { @apply absolute z-10 border border-solid; +} + +@include token-utils.use-tokens($prefix, get-token-slots()) { + .mat-drawer-content { + background-color: var(#{token-utils.get-token-variable(color-surface)}); + border-top-left-radius: var(#{token-utils.get-token-variable(primary-container-rounded)}); + border-top-right-radius: var(#{token-utils.get-token-variable(primary-container-rounded)}); + @apply flex overflow-hidden; // for rounded corner overflow-visible; + } } \ No newline at end of file diff --git a/apps/cloud/src/styles/base.scss b/apps/cloud/src/styles/base.scss index c099673b6..afe0692c4 100644 --- a/apps/cloud/src/styles/base.scss +++ b/apps/cloud/src/styles/base.scss @@ -1,5 +1,6 @@ :root { --ngm-copilot-font-family: Söhne,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Helvetica Neue,Arial,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji; + --ngm-primary-container-rounded: theme('borderRadius.3xl'); } :root .default, :root .light { @@ -11,18 +12,22 @@ --ngm-color-surface: white; --ngm-color-surface-container: theme('colors.neutral.50'); --ngm-color-surface-container-low: theme('colors.neutral.100'); + --ngm-color-surface-container-high: theme('colors.neutral.100'); + --ngm-copilot-bg-color: var(--ngm-color-surface-container); } :root .dark { --ngm-app-background-color: #1e1f20; --ngm-color-main-container-background: #1e1f20; - --ngm-copilot-bg-color: #1e1f20; + // --ngm-copilot-bg-color: #1e1f20; --ngm-color-on-surface: #e3e3e3; --ngm-color-on-surface-variant: #444746; --ngm-divider-color-secondary: theme('colors.neutral.900'); --ngm-color-surface: #16181c; --ngm-color-surface-container: black; --ngm-color-surface-container-low: theme('colors.neutral.900'); + --ngm-color-surface-container-high: #24292f; + --ngm-copilot-bg-color: var(--ngm-color-surface-container); } .mat-drawer-container { diff --git a/libs/core-angular/src/lib/locales/index.ts b/libs/core-angular/src/lib/locales/index.ts index b85b44acf..3e1db5079 100644 --- a/libs/core-angular/src/lib/locales/index.ts +++ b/libs/core-angular/src/lib/locales/index.ts @@ -1,4 +1,5 @@ export { default as enUS } from './en-US' export { default as zhHans } from './zh-Hans' export { default as zhHant } from './zh-Hant' -export * from './utils' \ No newline at end of file +export * from './utils' +export * from './types' \ No newline at end of file diff --git a/libs/core-angular/src/lib/locales/types.ts b/libs/core-angular/src/lib/locales/types.ts new file mode 100644 index 000000000..7ada29e54 --- /dev/null +++ b/libs/core-angular/src/lib/locales/types.ts @@ -0,0 +1,6 @@ +export enum LanguagesEnum { + Chinese = 'zh-CN', + SimplifiedChinese = 'zh-Hans', + TraditionalChinese = 'zh-Hant', + English = 'en' +}