Skip to content

Commit dc870d4

Browse files
committed
feat(MdToolbar): create multiline toolbars
1 parent 1006293 commit dc870d4

File tree

8 files changed

+146
-28
lines changed

8 files changed

+146
-28
lines changed

docs/app/components/CodeExample.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,10 @@
8080
z-index: 1;
8181
background-color: $color;
8282
color: #fff;
83+
84+
.md-icon {
85+
color: #fff;
86+
}
8387
}
8488
8589
.md-title {

docs/app/components/JsfiddleEdit.vue

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,6 @@ new Vue({
4646
</form>
4747
</template>
4848

49-
<style lang="scss" scoped>
50-
.form-data {
51-
display: none;
52-
}
53-
</style>
54-
5549
<script>
5650
const vueMaterialUrl = 'https://unpkg.com/vue-material'
5751
@@ -87,3 +81,17 @@ new Vue({
8781
}
8882
}
8983
</script>
84+
85+
<style lang="scss" scoped>
86+
.jsfiddle-edit {
87+
.form-data {
88+
display: none;
89+
}
90+
91+
.md-button {
92+
.md-icon {
93+
color: #fff;
94+
}
95+
}
96+
}
97+
</style>

docs/app/pages/Components/Toolbar/Toolbar.vue

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<example src="./examples/RegularToolbar.vue" />
22
<example src="./examples/ToolbarSizes.vue" />
3+
<example src="./examples/ContentActions.vue" />
34

45
<template>
56
<page-container centered :title="$t('pages.content.title')">
@@ -15,8 +16,8 @@
1516
<api-item title="API">
1617
<p>The following options can be applied to all buttons, even the FAB ones:</p>
1718

18-
<api-table :headings="api.regular.props.headings" :props="api.regular.props.props" slot="props" />
1919
<api-table :headings="api.regular.classes.headings" :props="api.regular.classes.props" slot="classes" />
20+
<api-table :headings="api.regular.props.headings" :props="api.regular.props.props" slot="props" />
2021
</api-item>
2122
</div>
2223

@@ -25,6 +26,15 @@
2526

2627
<code-example title="Sizes" :component="examples['toolbar-sizes']" />
2728
</div>
29+
30+
<div class="page-container-section">
31+
<h2>Content and Actions</h2>
32+
<p>As the Toolbars are mostly used to hold actions that affects the entire application, you can create rows or sections inside it.</p>
33+
<p>Although those rows works on every toolbar, they we're created to hold contents for large toolbars. This element is represented by the <code>.md-toolbar-row</code> class. A row can also have a <code>.md-toolbar-offset</code> to add a little space on the left of it. This is commonly used inside the second row of an large toolbar.</p>
34+
<p>The sections are used to split horizontally the content of the toolbar (or the row inside). You can apply them using two types of section: <code>.md-toolbar-section-start</code> will be left-aligned and <code>.md-toolbar-section-end</code> right-aligned.</p>
35+
36+
<code-example title="Rows, Title and Icons" :component="examples['content-actions']" />
37+
</div>
2838
</page-container>
2939
</template>
3040

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<template>
2+
<div>
3+
<md-toolbar>
4+
<h3 class="md-title" style="flex: 1">Title</h3>
5+
<md-button class="md-icon-button">
6+
<md-icon>more_vert</md-icon>
7+
</md-button>
8+
</md-toolbar>
9+
10+
<md-toolbar class="md-accent" md-elevation="1">
11+
<h3 class="md-title" style="flex: 1">Title</h3>
12+
<md-button>Refresh</md-button>
13+
<md-button class="md-primary">Create</md-button>
14+
</md-toolbar>
15+
16+
<md-toolbar class="md-large md-primary">
17+
<div class="md-toolbar-row">
18+
<div class="md-toolbar-section-start">
19+
<md-button class="md-icon-button">
20+
<md-icon>menu</md-icon>
21+
</md-button>
22+
</div>
23+
24+
<div class="md-toolbar-section-end">
25+
<md-button class="md-icon-button">
26+
<md-icon>refresh</md-icon>
27+
</md-button>
28+
29+
<md-button class="md-icon-button">
30+
<md-icon>more_vert</md-icon>
31+
</md-button>
32+
</div>
33+
</div>
34+
35+
<div class="md-toolbar-row md-toolbar-offset">
36+
<h3 class="md-title">Title on a second row</h3>
37+
</div>
38+
</md-toolbar>
39+
</div>
40+
</template>
41+
42+
<style lang="scss" scoped>
43+
.md-toolbar + .md-toolbar {
44+
margin-top: 16px;
45+
}
46+
</style>
47+
48+
<script>
49+
export default {
50+
name: 'ContentAction'
51+
}
52+
</script>

src/components/MdButton/MdButton.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,7 @@
210210
}
211211
}
212212
213-
.md-icon-button,
213+
.md-icon-button.md-dense,
214214
.md-fab.md-mini,
215215
.md-fab.md-dense {
216216
.md-ripple-wave {

src/components/MdToolbar/MdToolbar.vue

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,9 @@
3535
display: flex;
3636
align-items: center;
3737
align-content: center;
38-
transition: $md-transition-default;
39-
transition-property: background-color, min-height;
40-
will-change: background-color, min-height;
38+
transition: .3s $md-transition-default-timing;
39+
transition-property: background-color, color, min-height;
40+
will-change: background-color, color, min-height;
4141
4242
@include md-layout-small {
4343
min-height: $md-toolbar-height-landscape;
@@ -49,7 +49,7 @@
4949
}
5050
5151
.md-toolbar {
52-
padding: 0 8px 0 16px;
52+
padding: 0 8px;
5353
flex-flow: row wrap;
5454
position: relative;
5555
@@ -74,21 +74,57 @@
7474
7575
&.md-dense {
7676
min-height: 96px;
77+
78+
.md-toolbar-row + .md-toolbar-row {
79+
min-height: 32px;
80+
}
7781
}
7882
}
7983
84+
.md-toolbar-offset {
85+
margin-left: 48px;
86+
}
87+
8088
.md-title {
8189
margin: 0;
90+
margin-left: 8px;
8291
overflow: hidden;
8392
font-weight: 400;
8493
letter-spacing: .02em;
8594
text-overflow: ellipsis;
8695
white-space: nowrap;
8796
vertical-align: top
8897
}
98+
99+
.md-button {
100+
&:last-child,
101+
+ .md-button {
102+
margin-right: 0;
103+
}
104+
105+
&:first-child {
106+
margin-left: 0;
107+
}
108+
}
89109
}
90110
91111
.md-toolbar-row {
92112
align-self: flex-start;
93113
}
114+
115+
.md-toolbar-section-start,
116+
.md-toolbar-section-end {
117+
display: flex;
118+
flex: 1;
119+
}
120+
121+
.md-toolbar-section-start {
122+
justify-content: flex-start;
123+
order: 1;
124+
}
125+
126+
.md-toolbar-section-end {
127+
justify-content: flex-end;
128+
order: 2;
129+
}
94130
</style>

src/components/MdToolbar/theme.scss

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,18 @@
1+
@mixin md-toolbar-icon($primary, $secondary) {
2+
.md-icon {
3+
@include md-theme-property(fill, $primary, $secondary);
4+
@include md-theme-property(color, $primary, $secondary);
5+
}
6+
}
7+
8+
@mixin md-toolbar-button($primary, $secondary) {
9+
.md-button:not([disabled]) {
10+
&:not(.md-raised) {
11+
@include md-theme-property(color, $primary, $secondary);
12+
}
13+
}
14+
}
15+
116
.md-toolbar {
217
@include md-theme-component() {
318
@include md-theme-property(color, text-primary, background-variant);
@@ -8,35 +23,26 @@
823
@include md-theme-property-by-hue(background-color, grey, 900, toolbar, background);
924
}
1025

26+
@include md-toolbar-icon(text-primary, background-variant);
27+
1128
&.md-primary {
1229
@include md-theme-property(background-color, primary);
1330
@include md-theme-property(color, text-primary, primary);
14-
15-
.md-icon {
16-
@include md-theme-property(fill, text-primary, primary);
17-
}
31+
@include md-toolbar-icon(text-primary, primary);
32+
@include md-toolbar-button(text-primary, primary);
1833
}
1934

2035
&.md-accent {
2136
@include md-theme-property(background-color, accent);
2237
@include md-theme-property(color, text-primary, accent);
23-
24-
.md-icon {
25-
@include md-theme-property(fill, text-primary, accent);
26-
}
38+
@include md-toolbar-icon(text-primary, accent);
39+
@include md-toolbar-button(text-primary, accent);
2740
}
2841

2942
&.md-transparent {
3043
background-color: transparent;
3144
@include md-theme-property(color, text-primary, background);
32-
33-
.md-icon {
34-
@include md-theme-property(fill, text-primary, background);
35-
}
36-
}
37-
38-
.md-icon {
39-
@include md-theme-property(fill, text-primary, background);
45+
@include md-toolbar-icon(text-primary, background);
4046
}
4147
}
4248
}

src/components/mdButton/theme.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@
3535
}
3636

3737
&:not([disabled]) {
38+
@include md-theme-property(background-color, background);
39+
3840
&.md-primary {
3941
@include md-theme-property(color, text-primary, primary);
4042
@include md-theme-property(background-color, primary);

0 commit comments

Comments
 (0)