diff --git a/docs/release-notes-player.md b/docs/release-notes-player.md index 919805f44fb849824671efa60d58b75f1a420f50..88bd89e6af8a923bdd9237a4b774e0131fb52a15 100644 --- a/docs/release-notes-player.md +++ b/docs/release-notes-player.md @@ -1,5 +1,23 @@ Player ====== +## 1.29.1 +### Verbesserungen +- Ändert die voreingestellte Hintergrundfarbe bei Ablegelisten für Ablegeankündigung +- Ändert die Rahmenfarbe für Eingabefelder, Eingabebereiche, Formeln und Optionsfelder in Lückentexten +- Überarbeitet Mauszeiger für Ablegelisten + - Wird in der Ursprungsliste "Elemente kopieren" benutzt, wird der "Kopieren"-Mauszeiger verwendet + - Ist ein Ablegen nicht erlaubt, wird der "Verboten"-Mauszeiger benutzt + - In allen anderen Fällen (das beinhaltet alle Flächen außerhalb von Ablegelisten) wird der + "Verschieben"-Mauszeiger verwendet + - **Die Darstellung der Mauszeiger ist abhängig vom Betriebssystem** + +## Fehlerbehebungen +- Speichert Änderungen an GeoGebra-Elementen, die durch Benutzung der + Rückgängig- und Wiederherstellen-Knöpfe ausgelöst wurden +- Korrigiert die Ablegeankündigung für leere Ablegelisten +- Verhindert das Ablegen von Elementen, die nicht zu einer Ablegeliste gehören + + ## 1.29.0 ### Verbesserungen - Elemente von Ablegelisten, die nur ein Element zulassen, werden nur dann zentriert dargestellt, @@ -7,10 +25,9 @@ Player - Eingabehilfen bewegen sich innerhalb des sichtbaren Bereichs einer Seite mit, wenn die Seite gescrollt wird -##Fehlerbehebungen -- Stellt die erreichte Sichtbarkeit von Abschnitte mit eingestellter Verzögerung beim erneuten Laden einer - Unit wieder her - +## Fehlerbehebungen +- Stellt die erreichte Sichtbarkeit von Abschnitten mit eingestellter Verzögerung + beim erneuten Laden einer Unit wieder her Folgendes ist zu beachten: - Abschnitte mit eingestellter Verzögerung dürfen nicht leer sein - Bereits verstrichene Zeit kann beim erneuten Laden berücksichtigt werden diff --git a/package.json b/package.json index 3e60084ac86c41d521390f89d5a2659ae31cb9c3..cdf163494fee28be26b0baea51ed61a8773be1ee 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { "name": "verona-modules-aspect", "config": { - "player_version": "1.29.0", - "editor_version": "1.36.0", + "player_version": "1.29.1", + "editor_version": "1.36.1", "unit_definition_version": "3.9.0" }, "scripts": { diff --git a/projects/common/assets/common-styles.css b/projects/common/assets/common-styles.css index c3673bb6063c62539b51b81633e7867d04b815b1..ab47f0d4a023db80260a2367c924424acd26c328 100644 --- a/projects/common/assets/common-styles.css +++ b/projects/common/assets/common-styles.css @@ -65,13 +65,3 @@ blockquote p { .cdk-drag-dragging { cursor: grabbing; } - -math-field { - border-radius: 4px; - outline: 1px solid rgba(0, 0, 0, 0.12); - padding: 8px; -} - -math-field:focus { - outline-color: #3f51b5; -} diff --git a/projects/common/assets/customTheme.scss b/projects/common/assets/customTheme.scss index 0583975c3670e258460d9e741f4acb75f53b6aa3..23901b4f0ce156b25a40627d26ecaa455a146dfe 100644 --- a/projects/common/assets/customTheme.scss +++ b/projects/common/assets/customTheme.scss @@ -1,6 +1,8 @@ @use '../../../node_modules/@angular/material/index' as mat; @import '../../../node_modules/@angular/material/theming'; +$aspect-element-border-color: #ccc; +$aspect-element-border-hover-color: #333; $aspect-primary: mat.define-palette(mat.$pink-palette); $aspect-accent: mat.define-palette($mat-cyan, 900); $aspect-theme: mat.define-light-theme(( @@ -10,3 +12,33 @@ $aspect-theme: mat.define-light-theme(( @include mat.checkbox-color($aspect-theme); @include mat.radio-color($aspect-theme); @include mat.slider-color($aspect-theme); + +.mat-form-field-appearance-outline:not(.mat-focused ){ + .mat-form-field-outline { + color: $aspect-element-border-color; + } + &:hover { + .mat-form-field-outline { + color: $aspect-element-border-hover-color; + } + } +} + +.mat-button-toggle-group-appearance-standard { + border-color: $aspect-element-border-color; + .mat-button-toggle+.mat-button-toggle { + border-left-color: $aspect-element-border-color; + } +} + +math-field { + border-radius: 4px; + border: 1px solid $aspect-element-border-color; + padding: 8px; + &:hover { + border-color: $aspect-element-border-hover-color + }; + &:focus { + outline-color: #3f51b5; //TODO $outline-color-primary + } +} diff --git a/projects/common/components/compound-elements/cloze/cloze-child-elements/text-field-simple.component.ts b/projects/common/components/compound-elements/cloze/cloze-child-elements/text-field-simple.component.ts index 14dafbbcd101c3e631267aca3550a6af1a1b4668..8e22a8937727dd58d19fb0be4a5b1a057cea3e5b 100644 --- a/projects/common/components/compound-elements/cloze/cloze-child-elements/text-field-simple.component.ts +++ b/projects/common/components/compound-elements/cloze/cloze-child-elements/text-field-simple.component.ts @@ -37,7 +37,7 @@ import { TextInputComponent } from 'common/directives/text-input-component.direc (blur)="focusChanged.emit({ inputElement: input, focused: false })"> `, styles: [ - '.cloze-child {border: 1px solid rgba(0,0,0,.12); border-radius: 4px;}', + '.cloze-child {border: 1px solid #ccc; border-radius: 4px;}', 'input {width: 100%; height: 100%; padding: 0 2px; box-sizing: border-box}', 'input:hover {border: 1px solid currentColor;}', 'input:focus {border: 1px solid #3f51b5; outline: 0}', diff --git a/projects/common/components/geometry/geometry.component.ts b/projects/common/components/geometry/geometry.component.ts index 75bb4a455b1d3cb66bfa08bf7dcbe99ce82d2d9b..dbb5190df3bfb789e2d102cc18765969e309b3ae 100644 --- a/projects/common/components/geometry/geometry.component.ts +++ b/projects/common/components/geometry/geometry.component.ts @@ -126,7 +126,7 @@ export class GeometryComponent extends ElementComponent implements AfterViewInit this.geoGebraApi.registerClearListener(() => { this.geometryUpdated.emit(); }); - this.geoGebraApi.registerStoreUndoListener(() => { + this.geoGebraApi.registerClientListener(() => { this.geometryUpdated.emit(); }); } diff --git a/projects/common/components/input-elements/drop-list.component.ts b/projects/common/components/input-elements/drop-list.component.ts index 4a67442a1c729704a50b02604eff005508aa3f04..15c390e1e2fe072b09a5dc18708f3b15513a1147 100644 --- a/projects/common/components/input-elements/drop-list.component.ts +++ b/projects/common/components/input-elements/drop-list.component.ts @@ -13,10 +13,10 @@ import { FormElementComponent } from '../../directives/form-element-component.di <div class="list" [id]="elementModel.id" [fxLayout]="elementModel.orientation | droplistLayout" [fxLayoutAlign]="elementModel.orientation | droplistLayoutAlign" - [class.vertical-orientation] = "elementModel.orientation === 'vertical'" - [class.horizontal-orientation] = "elementModel.orientation === 'horizontal'" - [class.cloze-context] = "clozeContext" - [class.only-one-item]= "elementModel.onlyOneItem" + [class.vertical-orientation]="elementModel.orientation === 'vertical'" + [class.horizontal-orientation]="elementModel.orientation === 'horizontal'" + [class.cloze-context]="clozeContext" + [class.only-one-item]="elementModel.onlyOneItem" [style.min-height.px]="elementModel.position?.useMinHeight || clozeContext ? elementModel.height : undefined" [style.color]="elementModel.styling.fontColor" [style.font-family]="elementModel.styling.font" @@ -32,14 +32,15 @@ import { FormElementComponent } from '../../directives/form-element-component.di tabindex="0" (focusout)="elementFormControl.markAsTouched()" (drop)="drop($event)" (dragenter)="dragEnterList($event)" (dragleave)="dragLeaveList($event)" - (dragover)="$event.preventDefault()"> - <!--Add dummy div - otherwise the empty list in cloze context will not be in one line--> - <div *ngIf="viewModel.length === 0" - [style.min-height.px]="elementModel.height - 4" - fxLayout="row" - [fxLayoutAlign]="'center center'"> - <span> </span> - </div> + (dragover)="setDropEffect($event)"> + <!--Add dummy div - otherwise the empty list in cloze context will not be in one line--> + <div *ngIf="viewModel.length === 0" + [style.min-height.px]="elementModel.height - 4" + [style.pointer-events]="'none'" + fxLayout="row" + [fxLayoutAlign]="'center center'"> + <span> </span> + </div> <ng-container *ngFor="let dropListValueElement of viewModel let index = index;"> <div *ngIf="!dropListValueElement.imgSrc" class="list-item" @@ -87,9 +88,9 @@ import { FormElementComponent } from '../../directives/form-element-component.di '.error-message {font-size: 75%; margin-top: 10px; margin-left: 3px;}', '.error-message {position: absolute; bottom: 3px; pointer-events: none;}', '.list-item {cursor: grab;}', - '.list-item:active {cursor: grabbing}', + '.list-item:active {cursor: grabbing;}', '.show-as-placeholder {opacity: 0.5 !important; pointer-events: none;}', - '.highlight-valid-drop {background-color: lightblue !important;}', + '.highlight-valid-drop {background-color: #ccc !important;}', '.highlight-as-receiver {padding: 0; border: 2px solid;}', '.show-as-hidden {visibility: hidden;}' ] @@ -120,6 +121,8 @@ export class DropListComponent extends FormElementComponent implements OnInit, A ngAfterViewInit() { DropListComponent.dragAndDropComponents[this.elementModel.id] = this; + // Prevent 'forbidden' cursor outside of drop lists + document.addEventListener('dragover', (event => event.preventDefault())); } // TODO method names @@ -172,7 +175,7 @@ export class DropListComponent extends FormElementComponent implements OnInit, A dragImage.style.maxWidth = `${(baseElement as HTMLElement).offsetWidth}px`; dragImage.style.fontSize = `${this.elementModel.styling.fontSize}px`; dragImage.style.borderRadius = '5px'; - dragImage.style.padding = '10px'; + dragImage.style.padding = '10px 20px'; // Leave space for cursor document.body.appendChild(dragImage); return dragImage; } @@ -193,11 +196,23 @@ export class DropListComponent extends FormElementComponent implements OnInit, A this.placeHolderIndex = targetIndex; } - dragEnterList(event: DragEvent) { + setDropEffect(event: DragEvent) { event.preventDefault(); + if (!event.dataTransfer) return; + if (this.isDropAllowed()) { + if ((DropListComponent.sourceList as DropListComponent).elementModel.copyOnDrop) { + event.dataTransfer.dropEffect = 'copy'; + } else { + event.dataTransfer.dropEffect = 'move'; + } + } else { + event.dataTransfer.dropEffect = 'none'; + } + } - if (!this.isDropAllowed((DropListComponent.sourceList as DropListComponent).elementModel.connectedTo)) return; - + dragEnterList(event: DragEvent) { + event.preventDefault(); + if (!this.isDropAllowed()) return; if (!this.elementModel.isSortList) { this.highlightValidDrop = true; } else if (DropListComponent.sourceList !== this) { @@ -226,20 +241,20 @@ export class DropListComponent extends FormElementComponent implements OnInit, A } // if drop is allowed that means item transfer between non-sort lists - if (this.isDropAllowed((DropListComponent.sourceList as DropListComponent).elementModel.connectedTo)) { + if (this.isDropAllowed()) { if (!DropListComponent.isItemIDAlreadyPresent(DropListComponent.draggedElement?.id as string, this.elementFormControl.value) && - !(this.elementModel.onlyOneItem && this.viewModel.length > 0)) { // normal drop + !(this.elementModel.onlyOneItem && this.viewModel.length > 0)) { // normal drop if (!DropListComponent.sourceList?.elementModel.copyOnDrop) { // remove source item if not copy DropListComponent.removeElementFromList(DropListComponent.sourceList as DropListComponent, DropListComponent.sourceList?.placeHolderIndex as number); } DropListComponent.addElementToList(this, DropListComponent.draggedElement as DragNDropValueObject); } else if (DropListComponent.isItemIDAlreadyPresent(DropListComponent.draggedElement?.id as string, this.elementFormControl.value) && - this.elementModel.deleteDroppedItemWithSameID) { // put back (return) item + this.elementModel.deleteDroppedItemWithSameID) { // put back (return) item DropListComponent.removeElementFromList(DropListComponent.sourceList as DropListComponent, DropListComponent.sourceList?.placeHolderIndex as number); } else if (this.elementModel.onlyOneItem && this.viewModel.length > 0 && - this.viewModel[0].returnToOriginOnReplacement) { // replace + this.viewModel[0].returnToOriginOnReplacement) { // replace const originListComponent = DropListComponent.dragAndDropComponents[this.viewModel[0].originListID as string]; const isItemIDAlreadyPresent = DropListComponent.isItemIDAlreadyPresent(this.viewModel[0].id, originListComponent.elementFormControl.value); @@ -266,12 +281,14 @@ export class DropListComponent extends FormElementComponent implements OnInit, A onlyOneItem && itemcount = 1 && this.viewModel[0].returnToOriginOnReplacement) // verdraengen - (! id already present) || id already present && deleteDroppedItemWithSameID // zuruecklegen */ - isDropAllowed(connectedDropLists: string[]): boolean { + isDropAllowed(): boolean { + if (!DropListComponent.sourceList) return false; const sameList = DropListComponent.sourceList === this; + const connectedDropLists = (DropListComponent.sourceList as DropListComponent).elementModel.connectedTo; const isConnectedList = (connectedDropLists as string[]).includes(this.elementModel.id); return (sameList) || (isConnectedList && - !this.isOnlyOneItemAndNoReplacingOrReturning() && - !this.isIDPresentAndNoReturning()); + !this.isOnlyOneItemAndNoReplacingOrReturning() && + !this.isIDPresentAndNoReturning()); } isIDPresentAndNoReturning(): boolean { @@ -286,8 +303,8 @@ export class DropListComponent extends FormElementComponent implements OnInit, A isOnlyOneItemAndNoReplacingOrReturning(): boolean { return this.elementModel.onlyOneItem && this.viewModel.length > 0 && !((this.viewModel[0].returnToOriginOnReplacement && !this.elementModel.isSortList) || - (this.elementModel.deleteDroppedItemWithSameID && - DropListComponent.draggedElement?.id === this.viewModel[0].id)); + (this.elementModel.deleteDroppedItemWithSameID && + DropListComponent.draggedElement?.id === this.viewModel[0].id)); } static isItemIDAlreadyPresent(itemID: string, valueList: DragNDropValueObject[]): boolean { diff --git a/projects/common/math-editor.module.ts b/projects/common/math-editor.module.ts index f794a8560329a187200e938c37d453afbe9e6be8..f0ef08b60aabe26de186960862fb2088cd915e07 100644 --- a/projects/common/math-editor.module.ts +++ b/projects/common/math-editor.module.ts @@ -22,7 +22,7 @@ import { MatButtonToggleChange, MatButtonToggleModule } from '@angular/material/ `, styles: [ 'mat-button-toggle-group {height: 20px;}', - ':host ::ng-deep .read-only math-field {outline: unset}', + ':host ::ng-deep .read-only math-field {outline: unset; border: unset }', ':host ::ng-deep .mat-button-toggle-label-content {line-height: unset}' ] }) diff --git a/projects/common/models/elements/input-elements/drop-list.ts b/projects/common/models/elements/input-elements/drop-list.ts index 45532688d138c1130eccf969388799c7123eec39..25290fca604b7567fe75fa51776919ac2659002e 100644 --- a/projects/common/models/elements/input-elements/drop-list.ts +++ b/projects/common/models/elements/input-elements/drop-list.ts @@ -54,7 +54,7 @@ export class DropListElement extends InputElement { setProperty(property: string, value: UIElementValue): void { super.setProperty(property, value); if (property === 'value' || property === 'id') { - this.value.forEach((dndValue: DragNDropValueObject, index) => { + this.value.forEach((dndValue: DragNDropValueObject, index) => { // foreach to keep the array ref intact this.value[index] = { ...dndValue, originListID: dndValue.returnToOriginOnReplacement ? this.id : undefined,