Skip to content

Commit

Permalink
Improve layouts of detail and remotes and searching uses observable (#…
Browse files Browse the repository at this point in the history 
…285)

* fix: optimize detail and banner, banner content with line feeds

* fix: optimize badge position

* fix: tests and add preview icon

* fix: improve detail layout, use observable on search

* fix: improve list-active layout

* fix: tests

* fix: moved convertLineBreaks to utils
  • Loading branch information
@HenryT-CG
HenryT-CG authored Oct 26, 2024
1 parent 3140c04 commit 594c27d
Show file tree
Hide file tree
Showing 15 changed files with 251 additions and 146 deletions.
11 changes: 11 additions & 0 deletions src/app/_am-mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,17 @@
}
}

@mixin text-badges {
:host ::ng-deep {
.text-badge-right {
display: inline-block;
position: absolute;
right: -12px;
top: -6px;
}
}
}

@mixin card-badges {
:host ::ng-deep {
.card-badge-right {
Expand Down
137 changes: 88 additions & 49 deletions src/app/announcement/announcement-detail/announcement-detail.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,20 @@
}"
>
<form [formGroup]="formGroup" errorTailor>
<div class="flex flex-wrap flex-column justify-content-between row-gap-3 sm:row-gap-4 mt-1">
<div class="w-full">
<div class="flex flex-wrap flex-column justify-content-between row-gap-3 sm:row-gap-4 mt-2">
<div class="w-full relative">
<p-badge
severity="primary"
[value]="255 - announcementTitle.value.length"
class="z-1 text-badge-right"
[attr.aria-label]="'ANNOUNCEMENT.TOOLTIPS.CHARACTERS' | translate"
[pTooltip]="'ANNOUNCEMENT.TOOLTIPS.CHARACTERS' | translate"
tooltipPosition="top"
tooltipEvent="hover"
/>
<span class="p-float-label" controlErrorAnchor>
<textarea
#announcementTitle
pInputTextarea
id="am_announcement_detail_form_title"
type="text"
Expand All @@ -30,6 +40,7 @@
rows="1"
[autoResize]="true"
appendTo="body"
[ariaLabel]="'ANNOUNCEMENT.TITLE' | translate"
[pTooltip]="'ANNOUNCEMENT.TOOLTIPS.TITLE' | translate"
tooltipPosition="top"
tooltipEvent="hover"
Expand All @@ -39,16 +50,27 @@
</label>
</span>
</div>
<div class="w-full">
<div class="w-full relative">
<p-badge
severity="primary"
[value]="1000 - announcementContent.value.length"
class="z-1 text-badge-right"
[attr.aria-label]="'ANNOUNCEMENT.TOOLTIPS.CHARACTERS' | translate"
[pTooltip]="'ANNOUNCEMENT.TOOLTIPS.CHARACTERS' | translate"
tooltipPosition="top"
tooltipEvent="hover"
/>
<span class="p-float-label" controlErrorAnchor>
<textarea
#announcementContent
pInputTextarea
id="am_announcement_detail_form_content"
class="w-full textarea-md"
formControlName="content"
rows="3"
[autoResize]="true"
appendTo="body"
[ariaLabel]="'ANNOUNCEMENT.CONTENT' | translate"
[pTooltip]="'ANNOUNCEMENT.TOOLTIPS.CONTENT' | translate"
tooltipPosition="top"
tooltipEvent="hover"
Expand All @@ -57,50 +79,52 @@
</span>
</div>

<div class="w-full mb-1">
<span class="p-float-label">
<p-dropdown
id="am_announcement_detail_form_workspace_name"
class="input-field"
styleClass="w-full"
[options]="allWorkspaces"
[autoDisplayFirst]="true"
[appendTo]="'body'"
formControlName="workspaceName"
[aria-label]="'ANNOUNCEMENT.WORKSPACE' | translate"
[pTooltip]="'ANNOUNCEMENT.TOOLTIPS.WORKSPACE' | translate"
tooltipPosition="top"
tooltipEvent="hover"
>
</p-dropdown>
<label for="am_announcement_detail_form_workspace_name"> {{ 'ANNOUNCEMENT.WORKSPACE' | translate }} </label>
</span>
</div>
<div class="w-full flex flex-column sm:flex-row row-gap-3 sm:row-gap-4 column-gap-5">
<div class="flex-grow-1">
<span class="p-float-label">
<p-dropdown
id="am_announcement_detail_form_workspace_name"
class="input-field"
styleClass="w-full"
[options]="allWorkspaces"
[autoDisplayFirst]="true"
[appendTo]="'body'"
formControlName="workspaceName"
[aria-label]="'ANNOUNCEMENT.WORKSPACE' | translate"
[pTooltip]="'ANNOUNCEMENT.TOOLTIPS.WORKSPACE' | translate"
tooltipPosition="top"
tooltipEvent="hover"
>
</p-dropdown>
<label for="am_announcement_detail_form_workspace_name"> {{ 'ANNOUNCEMENT.WORKSPACE' | translate }} </label>
</span>
</div>

<div class="w-full mb-1">
<span class="p-float-label">
<p-dropdown
id="am_announcement_detail_form_application_name"
class="input-field"
styleClass="w-full"
[options]="allProducts"
[autoDisplayFirst]="true"
[appendTo]="'body'"
formControlName="productName"
[aria-label]="'ANNOUNCEMENT.APPLICATION' | translate"
[pTooltip]="'ANNOUNCEMENT.TOOLTIPS.APPLICATION' | translate"
tooltipPosition="top"
tooltipEvent="hover"
>
</p-dropdown>
<label for="am_announcement_detail_form_application_name">
{{ 'ANNOUNCEMENT.APPLICATION' | translate }}
</label>
</span>
<div class="flex-grow-1">
<span class="p-float-label">
<p-dropdown
id="am_announcement_detail_form_application_name"
class="input-field"
styleClass="w-full"
[options]="allProducts"
[autoDisplayFirst]="true"
[appendTo]="'body'"
formControlName="productName"
[aria-label]="'ANNOUNCEMENT.APPLICATION' | translate"
[pTooltip]="'ANNOUNCEMENT.TOOLTIPS.APPLICATION' | translate"
tooltipPosition="top"
tooltipEvent="hover"
>
</p-dropdown>
<label for="am_announcement_detail_form_application_name">
{{ 'ANNOUNCEMENT.APPLICATION' | translate }}
</label>
</span>
</div>
</div>

<div class="w-full flex flex-column sm:flex-row row-gap-3 sm:row-gap-1">
<div class="w-12 sm:w-5 py-0 px-0 sm:pr-3 md:text-right flex sm:justify-content-end">
<div class="w-full flex flex-column row-gap-3 sm:row-gap-4 sm:flex-row sm:justify-content-between">
<div class="py-0 px-0">
<div>
<span class="p-float-label" controlErrorAnchor>
<p-calendar
Expand All @@ -127,7 +151,7 @@
</span>
</div>
</div>
<div class="w-12 sm:w-5 p-0 sm:pl-3">
<div class="">
<div>
<span class="p-float-label" controlErrorAnchor>
<p-calendar
Expand All @@ -152,7 +176,7 @@
</span>
</div>
</div>
<div class="w-12 sm:w-2 flex flex-column justify-content-center sm:align-items-center row-gap-1">
<div class="mr-4 flex flex-column justify-content-center sm:align-items-center row-gap-1">
<p-inputSwitch
inputId="announcement_detail_form_status"
class="input-switch-xl"
Expand All @@ -179,12 +203,13 @@
</label>
</div>

<div class="w-full flex flex-column sm:flex-row row-gap-3 sm:row-gap-1">
<div class="w-12 md:w-5 py-0 px-0 md:pr-3 md:text-right flex flex-column md:justify-content-end">
<div class="w-full flex flex-column row-gap-2 sm:flex-row sm:justify-content-evenly sm:align-items-end">
<div class="p-0 md:text-right flex flex-column md:justify-content-end">
<label class="float-label mb-1 text-sm font-medium" for="am_announcement_detail_form_priority"
>{{ 'ANNOUNCEMENT.PRIORITY' | translate }}
</label>
<p-selectButton
#announcmenPriority
id="am_announcement_detail_form_priority"
formControlName="priority"
[options]="(priorityOptions$ | async) ?? []"
Expand All @@ -193,11 +218,25 @@
tooltipEvent="hover"
></p-selectButton>
</div>
<div class="w-12 md:w-7 flex flex-column p-0 md:pl-3">
<span
id="am_announcement_detail_preview_icon"
class="p-2 pi text-xl border-round hidden sm:block"
[class.pi-info-circle]="announcmentType.value === 'INFO'"
[class.pi-calendar]="announcmentType.value === 'EVENT'"
[class.pi-wrench]="announcmentType.value === 'SYSTEM_MAINTENANCE'"
[class.bg-red-100]="announcmenPriority.value === 'IMPORTANT'"
[class.bg-yellow-100]="announcmenPriority.value === 'NORMAL'"
[class.bg-blue-100]="announcmenPriority.value === 'LOW'"
[pTooltip]="'ANNOUNCEMENT.TOOLTIPS.PREVIEW.ICON' | translate"
tooltipPosition="top"
tooltipEvent="hover"
></span>
<div class="p-0 flex flex-column">
<label class="float-label mb-1 text-sm font-medium" for="am_announcement_detail_form_type">
{{ 'ANNOUNCEMENT.TYPE' | translate }}
</label>
<p-selectButton
#announcmentType
id="am_announcement_detail_form_type"
formControlName="type"
[options]="(typeOptions$ | async) ?? []"
Expand Down
1 change: 1 addition & 0 deletions src/app/announcement/announcement-detail/announcement-detail.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@import '/src/app/_am-mixins.scss';

@include text-badges;
@include correct-select-button;
@include dialog-footer-buttons;
@include dialog-non-full-size-modal;
Expand Down
12 changes: 9 additions & 3 deletions src/app/announcement/announcement-search/announcement-search.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,18 @@
[workspaces]="(usedWorkspaces$ | async) ?? []"
[products]="(usedProducts$ | async) ?? []"
(criteriaEmitter)="search($event)"
(resetSearchEmitter)="onReset()"
(resetSearchEmitter)="onCriteriaReset()"
></app-announcement-criteria>

<ocx-page-content styleClass="px-3">
<ocx-page-content *ngIf="announcements$ | async as announcements" styleClass="px-3">
<p-message
*ngIf="searchInProgress"
severity="info"
styleClass="my-3 p-2"
[text]="'ACTIONS.SEARCH.IN_PROGRESS' | translate"
></p-message>
<p-table
*ngIf="!searchInProgress"
#announcementTable
id="am_announcement_search_table"
[value]="announcements"
Expand All @@ -35,7 +42,6 @@
[enableFiltering]="true"
[enableSorting]="false"
[columnDefinitions]="columns"
[columnTemplates]="[]"
(columnsChange)="onColumnsChange($event)"
(filterChange)="onFilterChange($event)"
[filterColumns]="['ANNOUNCEMENT.TITLE' | translate, 'ANNOUNCEMENT.WORKSPACE' | translate]"
Expand Down
Loading

0 comments on commit 594c27d

Please sign in to comment.