Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Communication: Adjust message container height and send button #10361

Merged
merged 7 commits into from
Feb 20, 2025
Merged

Communication: Adjust message container height and send button #10361

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a7693bd
keep textfield at th bottom and move send button into textfield
rabeatwork Feb 7, 2025
49e9858
adjust margins
rabeatwork Feb 7, 2025
ee3d319
change announcement
rabeatwork Feb 7, 2025
040ff65
clean up
rabeatwork Feb 18, 2025
6bd8041
implement feedback from Aniruddh and Codacy
rabeatwork Feb 18, 2025
dfe99dc
Fix playwright tests
rabeatwork Feb 19, 2025
6a36259
change inputs to signal inputs
rabeatwork Feb 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ...erview/course-conversations/layout/conversation-header/conversation-header.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ <h4 class="pointer d-inline-block rounded py-2 info mb-0" (click)="openConversat
@if (activeConversationAsChannel.tutorialGroupId && activeConversationAsChannel.tutorialGroupTitle) {
<div class="p-2">
<a
class="btn btn-info"
class="btn btn-info btn-sm"
[routerLink]="['/courses', course.id, 'tutorial-groups', activeConversationAsChannel.tutorialGroupId]"
role="button"
jhiTranslate="artemisApp.entities.tutorialGroup.channelReverse"
Expand Down
226 changes: 112 additions & 114 deletions ...ew/course-conversations/layout/conversation-messages/conversation-messages.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,122 +1,108 @@
@if (course) {
<div class="py-3 pt-0 justify-content-center conversation-messages">
<div class="justify-content-center">
<div class="justify-content-center px-3 py-0">
<!-- search bar -->
@if (!searchbarCollapsed) {
<div class="input-group ps-0" [class.search-active]="!!searchText">
<span class="input-group-text">
<fa-icon [icon]="faSearch" size="sm" />
<span [hidden]="true" id="inputLabel" jhiTranslate="artemisApp.conversationsLayout.conversationMessages.searchLabel"></span>
</span>
<input
id="searchInput"
aria-labelledby="inputLabel"
aria-describedby="searchResult"
#searchInput
(input)="onSearchQueryInput($event)"
class="form-control"
type="text"
placeholder="{{ 'artemisApp.conversationsLayout.conversationMessages.searchBarPlaceholder' | artemisTranslate }}"
/>
@if (!!searchText) {
<button
class="btn btn-outline-secondary border-end-0 border-start-0"
type="button"
(click)="clearSearchInput()"
aria-labelledby="clearSearchLabel"
id="clearSearchButton"
>
<span id="clearSearchLabel" [hidden]="true" jhiTranslate="artemisApp.conversationsLayout.conversationMessages.clearSearch"></span>
<fa-icon [icon]="faTimes" size="xs" />
</button>
}
<span class="input-group-text" [hidden]="!searchText" id="searchResult">
@switch (totalNumberOfPosts) {
@case (0) {
<span jhiTranslate="artemisApp.conversationsLayout.conversationMessages.searchResultsNone"></span>
}
@case (1) {
<span jhiTranslate="artemisApp.conversationsLayout.conversationMessages.searchResultsSingle"></span>
}
@default {
<span
jhiTranslate="artemisApp.conversationsLayout.conversationMessages.searchResultsMultiple"
[translateValues]="{ count: totalNumberOfPosts }"
></span>
}
<div class="justify-content-center conversation-messages">
<div class="justify-content-center px-3">
<!-- search bar -->
@if (!searchbarCollapsed) {
<div class="input-group channel-search" [class.search-active]="!!searchText">
<span class="input-group-text">
<fa-icon [icon]="faSearch" size="sm" />
<span [hidden]="true" id="inputLabel" jhiTranslate="artemisApp.conversationsLayout.conversationMessages.searchLabel"></span>
</span>
<input
id="searchInput"
aria-labelledby="inputLabel"
aria-describedby="searchResult"
#searchInput
(input)="onSearchQueryInput($event)"
class="form-control"
type="text"
placeholder="{{ 'artemisApp.conversationsLayout.conversationMessages.searchBarPlaceholder' | artemisTranslate }}"
/>
@if (!!searchText) {
<button
class="btn btn-outline-secondary border-end-0 border-start-0"
type="button"
(click)="clearSearchInput()"
aria-labelledby="clearSearchLabel"
id="clearSearchButton"
>
<span id="clearSearchLabel" [hidden]="true" jhiTranslate="artemisApp.conversationsLayout.conversationMessages.clearSearch"></span>
<fa-icon [icon]="faTimes" size="xs" />
</button>
}
<span class="input-group-text" [hidden]="!searchText" id="searchResult">
@switch (totalNumberOfPosts) {
@case (0) {
<span jhiTranslate="artemisApp.conversationsLayout.conversationMessages.searchResultsNone"></span>
}
</span>
</div>
}
</div>
<div class="mt-3">
<!-- loading messages -->
@if (isFetchingPosts) {
<div class="envelope">
<fa-icon size="3x" [icon]="faCircleNotch" animation="spin" />
</div>
}
<!-- no message exist -->
@if (!isFetchingPosts && (posts.length === 0 || !_activeConversation)) {
<div class="envelope">
<fa-icon size="5x" [icon]="faEnvelope" />
</div>
}
<!-- list of messages -->
<div
id="scrollableDiv"
#container
[ngClass]="{
'posting-infinite-scroll-container': posts.length !== 0,
'content-height-dev': contentHeightDev,
'is-fetching-posts': isFetchingPosts,
'hide-input-full': isHiddenInputFull,
'hide-input': isHiddenInputWithCallToAction,
}"
infinite-scroll
class="conversation-messages-message-list position-relative"
[scrollWindow]="false"
(scrolledUp)="fetchNextPage()"
>
<!-- list of all top level posts -->
<!-- answers are opened in the thread sidebar -->
@for (group of groupedPosts; track postsGroupTrackByFn($index, group)) {
<div class="message-group">
@for (post of group.posts; track postsTrackByFn($index, post)) {
<div class="post-item">
<jhi-posting-thread
#postingThread
[lastReadDate]="_activeConversation?.lastReadDate"
[hasChannelModerationRights]="!!getAsChannel(_activeConversation)?.hasChannelModerationRights"
[id]="'item-' + post.id"
[post]="post"
[showAnswers]="false"
[readOnlyMode]="!!getAsChannel(_activeConversation)?.isArchived"
[isCommunicationPage]="true"
(openThread)="setPostForThread($event)"
[isConsecutive]="post.isConsecutive || false"
/>
</div>
@case (1) {
<span jhiTranslate="artemisApp.conversationsLayout.conversationMessages.searchResultsSingle"></span>
}
</div>
}

@if (_activeConversation && newPost && canCreateNewMessageInConversation(_activeConversation) && isMobile) {
<div class="px-3">
@if (getAsChannel(_activeConversation)?.isAnnouncementChannel) {
<div class="pt-2">
<button class="btn btn-md btn-primary" (click)="createEditModal.open()" jhiTranslate="artemisApp.metis.newAnnouncement"></button>
<jhi-post-create-edit-modal #createEditModal [posting]="newPost!" [isCommunicationPage]="true" (onCreate)="handleNewMessageCreated()" />
</div>
} @else {
<jhi-message-inline-input class="message-input" [posting]="newPost!" (onCreate)="handleNewMessageCreated()" />
@default {
<span
jhiTranslate="artemisApp.conversationsLayout.conversationMessages.searchResultsMultiple"
[translateValues]="{ count: totalNumberOfPosts }"
></span>
}
</div>
}
}
</span>
</div>
}
</div>
<div class="channel-content">
<!-- loading messages -->
@if (isFetchingPosts) {
<div class="envelope">
<fa-icon size="3x" [icon]="faCircleNotch" animation="spin" />
</div>
@if (_activeConversation && newPost && canCreateNewMessageInConversation(_activeConversation) && !isMobile) {
<div class="d-none d-sm-block px-3">
}
<!-- no message exist -->
@if (!isFetchingPosts && (posts.length === 0 || !_activeConversation)) {
<div class="envelope">
<fa-icon size="5x" [icon]="faEnvelope" />
</div>
}
<!-- list of messages -->
<div
id="scrollableDiv"
#container
[ngClass]="{
'posting-infinite-scroll-container': posts.length !== 0,
'content-height-dev': contentHeightDev,
'is-fetching-posts': isFetchingPosts,
'hide-input-full': isHiddenInputFull,
'hide-input': isHiddenInputWithCallToAction,
}"
infinite-scroll
class="conversation-messages-message-list position-relative"
[scrollWindow]="false"
(scrolledUp)="fetchNextPage()"
>
<!-- list of all top level posts -->
<!-- answers are opened in the thread sidebar -->
@for (group of groupedPosts; track postsGroupTrackByFn($index, group)) {
<div class="message-group">
@for (post of group.posts; track postsTrackByFn($index, post)) {
<div class="post-item">
<jhi-posting-thread
#postingThread
[lastReadDate]="_activeConversation?.lastReadDate"
[hasChannelModerationRights]="!!getAsChannel(_activeConversation)?.hasChannelModerationRights"
[id]="'item-' + post.id"
[post]="post"
[showAnswers]="false"
[readOnlyMode]="!!getAsChannel(_activeConversation)?.isArchived"
[isCommunicationPage]="true"
(openThread)="setPostForThread($event)"
[isConsecutive]="post.isConsecutive || false"
/>
</div>
}
</div>
}

@if (_activeConversation && newPost && canCreateNewMessageInConversation(_activeConversation) && isMobile) {
<div class="px-3">
@if (getAsChannel(_activeConversation)?.isAnnouncementChannel) {
<div class="pt-2">
<button class="btn btn-md btn-primary" (click)="createEditModal.open()" jhiTranslate="artemisApp.metis.newAnnouncement"></button>
Expand All @@ -128,6 +114,18 @@
</div>
}
</div>
@if (_activeConversation && newPost && canCreateNewMessageInConversation(_activeConversation) && !isMobile) {
<div class="d-none d-sm-block px-3">
@if (getAsChannel(_activeConversation)?.isAnnouncementChannel) {
<div class="pt-2">
<button class="btn btn-md btn-primary" (click)="createEditModal.open()" jhiTranslate="artemisApp.metis.newAnnouncement"></button>
<jhi-post-create-edit-modal #createEditModal [posting]="newPost!" [isCommunicationPage]="true" (onCreate)="handleNewMessageCreated()" />
</div>
} @else {
<jhi-message-inline-input class="message-input" [posting]="newPost!" (onCreate)="handleNewMessageCreated()" />
}
</div>
}
</div>
</div>
}
31 changes: 25 additions & 6 deletions ...ew/course-conversations/layout/conversation-messages/conversation-messages.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
--message-input-height-dev: 158px;
--search-height: 52px;
--channel-header-height: 52px;
--header-height: 68px;
--announcement-button-height: 48px;

.search-active {
input {
Expand Down Expand Up @@ -44,19 +46,19 @@
}

.posting-infinite-scroll-container {
max-height: calc(75vh - var(--message-input-height-prod) - var(--search-height) - var(--channel-header-height));
max-height: calc(100vh - var(--header-height) - var(--message-input-height-prod) - var(--search-height) - var(--channel-header-height));
overflow-y: auto;

&.hide-input-full {
max-height: calc(94vh - var(--message-input-height-prod) - var(--search-height) - var(--channel-header-height));
max-height: calc(100vh - var(--header-height) - var(--search-height) - var(--channel-header-height));
}

&.hide-input {
max-height: calc(87vh - var(--message-input-height-prod) - var(--search-height) - var(--channel-header-height));
max-height: calc(100vh - var(--announcement-button-height) - var(--header-height) - var(--search-height) - var(--channel-header-height));
}

&.content-height-dev {
max-height: calc(75vh - var(--message-input-height-dev) - var(--search-height) - var(--channel-header-height));
max-height: calc(100vh - var(--header-height) - var(--message-input-height-dev) - var(--search-height) - var(--channel-header-height));

@include media-breakpoint-down(sm) {
max-height: calc(90vh - var(--message-input-height-dev) - var(--search-height) - var(--channel-header-height));
Expand All @@ -65,11 +67,11 @@
}

&.hide-input-full.content-height-dev {
max-height: calc(94vh - var(--message-input-height-dev) - var(--search-height) - var(--channel-header-height));
max-height: calc(100vh - var(--header-height) - var(--search-height) - var(--channel-header-height));
}

&.hide-input.content-height-dev {
max-height: calc(87vh - var(--message-input-height-dev) - var(--search-height) - var(--channel-header-height));
max-height: calc(100vh - var(--announcement-button-height) - var(--header-height) - var(--search-height) - var(--channel-header-height));
}

@include media-breakpoint-down(sm) {
Expand Down Expand Up @@ -112,3 +114,20 @@
jhi-posting-thread {
margin-bottom: 5px;
}

.channel-content {
height: calc(100vh - 15px - var(--header-height) - var(--message-input-height-dev) - var(--channel-header-height));
display: flex;
flex-direction: column;
justify-content: space-between;
}

.channel-search {
z-index: 1040;
margin: 0.5rem;
position: fixed;
right: 1.5rem;
max-width: 275px;
border-radius: 0.25rem;
background-color: var(--bs-card-bg);
}
2 changes: 1 addition & 1 deletion ...nversations/layout/conversation-thread-sidebar/conversation-thread-sidebar.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ <h5 class="mb-0 fw-medium" jhiTranslate="artemisApp.conversationsLayout.threadSi
[hasChannelModerationRights]="hasChannelModerationRights"
/>
</div>
<div class="message-input mx-3 px-3 pt-2">
<div class="message-input mx-3 pt-2">
@if (!readOnlyMode) {
<jhi-message-reply-inline-input
[activeConversation]="conversation"
Expand Down
Loading
Loading