ngx-edu-sharing-ui 0.7.0 → 9.0.1

package/src/lib/node-entries/node-entries-card/node-entries-card.component.ts

@@ -1,132 +0,0 @@
-import {
-    ApplicationRef,
-    Component,
-    Input,
-    OnChanges,
-    OnInit,
-    Optional,
-    SimpleChanges,
-    ViewChild,
-} from '@angular/core';
-import { MatMenuTrigger } from '@angular/material/menu';
-import { ClickSource, InteractionType } from '../entries-model';
-import { NodeEntriesTemplatesService } from '../node-entries-templates.service';
-import { CustomFieldSpecialType, NodeEntriesGlobalService } from '../node-entries-global.service';
-import { Target } from '../../types/option-item';
-import { NodeEntriesService } from '../../services/node-entries.service';
-import { NodeHelperService } from '../../services/node-helper.service';
-import { AuthenticationService, ConfigService, Node, RestConstants } from 'ngx-edu-sharing-api';
-import { ColorHelper, PreferredColor } from '../../util/color-helper';
-import { take } from 'rxjs/operators';
-import { DropdownComponent } from '../../dropdown/dropdown.component';
-import { Toast } from '../../services/abstract/toast.service';
-
-@Component({
-    selector: 'es-node-entries-card',
-    templateUrl: 'node-entries-card.component.html',
-    styleUrls: ['node-entries-card.component.scss'],
-})
-export class NodeEntriesCardComponent<T extends Node> implements OnChanges, OnInit {
-    readonly InteractionType = InteractionType;
-    readonly Target = Target;
-    readonly ClickSource = ClickSource;
-    readonly CustomFieldSpecialType = CustomFieldSpecialType;
-    @Input() dropdown: DropdownComponent;
-
-    @ViewChild('menuTrigger') menuTrigger: MatMenuTrigger;
-
-    @Input() node: T;
-    dropdownLeft: number;
-    dropdownTop: number;
-    showRatings: boolean;
-    isCollection: boolean;
-    constructor(
-        public entriesService: NodeEntriesService<T>,
-        public nodeHelper: NodeHelperService,
-        public applicationRef: ApplicationRef,
-        public configService: ConfigService,
-        public authenticationService: AuthenticationService,
-        public templatesService: NodeEntriesTemplatesService,
-        private nodeEntriesGlobalService: NodeEntriesGlobalService,
-        @Optional() private toast: Toast,
-    ) {}
-
-    ngOnChanges(changes: SimpleChanges): void {
-        this.isCollection = this.nodeHelper.isNodeCollection(changes.node?.currentValue);
-    }
-
-    getTextColor() {
-        return ColorHelper.getPreferredColor(this.node.collection.color) === PreferredColor.Black
-            ? '#000'
-            : '#fff';
-    }
-    optionsOnCard() {
-        const options = this.entriesService.options[Target.List];
-        const always = options.filter((o) => o.showAlways);
-        if (always.some((o) => o.showCallback(this.node))) {
-            return always;
-        }
-        // we do NOT show any additional actions
-        return [];
-        // return options.filter((o) => o.showAsAction && o.showCallback(this.node)).slice(0, 3);
-    }
-
-    openContextmenu(event: MouseEvent | Event) {
-        event.stopPropagation();
-        event.preventDefault();
-        if (!this.dropdown) {
-            // Call `preventDefault()` even when there is no menu, so we can use `cdkDrag` with a
-            // start delay without being interrupted by the standard long-tap action.
-            return;
-        }
-        if (event instanceof MouseEvent) {
-            ({ clientX: this.dropdownLeft, clientY: this.dropdownTop } = event);
-        } else {
-            ({ x: this.dropdownLeft, y: this.dropdownTop } = (
-                event.target as HTMLElement
-            ).getBoundingClientRect());
-        }
-        if (!this.entriesService.selection.selected.includes(this.node)) {
-            this.entriesService.selection.clear();
-            this.entriesService.selection.select(this.node);
-        }
-        // Wait for the menu to reflect changed options.
-        setTimeout(() => {
-            if (this.dropdown.canShowDropdown()) {
-                this.menuTrigger.openMenu();
-            } else {
-                this.toast.toast('NO_AVAILABLE_OPTIONS');
-            }
-        });
-    }
-
-    getVisibleColumns() {
-        return this.entriesService.columns?.filter((c) => c.visible);
-    }
-
-    async openMenu(node: T) {
-        this.entriesService.selection.clear();
-        this.entriesService.selection.select(node);
-        await this.applicationRef.tick();
-        this.dropdown.menu.focusFirstItem();
-    }
-
-    async ngOnInit() {
-        await this.configService.observeConfig().pipe(take(1)).toPromise();
-        this.showRatings =
-            this.configService.instant('', 'none') !== 'none' &&
-            (await this.authenticationService.hasToolpermission(
-                RestConstants.TOOLPERMISSION_RATE_READ,
-            ));
-    }
-
-    getTemplate(name: CustomFieldSpecialType) {
-        return this.nodeEntriesGlobalService.getCustomFieldTemplate(
-            {
-                type: 'NODE',
-                name,
-            },
-            this.node as Node,
-        );
-    }
-}

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

@@ -1,261 +0,0 @@
-@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

@@ -1,205 +0,0 @@
-<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>