clean code
This commit is contained in:
Chneemann
parent
14f222c484
commit
2ec5036348
20 changed files with 61 additions and 75 deletions
|
|
@ -17,7 +17,7 @@
|
|||
class="user"
|
||||
(click)="checkRoute([user]); closeSecondaryChatAndSidebar()"
|
||||
>
|
||||
<div class="positionImgs">
|
||||
<div class="positionImg">
|
||||
<img src="{{ user.avatar }}" class="avatarImg" />
|
||||
<img
|
||||
src="./assets/img/{{
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@ section {
|
|||
padding: 24px;
|
||||
@include displayFlex($g: 20px);
|
||||
flex-direction: column;
|
||||
|
||||
.positionHeader {
|
||||
@include displayFlex($j: space-between);
|
||||
font-size: 24px;
|
||||
|
|
@ -34,28 +33,23 @@ section {
|
|||
max-height: 300px;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
|
||||
.user {
|
||||
@include displayFlex($g: 12px);
|
||||
padding: 6px;
|
||||
cursor: pointer;
|
||||
transition: 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: #edeefe;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.positionImgs {
|
||||
.positionImg {
|
||||
@include displayFlex($a: flex-end);
|
||||
|
||||
.avatarImg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.onlineIcon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
<p>{{ "add-new-channel.header2" | translate }}</p>
|
||||
|
||||
<span>{{ "add-new-channel.required" | translate }}</span>
|
||||
@if (chechIfChannelExist(channelName)) {
|
||||
@if (checkIfChannelExist(channelName)) {
|
||||
<p class="warning">{{ "add-new-channel.warning" | translate }}</p>
|
||||
}
|
||||
<img class="hashtag" src="./assets/img/hashtag.svg" alt="" />
|
||||
|
|
@ -118,18 +118,18 @@
|
|||
</div>
|
||||
<input
|
||||
type="text"
|
||||
class="inputfieldStyle"
|
||||
class="inputFieldStyle"
|
||||
[(ngModel)]="userName"
|
||||
(keyup)="filterUsers(userName)"
|
||||
/>
|
||||
<div
|
||||
class="showSearchedUsersWindow"
|
||||
[ngClass]="{ dBlock: showExistenUsers, dNone: !showExistenUsers }"
|
||||
[ngClass]="{ dBlock: showExistedUsers, dNone: !showExistedUsers }"
|
||||
>
|
||||
<div class="positionOfAllUsersInBox">
|
||||
@for(user of getSearchedUser; track user){
|
||||
<div class="user" (click)="chooseUser(user)">
|
||||
<div class="positionImgs">
|
||||
<div class="positionImg">
|
||||
<img src="{{ user.avatar }}" class="avatarImg" />
|
||||
<img
|
||||
src="./assets/img/{{
|
||||
|
|
|
|||
|
|
@ -199,7 +199,7 @@ textarea {
|
|||
}
|
||||
}
|
||||
}
|
||||
.inputfieldStyle {
|
||||
.inputFieldStyle {
|
||||
width: auto;
|
||||
flex-grow: 1;
|
||||
outline: none;
|
||||
|
|
@ -277,7 +277,7 @@ textarea {
|
|||
background-color: #edeefe;
|
||||
border-radius: 25px;
|
||||
}
|
||||
.positionImgs {
|
||||
.positionImg {
|
||||
@include displayFlex($a: flex-end);
|
||||
.avatarImg {
|
||||
width: 40px;
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export class AddNewChannelComponent {
|
|||
currentDate: string = new Date().toISOString().split('T')[0];
|
||||
changeImg: boolean = false;
|
||||
userName: string = '';
|
||||
showExistenUsers: boolean = false;
|
||||
showExistedUsers: boolean = false;
|
||||
getSearchedUser: User[] = [];
|
||||
channelName: string = '';
|
||||
channelDescription: string = '';
|
||||
|
|
@ -90,7 +90,7 @@ export class AddNewChannelComponent {
|
|||
* @param userName The name of the user to filter.
|
||||
*/
|
||||
filterUsers(userName: string) {
|
||||
this.showExistenUsers = true;
|
||||
this.showExistedUsers = true;
|
||||
this.getSearchedUser = [];
|
||||
const searchedUser = userName.toLowerCase().trim();
|
||||
const filteredUsers = this.userService.getUsers().filter((user) => {
|
||||
|
|
@ -120,7 +120,7 @@ export class AddNewChannelComponent {
|
|||
console.log('User already selected!');
|
||||
}
|
||||
this.userName = '';
|
||||
this.showExistenUsers = false;
|
||||
this.showExistedUsers = false;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -129,14 +129,14 @@ export class AddNewChannelComponent {
|
|||
*/
|
||||
spliceCurrentUser(index: number) {
|
||||
this.getSelectedUsers.splice(index, 1);
|
||||
this.showExistenUsers = false;
|
||||
this.showExistedUsers = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggles the added user box.
|
||||
*/
|
||||
toggleAddedUserBox() {
|
||||
this.showExistenUsers = false;
|
||||
this.showExistedUsers = false;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -144,8 +144,8 @@ export class AddNewChannelComponent {
|
|||
* @param channelName The name of the channel to check.
|
||||
*/
|
||||
checkIfChannelNameIsValid(channelName: string) {
|
||||
const channelNameLenght = channelName.length;
|
||||
if (channelNameLenght >= 6 && !this.chechIfChannelExist(channelName)) {
|
||||
const channelNameLength = channelName.length;
|
||||
if (channelNameLength >= 6 && !this.checkIfChannelExist(channelName)) {
|
||||
this.channelService.btnIsValid = true;
|
||||
} else {
|
||||
this.channelService.btnIsValid = false;
|
||||
|
|
@ -153,11 +153,11 @@ export class AddNewChannelComponent {
|
|||
}
|
||||
|
||||
/**
|
||||
* Check if channel is allready existing.
|
||||
* Check if channel is already existing.
|
||||
* @param channelName
|
||||
* @returns
|
||||
*/
|
||||
chechIfChannelExist(channelName: string) {
|
||||
checkIfChannelExist(channelName: string) {
|
||||
const filterChannel = this.channelService.allChannels.some(
|
||||
(channel) => channel.name === channelName
|
||||
);
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
class="boxOfAllChannels"
|
||||
[ngClass]="{
|
||||
hideAllChannels: !minimizeChannels,
|
||||
showAllChanneld: minimizeChannels
|
||||
showAllChannels: minimizeChannels
|
||||
}"
|
||||
>
|
||||
@for (channel of getChannels(); track channel) {
|
||||
|
|
|
|||
|
|
@ -128,7 +128,7 @@ section {
|
|||
}
|
||||
}
|
||||
|
||||
.showAllChanneld {
|
||||
.showAllChannels {
|
||||
animation-name: slideIn;
|
||||
overflow: auto;
|
||||
transition: max-height 0.3s ease-in-out;
|
||||
|
|
@ -162,7 +162,7 @@ section {
|
|||
}
|
||||
|
||||
@media screen and (max-width: $RESPONSIVE_THRESHOLD_MOBILE380px) {
|
||||
.showAllChanneld {
|
||||
.showAllChannels {
|
||||
max-height: 16vh;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -255,7 +255,7 @@ export class loginService {
|
|||
* Retrieves the completion status of the introduction class.
|
||||
* @returns {boolean} True if the introduction is complete, false otherwise.
|
||||
*/
|
||||
getFinalclass(): boolean {
|
||||
getFinalClass(): boolean {
|
||||
return this.introCompleteStatus;
|
||||
}
|
||||
|
||||
|
|
@ -326,7 +326,7 @@ export class loginService {
|
|||
this.getUserIdInLocalStorage(this.currentUser);
|
||||
}
|
||||
|
||||
// -------------------- UserAddFunktions ------------------------------->
|
||||
// -------------------- UserAddFunctions ------------------------------->
|
||||
|
||||
/**
|
||||
* Updates the online status of the user in Firestore.
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ export class UserService implements OnDestroy {
|
|||
* Get current user's data.
|
||||
* @returns Array containing current user's data.
|
||||
*/
|
||||
getCurentUsers() {
|
||||
getCurrentUsers() {
|
||||
const filteredUser = this.getUsers().filter(
|
||||
(user) => user.id == this.getCurrentUserId()
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="grayBackground" (click)="closeEditUserWindow()"></div>
|
||||
@for(i of userService.getCurentUsers(); track i){
|
||||
@for(i of userService.getCurrentUsers(); track i){
|
||||
<div class="whiteBox">
|
||||
<form
|
||||
(ngSubmit)="saveNewUserData(contactForm)"
|
||||
|
|
|
|||
|
|
@ -28,8 +28,8 @@ import { SmallBtnComponent } from '../../../small-btn/small-btn.component';
|
|||
styleUrl: './edit-user-details.component.scss',
|
||||
})
|
||||
export class EditUserDetailsComponent {
|
||||
@Input() openEditUserValue!: boolean;
|
||||
@Input() showCurrentProfile!: boolean;
|
||||
@Input() openEditUserValue: boolean = false;
|
||||
@Input() showCurrentProfile: boolean = false;
|
||||
@Output() closeEditWindow = new EventEmitter<boolean>();
|
||||
@Output() saveUserData = new EventEmitter<boolean>();
|
||||
@ViewChild('inputName') inputName!: ElementRef;
|
||||
|
|
@ -98,22 +98,15 @@ export class EditUserDetailsComponent {
|
|||
|
||||
/**Separate the first ans lastname. */
|
||||
splitNameValue() {
|
||||
const fullname: string[] = this.changedName.split(' ');
|
||||
const newFirstName: string = fullname[0];
|
||||
let newLastName: string = fullname[1];
|
||||
if (fullname[2]) {
|
||||
newLastName += ' ' + fullname[2];
|
||||
const fullName: string[] = this.changedName.split(' ');
|
||||
const newFirstName: string = fullName[0];
|
||||
let newLastName: string = fullName[1];
|
||||
if (fullName[2]) {
|
||||
newLastName += ' ' + fullName[2];
|
||||
}
|
||||
return [newFirstName, newLastName];
|
||||
}
|
||||
|
||||
/** Get the email value. */
|
||||
chechEmailValue() {
|
||||
if (this.changedEmail == '') {
|
||||
this.changedEmail = this.userService.emailValue;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if the user name is valid.
|
||||
* @param nameValue The value of the user's name.
|
||||
|
|
@ -122,15 +115,15 @@ export class EditUserDetailsComponent {
|
|||
if (nameValue.trim() === '') {
|
||||
this.nameValueBoolean = false;
|
||||
} else {
|
||||
const channelNameLenght = nameValue.length;
|
||||
if (channelNameLenght >= 3) {
|
||||
const channelNameLength = nameValue.length;
|
||||
if (channelNameLength >= 3) {
|
||||
this.nameValueBoolean = true;
|
||||
this.changedName = nameValue;
|
||||
} else {
|
||||
this.nameValueBoolean = false;
|
||||
}
|
||||
}
|
||||
this.chackSaveBtnName();
|
||||
this.checkSaveBtnName();
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -155,7 +148,7 @@ export class EditUserDetailsComponent {
|
|||
/**
|
||||
* Checks if the save button is valid.
|
||||
*/
|
||||
chackSaveBtnName() {
|
||||
checkSaveBtnName() {
|
||||
if (this.nameValueBoolean) {
|
||||
this.channelService.saveEditBtnIsValid = true;
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="grayBackground" (click)="closeCurrentProfile()"></div>
|
||||
@for(i of userService.getCurentUsers(); track i){
|
||||
@for(i of userService.getCurrentUsers(); track i){
|
||||
<div class="whiteBox">
|
||||
<div class="boxHeader">
|
||||
<p>Profil</p>
|
||||
|
|
|
|||
|
|
@ -18,12 +18,12 @@ import { SmallBtnComponent } from '../../small-btn/small-btn.component';
|
|||
styleUrl: './edit-user.component.scss',
|
||||
})
|
||||
export class EditUserComponent {
|
||||
@Input() showCurrentProfile!: boolean;
|
||||
@Input() showCurrentProfile: boolean = false;
|
||||
@Output() testValueChange = new EventEmitter<boolean>();
|
||||
|
||||
isOnline = true;
|
||||
openProfil = false;
|
||||
openEditUserValue = false;
|
||||
isOnline: boolean = true;
|
||||
openProfil: boolean = false;
|
||||
openEditUserValue: boolean = false;
|
||||
|
||||
constructor(public userService: UserService) {}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
}
|
||||
<div>
|
||||
<div class="rightSide">
|
||||
@for(i of userService.getCurentUsers(); track i){
|
||||
@for(i of userService.getCurrentUsers(); track i){
|
||||
<p>{{ i.firstName }} {{ i.lastName }}</p>
|
||||
|
||||
<div class="img" (click)="showSideMenu()">
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ header {
|
|||
|
||||
.leftSide {
|
||||
@include displayFlex($j: start, $g: 20px);
|
||||
width: 20vw;
|
||||
width: 30vw;
|
||||
.homeIcon {
|
||||
width: 242px;
|
||||
height: 70px;
|
||||
|
|
@ -48,7 +48,7 @@ header {
|
|||
}
|
||||
|
||||
.rightSide {
|
||||
width: 20vw;
|
||||
width: 30vw;
|
||||
@include displayFlex($j: end, $g: 20px);
|
||||
p {
|
||||
font-size: 28px;
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@
|
|||
<div class="channelAnswers">
|
||||
@for (chat of filteredChats; track chat) {
|
||||
<div class="answersBoxChats">
|
||||
<p class="threadNmae">[ {{ getChannel(chat.channelId) }} ]</p>
|
||||
<p class="threadName">[ {{ getChannel(chat.channelId) }} ]</p>
|
||||
<div class="threadContentBox">
|
||||
<p
|
||||
class="threadContent"
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@
|
|||
.answersBoxChats {
|
||||
width: 100%;
|
||||
@include displayFlex($j: space-between, $a: flex-start);
|
||||
.threadNmae {
|
||||
.threadName {
|
||||
width: 30%;
|
||||
}
|
||||
.threadContentBox {
|
||||
|
|
@ -116,13 +116,13 @@
|
|||
}
|
||||
|
||||
.showSearchWindow {
|
||||
animation: shwoSW 0.3s ease-in-out;
|
||||
animation: showSW 0.3s ease-in-out;
|
||||
width: calc(40vw - 42px);
|
||||
max-height: 40vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@keyframes shwoSW {
|
||||
@keyframes showSW {
|
||||
from {
|
||||
max-height: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,15 +7,13 @@
|
|||
<div class="header">
|
||||
<div
|
||||
[class.logo]="animationStart && !this.animationsBlock"
|
||||
[class.logoEndPosition]="animationToEndPosiotion && !this.animationsBlock"
|
||||
[class.final-div-position]="loginService.getFinalclass()"
|
||||
[class.logoEndPosition]="animationToEndPosition && !this.animationsBlock"
|
||||
[class.final-div-position]="loginService.getFinalClass()"
|
||||
>
|
||||
<img
|
||||
class="mobileImg"
|
||||
[class.final-img-position]="loginService.getFinalclass()"
|
||||
[class.imgEndPosiotion]="
|
||||
animationToEndPosiotion && !this.animationsBlock
|
||||
"
|
||||
[class.final-img-position]="loginService.getFinalClass()"
|
||||
[class.imgEndPosition]="animationToEndPosition && !this.animationsBlock"
|
||||
src="./assets/img/login/logo-animation.svg"
|
||||
/>
|
||||
<div
|
||||
|
|
@ -25,7 +23,7 @@
|
|||
>
|
||||
<span
|
||||
[class.logo-text-span]="animationStart && !this.animationsBlock"
|
||||
[class.final-span-position]="loginService.getFinalclass()"
|
||||
[class.final-span-position]="loginService.getFinalClass()"
|
||||
>DABubble</span
|
||||
>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -112,12 +112,12 @@
|
|||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: animationToEndPosiotion 0.5s ease-in forwards 1s;
|
||||
animation: animationToEndPosition 0.5s ease-in forwards 1s;
|
||||
background-size: contain;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.imgEndPosiotion {
|
||||
.imgEndPosition {
|
||||
animation: imgSize 0.5s ease-in forwards 1s;
|
||||
}
|
||||
|
||||
|
|
@ -136,7 +136,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes animationToEndPosiotion {
|
||||
@keyframes animationToEndPosition {
|
||||
0% {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
|
@ -237,10 +237,10 @@
|
|||
}
|
||||
.logoEndPosition {
|
||||
animation: none;
|
||||
animation: animationToEndPosiotionMobile 0.5s ease-in forwards 1s;
|
||||
animation: animationToEndPositionMobile 0.5s ease-in forwards 1s;
|
||||
}
|
||||
|
||||
@keyframes animationToEndPosiotionMobile {
|
||||
@keyframes animationToEndPositionMobile {
|
||||
0% {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
|
@ -276,7 +276,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.imgEndPosiotion {
|
||||
.imgEndPosition {
|
||||
animation: none;
|
||||
animation: imgSizeMobile 0.5s ease-in forwards 1s;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,11 +23,12 @@ import { SharedService } from '../../../../service/shared.service';
|
|||
export class StartHeaderComponent {
|
||||
@Input() introCompleteStatus: boolean = false;
|
||||
@Input() display: string = '';
|
||||
|
||||
animationStart: boolean = false;
|
||||
animationLogo: boolean = false;
|
||||
d_none: boolean = false;
|
||||
animationBackground: boolean = false;
|
||||
animationToEndPosiotion: boolean = false;
|
||||
animationToEndPosition: boolean = false;
|
||||
animationsBlock: boolean = false;
|
||||
viewWidth: number = 0;
|
||||
|
||||
|
|
@ -60,7 +61,7 @@ export class StartHeaderComponent {
|
|||
setTimeout(() => {
|
||||
this.animationBackground = true;
|
||||
}, 1000);
|
||||
this.animationToEndPosiotion = true;
|
||||
this.animationToEndPosition = true;
|
||||
this.loginService.setAnimationState(true);
|
||||
setTimeout(() => {
|
||||
this.d_none = true;
|
||||
|
|
|
|||
Loading…
Reference in a new issue