Motion >> Repos - motion-next.git/blob

   1 <div
   2   id="customizations"
   3   class="page-layout simple left-sidenav inner-sidenav motion-form"
   4 >
   5   <!-- HEADER -->
   6   <div
   7     class="header md-accent-bg"
   8     layout="row"
   9     layout-align="space-between center"
  10   >
  11     <!-- APP TITLE -->
  12     <div layout="row" layout-align="start center">
  13       <div class="logo" layout="row" layout-align="start center">
  14         <span class="logo-icon">
  15           <md-icon md-font-icon="icon-cog" class="s24"></md-icon>
  16         </span>
  17         <span class="logo-text" translate="SETTINGS.CUSTOMIZATIONS"
  18           >Customizations</span
  19         >
  20       </div>
  21     </div>
  22     <!-- / APP TITLE -->
  23
  24     <div>
  25       <md-button
  26         type="submit"
  27         ng-click="vm.saveCustomization()"
  28         ng-disabled="(customizationsForm.$pristine && logoForm.$pristine && logologinForm.$pristine && preferredForm.$pristine && faviconForm.$pristine) || (customizationsForm.$invalid || logoForm.$invalid || logologinForm.$invalid || preferredForm.$invalid || faviconForm.$invalid)"
  29         class="send-button md-accent md-raised"
  30         translate="SETTINGS.SAVE"
  31         translate-attr-aria-label="SETTINGS.SAVE"
  32       >
  33         SAVE
  34       </md-button>
  35     </div>
  36   </div>
  37   <!-- / HEADER -->
  38
  39   <div class="content" md-background-bg layout="row" layout-align="start start">
  40     <!-- MAIN -->
  41     <div class="main scrollable" ms-scroll>
  42       <div
  43         class="customization-detail-form-container customizations motion-form__detail-form-container md-background-bg md-whiteframe-1dp"
  44       >
  45         <div class="pb-16" layout="row" layout-align="start center">
  46           <div class="h2 secondary-text" translate="SETTINGS.CUSTOMIZATIONS">
  47             CUSTOMIZATIONS
  48           </div>
  49         </div>
  50         <form name="customizationsForm" novalidate>
  51           <md-input-container class="md-block">
  52             <md-switch
  53               ng-model="vm.customization.defaultLogo"
  54               aria-label="Default_Logo"
  55               ><span translate="SETTINGS.DEFAULT_LOGO"
  56                 >Default_Logo</span
  57               ></md-switch
  58             >
  59           </md-input-container>
  60           <md-input-container class="md-block">
  61             <md-switch
  62               ng-model="vm.customization.defaultLoginLogo"
  63               aria-label="Default_Login_Logo"
  64               ><span translate="SETTINGS.DEFAULT_LOGIN_LOGO"
  65                 >Default_Login_Logo</span
  66               ></md-switch
  67             >
  68           </md-input-container>
  69           <md-input-container class="md-block">
  70             <md-switch
  71               ng-model="vm.customization.defaultFavicon"
  72               aria-label="Default_Favicon"
  73               ><span translate="SETTINGS.DEFAULT_FAVICON"
  74                 >Default_Favicon</span
  75               ></md-switch
  76             >
  77           </md-input-container>
  78           <md-input-container class="md-block">
  79             <md-switch
  80               ng-model="vm.customization.defaultHeaderWhiteLabel"
  81               aria-label="Default_Header_WhiteLabel"
  82               ><span translate="SETTINGS.DEFAULT_HEADER_WHITELABEL"
  83                 >Default_Header_WhiteLabel</span
  84               ></md-switch
  85             >
  86           </md-input-container>
  87           <md-input-container
  88             ng-if="!vm.customization.defaultHeaderWhiteLabel"
  89             class="md-block"
  90           >
  91             <label translate="SETTINGS.HEADER_WHITELABEL"
  92               >Header_WhiteLabel</label
  93             >
  94             <input
  95               type="text"
  96               name="headerWhiteLabel"
  97               ng-model="vm.customization.headerWhiteLabel"
  98               ng-required="true"
  99             />
 100
 101             <div
 102               ng-messages="customizationsForm['headerWhiteLabel'].$error"
 103               ng-show="customizationsForm['headerWhiteLabel'].$touched"
 104               role="alert"
 105             >
 106               <div ng-message="required">
 107                 <span translate="SETTINGS.ERRORS.HEADER_WHITELABEL_REQUIRED"
 108                   >Header_WhiteLabel field is required</span
 109                 >
 110               </div>
 111             </div>
 112           </md-input-container>
 113           <md-input-container class="md-block">
 114             <md-switch
 115               ng-model="vm.customization.defaultPageTitle"
 116               aria-label="Default_Page_Title"
 117               ><span translate="SETTINGS.DEFAULT_PAGE_TITLE"
 118                 >Default_Page_Title</span
 119               ></md-switch
 120             >
 121           </md-input-container>
 122           <md-input-container
 123             ng-if="!vm.customization.defaultPageTitle"
 124             class="md-block"
 125           >
 126             <label translate="SETTINGS.PAGE_TITLE">Page_Title</label>
 127             <input
 128               type="text"
 129               name="pageTitle"
 130               ng-model="vm.customization.pageTitle"
 131               ng-required="true"
 132             />
 133
 134             <div
 135               ng-messages="customizationsForm['pageTitle'].$error"
 136               ng-show="customizationsForm['pageTitle'].$touched"
 137               role="alert"
 138             >
 139               <div ng-message="required">
 140                 <span translate="SETTINGS.ERRORS.PAGE_TITLE_REQUIRED"
 141                   >Page_Title field is required</span
 142                 >
 143               </div>
 144             </div>
 145           </md-input-container>
 146           <md-input-container ng-if="vm.license.preferred" class="md-block">
 147             <md-switch
 148               ng-model="vm.customization.defaultPreferred"
 149               aria-label="Default_Preferred"
 150               ><span translate="SETTINGS.DEFAULT_PREFERRED"
 151                 >Default_Preferred</span
 152               ></md-switch
 153             >
 154           </md-input-container>
 155         </form>
 156       </div>
 157
 158       <div
 159         ng-if="!vm.customization.defaultLogo"
 160         class="customization-detail-form-container logo motion-form__detail-form-container md-background-bg md-whiteframe-1dp"
 161       >
 162         <div class="pb-16" layout="row" layout-align="start center">
 163           <div class="h2 secondary-text" translate="SETTINGS.LOGO">LOGO</div>
 164         </div>
 165         <div
 166           ng-controller="CustomizationlogoController as vm_cl"
 167           ng-init="vm_cl.init(vm.customization)"
 168           class="customization-detail-form-container md-background-bg md-whiteframe-1dp"
 169         >
 170           <div
 171             id="customization-image-uploader motion-card-view__image-uploader"
 172             flow-init="vm_cl.ngFlowOptions"
 173             flow-name="vm_cl.ngFlow.flow"
 174             flow-files-submitted="vm_cl.upload()"
 175             flow-file-added="vm_cl.fileAdded($file)"
 176             flow-file-success="vm_cl.fileSuccess($file, $message)"
 177             flow-complete="vm_cl.uploadComplete()"
 178             flow-drop
 179             flow-drag-enter="vm_cl.dropping=true"
 180             flow-drag-leave="vm_cl.dropping=false"
 181             ng-class="{'dropping':vm.dropping}"
 182           >
 183             <div
 184               class="drop-text hint-text"
 185               layout="row"
 186               layout-align="center center"
 187             >
 188               <span translate="EC.DROP_TO_UPLOAD">Drop to upload</span>
 189             </div>
 190
 191             <div
 192               class="upload-button"
 193               layout="column"
 194               layout-align="center center"
 195             >
 196               <md-button class="md-accent md-raised" flow-btn>
 197                 Upload
 198               </md-button>
 199               <span class="secondary-text mt-8"
 200                 >You can also drop images here to upload. Only PNG, JPG - Max.
 201                 8MB</span
 202               >
 203             </div>
 204
 205             <div layout="row" layout-align="start start" layout-wrap>
 206               <div
 207                 ng-repeat="logoimage in vm_cl.customization.images"
 208                 ng-switch="logoimage.type"
 209               >
 210                 <div
 211                   class="customization-image motion-card-view__image uploading"
 212                   ng-switch-when="uploading"
 213                   layout="row"
 214                   layout-align="center center"
 215                 >
 216                   <div
 217                     class="overlay"
 218                     layout="column"
 219                     layout-align="center center"
 220                   >
 221                     <md-progress-linear
 222                       md-mode="determinate"
 223                       value="{{logoimage.file.progress() * 100}}"
 224                     >
 225                     </md-progress-linear>
 226                   </div>
 227                   <img class="media" flow-img="logoimage.file" />
 228                 </div>
 229
 230                 <div
 231                   class="customization-image motion-card-view__image-uploader"
 232                   ng-switch-when="image"
 233                   layout="row"
 234                   layout-align="center center"
 235                 >
 236                   <img class="media" ng-src="{{logoimage.url}}" />
 237                 </div>
 238               </div>
 239             </div>
 240           </div>
 241         </div>
 242       </div>
 243
 244       <div
 245         ng-if="!vm.customization.defaultLoginLogo"
 246         class="customization-detail-form-container logologin motion-form__detail-form-container md-background-bg md-whiteframe-1dp"
 247       >
 248         <div class="pb-16" layout="row" layout-align="start center">
 249           <div class="h2 secondary-text" translate="SETTINGS.LOGOLOGIN">
 250             LOGOLOGIN
 251           </div>
 252         </div>
 253         <div
 254           ng-controller="CustomizationlogologinController as vm_cll"
 255           ng-init="vm_cll.init(vm.customization)"
 256           class="customization-detail-form-container md-background-bg md-whiteframe-1dp"
 257         >
 258           <div
 259             id="customization-image-uploader motion-card-view__image-uploader"
 260             flow-init="vm_cll.ngFlowOptions"
 261             flow-name="vm_cll.ngFlow.flow"
 262             flow-files-submitted="vm_cll.upload()"
 263             flow-file-added="vm_cll.fileAdded($file)"
 264             flow-file-success="vm_cll.fileSuccess($file, $message)"
 265             flow-complete="vm_cll.uploadComplete()"
 266             flow-drop
 267             flow-drag-enter="vm_cll.dropping=true"
 268             flow-drag-leave="vm_cll.dropping=false"
 269             ng-class="{'dropping':vm.dropping}"
 270           >
 271             <div
 272               class="drop-text hint-text"
 273               layout="row"
 274               layout-align="center center"
 275             >
 276               <span translate="EC.DROP_TO_UPLOAD">Drop to upload</span>
 277             </div>
 278
 279             <div
 280               class="upload-button"
 281               layout="column"
 282               layout-align="center center"
 283             >
 284               <md-button class="md-accent md-raised" flow-btn>
 285                 Upload
 286               </md-button>
 287               <span class="secondary-text mt-8"
 288                 >You can also drop images here to upload. Only PNG, JPG - Max.
 289                 8MB</span
 290               >
 291             </div>
 292
 293             <div layout="row" layout-align="start start" layout-wrap>
 294               <div
 295                 ng-repeat="logologinimage in vm_cll.customization.images"
 296                 ng-switch="logologinimage.type"
 297               >
 298                 <div
 299                   class="customization-image motion-card-view__image uploading"
 300                   ng-switch-when="uploading"
 301                   layout="row"
 302                   layout-align="center center"
 303                 >
 304                   <div
 305                     class="overlay"
 306                     layout="column"
 307                     layout-align="center center"
 308                   >
 309                     <md-progress-linear
 310                       md-mode="determinate"
 311                       value="{{logologinimage.file.progress() * 100}}"
 312                     >
 313                     </md-progress-linear>
 314                   </div>
 315                   <img class="media" flow-img="logologinimage.file" />
 316                 </div>
 317
 318                 <div
 319                   class="customization-image motion-card-view__image-uploader"
 320                   ng-switch-when="image"
 321                   layout="row"
 322                   layout-align="center center"
 323                 >
 324                   <img class="media" ng-src="{{logologinimage.url}}" />
 325                 </div>
 326               </div>
 327             </div>
 328           </div>
 329         </div>
 330       </div>
 331
 332       <div
 333         ng-if="!vm.customization.defaultPreferred && vm.license.preferred"
 334         class="customization-detail-form-container preferred motion-form__detail-form-container md-background-bg md-whiteframe-1dp"
 335       >
 336         <div class="pb-16" layout="row" layout-align="start center">
 337           <div class="h2 secondary-text" translate="SETTINGS.PREFERRED">
 338             PREFERRED
 339           </div>
 340         </div>
 341         <div
 342           ng-controller="CustomizationpreferredController as vm_cp"
 343           ng-init="vm_cp.init(vm.customization)"
 344           class="customization-detail-form-container md-background-bg md-whiteframe-1dp"
 345         >
 346           <div
 347             id="customization-image-uploader motion-card-view__image-uploader"
 348             flow-init="vm_cp.ngFlowOptions"
 349             flow-name="vm_cp.ngFlow.flow"
 350             flow-files-submitted="vm_cp.upload()"
 351             flow-file-added="vm_cp.fileAdded($file)"
 352             flow-file-success="vm_cp.fileSuccess($file, $message)"
 353             flow-complete="vm_cp.uploadComplete()"
 354             flow-drop
 355             flow-drag-enter="vm_cp.dropping=true"
 356             flow-drag-leave="vm_cp.dropping=false"
 357             ng-class="{'dropping':vm.dropping}"
 358           >
 359             <div
 360               class="drop-text hint-text"
 361               layout="row"
 362               layout-align="center center"
 363             >
 364               <span translate="EC.DROP_TO_UPLOAD">Drop to upload</span>
 365             </div>
 366
 367             <div
 368               class="upload-button"
 369               layout="column"
 370               layout-align="center center"
 371             >
 372               <md-button class="md-accent md-raised" flow-btn>
 373                 Upload
 374               </md-button>
 375               <span class="secondary-text mt-8"
 376                 >You can also drop images here to upload. Only PNG, JPG - Max.
 377                 8MB</span
 378               >
 379             </div>
 380
 381             <div layout="row" layout-align="start start" layout-wrap>
 382               <div
 383                 ng-repeat="preferredimage in vm_cp.customization.images"
 384                 ng-switch="preferredimage.type"
 385               >
 386                 <div
 387                   class="customization-image motion-card-view__image uploading"
 388                   ng-switch-when="uploading"
 389                   layout="row"
 390                   layout-align="center center"
 391                 >
 392                   <div
 393                     class="overlay"
 394                     layout="column"
 395                     layout-align="center center"
 396                   >
 397                     <md-progress-linear
 398                       md-mode="determinate"
 399                       value="{{preferredimage.file.progress() * 100}}"
 400                     >
 401                     </md-progress-linear>
 402                   </div>
 403                   <img class="media" flow-img="preferredimage.file" />
 404                 </div>
 405
 406                 <div
 407                   class="customization-image motion-card-view__image-uploader"
 408                   ng-switch-when="image"
 409                   layout="row"
 410                   layout-align="center center"
 411                 >
 412                   <img class="media" ng-src="{{preferredimage.url}}" />
 413                 </div>
 414               </div>
 415             </div>
 416           </div>
 417         </div>
 418       </div>
 419
 420       <div
 421         ng-if="!vm.customization.defaultFavicon"
 422         class="customization-detail-form-container favicon motion-form__detail-form-container md-background-bg md-whiteframe-1dp"
 423       >
 424         <div class="pb-16" layout="row" layout-align="start center">
 425           <div class="h2 secondary-text" translate="SETTINGS.FAVICON">
 426             FAVICON
 427           </div>
 428         </div>
 429         <div
 430           ng-controller="CustomizationfaviconController as vm_cf"
 431           ng-init="vm_cf.init(vm.customization)"
 432           class="customization-detail-form-container md-background-bg md-whiteframe-1dp"
 433         >
 434           <div
 435             id="customization-image-uploader motion-card-view__image-uploader"
 436             flow-init="vm_cf.ngFlowOptions"
 437             flow-name="vm_cf.ngFlow.flow"
 438             flow-files-submitted="vm_cf.upload()"
 439             flow-file-added="vm_cf.fileAdded($file)"
 440             flow-file-success="vm_cf.fileSuccess($file, $message)"
 441             flow-complete="vm_cf.uploadComplete()"
 442             flow-drop
 443             flow-drag-enter="vm_cf.dropping=true"
 444             flow-drag-leave="vm_cf.dropping=false"
 445             ng-class="{'dropping':vm.dropping}"
 446           >
 447             <div
 448               class="drop-text hint-text"
 449               layout="row"
 450               layout-align="center center"
 451             >
 452               <span translate="EC.DROP_TO_UPLOAD">Drop to upload</span>
 453             </div>
 454
 455             <div
 456               class="upload-button"
 457               layout="column"
 458               layout-align="center center"
 459             >
 460               <md-button class="md-accent md-raised" flow-btn>
 461                 Upload
 462               </md-button>
 463               <span class="secondary-text mt-8"
 464                 >You can also drop images here to upload. Only PNG, JPG, ICO -
 465                 Max. 8MB</span
 466               >
 467             </div>
 468
 469             <div layout="row" layout-align="start start" layout-wrap>
 470               <div
 471                 ng-repeat="faviconimage in vm_cf.customization.images"
 472                 ng-switch="faviconimage.type"
 473               >
 474                 <div
 475                   class="customization-image motion-card-view__image uploading"
 476                   ng-switch-when="uploading"
 477                   layout="row"
 478                   layout-align="center center"
 479                 >
 480                   <div
 481                     class="overlay"
 482                     layout="column"
 483                     layout-align="center center"
 484                   >
 485                     <md-progress-linear
 486                       md-mode="determinate"
 487                       value="{{faviconimage.file.progress() * 100}}"
 488                     >
 489                     </md-progress-linear>
 490                   </div>
 491                   <img class="media" flow-img="faviconimage.file" />
 492                 </div>
 493
 494                 <div
 495                   class="customization-image motion-card-view__image-uploader"
 496                   ng-switch-when="image"
 497                   layout="row"
 498                   layout-align="center center"
 499                 >
 500                   <img class="media" ng-src="{{faviconimage.url}}" />
 501                 </div>
 502               </div>
 503             </div>
 504           </div>
 505         </div>
 506       </div>
 507     </div>
 508     <!-- / MAIN -->
 509   </div>
 510   <!-- / CONTENT -->
 511 </div>