extensions/objects/templates/image-editor.component.html - develop - githubmirror/oppia

extensions/objects/templates/image-editor.component.html
322 строки10 KB
Rohan Malhotra
Fix#15102 No alert message is shown when a SVG with misspelled 'svg' tag (#25249)
13 мар 2026, 18:02
13 мар 2026, 18:026f343a7
<div class="filepath-editor">
  <div class="filepath-editor-main-container">
    <div *ngIf="isImageUploaded()"
         class="filepath-editor-img-toolbar"
         [attr.style]="getToolbarDynamicStyles()">
      <div class="filepath-editor-img-toolbar-resize">
        Resize to:
        <span class="filepath-editor-button filepath-editor-decrease-size"
              (click)="decreaseResizePercent(10)">-
        </span>
        <span class="filepath-editor-resize-input">
          {{ getCurrentResizePercent() }} %
        </span>
        <span class="filepath-editor-button filepath-editor-increase-size"
              (click)="increaseResizePercent(10)">+
        </span>
      </div>
      <div class="filepath-editor-img-toolbar-size">
        Image Size:
        <span>{{ calculateTargetImageDimensions().width }}</span>
        &times;
        <span> {{ calculateTargetImageDimensions().height }} </span>
        <i class="fas fa-question-circle"
           *ngIf="getImageSizeHelp() !== null"
           title="{{getImageSizeHelp()}}">
        </i>
      </div>
    </div>
    <div class="filepath-editor-image-container"
         [attr.style]="getImageContainerDynamicStyles()">
      <div *ngIf="isNoImageUploaded()">
        <oppia-image-receiver (fileChanged)="onFileChanged($event)"
                              [allowedImageFormats]="allowedImageFormats"
                              [maxImageSizeInKB]="100"
                              >
        </oppia-image-receiver>
      </div>
      <div *ngIf="isImageUploaded()"
           class="filepath-editor-image-crop-container"
           (mousemove)="onMouseMoveOnImageArea($event)">
        <div *ngIf="isUserCropping()"
             class="filepath-editor-image-shade-overlay">
        </div>
        <div class="filepath-editor-crop-area"
             *ngIf="imageResizeRatio === 1 && isCropAllowed()"
             [attr.style]="getCropAreaDynamicStyles()"
             (mousedown)="onMouseDownOnCropArea($event)"
             (mouseup)="onMouseUpOnCropArea($event)">
        </div>
        <div *ngIf="isUserCropping()"
             class="filepath-editor-image-crop-button-bar"
             [attr.style]="getCropButtonBarDynamicStyles()">
          <div class="filepath-editor-button filepath-editor-crop-button"
               (click)="confirmCropImage()">
            Crop
          </div>
          <div class="filepath-editor-button filepath-editor-crop-button"
               (click)="cancelCropImage()">
            Cancel
          </div>
        </div>
        <img [src]="data.metadata.uploadedImageData"
             [attr.style]="getUploadedImageDynamicStyles()">
      </div>
      <div *ngIf="isImageSaved()">
        <div class="filepath-editor-saved-image-container">
          <i class="material-icons filepath-editor-trash"
             (click)="resetFilePathEditor()"
             title="Delete this image">
            &#xE872;
          </i>
          <img [src]="data.metadata.savedImageUrl" [ngStyle]="imageContainerStyle">
        </div>
      </div>
    </div>
    <div *ngIf="isImageUploaded()" class="filepath-editor-save-box">
      <button *ngIf="!imageIsUploading; else Loading"
              type="button"
              class="btn btn-success filepath-editor-use e2e-test-use-image"
              (click)="saveUploadedFile()"
              [disabled]="isUserCropping()">
        Use This Image
      </button>
      <ng-template #Loading>
        <button class="btn btn-success filepath-editor-use"
                type="button"
                disabled>
          <span class="spinner-border spinner-border-md"
                role="status"
                aria-hidden="true">
          </span>
          Uploading..
        </button>
      </ng-template>
      <button type="button"
              class="btn btn-secondary filepath-editor-discard"
              (click)="discardUploadedFile()"
              [disabled]="isUserCropping()">
        Discard
      </button>
    </div>
    <div *ngIf="invalidTagsAndAttributes.tags.length || invalidTagsAndAttributes.attrs.length"
         class="oppia-form-error oppia-unsupported-svg-tag-attribute-error"
         [innerHTML]="'I18N_INVALID_TAGS_AND_ATTRIBUTES_ALERT' | translate: { issueURL: svgSanitizerService.getIssueURL(invalidTagsAndAttributes) }"
    ></div>
    <div class="oppia-form-error" *ngIf="invalidImageWarningIsShown">
      Error: Could not read image file.
    </div>
    <div class="oppia-form-error oppia-processed-image-too-large-error" *ngIf="processedImageIsTooLarge">
      The processed image is too large to upload. Please try cropping or resizing the current image.
    </div>
  </div>
