forked from SebastianMetzger/angular-material-inbox
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
126 lines (123 loc) · 6.51 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="/bower_components/angular-material/angular-material.css">
<link rel="stylesheet" href="/bower_components/angular-material/themes/blue-theme.css">
<link rel="stylesheet" href="/style.css">
</head>
<body layout="vertical" md-theme="blue" layout-fill ng-app="YourApp" ng-controller="YourController">
<header>
<md-toolbar scroll-shrink layout="row">
<div class="md-toolbar-tools">
<md-button ng-click="toggleMenu()">Menu</md-button>
<h3>
<span>Angular Inbox</span>
</h3>
</div>
</md-toolbar>
</header>
<div layout="vertical" flex>
<!-- LEFT SIDEBAR -->
<md-sidenav class="md-sidenav-left" component-id="left">
<md-toolbar class="md-theme-indigo">
<h1 class="md-toolbar-tools">Sidenav Left</h1>
</md-toolbar>
<md-content ng-controller="LeftCtrl" class="md-padding" flex layout="vertical">
<md-button ng-click="close()" class="md-primary">
<md-icon icon="/img/icons/ic_people_24px.svg" style="width: 24px; height: 24px;"></md-icon>Inbox
</md-button>
<md-button ng-click="close()" class="md-primary">
<md-icon icon="/img/icons/ic_people_24px.svg" style="width: 24px; height: 24px;"></md-icon>Snoozed
</md-button>
<md-button ng-click="close()" class="md-primary">
<md-icon icon="/img/icons/ic_people_24px.svg" style="width: 24px; height: 24px;"></md-icon>Done
</md-button>
<md-divider></md-divider>
</md-content>
</md-sidenav>
<!-- MAIN CONTENT -->
<md-content id="main" layout="horizontal" layout-align="center">
<md-list id="content">
<div ng-repeat="chunk in ::chunks">
<p ng-if="chunk.divider">{{chunk.title}}</p>
<md-card ng-if="!chunk.expanded && !chunk.divider" ng-click="chunk.expanded = !chunk.expanded" ng-mouseover="hover = true" ng-mouseout="hover = false">
<md-item layout="horizontal">
<div>
<img class="round-face" src="http://placekitten.com/g/48/48"/>
</div>
<div class="collapsed-row" layout="horizontal" flex>
<div layout="vertical" layout-align="center" flex="45">
<span><b>{{ chunk.title }}</b></span>
</div>
<div layout="vertical" layout-align="center" flex="45">
<span>{{ chunk.description }}</span>
</div>
<div layout="vertical" layout-align="center" flex="10" ng-if="hover">
<span>Hover Elements</span>
</div>
</div>
</md-item>
</md-card>
<md-card ng-if="chunk.expanded && !chunk.divider" ng-click="chunk.expanded = !chunk.expanded">
<div layout="horizontal">
<div>
<img class="round-face" src="http://placekitten.com/g/48/48"/>
</div>
<div flex>
<img src="http://placekitten.com/g/800/400" />
<h2>{{ chunk.title }}</h2>
<p>{{ chunk.description }}</p>
<div ng-if="chunk.content && chunk.content.type === 'QUOTE'">
<md-button ng-click="show_quotes = !show_quotes; $event.stopPropagation();">Show {{chunk.content.quotes.length}} quotes</md-button>
<div ng-if="show_quotes" ng-repeat="quote in ::chunk.content.quotes">
<md-whiteframe class="md-whiteframe-z1"><blockquote>{{ quote }}</blockquote></md-whiteframe>
</div>
</div>
</div>
</div>
</md-card>
</div>
</md-list>
</md-content>
</div>
<!-- FAB POPUP -->
<div id="fab-popup" layout="vertical" layout-align="space-between" ng-if="showAddButtons" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}">
<md-button class="md-fab md-raised" ng-click="openDialog($event);" aria-label="New document">
<md-icon icon="bower_components/material-design-icons/content/svg/production/ic_add_24px.svg" style="width: 24px; height: 24px;"></md-icon>
<!--<md-tooltip>-->
<!--Add Quote-->
<!--</md-tooltip>-->
</md-button>
<md-button class="md-fab md-raised" ng-click="openDialog($event);" aria-label="New document">
<md-icon icon="bower_components/material-design-icons/content/svg/production/ic_add_24px.svg" style="width: 24px; height: 24px;"></md-icon>
<!--<md-tooltip>-->
<!--Add Text-->
<!--</md-tooltip>-->
</md-button>
<md-button class="md-fab md-raised" ng-click="openDialog($event);" aria-label="New document">
<md-icon icon="bower_components/material-design-icons/content/svg/production/ic_add_24px.svg" style="width: 24px; height: 24px;"></md-icon>
<!--<md-tooltip>-->
<!--Add Image-->
<!--</md-tooltip>-->
</md-button>
<md-button class="md-fab md-raised" ng-click="openDialog($event);" aria-label="New document">
<md-icon icon="bower_components/material-design-icons/content/svg/production/ic_add_24px.svg" style="width: 24px; height: 24px;"></md-icon>
<!--<md-tooltip>-->
<!--Add Video-->
<!--</md-tooltip>-->
</md-button>
</div>
<!-- HOVERING FAB -->
<md-button id="mainFab" class="md-fab md-raised" ng-click="showAddButtons = !showAddButtons;" aria-label="New document">
<md-icon icon="bower_components/material-design-icons/content/svg/production/ic_add_24px.svg" style="width: 24px; height: 24px;"></md-icon>
</md-button>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-aria/angular-aria.js"></script>
<script src="/bower_components/angular-animate/angular-animate.js"></script>
<script src="/bower_components/hammerjs/hammer.js"></script>
<script src="/bower_components/angular-material/angular-material.js"></script>
<script src="/controllers/controllers.js"></script>
</body>
</html>