File

src/app/manage-learn/shared/components/start-improvement/start-improvement.component.ts

Metadata

Index

Methods
Inputs

Constructor

constructor(popOverCtrl: PopoverController)
Parameters :
Name Type Optional
popOverCtrl PopoverController No

Inputs

header
Type : any
message
Type : any
message1
Type : any

Methods

start
start()
Returns : void
import { Component, Input } from '@angular/core';
import { PopoverController } from '@ionic/angular';
@Component({
  selector: 'app-start-improvement',
  templateUrl: './start-improvement.component.html',
  styleUrls: ['./start-improvement.component.scss'],
})
export class StartImprovementComponent {

  @Input() header;
  @Input() message;
  @Input() message1;
  constructor(
    private popOverCtrl: PopoverController,
  ) { }
  start() {
    this.popOverCtrl.dismiss(true);
  }
}

<ion-header class="sb-popover-header">
  <ion-toolbar class="sb-popover-toolbar">
    <ion-title class="sb-popover-title">{{header| translate}} ?
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="sb-popover-container ion-no-padding">

  <div id="main-content" class="sb-popover-content-details">
    <div class="consent-popover-info">
      <div class="flex-container">
        <div class="footer">
          <div lines="none">
              <p class="cr-terms-checkbox-label">
                <b>{{message | translate }} </b>
                </p>
                <p class="cr-terms-checkbox-label">
                {{message1 | translate }}
                 </p>
          </div>
          <div class="btn-info">
            <button  class="save-changes"
              (click)="start()">{{'FRMELEMNTS_LBL_START_IMPROVEMENT' | translate}}</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</ion-content>

./start-improvement.component.scss

@import "../../../../../assets/styles/base/_variables.scss";
@import "../../../../../assets/styles/_variables.scss";
@import "../../../../../assets/styles/_custom-mixins.scss";

.cr-terms-checkbox-label{
  padding-left: 5px;
}

.cr-terms-checkbox{
  --background-checked: #{$blue};
  --border-color: #{$blue};
  --border-radius: 4px;
  --border-width: 1px;
  --border-color-checked:#{$blue};
}
.cr-input-primary {
  display: inline-flex;
}

.btn-label {
  float: right;
  display: inline-flex;
}

#main-content {
  overflow-y: scroll;
  // background: map-get($colors, white);
}

.consent-popover-info {  
  overflow: hidden;
}

.flex-container {
  width: 100%;
  height: 100%;
  
  display: flex;
  flex-direction: column;
}

.header {  
  flex-grow: 0;
  flex-shrink: 0;
  color: #222222;
  font-family: "Noto Sans", sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0;
  font-weight: bold;
  margin-bottom: 16px;
  @include ltr() {
    text-align: right
  }

  @include rtl() {
    text-align:left;
  }
}

.body {
  
  display: block;
  
  flex-grow: 1;
  flex-shrink: 1;
  height: 38vh;
  overflow-y: scroll;
}

.footer {
  flex-grow: 0;
  flex-shrink: 0;
  padding: 0px 10px;
}
.save-changes{
  color: white;
  background-color: $blue;
  font-size: 1rem;
  padding: 8px 0;
  margin-left: 18px;
  border: 2px solid $blue;
  width: 80%;
}

.btn-info{
  padding: 12px;
  text-align: center;
}

.profile-info{
  color: map-get($colors, granite_gray);
  font-family: "Noto Sans", sans-serif;
  font-size: $font-size-base;
  letter-spacing: 0;
}


.profile-info-section{
  display: grid;
  grid-template-columns: 100px 227px;
}

.share-disabled{
  opacity: 0.5 !important;
  cursor: default;
}

.terms-info{
  color: $blue !important;
}
ion-icon {
  @include ltr {
    float: right !important;
  }
  @include rtl {
    float: left !important;
  }
}
.sb-popover-header {
  border-radius: 4px 4px 0 0;
  background-color: $info-color;
  &::after {
    background-image: none;
  }
  .sb-popover-toolbar {
    min-height: 6rem !important;
    max-height: 6rem !important;
    background-color: $info-color;
    border-radius: 4px 4px 0 0;
    text-align: center;
    //   @include padding(($base-block-space * 0.5), ($base-block-space * 1));
    .toolbar-background {
      border-radius: 4px 4px 0 0;
      background-color: $info-color;
    }
    .sb-popover-close-btn {
      color: $white-color;
    }
    .sb-popover-title {
      font-size: 22px !important;
      font-weight: bold;
      text-align: left !important;
      margin: 10px 0px;
      font-weight: 900;
    }
  }
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""