ngx-edu-sharing-ui 0.7.0

package/src/lib/node-entries/node-entries-card/node-entries-card.main.scss

@@ -0,0 +1,261 @@
+@import '../../../../assets/scss/mixins';
+@import '../mixins';
+
+$optionBarHeight: 50px;
+
+.grid-card {
+    transition: all var(--transitionNormal);
+    // to prevent click animation to float across the whole screen
+    overflow: hidden;
+    background-color: #fff;
+    @include materialShadowBottom();
+    display: grid;
+    height: 100%;
+    grid-template-columns: auto;
+    @include contrastMode {
+        border: 1px solid rgba(black, 0.42);
+    }
+    &.selected {
+        background-color: rgb(var(--palette-primary-50));
+    }
+    .dropdown-dummy {
+        position: fixed;
+    }
+    .card-options {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        grid-column-gap: 10px;
+        .card-rating-area {
+            display: flex;
+            align-items: center;
+            height: 100%;
+        }
+        .card-options-area {
+            display: flex;
+            .card-options-spacer {
+                // margin: 0 5px;
+                // border-left: 1px solid #ccc;
+            }
+
+            es-option-button,
+            button {
+                transition: all var(--transitionNormal);
+                margin: 0 2px;
+                border-radius: 50%;
+
+                &:hover,
+                &:focus {
+                    background-color: #fff;
+                }
+            }
+        }
+    }
+    &:not(.grid-card-collection) {
+        .card-top-bar {
+            background-color: rgb(var(--palette-primary-200));
+        }
+    }
+    &.grid-card-virtual {
+        outline: 2px dashed var(--nodeVirtualColor);
+    }
+    .card-top-bar {
+        height: $topBarHeight;
+        display: flex;
+        gap: 15px;
+
+        align-items: center;
+        padding: 0 $entriesCardPaddingHorizontal;
+        position: relative;
+        .card-top-bar-collection-color {
+            position: absolute;
+            background-color: rgba(255, 255, 255, 0.5);
+            left: 0;
+            top: 0;
+            right: 0;
+            bottom: 0;
+        }
+        .card-top-bar-flag {
+            @include card-top-bar-badge;
+        }
+        .card-top-bar-checkbox {
+            mat-checkbox {
+                margin-right: -5px;
+                position: relative;
+                top: -1.3px;
+                &.cdk-keyboard-focused ::ng-deep .mat-focus-indicator {
+                    @include removeDefaultFocus();
+                    &::after {
+                        content: '';
+                        position: absolute;
+                        left: 2px;
+                        right: 2px;
+                        top: 2px;
+                        bottom: 2px;
+                        @include setGlobalKeyboardFocus('border');
+                        border-color: white;
+                    }
+                }
+            }
+        }
+        .card-top-bar-empty {
+            width: 0;
+            flex-grow: 1;
+        }
+    }
+    .card-image-area {
+        height: $imageHeight;
+        padding: 0;
+        display: flex;
+        es-preview-image {
+            flex-grow: 1;
+        }
+        .card-collection-image {
+            display: flex;
+            width: 100%;
+            height: 100%;
+            align-items: center;
+            justify-content: center;
+            i {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                user-select: none;
+                color: rgba(0, 0, 0, 0.75);
+                background-color: rgba(255, 255, 255, 0.5);
+                padding: $collectionIconPadding;
+                font-size: $collectionIconSize;
+                border-radius: 50%;
+            }
+        }
+    }
+    .card-meta {
+        padding: $entriesCardPaddingVertical $entriesCardPaddingHorizontal 0
+            $entriesCardPaddingHorizontal;
+        display: grid;
+        flex-direction: row;
+        .card-meta-row {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            min-height: 2.5em;
+            gap: 5px;
+            &:not(:first-child) {
+                > label {
+                    cursor: inherit;
+                    color: var(--textLight);
+                    font-size: 85%;
+                }
+                > es-list-base {
+                    color: #000;
+                    flex-grow: 1;
+                    margin: 5px 0;
+                    display: flex;
+                    justify-content: flex-end;
+                    text-align: end;
+                    word-break: break-word;
+                    // height: 1em;
+                }
+            }
+            &:first-child {
+                > es-list-base,
+                > es-node-url {
+                    width: 100%;
+                    color: var(--textMain);
+                    font-size: 120%;
+                    height: 1.25 * 2em;
+                    text-align: left;
+                    word-break: break-word;
+                }
+            }
+        }
+    }
+    &.dynamic-single-click:hover {
+        @include materialShadowMediumLarge(false, 0.2);
+        background-color: rgb(var(--palette-primary-50));
+        // transform: scale(1.0075);
+    }
+    &.dynamic-single-click.grid-card-collection:hover .card-meta {
+        background-color: rgba(255, 255, 255, 0.9);
+    }
+    &.grid-card-collection {
+        .card-meta {
+            background-color: rgba(255, 255, 255, 0.8);
+        }
+        .card-options {
+            background-color: rgba(255, 255, 255, 0.9);
+        }
+    }
+    .card-options {
+        border-top: 1px solid #ddd;
+        // margin-top: 2px; white artefact on hover
+    }
+}
+:host ::ng-deep {
+    .grid-card {
+        .card-meta-row {
+            &:first-child {
+                es-list-base,
+                es-node-url a es-list-base {
+                    @include limitLineCount(2, 1.25);
+                    > es-list-text {
+                        word-break: break-word;
+                    }
+                }
+            }
+            es-node-url {
+                a {
+                    color: var(--textMain);
+                    &.cdk-keyboard-focused {
+                        display: inline-flex;
+                        @include setGlobalKeyboardFocus('outline');
+                    }
+                }
+            }
+        }
+    }
+    .card-meta {
+        es-list-base {
+            img {
+                max-width: 100px;
+                max-height: 20px;
+            }
+            es-list-node-license {
+                img {
+                    height: 20px;
+                }
+            }
+            es-list-collection-info {
+                display: flex;
+                align-items: center;
+                // justify-content: flex-end;
+                i {
+                    font-size: 12pt;
+                    margin: 0 6px;
+                }
+            }
+        }
+    }
+    .grid-card-collection es-node-url {
+        a.cdk-keyboard-focused .card-meta {
+            // @TDOO: better focus visibility is required
+            background-color: #fff;
+        }
+    }
+}
+/**
+    custom overlay provided via template
+ */
+.card-overlay {
+    position: absolute;
+    z-index: 2;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    // Pass pointer events through to the underlying card when the overlay template is empty...
+    pointer-events: none;
+    // ...but re-enable pointer-event handling for the overlay's content (if any).
+    & ::ng-deep > * {
+        pointer-events: auto;
+    }
+}

