feat: project page dark theme

meta-d · Feb 18, 2024 · b491f36 · b491f36
1 parent be1644d
commit b491f36
Show file tree

Hide file tree

Showing 9 changed files with 124 additions and 59 deletions.
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
@@ -1,47 +1,45 @@
-<div class="flex-1 flex justify-center">
-    <div class="flex-1 flex flex-col rounded-lg bg-white shadow-lg dark:bg-bluegray-800 md:flex-row h-64 overflow-hidden">
-        <div class="flex h-28 md:h-auto md:w-48 overflow-hidden">
-            <img
-                class="w-full rounded-t-lg object-cover md:h-auto md:w-auto md:rounded-none md:rounded-l-lg"
-                [src]="thumbnail || '/assets/images/dashboard/template-02.jpg'"
-                [alt]="story?.name"
-                loading="lazy"/>
-        </div>
+<div class="flex-1 flex flex-col md:flex-row h-64">
+    <div class="flex h-28 md:h-auto md:w-48 overflow-hidden">
+        <img
+            class="w-full rounded-t-lg object-cover md:h-auto md:w-auto md:rounded-none md:rounded-l-lg"
+            [src]="thumbnail || '/assets/images/dashboard/template-02.jpg'"
+            [alt]="story?.name"
+            loading="lazy"/>
+    </div>
 
-        <div class="flex-1 flex flex-col justify-start p-4 overflow-hidden">
-            <h5 class="shrink-0 mb-2 text-lg font-medium text-neutral-800 dark:text-neutral-50 overflow-hidden whitespace-nowrap text-ellipsis">
-                <a [routerLink]="[storyLink ?? '/story', story.id]"
-                    [title]="story.name"
-                ><span [highlight]="highlight" [content]="story.name" [caseSensitive]="false" customClasses="bg-transparent font-semibold text-amber-500"></span></a>
-            </h5>
+    <div class="flex-1 flex flex-col justify-start p-4 overflow-hidden">
+        <h5 class="shrink-0 mb-2 text-lg font-medium text-neutral-800 dark:text-neutral-50 overflow-hidden whitespace-nowrap text-ellipsis">
+            <a [routerLink]="[storyLink ?? '/story', story.id]"
+                [title]="story.name"
+            ><span [ngmHighlight]="highlight" [content]="story.name" [caseSensitive]="false" customClasses="bg-transparent font-semibold text-amber-500"></span></a>
+        </h5>
 
-            <p class="text-sm text-neutral-500 dark:text-neutral-300 flex flex-col">
-                <span class="overflow-hidden text-ellipsis">{{ story.updatedBy | createdBy }}</span>
-                <span>
-                    {{ 'PAC.SHARED.StoryCard.LastUpdated' | translate: {Default: 'Last updated'} }} {{ updatedAt }}
-                </span>
-            </p>
+        <p class="text-sm text-neutral-500 dark:text-neutral-300 flex flex-col">
+            <span class="overflow-hidden text-ellipsis">{{ story.updatedBy | createdBy }}</span>
+            <span>
+                {{ 'PAC.SHARED.StoryCard.LastUpdated' | translate: {Default: 'Last updated'} }} {{ updatedAt }}
+            </span>
+        </p>
 
-            <div class="flex-1 overflow-y-auto">
-                <p class="mb-4 text-sm text-neutral-600 dark:text-neutral-200">
-                    <span [highlight]="highlight" [content]="story.description" [caseSensitive]="false" customClasses="bg-transparent font-semibold text-amber-500"></span>
-                </p>
-            </div>
+        <div class="flex-1 overflow-y-auto">
+            <p class="mb-4 text-sm text-neutral-600 dark:text-neutral-200">
+                <span [ngmHighlight]="highlight" [content]="story.description" [caseSensitive]="false" customClasses="bg-transparent font-semibold text-amber-500"></span>
+            </p>
+        </div>
 
-            <div class="flex justify-between items-center">
-                <div class="flex items-center gap-2 text-xs text-gray-500">
-                    <ng-container *ngIf="story.pv">
-                        <mat-icon fontSet="material-icons-outlined">play_circle</mat-icon>
-                        <span>
-                            {{story.pv | number}}
-                        </span>
-                    </ng-container>
-                </div>
-                <a [routerLink]="[storyLink ?? '/story', story.id]" class="self-end inline-flex items-center px-3 py-2 text-sm font-medium text-center rounded-lg ring-offset-2 hover:bg-bluegray-600 hover:text-white focus:ring focus:outline-none focus:ring-bluegray-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
-                    {{ 'PAC.SHARED.StoryCard.Open' | translate: {Default: 'Open'} }}
-                    <svg aria-hidden="true" class="w-4 h-4 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-                </a>
+        <div class="flex justify-between items-center">
+            <div class="flex items-center gap-2 text-xs text-gray-500">
+                <ng-container *ngIf="story.pv">
+                    <mat-icon fontSet="material-icons-outlined">play_circle</mat-icon>
+                    <span>
+                        {{story.pv | number}}
+                    </span>
+                </ng-container>
             </div>
+            <a [routerLink]="[storyLink ?? '/story', story.id]" class="self-end inline-flex items-center px-3 py-2 text-sm font-medium text-center rounded-lg ring-offset-2 hover:bg-bluegray-600 hover:text-white focus:ring focus:outline-none focus:ring-bluegray-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+                {{ 'PAC.SHARED.StoryCard.Open' | translate: {Default: 'Open'} }}
+                <svg aria-hidden="true" class="w-4 h-4 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+            </a>
         </div>
     </div>
 </div>
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
@@ -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;
+}
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
@@ -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
@@ -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;
-}
+}
diff --git 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
@@ -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;
+  }
 }
diff --git 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
@@ -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'
+export * from './utils'
+export * from './types'
diff --git a/libs/core-angular/src/lib/locales/types.ts 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'
+}