From d4c23424148164665d9bfcf19f894c63c49025b3 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 5 Oct 2015 12:37:46 -0400 Subject: [PATCH 1/5] feat(button): Added ability to give the button a "type" which will be converted to an attribute. Note this is working for basic buttons but breaks in the popup currently, that is a TODO. Changed the default to types for the popup to an empty string. Closes #183 --- ionic/components/button/button.ts | 11 +++++++-- ionic/components/popup/popup.ts | 26 +++++++++++----------- ionic/components/popup/test/basic/index.ts | 3 +-- 3 files changed, 23 insertions(+), 17 deletions(-) diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts index 9151012bf9..b0d45f3004 100644 --- a/ionic/components/button/button.ts +++ b/ionic/components/button/button.ts @@ -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; diff --git a/ionic/components/popup/popup.ts b/ionic/components/popup/popup.ts index e9b1c75b57..05f818c336 100644 --- a/ionic/components/popup/popup.ts +++ b/ionic/components/popup/popup.ts @@ -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,7 +263,6 @@ export class Popup extends Overlay { const OVERLAY_TYPE = 'popup'; - @Component({ selector: 'ion-popup-default' }) @@ -279,10 +279,10 @@ const OVERLAY_TYPE = 'popup'; '' + '' + '
' + - '' + + '' + '
' + '', - directives: [FORM_DIRECTIVES, NgClass, NgIf, NgFor] + directives: [FORM_DIRECTIVES, NgClass, NgIf, NgFor, Button] }) class StandardPopup { diff --git a/ionic/components/popup/test/basic/index.ts b/ionic/components/popup/test/basic/index.ts index 4a5e9a2e76..1f22c5c096 100644 --- a/ionic/components/popup/test/basic/index.ts +++ b/ionic/components/popup/test/basic/index.ts @@ -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; From 649e76167fa7dfcd85a2321e1d548ccaf707c3e8 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 5 Oct 2015 12:41:47 -0400 Subject: [PATCH 2/5] fix(popup): Removed button type, it's throwing console errors References #183 --- ionic/components/popup/popup.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ionic/components/popup/popup.ts b/ionic/components/popup/popup.ts index 05f818c336..49f8a510bd 100644 --- a/ionic/components/popup/popup.ts +++ b/ionic/components/popup/popup.ts @@ -266,6 +266,7 @@ const OVERLAY_TYPE = 'popup'; @Component({ selector: 'ion-popup-default' }) +// TODO add button type to button: [type]="button.type" @View({ template: '' + @@ -279,7 +280,7 @@ const OVERLAY_TYPE = 'popup'; '' + '' + '
' + - '' + + '' + '
' + '', directives: [FORM_DIRECTIVES, NgClass, NgIf, NgFor, Button] From 194f3e4aad2a6c5a10aa41260919b72e00ffff0a Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Mon, 5 Oct 2015 15:09:16 -0500 Subject: [PATCH 3/5] fix(config): set user platform modes --- ionic/config/config.ts | 67 ++++++++++++++++++++------------ ionic/config/modes.ts | 4 +- ionic/config/test/config.spec.ts | 64 ++++++++++++++++++++++++++++++ 3 files changed, 108 insertions(+), 27 deletions(-) diff --git a/ionic/config/config.ts b/ionic/config/config.ts index 96468c174e..e6cbd43680 100644 --- a/ionic/config/config.ts +++ b/ionic/config/config.ts @@ -80,6 +80,7 @@ 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 @@ -87,14 +88,16 @@ export class IonicConfig { 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 @@ -105,34 +108,54 @@ export class IonicConfig { // 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]; } } } + + if (this._s.mode) { + 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 +178,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; } } diff --git a/ionic/config/modes.ts b/ionic/config/modes.ts index 292e71b721..ea8cf8917d 100644 --- a/ionic/config/modes.ts +++ b/ionic/config/modes.ts @@ -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', diff --git a/ionic/config/test/config.spec.ts b/ionic/config/test/config.spec.ts index 15b987b315..250d04936e 100644 --- a/ionic/config/test/config.spec.ts +++ b/ionic/config/test/config.spec.ts @@ -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']); From a53efcdeb4724cb4fe60c958964bd452f0d4cc7e Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Mon, 5 Oct 2015 15:20:47 -0500 Subject: [PATCH 4/5] fix(config) --- ionic/config/config.ts | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/ionic/config/config.ts b/ionic/config/config.ts index e6cbd43680..a83e335079 100644 --- a/ionic/config/config.ts +++ b/ionic/config/config.ts @@ -38,8 +38,9 @@ export class IonicConfig { this._s.platforms[args[0]] = args[1]; this._c = {}; // clear cache break; - } + + return this; } /** @@ -85,7 +86,6 @@ export class IonicConfig { // 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 userDefaultValue = this._s[key]; @@ -104,11 +104,11 @@ export class IonicConfig { 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) { - configObj = this._s.platforms[ activePlatformKeys[i] ]; + configObj = this._s.platforms[activePlatformKeys[i]]; if (configObj) { if (isDefined(configObj[key])) { userPlatformValue = configObj[key]; @@ -139,13 +139,11 @@ export class IonicConfig { } - if (this._s.mode) { - configObj = IonicConfig.getModeConfig(this._s.mode); - if (configObj && isDefined(configObj[key])) { - userDefaultModeValue = configObj[key]; - } - } + } + configObj = IonicConfig.getModeConfig(this._s.mode); + if (configObj && isDefined(configObj[key])) { + userDefaultModeValue = configObj[key]; } // cache the value From 0cef1afe2023ecd67572fa80a7a74edae0ff119f Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 5 Oct 2015 17:03:04 -0400 Subject: [PATCH 5/5] refactor(search-bar): Added iOS styling and another test page References #247 --- ionic/components/search-bar/modes/ios.scss | 28 ++++++++++++------- ionic/components/search-bar/search-bar.ts | 1 + .../search-bar/test/floating/index.ts | 21 ++++++++++++++ .../search-bar/test/floating/main.html | 13 +++++++++ 4 files changed, 53 insertions(+), 10 deletions(-) create mode 100644 ionic/components/search-bar/test/floating/index.ts create mode 100644 ionic/components/search-bar/test/floating/main.html diff --git a/ionic/components/search-bar/modes/ios.scss b/ionic/components/search-bar/modes/ios.scss index bf0fe24b8b..9227c78f88 100644 --- a/ionic/components/search-bar/modes/ios.scss +++ b/ionic/components/search-bar/modes/ios.scss @@ -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: "" !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: "" !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); } } diff --git a/ionic/components/search-bar/search-bar.ts b/ionic/components/search-bar/search-bar.ts index 7515762138..cc9bf98a6a 100644 --- a/ionic/components/search-bar/search-bar.ts +++ b/ionic/components/search-bar/search-bar.ts @@ -26,6 +26,7 @@ import {IonicComponent, IonicView} from '../../config/decorators';
+
` }) diff --git a/ionic/components/search-bar/test/floating/index.ts b/ionic/components/search-bar/test/floating/index.ts new file mode 100644 index 0000000000..cf5eadfd07 --- /dev/null +++ b/ionic/components/search-bar/test/floating/index.ts @@ -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] + }) + } +} diff --git a/ionic/components/search-bar/test/floating/main.html b/ionic/components/search-bar/test/floating/main.html new file mode 100644 index 0000000000..429fdf6eed --- /dev/null +++ b/ionic/components/search-bar/test/floating/main.html @@ -0,0 +1,13 @@ + + +
+ + + + +
+