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="menu" (click)="closeMenu()">
|
||||||
<div class="whiteBox" (click)="preventCloseWhiteBox($event)">
|
<div class="whiteBox" (click)="preventCloseWhiteBox($event)">
|
||||||
@for (channel of getChannelName(currentChannel); track channel) {
|
<div class="content">
|
||||||
<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">
|
|
||||||
@for (channel of getChannelName(currentChannel); track channel) {
|
@for (channel of getChannelName(currentChannel); track channel) {
|
||||||
<div class="contentHeadline">
|
<div class="headerBox">
|
||||||
<p>{{ "channel-information.header" | translate }}</p>
|
<div class="headline">
|
||||||
@if (!openEditNameInput) {
|
<img src="./assets/img/hashtag.svg" alt="" />
|
||||||
<!--check if user is creator-->
|
<p>{{ channel.name }}</p>
|
||||||
@if(checkCreator(currentChannel)){
|
</div>
|
||||||
<app-small-btn
|
<div class="closeBtn" (click)="closeMenu()">
|
||||||
[imgSrc]="'pencil.svg'"
|
<img src="./assets/img/closeIcon.svg" alt="" />
|
||||||
[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>
|
</div>
|
||||||
}}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
}
|
||||||
<app-open-send-prv-message-window
|
<div class="contentChannel">
|
||||||
[ngClass]="{
|
@for (channel of getChannelName(currentChannel); track channel) {
|
||||||
dBlock: openUserWindowBoolean,
|
<div class="contentHeadline">
|
||||||
dNone: !openUserWindowBoolean
|
<p>{{ "channel-information.header" | translate }}</p>
|
||||||
}"
|
@if (!openEditNameInput) {
|
||||||
[user]="user"
|
<!--check if user is creator-->
|
||||||
[openUserWindowBoolean]="openUserWindowBoolean"
|
@if(checkCreator(currentChannel)){
|
||||||
(closeUserWindow)="changeOpenUserWindowBoolean($event)"
|
<app-small-btn
|
||||||
></app-open-send-prv-message-window>
|
[imgSrc]="'pencil.svg'"
|
||||||
<div class="leaveChannel">
|
[imgSize]="'18px'"
|
||||||
<button
|
[btnSize]="'32px'"
|
||||||
[disabled]="openEditNameInput || openEditNameDescription"
|
[btnBgHoverColor]="'#edeefe'"
|
||||||
(click)="leaveChannel(currentChannel, $event)"
|
(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 }}
|
<div class="contentHeadline">
|
||||||
</button>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -20,6 +20,10 @@
|
||||||
left: 460px;
|
left: 460px;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
overflow: none;
|
overflow: none;
|
||||||
|
.content {
|
||||||
|
overflow: auto;
|
||||||
|
max-height: 580px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue