Skip to content

Commit

Permalink
feat: Dark theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@meta-d
meta-d committed Feb 7, 2024
1 parent bd7b17d commit 712e45a
Show file tree
Hide file tree
Showing 44 changed files with 335 additions and 422 deletions.
2 changes: 1 addition & 1 deletion apps/cloud/src/app/@shared/_components-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@

.mat-toolbar.ngm-density__compact {
&.mat-toolbar-multiple-rows {
min-height: 58px;
// min-height: 58px;
}
&.mat-toolbar-row, &.mat-toolbar-single-row {
height: 33px;
Expand Down
8 changes: 5 additions & 3 deletions apps/cloud/src/app/@shared/upload/upload.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="relative flex-1 flex m-4 border-2 border-gray-300 border-dashed rounded-lg bg-gray-50"
<div class="container relative flex-1 flex m-4 border-2 border-dashed rounded-lg"
ngmDnd (fileDropped)="onFileDropped($event)"
>
<input type="file" #fileDropRef id="fileDropRef" multiple class="invisible"
Expand All @@ -18,11 +18,13 @@ <h3 class="text-sm text-gray-500 dark:text-gray-400">
{{ 'PAC.MODEL.CREATE_TABLE.Or' | translate: {Default: 'or'} }}
</h3>

<label for="fileDropRef" class="block text-sm text-slate-500
<label for="fileDropRef" class="block text-sm
py-2 px-4
rounded-full border-0 font-semibold
text-slate-500
bg-gray-100
hover:bg-bluegray-200"
hover:bg-bluegray-200
dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-neutral-200"
>
<span class="sr-only">Choose profile photo</span>
<span>
Expand Down
9 changes: 6 additions & 3 deletions apps/cloud/src/app/@shared/upload/upload.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
:host {
display: flex;
flex-direction: column;
flex: 1;
background-color: var(--mdc-elevated-card-container-color);
@apply flex-1 flex flex-col;
}

.container {
border-color: var(--mat-divider-color);
}
4 changes: 2 additions & 2 deletions apps/cloud/src/app/@shared/user/profile/profile.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
:host {
background-color: var(--ngm-card-bg-color);
border-color: var(--ngm-card-border-color);
background-color: var(--mdc-outlined-card-container-color);
border-color: var(--mdc-outlined-card-outline-color);
@apply border rounded-lg;
}
46 changes: 1 addition & 45 deletions apps/cloud/src/app/_app.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,38 +3,12 @@
@import './features/project/_project.component';
@import './features/_features.component';

.ngm-theme-dark,
.dark {
--ngm-bg-color: rgb(10 10 10); // bg-neutral-950
--ngm-card-bg-color: theme(colors.bluegray.800);
--ngm-card-border-color: theme(colors.bluegray.700);
--ngm-primary-color: theme(colors.bluegray.500);
--ngm-text-primary-color: theme(colors.bluegray.200);

--mdc-theme-error: theme(colors.red.400);
}

.dark-green {
--ngm-primary-color: theme(colors.green.500);
--ngm-text-primary-color: theme(colors.green.100);
}
.dark.thin {
--ngm-bg-color: rgb(46 16 101); // bg-violet-950
--ngm-primary-color: theme(colors.green.500);
--ngm-text-primary-color: theme(colors.green.100);
}

body,
.light {
--ngm-bg-color: theme(colors.gray.50);
--ngm-card-bg-color: theme(colors.white);
--ngm-card-border-color: theme(colors.gray.100);

--ngm-text-primary-color: theme(colors.bluegray.800);

--mdc-theme-error: theme(colors.red.400);
}

// popper
.ngxp__container.ngxp__animation {
@apply p-0 shadow-none z-10;
Expand Down Expand Up @@ -66,7 +40,7 @@ body,
@apply text-base font-light;
}
.pac-page-body {
@apply overflow-auto relative bg-slate-50 dark:bg-slate-50/10;
@apply overflow-auto relative ;
}
.pac-page-body-toolbar {
@apply flex justify-between items-center;
Expand All @@ -87,24 +61,6 @@ body,
@apply rounded-lg shadow-sm;
}

/**
* 纵向 nav bar
*/
.pac-nav__tab-bar {
.pac-nav__tab-bar {
@apply -ml-2 -mr-2 border-2 border-transparent;
}
.pac-nav__tab-bar:hover {
@apply bg-slate-100 border-slate-200 rounded-lg dark:bg-bluegray-600 dark:border-bluegray-500;
}
.pac-nav__tab-bar:focus {
@apply bg-slate-50 border-slate-200 rounded-lg dark:bg-bluegray-600 dark:border-bluegray-500;
}
.pac-nav__tab-bar.active {
@apply bg-slate-50 border-slate-200 rounded-lg dark:bg-bluegray-700 dark:border-bluegray-500;
}
}

.cdk-overlay-container .mat-mdc-dialog-container.mdc-dialog .mdc-dialog__content.pac-dialog-content {
@apply p-0;
}
196 changes: 97 additions & 99 deletions apps/cloud/src/app/features/indicator/market/market.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,9 @@
<div class="px-4 py-2 flex flex-wrap justify-between items-center">
<div class="flex items-center">
<button mat-icon-button displayDensity="cosy" (click)="drawer.toggle()">
<mat-icon fontSet="material-icons-round">segment</mat-icon>
</button>

<span class="text-xl">
{{ 'PAC.INDICATOR.IndicatorMarket' | translate: {Default: "Indicator Market"} }}
</span>
<span class="text-sm ml-4">
<span class="text-sm ml-4 opacity-50">
{{ 'PAC.MENU.INDICATOR.INDICATOR_MARKET_DESC' | translate: {Default: "Browse indicators and apply for permissions"} }}
</span>

Expand All @@ -28,7 +24,7 @@
</div>

<mat-drawer-container autosize class="flex-1 m-2 mt-0">
<mat-drawer #drawer class="border border-gray-200 rounded-xl" mode="side" opened ngmResizer [resizerWidth]="272">
<mat-drawer #drawer class="border rounded-xl" mode="side" [(opened)]="sideMenuOpened" ngmResizer [resizerWidth]="272">
<div class="flex justify-start items-start gap-2 p-4">
<label class="w-10 shrink-0">{{ 'PAC.INDICATOR.Types' | translate: {Default: 'Types'} }}</label>
<ngm-tags class="flex-1" selectable [tags]="[
Expand Down Expand Up @@ -74,110 +70,112 @@
></ngm-tree-select>

<div ngmResizerBar resizerBarPosition="right"
cdkDrag
cdkDrag
cdkDragLockAxis="x"
></div>
</mat-drawer>

<div class="pac-indicator-market__sidenav-content p-2 flex-1 h-full flex flex-col">
<ng-container *ngFor="let item of indicators$ | async">
<div class="m-2 grid grid-cols-2 md:grid-cols-6 lg:grid-cols-8 gap-2">
<div class="col-span-2 md:col-span-6 lg:col-span-8 text-lg my-2">
<a [routerLink]="['/indicator/viewer', item.id]">
<mat-drawer-content >
<div class="pac-indicator-market__sidenav-content p-2 flex-1 h-full flex flex-col overflow-auto">
<ng-container *ngFor="let item of indicators$ | async">
<div class="m-2 grid grid-cols-2 md:grid-cols-6 lg:grid-cols-8 gap-2">
<div class="col-span-2 md:col-span-6 lg:col-span-8 text-lg my-2">
<a [routerLink]="['/indicator/viewer', item.id]">
<span [ngmHighlight]="highlight" [caseSensitive]="false" customClasses="bg-transparent font-semibold text-amber-500"
[content]="item.name">
</span>
</a>
</div>

<div class="col-span-2 md:col-span-6 lg:col-span-8 text-gray-500">
<span [ngmHighlight]="highlight" [caseSensitive]="false" customClasses="bg-transparent font-semibold text-amber-500"
[content]="item.name">
[content]="item.business"
>
</span>
</a>
</div>

<div class="col-span-2 md:col-span-6 lg:col-span-8 text-gray-500">
<span [ngmHighlight]="highlight" [caseSensitive]="false" customClasses="bg-transparent font-semibold text-amber-500"
[content]="item.business"
>
</span>
</div>

<div class="text-right">
{{ 'PAC.INDICATOR.REGISTER.CODE' | translate }}:
</div>
<div class="overflow-hidden text-ellipsis whitespace-nowrap">
<span [ngmHighlight]="highlight" [caseSensitive]="false" customClasses="bg-transparent font-semibold text-amber-500"
[content]="item.code"></span>
</div>

<div class="text-right">
{{ 'PAC.INDICATOR.REGISTER.TYPE' | translate }}:
</div>
<pac-indicator-type [indicator]="item"></pac-indicator-type>

<div class="text-right">
{{ 'PAC.INDICATOR.REGISTER.Certification' | translate: {Default: 'Certification'} }}:
</div>
<div>
<span *ngIf="item.certification" class="text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-green-200 text-green-700 rounded-full">
{{item.certification.name}}
</span>
</div>

<div class="text-right">
{{ 'PAC.INDICATOR.REGISTER.PRINCIPAL' | translate }}:
</div>
<div>{{item.principal}}</div>

<div class="text-right">
{{ 'PAC.INDICATOR.REGISTER.Tags' | translate: {Default: 'Tags'} }}:
</div>
<pac-tags [tags]="item.tags"></pac-tags>

<div class="text-right">
{{ 'PAC.INDICATOR.REGISTER.CREATED_AT' | translate }}:
</div>
<div>
{{item.createdAt}}
</div>

<div class="text-right">
{{ 'PAC.INDICATOR.REGISTER.BUSINESS_AREA' | translate }}:
</div>
<div>{{item.businessArea?.name}}</div>

<div class="text-right">
{{ 'PAC.INDICATOR.REGISTER.STATUS' | translate }}:
</div>
<div class="h-full flex items-start">
<span *ngIf="item.isActive" class="flex w-3 h-3 m-1 bg-green-500 rounded-full"></span>
</div>
</div>

<div class="my-2">
<div class="flex justify-end">
<div *ngIf="item.permissionRefuses">
<mat-icon color="warn" [matBadge]="item.permissionRefuses"
[matTooltip]="'PAC.INDICATOR.PermissionRefused' | translate: {Default: 'Permission Refused'}">block</mat-icon>
</div>

<div *ngIf="item.permissionApproved">
<mat-icon class="text-green-600" [matTooltip]="'PAC.INDICATOR.PermissionApproved' | translate: {Default: 'Permission Approved'}">task_alt</mat-icon>
<div class="text-right">
{{ 'PAC.INDICATOR.REGISTER.CODE' | translate }}:
</div>
<div class="overflow-hidden text-ellipsis whitespace-nowrap">
<span [ngmHighlight]="highlight" [caseSensitive]="false" customClasses="bg-transparent font-semibold text-amber-500"
[content]="item.code"></span>
</div>

<div class="text-right">
{{ 'PAC.INDICATOR.REGISTER.TYPE' | translate }}:
</div>
<pac-indicator-type [indicator]="item"></pac-indicator-type>

<div *ngIf="item.permissionRequests">
<mat-icon color="accent" fontSet="material-icons-outlined"
[matTooltip]="'PAC.INDICATOR.PermissionRequested' | translate: {Default: 'Permission Requested'}">pending</mat-icon>
<div class="text-right">
{{ 'PAC.INDICATOR.REGISTER.Certification' | translate: {Default: 'Certification'} }}:
</div>

<div ngmButtonGroup displayDensity="cosy" *ngIf="!item.permissionApproved && !item.permissionRequests">
<button mat-button displayDensity="compact" [disabled]="!!item.permissionRequests" (click)="requestPermission(item.id)">
<div class="flex justify-center items-center">
<mat-icon fontSet="material-icons-outlined">approval</mat-icon>
{{ 'PAC.INDICATOR.MARKET.REQUEST' | translate: {Default: 'Request'} }}
</div>
</button>
<div>
<span *ngIf="item.certification" class="text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-green-200 text-green-700 rounded-full">
{{item.certification.name}}
</span>
</div>

<div class="text-right">
{{ 'PAC.INDICATOR.REGISTER.PRINCIPAL' | translate }}:
</div>
<div>{{item.principal}}</div>

<div class="text-right">
{{ 'PAC.INDICATOR.REGISTER.Tags' | translate: {Default: 'Tags'} }}:
</div>
<pac-tags [tags]="item.tags"></pac-tags>

<div class="text-right">
{{ 'PAC.INDICATOR.REGISTER.CREATED_AT' | translate }}:
</div>
<div>
{{item.createdAt}}
</div>

<div class="text-right">
{{ 'PAC.INDICATOR.REGISTER.BUSINESS_AREA' | translate }}:
</div>
<div>{{item.businessArea?.name}}</div>

<div class="text-right">
{{ 'PAC.INDICATOR.REGISTER.STATUS' | translate }}:
</div>
<div class="h-full flex items-start">
<span *ngIf="item.isActive" class="flex w-3 h-3 m-1 bg-green-500 rounded-full"></span>
</div>
</div>
</div>

<mat-divider></mat-divider>
</ng-container>
</div>


<div class="my-2">
<div class="flex justify-end">
<div *ngIf="item.permissionRefuses">
<mat-icon color="warn" [matBadge]="item.permissionRefuses"
[matTooltip]="'PAC.INDICATOR.PermissionRefused' | translate: {Default: 'Permission Refused'}">block</mat-icon>
</div>

<div *ngIf="item.permissionApproved">
<mat-icon class="text-green-600" [matTooltip]="'PAC.INDICATOR.PermissionApproved' | translate: {Default: 'Permission Approved'}">task_alt</mat-icon>
</div>

<div *ngIf="item.permissionRequests">
<mat-icon color="accent" fontSet="material-icons-outlined"
[matTooltip]="'PAC.INDICATOR.PermissionRequested' | translate: {Default: 'Permission Requested'}">pending</mat-icon>
</div>

<div ngmButtonGroup displayDensity="cosy" *ngIf="!item.permissionApproved && !item.permissionRequests">
<button mat-button displayDensity="compact" [disabled]="!!item.permissionRequests" (click)="requestPermission(item.id)">
<div class="flex justify-center items-center">
<mat-icon fontSet="material-icons-outlined">approval</mat-icon>
{{ 'PAC.INDICATOR.MARKET.REQUEST' | translate: {Default: 'Request'} }}
</div>
</button>
</div>
</div>
</div>

<mat-divider></mat-divider>
</ng-container>
</div>
<ngm-drawer-trigger class="absolute -left-1 top-1/2 -translate-y-1/2 z-40" [(opened)]="sideMenuOpened" ></ngm-drawer-trigger>
</mat-drawer-content>
</mat-drawer-container>
7 changes: 7 additions & 0 deletions apps/cloud/src/app/features/indicator/market/market.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,10 @@
display: flex;
flex-direction: column;
}

.mat-drawer.mat-drawer-side {
border-color: var(--mat-divider-color);
}
.mat-drawer-content {
@apply overflow-hidden;
}
2 changes: 2 additions & 0 deletions apps/cloud/src/app/features/indicator/market/market.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,8 @@ export class MarketComponent {

PAGE_SIZE = 10
displayCompact = false
// Left side menu drawer open state
sideMenuOpened = true

businessArea = new FormControl<string>(null)
search = new FormControl<string>(null)
Expand Down
14 changes: 8 additions & 6 deletions apps/cloud/src/app/features/project/_project.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
.pac-project__router-link {
@apply hover:bg-slate-100;
}
.pac-project__router-link.active {
@apply bg-slate-100 hover:bg-slate-200 dark:bg-slate-100/10 dark:hover:bg-slate-200/10;
@apply hover:bg-slate-100 dark:hover:bg-slate-100/10;

&.active {
@apply bg-slate-100 hover:bg-slate-200 dark:bg-slate-100/10 dark:hover:bg-slate-200/10;
}
}
.mdc-list-item.pac-project__router-link {

.mat-mdc-list-item.mdc-list-item.pac-project__router-link {
--mdc-list-list-item-one-line-container-height: 30px;
@apply rounded-md p-0;
@apply rounded-md p-0 cursor-pointer;
}
.pac-project__anchor {
@apply border-bluegray-100 text-bluegray-100 hover:border-bluegray-200 hover:text-bluegray-200;
Expand Down
Loading

0 comments on commit 712e45a

Please sign in to comment.