Skip to content

Commit

Permalink
Implemented dark theme
Browse files Browse the repository at this point in the history
  • Loading branch information
Nuri0 committed Aug 27, 2024
1 parent 26bc68b commit b307429
Show file tree
Hide file tree
Showing 5 changed files with 83 additions and 67 deletions.
16 changes: 6 additions & 10 deletions src/app/choice-group-card/choice-group-card.component.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,12 @@
}

.choice-overview {
border: 2px solid black;
@media (prefers-color-scheme: light) {
border: 2px solid black;
}
@media (prefers-color-scheme: dark) {
border: 2px solid white;
}
border-radius: 5px;
padding: 5px;
display: inline-block;
Expand All @@ -15,15 +20,6 @@
margin: 5px 10px 10px 10px;
}

h2 {
display:inline-block;
margin: 0;
}

a {
text-decoration: none;
}

.next-days {
margin: 10px;
}
25 changes: 2 additions & 23 deletions src/app/choice-group-card/choice-group-card.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@
<tr *ngFor="let outlook of getNextDaysSelections()">
<td><b>{{outlook.day | date:"EEEE"}}</b></td>
<td *ngFor="let choice of outlook.selections">
<div class="choice-overview" [style.background]="choice.choice.color">
<div class="choice-overview" [style.background]="choice.choice.color"
[style.color]="isColorLight(choice.choice.color) ? '#000' : '#FFF'">
{{choice.choice.title}}
</div>
</td>
Expand All @@ -28,25 +29,3 @@
</button>
</mat-card-actions>
</mat-card>

<!-- <div class="overview-content">
<div class="overview-header">
<h2><a [routerLink]="['/choice-group-detail',group.id]">{{group.title}}</a></h2>
<button class="delete-group" (click)="deleteChoiceGroup()">X</button>
</div>
<div class="separator"></div>
<div class="next-days" *ngIf="group.choices.length > 0">
<table>
<tr *ngFor="let outlook of getNextDaysSelections()">
<td><b>{{outlook.day | date:"EEEE"}}</b></td>
<td *ngFor="let choice of outlook.selections">
<div class="choice-overview" [style.background]="choice.choice.color">
{{choice.choice.title}}
</div>
</td>
</tr>
</table>
</div>
</div> -->
86 changes: 55 additions & 31 deletions src/app/choice-group-card/choice-group-card.component.ts
Original file line number Diff line number Diff line change
@@ -1,55 +1,79 @@
import { Component, Input, OnInit } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';
import { Component, Input, OnInit } from "@angular/core";
import { MatButtonModule } from "@angular/material/button";
import { MatCardModule } from "@angular/material/card";
import { MatIconModule } from "@angular/material/icon";

import { DatePipe, NgFor, NgIf } from '@angular/common';
import { RouterLink } from '@angular/router';
import { DatePipe, NgFor, NgIf } from "@angular/common";
import { RouterLink } from "@angular/router";
import { ChoiceDataService } from "../shared/choice-data.service";
import { ChoiceGroup } from "../shared/choice-group";
import { SelectorService } from "../shared/selector.service";

@Component({
selector: 'choice-group-overview',
templateUrl: './choice-group-card.component.html',
styleUrls: ['./choice-group-card.component.css'],
providers: [SelectorService],
standalone: true,
imports: [RouterLink, NgIf, NgFor, DatePipe, MatCardModule, MatButtonModule, MatIconModule]
selector: "choice-group-overview",
templateUrl: "./choice-group-card.component.html",
styleUrls: ["./choice-group-card.component.css"],
providers: [SelectorService],
standalone: true,
imports: [
RouterLink,
NgIf,
NgFor,
DatePipe,
MatCardModule,
MatButtonModule,
MatIconModule,
],
})
export class ChoiceGroupCardComponent implements OnInit {

@Input()
group: ChoiceGroup;

constructor(private choiceDataService: ChoiceDataService, private md5Service: SelectorService) { }
constructor(
private choiceDataService: ChoiceDataService,
private md5Service: SelectorService
) {}

deleteChoiceGroup() {
if (confirm("Do you really want to delete this group?")) {
this.choiceDataService.deleteChoiceGroupById(this.group.id);
}
if (confirm("Do you really want to delete this group?")) {
this.choiceDataService.deleteChoiceGroupById(this.group.id);
}
}

isColorLight(hex: string) {
// https://awik.io/determine-color-bright-dark-using-javascript/
const color = +("0x" + hex.slice(1).replace(hex.length < 5 && /./g, '$&$&'));
const r = color >> 16;
const g = color >> 8 & 255;
const b = color & 255;

const hsp = Math.sqrt(
0.299 * (r * r) +
0.587 * (g * g) +
0.114 * (b * b)
)

return hsp > 127.5;
}

getNextDaysSelections() {
let outlook = [];
let day = new Date(); // today
for (let i=0; i<8; i++) {
outlook.push({
day: new Date(day.getTime()),
selections: this.md5Service.getChoicesForDate(this.group,day)
});
day.setDate(day.getDate() + 1);
}
return outlook;
let outlook = [];
let day = new Date(); // today
for (let i = 0; i < 8; i++) {
outlook.push({
day: new Date(day.getTime()),
selections: this.md5Service.getChoicesForDate(this.group, day),
});
day.setDate(day.getDate() + 1);
}
return outlook;
}

getTodaysSelections() {
let date = new Date();
let choices = this.md5Service.getChoicesForDate(this.group,date);
let choices = this.md5Service.getChoicesForDate(this.group, date);
return choices;
}

ngOnInit() {
}

ngOnInit() {}
}
21 changes: 19 additions & 2 deletions src/custom-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
@include mat.core();

// Define the theme object.
$daily-random-scheduler-theme: mat.define-theme((
$light-theme: mat.define-theme((
color: (
theme-type: light,
primary: mat.$azure-palette,
Expand All @@ -21,12 +21,29 @@ $daily-random-scheduler-theme: mat.define-theme((
)
));

$dark-theme: mat.define-theme((
color: (
theme-type: dark,
primary: mat.$azure-palette,
tertiary: mat.$blue-palette,
),
density: (
scale: 0,
)
));

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
:root {
@include mat.all-component-themes($daily-random-scheduler-theme);
@include mat.all-component-themes($dark-theme);
}
@media (prefers-color-scheme: light) {
:root {
@include mat.all-component-colors($light-theme);
}
}


// Comment out the line below if you want to use the pre-defined typography utility classes.
// For more information: https://material.angular.io/guide/typography#using-typography-styles-in-your-application.
Expand Down
2 changes: 1 addition & 1 deletion src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<body class="mat-app-background">
<app-root>Loading...</app-root>
</body>
</html>

0 comments on commit b307429

Please sign in to comment.