Skip to content

Commit 9d2617e

Browse files
marcosmouramarcosmoura
committed
comp(MdApp): create a app shell utility to hold drawers
1 parent 53a9d98 commit 9d2617e

20 files changed

+583
-251
lines changed

‎docs/app/i18n/en-US.js

+3
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,9 @@ export default {
2525
title: 'Button',
2626
description: 'Buttons communicate the action that will occur when the user touches them.'
2727
},
28+
app: {
29+
title: 'App'
30+
},
2831
checkbox: {
2932
title: 'Checkbox'
3033
},

‎docs/app/pages/Components/App/App.vue

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<example src="./examples/App.vue" />
2+
3+
<template>
4+
<page-container centered :title="$t('pages.app.title')">
5+
<div class="page-container-section">
6+
<p>The content surfaces that comprise applications are referred to in this spec as material, or sheets of material. The content component is commonly used to resemble a piece of paper. It'll be useful to theme a arbitrary content.</p>
7+
</div>
8+
9+
<div class="page-container-section">
10+
<h2>App</h2>
11+
12+
<code-example title="App Shell" :component="examples['app']" />
13+
14+
<api-item title="API - md-app">
15+
<p>This component do not have any extra option.</p>
16+
</api-item>
17+
</div>
18+
</page-container>
19+
</template>
20+
21+
<script>
22+
import examples from 'docs-mixins/docsExample'
23+
24+
export default {
25+
name: 'App',
26+
mixins: [examples],
27+
data: () => ({
28+
29+
})
30+
}
31+
</script>

