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

Merge branch 'search-bar' of github.com:driftyco/ionic2 into search-bar

Browse Source
This commit is contained in:
jbavari
2015-10-05 15:04:24 -06:00
parent 3068cd9ec7 0642a46d19
commit f9d5e85800
10 changed files with 185 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
ionic/components/button/button.ts
View File

@ -1,4 +1,4 @@
import {Directive, ElementRef} from 'angular2/angular2';
import {Directive, ElementRef, Renderer} from 'angular2/angular2';
import {IonicConfig} from '../../config/config';
@ -13,7 +13,8 @@ export class Button {
constructor(
config: IonicConfig,
elementRef: ElementRef
elementRef: ElementRef,
renderer: Renderer
) {
let element = elementRef.nativeElement;
@ -21,6 +22,12 @@ export class Button {
element.classList.add('disable-hover');
}
// TODO this isn't working in the popup
if (element.hasAttribute('type')) {
let type = element.getAttribute("type");
renderer.setElementAttribute(elementRef, type, "");
}
if (element.hasAttribute('ion-item')) {
// no need to put on these icon classes for an ion-item
return;

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

@ -4,6 +4,7 @@ import {FORM_DIRECTIVES, NgControl, NgControlGroup,
import {Overlay} from '../overlay/overlay';
import {Animation} from '../../animations/animation';
import {Ion} from '../ion';
import {Button} from '../button/button';
import * as util from 'ionic/util';
@ -99,7 +100,7 @@ export class Popup extends Overlay {
* template: '', // String (optional). The html template to place in the popup body.
* templateUrl: '', // String (optional). The URL of an html template to place in the popup body.
* okText: '', // String (default: 'OK'). The text of the OK button.
* okType: '', // String (default: 'primary'). The type of the OK button.
* okType: '', // String (default: ''). The type of the OK button.
* }
* ```
*
@ -113,7 +114,7 @@ export class Popup extends Overlay {
}
let button = {
text: opts.okText || 'OK',
type: opts.okType || 'primary',
type: opts.okType || '',
onTap: (event, popupRef) => {
// Allow it to close
//resolve();
@ -146,9 +147,9 @@ export class Popup extends Overlay {
* template: '', // String (optional). The html template to place in the popup body.
* templateUrl: '', // String (optional). The URL of an html template to place in the popup body.
* cancelText: '', // String (default: 'Cancel'). The text of the Cancel button.
* cancelType: '', // String (default: 'primary'). The type of the Cancel button.
* cancelType: '', // String (default: ''). The type of the Cancel button.
* okText: '', // String (default: 'OK'). The text of the OK button.
* okType: '', // String (default: 'primary'). The type of the OK button.
* okType: '', // String (default: ''). The type of the OK button.
* }
* ```
*
@ -162,14 +163,14 @@ export class Popup extends Overlay {
}
let okButton = {
text: opts.okText || 'OK',
type: opts.okType || 'primary',
type: opts.okType || '',
onTap: (event, popupRef) => {
// Allow it to close
}
}
let cancelButton = {
text: opts.cancelText || 'Cancel',
type: opts.cancelType || 'primary',
type: opts.cancelType || '',
isCancel: true,
onTap: (event, popupRef) => {
// Allow it to close
@ -202,9 +203,9 @@ export class Popup extends Overlay {
* inputType: // String (default: 'text'). The type of input to use.
* inputPlaceholder: // String (default: ''). A placeholder to use for the input.
* cancelText: '', // String (default: 'Cancel'). The text of the Cancel button.
* cancelType: '', // String (default: 'primary'). The type of the Cancel button.
* cancelType: '', // String (default: ''). The type of the Cancel button.
* okText: '', // String (default: 'OK'). The text of the OK button.
* okType: '', // String (default: 'primary'). The type of the OK button.
* okType: '', // String (default: ''). The type of the OK button.
* }
* ```
*
@ -218,7 +219,7 @@ export class Popup extends Overlay {
}
let okButton = {
text: opts.okText || 'OK',
type: opts.okType || 'primary',
type: opts.okType || '',
onTap: (event, popupRef) => {
// Allow it to close
}
@ -226,7 +227,7 @@ export class Popup extends Overlay {
let cancelButton = {
text: opts.cancelText || 'Cancel',
type: opts.cancelType || 'primary',
type: opts.cancelType || '',
isCancel: true,
onTap: (event, popupRef) => {
// Allow it to close
@ -262,10 +263,10 @@ export class Popup extends Overlay {
const OVERLAY_TYPE = 'popup';
@Component({
selector: 'ion-popup-default'
})
// TODO add button type to button: [type]="button.type"
@View({
template:
'<backdrop (click)="_cancel($event)" tappable disable-activated></backdrop>' +
@ -282,7 +283,7 @@ const OVERLAY_TYPE = 'popup';
'<button *ng-for="#button of buttons" (click)="buttonTapped(button, $event)" [inner-html]="button.text"></button>' +
'</div>' +
'</popup-wrapper>',
directives: [FORM_DIRECTIVES, NgClass, NgIf, NgFor]
directives: [FORM_DIRECTIVES, NgClass, NgIf, NgFor, Button]
})
class StandardPopup {

3
ionic/components/popup/test/basic/index.ts
View File

@ -32,8 +32,7 @@ class E2EApp {
title: "New Album",
template: "Enter a name for this new album you're so keen on adding",
inputPlaceholder: "Title",
okText: "Save",
okType: "secondary"
okText: "Save"
}).then((name) => {
this.promptResult = name;
this.promptOpen = false;

28
ionic/components/search-bar/modes/ios.scss
View File

@ -2,13 +2,15 @@
// iOS Search Bar
// --------------------------------------------------
$search-bar-ios-background-color: #c9c9ce !default;
$search-bar-ios-border-color: $item-ios-border-color !default;
$search-bar-ios-padding: 0 8px !default;
$search-bar-ios-input-height: 28px !default;
$search-bar-ios-background-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><path fill='#939398' d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1 M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0 L5,0z'/><line stroke='#939398' stroke-miterlimit='10' x1='12.6' y1='12.6' x2='8.2' y2='8.2'/></svg>" !default;
$search-bar-ios-background-size: 13px 13px !default;
$search-bar-ios-background-color: rgba(0, 0, 0, 0.2) !default;
$search-bar-ios-border-color: rgba(0, 0, 0, 0.05) !default;
$search-bar-ios-padding: 0 8px !default;
$search-bar-ios-input-height: 28px !default;
$search-bar-ios-input-text-color: #9D9D9D !default;
$search-bar-ios-input-background-color: #FFFFFF !default;
$search-bar-ios-input-icon-color: #767676 !default;
$search-bar-ios-input-background-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><path fill='" + $search-bar-ios-input-icon-color + "' d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1 M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0 L5,0z'/><line stroke='#939398' stroke-miterlimit='10' x1='12.6' y1='12.6' x2='8.2' y2='8.2'/></svg>" !default;
$search-bar-ios-background-size: 13px 13px !default;
.search-bar {
padding: $search-bar-ios-padding;
@ -22,7 +24,7 @@ $search-bar-ios-background-size: 13px 13px !default;
transform: translateX(calc(50% - 60px));
@include svg-background-image($search-bar-ios-background-svg);
@include svg-background-image($search-bar-ios-input-background-svg);
background-size: $search-bar-ios-background-size;
background-repeat: no-repeat;
position: absolute;
@ -38,20 +40,26 @@ $search-bar-ios-background-size: 13px 13px !default;
font-weight: 400;
border-radius: 5px;
color: #000;
background-color: #fff;
color: $search-bar-ios-input-text-color;
background-color: $search-bar-ios-input-background-color;
background-repeat: no-repeat;
background-position: 8px center;
@include calc(padding-left, "50% - 28px");
}
.search-bar-input-container.left-align {
.search-bar-icon {
transform: translateX(0);
-webkit-transition: all 0.3s cubic-bezier(.25, .45, .05, 1);
-moz-transition: all 0.3s cubic-bezier(.25, .45, .05, 1);
}
.search-bar-input {
padding-left: 28px;
-webkit-transition: all 0.3s cubic-bezier(.25, .45, .05, 1);
-moz-transition: all 0.3s cubic-bezier(.25, .45, .05, 1);
}
}

1
ionic/components/search-bar/search-bar.ts
View File

@ -26,6 +26,7 @@ import {IonicComponent, IonicView} from '../../config/decorators';
<div class="search-bar-icon"></div>
<input (focus)="inputFocused()" (blur)="inputBlurred()"
(input)="inputChanged($event)" class="search-bar-input" type="search" [attr.placeholder]="placeholder">
<div class="search-bar-close-icon"></div>
</div>
<button class="search-bar-cancel">{{cancelText}}</button>`
})

21
ionic/components/search-bar/test/floating/index.ts Normal file
View File

@ -0,0 +1,21 @@
import {NgControl} from 'angular2/angular2';
import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/forms';
import {App} from 'ionic/ionic';
import {SearchPipe} from 'ionic/components/search-bar/search-bar';
@App({
templateUrl: 'main.html',
bindings: [NgControl, FormBuilder],
directives: [FORM_DIRECTIVES]
})
class IonicApp {
constructor(fb: FormBuilder) {
this.form = fb.group({
searchQuery: ['', Validators.required]
});
this.toolbarForm = fb.group({
toolbarSearchQuery: ['', Validators.required]
})
}
}

13
ionic/components/search-bar/test/floating/main.html Normal file
View File

@ -0,0 +1,13 @@
<!-- <ion-toolbar>
<form [ng-form-model]="toolbarForm">
<ion-search-bar ng-control="toolbarSearchQuery"></ion-search-bar>
</form>
</ion-toolbar> -->
<ion-content>
<form [ng-form-model]="form">
<label> Default Search </label>
<ion-search-bar ng-control="searchQuery"></ion-search-bar>
<label> Placeholder Search </label>
<ion-search-bar ng-control="searchQuery" placeholder="Filter"></ion-search-bar>
</form>
</ion-content>

71
ionic/config/config.ts
View File

@ -38,8 +38,9 @@ export class IonicConfig {
this._s.platforms[args[0]] = args[1];
this._c = {}; // clear cache
break;
}
return this;
}
/**
@ -80,59 +81,79 @@ export class IonicConfig {
get(key) {
if (!isDefined(this._c[key])) {
// if the value was already set this will all be skipped
// if there was no user config then it'll check each of
// the user config's platforms, which already contains
// settings from default platform configs
this._c[key] = null;
let userPlatformValue = undefined;
let platformValue = undefined;
let userDefaultValue = this._s[key];
let modeValue = undefined;
let userPlatformModeValue = undefined;
let userDefaultModeValue = undefined;
let platformValue = undefined;
let platformModeValue = undefined;
let configObj = null;
if (this._platform) {
// check the platform settings object for this value
// loop though each of the active platforms
let platformObj = null;
// array of active platforms, which also knows the hierarchy,
// with the last one the most important
let activePlatformKeys = this._platform.platforms();
// loop through all of the active platforms we're on
for (let i = 0; i < activePlatformKeys.length; i++) {
for (let i = 0, l = activePlatformKeys.length; i < l; i++) {
// get user defined platform values
if (this._s.platforms) {
platformObj = this._s.platforms[ activePlatformKeys[i] ];
if (platformObj && isDefined(platformObj[key])) {
userPlatformValue = platformObj[key];
configObj = this._s.platforms[activePlatformKeys[i]];
if (configObj) {
if (isDefined(configObj[key])) {
userPlatformValue = configObj[key];
}
configObj = IonicConfig.getModeConfig(configObj.mode);
if (configObj && isDefined(configObj[key])) {
userPlatformModeValue = configObj[key];
}
}
}
// get default platform's setting
platformObj = IonicPlatform.get(activePlatformKeys[i]);
if (platformObj && platformObj.settings) {
configObj = IonicPlatform.get(activePlatformKeys[i]);
if (configObj && configObj.settings) {
if (isDefined(platformObj.settings[key])) {
if (isDefined(configObj.settings[key])) {
// found a setting for this platform
platformValue = platformObj.settings[key];
platformValue = configObj.settings[key];
}
platformObj = IonicConfig.modeConfig(platformObj.settings.mode);
if (platformObj && isDefined(platformObj[key])) {
configObj = IonicConfig.getModeConfig(configObj.settings.mode);
if (configObj && isDefined(configObj[key])) {
// found setting for this platform's mode
modeValue = platformObj[key];
platformModeValue = configObj[key];
}
}
}
}
configObj = IonicConfig.getModeConfig(this._s.mode);
if (configObj && isDefined(configObj[key])) {
userDefaultModeValue = configObj[key];
}
// cache the value
this._c[key] = isDefined(userPlatformValue) ? userPlatformValue : isDefined(platformValue) ? platformValue : isDefined(userDefaultValue) ? userDefaultValue : isDefined(modeValue) ? modeValue : null;
this._c[key] = isDefined(userPlatformValue) ? userPlatformValue :
isDefined(userDefaultValue) ? userDefaultValue :
isDefined(userPlatformModeValue) ? userPlatformModeValue :
isDefined(userDefaultModeValue) ? userDefaultModeValue :
isDefined(platformValue) ? platformValue :
isDefined(platformModeValue) ? platformModeValue :
null;
}
// return key's value
@ -155,18 +176,12 @@ export class IonicConfig {
this._platform = platform;
}
static modeConfig(mode, config) {
const args = arguments;
if (args.length === 2) {
// modeConfig('ios', {...})
modeConfigs[mode] = extend(modeConfigs[mode] || {}, config);
} else {
// modeConfig('ios')
return modeConfigs[mode];
}
static setModeConfig(mode, config) {
modeConfigs[mode] = config;
}
static getModeConfig(mode) {
return modeConfigs[mode] || null;
}
}

4
ionic/config/modes.ts
View File

@ -3,7 +3,7 @@ import {IonicConfig} from './config';
// iOS Mode Settings
IonicConfig.modeConfig('ios', {
IonicConfig.setModeConfig('ios', {
actionSheetEnter: 'action-sheet-slide-in',
actionSheetLeave: 'action-sheet-slide-out',
@ -27,7 +27,7 @@ IonicConfig.modeConfig('ios', {
// Material Design Mode Settings
IonicConfig.modeConfig('md', {
IonicConfig.setModeConfig('md', {
actionSheetEnter: 'action-sheet-md-slide-in',
actionSheetLeave: 'action-sheet-md-slide-out',

64
ionic/config/test/config.spec.ts
View File

@ -2,6 +2,70 @@ import {IonicConfig, IonicPlatform} from 'ionic/ionic';
export function run() {
it('should override mode settings', () => {
let config = new IonicConfig({
mode: 'md'
});
let platform = new IonicPlatform(['ios']);
config.setPlatform(platform);
expect(config.get('mode')).toEqual('md');
expect(config.get('tabBarPlacement')).toEqual('top');
});
it('should override mode settings from platforms setting', () => {
let config = new IonicConfig({
platforms: {
ios: {
mode: 'md'
}
}
});
let platform = new IonicPlatform(['ios']);
config.setPlatform(platform);
expect(config.get('mode')).toEqual('md');
expect(config.get('tabBarPlacement')).toEqual('top');
});
it('should override mode platform', () => {
let config = new IonicConfig({
mode: 'modeA',
platforms: {
mobile: {
mode: 'modeB'
},
ios: {
mode: 'modeC'
}
}
});
let platform = new IonicPlatform(['mobile']);
config.setPlatform(platform);
expect(config.get('mode')).toEqual('modeB');
});
it('should override mode', () => {
let config = new IonicConfig({
mode: 'modeA'
});
let platform = new IonicPlatform(['core']);
config.setPlatform(platform);
expect(config.get('mode')).toEqual('modeA');
});
it('should get user settings after user platform settings', () => {
let config = new IonicConfig({
hoverCSS: true
});
let platform = new IonicPlatform(['ios']);
config.setPlatform(platform);
expect(config.get('hoverCSS')).toEqual(true);
});
it('should get ios mode for core platform', () => {
let config = new IonicConfig();
let platform = new IonicPlatform(['core']);