javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(toolbar): update md toolbar button spacing and padding to match spec (#17537)

Browse Source 
- Removes the padding from the main toolbar and individually style the components inside of it
- Adds a `has-icon-only` class to button, this is used to switch between `unbounded` and `bounded` ripples on buttons in a toolbar. If the button is clear and only has an icon, we use the unbounded "circular" ripple effect, otherwise still use the bounded one. This matches the MD spec, without making the other buttons look off.
- Using the class above, style the button differently to match the MD spec
- Updates the back button and menu button to use the proper size / icon size
- Removes the opacity on an activated back button, it should use the ripple for activated
- Moves the margin to the slots in a toolbar by grabbing the "first" and "last" slot and applying a class to them
- Makes the segment in a toolbar use the min height from the toolbar
- Updates the back button so that it matches the MD spec
- Updates the header box shadow to use the old v3 datauri 

fixes #16950 fixes #14444
This commit is contained in:
Brandy Carney
2019-05-17 14:54:21 -04:00
committed by GitHub
parent a8f9dfe0e1
commit fa87e35a05
23 changed files with 511 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
core/src/components/back-button/back-button.ios.scss
View File

@@ -35,3 +35,10 @@
overflow: visible;
z-index: $back-button-ios-button-z-index;
}
// Back Button States
// --------------------------------------------------
:host(.activated) .button-native {
opacity: .4;
}

21
core/src/components/back-button/back-button.md.scss
View File

@@ -6,22 +6,24 @@
:host {
--color: #{$back-button-md-color};
--margin-top: 1px;
--margin-end: 6px;
--margin-top: 0;
--margin-end: 0;
--margin-bottom: 0;
--margin-start: 0;
--padding-top: 0;
--padding-end: 5px;
--padding-end: 0;
--padding-bottom: 0;
--padding-start: 5px;
--padding-start: 0;
--min-height: 32px;
--min-width: 44px;
--icon-padding-end: .3em;
--icon-padding-start: .3em;
--icon-padding-top: 0;
--icon-padding-end: 0;
--icon-padding-start: 0;
--icon-padding-bottom: 0;
--icon-margin-top: 0;
--icon-margin-end: 6px;
--icon-margin-end: 0;
--icon-margin-bottom: 0;
--icon-margin-start: 6px;
--icon-margin-start: 0;
--icon-font-size: 24px;
--icon-font-weight: normal;
@@ -32,6 +34,9 @@
}
.button-native {
width: 48px;
height: 48px;
box-shadow: none;
}

4
core/src/components/back-button/back-button.scss
View File

