fix: image settings updates (DEV-2995)

apps/dsp-app/src/app/material-module.ts

@@ -22,6 +22,7 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
@@ -54,6 +55,7 @@ const matModules = [
   MatPaginatorModule,
   MatProgressSpinnerModule,
   MatProgressBarModule,
+  MatRadioModule,
   MatSelectModule,
   MatSidenavModule,
   MatSliderModule,

apps/dsp-app/src/app/project/image-settings/image-settings.component.html

@@ -1,74 +1,86 @@
 <dasch-swiss-centered-layout>
   <dasch-swiss-app-progress-indicator *ngIf="isProjectsLoading$ | async"></dasch-swiss-app-progress-indicator>
   <div class="content large middle" *ngIf="(isProjectsLoading$ | async) === false">
-    <div class="content-container">
+    <div>
       <form *ngIf="form" class="form-content" [formGroup]="form">
-        <div class="large-field aspect">
+        <div class="large-field section">
           <mat-slide-toggle formControlName="isWatermark">
             {{ 'appLabels.form.project.imageSettings.isWatermark' | translate }}
           </mat-slide-toggle>
         </div>
-        <ng-container *ngIf="form.controls.isWatermark.value">
-          <div class="large-field aspect">
-            <mat-slide-toggle formControlName="aspect">
-              {{ 'appLabels.form.project.imageSettings.aspect' | translate }}
-            </mat-slide-toggle>
-          </div>
-          <div *ngIf="form.controls.aspect.value" [@replaceAnimation]>
-            <div class="large-field">
-              <mat-label>
-                {{ 'appLabels.form.project.imageSettings.percentageValue' | translate }}: {{ percentageSlider.value}}%
-              </mat-label>
+        <div class="large-field" *ngIf="form.controls.isWatermark.value">
+          <mat-slide-toggle formControlName="restrictImageSize">
+            {{ 'appLabels.form.project.imageSettings.restrictImageSize' | translate }}
+          </mat-slide-toggle>
+        </div>
+        <ng-container *ngIf="form.controls.restrictImageSize.value && form.controls.isWatermark.value">
+          <div class="content-container">
+            <div class="large-field aspect">
+              <mat-radio-group formControlName="aspect">
+                <mat-radio-button [value]="true">
+                  {{ 'appLabels.form.project.imageSettings.ratio' | translate }}
+                </mat-radio-button>
+                <mat-radio-button [value]="false">
+                  {{ 'appLabels.form.project.imageSettings.fixed' | translate }}
+                </mat-radio-button>
+              </mat-radio-group>
             </div>
-            <mat-slider
-              min="1"
-              max="100"
-              step="1"
-              showTickMarks
-              discrete
-              [displayWith]="formatPercentageLabel"
-              ngDefaultControl
-              formControlName="percentage">
-              <input #percentageSlider matSliderThumb [value]="form.controls.percentage.value" />
-            </mat-slider>
-          </div>
-          <div *ngIf="!form.controls.aspect.value" [@replaceAnimation]>
-            <div class="large-field">
-              <mat-label>
-                {{ 'appLabels.form.project.imageSettings.absoluteWidth' | translate }}: {{
-                projectImageSettings.absoluteWidth }} px
-              </mat-label>
+            <div *ngIf="form.controls.aspect.value" [@replaceAnimation]>
+              <div class="large-field">
+                <mat-label>
+                  {{ 'appLabels.form.project.imageSettings.percentageValue' | translate }}: {{ percentageSlider.value}}%
+                </mat-label>
+              </div>
+              <mat-slider
+                min="10"
+                max="100"
+                step="10"
+                showTickMarks
+                discrete
+                [displayWith]="formatPercentageLabel"
+                ngDefaultControl
+                formControlName="percentage">
+                <input #percentageSlider matSliderThumb [value]="form.controls.percentage.value" />
+              </mat-slider>
             </div>
-            <mat-slider
-              [min]="0"
-              [max]="4"
-              [step]="1"
-              showTickMarks
-              [displayWith]="formatAbsoluteLabel"
-              discrete
-              ngDefaultControl
-              formControlName="absoluteWidthIndex">
-              <input
-                (valueChange)="absoluteSliderChange($event)"
-                [value]="absoluteWidthIndex(projectImageSettings.absoluteWidth)"
-                matSliderThumb />
-            </mat-slider>
+            <div *ngIf="!form.controls.aspect.value" [@replaceAnimation]>
+              <div class="large-field">
+                <mat-label>
+                  {{ 'appLabels.form.project.imageSettings.absoluteWidth' | translate }}: {{
+                  projectImageSettings.absoluteWidth }} px
+                </mat-label>
+              </div>
+              <mat-slider
+                [min]="0"
+                [max]="4"
+                [step]="1"
+                showTickMarks
+                [displayWith]="formatAbsoluteLabel"
+                discrete
+                ngDefaultControl
+                formControlName="absoluteWidthIndex">
+                <input
+                  (valueChange)="absoluteSliderChange($event)"
+                  [value]="absoluteWidthIndex(projectImageSettings.absoluteWidth)"
+                  matSliderThumb />
+              </mat-slider>
+            </div>
+          </div>
+          <div class="content-sidebar" *ngIf="form.controls.restrictImageSize.value && form.controls.isWatermark.value">
+            <img
+              [@replaceAnimation]
+              *ngIf="!form.controls.aspect.value"
+              src="assets/images/image-setting-absolute.png"
+              [alt]="'appLabels.form.project.imageSettings.absolute' | translate" />
+            <img
+              [@replaceAnimation]
+              *ngIf="form.controls.aspect.value"
+              src="assets/images/image-setting-percentage.png"
+              [alt]="'appLabels.form.project.imageSettings.percentage' | translate" />
           </div>
         </ng-container>
       </form>
     </div>
-    <div class="content-sidebar" *ngIf="form.controls.isWatermark.value">
-      <img
-        [@replaceAnimation]
-        *ngIf="!form.controls.aspect.value"
-        src="assets/images/image-setting-absolute.png"
-        [alt]="'appLabels.form.project.imageSettings.absolute' | translate" />
-      <img
-        [@replaceAnimation]
-        *ngIf="form.controls.aspect.value"
-        src="assets/images/image-setting-percentage.png"
-        [alt]="'appLabels.form.project.imageSettings.percentage' | translate" />
-    </div>
     <div class="action-buttons">
       <button
         mat-raised-button

apps/dsp-app/src/app/project/image-settings/image-settings.component.scss

@@ -1,8 +1,10 @@
 @use '../../../styles/responsive' as *;
 
+@use '../../../styles/responsive' as *;
+
 .content {
   .form-content {
-    width: 298px;
+    width: 100%;
   }
 
   .content-sidebar {
@@ -14,9 +16,10 @@
     display: inline-block;
     padding-right: 32px;
     vertical-align: top;
+    max-width: 298px;
   }
 
-  .aspect {
+  .section {
     padding-bottom: 32px;
   }
 

apps/dsp-app/src/app/project/image-settings/image-settings.component.ts

@@ -79,6 +79,7 @@ export class ImageSettingsComponent implements OnInit {
 
           this.projectImageSettings = ProjectImageSettings.GetProjectImageSettings(settings.size);
           this.form.patchValue({
+            restrictImageSize: this.projectImageSettings.restrictImageSize,
             isWatermark: settings.watermark,
             aspect: this.projectImageSettings.aspect,
             percentage: this.projectImageSettings.percentage,
@@ -99,6 +100,7 @@ export class ImageSettingsComponent implements OnInit {
   onSubmit() {
     const request: SetRestrictedViewRequest = {
       size: ProjectImageSettings.FormatToIiifSize(
+        this.form.value.restrictImageSize,
         this.form.value.aspect,
         this.form.value.percentage,
         ProjectImageSettings.AbsoluteWidthSteps[this.form.value.absoluteWidthIndex]
@@ -117,6 +119,7 @@ export class ImageSettingsComponent implements OnInit {
   private _buildForm() {
     this.form = this._fb.group({
       isWatermark: [false, []],
+      restrictImageSize: [false, []],
       aspect: [false, []],
       absoluteWidthIndex: [0, []],
       percentage: [1, []],

apps/dsp-app/src/app/project/image-settings/project-image-settings.ts

@@ -1,6 +1,7 @@
 export class ProjectImageSettings {
   static AbsoluteWidthSteps: number[] = [64, 128, 256, 512, 1024];
 
+  restrictImageSize = false;
   isWatermark: boolean = false;
   aspect: boolean = false;
   absoluteWidth: number = ProjectImageSettings.AbsoluteWidthSteps[0];
@@ -17,14 +18,19 @@ export class ProjectImageSettings {
 
     const isPercentage = size.startsWith('pct');
     return <ProjectImageSettings>{
+      restrictImageSize: !(isPercentage && size.split('pct:').pop() === '100'),
       isWatermark: true,
       aspect: isPercentage,
       absoluteWidth: !isPercentage ? size.substring(1).split(',').pop() : ProjectImageSettings.AbsoluteWidthSteps[0],
       percentage: isPercentage ? size.split('pct:').pop() : 1,
     };
   }
 
-  static FormatToIiifSize(aspect: boolean, percentage: number, width: number): string {
+  static FormatToIiifSize(restrictImageSize: boolean, aspect: boolean, percentage: number, width: number): string {
+    if (!restrictImageSize) {
+      return 'pct:100';
+    }
+
     return aspect ? `pct:${percentage}` : `!${width},${width}`;
   }
 }

apps/dsp-app/src/app/project/settings/settings.component.html

@@ -1,4 +1,10 @@
-<nav mat-tab-nav-bar mat-align-tabs="center" class="settings navigation" animationDuration="0ms" [tabPanel]="tabPanel">
+<nav
+  mat-tab-nav-bar
+  mat-align-tabs="center"
+  class="settings navigation"
+  style="background: none"
+  animationDuration="0ms"
+  [tabPanel]="tabPanel">
   <a
     mat-tab-link
     *ngFor="let link of navigation; trackBy: trackByFn; let first = first"
@@ -7,8 +13,8 @@
     routerLinkActive="active-tab"
     #rla="routerLinkActive"
     [active]="rla.isActive">
-    <mat-icon class="tab-icon">{{link.icon}}</mat-icon>
-    {{link.label}}
+    <mat-icon class="tab-icon">{{ link.icon }}</mat-icon>
+    {{ link.label }}
   </a>
 </nav>
 <mat-tab-nav-panel #tabPanel>

apps/dsp-app/src/app/project/settings/settings.component.ts

@@ -11,8 +11,8 @@ import { MenuItem } from '../../main/declarations/menu-item';
 export class SettingsComponent {
   navigation: MenuItem[] = [
     {
-      label: 'Description',
-      shortLabel: 'Description',
+      label: 'Project Description',
+      shortLabel: 'Project Description',
       route: RouteConstants.edit,
       icon: 'edit_square',
     },
@@ -23,7 +23,7 @@ export class SettingsComponent {
       icon: 'branding_watermark',
     },
     {
-      label: 'Project members',
+      label: 'Project Members',
       shortLabel: 'Members',
       route: RouteConstants.collaboration,
       icon: 'group',

apps/dsp-app/src/assets/i18n/de.json

@@ -110,7 +110,9 @@
         },
         "imageSettings": {
           "isWatermark": "Wasserzeichen anwenden",
-          "aspect": "Aspekt",
+          "ratio": "Verhältnis",
+          "fixed": "feste Breite",
+          "restrictImageSize": "Bildgröße einschränken",
           "absoluteWidth": "absolute Breite",
           "percentageValue": "Prozentwert",
           "percentage": "Prozentsatz",

apps/dsp-app/src/assets/i18n/en.json

@@ -139,7 +139,9 @@
         },
         "imageSettings": {
           "isWatermark": "Apply watermark",
-          "aspect": "Aspect",
+          "ratio": "Ratio",
+          "fixed": "Fixed width",
+          "restrictImageSize": "Restrict image size",
           "absoluteWidth": "Absolute width",
           "percentageValue": "Percentage value",
           "percentage": "Percentage",