Chneemann/dabubble
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

clean code

Browse source
This commit is contained in:
Chneemann 2024-05-26 19:51:04 +02:00
parent 5f7667af30
commit c7e64d34c3
24 changed files with 90 additions and 380 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/app/app.component.ts
View file

@ -1,12 +1,9 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router'; import { RouterOutlet } from '@angular/router';
import { UserComponent } from './shared/components/user/user.component';
import { EditUserDetailsComponent } from './shared/components/header/edit-user/edit-user-details/edit-user-details.component';
import { ToggleBooleanService } from './service/toggle-boolean.service';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
standalone: true, standalone: true,
imports: [RouterOutlet, UserComponent, EditUserDetailsComponent], imports: [RouterOutlet],
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrl: './app.component.scss', styleUrl: './app.component.scss',
}) })

13
src/app/components/main-login/login/login.component.html
View file

@ -1,4 +1,4 @@
<div class="loginSektion startIntroScrollProtect"> <section class="startIntroScrollProtect">
<app-start-header></app-start-header> <app-start-header></app-start-header>
<div class="loginContainer"> <div class="loginContainer">
<div class="loginTop"> <div class="loginTop">
@ -32,7 +32,7 @@
class="inputField" class="inputField"
#passwordField="ngModel" #passwordField="ngModel"
minlength="6" minlength="6"
maxlength="16" maxlength="16"
[(ngModel)]="this.loginService.password" [(ngModel)]="this.loginService.password"
name="password" name="password"
[type]="loginService.passwordFieldType" [type]="loginService.passwordFieldType"
@ -45,7 +45,12 @@
cols="30" cols="30"
rows="10" rows="10"
/> />
<img class="passwordEye" (click)="loginService.togglePasswordVisibility()" [src]="loginService.passwordIcon" alt="Toggle visibility"> <img
class="passwordEye"
(click)="loginService.togglePasswordVisibility()"
[src]="loginService.passwordIcon"
alt="Toggle visibility"
/>
@if (!passwordField.valid && passwordField.touched) { @if (!passwordField.valid && passwordField.touched) {
<p class="error">{{ "login.errorText2" | translate }}</p> <p class="error">{{ "login.errorText2" | translate }}</p>
} @if (loginService.errorMessage) { } @if (loginService.errorMessage) {
@ -99,4 +104,4 @@
</div> </div>
</div> </div>
<app-footer></app-footer> <app-footer></app-footer>
</div> </section>

4
src/app/components/main-login/login/login.component.scss
View file

@ -3,8 +3,8 @@
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden; overflow-y: hidden;
} }
.loginSektion { section {
@include SektionBody; @include SectionBody;
} }
.loginContainer { .loginContainer {
@include Card; @include Card;

16
src/app/components/main-login/password-forget/password-forget.component.html
View file

@ -1,4 +1,4 @@
<div class="passwordSektion"> <section>
<app-start-header [display]="'none'"></app-start-header> <app-start-header [display]="'none'"></app-start-header>
<div class="passwordContainer"> <div class="passwordContainer">
<div class="passwordTop"> <div class="passwordTop">
@ -11,10 +11,10 @@
> >
</app-small-btn> </app-small-btn>
</div> </div>
<span>{{ 'passwordForget.header' | translate }}</span> <span>{{ "passwordForget.header" | translate }}</span>
</div> </div>
<div class="passwordInfoText"> <div class="passwordInfoText">
<span>{{ 'passwordForget.infoText' | translate }}</span> <span>{{ "passwordForget.infoText" | translate }}</span>
</div> </div>
<form <form
(ngSubmit)="onSubmit(contactForm)" (ngSubmit)="onSubmit(contactForm)"
@ -36,20 +36,18 @@
pattern="[^@]+@[^.]+\..+" pattern="[^@]+@[^.]+\..+"
/> />
@if (!emailField.valid && emailField.touched) { @if (!emailField.valid && emailField.touched) {
<p class="error">{{ 'login.errorText' | translate }}</p> <p class="error">{{ "login.errorText" | translate }}</p>
} }
</div> </div>
<div class="bottomInfoText"> <div class="bottomInfoText">
<span> <span> {{ "passwordForget.infoTextBottom" | translate }}</span>
{{ 'passwordForget.infoTextBottom' | translate }}</span
>
</div> </div>
<div class="passwordBottom"> <div class="passwordBottom">
<button <button
[ngClass]="{ aktivButton: contactForm.valid }" [ngClass]="{ aktivButton: contactForm.valid }"
[disabled]="!contactForm.valid" [disabled]="!contactForm.valid"
> >
{{ 'passwordForget.Btn' | translate }} {{ "passwordForget.Btn" | translate }}
</button> </button>
</div> </div>
</form> </form>
@ -58,4 +56,4 @@
<img src="./assets/img/login/email-send-btn.svg" alt="" /> <img src="./assets/img/login/email-send-btn.svg" alt="" />
</div> </div>
<app-footer></app-footer> <app-footer></app-footer>
</div> </section>

4
src/app/components/main-login/password-forget/password-forget.component.scss
View file

@ -1,7 +1,7 @@
@import "../../../shared/components/login/mixins/mixin.scss"; @import "../../../shared/components/login/mixins/mixin.scss";
.passwordSektion { section {
@include SektionBody; @include SectionBody;
} }
.passwordContainer { .passwordContainer {

12
src/app/components/main-login/password-reset/password-reset.component.html
View file

@ -1,4 +1,4 @@
<div class="passwordSektion"> <section>
<app-start-header [display]="'none'"></app-start-header> <app-start-header [display]="'none'"></app-start-header>
<div class="passwordContainer"> <div class="passwordContainer">
<div class="passwordTop"> <div class="passwordTop">
@ -11,7 +11,7 @@
> >
</app-small-btn> </app-small-btn>
</div> </div>
<span>{{ 'passwordReset.header' | translate }}</span> <span>{{ "passwordReset.header" | translate }}</span>
</div> </div>
<form <form
@ -39,7 +39,7 @@
/> />
@if (!passwordField.valid && passwordField.touched) { @if (!passwordField.valid && passwordField.touched) {
<p class="error"> <p class="error">
{{ 'passwordReset.errorText' | translate }} {{ "passwordReset.errorText" | translate }}
</p> </p>
} }
</div> </div>
@ -66,7 +66,7 @@
class="error" class="error"
*ngIf="passwordRepeatField.touched && !passwordsMatch()" *ngIf="passwordRepeatField.touched && !passwordsMatch()"
> >
{{ 'passwordReset.errorText2' | translate }} {{ "passwordReset.errorText2" | translate }}
</p> </p>
</div> </div>
<div class="passwordBottom"> <div class="passwordBottom">
@ -74,10 +74,10 @@
[ngClass]="{ aktivButton: contactForm.valid && passwordsMatch() }" [ngClass]="{ aktivButton: contactForm.valid && passwordsMatch() }"
[disabled]="!contactForm.valid || !passwordsMatch()" [disabled]="!contactForm.valid || !passwordsMatch()"
> >
{{ 'passwordReset.Btn' | translate }} {{ "passwordReset.Btn" | translate }}
</button> </button>
</div> </div>
</form> </form>
</div> </div>
<app-footer></app-footer> <app-footer></app-footer>
</div> </section>

4
src/app/components/main-login/password-reset/password-reset.component.scss
View file

@ -1,6 +1,6 @@
@import "../../../shared/components/login/mixins/mixin.scss"; @import "../../../shared/components/login/mixins/mixin.scss";
.passwordSektion { section {
@include SektionBody; @include SectionBody;
} }
.passwordContainer { .passwordContainer {
max-width: 606px; max-width: 606px;

9
src/app/components/sidebar/searchbar/searchbar.component.html
View file

@ -1,9 +0,0 @@
<section (click)="openSearchbar($event)">
<div class="whiteBox">
<input type="text" placeholder="To: #channel or @someone" [(ngModel)]="inputValue">
<img src="./assets/img/search-icon.svg" (click)="closeSearchWindow($event)">
</div>
@if (inputValue) {
<div class="suggestions"></div>
}
</section>

54
src/app/components/sidebar/searchbar/searchbar.component.scss
View file

@ -1,54 +0,0 @@
@import "./../../../../styles.scss";
section{
position: relative;
@include displayFlex();
.whiteBox{
z-index: 1;
position: absolute;
top: -16px;
left: 322px;
@include displayFlex();
width: auto;
height: 56px;
background-color: #fff;
padding: 2px 8px 2px;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 34px;
border-top-left-radius: 0;
box-shadow: rgb(111 139 169) 0px 20px 30px -10px;
input{
width: 30vw;
height: 46px;
border-radius: 26px;
padding-right: 40px;
padding-left: 8px;
margin-right: 2px;
font-size: larger;
border: 1px solid #888dec;
font-family: "Nunito", sans-serif;
outline: none;
&:hover{
border: 1px solid #5f66e7;
}
}
img{
margin-left: -36px;
padding-right: 4px;
cursor: pointer;
}
}
}
.suggestions{
width: 200px;
height: 300px;
background-color: coral;
position: absolute;
top: 46px;
left: 360px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
z-index: 1;
box-shadow: rgb(111 139 169) 0px 20px 30px -10px;
}

23
src/app/components/sidebar/searchbar/searchbar.component.spec.ts
View file

@ -1,23 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { SearchbarComponent } from './searchbar.component';
describe('SearchbarComponent', () => {
let component: SearchbarComponent;
let fixture: ComponentFixture<SearchbarComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [SearchbarComponent]
})
.compileComponents();
fixture = TestBed.createComponent(SearchbarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

38
src/app/components/sidebar/searchbar/searchbar.component.ts
View file

@ -1,38 +0,0 @@
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { ToggleBooleanService } from '../../../service/toggle-boolean.service';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-searchbar',
standalone: true,
imports: [CommonModule, FormsModule],
templateUrl: './searchbar.component.html',
styleUrl: './searchbar.component.scss',
})
export class SearchbarComponent {
inputValue: string = '';
constructor(private toggleBoolean: ToggleBooleanService) {}
/**
* Closes the search window.
* @param event The event object.
*/
closeSearchWindow(event: Event) {
this.toggleBoolean.openSearchWindow = false;
event.stopPropagation();
this.inputValue = '';
}
/**
* Opens the search bar.
* @param event The event object.
*/
openSearchbar(event: Event){
this.toggleBoolean.openSearchWindow = true;
event.stopPropagation();
}
}

8
src/app/components/sidebar/show-all-users/show-all-users.component.spec.ts
View file

@ -1,5 +1,4 @@
import { ComponentFixture, TestBed } from '@angular/core/testing'; import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ShowAllUsersComponent } from './show-all-users.component'; import { ShowAllUsersComponent } from './show-all-users.component';
describe('ShowAllUsersComponent', () => { describe('ShowAllUsersComponent', () => {
@ -8,10 +7,9 @@ describe('ShowAllUsersComponent', () => {
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
imports: [ShowAllUsersComponent] imports: [ShowAllUsersComponent],
}) }).compileComponents();
.compileComponents();
fixture = TestBed.createComponent(ShowAllUsersComponent); fixture = TestBed.createComponent(ShowAllUsersComponent);
component = fixture.componentInstance; component = fixture.componentInstance;
fixture.detectChanges(); fixture.detectChanges();

44
src/app/components/sidebar/sidebar-channels/add-new-channel/add-new-channel.component.html
View file

@ -10,8 +10,8 @@
<div class="newChannelDescription"> <div class="newChannelDescription">
@if (!showNextWindow) { @if (!showNextWindow) {
<div class="whiteWindow"> <div class="whiteWindow">
<div class="posiotionHeader"> <div class="positionHeader">
<p>{{ 'add-new-channel.header' | translate }}</p> <p>{{ "add-new-channel.header" | translate }}</p>
<app-small-btn <app-small-btn
[imgSrc]="'closeIcon.svg'" [imgSrc]="'closeIcon.svg'"
[imgSize]="'16px'" [imgSize]="'16px'"
@ -20,21 +20,15 @@
(click)="toggleShowAddChannelBox()" (click)="toggleShowAddChannelBox()"
></app-small-btn> ></app-small-btn>
</div> </div>
<span class="infoMsg" <span class="infoMsg">{{ "add-new-channel.info" | translate }}</span>
>{{ 'add-new-channel.info' | translate }}</span
>
<div class="descriptionBox"> <div class="descriptionBox">
<p>{{ 'add-new-channel.header2' | translate }}</p> <p>{{ "add-new-channel.header2" | translate }}</p>
&nbsp; &nbsp;
<span>{{ 'add-new-channel.required' | translate }}</span> <span>{{ "add-new-channel.required" | translate }}</span>
@if (chechIfChannelExist(channelName)) { @if (chechIfChannelExist(channelName)) {
<p class="warning">{{ 'add-new-channel.warning' | translate }}</p> <p class="warning">{{ "add-new-channel.warning" | translate }}</p>
} }
<img <img class="hashtag" src="./assets/img/hashtag.svg" alt="" />
class="hashtag"
src="./assets/img/hashtag.svg"
alt=""
/>
</div> </div>
<input <input
type="text" type="text"
@ -45,9 +39,9 @@
(keyup)="checkIfChannelNameIsValid(channelName)" (keyup)="checkIfChannelNameIsValid(channelName)"
/> />
<div class="descriptionBox"> <div class="descriptionBox">
<p>{{ 'add-new-channel.description' | translate }}</p> <p>{{ "add-new-channel.description" | translate }}</p>
&nbsp; &nbsp;
<span>{{ 'add-new-channel.optional' | translate }}</span> <span>{{ "add-new-channel.optional" | translate }}</span>
</div> </div>
<textarea <textarea
id="" id=""
@ -63,17 +57,17 @@
[disabled]="!channelService.btnIsValid" [disabled]="!channelService.btnIsValid"
[ngClass]="{ [ngClass]="{
disabledBtn: !channelService.btnIsValid, disabledBtn: !channelService.btnIsValid,
furterBtnClass: channelService.btnIsValid enableBtn: channelService.btnIsValid
}" }"
> >
{{ 'add-new-channel.create' | translate }} {{ "add-new-channel.create" | translate }}
</button> </button>
</div> </div>
</div> </div>
} @if (showNextWindow || showNextWindowMobile) { } @if (showNextWindow || showNextWindowMobile) {
<div class="smalWhiteBox" (click)="toggleAddedUserBox()"> <div class="smallWhiteBox" (click)="toggleAddedUserBox()">
<div class="headerAddPeople"> <div class="headerAddPeople">
<h2> {{ 'add-new-channel.addPeople' | translate }}</h2> <h2>{{ "add-new-channel.addPeople" | translate }}</h2>
<app-small-btn <app-small-btn
[imgSrc]="'closeIcon.svg'" [imgSrc]="'closeIcon.svg'"
[imgSize]="'16px'" [imgSize]="'16px'"
@ -90,7 +84,11 @@
alt="" alt=""
(click)="toggleBtnFalse()" (click)="toggleBtnFalse()"
/> />
<p> {{ 'add-new-channel.addAll' | translate }}&nbsp;<span> {{ 'add-new-channel.devspace' | translate }}</span></p> <p>
{{ "add-new-channel.addAll" | translate }}&nbsp;<span>
{{ "add-new-channel.devspace" | translate }}</span
>
</p>
</div> </div>
<div class="positionSelectionBtn"> <div class="positionSelectionBtn">
<img <img
@ -99,7 +97,7 @@
}}" }}"
(click)="toggleBtnTrue()" (click)="toggleBtnTrue()"
/> />
<p> {{ 'add-new-channel.add' | translate }}</p> <p>{{ "add-new-channel.add" | translate }}</p>
</div> </div>
<div class="addedUserBox" *ngIf="changeImg"> <div class="addedUserBox" *ngIf="changeImg">
<div <div
@ -143,7 +141,9 @@
</div> </div>
</div> </div>
<div class="positionCreateBtn"> <div class="positionCreateBtn">
<button class="btnBox" (click)="addNewChannel()"> {{ 'add-new-channel.create' | translate }}</button> <button class="btnBox" (click)="addNewChannel()">
{{ "add-new-channel.create" | translate }}
</button>
</div> </div>
</div> </div>
} }

10
src/app/components/sidebar/sidebar-channels/add-new-channel/add-new-channel.component.scss
View file

@ -49,7 +49,7 @@
padding: 32px; padding: 32px;
} }
.posiotionHeader { .positionHeader {
@include displayFlex($j: space-between); @include displayFlex($j: space-between);
width: 100%; width: 100%;
p { p {
@ -93,7 +93,7 @@ textarea {
font-weight: 400; font-weight: 400;
padding-top: 6px; padding-top: 6px;
} }
.warning{ .warning {
font-size: 18px; font-size: 18px;
font-weight: 500; font-weight: 500;
padding-top: 6px; padding-top: 6px;
@ -116,7 +116,7 @@ textarea {
.btnBox { .btnBox {
width: 100%; width: 100%;
@include displayFlex($j: flex-end); @include displayFlex($j: flex-end);
.furterBtnClass { .enableBtn {
width: 120px; width: 120px;
height: 48px; height: 48px;
background-color: white; background-color: white;
@ -133,7 +133,7 @@ textarea {
} }
} }
.smalWhiteBox { .smallWhiteBox {
padding: 32px; padding: 32px;
width: 48vw; width: 48vw;
height: auto; height: auto;
@ -322,7 +322,7 @@ textarea {
border-radius: 0; border-radius: 0;
} }
.smalWhiteBox { .smallWhiteBox {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;

2
src/app/components/sidebar/sidebar.component.ts
View file

@ -5,7 +5,6 @@ import { SidebarDirectMessagesComponent } from './sidebar-direct-messages/sideba
import { SmallBtnComponent } from '../../shared/components/small-btn/small-btn.component'; import { SmallBtnComponent } from '../../shared/components/small-btn/small-btn.component';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { ChannleService } from '../../service/channle.service'; import { ChannleService } from '../../service/channle.service';
import { SearchbarComponent } from './searchbar/searchbar.component';
import { ToggleBooleanService } from '../../service/toggle-boolean.service'; import { ToggleBooleanService } from '../../service/toggle-boolean.service';
import { ChatService } from '../../service/chat.service'; import { ChatService } from '../../service/chat.service';
import { SharedService } from '../../service/shared.service'; import { SharedService } from '../../service/shared.service';
@ -19,7 +18,6 @@ import { SearchBarComponent } from '../../shared/components/header/search-bar/se
SidebarDirectMessagesComponent, SidebarDirectMessagesComponent,
SmallBtnComponent, SmallBtnComponent,
CommonModule, CommonModule,
SearchbarComponent,
SearchBarComponent, SearchBarComponent,
], ],
templateUrl: './sidebar.component.html', templateUrl: './sidebar.component.html',

14
src/app/shared/components/header/edit-user/edit-user-details/edit-user-details.component.ts
View file

@ -28,18 +28,18 @@ import { SmallBtnComponent } from '../../../small-btn/small-btn.component';
styleUrl: './edit-user-details.component.scss', styleUrl: './edit-user-details.component.scss',
}) })
export class EditUserDetailsComponent { export class EditUserDetailsComponent {
@Input() openEditUserValue!: boolean;
@Input() showCurrentProfile!: boolean;
@Output() closeEditWindow = new EventEmitter<boolean>();
@Output() saveUserData = new EventEmitter<boolean>();
@ViewChild('inputName') inputName!: ElementRef;
@ViewChild('inputEmail') inputEmail!: ElementRef;
asGuestOnline: boolean = false; asGuestOnline: boolean = false;
nameValueBoolean: boolean = false; nameValueBoolean: boolean = false;
emailValueBoolean: boolean = false; emailValueBoolean: boolean = false;
changedName: string = ''; changedName: string = '';
changedEmail: string = ''; changedEmail: string = '';
@Input() openEditUserValue!: boolean;
@Input() showCurrentProfile!: boolean;
@ViewChild('inputName') inputName!: ElementRef;
@ViewChild('inputEmail') inputEmail!: ElementRef;
@Output() closeEditWindow = new EventEmitter<boolean>();
@Output() saveUserData = new EventEmitter<boolean>();
constructor( constructor(
public userService: UserService, public userService: UserService,

6
src/app/shared/components/header/edit-user/edit-user.component.ts
View file

@ -18,12 +18,12 @@ import { SmallBtnComponent } from '../../small-btn/small-btn.component';
styleUrl: './edit-user.component.scss', styleUrl: './edit-user.component.scss',
}) })
export class EditUserComponent { export class EditUserComponent {
@Input() showCurrentProfile!: boolean;
@Output() testValueChange = new EventEmitter<boolean>();
isOnline = true; isOnline = true;
openProfil = false; openProfil = false;
openEditUserValue = false; openEditUserValue = false;
@Input() showCurrentProfile!: boolean;
@Output() testValueChange = new EventEmitter<boolean>();
constructor(public userService: UserService) {} constructor(public userService: UserService) {}

4
src/app/shared/components/header/header.component.html
View file

@ -17,7 +17,7 @@
<div> <div>
<div class="rightSide"> <div class="rightSide">
@for(i of userService.getCurentUsers(); track i){ @for(i of userService.getCurentUsers(); track i){
<p class="fontNunito">{{ i.firstName }} {{ i.lastName }}</p> <p>{{ i.firstName }} {{ i.lastName }}</p>
<div class="img" (click)="showSideMenu()"> <div class="img" (click)="showSideMenu()">
<img src="{{ i.avatar }}" class="profileImg" /> <img src="{{ i.avatar }}" class="profileImg" />
@ -48,7 +48,7 @@
[ngClass]="{ dBlock: openMenu, dNone: !openMenu }" [ngClass]="{ dBlock: openMenu, dNone: !openMenu }"
(click)="showSideMenu()" (click)="showSideMenu()"
> >
<div class="whiteBox fontNunito"> <div class="whiteBox">
<p (click)="showProfile()" class="profilBtn"> <p (click)="showProfile()" class="profilBtn">
{{ "login-header.profil" | translate }} {{ "login-header.profil" | translate }}
</p> </p>

25
src/app/shared/components/header/search-bar/search-bar.component.html
View file

@ -3,7 +3,6 @@
type="text" type="text"
maxlength="24" maxlength="24"
placeholder="{{ 'search-bar.placeholder' | translate }}" placeholder="{{ 'search-bar.placeholder' | translate }}"
class="fontNunito"
[(ngModel)]="inputValue" [(ngModel)]="inputValue"
(keyup)="filterAllInfo(inputValue)" (keyup)="filterAllInfo(inputValue)"
/> />
@ -17,9 +16,9 @@
> >
<!-----Search output------> <!-----Search output------>
@if (filteredUsers.length > 0 && inputValue != '') { @if (filteredUsers.length > 0 && inputValue != '') {
<div class="contantBox"> <div class="contentBox">
<h4>{{ 'search-bar-header.user' | translate }}:</h4> <h4>{{ "search-bar-header.user" | translate }}:</h4>
<div class="ansersBox"> <div class="answersBox">
@for (user of filteredUsers; track user) { @for (user of filteredUsers; track user) {
<div <div
class="userDiv" class="userDiv"
@ -43,9 +42,9 @@
</div> </div>
</div> </div>
} @if (filteredChannels.length > 0 && inputValue != '') { } @if (filteredChannels.length > 0 && inputValue != '') {
<div class="contantBox"> <div class="contentBox">
<h4>{{ 'search-bar-header.channels' | translate }}:</h4> <h4>{{ "search-bar-header.channels" | translate }}:</h4>
<div class="ansersBox"> <div class="answersBox">
@for (channel of filteredChannels; track channel) { @for (channel of filteredChannels; track channel) {
<p <p
class="channelName" class="channelName"
@ -59,15 +58,15 @@
</div> </div>
</div> </div>
} @if (filteredChats.length > 0 && inputValue != '') { } @if (filteredChats.length > 0 && inputValue != '') {
<div class="contantBoxChats"> <div class="contentBoxChats">
<h4>{{ 'search-bar-header.thread' | translate }}:</h4> <h4>{{ "search-bar-header.thread" | translate }}:</h4>
<div class="channelAnswers"> <div class="channelAnswers">
@for (chat of filteredChats; track chat) { @for (chat of filteredChats; track chat) {
<div class="ansersBoxChats"> <div class="answersBoxChats">
<p class="threadNmae">[ {{ getChannel(chat.channelId) }} ]</p> <p class="threadNmae">[ {{ getChannel(chat.channelId) }} ]</p>
<div class="threadContetntBox"> <div class="threadContentBox">
<p <p
class="threadContetnt" class="threadContent"
[innerHTML]="chat.message | highlight : inputValue" [innerHTML]="chat.message | highlight : inputValue"
routerLink="/main/{{ chat.channelId }}" routerLink="/main/{{ chat.channelId }}"
(click)="closeSecondaryChatAndSidebar()" (click)="closeSecondaryChatAndSidebar()"
@ -80,7 +79,7 @@
} @if ((filteredUsers.length === 0 && inputValue != '') && } @if ((filteredUsers.length === 0 && inputValue != '') &&
(filteredChannels.length === 0 && inputValue != '') && (filteredChats.length (filteredChannels.length === 0 && inputValue != '') && (filteredChats.length
=== 0 && inputValue != '')) { === 0 && inputValue != '')) {
<p class="threadContetnt">{{ "search-bar.errorMessage" | translate }}</p> <p class="threadContent">{{ "search-bar.errorMessage" | translate }}</p>
} }
</div> </div>
</div> </div>

14
src/app/shared/components/header/search-bar/search-bar.component.scss
View file

@ -27,26 +27,26 @@
background-color: white; background-color: white;
box-shadow: rgb(79 98 117) 0px 20px 30px -10px; box-shadow: rgb(79 98 117) 0px 20px 30px -10px;
scrollbar-width: none; scrollbar-width: none;
overflow: scroll; overflow: auto;
-ms-overflow-style: none; -ms-overflow-style: none;
display: flex; display: flex;
gap: 20px; gap: 20px;
flex-direction: column; flex-direction: column;
} }
.contantBox { .contentBox {
@include displayFlex($j: space-between, $a: flex-start); @include displayFlex($j: space-between, $a: flex-start);
width: 100%; width: 100%;
h4 { h4 {
width: 30%; width: 30%;
} }
.ansersBox { .answersBox {
@include displayFlex($a: flex-start, $g: 4px); @include displayFlex($a: flex-start, $g: 4px);
flex-direction: column; flex-direction: column;
width: 70%; width: 70%;
} }
} }
.contantBoxChats { .contentBoxChats {
@include displayFlex($j: space-between, $a: flex-start); @include displayFlex($j: space-between, $a: flex-start);
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
@ -54,15 +54,15 @@
width: 100%; width: 100%;
@include displayFlex($g: 4px); @include displayFlex($g: 4px);
flex-direction: column; flex-direction: column;
.ansersBoxChats { .answersBoxChats {
width: 100%; width: 100%;
@include displayFlex($j: space-between, $a: flex-start); @include displayFlex($j: space-between, $a: flex-start);
.threadNmae { .threadNmae {
width: 30%; width: 30%;
} }
.threadContetntBox { .threadContentBox {
width: 70%; width: 70%;
.threadContetnt { .threadContent {
width: fit-content; width: fit-content;
padding: 4px; padding: 4px;
&:hover { &:hover {

28
src/app/shared/components/user/user.component.html
View file

@ -1,28 +0,0 @@
<div class="mainBox" [ngClass]="{'dBlock': openProfil, 'dNone': !openProfil}">
<div class="whiteBox">
<div class="boxHeader fontNunito">
<p>Profile</p>
<img src="./assets/img/closeIcon.svg">
</div>
<img src="./assets/img/charater1.svg" class="profileImg" (click)="showSideMenu()">
<div class="detailsBox">
<h1 class="fontNunito">Max Müller</h1>
<div class="statusBox">
<img src="./assets/img/{{ isOnline? 'onlineRing.svg' : 'offlineRing.svg'}}">
<p [ngClass]="{'fontColorGreen': isOnline }">Aktiv</p>
</div>
<div class="emailBox">
<img src="./assets/img/mail-icon.svg">
<div class="emailH2">
<h2>{{ 'user.email' | translate }}</h2>
<a href="mailto:wwweewefeff&#64;dede.de" target="_blank" class="fontNunito">maxMüller&#64;ffe.de</a>
</div>
</div>
</div>
<button><img src="./assets/img/messageIcon.svg">{{ 'user.message' | translate }}</button>
</div>
</div>

88
src/app/shared/components/user/user.component.scss
View file

@ -1,88 +0,0 @@
@import '../../../../styles.scss';
.mainBox{
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.3);
@include displayFlex();
z-index: 5;
.whiteBox{
width: 400px;
height: auto;
background-color: whitesmoke;
border-radius: 15px;
@include displayFlex();
flex-direction: column;
padding-top: 32px;
.boxHeader{
width: 360px;
@include displayFlex($j: space-between);
>p{
font-size: 20px;
font-weight: 600;
margin: 0;
}
>img{
cursor: pointer;
}
}
.profileImg{
width: 200px;
object-fit: cover;
border-radius: 50%;
margin: 56px;
}
>button{
@include displayFlex($g: 12px);
background-color: #444df2;
border: none;
border-radius: 25px;
padding: 12px;
padding-left: 22px;
padding-right: 22px;
font-size: larger;
font-weight: 500;
color: white;
margin: 32px;
cursor: pointer;
}
}
}
.detailsBox{
width: 360px;
h1{
font-size: 32px;
font-weight: 700;
margin-bottom: 20px;
}
.statusBox{
@include displayFlex($j:flex-start, $g: 12px);
margin-bottom: 40px;
>p{
margin: 0;
font-size: medium;
font-weight: 500;
}
}
}
.fontColorGreen{
color: #92C83E;
}
.emailBox{
@include displayFlex($j: flex-start, $a: flex-start, $g: 20px);
.emailH2{
>a{
color: #4EA1FF;
font-size: 16px;
text-decoration: none;
}
}
}

23
src/app/shared/components/user/user.component.spec.ts
View file

@ -1,23 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { UserComponent } from './user.component';
describe('UserComponent', () => {
let component: UserComponent;
let fixture: ComponentFixture<UserComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [UserComponent]
})
.compileComponents();
fixture = TestBed.createComponent(UserComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

22
src/app/shared/components/user/user.component.ts
View file

@ -1,22 +0,0 @@
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
@Component({
selector: 'app-user',
standalone: true,
imports: [CommonModule, TranslateModule],
templateUrl: './user.component.html',
styleUrl: './user.component.scss'
})
export class UserComponent {
isOnline = true;
openProfil = false;
/**
* Toggles the display of the side menu for user profile.
*/
showSideMenu() {
this.openProfil = !this.openProfil;
}
}