francescoalbano/tripweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 Improve Trip table buttons and column resizer display

Browse Source
This commit is contained in:
itskovacs 2025-08-18 21:11:31 +02:00
parent 8daf6c9ead
commit c88cdf2c6d
2 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/src/app/components/trip/trip.component.html
View File

@ -60,9 +60,10 @@
<div class="flex items-center gap-2 print:hidden"> <div class="flex items-center gap-2 print:hidden">
<div class="hidden md:flex items-center gap-2"> <div class="hidden md:flex items-center gap-2">
<p-button pTooltip="Show filters" icon="pi pi-filter" (click)="toggleFiltering()" text />
<div class="border-l border-solid border-gray-700 h-4"></div>
<p-button pTooltip="Expand table" class="hidden lg:flex" icon="pi pi-arrows-h" <p-button pTooltip="Expand table" class="hidden lg:flex" icon="pi pi-arrows-h"
(click)="isExpanded = !isExpanded" text /> (click)="isExpanded = !isExpanded" text />
<p-button pTooltip="Show filters" icon="pi pi-filter" (click)="toggleFiltering()" text />
<p-button [pTooltip]="tableExpandableMode ? 'f' : 'Switch table mode, allow column resizing'" <p-button [pTooltip]="tableExpandableMode ? 'f' : 'Switch table mode, allow column resizing'"
[icon]="tableExpandableMode ? 'pi pi-arrow-up-right-and-arrow-down-left-from-center' : 'pi pi-arrow-down-left-and-arrow-up-right-to-center'" [icon]="tableExpandableMode ? 'pi pi-arrow-up-right-and-arrow-down-left-from-center' : 'pi pi-arrow-down-left-and-arrow-up-right-to-center'"
(click)="tableExpandableMode = !tableExpandableMode" text /> (click)="tableExpandableMode = !tableExpandableMode" text />
@ -70,6 +71,7 @@
<p-button pTooltip="Open Google Maps directions" icon="pi pi-car" (click)="tripToNavigation()" text /> <p-button pTooltip="Open Google Maps directions" icon="pi pi-car" (click)="tripToNavigation()" text />
<p-button pTooltip="Show itinerary on map" icon="pi pi-directions" <p-button pTooltip="Show itinerary on map" icon="pi pi-directions"
[severity]="tripMapAntLayerDayID == -1 ? 'help' : 'primary'" (click)="toggleTripDaysHighlight()" text /> [severity]="tripMapAntLayerDayID == -1 ? 'help' : 'primary'" (click)="toggleTripDaysHighlight()" text />
<div class="border-l border-solid border-gray-700 h-4"></div>
<p-button pTooltip="Print Trip" icon="pi pi-print" (click)="printTable()" text /> <p-button pTooltip="Print Trip" icon="pi pi-print" (click)="printTable()" text />
<div class="border-l border-solid border-gray-700 h-4"></div> <div class="border-l border-solid border-gray-700 h-4"></div>
</div> </div>
@ -93,9 +95,9 @@
@defer { @defer {
@if (flattenedTripItems.length) { @if (flattenedTripItems.length) {
<p-table [value]="flattenedTripItems" class="print-striped-rows" styleClass="max-w-[85vw] md:max-w-full" <p-table [value]="flattenedTripItems" class="print-striped-rows" [class.table-colored-resizer]="tableExpandableMode"
[rowGroupMode]="tableExpandableMode ? 'subheader': 'rowspan'" groupRowsBy="td_label" styleClass="max-w-[85vw] md:max-w-full" [rowGroupMode]="tableExpandableMode ? 'subheader': 'rowspan'"
[resizableColumns]="tableExpandableMode"> groupRowsBy="td_label" [resizableColumns]="tableExpandableMode">
<ng-template #header> <ng-template #header>
<tr> <tr>
@if (!tableExpandableMode && tripTableSelectedColumns.includes('day')) {<th class="w-24" pResizableColumn>Day @if (!tableExpandableMode && tripTableSelectedColumns.includes('day')) {<th class="w-24" pResizableColumn>Day

5
src/src/styles.scss
View File

@ -126,6 +126,11 @@ html {
} }
} }
.table-colored-resizer .p-datatable-column-resizer {
width: 2px;
background-color: #999;
}
@keyframes slideYcenteredX { @keyframes slideYcenteredX {
0% { 0% {
opacity: 0; opacity: 0;