feat(platform): default desktop to use material design

Breaking Change: Previously the default was to use ios mode if a more
specific platform was not determined. Now the material design mode (md)
will apply by default. In most cases this means desktop browsers will
now receive the md mode. Closes #6003
This commit is contained in:
Adam Bradley
2016-04-12 12:20:31 -05:00
parent 79cfa6f407
commit 51032d284d
3 changed files with 124 additions and 19 deletions

View File

@ -7,7 +7,7 @@ export function run() {
let platform = new Platform();
platform.setUserAgent('Mozilla/5.0 (Linux; U; Android 4.2.2; nl-nl; GT-I9505 Build/JDQ39) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30');
platform.setNavigatorPlatform('linux');
platform.load();
platform.load(null);
config.setPlatform(platform);
expect(config.get('activator')).toEqual('none');
@ -18,7 +18,7 @@ export function run() {
let platform = new Platform();
platform.setUserAgent('Mozilla/5.0 (Linux; U; Android 4.2.2; nl-nl; GT-I9505 Build/JDQ39) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30');
platform.setNavigatorPlatform('MacIntel');
platform.load();
platform.load(null);
config.setPlatform(platform);
expect(config.get('activator')).toEqual('ripple');
@ -29,7 +29,7 @@ export function run() {
let platform = new Platform();
platform.setUserAgent('Mozilla/5.0 (Linux; Android 4.2.2; GT-I9505 Build/JDQ39) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1650.59 Mobile Safari/537.36');
platform.setNavigatorPlatform('linux');
platform.load();
platform.load(null);
config.setPlatform(platform);
expect(config.get('activator')).toEqual('none');
@ -40,7 +40,7 @@ export function run() {
let platform = new Platform();
platform.setUserAgent('Mozilla/5.0 (Linux; Android 4.2.2; GT-I9505 Build/JDQ39) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1650.59 Mobile Safari/537.36');
platform.setNavigatorPlatform('linux');
platform.load();
platform.load(null);
config.setPlatform(platform);
expect(config.get('activator')).toEqual('ripple');
@ -51,7 +51,7 @@ export function run() {
let platform = new Platform();
platform.setUserAgent('Mozilla/5.0 (Android 5.0; Mobile; rv:41.0) Gecko/41.0 Firefox/41.0');
platform.setNavigatorPlatform('linux');
platform.load();
platform.load(null);
config.setPlatform(platform);
expect(config.get('activator')).toEqual('ripple');
@ -62,7 +62,7 @@ export function run() {
let platform = new Platform();
platform.setUserAgent('Mozilla/5.0 (Android 4.4; Mobile; rv:41.0) Gecko/41.0 Firefox/41.0');
platform.setNavigatorPlatform('linux');
platform.load();
platform.load(null);
config.setPlatform(platform);
expect(config.get('activator')).toEqual('none');
@ -73,7 +73,7 @@ export function run() {
let config = providers.find(provider => provider.useValue instanceof Config).useValue;
expect(config.get('mode')).toEqual('ios');
expect(config.get('mode')).toEqual('md');
});
it('should used passed in Config instance in ionicProviders', () => {
@ -197,12 +197,12 @@ export function run() {
expect(config.get('hoverCSS')).toEqual(true);
});
it('should get ios mode for core platform', () => {
it('should get md mode for core platform', () => {
let config = new Config();
let platform = new Platform(['core']);
config.setPlatform(platform);
expect(config.get('mode')).toEqual('ios');
expect(config.get('mode')).toEqual('md');
});
it('should get ios mode for ipad platform', () => {

View File

@ -9,7 +9,7 @@ const doc: any = document;
Platform.register({
name: 'core',
settings: {
mode: 'ios',
mode: 'md',
keyboardHeight: 290,
}
});

View File

@ -31,6 +31,7 @@ export function run() {
platform.setUrl('/?ionicplatform=windows');
platform.load(null);
expect(platform.is('core')).toEqual(false);
expect(platform.is('mobile')).toEqual(true);
expect(platform.is('android')).toEqual(false);
expect(platform.is('windows')).toEqual(true);
@ -42,6 +43,7 @@ export function run() {
platform.setUrl('/?ionicplatform=ios');
platform.load(null);
expect(platform.is('core')).toEqual(false);
expect(platform.is('mobile')).toEqual(true);
expect(platform.is('android')).toEqual(false);
expect(platform.is('windows')).toEqual(false);
@ -54,6 +56,7 @@ export function run() {
platform.setUserAgent(ANDROID_UA);
platform.load(null);
expect(platform.is('core')).toEqual(false);
expect(platform.is('android')).toEqual(false);
expect(platform.is('windows')).toEqual(true);
expect(platform.is('ios')).toEqual(false);
@ -65,6 +68,7 @@ export function run() {
platform.setUserAgent(ANDROID_UA);
platform.load(null);
expect(platform.is('core')).toEqual(false);
expect(platform.is('android')).toEqual(false);
expect(platform.is('windows')).toEqual(false);
expect(platform.is('ios')).toEqual(true);
@ -75,6 +79,7 @@ export function run() {
platform.setUrl('/?ionicplatform=android');
platform.load(null);
expect(platform.is('core')).toEqual(false);
expect(platform.is('android')).toEqual(true);
expect(platform.is('windows')).toEqual(false);
expect(platform.is('ios')).toEqual(false);
@ -86,38 +91,42 @@ export function run() {
platform.setUserAgent(IPHONE_UA);
platform.load(null);
expect(platform.is('core')).toEqual(false);
expect(platform.is('android')).toEqual(true);
expect(platform.is('windows')).toEqual(false);
expect(platform.is('ios')).toEqual(false);
});
it('should set windows via user agent', () => {
it('should set windows platform via user agent', () => {
let platform = new Platform();
platform.setUserAgent(WINDOWS_UA);
platform.setUserAgent(WINDOWS_PHONE_UA);
platform.load(null);
expect(platform.is('core')).toEqual(false);
expect(platform.is('mobile')).toEqual(true);
expect(platform.is('windows')).toEqual(true);
expect(platform.is('android')).toEqual(false);
expect(platform.is('ios')).toEqual(false);
});
it('should set windows8 via user agent', () => {
it('should set windows platform via windows8 mobile user agent', () => {
let platform = new Platform();
platform.setUserAgent(WINDOWS8_UA);
platform.setUserAgent(WINDOWS8_PHONE_UA);
platform.load(null);
expect(platform.is('core')).toEqual(false);
expect(platform.is('mobile')).toEqual(true);
expect(platform.is('windows')).toEqual(true);
expect(platform.is('android')).toEqual(false);
expect(platform.is('ios')).toEqual(false);
});
it('should set windows7 via user agent', () => {
it('should set windows platform via windows7 mobile user agent', () => {
let platform = new Platform();
platform.setUserAgent(WINDOWS7_UA);
platform.setUserAgent(WINDOWS7_PHONE_UA);
platform.load(null);
expect(platform.is('core')).toEqual(false);
expect(platform.is('mobile')).toEqual(true);
expect(platform.is('windows')).toEqual(true);
expect(platform.is('android')).toEqual(false);
@ -129,6 +138,7 @@ export function run() {
platform.setUserAgent(ANDROID_UA);
platform.load(null);
expect(platform.is('core')).toEqual(false);
expect(platform.is('mobile')).toEqual(true);
expect(platform.is('windows')).toEqual(false);
expect(platform.is('android')).toEqual(true);
@ -140,6 +150,7 @@ export function run() {
platform.setUserAgent(IPHONE_UA);
platform.load(null);
expect(platform.is('core')).toEqual(false);
expect(platform.is('mobile')).toEqual(true);
expect(platform.is('windows')).toEqual(false);
expect(platform.is('android')).toEqual(false);
@ -153,6 +164,7 @@ export function run() {
platform.setUserAgent(IPAD_UA);
platform.load(null);
expect(platform.is('core')).toEqual(false);
expect(platform.is('mobile')).toEqual(true);
expect(platform.is('windows')).toEqual(false);
expect(platform.is('android')).toEqual(false);
@ -161,11 +173,104 @@ export function run() {
expect(platform.is('tablet')).toEqual(true);
});
it('should set core platform for osx desktop firefox', () => {
let platform = new Platform();
platform.setUserAgent(OSX_10_FIREFOX_43_UA);
platform.load(null);
expect(platform.is('core')).toEqual(true);
expect(platform.is('mobile')).toEqual(false);
expect(platform.is('windows')).toEqual(false);
expect(platform.is('android')).toEqual(false);
expect(platform.is('ios')).toEqual(false);
expect(platform.is('ipad')).toEqual(false);
expect(platform.is('tablet')).toEqual(false);
});
it('should set core platform for osx desktop safari', () => {
let platform = new Platform();
platform.setUserAgent(OSX_10_SAFARI_9_UA);
platform.load(null);
expect(platform.is('core')).toEqual(true);
expect(platform.is('mobile')).toEqual(false);
expect(platform.is('windows')).toEqual(false);
expect(platform.is('android')).toEqual(false);
expect(platform.is('ios')).toEqual(false);
expect(platform.is('ipad')).toEqual(false);
expect(platform.is('tablet')).toEqual(false);
});
it('should set core platform for osx desktop chrome', () => {
let platform = new Platform();
platform.setUserAgent(OSX_10_CHROME_49_UA);
platform.load(null);
expect(platform.is('core')).toEqual(true);
expect(platform.is('mobile')).toEqual(false);
expect(platform.is('windows')).toEqual(false);
expect(platform.is('android')).toEqual(false);
expect(platform.is('ios')).toEqual(false);
expect(platform.is('ipad')).toEqual(false);
expect(platform.is('tablet')).toEqual(false);
});
it('should set core platform for windows desktop chrome', () => {
let platform = new Platform();
platform.setUserAgent(WINDOWS_10_CHROME_40_UA);
platform.load(null);
expect(platform.is('core')).toEqual(true);
expect(platform.is('mobile')).toEqual(false);
expect(platform.is('windows')).toEqual(false);
expect(platform.is('android')).toEqual(false);
expect(platform.is('ios')).toEqual(false);
expect(platform.is('ipad')).toEqual(false);
expect(platform.is('tablet')).toEqual(false);
});
it('should set core platform for windows desktop edge', () => {
let platform = new Platform();
platform.setUserAgent(WINDOWS_10_EDGE_12_UA);
platform.load(null);
expect(platform.is('core')).toEqual(true);
expect(platform.is('mobile')).toEqual(false);
expect(platform.is('windows')).toEqual(false);
expect(platform.is('android')).toEqual(false);
expect(platform.is('ios')).toEqual(false);
expect(platform.is('ipad')).toEqual(false);
expect(platform.is('tablet')).toEqual(false);
});
it('should set core platform for windows desktop IE', () => {
let platform = new Platform();
platform.setUserAgent(WINDOWS_8_IE_11_UA);
platform.load(null);
expect(platform.is('core')).toEqual(true);
expect(platform.is('mobile')).toEqual(false);
expect(platform.is('windows')).toEqual(false);
expect(platform.is('android')).toEqual(false);
expect(platform.is('ios')).toEqual(false);
expect(platform.is('ipad')).toEqual(false);
expect(platform.is('tablet')).toEqual(false);
});
}
const WINDOWS_UA = 'Mozilla/5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident/7.0; Touch; rv:11.0; IEMobile/11.0; NOKIA; Lumia 930) like iPhone OS 7_0_3 Mac OS X AppleWebKit/537 (KHTML, like Gecko) Mobile Safari/537';
const WINDOWS8_UA = 'Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 920)';
const WINDOWS7_UA = 'Mozilla/4.0 (compatible; MSIE 7.0; Windows Phone OS 7.0; Trident/3.1; IEMobile/7.0; LG; GW910)';
const OSX_10_FIREFOX_43_UA = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:43.0) Gecko/20100101 Firefox/43.0';
const OSX_10_SAFARI_9_UA = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/601.4.4 (KHTML, like Gecko) Version/9.0.3 Safari/601.4.4';
const OSX_10_CHROME_49_UA = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.110 Safari/537.36';
const WINDOWS_10_CHROME_40_UA = 'Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.93 Safari/537.36';
const WINDOWS_10_EDGE_12_UA = 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0';
const WINDOWS_8_IE_11_UA = 'Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; Touch; rv:11.0) like Gecko';
const WINDOWS_PHONE_UA = 'Mozilla/5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident/7.0; Touch; rv:11.0; IEMobile/11.0; NOKIA; Lumia 930) like iPhone OS 7_0_3 Mac OS X AppleWebKit/537 (KHTML, like Gecko) Mobile Safari/537';
const WINDOWS8_PHONE_UA = 'Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 920)';
const WINDOWS7_PHONE_UA = 'Mozilla/4.0 (compatible; MSIE 7.0; Windows Phone OS 7.0; Trident/3.1; IEMobile/7.0; LG; GW910)';
const ANDROID_UA = 'Mozilla/5.0 (Linux; Android 5.1.1; Nexus 6 Build/LYZ28E) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.20 Mobile Safari/537.36';
const IPHONE_UA = 'Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4';
const IPAD_UA = 'Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53';