jinql
/
blur-admin
mirror of https://github.com/akveo/blur-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

email new responsive design

pull/3/head
alex 2015-12-24 17:01:41 +03:00
parent 418d4ec106
commit 077c2765c0
6 changed files with 506 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/app/pages/mail/MailCtrl.js
View File

@ -10,14 +10,17 @@
/** @ngInject */ /** @ngInject */
function MailCtrl($scope, $location, $sce) { function MailCtrl($scope, $location, $sce) {
$scope.showMail = false;
$scope.messages = [ $scope.messages = [
{ {
"id": "4563faass", "id": "4563faass",
"name": "Nasta Tyshkavets", "name": "Nasta Linnie",
"subject": "Great text", "subject": "Great text",
"date": "2015-08-28T07:57:09", "date": "2015-08-28T07:57:09",
"important": true, "important": true,
"body": $sce.trustAsHtml("<p>Hey John,</p><p>Check out this cool text.</p>"), "body": $sce.trustAsHtml("<p>Hey John, </p><p>Check out this cool text.</p>"),
"pic": "img/Nasta.png", "pic": "img/Nasta.png",
"email": "petraramsey@mail.com", "email": "petraramsey@mail.com",
"attachment": "poem.txt", "attachment": "poem.txt",
@ -28,26 +31,26 @@
}, },
{ {
"id": "4563fdfvd", "id": "4563fdfvd",
"name": "Nasta Tyshkavets", "name": "Nasta Linnie",
"subject": "Lores ipsum", "subject": "Lores ipsum",
"date": "2015-11-19T03:30:45", "date": "2015-11-19T03:30:45",
"important": false, "important": false,
"body": $sce.trustAsHtml("<p>Hey John,</p><br><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ex mauris, ultrices vel lectus quis, scelerisque hendrerit ipsum. Suspendisse ullamcorper turpis neque, eget dapibus magna placerat ac. Suspendisse rhoncus ligula ac mi tempus varius ut sed lacus. Sed et commodo nulla, et placerat leo. Nam rhoncus vulputate sem non pharetra. Praesent fringilla massa in laoreet convallis. Aliquam lobortis dui a congue facilisis. Aenean dapibus semper semper. Quisque aliquam, nibh dapibus interdum condimentum, ex velit tempor tortor, at vestibulum magna leo quis leo. Morbi pulvinar varius erat ac rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst.</p>" + "body": $sce.trustAsHtml("<p>Hey John, </p><br><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ex mauris, ultrices vel lectus quis, scelerisque hendrerit ipsum. Suspendisse ullamcorper turpis neque, eget dapibus magna placerat ac. Suspendisse rhoncus ligula ac mi tempus varius ut sed lacus. Sed et commodo nulla, et placerat leo. Nam rhoncus vulputate sem non pharetra. Praesent fringilla massa in laoreet convallis. Aliquam lobortis dui a congue facilisis. Aenean dapibus semper semper. Quisque aliquam, nibh dapibus interdum condimentum, ex velit tempor tortor, at vestibulum magna leo quis leo. Morbi pulvinar varius erat ac rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst.</p>" +
"<br><p>Cras rhoncus quam ipsum, vel dignissim nisl egestas sed. Aliquam erat volutpat. Integer eu nisl elit. Donec malesuada diam vitae tellus luctus tincidunt. Donec tempus blandit neque, rutrum egestas ipsum sagittis tempor. Curabitur volutpat ligula enim, nec vehicula purus molestie at. Sed a facilisis enim, nec molestie magna. Donec in augue non est viverra dapibus vel tempus risus. Nam porttitor purus sit amet hendrerit ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>"), "<br><p>Cras rhoncus quam ipsum, vel dignissim nisl egestas sed. Aliquam erat volutpat. Integer eu nisl elit. Donec malesuada diam vitae tellus luctus tincidunt. Donec tempus blandit neque, rutrum egestas ipsum sagittis tempor. Curabitur volutpat ligula enim, nec vehicula purus molestie at. Sed a facilisis enim, nec molestie magna. Donec in augue non est viverra dapibus vel tempus risus. Nam porttitor purus sit amet hendrerit ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>"),
"pic": "img/Nasta.png", "pic": "img/Nasta.png",
"email": "petraramsey@mail.com", "email": "petraramsey@mail.com",
"position": "Great Employee", "position": "Great Employee",
"tag": "work", "tag": "study",
"draft": false, "draft": false,
"trash": false "trash": false
}, },
{ {
"id": "4563zxcss", "id": "4563zxcss",
"name": "Nasta Tyshkavets", "name": "Nasta Linnie",
"subject": "Lores ipsum", "subject": "Lores ipsum",
"date": "2015-10-19T03:30:45", "date": "2015-10-19T03:30:45",
"important": false, "important": false,
"body": $sce.trustAsHtml("<p>Hey John,</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>"), "body": $sce.trustAsHtml("<p>Hey John, </p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>"),
"pic": "img/Nasta.png", "pic": "img/Nasta.png",
"email": "petraramsey@mail.com", "email": "petraramsey@mail.com",
"position": "Great Employee", "position": "Great Employee",
@ -77,7 +80,21 @@
"subject": "Gift card", "subject": "Gift card",
"date": "2015-07-18T10:19:01", "date": "2015-07-18T10:19:01",
"important": false, "important": false,
"body": $sce.trustAsHtml("<p>Hey John,</p><br><p>Consectetur adipiscing elit, Lorem ipsum dolor sit amet</p>"), "body": $sce.trustAsHtml("<p>Hey John, </p><br><p>Consectetur adipiscing elit, Lorem ipsum dolor sit amet</p>"),
"pic": "img/Nick.png",
"email": "barlowshort@mail.com",
"position": "Graphical designer",
"draft": false,
"trash": false,
"tag": "study"
},
{
"id": "8955asewf",
"name": "Nick Cat",
"subject": "Some news",
"date": "2015-09-23T03:04:10",
"important": true,
"body": $sce.trustAsHtml("<p>Hey John, </p><br><p>Integer eu nisl elit. Donec malesuada diam vitae tellus luctus tincidunt. Donec tempus blandit neque, rutrum egestas ipsum sagittis tempor. Curabitur volutpat ligula enim, nec vehicula purus molestie at. Sed a facilisis enim, nec molestie magna. Donec in augue non est viverra dapibus vel tempus risus. Nam porttitor purus sit amet hendrerit ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>"),
"pic": "img/Nick.png", "pic": "img/Nick.png",
"email": "barlowshort@mail.com", "email": "barlowshort@mail.com",
"position": "Graphical designer", "position": "Graphical designer",
@ -86,16 +103,16 @@
"tag": "work" "tag": "work"
}, },
{ {
"id": "8955asewf", "id": "8955asdff",
"name": "Nick Cat", "name": "Nick Cat",
"subject": "Some news", "subject": "Some news ",
"date": "2015-09-23T03:04:10", "date": "2015-09-23T03:04:10",
"important": true, "important": false,
"body": $sce.trustAsHtml("<p>Hey John,</p><br><p>Integer eu nisl elit. Donec malesuada diam vitae tellus luctus tincidunt. Donec tempus blandit neque, rutrum egestas ipsum sagittis tempor. Curabitur volutpat ligula enim, nec vehicula purus molestie at. Sed a facilisis enim, nec molestie magna. Donec in augue non est viverra dapibus vel tempus risus. Nam porttitor purus sit amet hendrerit ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>"), "body": $sce.trustAsHtml("<p>Hey John, </p><br><p>Integer eu nisl elit. Donec malesuada diam vitae tellus luctus tincidunt. Donec tempus blandit neque, rutrum egestas ipsum sagittis tempor. Curabitur volutpat ligula enim, nec vehicula purus molestie at. Sed a facilisis enim, nec molestie magna. Donec in augue non est viverra dapibus vel tempus risus. Nam porttitor purus sit amet hendrerit ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>"),
"pic": "img/Nick.png", "pic": "img/Nick.png",
"email": "barlowshort@mail.com", "email": "barlowshort@mail.com",
"position": "Graphical designer", "position": "Graphical designer",
"draft": false, "draft": true,
"trash": false, "trash": false,
"tag": "work" "tag": "work"
}, },
@ -105,7 +122,7 @@
"subject": "Street Art", "subject": "Street Art",
"date": "2015-11-22T10:05:09", "date": "2015-11-22T10:05:09",
"important": false, "important": false,
"body": $sce.trustAsHtml("<p>Hey John,</p><p>Aliquam eu facilisis eros, quis varius est.</p>" + "body": $sce.trustAsHtml("<p>Hey John, </p><p>Aliquam eu facilisis eros, quis varius est.</p>" +
"<p>Consectetur adipiscing elit. Aliquam sodales sem in nibh pellentesque, ac dignissim mi dapibus.</p>" + "<p>Consectetur adipiscing elit. Aliquam sodales sem in nibh pellentesque, ac dignissim mi dapibus.</p>" +
"<p>Lorem ipsum dolor sit amet! Nullam imperdiet justo a ipsum laoreet euismod.</p>" + "<p>Lorem ipsum dolor sit amet! Nullam imperdiet justo a ipsum laoreet euismod.</p>" +
"<br><p>Cras tincidunt fermentum lectus, quis scelerisque lorem volutpat sed." + "<br><p>Cras tincidunt fermentum lectus, quis scelerisque lorem volutpat sed." +
@ -116,7 +133,7 @@
"draft": false, "draft": false,
"attachment": "file.doc", "attachment": "file.doc",
"trash": false, "trash": false,
"tag" : "work" "tag" : "family"
}, },
{ {
"id": "2334aefvv", "id": "2334aefvv",
@ -124,7 +141,7 @@
"subject": "New product", "subject": "New product",
"date": "2015-06-22T06:26:10", "date": "2015-06-22T06:26:10",
"important": true, "important": true,
"body": $sce.trustAsHtml("<p>Hello John,</p><p>Lorem ipsum dolor sit amet!</p>" + "body": $sce.trustAsHtml("<p>Hello John, </p><p>Lorem ipsum dolor sit amet!</p>" +
"<p>Consectetur adipiscing elit. Aliquam sodales sem in nibh pellentesque, ac dignissim mi dapibus.</p>" + "<p>Consectetur adipiscing elit. Aliquam sodales sem in nibh pellentesque, ac dignissim mi dapibus.</p>" +
"<p>Aliquam eu facilisis eros, quis varius est. Nullam imperdiet justo a ipsum laoreet euismod.</p>" + "<p>Aliquam eu facilisis eros, quis varius est. Nullam imperdiet justo a ipsum laoreet euismod.</p>" +
"<br><p>Nulla facilisi. Nulla congue, arcu eget blandit lacinia, leo ante ullamcorper lectus, vel pulvinar justo ipsum vitae justo." + "<br><p>Nulla facilisi. Nulla congue, arcu eget blandit lacinia, leo ante ullamcorper lectus, vel pulvinar justo ipsum vitae justo." +
@ -134,7 +151,7 @@
"position": "Technical Chef", "position": "Technical Chef",
"draft": false, "draft": false,
"trash": false, "trash": false,
"tag" : "work" "tag" : "family"
}, },
{ {
"id": "8223xzxfn", "id": "8223xzxfn",
@ -142,7 +159,7 @@
"subject": "Skype moji", "subject": "Skype moji",
"date": "2015-07-16T06:47:53", "date": "2015-07-16T06:47:53",
"important": false, "important": false,
"body": $sce.trustAsHtml("<p>Hello John,</p><p>Aliquam sodales sem in nibh pellentesque</p>" + "body": $sce.trustAsHtml("<p>Hello John, </p><p>Aliquam sodales sem in nibh pellentesque</p>" +
"<p>Lorem ipsum dolor I find moji in skype sit amet!.</p>"), "<p>Lorem ipsum dolor I find moji in skype sit amet!.</p>"),
"pic": "img/Andrey.png", "pic": "img/Andrey.png",
"email": "lakeishaphillips@mail.com", "email": "lakeishaphillips@mail.com",
@ -157,7 +174,7 @@
"subject": "My App", "subject": "My App",
"date": "2015-06-20T07:05:02", "date": "2015-06-20T07:05:02",
"important": false, "important": false,
"body": $sce.trustAsHtml("<p>Hey Vlad.</p><p>Lorem ipsum dolor sit amet!</p>" + "body": $sce.trustAsHtml("<p>Hey Vlad. </p><p>Lorem ipsum dolor sit amet!</p>" +
"<p>Consectetur My Falasson App elit. Aliquam sodales sem in nibh pellentesque, ac dignissim mi dapibus.</p>"), "<p>Consectetur My Falasson App elit. Aliquam sodales sem in nibh pellentesque, ac dignissim mi dapibus.</p>"),
"pic": "img/Andrey.png", "pic": "img/Andrey.png",
"email": "lakeishaphillips@mail.com", "email": "lakeishaphillips@mail.com",
@ -173,7 +190,7 @@
"subject": "Cool", "subject": "Cool",
"date": "2015-03-31T11:52:58", "date": "2015-03-31T11:52:58",
"important": false, "important": false,
"body": $sce.trustAsHtml("<p>Hey Vlad.</p><p>Aliquam sodales sem in nibh pellentesque</p>" + "body": $sce.trustAsHtml("<p>Hey Vlad. </p><p>Aliquam sodales sem in nibh pellentesque</p>" +
"<p>Cras tincidunt fermentum lectus, quis scelerisque lorem volutpat sed.</p>"), "<p>Cras tincidunt fermentum lectus, quis scelerisque lorem volutpat sed.</p>"),
"pic": "img/Vlad.png", "pic": "img/Vlad.png",
"email": "carlsongoodman@mail.com", "email": "carlsongoodman@mail.com",
@ -187,10 +204,10 @@
{ {
"id": "9391xdsff", "id": "9391xdsff",
"name": "Vlad Lugovsky", "name": "Vlad Lugovsky",
"subject": "Whan next", "subject": "What next",
"date": "2015-03-31T11:52:58", "date": "2015-03-31T11:52:58",
"important": false, "important": false,
"body": $sce.trustAsHtml("<p>Hey Vlad.</p><p>Lorem ipsum dolor sit amet!</p>" + "body": $sce.trustAsHtml("<p>Hey Vlad. </p><p>Lorem ipsum dolor sit amet!</p>" +
"<p>Esse esse labore tempor ullamco ullamco. Id veniam laborum c.</p>"), "<p>Esse esse labore tempor ullamco ullamco. Id veniam laborum c.</p>"),
"pic": "img/Vlad.png", "pic": "img/Vlad.png",
"email": "carlsongoodman@mail.com", "email": "carlsongoodman@mail.com",
@ -210,6 +227,7 @@
{ {
label: 'inbox', label: 'inbox',
name: 'Inbox', name: 'Inbox',
"newMails" : 7,
filter: function (messages) { filter: function (messages) {
return messages.filter(function (m) { return messages.filter(function (m) {
return !m.trash && !m.draft && !m.spam && !m.my return !m.trash && !m.draft && !m.spam && !m.my
@ -237,6 +255,7 @@
{ {
label: 'draft', label: 'draft',
name: 'Draft', name: 'Draft',
"newMails" : 2,
filter: function (messages) { filter: function (messages) {
return messages.filter(function (m) { return messages.filter(function (m) {
return m.draft && !m.trash return m.draft && !m.trash
@ -266,12 +285,14 @@
$scope.tab = tab; $scope.tab = tab;
$scope.currentMessages = $scope.tabs[tab].filter($scope.messages); $scope.currentMessages = $scope.tabs[tab].filter($scope.messages);
$scope.mail = $scope.currentMessages[0]; $scope.mail = $scope.currentMessages[0];
$scope.showMail = false;
//var mailId = $scope.mail ? $scope.mail.id : ''; //var mailId = $scope.mail ? $scope.mail.id : '';
//$location.path("/mail/"+$scope.tabs[tab].label+"/"+ mailId); //$location.path("/mail/"+$scope.tabs[tab].label+"/"+ mailId);
}; };
$scope.selectMail = function (mail) { $scope.selectMail = function (mail) {
$scope.mail = mail; $scope.mail = mail;
$scope.showMail = true;
//$location.path("/mail/"+$scope.tabs[$scope.tab].label+"/"+ mail.id); //$location.path("/mail/"+$scope.tabs[$scope.tab].label+"/"+ mail.id);
}; };

158
src/app/pages/mail/blurEmail.html
View File

@ -1,53 +1,45 @@
<div class="mail-container"> <div class="mail-container">
<div class="row"> <div class="row letter-layout">
<div class="mail-navigation-container"> <div class="mail-navigation-container">
<div ng-repeat="t in tabs" class="mail-navigation {{tab == $index ? 'active' : ''}}" ng-click="selectTab($index)"> <div class="compose-button">
{{t.name}}
</div>
</div>
</div>
<div class="control-container row clearfix">
<div class="col-lg-4 col-sm-4 col-xs-4">
<button type="button" class="btn compose-button"> <button type="button" class="btn compose-button">
Compose Compose
</button> </button>
</div> </div>
<div class="col-lg-8 col-sm-8 col-xs-8 icon-buttons"> <div ng-repeat="t in tabs" class="mail-navigation {{tab == $index ? 'active' : ''}}" ng-click="selectTab($index)">
<button type="button" class="btn btn-icon"><i class="ion-android-download"></i></button> {{t.name}}<span class="new-mails" ng-show="t.newMails">{{t.newMails}}</span>
<button type="button" class="btn btn-icon" ng-click="mail.important = !mail.important">
<i title="Important" class="ion-ios-star{{mail.important ? '' : '-outline'}}"></i>
</button>
<button type="button" class="btn btn-icon" ng-click="mail.trash = !mail.trash">
<i title="Trash" class="ion-ios-trash{{mail.trash ? '' : '-outline'}}"></i>
</button>
<div class="btn-group">
<button type="button" class="btn btn-icon dropdown-toggle margin-left" data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<i title="Folder" class="ion-android-folder-open"> </i><span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href>Action</a></li>
<li><a href>Another action</a></li>
<li><a href>Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href>Separated link</a></li>
</ul>
</div> </div>
<div class="btn-group"> <div class="labels">
<button type="button" class="btn btn-icon dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" <div class="labels-title">
aria-expanded="false"> <h5 class="label-header">
<i title="Folder" class="ion-link"> </i><span class="caret"></span> Labels
</button> </h5>
<ul class="dropdown-menu">
<li><a href>Action</a></li>
<li><a href>Another action</a></li>
<li><a href>Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href>Separated link</a></li>
</ul>
</div> </div>
<div class="btn-group"> <div class="label-item">
<span class="tag label work">Work</span>
</div>
<div class="label-item">
<span class="tag label family">Family</span>
</div>
<div class="label-item">
<span class="tag label friend">Friend</span>
</div>
<div class="label-item">
<span class="tag label study">Study</span>
</div>
</div>
<div class="add-label-container">
<i class="ion-plus-round"></i><span class="label-input-stub">Add new label</span>
</div>
</div>
<div ng-show="!showMail" class="side-message-navigation">
<div class="messages-control side-message-navigation-item">
<label class="checkbox-inline custom-checkbox nowrap margin-left">
<span class="select-all-label">Select All</span>
<input type="checkbox">
</label>
<button type="button" class="btn btn-icon margin-left"><i class="ion-refresh"></i></button>
<div class="btn-group margin-left">
<button type="button" class="btn btn-icon dropdown-toggle more-button" data-toggle="dropdown" <button type="button" class="btn btn-icon dropdown-toggle more-button" data-toggle="dropdown"
aria-haspopup="true" aria-haspopup="true"
aria-expanded="false">More<span class="caret"></span> aria-expanded="false">More<span class="caret"></span>
@ -61,35 +53,64 @@
</ul> </ul>
</div> </div>
</div> </div>
</div>
<div class="row inbox-layout">
<div class="side-message-navigation">
<div class="messages"> <div class="messages">
<table> <table>
<tr ng-repeat="m in currentMessages | orderBy:'-date'" class="little-human {{m == mail ? 'active' : ''}}" <tr ng-repeat="m in currentMessages | orderBy:'-date'"
class="side-message-navigation-item little-human {{m == mail ? 'active' : ''}} {{m.tag}}"
ng-click="selectMail(m)"> ng-click="selectMail(m)">
<td>
<div class="mail-checkbox">
<label class="checkbox-inline custom-checkbox nowrap margin-left">
<span></span>
<input type="checkbox">
</label>
</div>
</td>
<td><img ng-src="{{m.name.split(' ')[0] | profilePicture}}" class="little-human-picture"></td> <td><img ng-src="{{m.name.split(' ')[0] | profilePicture}}" class="little-human-picture"></td>
<td><span class="name">{{m.name.split(' ')[0] + ' ' + m.name.split(' ')[1][0]}}.</span></td> <td >
<td class="additional-info"><span class="tag label label-primary {{m.tag}}">{{m.tag}}</span></td> <div class="margin-left">
<td class="additional-info"><span class="subject">{{m.subject}}</span></td> <div><span class="name">{{m.name.split(' ')[0] + ' ' + m.name.split(' ')[1][0]}}.</span></div>
<td class="date additional-info"><span>{{m.date | date : 'MMM d HH:mm'}}</span></td> <div><span class="tag label label-primary {{m.tag}}">{{m.tag}}</span></div>
</div>
</td>
<td >
<div class="margin-left additional-info">
<span class="subject"> {{m.subject}}</span>
</div>
</td>
<td>
<div class="mail-body-part">{{m.body | plainText}}</div>
</td>
<td class="date">
<span>{{m.date | date : 'MMM d HH:mm'}}</span>
</td>
</tr> </tr>
</table> </table>
</div> </div>
</div> </div>
<div class="message-container with-scroll">
<div ng-show="showMail" class="message-container with-scroll">
<div class="message" ng-show="mail"> <div class="message" ng-show="mail">
<div class="row">
<button ng-click="showMail=false" type="button" class="back-button btn btn-default btn-with-icon"><i
class="ion-chevron-left"></i>Back
</button>
</div>
<div class="person-info row"> <div class="person-info row">
<div class="col-lg-4 col-sm-4 col-xs-12 no-padding"> <div class="col-lg-4 col-md-12 no-padding">
<img ng-src="{{mail.name.split(' ')[0] | profilePicture}}" class="human-picture"> <img ng-src="{{mail.name.split(' ')[0] | profilePicture}}" class="human-picture">
<div class="name"> <div class="name">
<h2>{{mail.name.split(' ')[0]}}</h2> <h2 class="name-h">{{mail.name.split(' ')[0]}}</h2>
<h2>{{mail.name.split(' ')[1]}}</h2> <h2 class="name-h second-name">{{mail.name.split(' ')[1]}}</h2>
<div>
<span class="mail-tag tag label {{mail.tag}}">{{mail.tag}}</span>
</div> </div>
</div> </div>
<div class="col-lg-4 col-sm-4 col-xs-12 no-padding"> </div>
<div class="col-lg-4 col-md-6 col-xs-12 no-padding">
<div class="contact-info phone-email"> <div class="contact-info phone-email">
<div> <div>
<i class="ion-iphone"></i> <i class="ion-iphone"></i>
@ -102,7 +123,7 @@
</div> </div>
</div> </div>
<div class="col-lg-4 col-sm-4 col-xs-12 no-padding"> <div class="col-lg-4 col-md-6 col-xs-12 no-padding">
<div class="contact-info position-address"> <div class="contact-info position-address">
<div> <div>
<span class="position">{{mail.position}}</span> <span class="position">{{mail.position}}</span>
@ -114,17 +135,6 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-4 col-sm-4 col-xs-12 no-padding">
</div>
<div class="col-lg-8 col-sm-8 col-xs-12 no-padding">
<div class="tag-line">
<span class="tag label work">Work</span>
<span class="tag label family">Family</span>
<span class="tag label friend">Friend</span>
<span class="tag label study">Study</span>
</div>
</div>
</div> </div>
<div class="line"></div> <div class="line"></div>
<div class="message-details"> <div class="message-details">
@ -137,14 +147,19 @@
</div> </div>
<div class="line"></div> <div class="line"></div>
<div class="attachment" ng-show="mail.attachment"> <div class="attachment" ng-show="mail.attachment">
<span class="file-links">1 Attachment - <a href>View</a> | <a href>Download</a></span>
<div>
<i class="file-icon ion-document"></i> <i class="file-icon ion-document"></i>
<span class="file-name">{{mail.attachment}}</span> <span class="file-name">{{mail.attachment}}</span>
<i class="file-link ion-arrow-down-a"></i> </div>
</div> </div>
<div class="line" ng-show="mail.attachment"></div> <div class="line" ng-show="mail.attachment"></div>
<div class="answer-container" ng-show="tab != 1"> <div class="answer-container">
<textarea ng-show="tab != 3" placeholder="Type.." class="form-control answer-area"></textarea> <button type="button" class="btn btn-with-icon"><i class="ion-reply"></i>Reply</button>
<button type="button" class="btn answer-button">Send</button> <button type="button" class="btn btn-with-icon"><i class="ion-forward"></i>Forward</button>
<button type="button" class="btn btn-with-icon"><i class="ion-printer"></i>Print</button>
<button type="button" class="btn btn-with-icon"><i class="ion-android-remove-circle"></i>Spam</button>
<button type="button" class="btn btn-with-icon"><i class="ion-android-delete"></i>Delete</button>
</div> </div>
</div> </div>
@ -152,5 +167,6 @@
<h5 ng-class="text-center">Nothing to show</h5> <h5 ng-class="text-center">Nothing to show</h5>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

2
src/app/pages/mail/mail.html
View File

@ -1,6 +1,6 @@
<div class="row"> <div class="row">
<div class="col-md-12 col-sm-12"> <div class="col-md-12 col-sm-12">
<blur-panel class-container="with-scroll"> <blur-panel class-container="with-scroll mail-panel">
<blur-email></blur-email> <blur-email></blur-email>
</blur-panel> </blur-panel>
</div> </div>

2
src/app/theme/components/contentTop/contentTop.directive.js
View File

@ -30,7 +30,7 @@
'/icons': 'Icons', '/icons': 'Icons',
'/login': 'Authentication', '/login': 'Authentication',
'/maps': 'Maps', '/maps': 'Maps',
'/mail': 'Mail', '/mail': 'Mail Box',
'/modals': 'Modals', '/modals': 'Modals',
'/profile': 'User Profile', '/profile': 'User Profile',
'/tables': 'Tables', '/tables': 'Tables',

18
src/app/theme/filters/text/removeHtml.js Normal file
View File

@ -0,0 +1,18 @@
/**
* @author a.demeshko
* created on 23.12.2015
*/
(function () {
'use strict';
angular.module('BlurAdmin.theme')
.filter('plainText', plainText);
/** @ngInject */
function plainText() {
return function(text) {
return text ? String(text).replace(/<[^>]+>/gm, '') : '';
};
}
})();

443
src/sass/app/_email.scss
View File

@ -1,95 +1,190 @@
.letter-layout{
margin-top: -15px;
}
.mail-panel {
.panel-content {
padding: 15px 22px 0 0;
}
}
.mail-navigation-container { .mail-navigation-container {
display: table; width: 300px;
table-layout: fixed;
width: 100%;
padding: 15px 0;
.mail-navigation { .mail-navigation {
cursor: pointer; cursor: pointer;
display: table-cell;
line-height: 1;
text-align: center;
font-weight: 100; font-weight: 100;
font-size: 18px; font-size: 16px;
&.active { padding: 10px;
color: $dribble-color; margin-left: 22px;
.new-mails {
display: inline-block;
float: right;
color: white;
background-color: $primary-light;
padding: 1px 6px;
margin-top: -2px;
font-size: 12px;
margin-right: 5px;
border-radius: 10px;
} }
transition: transform .5s ease; &.active {
&:hover{ background-color: $primary-light;
transform: skew(-10deg); color: white;
&:hover {
background-color: $primary-light;
}
.new-mails {
color: $primary-light;
background-color: white;
}
transition: background-color .2s ease;
}
&:hover {
background-color: $border-light;
}
}
.compose-button {
margin: 7px 0;
.btn {
width: 150px;
color: white;
font-weight: 100;
background-color: $dribble-color;
} }
} }
} }
.message-container, .side-message-navigation{ .labels, .add-label-container{
margin-top: 16px;
margin-left: 22px;
}
.labels-title{
padding-left: 10px;
border-bottom: 1px solid $border-light;
.label-header{
line-height: 24px;
}
}
.label-item{
margin: 10px 0 0 10px;
}
.add-label-container{
padding-left: 10px;
font-size: 16px;
font-weight: 100;
.label-input-stub{
margin-left: 5px;
}
i{
cursor: pointer;
}
}
.margin-left {
margin-left: 10px;
}
.messages-control{
padding: 10px;
.dropdown-menu {
margin-left: 10px;
}
.btn{
background-color: transparent;
border: 1px solid $border-light;
}
.more-button {
width: 60px;
font-size: 12px;
font-weight: 100;
}
span.select-all-label{
font-size: 13px;
font-weight: 100;
}
}
.message-container, .side-message-navigation, .mail-navigation-container {
float: left; float: left;
padding: 0 15px; padding: 0 15px;
position: relative; position: relative;
min-height: 1px; min-height: 650px;
height: 650px;
overflow: scroll; overflow: scroll;
} }
@media (max-width: 1400px) { .side-message-navigation{
padding: 10px 0 0 0;
.side-message-navigation{ width: calc(100% - 300px);
width: 249px; box-shadow: -4px 0 7px -2px $input-border;
.side-message-navigation-item{
border-bottom: 1px solid $input-border;
&.work {
border-left:4px solid $primary-light;
} }
.message-container{ &.study {
width: calc(100% - 250px); border-left:4px solid $google-color;
} }
.additional-info{ &.family {
display: none; border-left:4px solid $warning;
&.date{ }
display: table-cell;
&.friend {
border-left:4px solid $danger;
} }
} }
} }
@media (max-width: 1100px) { .mail-body-part{
text-overflow: ellipsis;
.additional-info{ height: 16px;
&.date{ overflow: hidden;
display: none; margin-top: 3px;
} margin-left: 5px;
}
.side-message-navigation{
width: 180px;
}
.message-container{
width: calc(100% - 180px);
}
} }
@media (min-width: 1400px) {
.side-message-navigation{
width: 380px;
}
.message-container{ .border-tag{
width: calc(100% - 380px);
}
} }
.mail-tag.tag.label{
display: inline-block;
font-size: 14px;
text-transform: uppercase;
margin-top: 10px;
width: 65px;
}
.phone-email{
i{
color:$primary-dark;
}
}
.message-container {
width: calc(100% - 320px);
padding: 15px 0 10px 30px;
box-shadow: -4px 0 7px -2px $input-border;
overflow: inherit;
}
.control-container { .control-container {
background-color: #ebebeb; background-color: #ebebeb;
padding-left: 15px; padding-left: 15px;
margin-bottom: 30px; margin-bottom: 30px;
.compose-button {
color: white;
font-size: 16px;
font-weight: 100;
padding-left: 40px;
padding-right: 40px;
background-color: $dribble-color;
}
.icon-buttons { .icon-buttons {
margin-left: -10px; margin-left: -10px;
@ -126,57 +221,64 @@
width: 45px; width: 45px;
height: 45px; height: 45px;
border-radius: 23px; border-radius: 23px;
margin: 0 10px 10px 0; margin: 7px 0 7px 7px;
transition: all .2s ease-in-out; transition: all .2s ease-in-out;
} }
.name { .name {
font-size: 14px; font-size: 14px;
vertical-align: super; vertical-align: super;
white-space: nowrap;
}
.name-wrap{
margin-left: 10px;
} }
.date { .date {
text-align: right; float: right;
span { margin-top: 10px;
vertical-align: super; display: inline-block;
padding-rigth: 5px; font-size: 13px;
} margin-left: 5px;
margin-right: 5px;
white-space: nowrap;
} }
.tag { .tag {
vertical-align: super; vertical-align: super;
margin: 0 3px;
} }
.subject { .subject {
vertical-align: super; font-size: 14px;
margin-right: 3px; white-space: nowrap;
} }
&:hover { &:hover {
.little-human-picture { .little-human-picture {
transform: rotate(5deg); transform: rotate(5deg);
} }
}
&.active {
.name {
color: $dribble-color; color: $dribble-color;
} }
} }
.mail-checkbox{
margin-top: 5px;
margin-left: 6px;
} }
.tag { .tag {
text-transform: uppercase; text-transform: lowercase;
font-size: 11px; font-size: 11px;
font-weight: 100; font-weight: 100;
width: 45px;
cursor: pointer; cursor: pointer;
display: inline-block;
&.label { &.label {
padding: .3em .6em; padding: .2em .5em;
border-radius: 2px;
line-height: 1.1;
} }
&.work { &.work {
background-color: $primary; background-color: $primary-light;
} }
&.study { &.study {
background-color: $success; background-color: $google-color;
} }
&.family { &.family {
@ -206,12 +308,13 @@
} }
.person-info { .person-info {
padding:0 15px; padding: 0 0 10px 15px;
margin-top: 10px;
.human-picture { .human-picture {
width: 90px; width: 80px;
height: 90px; height: 80px;
border-radius: 45px; border-radius: 40px;
margin-top: -43px; margin-top: -115px;
} }
.name { .name {
@ -221,7 +324,6 @@
h2 { h2 {
margin-bottom: 0; margin-bottom: 0;
font-size: 24px; font-size: 24px;
font-weight: bold;
} }
} }
@ -265,7 +367,7 @@
} }
.position { .position {
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: 100;
} }
.address { .address {
@ -280,6 +382,7 @@
.subject { .subject {
font-size: 20px; font-size: 20px;
margin-right: 10px; margin-right: 10px;
font-weight: 100;
} }
.control-icons { .control-icons {
float: right; float: right;
@ -293,7 +396,6 @@
.message-body { .message-body {
margin: 20px 0; margin: 20px 0;
width: 85%;
font-weight: 100; font-weight: 100;
line-height: 18px; line-height: 18px;
p { p {
@ -302,31 +404,22 @@
} }
.attachment { .attachment {
margin: 5px 0; margin: 5px 0;
.file-icon { .file-icon {
font-size: 30px; font-size: 24px;
cursor: pointer;
} }
.file-name { .file-name {
font-size: 16px; font-size: 14px;
vertical-align: super; margin-left: 3px;
margin-left: 10px; position: relative;
top: -3px;
font-weight: 100;
} }
.file-link { .file-links {
font-size: 25px; font-size: 14px;
border-bottom: solid 3px;
float: right;
cursor: pointer;
}
}
.tag-line {
margin: 15px;
.tag{
margin-left: 10px;
} }
} }
@ -356,10 +449,150 @@
} }
.answer-container { .answer-container {
margin-top: 30px; float: right;
margin-top: 10px;
.btn{
margin-top: 3px;
background-color: $primary-light;
border: none;
color: white;
width: 100px;
transition: none;
&:hover{
transform: none;
background-color: $danger;
}
}
} }
.answer-area { .second-name {
width: 60%; margin-top: -7px;
float: left;
} }
@media screen and (max-width: 1199px) {
.name-h{
display: inline;
}
.person-info .human-picture {
margin-top: -45px;
}
.second-name {
margin-top: 0;
}
}
@media screen and (max-width: 990px) {
.mail-navigation-container{
width: 200px
}
.side-message-navigation {
width: calc(100% - 200px);
}
.message-container {
width: calc(100% - 220px);
}
.person-info .human-picture {
width: 150px;
height: 150px;
border-radius: 75px;
margin: 5px auto;
display: block;
}
.person-info{
padding-left: 0;
}
.message-container{
padding-left: 15px;
}
.back-button, .contact-info{
margin-left: 15px;
}
.additional-info{
display: none;
}
.little-human .date {
font-size: 10px;
}
.margin-left{
margin-left: 5px;
}
}
@media screen and (max-width: 650px) {
.mail-navigation-container{
width: 175px
}
.side-message-navigation {
width: calc(100% - 175px);
}
.message-container {
width: calc(100% - 185px);
}
.mail-body-part{
display: none;
}
.little-human .little-human-picture{
display: none;
}
.messages-control .more-button {
width: 50px;
}
}
@media screen and (max-width: 470px) {
.mail-navigation-container{
width: 155px
}
.side-message-navigation {
width: calc(100% - 155px);
}
.message-container {
width: calc(100% - 165px);
}
.mail-navigation-container .compose-button .btn {
width: 110px;
}
.mail-navigation-container .mail-navigation {
font-size: 14px;
}
.mail-navigation-container .mail-navigation .new-mails{
padding: 0px 5px;
margin-top: 0px;
font-size: 12px;
}
.mail-navigation-container .mail-navigation, .labels {
margin-left: 10px;
}
.add-label-container {
padding-left: 0;
font-size: 13px;
font-weight: 100;
}
}