Pages UI
Search…
Email
Pages Email app is a web-based email client designed and developed exclusively for Pages framework. It has a responsive design to work flawlessly across many devices. Please note that current version only includes the Inbox and Compose views. This is a work in progress and we're hoping to make this a complete jQuery plugin soon

Dependencies

Include the stylesheets of the libraries
1
<link href="assets/plugins/jquery-menuclipper/jquery.menuclipper.css" rel="stylesheet" type="text/css" />
Copied!
Include the scripts
1
<script src="assets/plugins/quill/quill.min.js" type="text/javascript"></script>
2
<script src="assets/plugins/jquery-menuclipper/jquery.menuclipper.js"></script>
Copied!
Pages Email Lib
In pages.email.js please replace the URL “http://pages.revox.io/json/emails.json” (Line #54) with your own end point URL which can return a JSON having a structure mentioned below. Then include the updated file below pages.js.
1
<script src="pages/js/pages.email.js"></script>
Copied!
Use the following formate for emails
    emails - (Array) List of all emails categorized by date
      group - Date category
      list - list of emails received for the day
        id - unique ID to represent each email, should be an unique integer
        subject - Subject line of the email
        to - (Array) Recipients name list
        body - Email body. HTML is allowed
        time - Time email was sent
        datetime - Date and time combined
        from - Sender name
        dp - Display picture of the sender
        dpRetina - Retina version of the display picture of the sender

Sample JSON output

1
{
2
"emails": [
3
{
4
"group": "Today April 23",
5
"list": [{
6
"id": 1,
7
"subject": "Pages - Multi-Purpose Admin Template Revolution Begins here!",
8
"to": ["David Nester", "Jane Smith"],
9
"body": "<p>First email body</p> ",
10
"time": "5 Mins ago",
11
"datetime": "Today at 1:33pm",
12
"from": "David Nester",
13
"dp": "assets/img/profiles/avatar.jpg",
14
"dpRetina": "assets/img/profiles/avatar2x.jpg"
15
}, {
16
"id": 2,
17
"subject": "Your site has some very imaginative animation /movement! ",
18
"to": ["Anne Simons"],
19
"body": "<p>Second email body</p> ",
20
"time": "45 mins ago",
21
"datetime": "Today at 1:33pm",
22
"from": "Anne Simons",
23
"dp": "assets/img/profiles/5.jpg",
24
"dpRetina": "assets/img/profiles/5x.jpg"
25
}]
26
}, {
27
"group": "Yesterday April 22",
28
"list": [{
29
"id": 3,
30
"subject": "Good design is obvious. Great design is transparent",
31
"to": ["John Doe", "Anne Simons"],
32
"body": "<p>Third email body</p> ",
33
"time": "1:33pm",
34
"datetime": "Today at 1:33pm",
35
"from": "David Nester",
36
"dp": "assets/img/profiles/b.jpg",
37
"dpRetina": "assets/img/profiles/b2x.jpg"
38
}]
39
}
40
]
41
}
Copied!

Markup

Inlcude the following HTML source in your file

Inbox view

