diff --git a/core/src/components/segment/test/modes/index.html b/core/src/components/segment/test/modes/index.html index 696e5a2c58..9988eb247d 100644 --- a/core/src/components/segment/test/modes/index.html +++ b/core/src/components/segment/test/modes/index.html @@ -21,8 +21,8 @@ -

Mode: ios

- +

Mode: segment & button ios

+ Puppies @@ -34,10 +34,21 @@ -
+

Mode: segment ios

+ + + Puppies + + + Kittens + + + Turtles + + -

Mode: md

- +

Mode: segment ios, button: md

+ Puppies @@ -48,6 +59,48 @@ Turtles + +
+ +

Mode: segment & button md

+ + + Puppies + + + Kittens + + + Turtles + + + + +

Mode: segment md

+ + + Puppies + + + Kittens + + + Turtles + + + +

Mode: segment md, button: ios

+ + + Puppies + + + Kittens + + + Turtles + + diff --git a/core/src/components/title/title.ios.scss b/core/src/components/title/title.ios.scss new file mode 100644 index 0000000000..f7285fdf5f --- /dev/null +++ b/core/src/components/title/title.ios.scss @@ -0,0 +1,57 @@ +@import "./title"; + +// iOS Title +// -------------------------------------------------- + +:host { + @include position(0, null, null, 0); + @include padding(0, 90px, 0); + + position: absolute; + + width: 100%; + height: 100%; + + transform: translateZ(0); + + font-size: 17px; + font-weight: 600; + + text-align: center; + box-sizing: border-box; + pointer-events: none; +} + + +// iOS Title: Small +// -------------------------------------------------- + +:host(.title-small) { + @include padding(6px, 9px, 16px, 9px); + + position: relative; + + font-size: 13px; + font-weight: normal; +} + + +// iOS Title: Large +// -------------------------------------------------- + +:host(.title-large) { + @include padding(0, 16px); + + bottom: 0; + + align-items: flex-end; + + min-width: 100%; + + padding-bottom: 6px; + + font-size: 34px; + font-weight: 700; + + text-align: start; +} diff --git a/core/src/components/title/title.md.scss b/core/src/components/title/title.md.scss new file mode 100644 index 0000000000..c72d95d2ee --- /dev/null +++ b/core/src/components/title/title.md.scss @@ -0,0 +1,27 @@ +@import "./title"; + +// Material Design Title +// -------------------------------------------------- + +:host { + @include padding(0, 20px); + + font-size: 20px; + font-weight: 500; + + letter-spacing: .0125em; +} + + +// Material Design Title: Small +// -------------------------------------------------- + +:host(.title-small) { + width: 100%; + height: 100%; + + font-size: 15px; + + font-weight: normal; +} + diff --git a/core/src/components/title/title.scss b/core/src/components/title/title.scss index f35f7096ac..48680a97d3 100644 --- a/core/src/components/title/title.scss +++ b/core/src/components/title/title.scss @@ -19,35 +19,6 @@ color: var(--color); } -:host(.title-ios.title-default), -:host(.title-ios.title-large) { - @include position(0, null, null, 0); - @include padding(0, 90px, 0); - - position: absolute; - - width: 100%; - height: 100%; - - transform: translateZ(0); - - font-size: 17px; - font-weight: 600; - - text-align: center; - box-sizing: border-box; - pointer-events: none; -} - -:host(.title-md) { - @include padding(0, 20px); - - font-size: 20px; - font-weight: 500; - - letter-spacing: .0125em; -} - :host(.ion-color) { color: #{current-color(base)}; } @@ -72,44 +43,3 @@ :host(.title-small) .toolbar-title { white-space: normal; } - -:host(.title-ios.title-small) { - @include padding(6px, 9px, 16px, 9px); - - width: 100%; - height: 100%; - - font-size: 13px; - - text-align: center; -} - -:host(.title-md.title-small) { - width: 100%; - height: 100%; - - font-size: 15px; - - font-weight: normal; -} - - -// Title: Large -// -------------------------------------------------- - -:host(.title-ios.title-large) { - @include padding(0, 16px); - - bottom: 0; - - align-items: flex-end; - - min-width: 100%; - - padding-bottom: 6px; - - font-size: 34px; - font-weight: 700; - - text-align: start; -} diff --git a/core/src/components/title/title.tsx b/core/src/components/title/title.tsx index f54b946004..f057c89beb 100644 --- a/core/src/components/title/title.tsx +++ b/core/src/components/title/title.tsx @@ -6,7 +6,10 @@ import { createColorClasses } from '../../utils/theme'; @Component({ tag: 'ion-title', - styleUrl: 'title.scss', + styleUrls: { + 'ios': 'title.ios.scss', + 'md': 'title.md.scss' + }, shadow: true }) export class ToolbarTitle implements ComponentInterface { @@ -52,21 +55,14 @@ export class ToolbarTitle implements ComponentInterface { return (this.size !== undefined) ? this.size : 'default'; } - private getMode() { - const mode = getIonMode(this); - const toolbar = this.el.closest('ion-toolbar'); - return (toolbar && toolbar.mode) || mode; - } - render() { - const mode = this.getMode(); + const mode = getIonMode(this); const size = this.getSize(); return ( { + const page = await newE2EPage({ + url: '/src/components/toolbar/test/modes?ionic:_testing=true' + }); + + const compare = await page.compareScreenshot(); + expect(compare).toMatchScreenshot(); +}); + +test('toolbar:rtl: modes', async () => { + const page = await newE2EPage({ + url: '/src/components/toolbar/test/modes?ionic:_testing=true&rtl=true' + }); + + const compare = await page.compareScreenshot(); + expect(compare).toMatchScreenshot(); +}); diff --git a/core/src/components/toolbar/test/modes/index.html b/core/src/components/toolbar/test/modes/index.html new file mode 100644 index 0000000000..c3f51309dd --- /dev/null +++ b/core/src/components/toolbar/test/modes/index.html @@ -0,0 +1,84 @@ + + + + + + Toolbar - Modes + + + + + + + + + + + + + + iOS toolbar + + + + + MD toolbar + + + + + iOS toolbar + + + Outline + + + Clear + Solid + + + + + + MD toolbar + + + Outline + + + Clear + Solid + + + + + + + + + + + + + + + + + iOS + Segment + + + + + + + MD + Segment + + + + + + + + diff --git a/core/src/global/ionic-global.ts b/core/src/global/ionic-global.ts index e1ff792518..1d48701995 100644 --- a/core/src/global/ionic-global.ts +++ b/core/src/global/ionic-global.ts @@ -7,10 +7,10 @@ import { config, configFromSession, configFromURL, saveConfig } from './config'; declare const Context: any; -let mode: Mode; +let defaultMode: Mode; export const getIonMode = (ref?: any): Mode => { - return (ref && getMode(ref)) || mode; + return (ref && getMode(ref)) || defaultMode; }; export default () => { @@ -37,19 +37,28 @@ export default () => { } // first see if the mode was set as an attribute on - // which could have been set by the user, or by prerendering + // which could have been set by the user, or by pre-rendering // otherwise get the mode via config settings, and fallback to md Ionic.config = config; - Ionic.mode = mode = config.get('mode', (doc.documentElement.getAttribute('mode')) || (isPlatform(win, 'ios') ? 'ios' : 'md')); - config.set('mode', mode); - doc.documentElement.setAttribute('mode', mode); - doc.documentElement.classList.add(mode); + Ionic.mode = defaultMode = config.get('mode', (doc.documentElement.getAttribute('mode')) || (isPlatform(win, 'ios') ? 'ios' : 'md')); + config.set('mode', defaultMode); + doc.documentElement.setAttribute('mode', defaultMode); + doc.documentElement.classList.add(defaultMode); if (config.getBoolean('_testing')) { config.set('animated', false); } - setMode( - (elm: any) => (elm as any).mode = (elm as any).mode || elm.getAttribute('mode') || mode - ); + setMode((elm: any) => { + while (elm) { + const elmMode = (elm as any).mode || elm.getAttribute('mode'); + + if (elmMode) { + return elmMode; + } + + elm = elm.parentElement; + } + return defaultMode; + }); };