doneit-web/src/app/pages/publications/new-publication/new-publication.page.html

<ion-content>
  <div class="content-container d-flex flex-column">
    <div class="title-content width-100 ">
      <div class="div-title padding">
        <ion-label class="title">{{publicationTitle}}</ion-label> <br>
        <i style="margin-top: -3px; font-size: 15px;" > Campos marcados com * são obrigatórios</i>
        
      </div>
    </div>

    <div class="overflow-y-auto padding">
      <div  *ngIf="publicationType!='1'" class="ion-item-container" [class.input-error]="Form?.get('Subject')?.invalid && validateFrom ">
        <ion-input autocomplete="on" autocorrect="on" spellcheck="true" [(ngModel)]="pub.Title" name="title" ngDefaultControl placeholder="Título*" ></ion-input>
      </div>

      <div *ngIf="publicationType!='1'" class="container-div">
        <div class="ion-item-class-2">
          <div class="ion-icon-class">
            <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
          </div>
          <div class="ion-textarea-class" [class.input-error]="Form?.get('Message')?.invalid && validateFrom ">
            <ion-textarea autocomplete="on" autocorrect="on" spellcheck="true" [(ngModel)]="pub.Message" name="description" ngDefaultControl rows="12" cols="20" placeholder="Corpo de texto*"></ion-textarea>
          </div>
        </div>
      </div>

      <div *ngIf="capturedImage != '' " class="ion-item-container-no-border mb-20">
        <ion-label class="attached-title pb-10">Fotografia Anexada</ion-label>

        <div class="d-flex justify-content-between">
          <div class="d-flex">
            <ion-thumbnail slot="start">

              <ion-img [(ngModel)]="capturedImage" name="image" ngDefaultControl [src]="capturedImage" (click)="imageSize(capturedImage)" ></ion-img>
   
            </ion-thumbnail>
            <ion-label class="pl-10">
              <p>{{capturedImageTitle}}</p>
              <p hidden>size</p>
            </ion-label>
          </div>

          <div class="font-25" (click)="clear()">
            <ion-icon name="close"></ion-icon>
          </div>
        </div>
      </div>


      <div class="picture d-flex pb-5 hide-desktop" *ngIf="publication && !( publication.FileBase64 == 'data:image/jpg;base64,null' || publication.FileBase64 == '' ) && !capturedImage">
        <div  class="post-img" *ngIf="publication.FileBase64">
          <img src="{{publication.FileBase64}}" alt="image" >
        </div>
        <div class="d-flex flex-column pl-10" *ngIf="publication.FileBase64">
          <div class="picture-file-name">{{publication.OriginalFileName}}.{{publication.FileExtension}}</div>
          <!-- <div class="size">75 Kb</div> -->
        </div>
        <div class="flex-grow-1 d-flex align-center justify-end font-25" *ngIf="publication.FileBase64" (click)="deletePublicationImage()">
          <ion-icon name="close"></ion-icon>
        </div>
      </div>

      <div class="ion-item-container-no-border">
        <ion-label (click)="takePicture()">
          <div class="attach-icon">
            <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-add-photo.svg"></ion-icon>
            <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-add-photo.svg"></ion-icon>

          </div>
          <div class="attach-document">
            <ion-label>Tirar Fotografia</ion-label>
          </div>
          </ion-label>
      </div>

      <div class="ion-item-container-no-border">
        <ion-label (click)="laodPicture()" class="cursor-pointer">
          <div class="attach-icon">
            <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-add-photos.svg"></ion-icon>
            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-add-photos.svg"></ion-icon>
          </div>
          <div class="attach-document cursor-pointer">
            <ion-label>Anexar Fotografia</ion-label>
          </div>
      </ion-label>
      </div>
    </div>

  </div>

</ion-content>

<ion-footer class="ion-no-border">
  <ion-toolbar class="footer-toolbar">
    <ion-buttons slot="start">
      <button  class="btn-ok" fill="clear" color="#fff" (click)="save()">
        <ion-label>Gravar</ion-label>
      </button>
    </ion-buttons>
    <ion-buttons slot="end">
      <button class="btn-cancel" fill="clear" color="#061b52" (click)="close()">
        <ion-label>Cancelar</ion-label>
      </button>
    </ion-buttons>
    
  </ion-toolbar>
</ion-footer>