package/src/lib/node-entries/node-entries-card-grid/node-entries-card-grid.component.html

@@ -0,0 +1,205 @@
+<ng-template #gridTop>
+  <es-sort-select-panel
+    *ngIf="entriesService.sort?.allowed"
+    class="order-panel"
+    [active]="entriesService.sort.active"
+    [direction]="entriesService.sort.direction"
+    [columns]="getSortColumns()"
+    (sortChange)="onSortChange($event)"
+    [(customSortingInProgress)]="entriesService.sort.customSortingInProgress"
+    (customSortingInProgressChange)="onCustomSortingInProgressChange()"
+  ></es-sort-select-panel>
+</ng-template>
+
+<es-dropdown #dropdown [options]="entriesService.options?.[Target.ListDropdown]"></es-dropdown>
+
+<!-- Do not render the list element (`role="list"` or `li`) when there are no list items. -->
+<ng-container *ngIf="(nodes$ | async)?.length > 0 || entriesService.globalOptions?.length > 0">
+  <!-- FIXME: Ideally, we would use native `ul` and `li` elements, but these have a strict model,
+  that only allows `li` elements as direct children of `ul` elements. So we would need to use the
+  native elements at all places without any elements between `ul` and `li`. -->
+  <div
+    *ngIf="entriesService.sort?.customSortingInProgress"
+    role="list"
+    class="card-grid card-grid-reorder"
+    cdkDropListGroup
+  >
+    <ng-container *ngIf="nodes$ | async as nodes">
+      <div
+        class="card-grid-order-wrapper"
+        *ngFor="let node of nodes; let i = index"
+        role="none"
+        cdkDropList
+        [cdkDropListConnectedTo]="dropLists"
+        [cdkDropListData]="i"
+      >
+        <es-node-entries-card
+          *ngIf="displayType === NodeEntriesDisplayType.Grid"
+          #item
+          [node]="node"
+          role="listitem"
+          cdkDrag
+          [cdkDragData]="i"
+          [cdkDragStartDelay]="getDragStartDelay()"
+          cdkDragPreviewClass="es-card-grid-rearrange-drag-preview"
+          (cdkDragEntered)="onRearrangeDragEntered($event)"
+          (cdkDragStarted)="onRearrangeDragStarted()"
+          (cdkDragEnded)="onRearrangeDragEnded()"
+        ></es-node-entries-card>
+        <es-node-entries-card-small
+          *ngIf="displayType === NodeEntriesDisplayType.SmallGrid"
+          #item
+          [node]="node"
+          role="listitem"
+          cdkDrag
+          [cdkDragData]="i"
+          [cdkDragStartDelay]="getDragStartDelay()"
+          cdkDragPreviewClass="es-card-grid-rearrange-drag-preview"
+          (cdkDragEntered)="onRearrangeDragEntered($event)"
+          (cdkDragStarted)="onRearrangeDragStarted()"
+          (cdkDragEnded)="onRearrangeDragEnded()"
+        ></es-node-entries-card-small>
+      </div>
+    </ng-container>
+  </div>
+  <div class="card-grid-wrapper" *ngIf="!entriesService.sort?.customSortingInProgress">
+    <ng-container *ngTemplateOutlet="scrollHelper"></ng-container>
+    <div
+      role="list"
+      class="card-grid card-grid-layout-{{ layout }}"
+      #grid
+      (esBorderBoxObserver)="onGridSizeChanges()"
+      esInfiniteScroll
+      (scroll)="updateScrollState()"
+      (scrolled)="!visibleItemsLimited && loadData('scroll')"
+    >
+      <es-node-entries-global-options
+        *ngIf="entriesService.globalOptions?.length"
+        [displayType]="displayType"
+      >
+      </es-node-entries-global-options>
+      <ng-container *ngIf="nodes$ | async as nodes">
+        <div
+          class="card-grid-drag-wrapper"
+          *ngFor="let node of nodes; let i = index"
+          role="none"
+          [esNodesDropTarget]="node"
+          [canDropNodes]="canDropNodes"
+          (nodeDropped)="onNodesDropped($event)"
+          #dropTarget="esNodesDropTarget"
+        >
+          <ng-container *ngIf="isCustomTemplate()">
+            <ng-container *ngTemplateOutlet="$any(node)"></ng-container>
+          </ng-container>
+          <ng-container *ngIf="!isCustomTemplate()">
+            <es-node-entries-card
+              *ngIf="displayType === NodeEntriesDisplayType.Grid"
+              #item
+              [node]="node"
+              [dropdown]="dropdown"
+              role="listitem"
+              cdkDrag
+              [cdkDragDisabled]="!getDragEnabled()"
+              [cdkDragData]="getDragData(node)"
+              esNodesDrag
+              (cdkDragStarted)="onDragStarted(node)"
+              (cdkDragEnded)="onDragEnded()"
+              [class.selected-when-dragging]="
+                isDragging && entriesService.selection.isSelected(node)
+              "
+            >
+              <ng-container *ngIf="entriesService.selection.selected.length > 1">
+                <es-node-entries-card
+                  *cdkDragPreview
+                  [node]="node"
+                  [matBadge]="
+                    entriesService.selection.selected.length > 1
+                      ? entriesService.selection.selected.length
+                      : null
+                  "
+                  class="card-drag-preview"
+                ></es-node-entries-card>
+              </ng-container>
+            </es-node-entries-card>
+            <es-node-entries-card-small
+              *ngIf="displayType === NodeEntriesDisplayType.SmallGrid"
+              #item
+              [node]="node"
+              role="listitem"
+              cdkDrag
+              [cdkDragDisabled]="!getDragEnabled()"
+              [cdkDragData]="[node]"
+              esNodesDrag
+            >
+            </es-node-entries-card-small>
+          </ng-container>
+          <div
+            *ngIf="dropTarget.active?.canDrop?.denyExplicit"
+            class="card-grid-drop-blocked-container"
+          >
+            <i esIcon="cancel"></i>
+          </div>
+          <div *ngIf="dropTarget.active?.canDrop?.accept" class="card-grid-drop-allowed-container">
+            <i
+              [esIcon]="dropTarget.active.action === 'copy' ? 'add_circle_outline' : 'archive'"
+            ></i>
+          </div>
+        </div>
+      </ng-container>
+    </div>
+  </div>
+</ng-container>
+<ng-container
+  *ngIf="
+    !entriesService.dataSource.isLoading &&
+    entriesService.dataSource.hasMore() &&
+    !visibleItemsLimited &&
+    entriesService.paginationStrategy === 'infinite-scroll' &&
+    layout !== 'scroll'
+  "
+>
+  <div class="load-more">
+    <button mat-button color="primary" (click)="loadData('button')">
+      <i esIcon="refresh"></i>
+      <span>{{ 'LOAD_MORE' | translate }}</span>
+    </button>
+  </div>
+</ng-container>
+<ng-container
+  *ngIf="
+    entriesService.dataSource.isLoading === true ||
+    entriesService.dataSource.isLoading === 'initial' ||
+    (entriesService.dataSource.isLoading === 'page' &&
+      entriesService.paginationStrategy === 'infinite-scroll')
+  "
+>
+  <ng-container *ngTemplateOutlet="loading"></ng-container>
+</ng-container>
+
+<ng-template #loading>
+  <es-spinner></es-spinner>
+</ng-template>
+<ng-template #scrollHelper>
+  <ng-container *ngIf="layout === 'scroll'">
+    <div
+      class="scroll-helper-left"
+      role="presentation"
+      (click)="doScroll('left')"
+      *ngIf="scroll.left"
+    >
+      <button mat-icon-button color="primary" (click)="$event.stopPropagation(); doScroll('left')">
+        <i esIcon="keyboard_arrow_left" [aria]="true"></i>
+      </button>
+    </div>
+    <div
+      class="scroll-helper-right"
+      role="presentation"
+      (click)="doScroll('right')"
+      *ngIf="scroll.right"
+    >
+      <button mat-icon-button color="primary" (click)="$event.stopPropagation(); doScroll('right')">
+        <i esIcon="keyboard_arrow_right" [aria]="true"></i>
+      </button>
+    </div>
+  </ng-container>
+</ng-template>