@@ -77,10 +77,6 @@
// Back Button States
// --------------------------------------------------
:host(.activated) .button-native {
opacity: .4;
}
:host-context(.can-go-back > ion-header),
:host(.show-back-button) {
display: block;

5
core/src/components/back-button/back-button.tsx
View File

@@ -77,10 +77,7 @@ export class BackButton implements ComponentInterface {
const backButtonText = this.text != null ? this.text : this.config.get('backButtonText', defaultBackButtonText);
return (
<button
type="button"
class="button-native"
>
<button type="button" class="button-native">
<span class="button-inner">
{backButtonIcon && <ion-icon icon={backButtonIcon} lazy={false}></ion-icon>}
{backButtonText && <span class="button-text">{backButtonText}</span>}

29
core/src/components/button/button.tsx
View File

@@ -130,6 +130,30 @@ export class Button implements ComponentInterface {
}
}
private get hasLabel() {
return this.el.textContent !== null && this.el.textContent.trim() !== '';
}
private get hasIcon() {
return !!this.el.querySelector('ion-icon');
}
private get hasIconOnly() {
return this.hasIcon && !this.hasLabel;
}
private get rippleType() {
const hasClearFill = this.fill === undefined || this.fill === 'clear';
// If the button is in a toolbar, has a clear fill (which is the default)
// and only has an icon we use the unbounded "circular" ripple effect
if (hasClearFill && this.hasIconOnly && this.inToolbar) {
return 'unbounded';
}
return 'bounded';
}
private onFocus = () => {
this.ionFocus.emit();
}
@@ -139,7 +163,7 @@ export class Button implements ComponentInterface {
}
hostData() {
const { buttonType, disabled, color, expand, shape, size, strong } = this;
const { buttonType, disabled, color, expand, hasIconOnly, shape, size, strong } = this;
let fill = this.fill;
if (fill === undefined) {
fill = this.inToolbar ? 'clear' : 'solid';
@@ -156,6 +180,7 @@ export class Button implements ComponentInterface {
[`${buttonType}-${fill}`]: true,
[`${buttonType}-strong`]: strong,
'button-has-icon-only': hasIconOnly,
'button-disabled': disabled,
'ion-activatable': true,
'ion-focusable': true,
@@ -183,7 +208,7 @@ export class Button implements ComponentInterface {
<slot></slot>
<slot name="end"></slot>
</span>
{this.mode === 'md' && <ion-ripple-effect type={this.inToolbar ? 'unbounded' : 'bounded'}></ion-ripple-effect>}
{this.mode === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
</TagType>
);
}

6
core/src/components/buttons/buttons.ios.scss
View File

@@ -6,17 +6,19 @@
// --------------------------------------------------
::slotted(*) ion-button {
--padding-top: 0;
--padding-bottom: 0;
--padding-start: 5px;
--padding-end: 5px;
@include margin-horizontal(2px, 2px);
height: 32px;
font-size: #{$toolbar-ios-button-font-size};
font-weight: 400;
}
::slotted(*) ion-button:not(.button-round) {
--border-radius: #{$toolbar-ios-button-border-radius};
}

19
core/src/components/buttons/buttons.md.scss
View File

@@ -11,6 +11,8 @@
--padding-end: 8px;
--box-shadow: none;
@include margin-horizontal(2px, 2px);
height: 32px;
font-size: #{$toolbar-md-button-font-size};
@@ -54,6 +56,23 @@
}
// Material Design Toolbar Icon Only Clear Button
// --------------------------------------------------
::slotted(*) .button-has-icon-only.button-clear {
--padding-top: 12px;
--padding-end: 12px;
--padding-bottom: 12px;
--padding-start: 12px;
--border-radius: 50%;
@include margin(0);
width: 48px;
height: 48px;
}
// Material Design Toolbar Solid Button
// --------------------------------------------------

5
core/src/components/buttons/buttons.scss
View File

@@ -16,11 +16,6 @@
::slotted(*) ion-button {
--padding-top: 0;
--padding-bottom: 0;
--padding-start: 0;
--padding-end: 0;
--box-shadow: none;
--overflow: visible;
@include margin(0);
@include margin-horizontal(2px, 2px);
}

4
core/src/components/header/header.md.scss
View File

@@ -9,14 +9,14 @@
// performance rather than using a box-shadow. There is a
// noticeable performance difference on older Android devices.
@include position(null, null, -$header-md-box-shadow-height, 0);
@include background-position(start, 0, top, 0);
@include background-position(start, 0, top, -2px);
position: absolute;
width: 100%;
height: $header-md-box-shadow-height;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAIBAMAAAACWGKkAAAAFVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAASAQCkAAAAB3RSTlMFTEIzJBcOYhQUIwAAAB9JREFUCNdjEIQCBiUoYDCGAgYXKGAIhQKGNChgwAAAorMLKSCkL40AAAAASUVORK5CYII=");
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAHBAMAAADzDtBxAAAAD1BMVEUAAAAAAAAAAAAAAAAAAABPDueNAAAABXRSTlMUCS0gBIh/TXEAAAAaSURBVAjXYxCEAgY4UIICBmMogMsgFLtAAQCNSwXZKOdPxgAAAABJRU5ErkJggg==);
background-repeat: repeat-x;
content: "";

2
core/src/components/header/header.md.vars.scss
View File

@@ -4,4 +4,4 @@
// --------------------------------------------------
/// @prop - Height of the header box shadow
$header-md-box-shadow-height: 8px !default;
$header-md-box-shadow-height: 5px !default;

9
core/src/components/menu-button/menu-button.md.scss
View File

@@ -9,6 +9,11 @@
--padding-end: 8px;
}
ion-icon {
font-size: 26px;
button {
width: 48px;
height: 48px;
}
ion-icon {
font-size: 24px;
}

1
core/src/components/menu-button/menu-button.scss
View File

@@ -67,6 +67,7 @@ ion-icon {
// Menu Button with Color
// --------------------------------------------------
// TODO this is not used
:host(.ion-color) .button-native {
color: current-color(base);
}

2
core/src/components/menu-button/menu-button.tsx
View File

@@ -40,8 +40,10 @@ export class MenuButton implements ComponentInterface {
return {
class: {
[`${this.mode}`]: true,
'button': true, // ion-buttons target .button
'ion-activatable': true,
'ion-focusable': true
}
};
}

2
core/src/components/searchbar/searchbar.md.scss
View File

@@ -118,5 +118,5 @@
// -----------------------------------------
:host-context(ion-toolbar) {
@include padding(3px);
@include padding(3px, 7px);
}

4
core/src/components/title/title.scss
View File

@@ -41,10 +41,12 @@
}
:host(.title-md) {
@include padding(0, 12px);
@include padding(0, 20px);
font-size: 20px;
font-weight: 500;
letter-spacing: .0125em;
}
:host(.ion-color) {

10
core/src/components/toolbar/test/components/e2e.ts Normal file
View File

@@ -0,0 +1,10 @@
import { newE2EPage } from '@stencil/core/testing';
test('toolbar: scenarios', async () => {
const page = await newE2EPage({
url: '/src/components/toolbar/test/scenarios'
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});

136
core/src/components/toolbar/test/components/index.html Normal file
View File

@@ -0,0 +1,136 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Toolbar - Components</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script src="../../../../../dist/ionic.js"></script>
</head>
<body>
<ion-app>
<ion-content id="content">
<!-- Left Side Menu Toggle Components -->
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Left Side Menu Toggle</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-segment color="secondary" value="second">
<ion-segment-button value="first">
Segment
</ion-segment-button>
<ion-segment-button value="second">
Component
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-searchbar placeholder="Searchbar..."></ion-searchbar>
</ion-toolbar>
<!-- Right Side Menu Toggle Components -->
<ion-toolbar>
<ion-buttons slot="start">
<ion-button onclick="buttonClick()">
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Right Side Menu Toggle</ion-title>
<ion-buttons slot="end">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-segment color="secondary" value="component">
<ion-segment-button value="segment">
Segment
</ion-segment-button>
<ion-segment-button value="component">
Component
</ion-segment-button>
</ion-segment>
<ion-buttons slot="end">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-searchbar placeholder="Searchbar..."></ion-searchbar>
<ion-buttons slot="end">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar color="light">
<ion-segment value="third">
<ion-segment-button value="first">
Light
</ion-segment-button>
<ion-segment-button value="second">
Bar
</ion-segment-button>
<ion-segment-button value="third">
Segment
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar color="light">
<ion-segment color="primary" value="first">
<ion-segment-button value="first">
Light
</ion-segment-button>
<ion-segment-button value="second">
Bar
</ion-segment-button>
<ion-segment-button value="third">
Primary
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-content>
</ion-app>
</body>
</html>

56
core/src/components/toolbar/test/scenarios/index.html
View File

@@ -177,62 +177,12 @@
<ion-title>Text Only</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Left side menu toggle</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="primary">
<ion-button onclick="buttonClick()">
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Right side menu toggle</ion-title>
<ion-buttons slot="end">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="primary">
<ion-button onclick="buttonClick()">
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-segment color="secondary">
<ion-segment-button value="something">
Something
</ion-segment-button>
<ion-segment-button value="else">
Else
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar>
<ion-segment>
<ion-segment-button value="light">
Light
</ion-segment-button>
<ion-segment-button value="toolbar">
Toolbar
</ion-segment-button>
<ion-segment-button value="default">
Default Segment
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<!-- iOS Toolbar -->
<ion-toolbar mode="ios">
<ion-title>This is an iOS toolbar</ion-title>
</ion-toolbar>
<!-- Material Design Toolbar -->
<ion-toolbar mode="md">
<ion-title>This is an MD toolbar</ion-title>
</ion-toolbar>

238
core/src/components/toolbar/test/spec/index.html
View File

@@ -1,4 +1,3 @@
@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html dir="ltr">
@@ -14,12 +13,12 @@
<body>
<ion-app>
<ion-header>
<ion-content>
<ion-toolbar color="tertiary">
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="secondary">
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="download"></ion-icon>
</ion-button>
@@ -33,28 +32,221 @@
<ion-title>Standard</ion-title>
</ion-toolbar>
</ion-header>
<ion-content id="content">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<ion-header>
<ion-toolbar color="tertiary">
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="heart"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Page title</ion-title>
</ion-toolbar>
</ion-header>
<ion-toolbar color="tertiary">
<ion-buttons slot="start">
<ion-button>
Clearing
</ion-button>
</ion-buttons>
<ion-buttons slot="secondary">
<ion-button>
Done
</ion-button>
</ion-buttons>
<ion-title>Text</ion-title>
</ion-toolbar>
<ion-toolbar color="tertiary">
<ion-buttons slot="start">
<ion-button>
Start
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
Pri
</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button>
End
</ion-button>
</ion-buttons>
<ion-buttons slot="secondary">
<ion-button>
Sec
</ion-button>
</ion-buttons>
<ion-title>Slots</ion-title>
</ion-toolbar>
<ion-toolbar color="tertiary">
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="secondary">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-title>Slots</ion-title>
</ion-toolbar>
<ion-toolbar color="tertiary">
<ion-buttons slot="end">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="secondary">
<ion-button>
<ion-icon name="call"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-title>Slots</ion-title>
</ion-toolbar>
<ion-toolbar color="tertiary">
<ion-buttons slot="end">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button>
<ion-icon name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="secondary">
<ion-button>
<ion-icon name="call"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-title>Slots</ion-title>
</ion-toolbar>
<ion-toolbar color="tertiary">
<ion-buttons slot="start">
<ion-back-button default-href="#"></ion-back-button>
</ion-buttons>
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Text</ion-title>
</ion-toolbar>
<ion-toolbar color="tertiary">
<ion-segment>
<ion-segment-button checked>All</ion-segment-button>
<ion-segment-button>Favorites</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar color="tertiary">
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-segment>
<ion-segment-button checked>All</ion-segment-button>
<ion-segment-button>Favorites</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar color="tertiary">
<ion-buttons slot="end">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-segment>
<ion-segment-button checked>All</ion-segment-button>
<ion-segment-button>Favorites</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar color="tertiary">
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-segment>
<ion-segment-button checked>All</ion-segment-button>
<ion-segment-button>Favorites</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar color="tertiary">
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-searchbar></ion-searchbar>
</ion-toolbar>
<ion-toolbar color="tertiary">
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
</ion-buttons>
<ion-progress-bar value=".4"></ion-progress-bar>
</ion-toolbar>
</ion-content>
<style>
ion-toolbar {
margin-bottom: 10px;
}
</style>
</ion-app>
</body>

9
core/src/components/toolbar/toolbar.ios.scss
View File

@@ -25,6 +25,15 @@
min-width: 0;
}
// Toolbar: Segment
// --------------------------------------------------
:host(.toolbar-segment) {
--min-height: auto;
}
// iOS Toolbar Slot Placement
// --------------------------------------------------

35
core/src/components/toolbar/toolbar.md.scss
View File

@@ -8,10 +8,10 @@
--background: #{$toolbar-md-background};
--color: #{$toolbar-md-color};
--border-color: #{$toolbar-md-border-color};
--padding-top: 4px;
--padding-bottom: 4px;
--padding-start: 4px;
--padding-end: 4px;
--padding-top: 0;
--padding-bottom: 0;
--padding-start: 0;
--padding-end: 0;
--min-height: 56px;
}
@@ -27,16 +27,33 @@
max-width: 100%;
}
// Toolbar: Segment
// --------------------------------------------------
:host(.toolbar-segment) {
--padding-top: 0;
--padding-bottom: 0;
--padding-start: 0;
--padding-end: 0;
::slotted(ion-segment) {
min-height: var(--min-height);
}
// Material Design Toolbar Buttons
// --------------------------------------------------
// Style the first slot with additional margin start
// this only ever gets added to the first start slot buttons
::slotted(.buttons-first-slot) {
@include margin-horizontal(4px, null);
}
// Style the last slot with additional margin end
// this is added to the end, primary, or secondary slot
// whichever it finds first, and the first one it finds
// if multiple of the same name are found
::slotted(.buttons-last-slot) {
@include margin-horizontal(null, 4px);
}
// Material Design Toolbar Slot Placement
// --------------------------------------------------

19
core/src/components/toolbar/toolbar.scss
View File

@@ -22,10 +22,7 @@
--opacity: 1;
@include font-smoothing();
@include padding-horizontal(
var(--ion-safe-area-left),
var(--ion-safe-area-right)
);
@include padding-horizontal(var(--ion-safe-area-left), var(--ion-safe-area-right));
display: block;
@@ -52,12 +49,8 @@
}
.toolbar-container {
@include padding(
var(--padding-top),
var(--padding-end),
var(--padding-bottom),
var(--padding-start)
);
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
display: flex;
position: relative;
@@ -99,13 +92,9 @@
}
// Toolbar: Segment
// Toolbar: Progress Bar
// --------------------------------------------------
:host(.toolbar-segment) {
--min-height: auto;
}
::slotted(ion-progress-bar) {
@include position(null, 0, 0, 0);

20
core/src/components/toolbar/toolbar.tsx
View File

@@ -37,6 +37,26 @@ export class Toolbar implements ComponentInterface {
*/
@Prop() mode!: Mode;
componentWillLoad() {
const buttons = Array.from(this.el.querySelectorAll('ion-buttons'));
const firstButtons = buttons.find(button => {
return button.slot === 'start';
});
if (firstButtons) {
firstButtons.classList.add('buttons-first-slot');
}
const buttonsReversed = buttons.reverse();
const lastButtons =
buttonsReversed.find(button => button.slot === 'end') ||
buttonsReversed.find(button => button.slot === 'primary') ||
buttonsReversed.find(button => button.slot === 'secondary');
if (lastButtons) {
lastButtons.classList.add('buttons-last-slot');
}
}
@Listen('ionStyle')
childrenStyle(ev: CustomEvent<StyleEventDetail>) {
ev.stopPropagation();