</div>
<style>
  .filepath-editor .filepath-editor-saved-image-container img {
    background-color: white;
  }

  .filepath-editor .filepath-editor-saved-image-container {
    background-color: red;
    display: inline-block;
    margin: 0 auto;
    position: relative;
  }

  .filepath-editor .filepath-editor-main-container {
    margin: 0 auto;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
  }

  .filepath-editor .filepath-editor-main-container .oppia-form-error {
    word-break: break-word;
  }

  .filepath-editor .filepath-editor-crop-button {
    margin: 0 4px 4px 4px;
    width: 50px;
  }

  .filepath-editor .filepath-editor-image-crop-button-bar {
    position: absolute;
    z-index: 20;
  }

  .filepath-editor .filepath-editor-image-shade-overlay {
    background-color: rgba(80, 80, 80, 0.4);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
  }

  .filepath-editor .filepath-editor-image-crop-container {
    display: inline-block;
    margin: auto;
    position: relative;
  }

  .filepath-editor .filepath-editor-crop-area {
    border: 3px dotted blue;
    margin: auto;
    position: absolute;
    z-index: 20;
  }

  .filepath-editor .filepath-editor-resize-input {
    border: 1px solid #ccc;
    display: inline-block;
    font-size: 12px;
    font-weight: normal;
    height: 24px;
    padding: 4px 2px;
    text-align: right;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 40px;
  }

  .filepath-editor .filepath-editor-button {
    background: grey;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f2f2f2), color-stop(1, #d0d0d0));
    background-image: -o-linear-gradient(bottom, #f2f2f2 0%, #d0d0d0 100%);
    background-image: -moz-linear-gradient(bottom, #f2f2f2 0%, #d0d0d0 100%);
    background-image: -webkit-linear-gradient(bottom, #f2f2f2 0%, #d0d0d0 100%);
    background-image: -ms-linear-gradient(bottom, #f2f2f2 0%, #d0d0d0 100%);
    background-image: linear-gradient(to bottom, #f2f2f2 0%, #d0d0d0 100%);
    cursor: default;
    font-size: 12px;
    font-weight: normal;
    height: 24px;
    padding: 4px 8px;
    text-align: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .filepath-editor .filepath-editor-button:hover {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d0d0d0), color-stop(1, #d0d0d0));
    background-image: -o-linear-gradient(bottom, #d0d0d0 0%, #d0d0d0 100%);
    background-image: -moz-linear-gradient(bottom, #d0d0d0 0%, #d0d0d0 100%);
    background-image: -webkit-linear-gradient(bottom, #d0d0d0 0%, #d0d0d0 100%);
    background-image: -ms-linear-gradient(bottom, #d0d0d0 0%, #d0d0d0 100%);
    background-image: linear-gradient(to bottom, #d0d0d0 0%, #d0d0d0 100%);
    cursor: pointer;
  }

  .filepath-editor .filepath-editor-button:active {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #b0b0b0), color-stop(1, #b0b0b0));
    background-image: -o-linear-gradient(bottom, #b0b0b0 0%, #b0b0b0 100%);
    background-image: -moz-linear-gradient(bottom, #b0b0b0 0%, #b0b0b0 100%);
    background-image: -webkit-linear-gradient(bottom, #b0b0b0 0%, #b0b0b0 100%);
    background-image: -ms-linear-gradient(bottom, #b0b0b0 0%, #b0b0b0 100%);
    background-image: linear-gradient(to bottom, #b0b0b0 0%, #b0b0b0 100%);
  }

  .filepath-editor .filepath-editor-decrease-size {
    border-bottom: solid #ccc 1px;
    border-bottom-left-radius: 2px;
    border-left: solid #ccc 1px;
    border-right: none;
    border-top: solid #ccc 1px;
    border-top-left-radius: 2px;
    display: inline-block;
    width: 22px;
  }

  .filepath-editor .filepath-editor-increase-size {
    border-bottom: solid #ccc 1px;
    border-bottom-right-radius: 2px;
    border-left: none;
    border-right: solid #ccc 1px;
    border-top: solid #ccc 1px;
    border-top-right-radius: 2px;
    display: inline-block;
    width: 22px;
  }

  .filepath-editor .filepath-editor-img-toolbar-size {
    width: 300;
  }

  .filepath-editor .filepath-editor-img-toolbar-size i {
    color: red;
    cursor: default;
    font-size: 18px;
    padding-bottom: 3px;
  }

  .filepath-editor .filepath-editor-img-toolbar-resize {
    float: right;
    text-align: right;
  }

  .filepath-editor .filepath-editor-img-toolbar {
    padding: 4px;
    text-align: left;
  }

  .filepath-editor .filepath-editor-image-container {
    position: relative;
    text-align: center;
  }

  .filepath-editor .filepath-editor-trash {
    color: black;
    position: absolute;
    right: 6px;
    text-shadow: 0 0 1px #fff;
    top: 6px;
  }

  .filepath-editor .filepath-editor-save-box {
    margin-top: 6px;
    text-align: right;
  }

  .filepath-editor .filepath-editor-save-box button {
    margin-left: 6px;
  }

  .filepath-editor .oppia-unsupported-svg-tag-attribute-error,
  .filepath-editor .oppia-processed-image-too-large-error {
    margin-top: 15px;
  }

  .oppia-unsupported-svg-tag-attribute-error {
    background-color: #fcf8e3;
    border-color: #faebcc;
    color: #8a6d3b;
    padding: 10px;
  }
  @media(max-width:540px) {
    .filepath-editor .filepath-editor-image-container {
      text-align: left;
    }

    .filepath-editor .filepath-editor-img-toolbar-resize {
      float: none;
      text-align: left;
    }

    .filepath-editor .filepath-editor-save-box {
      text-align: left;
    }
  }
</style>