diff --git a/src/app/dialog-edit-profile/dialog-edit-profile.component.html b/src/app/dialog-edit-profile/dialog-edit-profile.component.html index d03b820..0771553 100644 --- a/src/app/dialog-edit-profile/dialog-edit-profile.component.html +++ b/src/app/dialog-edit-profile/dialog-edit-profile.component.html @@ -1,4 +1,4 @@
Profil - Log out + Abmelden
\ No newline at end of file diff --git a/src/app/main/conversations/conversations.component.scss b/src/app/main/conversations/conversations.component.scss index e17b902..83b158b 100644 --- a/src/app/main/conversations/conversations.component.scss +++ b/src/app/main/conversations/conversations.component.scss @@ -79,25 +79,27 @@ main { >mat-expansion-panel-header { padding: 0 0 1rem 0; + mat-panel-title { display: flex; justify-content: space-between; - >div { - display: flex; - align-items: center; - img { - padding-right: 0.5rem; - } + >div { + display: flex; + align-items: center; + + img { + padding-right: 0.5rem; } } - } - } +} + + .channels, .directmessages { @@ -106,7 +108,7 @@ main { font-size: 1.25rem; } } - + mat-expansion-panel-header:hover { background: none !important; @@ -369,5 +371,39 @@ mat-button-toggle { } ::ng-deep::ng-deep .mat-expansion-panel-body { - padding: 0 0 16px 24px !important; + padding: 0 0 1rem 1.5rem !important; +} + +// Media Queries + +@media (max-width: 431px) { + .workspace { + display: none; + } + + main { + padding: 0 2.25rem 2.25rem 2.25rem; + height: auto; + } + + .container { + padding: 0; + overflow: visible; + display: flex; + flex-direction: column; + gap: 0.875rem; + } + + .channels, + .directmessages { + + >mat-expansion-panel-header { + height: 2.875rem; + + mat-panel-title { + margin: 0; + + } + } + } } \ No newline at end of file diff --git a/src/app/main/header/header.component.html b/src/app/main/header/header.component.html index 0c1ce65..e8f2265 100644 --- a/src/app/main/header/header.component.html +++ b/src/app/main/header/header.component.html @@ -23,4 +23,8 @@

{{ currentuser.currentUser.name }}

keyboard_arrow_down - \ No newline at end of file + +
+ + +
\ No newline at end of file diff --git a/src/app/main/header/header.component.scss b/src/app/main/header/header.component.scss index e59f220..cae324c 100644 --- a/src/app/main/header/header.component.scss +++ b/src/app/main/header/header.component.scss @@ -67,6 +67,8 @@ position: absolute; bottom: 0; right: 0; + width: 1rem; + height: 1rem; img { width: 1rem; @@ -98,6 +100,93 @@ h1 { font-size: 2rem; } -.custom-dialog-class{ +.custom-dialog-class { border-radius: 1.875rem 0rem 1.875rem 1.875rem; +} + +.mobile { + display: none; + padding: 2rem 0.75rem 1.5625rem 0.75rem; + background-color: var(--white); + width: calc(100% - 0.75rem - 0.75rem); + + >input { + font-size: 1.0625rem; + padding: 0.5rem 3.5rem 0.5rem 1.5rem; + border: 1px solid var(--light-purple-line); + height: 2rem; + + &::placeholder { + font-size: 1.0625rem; + } + } + + >img { + position: absolute; + right: 2.25rem; + bottom: 2.0625rem; + width: 2rem; + height: 2rem; + } +} + +// Media Queries + +@media (max-width: 431px) { + .mobile { + display: flex; + } + + .searchbar-wrapper:not(.mobile), + h1 { + display: none; + } + + .header-content { + height: unset; + padding: 0.9375rem 1rem; + background-color: var(--bg-color); + } + + .logo { + gap: 0.6875rem; + + >img:first-child { + width: 2.8125rem; + height: 2.8125rem; + } + + >img:last-child { + width: 6.59388rem; + height: 1.01375rem; + } + } + + .profile-info { + .avatar-wrapper { + width: 3.125rem; + height: 3.125rem; + + >img { + width: 3.125rem; + height: 3.125rem; + } + + .online-status { + width: 0.875rem; + height: 0.875rem; + + img { + width: 0.875rem; + height: 0.875rem; + } + } + } + + >button { + display: none; + } + } + + } \ No newline at end of file diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html index b690c39..4261844 100644 --- a/src/app/main/main.component.html +++ b/src/app/main/main.component.html @@ -37,4 +37,7 @@ } } - \ No newline at end of file + + + + diff --git a/src/app/main/main.component.scss b/src/app/main/main.component.scss index ce6f81d..6682135 100644 --- a/src/app/main/main.component.scss +++ b/src/app/main/main.component.scss @@ -79,8 +79,94 @@ main { } } +.new-dm { + position: fixed; + right: 1rem; + bottom: 2.25rem; + padding: 1rem; + width: 3.75rem; + height: 3.75rem; + transition: 100ms ease-out; + border-radius: 50%; + + ::ng-deep::ng-deep .mat-mdc-button-persistent-ripple { + border-radius: 50%; + background: var(--purple-1); + overflow: hidden; + transition: 100ms ease-out; + } + + ::ng-deep::ng-deep .mat-mdc-button-ripple { + border-radius: 50%; + overflow: hidden; + } + + ::ng-deep::ng-deep .mdc-button__label { + color: var(--white); + font-family: Nunito; + font-size: 1.125rem; + padding: 0; + font-style: normal; + font-weight: 700; + line-height: normal; + letter-spacing: normal; + + >img { + width: 1.5rem; + height: 1.5rem; + } + } + + &:hover { + + ::ng-deep::ng-deep .mat-mdc-button-persistent-ripple { + background-color: var(--purple-2); + + &::before { + opacity: 0; + } + } + } +} + .closed:hover { >img { content: url(../../assets/img/icons/sidenav-open-purple.svg) !important; } +} + +.mobile { + display: none; +} + + + +// Media Queries + +@media (max-width: 431px) { + :host { + gap: 1.5625rem; + background-color: var(--white); + min-height: 100vh; + } + + .mobile { + display: unset; + } + + main { + display: none; + } + + app-conversations { + margin-top: 11.6625rem; + } + + app-header { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 3; + } } \ No newline at end of file diff --git a/src/app/main/main.component.ts b/src/app/main/main.component.ts index b182a13..aa12f56 100644 --- a/src/app/main/main.component.ts +++ b/src/app/main/main.component.ts @@ -11,6 +11,7 @@ import { DirectMessageComponent } from './chat/direct-message/direct-message.com import { UsersList } from '../../app/interfaces/users-list'; import { NewMessageComponent } from './new-message/new-message.component'; import { ChatService } from './chat/chat.service'; +import { MatButtonModule } from '@angular/material/button'; @Component({ selector: 'app-main', @@ -26,7 +27,8 @@ import { ChatService } from './chat/chat.service'; ChatComponent, WelcomeScreenComponent, DirectMessageComponent, - NewMessageComponent + NewMessageComponent, + MatButtonModule ], templateUrl: './main.component.html', styleUrl: './main.component.scss' @@ -47,6 +49,11 @@ export class MainComponent { } + openComponent(componentName: string,) { + this.chatService.setComponent(componentName); + + } + openThread() { this.threadDrawer.open(); } diff --git a/src/assets/img/icons/edit_square-white.svg b/src/assets/img/icons/edit_square-white.svg new file mode 100644 index 0000000..49ab19f --- /dev/null +++ b/src/assets/img/icons/edit_square-white.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/img/icons/search.svg b/src/assets/img/icons/search.svg new file mode 100644 index 0000000..e2145c7 --- /dev/null +++ b/src/assets/img/icons/search.svg @@ -0,0 +1,10 @@ + + + + + + + + + +