feat: css styles

meta-d · Feb 18, 2024 · cdc2b72 · cdc2b72
1 parent 106bc3a
commit cdc2b72
Show file tree

Hide file tree

Showing 19 changed files with 106 additions and 112 deletions.
diff --git a/apps/cloud/src/app/@shared/user/profile-inline/profile.component.html b/apps/cloud/src/app/@shared/user/profile-inline/profile.component.html
@@ -7,6 +7,6 @@
     <span class="absolute right-0 bottom-0 h-2 w-2 rounded-full bg-green-400 ring ring-white"></span>
 </div>
 <div class="text-sm overflow-hidden text-ellipsis">
-    <div class="font-medium text-gray-700 overflow-hidden text-ellipsis">{{user?.firstName}} {{user?.lastName}}</div>
-    <div class="text-gray-400 overflow-hidden text-ellipsis">{{ user?.email }}</div>
+    <div class="font-medium overflow-hidden text-ellipsis">{{user?.firstName}} {{user?.lastName}}</div>
+    <div class="overflow-hidden text-ellipsis opacity-80">{{ user?.email }}</div>
 </div>
diff --git a/apps/cloud/src/app/@shared/user/profile-inline/profile.component.ts b/apps/cloud/src/app/@shared/user/profile-inline/profile.component.ts
@@ -1,17 +1,17 @@
 import { CommonModule } from '@angular/common'
 import { Component, Input } from '@angular/core'
 import { IUser } from '../../../@core'
-import { UserPipe } from "../../pipes"
+import { UserPipe } from '../../pipes'
 
 @Component({
-    standalone: true,
-    selector: 'pac-user-profile-inline',
-    templateUrl: 'profile.component.html',
-    styleUrls: ['profile.component.scss'],
-    imports: [CommonModule, UserPipe],
-    host: {
-      class: 'pac-user-profile-inline'
-    }
+  standalone: true,
+  selector: 'pac-user-profile-inline',
+  templateUrl: 'profile.component.html',
+  styleUrls: ['profile.component.scss'],
+  imports: [CommonModule, UserPipe],
+  host: {
+    class: 'pac-user-profile-inline'
+  }
 })
 export class UserProfileInlineComponent {
   @Input() user?: IUser

diff --git a/apps/cloud/src/app/_app.component.scss b/apps/cloud/src/app/_app.component.scss
@@ -64,3 +64,10 @@
 .cdk-overlay-container .mat-mdc-dialog-container.mdc-dialog .mdc-dialog__content.pac-dialog-content {
   @apply p-0;
 }
+
+.ngm-table {
+  border-color: var(--mat-divider-color);
+}
+.pac-table-container {
+  border-color: var(--mat-divider-color);
+}
diff --git a/apps/cloud/src/app/features/project/indicators/all/all.component.scss b/apps/cloud/src/app/features/project/indicators/all/all.component.scss
@@ -1,7 +1,3 @@
 :host {
   @apply w-full overflow-hidden flex-1 max-w-full flex flex-col p-4;
 }
-
-.ngm-table {
-  border-color: var(--mat-divider-color);
-}
diff --git a/apps/cloud/src/app/features/project/indicators/approvals/approvals.component.scss b/apps/cloud/src/app/features/project/indicators/approvals/approvals.component.scss
@@ -1,7 +1,3 @@
 :host {
   @apply flex-1 w-full max-w-full overflow-hidden flex flex-col p-4;
 }
-
-.ngm-table {
-  border-color: var(--mat-divider-color);
-}
diff --git a/apps/cloud/src/app/features/project/members/members.component.ts b/apps/cloud/src/app/features/project/members/members.component.ts
@@ -43,18 +43,15 @@ import { NgmTableComponent } from '@metad/ocap-angular/common'
   selector: 'pac-project-members',
   templateUrl: 'members.component.html',
   styles: [
-    `
+`
 :host {
   width: 100%;
   overflow: auto;
 }
 .rounded-full.mat-stroked-button {
   border-radius: 50%;
 }
-.ngm-table {
-  border-color: var(--mat-divider-color);
-}
-    `
+`
   ]
 })
 export class ProjectMembersComponent extends TranslationBaseComponent {

diff --git a/apps/cloud/src/app/features/semantic-model/model/_model.component.scss b/apps/cloud/src/app/features/semantic-model/model/_model.component.scss
@@ -26,10 +26,6 @@ $prefix: (ngm, model);
   }
 }
 
-.ngm-table {
-  @apply border-gray-200 dark:border-gray-700;
-}
-
 // Toolbar styles
 .mat-toolbar.pac-sub-toolbar {
   min-height: 33px;

diff --git a/...oud/src/app/features/semantic-model/model/access-control/overview/overview.component.html b/...oud/src/app/features/semantic-model/model/access-control/overview/overview.component.html
@@ -2,7 +2,7 @@ <h2 class="text-xl"> {{ 'PAC.MODEL.AccessControl.Overview' | translate: {Default
 
 <div class="flex-1 h-1/2 flex flex-col">
   <h3 class="text-lg"> {{ 'PAC.MODEL.AccessControl.RolesManage' | translate: {Default: 'Roles Manage'} }} </h3>
-  <div class="flex-1 mt-4 overflow-auto rounded-lg border border-gray-200">
+  <div class="flex-1 mt-4 overflow-auto rounded-lg border border-gray-200 dark:border-neutral-700">
     <table mat-table [dataSource]="roles$ | async" class="ngm-density__compact w-full">
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef> {{ 'PAC.KEY_WORDS.Roles' | translate: {Default: 'Roles'} }} </th>
@@ -59,7 +59,7 @@ <h3 class="text-lg"> {{ 'PAC.MODEL.AccessControl.UsersManage' | translate: {Defa
 
   </div>
 
-  <div *ngIf="userRoles$ | async as userRoles" class="flex-1 mt-4 overflow-auto rounded-lg border border-gray-200">
+  <div *ngIf="userRoles$ | async as userRoles" class="flex-1 mt-4 overflow-auto rounded-lg border border-gray-200 dark:border-neutral-700">
     <table mat-table [dataSource]="userRoles.users" class="ngm-density__compact w-full">
 
       <!-- Name Column -->

diff --git a/.../cloud/src/app/features/semantic-model/model/access-control/role/cube/cube.component.html b/.../cloud/src/app/features/semantic-model/model/access-control/role/cube/cube.component.html
@@ -1,11 +1,11 @@
 <div class="flex flex-col px-4 py-2">
     <div class="text-lg">
-        <label class="text-xl text-bluegray-800">{{ 'PAC.KEY_WORDS.Cube' | translate: {Default: 'Cube'} }}</label>
+        <label class="text-xl">{{ 'PAC.KEY_WORDS.Cube' | translate: {Default: 'Cube'} }}</label>
     </div>
     <div class="flex justify-between">
-        <div><span>{{entityType?.caption}}</span>(<span>{{ cubeGrant.cube }}</span>)</div>
+        <div class="opacity-80"><span>{{entityType?.caption}}</span>(<span>{{ cubeGrant.cube }}</span>)</div>
         <div class="flex justify-end items-center text-sm">
-            <label class="text-sm text-bluegray-800">
+            <label class="text-sm">
                 {{ 'PAC.MODEL.AccessControl.DefaultAccess' | translate: {Default: 'Default Access'} }}:
             </label>
             <mat-radio-group class="ngm-radio-group__horizontal text-sm text-bluegray-800" displayDensity="compact"
@@ -141,7 +141,7 @@
         </mat-expansion-panel>
     </mat-accordion>
 
-    <div class="pac-cdk-drop__list pac-cdk-drop__area h-52 min-h-[120px] w-full mt-4 border-2 border-gray-300 border-dashed rounded-lg bg-gray-50"
+    <div class="pac-cdk-drop__list pac-cdk-drop__area h-52 min-h-[120px] w-full mt-4 border-2 border-dashed rounded-lg"
         cdkDropList
         [cdkDropListEnterPredicate]="dropHierarchyPredicate"
         (cdkDropListDropped)="dropHierarchy($event)">
@@ -152,7 +152,7 @@
                 <rect x="48" y="25" width="4" height="50" fill="white"/>
             </svg>
 
-            <p class="mb-2 text-sm text-gray-500 dark:text-gray-400">{{ 'PAC.MODEL.AccessControl.DragandDropAddDimension' | translate: {Default: 'Drag and drop to add dimension'} }}</p>
+            <p class="mb-2 text-sm">{{ 'PAC.MODEL.AccessControl.DragandDropAddDimension' | translate: {Default: 'Drag and drop to add dimension'} }}</p>
         </div>
     </div>
 </div>
diff --git a/.../cloud/src/app/features/semantic-model/model/access-control/role/cube/cube.component.scss b/.../cloud/src/app/features/semantic-model/model/access-control/role/cube/cube.component.scss
@@ -38,3 +38,9 @@ label {
   flex-direction: column;
   overflow-y: auto;
 }
+
+.pac-cdk-drop__list.pac-cdk-drop__area {
+  background-color: var(--mdc-outlined-card-container-color);
+  border-color: var(--mat-divider-color);
+  color: var(--ngm-text-primary-color);
+}
diff --git a/...rc/app/features/semantic-model/model/access-control/role/overview/overview.component.html b/...rc/app/features/semantic-model/model/access-control/role/overview/overview.component.html
@@ -23,7 +23,7 @@ <h2 class="text-xl"> {{ 'PAC.MODEL.AccessControl.UnionRole' | translate: {Defaul
   <div>{{ role.name }}</div>
 
   <h3> {{ 'PAC.MODEL.AccessControl.RolesManage' | translate: {Default: 'Roles Manage'} }} </h3>
-  <div class="pac-cdk-drop__list flex-1 h-1/2 overflow-auto rounded-lg border border-gray-200 pb-4"
+  <div class="pac-cdk-drop__list pac-table-container flex-1 h-1/2 overflow-auto rounded-lg border pb-4"
       cdkDropList
       (cdkDropListDropped)="dropRole($event)">
       <table mat-table [dataSource]="roleUsages$" style="min-width: 100%;" class="ngm-density__compact" >
@@ -90,7 +90,7 @@ <h3> {{ 'PAC.MODEL.AccessControl.UsersManage' | translate: {Default: 'Users Mana
       </button>
     </div>
   </div>
-  <div class="mt-4 flex-1 overflow-auto rounded-lg border border-gray-200 pb-4">
+  <div class="pac-table-container mt-4 flex-1 overflow-auto rounded-lg border pb-4">
     <table mat-table [dataSource]="users$" class="ngm-density__compact w-full">
       <!-- Name Column -->
       <ng-container matColumnDef="user">

diff --git a/apps/cloud/src/app/features/semantic-model/model/create-entity/create-entity.component.html b/apps/cloud/src/app/features/semantic-model/model/create-entity/create-entity.component.html
@@ -138,15 +138,15 @@
       <div class="overflow-auto">
         <mat-list role="list" cdkDropList (cdkDropListDropped)="drop($event)">
           <mat-list-item *ngFor="let column of columns" cdkDrag
-            role="listitem" class="group rounded-lg hover:bg-slate-100">
+            role="listitem" class="group rounded-lg">
             <div class="w-full h-full flex items-center">
               <mat-checkbox class="group-hover:opacity-100" style="line-height: 1;"
                 [class.opacity-0]="column.name !== primaryKey"
                 [checked]="column.name === primaryKey"
                 (change)="primaryKey = $event.checked ? column.name : null"
               ></mat-checkbox>
 
-              <mat-icon class="ml-6 cursor-pointer text-gray-500 hover:text-gray-600 group-hover:opacity-100" [class.opacity-0]="!column.visible"
+              <mat-icon class="ml-6 cursor-pointer group-hover:opacity-100" [class.opacity-0]="!column.visible"
                 fontSet="material-icons-outlined"
                 (click)="column.visible=!column.visible"
               >

diff --git a/apps/cloud/src/app/features/story/story/story.component.html b/apps/cloud/src/app/features/story/story/story.component.html
@@ -136,7 +136,7 @@
 
         </div>
 
-        <ngm-drawer-trigger class="absolute right-2 top-1/2 -translate-y-1/2 z-40" [(opened)]="designerOpened" side="right"></ngm-drawer-trigger>
+        <ngm-drawer-trigger class="absolute right-2 top-2/3 -translate-y-1/2 z-40" [(opened)]="designerOpened" side="right"></ngm-drawer-trigger>
     </mat-drawer-content>
 </mat-drawer-container>
 

diff --git a/apps/cloud/src/styles.scss b/apps/cloud/src/styles.scss
@@ -23,17 +23,6 @@
 @import './styles/dark';
 @import './styles/dark-green';
 
-@include features.theme(ngm-theme.$mat-theme);
-@include shared.theme(ngm-theme.$mat-theme);
-@include public.theme(ngm-theme.$mat-theme);
-@include indicator-market.theme(ngm-theme.$mat-theme);
-
-.ngm-theme-dark {
-  @include features.color(dark-theme.$dark-theme);
-  @include shared.color(dark-theme.$dark-theme);
-  @include public.color(dark-theme.$dark-theme);
-  @include indicator-market.color(dark-theme.$dark-theme);
-}
 .ngm-theme-thin {
   @include features.color(thin-theme.$dark-theme);
   @include shared.color(thin-theme.$dark-theme);
@@ -50,6 +39,7 @@
 @import 'libs/formly/_formly';
 @import 'libs/story-angular/src/lib/_index';
 @import './app/_app.component';
+@import './styles/cdk-menu';
 
 html,
 body {
@@ -216,34 +206,6 @@ html.cdk-global-scrollblock {
   }
 }
 
-// cdk
-.cdk-menu-bar {
-  .cdk-menu-item {
-    @apply p-2 whitespace-nowrap;
-  }
-  // .cdk-menu-item.cdk-menu-trigger[aria-expanded='true'],
-  .cdk-menu-item:hover {
-    @apply bg-black/10;
-  }
-  .cdk-menu-item[aria-expanded='true'] {
-    @apply bg-black/20;
-  }
-}
-.cdk-menu.cdk-menu-group .cdk-menu-item {
-  @apply whitespace-nowrap;
-
-  &.ngm-cdk-menu-item__disabled {
-    cursor: default;
-    opacity: 0.5;
-    &:hover {
-      background-color: unset;
-    }
-  }
-  .mdc-button__label {
-    @apply flex-1;
-  }
-}
-
 .mat-mdc-button-base.mat-mdc-icon-button {
   @apply flex justify-center items-center;
 }

diff --git a/apps/cloud/src/styles/cdk-menu.scss b/apps/cloud/src/styles/cdk-menu.scss
@@ -0,0 +1,25 @@
+.cdk-menu-bar {
+  .cdk-menu-item {
+    @apply p-2 whitespace-nowrap text-neutral-500 dark:text-neutral-500;
+  }
+  .cdk-menu-item:hover {
+    @apply bg-black/10 dark:bg-gray-100/10 text-neutral-600 dark:text-neutral-400;
+  }
+  .cdk-menu-item[aria-expanded='true'] {
+    @apply bg-black/20 dark:bg-gray-100/20 text-neutral-600 dark:text-neutral-400;
+  }
+}
+.cdk-menu.cdk-menu-group .cdk-menu-item {
+  @apply whitespace-nowrap;
+
+  &.ngm-cdk-menu-item__disabled {
+    cursor: default;
+    opacity: 0.5;
+    &:hover {
+      background-color: unset;
+    }
+  }
+  .mdc-button__label {
+    @apply flex-1;
+  }
+}
diff --git a/apps/cloud/src/styles/dark.scss b/apps/cloud/src/styles/dark.scss
@@ -1,4 +1,9 @@
 @use '@angular/material/core/tokens/token-utils';
+@use 'libs/material-theme/src/styles/material/dark.theme' as dark-theme;
+@use 'libs/apps/indicator-market/src/lib/indicator-market-theme' as indicator-market;
+@use '../app/features/features-theme' as features;
+@use '../app/@shared/components-theme' as shared;
+@use '../app/public/public-theme' as public;
 @use '../app/features/semantic-model/model/_model.component' as model;
 
 body.dark {
@@ -19,3 +24,10 @@ body.dark {
   ));
 
 }
+
+.ngm-theme-dark {
+  @include indicator-market.color(dark-theme.$dark-theme);
+  @include features.color(dark-theme.$dark-theme);
+  @include shared.color(dark-theme.$dark-theme);
+  @include public.color(dark-theme.$dark-theme);
+}
diff --git a/apps/cloud/src/styles/default.scss b/apps/cloud/src/styles/default.scss
@@ -1,4 +1,9 @@
 @use '@angular/material/core/tokens/token-utils';
+@use 'libs/material-theme/src/styles/material/default.theme' as light-theme;
+@use 'libs/apps/indicator-market/src/lib/indicator-market-theme' as indicator-market;
+@use '../app/features/features-theme' as features;
+@use '../app/@shared/components-theme' as shared;
+@use '../app/public/public-theme' as public;
 @use '../app/features/semantic-model/model/_model.component' as model;
 
 body.default, body.light {
@@ -15,3 +20,10 @@ body.default, body.light {
     border-color: theme('colors.gray.200'),
   ));
 }
+
+.ngm-theme-light, .ngm-theme-default {
+  @include indicator-market.color(light-theme.$mat-theme);
+  @include features.color(light-theme.$mat-theme);
+  @include shared.color(light-theme.$mat-theme);
+  @include public.color(light-theme.$mat-theme);
+}
diff --git a/libs/material-theme/src/styles/material/_dark.theme.scss b/libs/material-theme/src/styles/material/_dark.theme.scss
@@ -80,7 +80,7 @@ $custom-typography: mat.define-typography-config(
 // Be sure that you only ever include this mixin once!
 // @include mat.core($custom-typography);
 
-.ngm-theme-dark {
+.ngm-theme-dark, .ngm-story__device.ngm-theme-dark.dark {
   // Include all theme styles for the mat components.
   @include mat.all-component-colors($dark-theme);
   @include components.all-component-colors($dark-theme);