package/src/lib/node-entries/node-entries-card-grid/node-entries-card-grid.component.scss

@@ -0,0 +1,181 @@
+@use 'sass:math';
+@import '../../../../assets/scss/mixins';
+
+$horizontalScrollPadding: 1.5em;
+
+@keyframes OrderAnimationCards {
+    0% {
+        transform: rotate(-0.25deg);
+    }
+    50% {
+        transform: rotate(0.25deg);
+    }
+    100% {
+        transform: rotate(-0.25deg);
+    }
+}
+
+.order-panel {
+    margin-left: auto;
+}
+
+.load-more {
+    display: flex;
+    justify-content: center;
+}
+.card-grid-wrapper {
+    position: relative;
+    z-index: 0;
+    .scroll-helper-left,
+    .scroll-helper-right {
+        position: absolute;
+        width: 15%;
+        min-width: 60px;
+        max-width: calc(var(--cardWidth) * 0.4);
+        display: flex;
+        align-items: center;
+        // do not overlay scrollbar
+        height: calc(100% - 10px);
+        z-index: 5;
+        @include clickable();
+        > button {
+            background-color: #fff;
+            color: var(--primary);
+            @include materialShadowMediumLarge(false, 0.25);
+        }
+    }
+    .scroll-helper-left {
+        left: -$horizontalScrollPadding;
+        justify-content: flex-start;
+        background: linear-gradient(
+            to left,
+            rgba(255, 255, 255, 0.000001) 0,
+            rgb(255, 255, 255) calc(100% - $horizontalScrollPadding)
+        );
+        > button {
+            margin-left: calc($horizontalScrollPadding - 8px);
+        }
+    }
+    .scroll-helper-right {
+        right: -$horizontalScrollPadding;
+        justify-content: flex-end;
+        background: linear-gradient(
+            to right,
+            rgba(255, 255, 255, 0.000001) 0,
+            rgb(255, 255, 255) calc(100% - $horizontalScrollPadding)
+        );
+        > button {
+            margin-right: calc($horizontalScrollPadding - 8px);
+        }
+    }
+}
+.card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(var(--cardWidth), 1fr));
+    grid-column-gap: 20px;
+    grid-row-gap: 20px;
+    grid-template-rows: auto;
+    padding-block-start: 1em;
+    padding-block-end: 1em;
+    &.card-grid-layout-scroll {
+        position: relative;
+        overflow-x: auto;
+        overflow-y: hidden;
+        scroll-snap-type: x mandatory;
+        grid-auto-flow: column;
+        grid-template-columns: repeat(auto-fit, var(--cardWidth));
+        grid-auto-columns: minmax(var(--cardWidth), 1fr);
+        // slightly more padding to prevent shadow clipping
+        padding: $horizontalScrollPadding;
+        // compensate for larger padding
+        margin: calc(1em - $horizontalScrollPadding) (-$horizontalScrollPadding) 0;
+        &::-webkit-scrollbar-track {
+            margin: 0 $horizontalScrollPadding;
+        }
+        @include materialScrollbar();
+        > .card-grid-drag-wrapper {
+            scroll-snap-align: center;
+            scroll-snap-stop: always;
+        }
+    }
+    > .card-grid-drag-wrapper {
+        position: relative;
+        // .cdk-drag-placeholder ~ .card-grid-drop-blocked-container {
+        //     display: none;
+        // }
+        .card-grid-drop-allowed-container,
+        .card-grid-drop-blocked-container {
+            position: absolute;
+            z-index: 1;
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            > i {
+                background: radial-gradient(circle, #fff 30%, rgba(255, 255, 255, 0.0001) 70%);
+                width: 200px;
+                height: 200px;
+                font-size: 80px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+        }
+        .card-grid-drop-allowed-container {
+            > i {
+                color: var(--colorStatusPositive);
+            }
+        }
+        .card-grid-drop-blocked-container {
+            backdrop-filter: blur(5px);
+            > i {
+                color: var(--colorStatusNegative);
+            }
+        }
+        .selected-when-dragging {
+            opacity: 0.5; // Same as .cdk-drag-placeholder
+        }
+        &.cdk-drop-list-dragging {
+            > *:first-child {
+                display: none;
+            }
+        }
+    }
+    &.card-grid-reorder {
+        > .card-grid-order-wrapper {
+            $orderAnimationTime: 0.5s;
+            animation-iteration-count: infinite;
+            animation-duration: $orderAnimationTime;
+            animation-name: OrderAnimationCards;
+            &:nth-of-type(2n) {
+                animation-delay: 0s;
+            }
+            &:nth-of-type(2n + 1) {
+                animation-delay: math.div(-$orderAnimationTime, 2);
+            }
+            &:nth-of-type(3n) {
+                animation-delay: math.div(-$orderAnimationTime, 4);
+            }
+            &:nth-of-type(5n) {
+                animation-delay: math.div(-$orderAnimationTime, 8);
+            }
+            .cdk-drag-placeholder {
+                display: none;
+            }
+        }
+    }
+}
+
+.card-drag-preview {
+    width: 250px;
+}
+
+// Disable animations for rearranging. We misuse `entered` events for doing the rearranging, so the
+// preview animation would go to the wrong position (see
+// https://stackblitz.com/edit/drag-drop-dashboard).
+::ng-deep .es-card-grid-rearrange-drag-preview.cdk-drag-animating {
+    transition: none;
+}