Skip to content

Commit 2b1c0e7

Browse files
SebastianMetzgerSebastianMetzger
committed
initial commit
0 parents  commit 2b1c0e7

File tree

3 files changed

+211
-0
lines changed

3 files changed

+211
-0
lines changed

‎.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.idea/
2+
node_modules/
3+
bower_components/
4+
angular-material.iml

‎bower.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "inbox-style-angular-material",
3+
"version": "0.0.0",
4+
"license": "MIT",
5+
"ignore": [
6+
"**/.*",
7+
"node_modules",
8+
"bower_components",
9+
"test",
10+
"tests"
11+
],
12+
"devDependencies": {
13+
"angular-material": "~0.5.1"
14+
}
15+
}

‎index.html

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
5+
<link rel="stylesheet" href="/bower_components/angular-material/angular-material.css">
6+
<link rel="stylesheet" href="/bower_components/angular-material/themes/yellow-theme.css">
7+
<style>
8+
html {
9+
height: 100%;
10+
}
11+
12+
body {
13+
background-color: #ececec;
14+
}
15+
16+
footer {
17+
padding: 16px;
18+
}
19+
20+
.animate-if {
21+
background:white;
22+
border:1px solid black;
23+
padding:10px;
24+
}
25+
26+
.animate-if.ng-enter, .animate-if.ng-leave {
27+
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
28+
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
29+
}
30+
31+
.animate-if.ng-enter,
32+
.animate-if.ng-leave.ng-leave-active {
33+
opacity:0;
34+
}
35+
36+
.animate-if.ng-leave,
37+
.animate-if.ng-enter.ng-enter-active {
38+
opacity:1;
39+
}
40+
</style>
41+
</head>
42+
<body layout="vertical" md-theme="yellow" layout-fill ng-app="YourApp" ng-controller="YourController">
43+
<header>
44+
<md-toolbar scroll-shrink>
45+
<div class="md-toolbar-tools">
46+
<h3>
47+
<span>SumBees</span>
48+
</h3>
49+
</div>
50+
</md-toolbar>
51+
</header>
52+
<div layout="vertical" flex>
53+
<md-content>
54+
<md-list>
55+
<div ng-repeat="chunk in ::chunks">
56+
<md-card ng-if="!chunk.expanded" ng-click="chunk.expanded = !chunk.expanded" layout="horizontal">
57+
<md-item>
58+
<h2>{{ chunk.title }}</h2>
59+
<p>{{ chunk.description }}</p>
60+
</md-item>
61+
</md-card>
62+
<md-card ng-if="chunk.expanded" ng-click="chunk.expanded = !chunk.expanded">
63+
<div layout="horizontal">
64+
<img src="http://placekitten.com/g/64/128"/>
65+
<div>
66+
<h2>Some Post</h2>
67+
<p>Some Description</p>
68+
<p>Some more stuff</p>
69+
<p>And even way more stuff!!</p>
70+
</div>
71+
</div>
72+
</md-card>
73+
</div>
74+
</md-list>
75+
</md-content>
76+
</div>
77+
<footer layout="horizontal">
78+
<div flex></div>
79+
<md-button class="md-fab md-raised md-warn" ng-click="openDialog($event);" aria-label="New document">
80+
<md-icon icon="/img/icons/ic_insert_drive_file_24px.svg" style="width: 24px; height: 24px;"></md-icon>
81+
</md-button>
82+
</footer>
83+
84+
<script src="/bower_components/angular/angular.js"></script>
85+
<script src="/bower_components/angular-aria/angular-aria.js"></script>
86+
<script src="/bower_components/angular-animate/angular-animate.js"></script>
87+
<script src="/bower_components/hammerjs/hammer.js"></script>
88+
<script src="/bower_components/angular-material/angular-material.js"></script>
89+
<script>
90+
// Include app dependency on ngMaterial
91+
var app = angular.module( 'YourApp', [ 'ngMaterial' ] );
92+
app.controller("YourController", ['$scope', '$mdDialog', function($scope, $mdDialog) {
93+
94+
$scope.openDialog = function($event) {
95+
$mdDialog.show({
96+
targetEvent: $event,
97+
template:
98+
'<md-dialog>' +
99+
' <md-content>Hello {{ userName }}!</md-content>' +
100+
' <div class="md-actions">' +
101+
' <md-button ng-click="closeDialog()">' +
102+
' Close' +
103+
' </md-button>' +
104+
' </div>' +
105+
'</md-dialog>',
106+
controller: 'DialogController',
107+
onComplete: afterShowAnimation,
108+
locals: { name: 'Bobby' }
109+
});
110+
// When the 'enter' animation finishes...
111+
function afterShowAnimation(scope, element, options) {
112+
// post-show code here: DOM element focus, etc.
113+
}
114+
};
115+
116+
$scope.chunks = [
117+
{
118+
title: "Something",
119+
description: "Lorem Ipsum Dolor Set Shalalala",
120+
expanded: false,
121+
content: {
122+
type: "QUOTE",
123+
quote: "And he saw that it was good"
124+
}
125+
},
126+
{
127+
title: "Another Something",
128+
description: "Lorem Ipsum Dolor Set Shalalala",
129+
expanded: true,
130+
content: {
131+
type: "QUOTE",
132+
quote: "And he saw that it was good"
133+
}
134+
},
135+
{
136+
title: "And even another Something",
137+
description: "Lorem Ipsum Dolor Set Shalalala",
138+
expanded: false,
139+
content: {
140+
type: "QUOTE",
141+
quote: "And he saw that it was good"
142+
}
143+
},
144+
{
145+
title: "And even another Something",
146+
description: "Lorem Ipsum Dolor Set Shalalala",
147+
expanded: false,
148+
content: {
149+
type: "QUOTE",
150+
quote: "And he saw that it was good"
151+
}
152+
},
153+
{
154+
title: "And even another Something",
155+
description: "Lorem Ipsum Dolor Set Shalalala",
156+
expanded: false,
157+
content: {
158+
type: "QUOTE",
159+
quote: "And he saw that it was good"
160+
}
161+
},
162+
{
163+
title: "And even another Something",
164+
description: "Lorem Ipsum Dolor Set Shalalala",
165+
expanded: false,
166+
content: {
167+
type: "QUOTE",
168+
quote: "And he saw that it was good"
169+
}
170+
},
171+
{
172+
title: "And even another Something",
173+
description: "Lorem Ipsum Dolor Set Shalalala",
174+
expanded: false,
175+
content: {
176+
type: "QUOTE",
177+
quote: "And he saw that it was good"
178+
}
179+
}
180+
];
181+
}]);
182+
183+
app.controller('DialogController', function($scope, $mdDialog, name) {
184+
$scope.userName = name;
185+
$scope.closeDialog = function() {
186+
$mdDialog.hide();
187+
};
188+
});
189+
</script>
190+
191+
</body>
192+
</html>

0 commit comments

Comments
 (0)