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

revert(toolbar): revert to use old button attributes

Browse Source 
references #14172
This commit is contained in:
Brandy Carney
2018-03-22 17:03:03 -04:00
parent 2b8e489f84
commit 574c346d45
10 changed files with 96 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
BREAKING.md
View File

@@ -941,7 +941,7 @@ Previously if a `menuToggle` directive was added to an Ionic `button` in a toolb
```html
<ion-toolbar>
<ion-buttons slot="start">
<ion-buttons slot="left">
<ion-menu-toggle>
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
@@ -954,39 +954,37 @@ Previously if a `menuToggle` directive was added to an Ionic `button` in a toolb
### Attributes Renamed
The attributes to position an `ion-buttons` element inside of a toolbar have been either removed or renamed, as well as the behavior of the attributes. We noticed there was some confusion behind the behavior of the `start` and `end` attributes, and with the new support for RTL we wanted to make these match RTL. In order to do this we have removed the old functionality behind the `start`/`end` attributes and renamed the `left`/`right` attributes.
Previously to positions buttons inside of a toolbar the following attributes were used: `start`, `left`, `right`, `end`.
**Old Properties:**
| Old Property | Old Behavior |
|--------------|------------------------------------------------------------------------------------------------------------------|
| `start` | Positions element to the `left` of the content in `ios` mode, and directly to the `right` in `md` and `wp` mode. |
| `end` | Positions element to the `right` of the content in `ios` mode, and to the far `right` in `md` and `wp` mode. |
| `left` | Positions element to the `left` of all other elements. |
| `right` | Positions element to the `right` of all other elements. |
**New Properties:**
| New Property | New Behavior |
|------------------|--------------------------------------------------------------------------------------------------------------|
| `slot="start"` | Positions element to the `left` of all other elements in `LTR`, and to the `right` in `RTL`. |
| `slot="end"` | Positions element to the `right` of all other elements in `LTR`, and to the `left` in `RTL`. |
These have been renamed to the following:
| Old Property | New Property | Property Behavior |
|--------------|----------------|------------------------------------------------------------------------------------------------------------------|
| `start` | `slot="start"` | Positions element to the `left` of the content in `ios` mode, and directly to the `right` in `md` and `wp` mode. |
| `end` | `slot="end"` | Positions element to the `right` of the content in `ios` mode, and to the far `right` in `md` and `wp` mode. |
| `left` | `slot="left"` | Positions element to the `left` of all other elements. |
| `right` | `slot="right"` | Positions element to the `right` of all other elements. |
**Old Usage Example:**
```html
<ion-toolbar>
<ion-buttons left>
<button ion-button>Cancel</button>
<button ion-button>Left</button>
</ion-buttons>
<ion-buttons start>
<button ion-button>Start</button>
</ion-buttons>
<ion-title>
Filter Sessions
Title
</ion-title>
<ion-buttons end>
<button ion-button>End</button>
</ion-buttons>
<ion-buttons right>
<button ion-button>Done</button>
<button ion-button>Right</button>
</ion-buttons>
</ion-toolbar>
```
@@ -995,30 +993,22 @@ The attributes to position an `ion-buttons` element inside of a toolbar have bee
```html
<ion-toolbar>
<ion-buttons slot="left">
<ion-button>Left</ion-button>
</ion-buttons>
<ion-buttons slot="start">
<ion-button>Cancel</ion-button>
<ion-button>Start</ion-button>
</ion-buttons>
<ion-title>
Filter Sessions
Title
</ion-title>
<ion-buttons slot="end">
<ion-button>Done</ion-button>
<ion-button>End</ion-button>
</ion-buttons>
<ion-buttons slot="right">
<ion-button>Right</ion-button>
</ion-buttons>
</ion-toolbar>
```
If you need to position buttons based on the mode, we recommend something like the following:
```html
<ion-toolbar>
<ion-buttons [slot]="mode === 'md' ? 'end' : 'start'">
<ion-button>Cancel</ion-button>
</ion-buttons>
<ion-title>
Filter Sessions
</ion-title>
</ion-toolbar>
```

38
core/src/components/button/test/toolbar/index.html
View File

@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script>
</head>
<body onload="initialize()">
<body>
<ion-app>
<ion-header>
@@ -25,7 +25,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start" class="dynamic-slot">
<ion-buttons slot="start">
<ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@@ -42,7 +42,7 @@
</ion-toolbar>
<ion-toolbar color="primary">
<ion-buttons slot="start" class="dynamic-slot">
<ion-buttons slot="start">
<ion-button class="closeButton" fill="clear">
Close
</ion-button>
@@ -59,7 +59,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start" class="dynamic-slot">
<ion-buttons slot="start">
<ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@@ -76,7 +76,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start" class="dynamic-slot">
<ion-buttons slot="start">
<ion-button class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@@ -93,7 +93,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start" class="dynamic-slot">
<ion-buttons slot="start">
<ion-button fill="solid">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@@ -112,7 +112,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start" class="dynamic-slot">
<ion-buttons slot="start">
<ion-button fill="solid" class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@@ -131,7 +131,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start" class="dynamic-slot">
<ion-buttons slot="start">
<ion-button fill="outline">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@@ -149,7 +149,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start" class="dynamic-slot">
<ion-buttons slot="start">
<ion-button fill="outline" class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@@ -167,7 +167,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start" class="dynamic-slot">
<ion-buttons slot="start">
<ion-button>
<ion-icon name="contact" slot="start"></ion-icon>
Clear
@@ -183,7 +183,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start" class="dynamic-slot">
<ion-buttons slot="start">
<ion-button>
Go Back
</ion-button>
@@ -200,7 +200,7 @@
<ion-button menuToggle slot="start">
<ion-icon name="menu"></ion-icon>
</ion-button>
<ion-buttons slot="start" class="dynamic-slot">
<ion-buttons slot="start">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
@@ -253,19 +253,5 @@
</ion-app>
<script>
function initialize() {
var mode = Ionic.mode;
if (mode === 'md') {
var buttons = document.querySelectorAll('.dynamic-slot');
for (var i = 0; i < buttons.length; i++) {
buttons[i].setAttribute('slot', 'end');
}
}
}
</script>
</body>
</html>

16
core/src/components/toolbar/test/basic/index.html
View File

@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script>
</head>
<body onload="initialize()">
<body>
<ion-app>
<ion-header>
<ion-toolbar color="primary">
@@ -14,7 +14,7 @@
</ion-toolbar>
<ion-toolbar color="primary">
<ion-buttons slot="start" class="dynamic-slot">
<ion-buttons slot="start">
<ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@@ -120,18 +120,6 @@
</style>
<script>
function initialize() {
var mode = Ionic.mode;
if (mode === 'md') {
var buttons = document.querySelectorAll('.dynamic-slot');
for (var i = 0; i < buttons.length; i++) {
buttons[i].setAttribute('slot', 'end');
}
}
}
let items = [];
for (var i = 0; i < 30; i++) {
items.push( i+1 );

16
core/src/components/toolbar/test/preview/index.html
View File

@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script>
</head>
<body onload="initialize()">
<body>
<ion-app>
<ion-header>
<ion-toolbar color="primary">
@@ -14,7 +14,7 @@
</ion-toolbar>
<ion-toolbar color="primary">
<ion-buttons slot="start" class="dynamic-slot">
<ion-buttons slot="start">
<ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@@ -120,18 +120,6 @@
</style>
<script>
function initialize() {
var mode = Ionic.mode;
if (mode === 'md') {
var buttons = document.querySelectorAll('.dynamic-slot');
for (var i = 0; i < buttons.length; i++) {
buttons[i].setAttribute('slot', 'end');
}
}
}
let items = [];
for (var i = 0; i < 30; i++) {
items.push( i+1 );

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

@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script>
</head>
<body onload="initialize()">
<body>
<ion-app>
<ion-content id="content">
<ion-toolbar no-padding>
@@ -18,7 +18,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start" class="dynamic-slot">
<ion-buttons slot="start">
<ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@@ -35,7 +35,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start" class="dynamic-slot">
<ion-buttons slot="start">
<ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@@ -52,7 +52,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start" class="dynamic-slot">
<ion-buttons slot="start">
<ion-button class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@@ -69,7 +69,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start" class="dynamic-slot">
<ion-buttons slot="start">
<ion-button fill="solid">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@@ -88,7 +88,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start" class="dynamic-slot">
<ion-buttons slot="start">
<ion-button href="#" fill="solid" class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@@ -107,7 +107,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start" class="dynamic-slot">
<ion-buttons slot="start">
<ion-button fill="outline">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@@ -125,7 +125,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start" class="dynamic-slot">
<ion-buttons slot="start">
<ion-button fill="outline" class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@@ -143,7 +143,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start" class="dynamic-slot">
<ion-buttons slot="start">
<ion-button>
<ion-icon slot="start" name="contact"></ion-icon>
Clear
@@ -159,7 +159,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start" class="dynamic-slot">
<ion-buttons slot="start">
<ion-button>
Go Back
</ion-button>
@@ -173,14 +173,14 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start" class="dynamic-slot">
<ion-menu-toggle>
<ion-buttons slot="left">
<ion-menu-toggle autoHide="false">
<ion-button>
<ion-icon name="menu"></ion-icon>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-menu-toggle>
</ion-buttons>
<ion-buttons slot="start" class="dynamic-slot">
<ion-buttons slot="start">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
@@ -195,10 +195,10 @@
</ion-button>
</ion-buttons>
<ion-title>Right side menu toggle</ion-title>
<ion-buttons slot="end">
<ion-menu-toggle>
<ion-buttons slot="right">
<ion-menu-toggle autoHide="false">
<ion-button>
<ion-icon name="menu"></ion-icon>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-menu-toggle>
</ion-buttons>
@@ -237,18 +237,6 @@
</ion-app>
<script>
function initialize() {
var mode = Ionic.mode;
if (mode === 'md') {
var buttons = document.querySelectorAll('.dynamic-slot');
for (var i = 0; i < buttons.length; i++) {
buttons[i].setAttribute('slot', 'end');
}
}
}
function buttonClick(ev) {
console.log('clicked button', ev);
}

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

@@ -122,19 +122,28 @@
// --------------------------------------------------
.bar-buttons-ios {
@include text-align(start);
order: map-get($toolbar-order-ios, buttons-start);
transform: translateZ(0);
}
.bar-buttons-ios[slot="left"] {
order: map-get($toolbar-order-ios, buttons-left);
}
.bar-buttons-ios[slot="end"] {
@include text-align(end);
order: map-get($toolbar-order-ios, buttons-end);
}
.bar-buttons-ios[slot="right"] {
@include text-align(right);
order: map-get($toolbar-order-ios, buttons-right);
}
// iOS Toolbar Button Default
// --------------------------------------------------
@@ -307,11 +316,6 @@
}
}
.bar-button-menutoggle-ios[slot="mode-end"],
.bar-button-menutoggle-ios[slot="end"] {
order: map-get($toolbar-order-ios, menu-toggle-end);
}
// iOS Toolbar Color Generation
// --------------------------------------------------

10
core/src/components/toolbar/toolbar.ios.vars.scss
View File

@@ -7,10 +7,12 @@
$toolbar-order-ios: (
back-button: 0,
menu-toggle-start: 1,
buttons-start: 2,
content: 3,
buttons-end: 4,
menu-toggle-end: 5,
buttons-left: 2,
buttons-start: 3,
content: 4,
buttons-end: 5,
buttons-right: 6,
menu-toggle-end: 7,
);
/// @prop - Font family of the toolbar

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

@@ -117,25 +117,34 @@
// --------------------------------------------------
.bar-buttons-md {
@include text-align(start);
@include margin(0, 2px);
order: map-get($toolbar-order-md, buttons-start);
transform: translateZ(0);
}
.bar-buttons-md[slot="left"] {
order: map-get($toolbar-order-md, buttons-left);
}
.bar-buttons-md[slot="end"] {
@include text-align(end);
order: map-get($toolbar-order-md, buttons-end);
}
.bar-buttons-md[slot="right"] {
@include text-align(right);
order: map-get($toolbar-order-md, buttons-right);
}
// Material Design Toolbar Button Default
// --------------------------------------------------
.bar-button-md {
@include margin(0, 2px, 0, 2px);
@include padding(0, 5px);
@include border-radius($toolbar-md-button-border-radius);
@@ -263,7 +272,6 @@
@include padding-horizontal(null, .3em);
font-size: 1.4em;
line-height: .67;
pointer-events: none;
}
@@ -272,7 +280,6 @@
@include padding-horizontal(.4em, null);
font-size: 1.4em;
line-height: .67;
pointer-events: none;
}
@@ -280,10 +287,7 @@
.bar-button-md ion-icon[slot="icon-only"] {
@include padding(0);
min-width: 28px;
font-size: 1.8em;
line-height: .67;
pointer-events: none;
}
@@ -293,7 +297,6 @@
// --------------------------------------------------
.bar-button-menutoggle-md {
@include margin(0, 6px);
@include padding(0, 2px);
order: map-get($toolbar-order-md, menu-toggle-start);
@@ -307,15 +310,6 @@
font-size: 24px;
}
.bar-button-menutoggle-md[slot="mode-end"],
.bar-button-menutoggle-md[slot="end"] {
@include margin(0, 2px);
order: map-get($toolbar-order-md, menu-toggle-end);
min-width: 28px;
}
// Material Design Toolbar Color Generation
// --------------------------------------------------

8
core/src/components/toolbar/toolbar.md.vars.scss
View File

@@ -7,10 +7,12 @@
$toolbar-order-md: (
back-button: 0,
menu-toggle-start: 1,
buttons-start: 2,
buttons-left: 2,
content: 3,
buttons-end: 4,
menu-toggle-end: 5,
buttons-start: 4,
buttons-end: 5,
buttons-right: 6,
menu-toggle-end: 7,
);
/// @prop - Font family of the toolbar

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

@@ -66,11 +66,13 @@ export class Toolbar {
return [
<div class={backgroundCss}></div>,
<slot name='left'></slot>,
<slot name='start'></slot>,
<div class={contentCss}>
<slot></slot>
</div>,
<slot name='end'></slot>
<slot name='end'></slot>,
<slot name='right'></slot>
];
}
}