fix: Remove workaroud with change css host height to 100%

rucken · Mar 4, 2019 · 58ba835 · 58ba835
1 parent acdb61b
commit 58ba835
Show file tree

Hide file tree

Showing 15 changed files with 332 additions and 310 deletions.
diff --git a/apps/demo/src/app/pages/home-page/home-page.component.ts b/apps/demo/src/app/pages/home-page/home-page.component.ts
@@ -1,15 +1,14 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { BindIoInner } from 'ngx-bind-io';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { BindIoInner } from 'ngx-bind-io';
 
 declare var require: any;
 @BindIoInner()
 @Component({
   selector: 'home-page',
   templateUrl: './home-page.component.html',
-  styles: [':host form {height: 100%;}'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class HomePageComponent {

diff --git a/apps/demo/src/app/pages/profile-page/profile-page.component.ts b/apps/demo/src/app/pages/profile-page/profile-page.component.ts
@@ -1,14 +1,13 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { BindIoInner } from 'ngx-bind-io';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { BindIoInner } from 'ngx-bind-io';
 
 @BindIoInner()
 @Component({
   selector: 'profile-page',
   templateUrl: './profile-page.component.html',
-  styles: [':host form {height: 100%;}'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ProfilePageComponent {

diff --git a/libs/rucken/ionic/src/lib/components/entity-modal/entity-modal.component.html b/libs/rucken/ionic/src/lib/components/entity-modal/entity-modal.component.html
@@ -1,33 +1,31 @@
 <prompt-form-modal
-    [title]="title"
-    [message]="message"
-    [infoMessage]="infoMessage"
-    [errorMessage]="errorMessage"
-    [noTitle]="noTitle"
-    [yesTitle]="yesTitle"
-    [readonly]="readonly"
-    (no)="onNoClick()"
-    (yes)="onYesClick()"
-    [data]="data"
-    [processing]="processing$ | async"
-    [disabled]="disabled">
-    <form
-        [formGroup]="form"
-        *ngIf="form"
-        novalidate>
-        <ion-list lines="none">
-            <ng-container *ngFor="let key of keys; let i = index">
-                <form-group
-                    [bindIO]
-                    [name]="key"
-                    [title]="strings[key]">
-                    <ion-input
-                        [formControlName]="key"
-                        [readonly]="readonly"
-                        [autofocus]="i===0">
-                    </ion-input>
-                </form-group>
-            </ng-container>
-        </ion-list>
-    </form>
+    [bindIO]
+    [iconTopYes]="data.id?'checkmark':'add'"
+    [hideFooter]="true">
 </prompt-form-modal>
+<ion-content
+    padding-top
+    [class.readonly_content]="readonly">
+    <prompt-form-modal
+        [bindIO]
+        [hideHeader]="true">
+        <form
+            [formGroup]="form"
+            novalidate>
+            <ion-list lines="none">
+                <ng-container *ngFor="let key of keys; let i = index">
+                    <form-group
+                        [bindIO]
+                        [name]="key"
+                        [title]="strings[key]">
+                        <ion-input
+                            [formControlName]="key"
+                            [readonly]="readonly"
+                            [autofocus]="i===0">
+                        </ion-input>
+                    </form-group>
+                </ng-container>
+            </ion-list>
+        </form>
+    </prompt-form-modal>
+</ion-content>
diff --git a/libs/rucken/ionic/src/lib/components/prompt-form-modal/prompt-form-modal.component.html b/libs/rucken/ionic/src/lib/components/prompt-form-modal/prompt-form-modal.component.html
@@ -1,25 +1,15 @@
-<ng-container *ngTemplateOutlet="hideHeader && hideFooter ? contentTemplateWithoutHeaderAndFooter : defaultContentTemplate"></ng-container>
+<ng-container *ngTemplateOutlet="(hideHeader && hideFooter) ? contentTemplateWithoutHeaderAndFooter : defaultContentTemplate"></ng-container>
 <ng-template #contentTemplateWithoutHeaderAndFooter>
     <ng-content></ng-content>
-    <ion-item lines="none">
-        <ion-label></ion-label>
-    </ion-item>
 </ng-template>
 <ng-template #defaultContentTemplate>
     <ng-container *ngIf="!hideHeader">
         <ng-container *ngTemplateOutlet="headerTemplate?headerTemplate:defaultHeaderTemplate"></ng-container>
     </ng-container>
-    <ion-content
-        padding-top
-        [class.readonly_content]="readonly">
-        <ng-content></ng-content>
-        <ng-container *ngIf="!hideFooter">
-            <ng-container *ngTemplateOutlet="!readonly ? (footerButtonsTemplate?footerButtonsTemplate:defaultFooterButtonsTemplate) : (readonlyFooterButtonsTemplate?readonlyFooterButtonsTemplate:defaultReadonlyFooterButtonsTemplate)"></ng-container>
-        </ng-container>
-        <ion-item lines="none">
-            <ion-label></ion-label>
-        </ion-item>
-    </ion-content>
+    <ng-content></ng-content>
+    <ng-container *ngIf="!hideFooter">
+        <ng-container *ngTemplateOutlet="!readonly ? (footerButtonsTemplate?footerButtonsTemplate:defaultFooterButtonsTemplate) : (readonlyFooterButtonsTemplate?readonlyFooterButtonsTemplate:defaultReadonlyFooterButtonsTemplate)"></ng-container>
+    </ng-container>
 </ng-template>
 <ng-template #defaultHeaderTemplate>
     <ion-header>

diff --git a/libs/rucken/ionic/src/lib/entities/groups/group-modal/group-modal.component.html b/libs/rucken/ionic/src/lib/entities/groups/group-modal/group-modal.component.html
@@ -1,39 +1,48 @@
-<form
-    [formGroup]="form"
-    novalidate>
+<prompt-form-modal
+    [bindIO]
+    [iconTopYes]="data.id?'checkmark':'add'"
+    [hideFooter]="true">
+</prompt-form-modal>
+<ion-content
+    padding-top
+    [class.readonly_content]="readonly">
     <prompt-form-modal
         [bindIO]
-        [iconTopYes]="data.id?'checkmark':'add'">
-        <form-group
-            [bindIO]
-            name="name"
-            [title]="strings.name">
-            <ion-input
-                formControlName="name"
-                [disableControl]="readonly">
-            </ion-input>
-        </form-group>
-        <form-group
-            [bindIO]
-            name="title"
-            [title]="strings.title">
-            <ion-input
-                formControlName="title"
-                [disableControl]="readonly"
-                [autofocus]="true">
-            </ion-input>
-        </form-group>
-        <form-group
-            [bindIO]
-            name="permissions"
-            [title]="strings.permissions">
-            <select-input
-                [items]="permissions$ | async"
-                formControlName="permissions"
-                [yesTitle]="'OK'|translate"
-                [multiple]="true"
-                [disableControl]="readonly">
-            </select-input>
-        </form-group>
+        [hideHeader]="true">
+        <form
+            [formGroup]="form"
+            novalidate>
+            <form-group
+                [bindIO]
+                name="name"
+                [title]="strings.name">
+                <ion-input
+                    formControlName="name"
+                    [disableControl]="readonly">
+                </ion-input>
+            </form-group>
+            <form-group
+                [bindIO]
+                name="title"
+                [title]="strings.title">
+                <ion-input
+                    formControlName="title"
+                    [disableControl]="readonly"
+                    [autofocus]="true">
+                </ion-input>
+            </form-group>
+            <form-group
+                [bindIO]
+                name="permissions"
+                [title]="strings.permissions">
+                <select-input
+                    [items]="permissions$ | async"
+                    formControlName="permissions"
+                    [yesTitle]="'OK'|translate"
+                    [multiple]="true"
+                    [disableControl]="readonly">
+                </select-input>
+            </form-group>
+        </form>
     </prompt-form-modal>
-</form>
+</ion-content>
diff --git a/libs/rucken/ionic/src/lib/entities/groups/group-modal/group-modal.component.ts b/libs/rucken/ionic/src/lib/entities/groups/group-modal/group-modal.component.ts
@@ -1,14 +1,13 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { BasePromptFormModalComponent, Group, Permission } from '@rucken/core';
+import { BindIoInner } from 'ngx-bind-io';
 import { Observable } from 'rxjs';
 import { PermissionsService } from '../../../services/permissions.service';
-import { BindIoInner } from 'ngx-bind-io';
 
 @BindIoInner()
 @Component({
   selector: 'group-modal',
   templateUrl: './group-modal.component.html',
-  styles: [':host form {height: 100%;}'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class GroupModalComponent extends BasePromptFormModalComponent<Group> {

diff --git a/...ies/groups/groups-list/groups-list-filters-modal/groups-list-filters-modal.component.html b/...ies/groups/groups-list/groups-list-filters-modal/groups-list-filters-modal.component.html
@@ -1,29 +1,36 @@
-<form
-    [formGroup]="form"
-    novalidate>
+<prompt-form-modal
+    [bindIO]
+    iconTopYes="checkmark"
+    iconTopNo="close"
+    [hideFooter]="true">
+</prompt-form-modal>
+<ion-content padding-top>
     <prompt-form-modal
         [bindIO]
-        iconTopYes="checkmark"
-        iconTopNo="close">
-        <form-group
-            [bindIO]
-            name="sortField"
-            [title]="strings.sortField">
-            <select-input
-                [items]="sortFields"
-                formControlName="sortField"
-                [disableControl]="readonly">
-            </select-input>
-        </form-group>
-        <form-group
-            [bindIO]
-            name="sortType"
-            [title]="strings.sortType">
-            <select-input
-                [items]="sortTypes"
-                formControlName="sortType"
-                [disableControl]="readonly">
-            </select-input>
-        </form-group>
+        [hideHeader]="true">
+        <form
+            [formGroup]="form"
+            novalidate>
+            <form-group
+                [bindIO]
+                name="sortField"
+                [title]="strings.sortField">
+                <select-input
+                    [items]="sortFields"
+                    formControlName="sortField"
+                    [disableControl]="readonly">
+                </select-input>
+            </form-group>
+            <form-group
+                [bindIO]
+                name="sortType"
+                [title]="strings.sortType">
+                <select-input
+                    [items]="sortTypes"
+                    formControlName="sortType"
+                    [disableControl]="readonly">
+                </select-input>
+            </form-group>
+        </form>
     </prompt-form-modal>
-</form>
+</ion-content>
diff --git a/...ities/groups/groups-list/groups-list-filters-modal/groups-list-filters-modal.component.ts b/...ities/groups/groups-list/groups-list-filters-modal/groups-list-filters-modal.component.ts
@@ -8,7 +8,6 @@ import { BindIoInner } from 'ngx-bind-io';
 @Component({
   selector: 'groups-list-filters-modal',
   templateUrl: './groups-list-filters-modal.component.html',
-  styles: [':host form {height: 100%;}'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class GroupsListFiltersModalComponent extends

diff --git a/libs/rucken/ionic/src/lib/entities/users/profile-panel/profile-panel.component.ts b/libs/rucken/ionic/src/lib/entities/users/profile-panel/profile-panel.component.ts
@@ -2,17 +2,16 @@ import { ChangeDetectionStrategy, Component, Input, isDevMode, OnDestroy } from
 import { ToastController } from '@ionic/angular';
 import { TranslateService } from '@ngx-translate/core';
 import { AccountService, AuthService, BasePromptPanelComponent, ErrorsExtractor, Group, ModalsService } from '@rucken/core';
+import { BindIoInner } from 'ngx-bind-io';
 import { Observable, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { CustomUser } from '../../../models/custom-user';
 import { GroupsService } from '../../../services/groups.service';
-import { BindIoInner } from 'ngx-bind-io';
 
 @BindIoInner()
 @Component({
   selector: 'profile-panel',
   templateUrl: './profile-panel.component.html',
-  styles: [':host form {height: 100%;}'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ProfilePanelComponent extends BasePromptPanelComponent<CustomUser> implements OnDestroy {