client/src/app/+my-account/my-account-settings/my-account-settings.component.html

   1 <div class="form-row"> <!-- profile grid -->
   2   <div class="form-group col-12 col-lg-4 col-xl-3">
   3     <div i18n class="account-title">PROFILE</div>
   4   </div>
   5
   6   <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
   7     <my-actor-avatar-info [actor]="user.account" (avatarChange)="onAvatarChange($event)"></my-actor-avatar-info>
   8
   9     <div class="user-quota mb-3">
  10       <div>
  11         <div class="progress" i18n-title title="Total video quota">
  12           <div class="progress-bar" role="progressbar" [style]="{ width: userVideoQuotaPercentage + '%' }" [attr.aria-valuenow]="userVideoQuotaUsed" aria-valuemin="0" [attr.aria-valuemax]="userVideoQuota">{{ userVideoQuotaUsed | bytes: 0 }}</div>
  13           <span class="ml-auto mr-2">{{ userVideoQuota }}</span>
  14         </div>
  15       </div>
  16
  17       <div *ngIf="hasDailyQuota()" class="mt-3">
  18         <div class="progress" i18n-title title="Daily video quota">
  19           <div class="progress-bar secondary" role="progressbar" [style]="{ width: userVideoQuotaDailyPercentage + '%' }" [attr.aria-valuenow]="userVideoQuotaUsedDaily" aria-valuemin="0" [attr.aria-valuemax]="userVideoQuotaDaily">{{ userVideoQuotaUsedDaily | bytes: 0 }}</div>
  20           <span class="ml-auto mr-2">{{ userVideoQuotaDaily }}</span>
  21         </div>
  22       </div>
  23     </div>
  24
  25     <my-account-profile [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-profile>
  26   </div>
  27 </div>
  28
  29 <div class="form-row mt-5"> <!-- video settings grid -->
  30   <div class="form-group col-12 col-lg-4 col-xl-3">
  31     <div class="anchor" id="video-settings"></div> <!-- video settings anchor -->
  32     <div i18n class="account-title">VIDEO SETTINGS</div>
  33   </div>
  34
  35   <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
  36     <my-account-video-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-video-settings>
  37   </div>
  38 </div>
  39
  40 <div class="form-row mt-5"> <!-- notifications grid -->
  41   <div class="form-group col-12 col-lg-4 col-xl-3">
  42     <div class="anchor" id="notifications"></div> <!-- notifications anchor -->
  43     <div i18n class="account-title">NOTIFICATIONS</div>
  44   </div>
  45
  46   <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
  47     <my-account-notification-preferences [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-notification-preferences>
  48   </div>
  49 </div>
  50
  51 <div class="form-row mt-5"> <!-- interface grid -->
  52   <div class="form-group col-12 col-lg-4 col-xl-3">
  53     <div i18n class="account-title">INTERFACE</div>
  54   </div>
  55
  56   <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
  57     <my-account-interface-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-interface-settings>
  58   </div>
  59 </div>
  60
  61 <div class="form-row mt-5"> <!-- password grid -->
  62   <div class="form-group col-12 col-lg-4 col-xl-3">
  63     <div i18n class="account-title">PASSWORD</div>
  64   </div>
  65
  66   <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
  67     <my-account-change-password></my-account-change-password>
  68   </div>
  69 </div>
  70
  71 <div class="form-row mt-5"> <!-- email grid -->
  72   <div class="form-group col-12 col-lg-4 col-xl-3">
  73     <div i18n class="account-title">EMAIL</div>
  74   </div>
  75
  76   <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
  77     <my-account-change-email></my-account-change-email>
  78   </div>
  79 </div>
  80
  81 <div class="form-row mt-5"> <!-- danger zone grid -->
  82   <div class="form-group col-12 col-lg-4 col-xl-3">
  83     <div i18n class="account-title">DANGER ZONE</div>
  84   </div>
  85
  86   <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
  87     <my-account-danger-zone [user]="user"></my-account-danger-zone>
  88   </div>
  89 </div>