Skip to content

Commit

Permalink
feat(): better ios11 support
Browse files Browse the repository at this point in the history 
* style(): better list design for ios

* fix(): fix lint issues

* fix(): more ios11 updates

* fix(): use env and constant for now

* fix(footer): user correct value for padding

* fix(): remove extra padding on title

* fix(): reorder imports to pass lint
  • Loading branch information
@mhartington
mhartington authored Oct 9, 2017
1 parent ee766e1 commit 49e0c37
Show file tree
Hide file tree
Showing 16 changed files with 134 additions and 27 deletions.
1 change: 1 addition & 0 deletions src/components/action-sheet/action-sheet.ios.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@ $action-sheet-ios-button-cancel-font-weight: 600 !default;

.action-sheet-ios .action-sheet-wrapper {
@include margin(constant(safe-area-inset-top), auto, constant(safe-area-inset-bottom), auto);
@include margin(env(safe-area-inset-top), auto, env(safe-area-inset-bottom), auto);
}

.action-sheet-ios .action-sheet-container {
Expand Down
2 changes: 1 addition & 1 deletion src/components/app/app-root.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, ComponentFactoryResolver, ElementRef, Inject, OnInit, InjectionToken, Renderer, ViewChild, ViewContainerRef } from '@angular/core';
import { Component, ComponentFactoryResolver, ElementRef, Inject, InjectionToken, OnInit, Renderer, ViewChild, ViewContainerRef } from '@angular/core';

import { App } from './app';
import { assert } from '../../util/util';
Expand Down
4 changes: 0 additions & 4 deletions src/components/content/content.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,10 +124,6 @@ ion-app [no-padding] .scroll-content {
@include safe-area-padding($content-padding);
}

ion-app.#{$mode} .scroll-content {
@include safe-area-no-padding($content-padding);
}

ion-app.#{$mode} [padding-top] .scroll-content {
@include safe-area-padding($content-padding, null, null, null);
}
Expand Down
12 changes: 12 additions & 0 deletions src/components/fab/fab.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,10 +97,16 @@ ion-fab {
@include multi-dir() {
right: $fab-content-margin;
}

@include multi-dir() {
right: calc(#{$fab-content-margin} + constant(safe-area-inset-right));
right: calc(#{$fab-content-margin} + env(safe-area-inset-right));
}
}

&[end] {
@include position-horizontal(null, $fab-content-margin);
@include safe-position-horizontal(null, $fab-content-margin);
}

&[bottom] {
Expand All @@ -112,10 +118,16 @@ ion-fab {
@include multi-dir() {
left: $fab-content-margin;
}

@include multi-dir() {
left: calc(#{$fab-content-margin} + constant(safe-area-inset-left));
left: calc(#{$fab-content-margin} + env(safe-area-inset-left));
}
}

&[start] {
@include position-horizontal($fab-content-margin, null);
@include safe-position-horizontal($fab-content-margin, null);
}

&[top][edge] {
Expand Down
2 changes: 1 addition & 1 deletion src/components/item/item-reorder.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@import "../../themes/ionic.globals";

$reorder-initial-transform: 160% !default;
$reorder-initial-transform: 300% !default;

// Item reorder
// --------------------------------------------------
Expand Down
1 change: 1 addition & 0 deletions src/components/item/item-sliding.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ ion-item-options[side=left] {
ion-item-options .button {
@include margin(0);
@include padding(0, .7em);
@include safe-area-padding-horizontal(null, .7em);
@include border-radius(0);

height: 100%;
Expand Down
7 changes: 7 additions & 0 deletions src/components/item/item.ios.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ $item-ios-sliding-content-background: $list-ios-background-color !default;

.item-ios {
@include padding-horizontal($item-ios-padding-start, null);
@include safe-area-padding-horizontal($item-ios-padding-start, null);
@include border-radius(0);

position: relative;
Expand Down Expand Up @@ -124,6 +125,7 @@ $item-ios-sliding-content-background: $list-ios-background-color !default;

.item-ios.item-block .item-inner {
@include padding-horizontal(null, $item-ios-padding-end / 2);
@include safe-area-padding-horizontal(null, $item-ios-padding-end / 2);

border-bottom: $hairlines-width solid $list-ios-border-color;
}
Expand Down Expand Up @@ -219,9 +221,13 @@ $item-ios-sliding-content-background: $list-ios-background-color !default;
.item-ios[detail-push] .item-inner,
button.item-ios:not([detail-none]) .item-inner,
a.item-ios:not([detail-none]) .item-inner {
$safe-area-position: calc(#{$item-ios-padding-end - 2} + constant(safe-area-inset-right));
$safe-area-position-env: calc(#{$item-ios-padding-end - 2} + env(safe-area-inset-right));
@include svg-background-image($item-ios-detail-push-svg, true);
@include padding-horizontal(null, 32px);
@include background-position(end, $item-ios-padding-end - 2, center);
@include background-position(end, $safe-area-position, center);
@include background-position(end, $safe-area-position-env, center);

background-repeat: no-repeat;
background-size: 14px 14px;
Expand All @@ -247,6 +253,7 @@ ion-item-group .item-wrapper:last-child .item-ios .item-inner {

.item-divider-ios {
@include padding-horizontal($item-ios-padding-start, null);
@include safe-area-padding-horizontal($item-ios-padding-start, null);

color: $item-ios-divider-color;
background-color: $item-ios-divider-background;
Expand Down
1 change: 1 addition & 0 deletions src/components/list/list.ios.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,6 +179,7 @@ $list-ios-header-background-color: transparent !default;

.list-header-ios {
@include padding-horizontal($list-ios-header-padding-start, null);
@include safe-area-padding-horizontal($list-ios-header-padding-start, null);

position: relative;

Expand Down
1 change: 1 addition & 0 deletions src/components/picker/picker.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ ion-picker-cmp {

.picker-columns {
@include margin(null, null, constant(safe-area-inset-bottom), null);
@include margin(null, null, env(safe-area-inset-bottom), null);
position: relative;
display: flex;

Expand Down
16 changes: 11 additions & 5 deletions src/components/popover/popover-transitions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export class PopoverTransition extends PageTransition {

let targetHeight = targetDim && targetDim.height || 0;

let popoverCSS = {
let popoverCSS: {top: any, left: any} = {
top: targetTop,
left: targetLeft
};
Expand Down Expand Up @@ -107,7 +107,7 @@ export class PopoverTransition extends PageTransition {
left: targetLeft + (targetWidth / 2) - (arrowWidth / 2)
};

let popoverCSS = {
let popoverCSS: {top: any, left: any} = {
top: targetTop + targetHeight + (arrowHeight - 1),
left: targetLeft + (targetWidth / 2) - (popoverWidth / 2)
};
Expand All @@ -117,8 +117,14 @@ export class PopoverTransition extends PageTransition {
// exceeds the body width it is off screen to the right so adjust
if (popoverCSS.left < POPOVER_IOS_BODY_PADDING) {
popoverCSS.left = POPOVER_IOS_BODY_PADDING;
} else if (popoverWidth + POPOVER_IOS_BODY_PADDING + popoverCSS.left > bodyWidth) {
popoverCSS.left = bodyWidth - popoverWidth - POPOVER_IOS_BODY_PADDING;
} else if (popoverWidth + POPOVER_IOS_BODY_PADDING + popoverCSS.left > bodyWidth) {
if (CSS.supports('left', 'constant(safe-area-inset-left)')) {
popoverCSS.left = `calc(${bodyWidth - popoverWidth - POPOVER_IOS_BODY_PADDING}px - constant(safe-area-inset-left)`;
} else if (CSS.supports('left', 'env(safe-area-inset-left)')) {
popoverCSS.left = `calc(${bodyWidth - popoverWidth - POPOVER_IOS_BODY_PADDING}px - env(safe-area-inset-left)`;
} else {
popoverCSS.left = `${bodyWidth - popoverWidth - POPOVER_IOS_BODY_PADDING}px`;
}
originX = 'right';
}

Expand All @@ -138,7 +144,7 @@ export class PopoverTransition extends PageTransition {
arrowEle.style.left = arrowCSS.left + 'px';

popoverEle.style.top = popoverCSS.top + 'px';
popoverEle.style.left = popoverCSS.left + 'px';
popoverEle.style.left = popoverCSS.left;

(<any>popoverEle.style)[this.plt.Css.transformOrigin] = originY + ' ' + originX;

Expand Down
15 changes: 15 additions & 0 deletions src/components/popover/popover.ios.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,3 +78,18 @@ $popover-ios-arrow-background: $popover-ios-background !default;
.popover-ios.popover-bottom .popover-arrow::after {
top: -6px;
}

.popover-ios {

.item-ios {
@include padding-horizontal($item-ios-padding-start, null);

This comment has been minimized.

Sign in to view

Copy link
@AmitMY

AmitMY Oct 10, 2017

Contributor

Does the linter not catch these empty new lines at end/begining of selector?
}

.item-ios[detail-push] .item-inner,
button.item-ios:not([detail-none]) .item-inner,
a.item-ios:not([detail-none]) .item-inner {
@include background-position(end, $item-ios-padding-end - 2, center);

}
}
2 changes: 2 additions & 0 deletions src/components/toast/toast.ios.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ $toast-ios-title-padding-start: $toast-ios-title-padding-end !
.toast-ios .toast-wrapper.toast-top {
@include transform(translate3d(0, -100%, 0));
@include margin(constant(safe-area-inset-top), auto, auto, auto);
@include margin(env(safe-area-inset-top), auto, auto, auto);

top: 0;
}
Expand All @@ -57,6 +58,7 @@ $toast-ios-title-padding-start: $toast-ios-title-padding-end !
@include transform(translate3d(0, 100%, 0));

@include margin(auto, auto, constant(safe-area-inset-bottom), auto);
@include margin(auto, auto, env(safe-area-inset-bottom), auto);
bottom: 0;
}

Expand Down
1 change: 1 addition & 0 deletions src/components/toolbar/toolbar.ios.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ $toolbar-button-ios-strong-font-weight: 600 !default;

.toolbar-ios {
@include padding($toolbar-ios-padding);
@include safe-area-padding-horizontal($toolbar-ios-padding);

min-height: $toolbar-ios-height;
}
Expand Down
25 changes: 18 additions & 7 deletions src/platform/cordova.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,21 +46,25 @@ $cordova-statusbar-padding-modal-max-width: 767px !default;

> .toolbar.statusbar-padding:first-child {
@include padding(calc(#{$cordova-statusbar-padding} + #{$toolbar-padding}), null, null, null);
@include padding(calc(constant(safe-area-inset-top) + #{$toolbar-padding}), calc(constant(safe-area-inset-right) + #{$toolbar-padding}), null, calc(constant(safe-area-inset-left) + #{$toolbar-padding}));
@include padding(calc(constant(safe-area-inset-top) + #{$toolbar-padding}), null, null, null);
@include padding(calc(env(safe-area-inset-top) + #{$toolbar-padding}), null, null, null);

min-height: calc(#{$toolbar-height} + #{$cordova-statusbar-padding});
min-height: calc(#{$toolbar-height} + constant(safe-area-inset-top));
min-height: calc(#{$toolbar-height} + env(safe-area-inset-top));
}

> ion-content.statusbar-padding:first-child .scroll-content {
@include padding($cordova-statusbar-padding, null, null, null);
@include padding(calc(#{$cordova-statusbar-padding} + constant(safe-area-inset-top)), null, null, null);
@include padding(constant(safe-area-inset-top), null, null, null);
@include padding(env(safe-area-inset-top), null, null, null);
}

> ion-content.statusbar-padding:first-child[padding] .scroll-content,
> ion-content.statusbar-padding:first-child[padding-top] .scroll-content {
@include padding(calc(#{$content-padding} + #{$cordova-statusbar-padding}), null, null, null);
@include padding(calc(#{$content-padding} + constant(safe-area-inset-top)), null, null, null);
@include padding(constant(safe-area-inset-top), null, null, null);
@include padding(env(safe-area-inset-top), null, null, null);
}

}
Expand All @@ -74,13 +78,16 @@ $cordova-statusbar-padding-modal-max-width: 767px !default;
> .toolbar.statusbar-padding:first-child ion-segment,
> .toolbar.statusbar-padding:first-child ion-title {
@include padding($cordova-statusbar-padding, null, null, null);
@include padding(calc(constant(safe-area-inset-top) + #{$toolbar-padding}), null, null, null);
@include padding(constant(safe-area-inset-top), null, null, null);
@include padding(env(safe-area-inset-top), null, null, null);

height: calc(#{$toolbar-height} + #{$cordova-statusbar-padding});
height: calc(#{$toolbar-height} + constant(safe-area-inset-top));
height: calc(#{$toolbar-height} + env(safe-area-inset-top));

min-height: calc(#{$toolbar-height} + #{$cordova-statusbar-padding});
min-height: calc(#{$toolbar-height} + constant(safe-area-inset-top));
min-height: calc(#{$toolbar-height} + env(safe-area-inset-top));
}

}
Expand All @@ -89,11 +96,15 @@ $cordova-statusbar-padding-modal-max-width: 767px !default;
@mixin footer-safe-area($toolbar-height, $toolbar-padding) {
.tabs .tabbar {
@include padding(null, null, constant(safe-area-inset-bottom), null);
@include padding(null, null, env(safe-area-inset-bottom), null);
}

ion-footer .toolbar:last-child {
@include padding(null, null, calc(constant(safe-area-inset-top) + #{$toolbar-padding}), null);
height: calc(#{$toolbar-height} + constant(safe-area-inset-top));
min-height: calc(#{$toolbar-height} + constant(safe-area-inset-top));
@include padding(null, null, calc(constant(safe-area-inset-bottom) + #{$toolbar-padding}), null);
@include padding(null, null, calc(env(safe-area-inset-bottom) + #{$toolbar-padding}), null);
height: calc(#{$toolbar-height} + constant(safe-area-inset-bottom));
height: calc(#{$toolbar-height} + env(safe-area-inset-bottom));
min-height: calc(#{$toolbar-height} + constant(safe-area-inset-bottom));
min-height: calc(#{$toolbar-height} + env(safe-area-inset-bottom));
}
}
Loading

0 comments on commit 49e0c37

Please sign in to comment.