1
<!-- START EMAIL -->
2
<div class="email-wrapper">
3
<!-- START EMAIL SIDEBAR MENU-->
4
<nav class="email-sidebar padding-30">
5
<a href="email_compose.html" class="btn btn-complete btn-block btn-compose m-b-30">Compose</a>
6
<p class="menu-title">BROWSE</p>
7
<ul class="main-menu">
8
<li class="active">
9
<a href="#">
10
<span class="title"><i class="pg-inbox"></i> Inbox</span>
11
<span class="badge pull-right">5</span>
12
</a>
13
</li>
14
<li class="">
15
<a href="#">
16
<span class="title"><i class="pg-folder"></i> All mail</span>
17
</a>
18
<ul class="sub-menu no-padding">
19
<li>
20
<a href="#">
21
<span class="title">Important</span>
22
</a>
23
</li>
24
<li>
25
<a href="#">
26
<span class="title">Labeled</span>
27
</a>
28
</li>
29
</ul>
30
</li>
31
<li>
32
<a href="#">
33
<span class="title"><i class="pg-sent"></i> Sent</span>
34
</a>
35
</li>
36
<li>
37
<a href="#">
38
<span class="title"><i class="pg-spam"></i> Spam</span>
39
<span class="badge pull-right">10</span>
40
</a>
41
</li>
42
</ul>
43
<p class="menu-title m-t-20 all-caps">Quick view</p>
44
<ul class="sub-menu no-padding">
45
<li>
46
<a href="#">
47
<span class="title">Documents</span>
48
</a>
49
</li>
50
<li>
51
<a href="#">
52
<span class="title">Flagged</span>
53
<span class="badge pull-right">5</span>
54
</a>
55
</li>
56
<li>
57
<a href="#">
58
<span class="title">Images</span>
59
</a>
60
</li>
61
</ul>
62
</nav>
63
<!-- END EMAL SIDEBAR MENU -->
64
<!-- START EMAILS LIST -->
65
<div class="email-list b-r b-grey"> <a class="email-refresh" href="#"><i class="fa fa-refresh"></i></a>
66
<div id="emailList">
67
<!-- START EMAIL LIST SORTED BY DATE -->
68
<!-- END EMAIL LIST SORTED BY DATE -->
69
</div>
70
</div>
71
<!-- END EMAILS LIST -->
72
<!-- START OPENED EMAIL -->
73
<div class="email-opened">
74
<div class="no-email">
75
<h1>No email has been selected</h1>
76
</div>
77
<div class="email-content-wrapper">
78
<div class="actions-wrapper menuclipper bg-master-lightest">
79
<ul class="actions menuclipper-menu no-margin p-l-20 ">
80
<li class="visible-sm-inline-block visible-xs-inline-block">
81
<a href="#" class="email-list-toggle"><i class="fa fa-angle-left"></i> All Inboxes
82
</a>
83
</li>
84
<li class="no-padding "><a href="#" class="text-info">Reply</a>
85
</li>
86
<li class="no-padding "><a href="#">Reply all</a>
87
</li>
88
<li class="no-padding "><a href="#">Forward</a>
89
</li>
90
<li class="no-padding "><a href="#">Mark as read</a>
91
</li>
92
<li class="no-padding "><a href="#" class="text-danger">Delete</a>
93
</li>
94
</ul>
95
<div class="clearfix"></div>
96
</div>
97
<div class="email-content">
98
<div class="email-content-header">
99
<div class="thumbnail-wrapper d48 circular bordered">
100
<img width="40" height="40" alt="" data-src-retina="assets/img/profiles/avatar2x.jpg" data-src="assets/img/profiles/avatar.jpg" src="assets/img/profiles/avatar2x.jpg">
101
</div>
102
<div class="sender inline m-l-10">
103
<p class="name no-margin bold">
104
</p>
105
<p class="datetime no-margin"></p>
106
</div>
107
<div class="clearfix"></div>
108
<div class="subject m-t-20 m-b-20 semi-bold">
109
</div>
110
<div class="fromto">
111
<div class="pull-left">
112
<div class="btn-group dropdown-default">
113
<a class="btn dropdown-toggle btn-small btn-rounded" data-toggle="dropdown" href="#">
114
David Nester
115
<span class="caret"></span>
116
</a>
117
<ul class="dropdown-menu">
118
<li><a href="#">Action</a>
119
</li>
120
<li><a href="#">Friend</a>
121
</li>
122
<li><a href="#">Report</a>
123
</li>
124
</ul>
125
</div>
126
<label class="inline">
127
<span class="muted">&nbsp;&nbsp;to</span>
128
<span class=" small-text">[email protected]</span>
129
</label>
130
</div>
131
</div>
132
</div>
133
<div class="clearfix"></div>
134
<div class="email-content-body m-t-20">
135
</div>
136
<div class="wysiwyg5-wrapper b-a b-grey m-t-30">
137
<textarea class="email-reply" placeholder="Reply"></textarea>
138
</div>
139
</div>
140
</div>
141
</div>
142
<!-- END OPENED EMAIL -->
143
<!-- START COMPOSE BUTTON FOR TABS -->
144
<div class="compose-wrapper visible-xs">
145
<a class="compose-email text-info pull-right m-r-10 m-t-10" href="email_compose.html"><i class="fa fa-pencil-square-o"></i></a>
146
</div>
147
<!-- END COMPOSE BUTTON -->
148
</div>
149
<!-- END EMAIL -->
Copied!

Compose view

Replace <div class="email-opened">...</div> with the following for the compose view
1
<!-- START COMPOSE EMAIL -->
2
<div class="email-composer container-fluid">
3
<div class="row">
4
<div class="col-sm-12 no-padding">
5
<div class="wysiwyg5-wrapper email-toolbar-wrapper">
6
</div>
7
<form id="form-project" role="form" autocomplete="off">
8
<div class="form-group-attached">
9
<div class="row clearfix">
10
<div class="col-sm-6">
11
<div class="form-group form-group-default">
12
<label>TO:</label>
13
<input name="to" data-role="tagsinput" class="form-control tagsinput" type="text" value="John Smith" />
14
</div>
15
</div>
16
<div class="col-sm-6">
17
<div class="form-group form-group-default">
18
<label>CC:</label>
19
<input type="text" class="form-control" name="cc" placeholder="Add Carbon Copy">
20
</div>
21
</div>
22
</div>
23
<div class="form-group form-group-default">
24
<label>Subject</label>
25
<input type="text" class="form-control" name="subject">
26
</div>
27
</div>
28
</form>
29
<div class="wysiwyg5-wrapper email-body-wrapper">
30
<textarea class="wysiwyg email-body" style="height:350px"></textarea>
31
</div>
32
</div>
33
</div>
34
<div class="row p-b-20">
35
<div class="col-sm-11">
36
<button class="btn btn-white btn-cons">Cancel</button>
37
<button class="btn btn-complete btn-cons m-l-10">Send</button>
38
<div class="checkbox inline m-l-20">
39
<input type="checkbox" value="1" id="sendCC">
40
<label for="sendCC" class="hint-text hidden-xs">Send a <span class="text-complete">Carbon Copy</span> CC to my Primary email address.</label>
41
<label for="sendCC" class="hint-text visible-xs-inline">Send me a CC</label>
42
</div>
43
</div>
44
<div class="col-sm-1">
45
<button class="btn btn-complete pull-right">
46
<i class="pg-save"></i>
47
</button>
48
</div>
49
</div>
50
</div>
51
<!-- END COMPOSE EMAIL -->
Copied!
Last modified 1yr ago