‎docs/app/pages/Components/App/examples/App.vue

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<template>
2+
<div class="page-container">
3+
<md-app>
4+
<md-toolbar class="md-primary">
5+
<md-button class="md-icon-button" @click="menuVisible = !menuVisible">
6+
<md-icon>menu</md-icon>
7+
</md-button>
8+
<span class="md-title">Permanent - Full</span>
9+
</md-toolbar>
10+
11+
<md-drawer md-permanent="full" :md-visible.sync="menuVisible">
12+
<md-list>
13+
<md-list-item>
14+
<md-icon>move_to_inbox</md-icon>
15+
<span class="md-list-item-text">Inbox</span>
16+
</md-list-item>
17+
</md-list>
18+
</md-drawer>
19+
20+
<md-content>
21+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.
22+
</md-content>
23+
</md-app>
24+
</div>
25+
</template>
26+
27+
<style lang="scss" scoped>
28+
.md-app {
29+
border: 1px solid rgba(#000, .12);
30+
}
31+
32+
// Demo purposes only
33+
.md-drawer {
34+
width: 230px;
35+
max-width: calc(100vw - 125px);
36+
}
37+
</style>
38+
39+
<script>
40+
export default {
41+
name: 'App',
42+
data: () => ({
43+
menuVisible: false
44+
})
45+
}
46+
</script>

‎docs/app/pages/Components/Drawer/examples/PermanentCard.vue

+10-12
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<template>
2-
<div class="page-container">
3-
<md-toolbar class="md-primary">
4-
<span class="md-title">My Title</span>
5-
</md-toolbar>
2+
<div>
3+
<md-app>
4+
<md-toolbar class="md-primary">
5+
<span class="md-title">My Title</span>
6+
</md-toolbar>
67

7-
<main class="page-wrapper md-layout-row">
88
<md-drawer md-permanent="card">
99
<md-list>
1010
<md-list-item>
@@ -29,13 +29,15 @@
2929
</md-list>
3030
</md-drawer>
3131

32-
<div class="page-content md-flex">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</div>
33-
</main>
32+
<md-content>
33+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.
34+
</md-content>
35+
</md-app>
3436
</div>
3537
</template>
3638

3739
<style lang="scss" scoped>
38-
.page-container {
40+
.md-app {
3941
border: 1px solid rgba(#000, .12);
4042
}
4143
@@ -44,10 +46,6 @@
4446
width: 230px;
4547
max-width: calc(100vw - 125px);
4648
}
47-
48-
.page-content {
49-
padding: 16px 0;
50-
}
5149
</style>
5250

5351
<script>

‎docs/app/pages/Components/Drawer/examples/PermanentClipped.vue

+9-12
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<template>
22
<div class="page-container">
3-
<md-toolbar class="md-primary">
4-
<span class="md-title">My Title</span>
5-
</md-toolbar>
3+
<md-app>
4+
<md-toolbar class="md-primary">
5+
<span class="md-title">My Title</span>
6+
</md-toolbar>
67

7-
<main class="page-wrapper md-layout-row">
88
<md-drawer md-permanent="clipped">
99
<md-list>
1010
<md-list-item>
@@ -29,13 +29,15 @@
2929
</md-list>
3030
</md-drawer>
3131

32-
<div class="page-content md-flex">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</div>
33-
</main>
32+
<md-content>
33+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.
34+
</md-content>
35+
</md-app>
3436
</div>
3537
</template>
3638

3739
<style lang="scss" scoped>
38-
.page-container {
40+
.md-app {
3941
border: 1px solid rgba(#000, .12);
4042
}
4143
@@ -44,11 +46,6 @@
4446
width: 230px;
4547
max-width: calc(100vw - 125px);
4648
}
47-
48-
.page-content {
49-
padding: 16px;
50-
border-left: 1px solid rgba(#000, .12);
51-
}
5249
</style>
5350

5451
<script>

‎docs/app/pages/Components/Drawer/examples/PermanentFull.vue

+34-37
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,47 @@
11
<template>
22
<div class="page-container md-layout-row">
3-
<md-drawer md-permanent="full">
4-
<md-toolbar class="md-transparent" md-elevation="0">
5-
Navigation
6-
</md-toolbar>
7-
8-
<md-list>
9-
<md-list-item>
10-
<md-icon>move_to_inbox</md-icon>
11-
<span class="md-list-item-text">Inbox</span>
12-
</md-list-item>
13-
14-
<md-list-item>
15-
<md-icon>send</md-icon>
16-
<span class="md-list-item-text">Sent Mail</span>
17-
</md-list-item>
18-
19-
<md-list-item>
20-
<md-icon>delete</md-icon>
21-
<span class="md-list-item-text">Trash</span>
22-
</md-list-item>
23-
24-
<md-list-item>
25-
<md-icon>error</md-icon>
26-
<span class="md-list-item-text">Spam</span>
27-
</md-list-item>
28-
</md-list>
29-
</md-drawer>
30-
31-
<main class="page-wrapper md-flex md-layout-column">
3+
<md-app>
324
<md-toolbar class="md-primary">
335
<span class="md-title">My Title</span>
346
</md-toolbar>
357

36-
<div class="page-content md-flex">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</div>
37-
</main>
8+
<md-drawer md-permanent="full">
9+
<md-toolbar class="md-transparent" md-elevation="0">
10+
Navigation
11+
</md-toolbar>
12+
13+
<md-list>
14+
<md-list-item>
15+
<md-icon>move_to_inbox</md-icon>
16+
<span class="md-list-item-text">Inbox</span>
17+
</md-list-item>
18+
19+
<md-list-item>
20+
<md-icon>send</md-icon>
21+
<span class="md-list-item-text">Sent Mail</span>
22+
</md-list-item>
23+
24+
<md-list-item>
25+
<md-icon>delete</md-icon>
26+
<span class="md-list-item-text">Trash</span>
27+
</md-list-item>
28+
29+
<md-list-item>
30+
<md-icon>error</md-icon>
31+
<span class="md-list-item-text">Spam</span>
32+
</md-list-item>
33+
</md-list>
34+
</md-drawer>
35+
36+
<md-content>
37+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.
38+
</md-content>
39+
</md-app>
3840
</div>
3941
</template>
4042

4143
<style lang="scss" scoped>
42-
.page-container {
44+
.md-app {
4345
border: 1px solid rgba(#000, .12);
4446
}
4547
@@ -48,11 +50,6 @@
4850
width: 230px;
4951
max-width: calc(100vw - 125px);
5052
}
51-
52-
.page-content {
53-
padding: 16px;
54-
border-left: 1px solid rgba(#000, .12);
55-
}
5653
</style>
5754

5855
<script>

‎docs/app/pages/Components/Drawer/examples/Persistent.vue

+42-45
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,57 @@
11
<template>
2-
<div class="page-container md-layout-row">
3-
<md-drawer :md-visible.sync="menuVisible" md-persistent>
4-
<md-toolbar class="md-transparent" md-elevation="0">
5-
<span>Navigation</span>
6-
7-
<div class="md-toolbar-section-end">
8-
<md-button class="md-icon-button md-dense" @click="toggleMenu">
9-
<md-icon>keyboard_arrow_left</md-icon>
10-
</md-button>
11-
</div>
12-
</md-toolbar>
13-
14-
<md-list>
15-
<md-list-item>
16-
<md-icon>move_to_inbox</md-icon>
17-
<span class="md-list-item-text">Inbox</span>
18-
</md-list-item>
19-
20-
<md-list-item>
21-
<md-icon>send</md-icon>
22-
<span class="md-list-item-text">Sent Mail</span>
23-
</md-list-item>
24-
25-
<md-list-item>
26-
<md-icon>delete</md-icon>
27-
<span class="md-list-item-text">Trash</span>
28-
</md-list-item>
29-
30-
<md-list-item>
31-
<md-icon>error</md-icon>
32-
<span class="md-list-item-text">Spam</span>
33-
</md-list-item>
34-
</md-list>
35-
</md-drawer>
36-
37-
<main class="page-wrapper md-flex md-layout-column">
2+
<div class="page-container">
3+
<md-app>
384
<md-toolbar class="md-primary">
395
<md-button class="md-icon-button" @click="toggleMenu" v-if="!menuVisible">
406
<md-icon>menu</md-icon>
417
</md-button>
428
<span class="md-title">My Title</span>
439
</md-toolbar>
4410

45-
<div class="page-content md-flex">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</div>
46-
</main>
11+
<md-drawer :md-visible.sync="menuVisible" md-persistent>
12+
<md-toolbar class="md-transparent" md-elevation="0">
13+
<span>Navigation</span>
14+
15+
<div class="md-toolbar-section-end">
16+
<md-button class="md-icon-button md-dense" @click="toggleMenu">
17+
<md-icon>keyboard_arrow_left</md-icon>
18+
</md-button>
19+
</div>
20+
</md-toolbar>
21+
22+
<md-list>
23+
<md-list-item>
24+
<md-icon>move_to_inbox</md-icon>
25+
<span class="md-list-item-text">Inbox</span>
26+
</md-list-item>
27+
28+
<md-list-item>
29+
<md-icon>send</md-icon>
30+
<span class="md-list-item-text">Sent Mail</span>
31+
</md-list-item>
32+
33+
<md-list-item>
34+
<md-icon>delete</md-icon>
35+
<span class="md-list-item-text">Trash</span>
36+
</md-list-item>
37+
38+
<md-list-item>
39+
<md-icon>error</md-icon>
40+
<span class="md-list-item-text">Spam</span>
41+
</md-list-item>
42+
</md-list>
43+
</md-drawer>
44+
45+
<md-content>
46+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.
47+
</md-content>
48+
</md-app>
4749
</div>
4850
</template>
4951

5052
<style lang="scss" scoped>
51-
.page-container {
52-
overflow: hidden;
53+
.md-app {
54+
min-height: 300px;
5355
border: 1px solid rgba(#000, .12);
5456
}
5557
@@ -58,11 +60,6 @@
5860
width: 230px;
5961
max-width: calc(100vw - 125px);
6062
}
61-
62-
.page-content {
63-
padding: 16px;
64-
border-left: 1px solid rgba(#000, .12);
65-
}
6663
</style>
6764

6865
<script>

0 commit comments

Comments
 (0)