clean code
This commit is contained in:
Chneemann
parent
5f7667af30
commit
c7e64d34c3
24 changed files with 90 additions and 380 deletions
|
|
@ -1,12 +1,9 @@
|
|||
import { Component } from '@angular/core';
|
||||
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({
|
||||
selector: 'app-root',
|
||||
standalone: true,
|
||||
imports: [RouterOutlet, UserComponent, EditUserDetailsComponent],
|
||||
imports: [RouterOutlet],
|
||||
templateUrl: './app.component.html',
|
||||
styleUrl: './app.component.scss',
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="loginSektion startIntroScrollProtect">
|
||||
<section class="startIntroScrollProtect">
|
||||
<app-start-header></app-start-header>
|
||||
<div class="loginContainer">
|
||||
<div class="loginTop">
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
class="inputField"
|
||||
#passwordField="ngModel"
|
||||
minlength="6"
|
||||
maxlength="16"
|
||||
maxlength="16"
|
||||
[(ngModel)]="this.loginService.password"
|
||||
name="password"
|
||||
[type]="loginService.passwordFieldType"
|
||||
|
|
@ -45,7 +45,12 @@
|
|||
cols="30"
|
||||
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) {
|
||||
<p class="error">{{ "login.errorText2" | translate }}</p>
|
||||
} @if (loginService.errorMessage) {
|
||||
|
|
@ -99,4 +104,4 @@
|
|||
</div>
|
||||
</div>
|
||||
<app-footer></app-footer>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.loginSektion {
|
||||
@include SektionBody;
|
||||
section {
|
||||
@include SectionBody;
|
||||
}
|
||||
.loginContainer {
|
||||
@include Card;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="passwordSektion">
|
||||
<section>
|
||||
<app-start-header [display]="'none'"></app-start-header>
|
||||
<div class="passwordContainer">
|
||||
<div class="passwordTop">
|
||||
|
|
@ -11,10 +11,10 @@
|
|||
>
|
||||
</app-small-btn>
|
||||
</div>
|
||||
<span>{{ 'passwordForget.header' | translate }}</span>
|
||||
<span>{{ "passwordForget.header" | translate }}</span>
|
||||
</div>
|
||||
<div class="passwordInfoText">
|
||||
<span>{{ 'passwordForget.infoText' | translate }}</span>
|
||||
<span>{{ "passwordForget.infoText" | translate }}</span>
|
||||
</div>
|
||||
<form
|
||||
(ngSubmit)="onSubmit(contactForm)"
|
||||
|
|
@ -36,20 +36,18 @@
|
|||
pattern="[^@]+@[^.]+\..+"
|
||||
/>
|
||||
@if (!emailField.valid && emailField.touched) {
|
||||
<p class="error">{{ 'login.errorText' | translate }}</p>
|
||||
<p class="error">{{ "login.errorText" | translate }}</p>
|
||||
}
|
||||
</div>
|
||||
<div class="bottomInfoText">
|
||||
<span>
|
||||
{{ 'passwordForget.infoTextBottom' | translate }}</span
|
||||
>
|
||||
<span> {{ "passwordForget.infoTextBottom" | translate }}</span>
|
||||
</div>
|
||||
<div class="passwordBottom">
|
||||
<button
|
||||
[ngClass]="{ aktivButton: contactForm.valid }"
|
||||
[disabled]="!contactForm.valid"
|
||||
>
|
||||
{{ 'passwordForget.Btn' | translate }}
|
||||
{{ "passwordForget.Btn" | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -58,4 +56,4 @@
|
|||
<img src="./assets/img/login/email-send-btn.svg" alt="" />
|
||||
</div>
|
||||
<app-footer></app-footer>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import "../../../shared/components/login/mixins/mixin.scss";
|
||||
|
||||
.passwordSektion {
|
||||
@include SektionBody;
|
||||
section {
|
||||
@include SectionBody;
|
||||
}
|
||||
|
||||
.passwordContainer {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="passwordSektion">
|
||||
<section>
|
||||
<app-start-header [display]="'none'"></app-start-header>
|
||||
<div class="passwordContainer">
|
||||
<div class="passwordTop">
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
>
|
||||
</app-small-btn>
|
||||
</div>
|
||||
<span>{{ 'passwordReset.header' | translate }}</span>
|
||||
<span>{{ "passwordReset.header" | translate }}</span>
|
||||
</div>
|
||||
|
||||
<form
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
/>
|
||||
@if (!passwordField.valid && passwordField.touched) {
|
||||
<p class="error">
|
||||
{{ 'passwordReset.errorText' | translate }}
|
||||
{{ "passwordReset.errorText" | translate }}
|
||||
</p>
|
||||
}
|
||||
</div>
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
class="error"
|
||||
*ngIf="passwordRepeatField.touched && !passwordsMatch()"
|
||||
>
|
||||
{{ 'passwordReset.errorText2' | translate }}
|
||||
{{ "passwordReset.errorText2" | translate }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="passwordBottom">
|
||||
|
|
@ -74,10 +74,10 @@
|
|||
[ngClass]="{ aktivButton: contactForm.valid && passwordsMatch() }"
|
||||
[disabled]="!contactForm.valid || !passwordsMatch()"
|
||||
>
|
||||
{{ 'passwordReset.Btn' | translate }}
|
||||
{{ "passwordReset.Btn" | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<app-footer></app-footer>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import "../../../shared/components/login/mixins/mixin.scss";
|
||||
.passwordSektion {
|
||||
@include SektionBody;
|
||||
section {
|
||||
@include SectionBody;
|
||||
}
|
||||
.passwordContainer {
|
||||
max-width: 606px;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
@ -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();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ShowAllUsersComponent } from './show-all-users.component';
|
||||
|
||||
describe('ShowAllUsersComponent', () => {
|
||||
|
|
@ -8,10 +7,9 @@ describe('ShowAllUsersComponent', () => {
|
|||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [ShowAllUsersComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
imports: [ShowAllUsersComponent],
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(ShowAllUsersComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@
|
|||
<div class="newChannelDescription">
|
||||
@if (!showNextWindow) {
|
||||
<div class="whiteWindow">
|
||||
<div class="posiotionHeader">
|
||||
<p>{{ 'add-new-channel.header' | translate }}</p>
|
||||
<div class="positionHeader">
|
||||
<p>{{ "add-new-channel.header" | translate }}</p>
|
||||
<app-small-btn
|
||||
[imgSrc]="'closeIcon.svg'"
|
||||
[imgSize]="'16px'"
|
||||
|
|
@ -20,21 +20,15 @@
|
|||
(click)="toggleShowAddChannelBox()"
|
||||
></app-small-btn>
|
||||
</div>
|
||||
<span class="infoMsg"
|
||||
>{{ 'add-new-channel.info' | translate }}</span
|
||||
>
|
||||
<span class="infoMsg">{{ "add-new-channel.info" | translate }}</span>
|
||||
<div class="descriptionBox">
|
||||
<p>{{ 'add-new-channel.header2' | translate }}</p>
|
||||
<p>{{ "add-new-channel.header2" | translate }}</p>
|
||||
|
||||
<span>{{ 'add-new-channel.required' | translate }}</span>
|
||||
<span>{{ "add-new-channel.required" | translate }}</span>
|
||||
@if (chechIfChannelExist(channelName)) {
|
||||
<p class="warning">{{ 'add-new-channel.warning' | translate }}</p>
|
||||
<p class="warning">{{ "add-new-channel.warning" | translate }}</p>
|
||||
}
|
||||
<img
|
||||
class="hashtag"
|
||||
src="./assets/img/hashtag.svg"
|
||||
alt=""
|
||||
/>
|
||||
<img class="hashtag" src="./assets/img/hashtag.svg" alt="" />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
|
|
@ -45,9 +39,9 @@
|
|||
(keyup)="checkIfChannelNameIsValid(channelName)"
|
||||
/>
|
||||
<div class="descriptionBox">
|
||||
<p>{{ 'add-new-channel.description' | translate }}</p>
|
||||
<p>{{ "add-new-channel.description" | translate }}</p>
|
||||
|
||||
<span>{{ 'add-new-channel.optional' | translate }}</span>
|
||||
<span>{{ "add-new-channel.optional" | translate }}</span>
|
||||
</div>
|
||||
<textarea
|
||||
id=""
|
||||
|
|
@ -63,17 +57,17 @@
|
|||
[disabled]="!channelService.btnIsValid"
|
||||
[ngClass]="{
|
||||
disabledBtn: !channelService.btnIsValid,
|
||||
furterBtnClass: channelService.btnIsValid
|
||||
enableBtn: channelService.btnIsValid
|
||||
}"
|
||||
>
|
||||
{{ 'add-new-channel.create' | translate }}
|
||||
{{ "add-new-channel.create" | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
} @if (showNextWindow || showNextWindowMobile) {
|
||||
<div class="smalWhiteBox" (click)="toggleAddedUserBox()">
|
||||
<div class="smallWhiteBox" (click)="toggleAddedUserBox()">
|
||||
<div class="headerAddPeople">
|
||||
<h2> {{ 'add-new-channel.addPeople' | translate }}</h2>
|
||||
<h2>{{ "add-new-channel.addPeople" | translate }}</h2>
|
||||
<app-small-btn
|
||||
[imgSrc]="'closeIcon.svg'"
|
||||
[imgSize]="'16px'"
|
||||
|
|
@ -90,7 +84,11 @@
|
|||
alt=""
|
||||
(click)="toggleBtnFalse()"
|
||||
/>
|
||||
<p> {{ 'add-new-channel.addAll' | translate }} <span> {{ 'add-new-channel.devspace' | translate }}</span></p>
|
||||
<p>
|
||||
{{ "add-new-channel.addAll" | translate }} <span>
|
||||
{{ "add-new-channel.devspace" | translate }}</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<div class="positionSelectionBtn">
|
||||
<img
|
||||
|
|
@ -99,7 +97,7 @@
|
|||
}}"
|
||||
(click)="toggleBtnTrue()"
|
||||
/>
|
||||
<p> {{ 'add-new-channel.add' | translate }}</p>
|
||||
<p>{{ "add-new-channel.add" | translate }}</p>
|
||||
</div>
|
||||
<div class="addedUserBox" *ngIf="changeImg">
|
||||
<div
|
||||
|
|
@ -143,7 +141,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<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>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
padding: 32px;
|
||||
}
|
||||
|
||||
.posiotionHeader {
|
||||
.positionHeader {
|
||||
@include displayFlex($j: space-between);
|
||||
width: 100%;
|
||||
p {
|
||||
|
|
@ -93,7 +93,7 @@ textarea {
|
|||
font-weight: 400;
|
||||
padding-top: 6px;
|
||||
}
|
||||
.warning{
|
||||
.warning {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
padding-top: 6px;
|
||||
|
|
@ -116,7 +116,7 @@ textarea {
|
|||
.btnBox {
|
||||
width: 100%;
|
||||
@include displayFlex($j: flex-end);
|
||||
.furterBtnClass {
|
||||
.enableBtn {
|
||||
width: 120px;
|
||||
height: 48px;
|
||||
background-color: white;
|
||||
|
|
@ -133,7 +133,7 @@ textarea {
|
|||
}
|
||||
}
|
||||
|
||||
.smalWhiteBox {
|
||||
.smallWhiteBox {
|
||||
padding: 32px;
|
||||
width: 48vw;
|
||||
height: auto;
|
||||
|
|
@ -322,7 +322,7 @@ textarea {
|
|||
border-radius: 0;
|
||||
}
|
||||
|
||||
.smalWhiteBox {
|
||||
.smallWhiteBox {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import { SidebarDirectMessagesComponent } from './sidebar-direct-messages/sideba
|
|||
import { SmallBtnComponent } from '../../shared/components/small-btn/small-btn.component';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ChannleService } from '../../service/channle.service';
|
||||
import { SearchbarComponent } from './searchbar/searchbar.component';
|
||||
import { ToggleBooleanService } from '../../service/toggle-boolean.service';
|
||||
import { ChatService } from '../../service/chat.service';
|
||||
import { SharedService } from '../../service/shared.service';
|
||||
|
|
@ -19,7 +18,6 @@ import { SearchBarComponent } from '../../shared/components/header/search-bar/se
|
|||
SidebarDirectMessagesComponent,
|
||||
SmallBtnComponent,
|
||||
CommonModule,
|
||||
SearchbarComponent,
|
||||
SearchBarComponent,
|
||||
],
|
||||
templateUrl: './sidebar.component.html',
|
||||
|
|
|
|||
|
|
@ -28,18 +28,18 @@ import { SmallBtnComponent } from '../../../small-btn/small-btn.component';
|
|||
styleUrl: './edit-user-details.component.scss',
|
||||
})
|
||||
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;
|
||||
nameValueBoolean: boolean = false;
|
||||
emailValueBoolean: boolean = false;
|
||||
changedName: 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(
|
||||
public userService: UserService,
|
||||
|
|
|
|||
|
|
@ -18,12 +18,12 @@ import { SmallBtnComponent } from '../../small-btn/small-btn.component';
|
|||
styleUrl: './edit-user.component.scss',
|
||||
})
|
||||
export class EditUserComponent {
|
||||
@Input() showCurrentProfile!: boolean;
|
||||
@Output() testValueChange = new EventEmitter<boolean>();
|
||||
|
||||
isOnline = true;
|
||||
openProfil = false;
|
||||
openEditUserValue = false;
|
||||
@Input() showCurrentProfile!: boolean;
|
||||
|
||||
@Output() testValueChange = new EventEmitter<boolean>();
|
||||
|
||||
constructor(public userService: UserService) {}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
<div>
|
||||
<div class="rightSide">
|
||||
@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()">
|
||||
<img src="{{ i.avatar }}" class="profileImg" />
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
[ngClass]="{ dBlock: openMenu, dNone: !openMenu }"
|
||||
(click)="showSideMenu()"
|
||||
>
|
||||
<div class="whiteBox fontNunito">
|
||||
<div class="whiteBox">
|
||||
<p (click)="showProfile()" class="profilBtn">
|
||||
{{ "login-header.profil" | translate }}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
type="text"
|
||||
maxlength="24"
|
||||
placeholder="{{ 'search-bar.placeholder' | translate }}"
|
||||
class="fontNunito"
|
||||
[(ngModel)]="inputValue"
|
||||
(keyup)="filterAllInfo(inputValue)"
|
||||
/>
|
||||
|
|
@ -17,9 +16,9 @@
|
|||
>
|
||||
<!-----Search output------>
|
||||
@if (filteredUsers.length > 0 && inputValue != '') {
|
||||
<div class="contantBox">
|
||||
<h4>{{ 'search-bar-header.user' | translate }}:</h4>
|
||||
<div class="ansersBox">
|
||||
<div class="contentBox">
|
||||
<h4>{{ "search-bar-header.user" | translate }}:</h4>
|
||||
<div class="answersBox">
|
||||
@for (user of filteredUsers; track user) {
|
||||
<div
|
||||
class="userDiv"
|
||||
|
|
@ -43,9 +42,9 @@
|
|||
</div>
|
||||
</div>
|
||||
} @if (filteredChannels.length > 0 && inputValue != '') {
|
||||
<div class="contantBox">
|
||||
<h4>{{ 'search-bar-header.channels' | translate }}:</h4>
|
||||
<div class="ansersBox">
|
||||
<div class="contentBox">
|
||||
<h4>{{ "search-bar-header.channels" | translate }}:</h4>
|
||||
<div class="answersBox">
|
||||
@for (channel of filteredChannels; track channel) {
|
||||
<p
|
||||
class="channelName"
|
||||
|
|
@ -59,15 +58,15 @@
|
|||
</div>
|
||||
</div>
|
||||
} @if (filteredChats.length > 0 && inputValue != '') {
|
||||
<div class="contantBoxChats">
|
||||
<h4>{{ 'search-bar-header.thread' | translate }}:</h4>
|
||||
<div class="contentBoxChats">
|
||||
<h4>{{ "search-bar-header.thread" | translate }}:</h4>
|
||||
<div class="channelAnswers">
|
||||
@for (chat of filteredChats; track chat) {
|
||||
<div class="ansersBoxChats">
|
||||
<div class="answersBoxChats">
|
||||
<p class="threadNmae">[ {{ getChannel(chat.channelId) }} ]</p>
|
||||
<div class="threadContetntBox">
|
||||
<div class="threadContentBox">
|
||||
<p
|
||||
class="threadContetnt"
|
||||
class="threadContent"
|
||||
[innerHTML]="chat.message | highlight : inputValue"
|
||||
routerLink="/main/{{ chat.channelId }}"
|
||||
(click)="closeSecondaryChatAndSidebar()"
|
||||
|
|
@ -80,7 +79,7 @@
|
|||
} @if ((filteredUsers.length === 0 && inputValue != '') &&
|
||||
(filteredChannels.length === 0 && inputValue != '') && (filteredChats.length
|
||||
=== 0 && inputValue != '')) {
|
||||
<p class="threadContetnt">{{ "search-bar.errorMessage" | translate }}</p>
|
||||
<p class="threadContent">{{ "search-bar.errorMessage" | translate }}</p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -27,26 +27,26 @@
|
|||
background-color: white;
|
||||
box-shadow: rgb(79 98 117) 0px 20px 30px -10px;
|
||||
scrollbar-width: none;
|
||||
overflow: scroll;
|
||||
overflow: auto;
|
||||
-ms-overflow-style: none;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-direction: column;
|
||||
}
|
||||
.contantBox {
|
||||
.contentBox {
|
||||
@include displayFlex($j: space-between, $a: flex-start);
|
||||
width: 100%;
|
||||
h4 {
|
||||
width: 30%;
|
||||
}
|
||||
.ansersBox {
|
||||
.answersBox {
|
||||
@include displayFlex($a: flex-start, $g: 4px);
|
||||
flex-direction: column;
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.contantBoxChats {
|
||||
.contentBoxChats {
|
||||
@include displayFlex($j: space-between, $a: flex-start);
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
|
@ -54,15 +54,15 @@
|
|||
width: 100%;
|
||||
@include displayFlex($g: 4px);
|
||||
flex-direction: column;
|
||||
.ansersBoxChats {
|
||||
.answersBoxChats {
|
||||
width: 100%;
|
||||
@include displayFlex($j: space-between, $a: flex-start);
|
||||
.threadNmae {
|
||||
width: 30%;
|
||||
}
|
||||
.threadContetntBox {
|
||||
.threadContentBox {
|
||||
width: 70%;
|
||||
.threadContetnt {
|
||||
.threadContent {
|
||||
width: fit-content;
|
||||
padding: 4px;
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -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@dede.de" target="_blank" class="fontNunito">maxMüller@ffe.de</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button><img src="./assets/img/messageIcon.svg">{{ 'user.message' | translate }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue