javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 11:17:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(popup): changed elements to classes, fixed styling, removed unused css, added more sass variables

Browse Source 
references #689
This commit is contained in:
Brandy Carney
2015-12-07 12:04:26 -05:00
parent d6a23e3c2a
commit 3f79316d81
4 changed files with 102 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
ionic/components/popup/modes/ios.scss
View File

@ -9,14 +9,22 @@ $popup-ios-background: rgba(0,0,0,0) !default;
$popup-ios-border-radius: 13px !default;
$popup-ios-background-color: #f8f8f8 !default;
$popup-ios-head-padding: 12px 16px 20px !default;
$popup-ios-head-text-align: center !default;
$popup-ios-title-margin-top: 12px !default;
$popup-ios-title-font-weight: bold !default;
$popup-ios-title-font-size: 17px !default;
$popup-ios-sub-title-font-size: 14px !default;
$popup-ios-sub-title-text-color: #666 !default;
$popup-ios-body-padding: 0px 16px 24px !default;
$popup-ios-body-text-color: inherit !default;
$popup-ios-body-text-align: center !default;
$popup-ios-body-font-size: 13px !default;
$popup-ios-prompt-input-padding: 6px !default;
$popup-ios-prompt-input-margin-top: 24px !default;
$popup-ios-prompt-input-background-color: #fff !default;
$popup-ios-prompt-input-border: 1px solid #ccc !default;
$popup-ios-prompt-input-border-radius: 4px !default;
@ -29,23 +37,23 @@ $popup-ios-button-activated-background-color: #e9e9e9 !default;
ion-popup {
background: $popup-ios-background;
}
popup-wrapper {
border-radius: $popup-ios-border-radius;
background-color: $popup-ios-background-color;
max-width: $popup-ios-max-width;
overflow: hidden;
}
.popup-wrapper {
border-radius: $popup-ios-border-radius;
background-color: $popup-ios-background-color;
max-width: $popup-ios-max-width;
overflow: hidden;
}
.popup-head {
padding: 12px 16px 20px;
padding: $popup-ios-head-padding;
text-align: $popup-ios-head-text-align;
}
.popup-title {
margin-top: 12px;
font-weight: bold;
margin-top: $popup-ios-title-margin-top;
font-weight: $popup-ios-title-font-weight;
font-size: $popup-ios-title-font-size;
}
@ -55,15 +63,15 @@ ion-popup {
}
.popup-body {
padding: 0px 16px 24px;
padding: $popup-ios-body-padding;
color: $popup-ios-body-text-color;
text-align: $popup-ios-body-text-align;
font-size: $popup-ios-body-font-size;
}
.prompt-input {
padding: 6px;
margin-top: 24px;
padding: $popup-ios-prompt-input-padding;
margin-top: $popup-ios-prompt-input-margin-top;
background-color: $popup-ios-prompt-input-background-color;
border: $popup-ios-prompt-input-border;
@ -72,39 +80,37 @@ ion-popup {
}
.popup-buttons {
button {
@extend button[clear];
:last-child {
font-weight: bold;
border-right: 0;
}
}
margin: 0;
flex: 1;
border-radius: 0;
font-size: $popup-ios-button-font-size;
min-height: $popup-ios-button-min-height;
border-right: 1px solid $popup-ios-button-border-color;
.popup-button {
margin: 0;
flex: 1;
border-radius: 0;
font-size: $popup-ios-button-font-size;
min-height: $popup-ios-button-min-height;
border-right: 1px solid $popup-ios-button-border-color;
&.activated {
opacity: 1;
background-color: $popup-ios-button-activated-background-color;
}
&.activated {
opacity: 1;
background-color: $popup-ios-button-activated-background-color;
}
&:hover:not(.disable-hover) {
opacity: 1;
}
&:hover:not(.disable-hover) {
opacity: 1;
}
&:before {
position: absolute;
top: 0;
right: 0;
left: 0;
border-top: 1px solid $popup-ios-button-border-color;
content: '';
pointer-events: none;
}
&:last-child {
font-weight: bold;
border-right: 0;
}
&:before {
position: absolute;
top: 0;
right: 0;
left: 0;
border-top: 1px solid $popup-ios-button-border-color;
content: '';
pointer-events: none;
}
}
@ -113,13 +119,11 @@ ion-popup {
border-width: 0.55px;
}
.popup-buttons {
button {
border-right-width: 0.55px;
.popup-button {
border-right-width: 0.55px;
&:before {
border-top-width: 0.55px;
}
&:before {
border-top-width: 0.55px;
}
}
}

44
ionic/components/popup/modes/md.scss
View File

@ -10,33 +10,35 @@ $popup-md-background-color: #fafafa !default;
$popup-md-box-shadow: 0px 16px 20px rgba(0, 0, 0, 0.4) !default;
$popup-md-head-text-align: left !default;
$popup-md-head-padding: 24px 24px 10px 24px !default;
$popup-md-title-font-size: 20px !default;
$popup-md-sub-title-font-size: 15px !default;
$popup-md-body-text-color: rgba(0,0,0,.5) !default;
$popup-md-button-min-height: 36px !default;
$popup-md-body-padding: 10px 24px 24px 24px !default;
$popup-md-body-text-color: rgba(0,0,0,.5) !default;
$popup-md-prompt-input-border-color: #dedede !default;
$popup-md-prompt-input-text-color: #000000 !default;
$popup-md-prompt-input-highlight-color: map-get($colors-md, primary) !default;
$popup-md-prompt-input-placeholder-color: #b9b9b9 !default;
$popup-md-prompt-input-margin-top: 5px !default;
$popup-md-prompt-input-margin-bottom: 5px !default;
$popup-md-buttons-padding: 8px 8px 8px 24px !default;
$popup-md-buttons-justify-content: flex-end !default;
ion-popup {
popup-wrapper {
max-width: $popup-md-max-width;
border-radius: $popup-md-border-radius;
background-color: $popup-md-background-color;
box-shadow: $popup-md-box-shadow;
}
.popup-wrapper {
max-width: $popup-md-max-width;
border-radius: $popup-md-border-radius;
background-color: $popup-md-background-color;
box-shadow: $popup-md-box-shadow;
}
.popup-head {
text-align: $popup-md-head-text-align;
padding: 24px 24px 10px 24px;
padding: $popup-md-head-padding;
}
.popup-title {
@ -48,7 +50,7 @@ ion-popup {
}
.popup-body {
padding: 10px 24px 24px 24px;
padding: $popup-md-body-padding;
color: $popup-md-body-text-color;
}
@ -64,16 +66,10 @@ ion-popup {
}
.popup-buttons {
padding: 8px 8px 8px 24px;
justify-content: flex-end;
button {
@extend button[clear];
min-height: $popup-md-button-min-height;
&.activated {
opacity: 1;
}
}
padding: $popup-md-buttons-padding;
justify-content: $popup-md-buttons-justify-content;
}
.popup-button.activated {
opacity: 1;
}

41
ionic/components/popup/popup.scss
View File

@ -4,7 +4,6 @@
// --------------------------------------------------
$popup-min-width: 250px !default;
$popup-max-width: 100% !default;
$popup-max-height: 90% !default;
$popup-button-line-height: 20px !default;
@ -24,24 +23,23 @@ ion-popup {
justify-content: center;
align-items: center;
popup-wrapper {
z-index: $z-index-overlay-wrapper;
min-width: $popup-min-width;
max-width: $popup-max-width;
max-height: $popup-max-height;
display: flex;
flex-direction: column;
opacity: 0;
}
input,
textarea {
width: 100%;
}
}
.popup-wrapper {
z-index: $z-index-overlay-wrapper;
min-width: $popup-min-width;
max-height: $popup-max-height;
display: flex;
flex-direction: column;
opacity: 0;
}
.popup-title {
margin: 0;
padding: 0;
@ -56,7 +54,6 @@ ion-popup {
.popup-body {
overflow: auto;
// TODO is this needed, it is never empty
&:empty {
padding: 0;
}
@ -73,12 +70,12 @@ ion-popup {
.popup-buttons {
display: flex;
flex-direction: row;
button {
display: block;
margin: 0;
line-height: $popup-button-line-height;
font-size: $popup-button-font-size;
margin-right: $popup-button-margin-right;
}
}
.popup-button {
display: block;
margin: 0;
line-height: $popup-button-line-height;
font-size: $popup-button-font-size;
margin-right: $popup-button-margin-right;
}

24
ionic/components/popup/popup.ts
View File

@ -270,8 +270,8 @@ const OVERLAY_TYPE = 'popup';
@Component({
selector: 'ion-popup',
template:
'<backdrop (click)="cancel($event)" tappable disable-activated></backdrop>' +
'<popup-wrapper>' +
'<div (click)="cancel($event)" tappable disable-activated class="backdrop"></div>' +
'<div class="popup-wrapper">' +
'<div class="popup-head">' +
'<h2 class="popup-title" [inner-html]="d.title" *ng-if="d.title"></h2>' +
'<h3 class="popup-sub-title" [inner-html]="d.subTitle" *ng-if="d.subTitle"></h3>' +
@ -281,9 +281,9 @@ const OVERLAY_TYPE = 'popup';
'<input type="{{d.inputType || \'text\'}}" placeholder="{{d.inputPlaceholder}}" *ng-if="d.showPrompt" class="prompt-input">' +
'</div>' +
'<div class="popup-buttons" *ng-if="d.buttons.length">' +
'<button *ng-for="#btn of d.buttons" (click)="buttonTapped(btn, $event)" [inner-html]="btn.text"></button>' +
'<button clear *ng-for="#btn of d.buttons" (click)="buttonTapped(btn, $event)" [inner-html]="btn.text" class="popup-button"></button>' +
'</div>' +
'</popup-wrapper>',
'</div>',
host: {
'role': 'dialog'
},
@ -352,8 +352,8 @@ class PopupPopIn extends Animation {
super(null, opts);
let ele = enteringView.pageRef().nativeElement;
let backdrop = new Animation(ele.querySelector('backdrop'));
let wrapper = new Animation(ele.querySelector('popup-wrapper'));
let backdrop = new Animation(ele.querySelector('.backdrop'));
let wrapper = new Animation(ele.querySelector('.popup-wrapper'));
wrapper.fromTo('opacity', '0.01', '1').fromTo('scale', '1.1', '1');
backdrop.fromTo('opacity', '0.01', '0.3');
@ -372,8 +372,8 @@ class PopupPopOut extends Animation {
super(null, opts);
let ele = leavingView.pageRef().nativeElement;
let backdrop = new Animation(ele.querySelector('backdrop'));
let wrapper = new Animation(ele.querySelector('popup-wrapper'));
let backdrop = new Animation(ele.querySelector('.backdrop'));
let wrapper = new Animation(ele.querySelector('.popup-wrapper'));
wrapper.fromTo('opacity', '1', '0').fromTo('scale', '1', '0.9');
backdrop.fromTo('opacity', '0.3', '0');
@ -392,8 +392,8 @@ class PopupMdPopIn extends Animation {
super(null, opts);
let ele = enteringView.pageRef().nativeElement;
let backdrop = new Animation(ele.querySelector('backdrop'));
let wrapper = new Animation(ele.querySelector('popup-wrapper'));
let backdrop = new Animation(ele.querySelector('.backdrop'));
let wrapper = new Animation(ele.querySelector('.popup-wrapper'));
wrapper.fromTo('opacity', '0.01', '1').fromTo('scale', '1.1', '1');
backdrop.fromTo('opacity', '0.01', '0.5');
@ -412,8 +412,8 @@ class PopupMdPopOut extends Animation {
super(null, opts);
let ele = leavingView.pageRef().nativeElement;
let backdrop = new Animation(ele.querySelector('backdrop'));
let wrapper = new Animation(ele.querySelector('popup-wrapper'));
let backdrop = new Animation(ele.querySelector('.backdrop'));
let wrapper = new Animation(ele.querySelector('.popup-wrapper'));
wrapper.fromTo('opacity', '1', '0').fromTo('scale', '1', '0.9');
backdrop.fromTo('opacity', '0.5', '0');