From d474a946abc982a9f9979a6cfd0f1469574cd642 Mon Sep 17 00:00:00 2001 From: Max Date: Mon, 6 Jan 2020 12:33:07 +0100 Subject: [PATCH 1/2] fixed darkmode color bug --- .../app-scaffold/app-scaffold.component.sass | 63 ------------- src/app/components/chat/chat.component.sass | 91 ------------------- .../chatlist/chatlist.component.sass | 71 --------------- src/app/components/feed/feed.component.sass | 2 +- src/styles/vars.sass | 27 +----- 5 files changed, 4 insertions(+), 250 deletions(-) diff --git a/src/app/components/app-scaffold/app-scaffold.component.sass b/src/app/components/app-scaffold/app-scaffold.component.sass index f7f8dd0..e69de29 100644 --- a/src/app/components/app-scaffold/app-scaffold.component.sass +++ b/src/app/components/app-scaffold/app-scaffold.component.sass @@ -1,63 +0,0 @@ -@import '../../../styles/mixins.sass' -@import '../../../styles/vars.sass' - -button - border: 2px solid $cHeadPrimaryBackground - margin-top: 0.125em - padding: 0.125em - background-color: $cHeadPrimaryBackground - color: $cHeadFontColor - font-weight: bold - transition-duration: 0.25s - -button:hover - background-color: lighten($cHeadPrimaryBackground, 10%) - cursor: pointer - -button:active - background-color: darken($cHeadPrimaryBackground, 5%) - box-shadow: inset 0.25em 0.25em 0.1em rgba(0, 0, 0, 0.25) - -h1 - @include gridPosition(1, 2, 1, 2) - line-height: 100% - margin-left: 0.5em - margin-top: 0.25em - -#tab-home - @include gridPosition(1, 2, 2, 3) - -#tab-profile - @include gridPosition(1, 2, 3, 4) - -#tab-about - @include gridPosition(1, 2, 4, 5) - -#tab-imprint - @include gridPosition(1, 2, 5, 6) - -#tab-login - @include gridPosition(1, 2, 6, 7) - -#dropdown - @include gridPosition(1, 2, 7, 8) - display: flex - align-items: center - margin-left: 2em - span - margin-left: 1em - #symbol - span:hover - background-color: lighten($cHeadPrimaryBackground, 10%) - cursor: pointer - #dropdown-content - position: absolute - background-color: $cHeadPrimaryBackground - min-width: 160px - margin-top: 7vh - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2) - padding: 12px 16px - z-index: 1 - -#logoutbutton - @include gridPosition(1, 2, 8, 9) \ No newline at end of file diff --git a/src/app/components/chat/chat.component.sass b/src/app/components/chat/chat.component.sass index 5ae8d7e..e69de29 100644 --- a/src/app/components/chat/chat.component.sass +++ b/src/app/components/chat/chat.component.sass @@ -1,91 +0,0 @@ -@import '../../../styles/mixins.sass' -@import '../../../styles/vars.sass' - -#chat - display: grid - grid-template: 7.5% 82.5% 10%/100% - width: 100% - height: 100% - -#header - @include gridPosition(1, 2, 1, 2) - background-color: $cBoxHeaderBackground - display: grid - grid-template: 100% /20% 80% - - span - color: $cFontWhite - span.title - @include gridPosition(1, 2, 2, 3) - margin-top: 0.25em - margin-left: 0.25em - line-height: 100% - font-size: 2em - - button - background-color: $cBoxHeaderBackground - border: none - - button:hover - background-color: lighten($cBoxHeaderBackground, 10%) - cursor: pointer - - button:active - background-color: darken($cBoxHeaderBackground, 5%) - - #goback - @include gridPosition(1, 2, 1, 2) - -#chatheader - @include gridPosition(1, 2, 1, 2) - display: grid - grid-template: 100% /10% 90% - #goback - @include gridPosition(1, 2, 1, 2) - #name - @include gridPosition(1, 2, 2, 3) - -#messagecontainer - @include gridPosition(2, 3, 1, 2) - overflow: auto -.chatmessage - width: 100% - #ownmessage - text-align: right - margin: 0.5em - span - background-color: $cMessageOwn - border: solid - border-color: $cMessageOwn - border-radius: 0.25em - #foreignmessage - text-align: left - margin: 0.5em - span - background-color: $cMessageForeign - border: solid - border-color: $cMessageForeign - border-radius: 0.25em - - -#newmessage - @include gridPosition(3, 4, 1, 2) - margin: 0.5em - display: grid - grid-template: 100% /80% 20% - #input - @include gridPosition(1, 2, 1, 2) - border-radius: 0.25em - border: 1px solid $cFeedInputBorder - padding: 0.125em - resize: none - #send - @include gridPosition(1, 2, 2, 3) - button - background-color: $cFeedChooserBackground - color: $cFontWhite - border: none - border-radius: 0.5em - button:hover - background-color: lighten($cFeedChooserBackground, 10%) - cursor: pointer \ No newline at end of file diff --git a/src/app/components/chatlist/chatlist.component.sass b/src/app/components/chatlist/chatlist.component.sass index 1fb59d4..e69de29 100644 --- a/src/app/components/chatlist/chatlist.component.sass +++ b/src/app/components/chatlist/chatlist.component.sass @@ -1,71 +0,0 @@ -@import '../../../styles/mixins.sass' -@import '../../../styles/vars.sass' - -#chatlist - display: grid - grid-template: 7.5% 92.5%/100% - width: 100% - height: 100% - -#header - @include gridPosition(1, 2, 1, 2) - background-color: $cBoxHeaderBackground - display: grid - grid-template: 100% /80% 20% - - span - color: $cFontWhite - span.title - @include gridPosition(1, 2, 1, 2) - margin-top: 0.25em - margin-left: 0.25em - line-height: 100% - font-size: 2em - - button - background-color: $cBoxHeaderBackground - border: none - - button:hover - background-color: lighten($cBoxHeaderBackground, 10%) - cursor: pointer - - button:active - background-color: darken($cBoxHeaderBackground, 5%) - - #newchat - @include gridPosition(1, 2, 2, 3) - -#chats - overflow: auto - @include gridPosition(2, 3, 1, 2) - - div:hover - background-color: darken($cPrimaryBackground, 10%) - cursor: pointer - .chatitem - background-color: $cPrimaryBackground - height: 3em - margin: 0.2em - padding: 0.25em - border-radius: 0.25em - display: grid - grid-template: 100% / 20% 60% 20% - .picture - @include gridPosition(1, 2, 1, 2) - border: solid - .name, .date - margin-top: auto - margin-bottom: auto - .name - @include gridPosition(1, 2, 2, 3) - font-weight: bold - text-align: left - padding-left: 0.5em - span - font-size: 125% - .date - @include gridPosition(1, 2, 3, 4) - color: $cInactiveText - text-align: right - padding-right: 0.5em \ No newline at end of file diff --git a/src/app/components/feed/feed.component.sass b/src/app/components/feed/feed.component.sass index 6ab61bd..2780ae2 100644 --- a/src/app/components/feed/feed.component.sass +++ b/src/app/components/feed/feed.component.sass @@ -1,6 +1,6 @@ @import '../../../styles/mixins.sass' @import '../../../styles/vars.sass' -@import 'src/styles/greenvironment-material-theme.scss'; + .primary-color color: $primary-color diff --git a/src/styles/vars.sass b/src/styles/vars.sass index 2341683..0670e0a 100644 --- a/src/styles/vars.sass +++ b/src/styles/vars.sass @@ -1,27 +1,6 @@ -$cPrimaryBackground: #fff -$cSecondaryBackground: #ddd -$cInactiveText: #555 -$cPrimarySurface: #fff +@import '~@angular/material/theming' -//Headerbar -$cHeadPrimaryBackground: #0d6b14 -$cHeadFontColor: #adffc1ee - -//Home -- Feed -$cFeedPrimaryFontColor: #243dca -$cFeedSecondaryFontColor: #243dca -$cFeedInputBorder: #396d51 -$cFeedItemBackground: #b0ecb0fb -$cFeedChooserBackground: #259145 -$cFeedBackground: #36ce64 -$cFeedUpVote: #2cb149 -$cFeedDownVote: #ff5f5f - -//Home -- Chat, Friends, Groups -$cFontWhite: #fff//#adffc1ee //this is also the background color lol -$cBoxHeaderBackground: #259145 -$cBoxBodyBackground: #fff//#3deb71 -$cMessageOwn: #cfe4c9 -$cMessageForeign: #baca5d +$primary: mat-palette($mat-light-green); +$primary-color: mat-color($primary); From 71e8dfef9b7c4e04ae3b7d4b0d700de8e720ffa9 Mon Sep 17 00:00:00 2001 From: Max Date: Mon, 6 Jan 2020 12:51:13 +0100 Subject: [PATCH 2/2] fixed darkmode bug --- .../main-navigation/main-navigation.component.ts | 7 ------- src/app/services/datasharing.service.ts | 6 ++++++ src/app/services/settings/settings.service.ts | 4 +++- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/app/components/main-navigation/main-navigation.component.ts b/src/app/components/main-navigation/main-navigation.component.ts index 4f41d9d..2946e2f 100644 --- a/src/app/components/main-navigation/main-navigation.component.ts +++ b/src/app/components/main-navigation/main-navigation.component.ts @@ -1,7 +1,5 @@ import { Component, OnInit, HostBinding } from '@angular/core'; import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout'; -import { Observable } from 'rxjs'; -import { map, shareReplay } from 'rxjs/operators'; import { DatasharingService } from '../../services/datasharing.service'; import { RequestService } from '../../services/request/request.service'; import { SettingsService } from '../../services/settings/settings.service'; @@ -42,11 +40,6 @@ export class MainNavigationComponent implements OnInit { lighttheme = true; overlay; - isHandset$: Observable = this.breakpointObserver.observe(Breakpoints.Handset) - .pipe( - map(result => result.matches), - shareReplay() - ); navLinksLoggedIn = [ { path: '', label: 'Home' }, { path: this.profileUrl, label: 'Profile' }, diff --git a/src/app/services/datasharing.service.ts b/src/app/services/datasharing.service.ts index 7116724..690b314 100644 --- a/src/app/services/datasharing.service.ts +++ b/src/app/services/datasharing.service.ts @@ -25,6 +25,12 @@ export class DatasharingService { this.changeUserInfo(user); } + setDarkMode(active: boolean) { + const user: User = this.userInfoSource.getValue(); + user.darkmode = active; + this.changeUserInfo(user); + } + changeChatIDs(pChatIDs: number[]) { this.chatIDsSource.next(pChatIDs); } diff --git a/src/app/services/settings/settings.service.ts b/src/app/services/settings/settings.service.ts index 8ee9373..00eca51 100644 --- a/src/app/services/settings/settings.service.ts +++ b/src/app/services/settings/settings.service.ts @@ -2,6 +2,7 @@ import {Injectable} from '@angular/core'; import {Http} from '@angular/http'; import { User } from 'src/app/models/user'; import { environment } from 'src/environments/environment'; +import {DatasharingService} from '../datasharing.service'; @Injectable({ providedIn: 'root' @@ -9,10 +10,11 @@ import { environment } from 'src/environments/environment'; export class SettingsService { users: Array; - constructor(private http: Http) { + constructor(private http: Http, private data: DatasharingService) { } setDarkModeActive(active: boolean) { + this.data.setDarkMode(active); const url = environment.graphQLUrl; const headers = new Headers(); headers.set('Content-Type', 'application/json');