javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 05:58:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(toolbar): rename the slots to match other component behavior

Browse Source 
`left` -> `start`
`right` -> `end`
`start` -> `secondary`
`end` -> `primary`
This commit is contained in:
Brandy Carney
2018-03-27 16:41:30 -04:00
parent 6fbd708ae0
commit ce5b47ef99
29 changed files with 129 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,7 +14,7 @@
</ion-toolbar>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@ -22,7 +22,7 @@
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button color="secondary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
@ -96,7 +96,7 @@
<ion-footer>
<ion-toolbar>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>

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

@ -14,7 +14,7 @@
</ion-toolbar>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@ -22,7 +22,7 @@
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button color="secondary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
@ -96,7 +96,7 @@
<ion-footer>
<ion-toolbar>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>

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

@ -18,7 +18,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@ -26,7 +26,7 @@
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button color="secondary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
@ -35,7 +35,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@ -43,7 +43,7 @@
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button color="secondary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
@ -52,7 +52,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@ -60,7 +60,7 @@
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button color="secondary" class="activated">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
@ -69,7 +69,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button fill="solid">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@ -79,7 +79,7 @@
</ion-button>
</ion-buttons>
<ion-title>Solid</ion-title>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button fill="solid" color="secondary">
Help
<ion-icon slot="end" name="help-circle"></ion-icon>
@ -88,7 +88,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button href="#" fill="solid" class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@ -98,7 +98,7 @@
</ion-button>
</ion-buttons>
<ion-title>Solid Activated</ion-title>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button fill="solid" color="secondary" class="activated">
Help
<ion-icon slot="end" name="help-circle"></ion-icon>
@ -107,7 +107,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button fill="outline">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@ -116,7 +116,7 @@
Star
</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button color="secondary" 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">
<ion-buttons slot="secondary">
<ion-button fill="outline" class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@ -134,7 +134,7 @@
Star
</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button color="secondary" fill="outline" class="activated">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
@ -143,13 +143,13 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="start" name="contact"></ion-icon>
Clear
</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button href="#">
Edit
<ion-icon slot="end" name="create"></ion-icon>
@ -159,12 +159,12 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button>
Go Back
</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button href="#">
Edit
</ion-button>
@ -180,7 +180,7 @@
</ion-button>
</ion-menu-toggle>
</ion-buttons>
<ion-buttons slot="start">
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
@ -189,7 +189,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button onclick="buttonClick()">
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
@ -205,7 +205,7 @@
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="end">
<ion-buttons slot="primary">
<ion-button onclick="buttonClick()">
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>

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

@ -122,13 +122,19 @@
// --------------------------------------------------
.bar-buttons-ios {
order: map-get($toolbar-order-ios, buttons-start);
order: map-get($toolbar-order-ios, buttons-secondary);
transform: translateZ(0);
}
.bar-buttons-ios[slot="left"] {
order: map-get($toolbar-order-ios, buttons-left);
.bar-buttons-ios[slot="start"] {
order: map-get($toolbar-order-ios, buttons-start);
}
.bar-buttons-ios[slot="primary"] {
@include text-align(end);
order: map-get($toolbar-order-ios, buttons-primary);
}
.bar-buttons-ios[slot="end"] {
@ -137,12 +143,6 @@
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

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

@ -7,11 +7,11 @@
$toolbar-order-ios: (
back-button: 0,
menu-toggle-start: 1,
buttons-left: 2,
buttons-start: 3,
buttons-start: 2,
buttons-secondary: 3,
content: 4,
buttons-end: 5,
buttons-right: 6,
buttons-primary: 5,
buttons-end: 6,
menu-toggle-end: 7,
);

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

@ -119,13 +119,19 @@
.bar-buttons-md {
@include margin(0, 2px);
order: map-get($toolbar-order-md, buttons-start);
order: map-get($toolbar-order-md, buttons-secondary);
transform: translateZ(0);
}
.bar-buttons-md[slot="left"] {
order: map-get($toolbar-order-md, buttons-left);
.bar-buttons-md[slot="start"] {
order: map-get($toolbar-order-md, buttons-start);
}
.bar-buttons-md[slot="primary"] {
@include text-align(end);
order: map-get($toolbar-order-md, buttons-primary);
}
.bar-buttons-md[slot="end"] {
@ -134,12 +140,6 @@
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
// --------------------------------------------------

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

@ -7,11 +7,11 @@
$toolbar-order-md: (
back-button: 0,
menu-toggle-start: 1,
buttons-left: 2,
buttons-start: 2,
content: 3,
buttons-start: 4,
buttons-end: 5,
buttons-right: 6,
buttons-secondary: 4,
buttons-primary: 5,
buttons-end: 6,
menu-toggle-end: 7,
);

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

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