Update overlay design for improved appearance
This commit is contained in:
Chneemann
parent
5e826483f7
commit
ff7e7c8810
2 changed files with 167 additions and 161 deletions
|
|
@ -1,170 +1,172 @@
|
|||
<div class="menu" (click)="closeMenu()">
|
||||
<div class="whiteBox" (click)="preventCloseWhiteBox($event)">
|
||||
@for (channel of getChannelName(currentChannel); track channel) {
|
||||
<div class="headerBox">
|
||||
<div class="headline">
|
||||
<img src="./assets/img/hashtag.svg" alt="" />
|
||||
<p>{{ channel.name }}</p>
|
||||
</div>
|
||||
<div class="closeBtn" (click)="closeMenu()">
|
||||
<img src="./assets/img/closeIcon.svg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div class="contentChannel">
|
||||
<div class="content">
|
||||
@for (channel of getChannelName(currentChannel); track channel) {
|
||||
<div class="contentHeadline">
|
||||
<p>{{ "channel-information.header" | translate }}</p>
|
||||
@if (!openEditNameInput) {
|
||||
<!--check if user is creator-->
|
||||
@if(checkCreator(currentChannel)){
|
||||
<app-small-btn
|
||||
[imgSrc]="'pencil.svg'"
|
||||
[imgSize]="'18px'"
|
||||
[btnSize]="'32px'"
|
||||
[btnBgHoverColor]="'#edeefe'"
|
||||
(click)="editChannelName($event)"
|
||||
></app-small-btn>
|
||||
} @else {
|
||||
<img class="disableEdit" src="./assets/img/pencil.svg" alt="" />
|
||||
} } @else {
|
||||
<app-small-btn
|
||||
[imgSrc]="'save.svg'"
|
||||
[imgSize]="'18px'"
|
||||
[btnSize]="'32px'"
|
||||
[btnBgHoverColor]="'#edeefe'"
|
||||
(click)="saveEditChannelName($event)"
|
||||
></app-small-btn>
|
||||
}
|
||||
</div>
|
||||
@if (!openEditNameInput) {
|
||||
<div class="channelName">
|
||||
<img src="./assets/img/hashtag.svg" alt="" />
|
||||
<p>{{ channel.name }}</p>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="channelName">
|
||||
<img src="./assets/img/hashtag.svg" alt="" />
|
||||
<input
|
||||
type="text"
|
||||
[(ngModel)]="nameValue"
|
||||
class="inputName"
|
||||
id="inputName"
|
||||
name="inputName"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
} }
|
||||
</div>
|
||||
<div class="contentChannel">
|
||||
@for (channel of getChannelName(currentChannel); track channel) {
|
||||
|
||||
<div class="contentHeadline">
|
||||
<p>{{ "channel-information.channelInfo" | translate }}</p>
|
||||
@if (!openEditNameDescription) {
|
||||
<!--check if user is creator-->
|
||||
@if(checkCreator(currentChannel)){
|
||||
<app-small-btn
|
||||
[imgSrc]="'pencil.svg'"
|
||||
[imgSize]="'18px'"
|
||||
[btnSize]="'32px'"
|
||||
[btnBgHoverColor]="'#edeefe'"
|
||||
(click)="editChannelDescription($event)"
|
||||
></app-small-btn>
|
||||
} @else {
|
||||
<img class="disableEdit" src="./assets/img/pencil.svg" alt="" />
|
||||
} } @else {
|
||||
<app-small-btn
|
||||
[imgSrc]="'save.svg'"
|
||||
[imgSize]="'18px'"
|
||||
[btnSize]="'32px'"
|
||||
[btnBgHoverColor]="'#edeefe'"
|
||||
(click)="saveEditChannelDescription($event)"
|
||||
></app-small-btn>
|
||||
}
|
||||
</div>
|
||||
@if (!openEditNameDescription) {
|
||||
<div class="channelDescription">
|
||||
@if (channel.description !== "") {
|
||||
<p>{{ channel.description }}</p>
|
||||
} @else {
|
||||
<p>{{ "channel-information.channelInfo2" | translate }}</p>
|
||||
}
|
||||
</div>
|
||||
} @else {
|
||||
<div class="channelName">
|
||||
<textarea
|
||||
cols="30"
|
||||
rows="10"
|
||||
[(ngModel)]="descriptionValue"
|
||||
class="textareaDescription"
|
||||
></textarea>
|
||||
</div>
|
||||
}
|
||||
<div class="line"></div>
|
||||
<div class="contentHeadline">
|
||||
<p>{{ "channel-information.channelMadeBy" | translate }}</p>
|
||||
</div>
|
||||
<div class="channelCreator">
|
||||
@if(channel.creator == "Admin") {
|
||||
<p class="creatorName">Admin</p>
|
||||
} @else { @for (user of getChatUsers(channel.creator); track user) {
|
||||
<p class="creatorName">{{ user.firstName }} {{ user.lastName }}</p>
|
||||
} } @if(!checkCreator(currentChannel)){
|
||||
<p class="warningPTag">
|
||||
{{ "channel-information.channelErrorText" | translate }}
|
||||
</p>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div
|
||||
class="contentChannelMembers"
|
||||
[ngStyle]="{
|
||||
display: viewWidth >= RESPONSIVE_THRESHOLD_MOBILE ? 'none' : ''
|
||||
}"
|
||||
>
|
||||
<div class="contentHeadline">
|
||||
<p>{{ "channel-information.members" | translate }}</p>
|
||||
</div>
|
||||
<div class="allUsers">
|
||||
@for(allMembers of getAllChannelMembers(currentChannel)[0].addedUser;
|
||||
track allMembers) { @for (user of getChatUsers(allMembers); track user)
|
||||
{
|
||||
<div class="user" (click)="openUserWindow(user)">
|
||||
<div class="imgBox">
|
||||
<img src="{{ user.avatar }}" class="userImg" />
|
||||
<img
|
||||
src="./assets/img/{{
|
||||
user.status ? 'onlineRing.svg' : 'offlineRing.svg'
|
||||
}}"
|
||||
class="onlineIcon"
|
||||
/>
|
||||
</div>
|
||||
<p>
|
||||
{{ user.firstName }} {{ user.lastName }} @if (user.id ==
|
||||
userService.getCurrentUserId()) { (You) }
|
||||
</p>
|
||||
<div class="headerBox">
|
||||
<div class="headline">
|
||||
<img src="./assets/img/hashtag.svg" alt="" />
|
||||
<p>{{ channel.name }}</p>
|
||||
</div>
|
||||
<div class="closeBtn" (click)="closeMenu()">
|
||||
<img src="./assets/img/closeIcon.svg" alt="" />
|
||||
</div>
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<app-open-send-prv-message-window
|
||||
[ngClass]="{
|
||||
dBlock: openUserWindowBoolean,
|
||||
dNone: !openUserWindowBoolean
|
||||
}"
|
||||
[user]="user"
|
||||
[openUserWindowBoolean]="openUserWindowBoolean"
|
||||
(closeUserWindow)="changeOpenUserWindowBoolean($event)"
|
||||
></app-open-send-prv-message-window>
|
||||
<div class="leaveChannel">
|
||||
<button
|
||||
[disabled]="openEditNameInput || openEditNameDescription"
|
||||
(click)="leaveChannel(currentChannel, $event)"
|
||||
}
|
||||
<div class="contentChannel">
|
||||
@for (channel of getChannelName(currentChannel); track channel) {
|
||||
<div class="contentHeadline">
|
||||
<p>{{ "channel-information.header" | translate }}</p>
|
||||
@if (!openEditNameInput) {
|
||||
<!--check if user is creator-->
|
||||
@if(checkCreator(currentChannel)){
|
||||
<app-small-btn
|
||||
[imgSrc]="'pencil.svg'"
|
||||
[imgSize]="'18px'"
|
||||
[btnSize]="'32px'"
|
||||
[btnBgHoverColor]="'#edeefe'"
|
||||
(click)="editChannelName($event)"
|
||||
></app-small-btn>
|
||||
} @else {
|
||||
<img class="disableEdit" src="./assets/img/pencil.svg" alt="" />
|
||||
} } @else {
|
||||
<app-small-btn
|
||||
[imgSrc]="'save.svg'"
|
||||
[imgSize]="'18px'"
|
||||
[btnSize]="'32px'"
|
||||
[btnBgHoverColor]="'#edeefe'"
|
||||
(click)="saveEditChannelName($event)"
|
||||
></app-small-btn>
|
||||
}
|
||||
</div>
|
||||
@if (!openEditNameInput) {
|
||||
<div class="channelName">
|
||||
<img src="./assets/img/hashtag.svg" alt="" />
|
||||
<p>{{ channel.name }}</p>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="channelName">
|
||||
<img src="./assets/img/hashtag.svg" alt="" />
|
||||
<input
|
||||
type="text"
|
||||
[(ngModel)]="nameValue"
|
||||
class="inputName"
|
||||
id="inputName"
|
||||
name="inputName"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
} }
|
||||
</div>
|
||||
<div class="contentChannel">
|
||||
@for (channel of getChannelName(currentChannel); track channel) {
|
||||
|
||||
<div class="contentHeadline">
|
||||
<p>{{ "channel-information.channelInfo" | translate }}</p>
|
||||
@if (!openEditNameDescription) {
|
||||
<!--check if user is creator-->
|
||||
@if(checkCreator(currentChannel)){
|
||||
<app-small-btn
|
||||
[imgSrc]="'pencil.svg'"
|
||||
[imgSize]="'18px'"
|
||||
[btnSize]="'32px'"
|
||||
[btnBgHoverColor]="'#edeefe'"
|
||||
(click)="editChannelDescription($event)"
|
||||
></app-small-btn>
|
||||
} @else {
|
||||
<img class="disableEdit" src="./assets/img/pencil.svg" alt="" />
|
||||
} } @else {
|
||||
<app-small-btn
|
||||
[imgSrc]="'save.svg'"
|
||||
[imgSize]="'18px'"
|
||||
[btnSize]="'32px'"
|
||||
[btnBgHoverColor]="'#edeefe'"
|
||||
(click)="saveEditChannelDescription($event)"
|
||||
></app-small-btn>
|
||||
}
|
||||
</div>
|
||||
@if (!openEditNameDescription) {
|
||||
<div class="channelDescription">
|
||||
@if (channel.description !== "") {
|
||||
<p>{{ channel.description }}</p>
|
||||
} @else {
|
||||
<p>{{ "channel-information.channelInfo2" | translate }}</p>
|
||||
}
|
||||
</div>
|
||||
} @else {
|
||||
<div class="channelName">
|
||||
<textarea
|
||||
cols="30"
|
||||
rows="10"
|
||||
[(ngModel)]="descriptionValue"
|
||||
class="textareaDescription"
|
||||
></textarea>
|
||||
</div>
|
||||
}
|
||||
<div class="line"></div>
|
||||
<div class="contentHeadline">
|
||||
<p>{{ "channel-information.channelMadeBy" | translate }}</p>
|
||||
</div>
|
||||
<div class="channelCreator">
|
||||
@if(channel.creator == "Admin") {
|
||||
<p class="creatorName">Admin</p>
|
||||
} @else { @for (user of getChatUsers(channel.creator); track user) {
|
||||
<p class="creatorName">{{ user.firstName }} {{ user.lastName }}</p>
|
||||
} } @if(!checkCreator(currentChannel)){
|
||||
<p class="warningPTag">
|
||||
{{ "channel-information.channelErrorText" | translate }}
|
||||
</p>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div
|
||||
class="contentChannelMembers"
|
||||
[ngStyle]="{
|
||||
display: viewWidth >= RESPONSIVE_THRESHOLD_MOBILE ? 'none' : ''
|
||||
}"
|
||||
>
|
||||
{{ "channel-information.leave" | translate }}
|
||||
</button>
|
||||
<div class="contentHeadline">
|
||||
<p>{{ "channel-information.members" | translate }}</p>
|
||||
</div>
|
||||
<div class="allUsers">
|
||||
@for(allMembers of getAllChannelMembers(currentChannel)[0].addedUser;
|
||||
track allMembers) { @for (user of getChatUsers(allMembers); track
|
||||
user) {
|
||||
<div class="user" (click)="openUserWindow(user)">
|
||||
<div class="imgBox">
|
||||
<img src="{{ user.avatar }}" class="userImg" />
|
||||
<img
|
||||
src="./assets/img/{{
|
||||
user.status ? 'onlineRing.svg' : 'offlineRing.svg'
|
||||
}}"
|
||||
class="onlineIcon"
|
||||
/>
|
||||
</div>
|
||||
<p>
|
||||
{{ user.firstName }} {{ user.lastName }} @if (user.id ==
|
||||
userService.getCurrentUserId()) { (You) }
|
||||
</p>
|
||||
</div>
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<app-open-send-prv-message-window
|
||||
[ngClass]="{
|
||||
dBlock: openUserWindowBoolean,
|
||||
dNone: !openUserWindowBoolean
|
||||
}"
|
||||
[user]="user"
|
||||
[openUserWindowBoolean]="openUserWindowBoolean"
|
||||
(closeUserWindow)="changeOpenUserWindowBoolean($event)"
|
||||
></app-open-send-prv-message-window>
|
||||
<div class="leaveChannel">
|
||||
<button
|
||||
[disabled]="openEditNameInput || openEditNameDescription"
|
||||
(click)="leaveChannel(currentChannel, $event)"
|
||||
>
|
||||
{{ "channel-information.leave" | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,6 +20,10 @@
|
|||
left: 460px;
|
||||
height: fit-content;
|
||||
overflow: none;
|
||||
.content {
|
||||
overflow: auto;
|
||||
max-height: 580px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue