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

email new responsive design

Browse Source
pull/3/head
alex 9 years ago
parent 418d4ec106
commit 077c2765c0
6 changed files with 499 additions and 211 deletions
Show Stats Download Patch File Download Diff File

37
src/app/pages/mail/MailCtrl.js
Unescape View File

@ -10,10 +10,13 @@
/** @ngInject */
function MailCtrl($scope, $location, $sce) {
$scope.showMail = false;
$scope.messages = [
{
"id": "4563faass",
"name": "Nasta Tyshkavets",
"name": "Nasta Linnie",
"subject": "Great text",
"date": "2015-08-28T07:57:09",
"important": true,
@ -28,7 +31,7 @@
},
{
"id": "4563fdfvd",
"name": "Nasta Tyshkavets",
"name": "Nasta Linnie",
"subject": "Lores ipsum",
"date": "2015-11-19T03:30:45",
"important": false,
@ -37,13 +40,13 @@
"pic": "img/Nasta.png",
"email": "petraramsey@mail.com",
"position": "Great Employee",
"tag": "work",
"tag": "study",
"draft": false,
"trash": false
},
{
"id": "4563zxcss",
"name": "Nasta Tyshkavets",
"name": "Nasta Linnie",
"subject": "Lores ipsum",
"date": "2015-10-19T03:30:45",
"important": false,
@ -83,7 +86,7 @@
"position": "Graphical designer",
"draft": false,
"trash": false,
"tag": "work"
"tag": "study"
},
{
"id": "8955asewf",
@ -99,6 +102,20 @@
"trash": false,
"tag": "work"
},
{
"id": "8955asdff",
"name": "Nick Cat",
"subject": "Some news ",
"date": "2015-09-23T03:04:10",
"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>"),
"pic": "img/Nick.png",
"email": "barlowshort@mail.com",
"position": "Graphical designer",
"draft": true,
"trash": false,
"tag": "work"
},
{
"id": "2334uudsa",
"name": "Kostya Danovsky",
@ -116,7 +133,7 @@
"draft": false,
"attachment": "file.doc",
"trash": false,
"tag" : "work"
"tag" : "family"
},
{
"id": "2334aefvv",
@ -134,7 +151,7 @@
"position": "Technical Chef",
"draft": false,
"trash": false,
"tag" : "work"
"tag" : "family"
},
{
"id": "8223xzxfn",
@ -187,7 +204,7 @@
{
"id": "9391xdsff",
"name": "Vlad Lugovsky",
"subject": "Whan next",
"subject": "What next",
"date": "2015-03-31T11:52:58",
"important": false,
"body": $sce.trustAsHtml("<p>Hey Vlad. </p><p>Lorem ipsum dolor sit amet!</p>" +
@ -210,6 +227,7 @@
{
label: 'inbox',
name: 'Inbox',
"newMails" : 7,
filter: function (messages) {
return messages.filter(function (m) {
return !m.trash && !m.draft && !m.spam && !m.my
@ -237,6 +255,7 @@
{
label: 'draft',
name: 'Draft',
"newMails" : 2,
filter: function (messages) {
return messages.filter(function (m) {
return m.draft && !m.trash
@ -266,12 +285,14 @@
$scope.tab = tab;
$scope.currentMessages = $scope.tabs[tab].filter($scope.messages);
$scope.mail = $scope.currentMessages[0];
$scope.showMail = false;
//var mailId = $scope.mail ? $scope.mail.id : '';
//$location.path("/mail/"+$scope.tabs[tab].label+"/"+ mailId);
};
$scope.selectMail = function (mail) {
$scope.mail = mail;
$scope.showMail = true;
//$location.path("/mail/"+$scope.tabs[$scope.tab].label+"/"+ mail.id);
};

156
src/app/pages/mail/blurEmail.html
Unescape View File

@ -1,53 +1,45 @@
<div class="mail-container">
<div class="row">
<div class="row letter-layout">
<div class="mail-navigation-container">
<div class="compose-button">
<button type="button" class="btn compose-button">
Compose
</button>
</div>
<div ng-repeat="t in tabs" class="mail-navigation {{tab == $index ? 'active' : ''}}" ng-click="selectTab($index)">
{{t.name}}
{{t.name}}<span class="new-mails" ng-show="t.newMails">{{t.newMails}}</span>
</div>
<div class="labels">
<div class="labels-title">
<h5 class="label-header">
Labels
</h5>
</div>
<div class="label-item">
<span class="tag label work">Work</span>
</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">
Compose
</button>
<div class="label-item">
<span class="tag label family">Family</span>
</div>
<div class="col-lg-8 col-sm-8 col-xs-8 icon-buttons">
<button type="button" class="btn btn-icon"><i class="ion-android-download"></i></button>
<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 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 class="btn-group">
<button type="button" class="btn btn-icon dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i title="Folder" class="ion-link"> </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 class="btn-group">
<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"
aria-haspopup="true"
aria-expanded="false">More<span class="caret"></span>
@ -61,35 +53,64 @@
</ul>
</div>
</div>
</div>
<div class="row inbox-layout">
<div class="side-message-navigation">
<div class="messages">
<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)">
<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><span class="name">{{m.name.split(' ')[0] + ' ' + m.name.split(' ')[1][0]}}.</span></td>
<td class="additional-info"><span class="tag label label-primary {{m.tag}}">{{m.tag}}</span></td>
<td class="additional-info"><span class="subject">{{m.subject}}</span></td>
<td class="date additional-info"><span>{{m.date | date : 'MMM d HH:mm'}}</span></td>
<td >
<div class="margin-left">
<div><span class="name">{{m.name.split(' ')[0] + ' ' + m.name.split(' ')[1][0]}}.</span></div>
<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>
</table>
</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="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="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">
<div class="name">
<h2>{{mail.name.split(' ')[0]}}</h2>
<h2 class="name-h">{{mail.name.split(' ')[0]}}</h2>
<h2 class="name-h second-name">{{mail.name.split(' ')[1]}}</h2>
<h2>{{mail.name.split(' ')[1]}}</h2>
<div>
<span class="mail-tag tag label {{mail.tag}}">{{mail.tag}}</span>
</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 phone-email">
<div>
<i class="ion-iphone"></i>
@ -102,7 +123,7 @@
</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>
<span class="position">{{mail.position}}</span>
@ -114,17 +135,6 @@
</div>
</div>
<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 class="line"></div>
<div class="message-details">
@ -137,14 +147,19 @@
</div>
<div class="line"></div>
<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>
<span class="file-name">{{mail.attachment}}</span>
<i class="file-link ion-arrow-down-a"></i>
</div>
</div>
<div class="line" ng-show="mail.attachment"></div>
<div class="answer-container" ng-show="tab != 1">
<textarea ng-show="tab != 3" placeholder="Type.." class="form-control answer-area"></textarea>
<button type="button" class="btn answer-button">Send</button>
<div class="answer-container">
<button type="button" class="btn btn-with-icon"><i class="ion-reply"></i>Reply</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>
@ -152,5 +167,6 @@
<h5 ng-class="text-center">Nothing to show</h5>
</div>
</div>
</div>
</div>

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

@ -1,6 +1,6 @@
<div class="row">
<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-panel>
</div>

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

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

18
src/app/theme/filters/text/removeHtml.js
Unescape 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, '') : '';
};
}
})();

423
src/sass/app/_email.scss
Unescape View File

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

Write Preview
Loading…
Cancel
Save