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

refactor(mail):apply code review notes, fix compose area height(add scroll)

pull/3/head
alex 2016-01-13 16:52:01 +03:00
parent 47130f9389
commit 75a10e6985
6 changed files with 73 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/pages/mail/composeBox/compose.html
View File

@ -5,22 +5,22 @@
<span class="header-controls"> <span class="header-controls">
<i class="ion-minus-round"></i> <i class="ion-minus-round"></i>
<i class="ion-arrow-resize"></i> <i class="ion-arrow-resize"></i>
<i ng-click="close()" class="ion-close-round"></i> <i ng-click="$dismiss()" class="ion-close-round"></i>
</span> </span>
</div> </div>
<div > <div >
<input type="text" class="form-control compose-input" placeholder="To" ng-model="to"> <input type="text" class="form-control compose-input" placeholder="To" ng-model="boxCtrl.to">
<input type="text" class="form-control compose-input" placeholder="Subject" ng-model="subject"> <input type="text" class="form-control compose-input" placeholder="Subject" ng-model="boxCtrl.subject">
<div class="compose-container"> <div class="compose-container">
<text-angular-toolbar ta-toolbar-class="toolbarMain" name="toolbarMain" ta-toolbar="[['h1','h2','h3','bold','italics', 'underline', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull']]"></text-angular-toolbar> <text-angular-toolbar ta-toolbar-class="toolbarMain" name="toolbarMain" ta-toolbar="[['h1','h2','h3','bold','italics', 'underline', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull']]"></text-angular-toolbar>
<text-angular name="htmlcontent" ta-target-toolbars='toolbarMain,toolbarFooter' ng-model="text"></text-angular> <text-angular name="htmlcontent" ta-target-toolbars='toolbarMain,toolbarFooter' ng-model="boxCtrl.text"></text-angular>
</div> </div>
</div> </div>
<div class="compose-footer"> <div class="compose-footer">
<button type="button" ng-click="close()" class="btn btn-send">Send</button> <button type="button" ng-click="$dismiss()" class="btn btn-send">Send</button>
<text-angular-toolbar ta-toolbar-class="toolbarFooter" name="toolbarFooter" ta-toolbar="[['insertLink', 'insertImage', 'html', 'quote','insertVideo']]"></text-angular-toolbar> <text-angular-toolbar ta-toolbar-class="toolbarFooter" name="toolbarFooter" ta-toolbar="[['insertLink', 'insertImage', 'html', 'quote','insertVideo']]"></text-angular-toolbar>
<div class="footer-controls"> <div class="footer-controls">
<i class="footer-control-first compose-footer-icon ion-arrow-down-b"></i> <i class="footer-control-first compose-footer-icon ion-arrow-down-b"></i>
<i ng-click="close()" class="compose-footer-icon ion-android-delete"></i> <i ng-click="$dismiss()" class="compose-footer-icon ion-android-delete"></i>
</div> </div>
</div> </div>

14
src/app/pages/mail/composeBox/composeBoxCtrl.js
View File

@ -9,14 +9,10 @@
.controller('composeBoxCtrl', composeBoxCtrl); .controller('composeBoxCtrl', composeBoxCtrl);
/** @ngInject */ /** @ngInject */
function composeBoxCtrl($scope, $uibModalInstance, subject, to, text) { function composeBoxCtrl(subject, to, text) {
var vm = this;
$scope.subject = subject; vm.subject = subject;
$scope.to = to; vm.to = to;
$scope.text = text; vm.text = text;
console.log(subject, to , text);
$scope.close = function () {
$uibModalInstance.dismiss('cancel');
};
} }
})(); })();

6
src/app/pages/mail/composeBox/composeModal.js
View File

@ -10,12 +10,12 @@
/** @ngInject */ /** @ngInject */
function composeModal($uibModal) { function composeModal($uibModal) {
return { this.open = function(options){
open : function(options){
return $uibModal.open({ return $uibModal.open({
animation: false, animation: false,
templateUrl: 'app/pages/mail/composeBox/compose.html', templateUrl: 'app/pages/mail/composeBox/compose.html',
controller: 'composeBoxCtrl', controller: 'composeBoxCtrl',
controllerAs: 'boxCtrl',
size: 'slim', size: 'slim',
resolve: { resolve: {
subject: function () { subject: function () {
@ -30,7 +30,7 @@
} }
}); });
} }
}
} }
})(); })();

8
src/app/pages/mail/detail/MailDetailCtrl.js
View File

@ -9,14 +9,10 @@
.controller('MailDetailCtrl', MailDetailCtrl); .controller('MailDetailCtrl', MailDetailCtrl);
/** @ngInject */ /** @ngInject */
function MailDetailCtrl($state, $stateParams, mailMessages) { function MailDetailCtrl($stateParams, mailMessages) {
var vm = this; var vm = this;
vm.mail = mailMessages.getMessageById($stateParams.id); vm.mail = mailMessages.getMessageById($stateParams.id);
vm.back = function(){ vm.label = $stateParams.label;
$state.go('mail.label', {
label: $stateParams.label
})
}
} }
})(); })();

6
src/app/pages/mail/detail/mailDetail.html
View File

@ -1,7 +1,7 @@
<div class="message-container"> <div class="message-container">
<div class="message"> <div class="message">
<div class="row"> <div class="row">
<button ng-click="detailCtrl.back()" type="button" class="back-button btn btn-default btn-with-icon"><i <button ui-sref="mail.label({label : detailCtrl.label})" type="button" class="back-button btn btn-default btn-with-icon"><i
class="ion-chevron-left"></i>Back class="ion-chevron-left"></i>Back
</button> </button>
</div> </div>
@ -64,8 +64,8 @@
</div> </div>
<div class="line" ng-show="detailCtrl.mail.attachment"></div> <div class="line" ng-show="detailCtrl.mail.attachment"></div>
<div class="answer-container"> <div class="answer-container">
<button type="button" class="btn btn-with-icon" ng-click="showCompose(detailCtrl.mail.subject,detailCtrl.mail.email,'')"><i class="ion-reply"></i>Reply</button> <button type="button" class="btn btn-with-icon" ng-click="tabCtrl.showCompose(detailCtrl.mail.subject,detailCtrl.mail.email,'')"><i class="ion-reply"></i>Reply</button>
<button type="button" class="btn btn-with-icon" ng-click="showCompose(detailCtrl.mail.subject,'',detailCtrl.mail.body)"><i class="ion-forward"></i>Forward</button> <button type="button" class="btn btn-with-icon" ng-click="tabCtrl.showCompose(detailCtrl.mail.subject,'',detailCtrl.mail.body)"><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-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-remove-circle"></i>Spam</button>
<button type="button" class="btn btn-with-icon"><i class="ion-android-delete"></i>Delete</button> <button type="button" class="btn btn-with-icon"><i class="ion-android-delete"></i>Delete</button>

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

@ -1,4 +1,4 @@
.letter-layout{ .letter-layout {
margin-top: -15px; margin-top: -15px;
margin-right: -22px; margin-right: -22px;
} }
@ -55,32 +55,31 @@
} }
} }
.labels, .add-label-container {
.labels, .add-label-container{
margin-top: 16px; margin-top: 16px;
margin-left: 22px; margin-left: 22px;
} }
.labels-title{ .labels-title {
padding-left: 10px; padding-left: 10px;
border-bottom: 1px solid $border-light; border-bottom: 1px solid $border-light;
.label-header{ .label-header {
line-height: 24px; line-height: 24px;
} }
} }
.label-item{ .label-item {
margin: 10px 0 0 10px; margin: 10px 0 0 10px;
} }
.add-label-container{ .add-label-container {
padding-left: 10px; padding-left: 10px;
font-size: 16px; font-size: 16px;
font-weight: 100; font-weight: 100;
.label-input-stub{ .label-input-stub {
margin-left: 5px; margin-left: 5px;
} }
i{ i {
cursor: pointer; cursor: pointer;
} }
} }
@ -89,14 +88,14 @@
margin-left: 10px; margin-left: 10px;
} }
.messages-control{ .messages-control {
padding: 10px; padding: 10px;
.dropdown-menu { .dropdown-menu {
margin-left: 10px; margin-left: 10px;
} }
.btn{ .btn {
background-color: transparent; background-color: transparent;
border: 1px solid $border-light; border: 1px solid $border-light;
} }
@ -108,13 +107,12 @@
font-weight: 100; font-weight: 100;
} }
span.select-all-label{ span.select-all-label {
font-size: 13px; font-size: 13px;
font-weight: 100; font-weight: 100;
} }
} }
.message-container, .side-message-navigation, .mail-navigation-container { .message-container, .side-message-navigation, .mail-navigation-container {
float: left; float: left;
padding: 0 15px; padding: 0 15px;
@ -123,31 +121,31 @@
overflow: scroll; overflow: scroll;
} }
.side-message-navigation{ .side-message-navigation {
padding: 10px 0 0 0; padding: 10px 0 0 0;
width: calc(100% - 300px); width: calc(100% - 300px);
box-shadow: -4px 0 7px -2px $input-border; box-shadow: -4px 0 7px -2px $input-border;
.side-message-navigation-item{ .side-message-navigation-item {
border-bottom: 1px solid $input-border; border-bottom: 1px solid $input-border;
&.work { &.work {
border-left:4px solid $primary-light; border-left: 4px solid $primary-light;
} }
&.study { &.study {
border-left:4px solid $google-color; border-left: 4px solid $google-color;
} }
&.family { &.family {
border-left:4px solid $warning; border-left: 4px solid $warning;
} }
&.friend { &.friend {
border-left:4px solid $danger; border-left: 4px solid $danger;
} }
} }
} }
.mail-body-part{ .mail-body-part {
text-overflow: ellipsis; text-overflow: ellipsis;
height: 16px; height: 16px;
overflow: hidden; overflow: hidden;
@ -155,7 +153,7 @@
margin-left: 5px; margin-left: 5px;
} }
.mail-tag.tag.label{ .mail-tag.tag.label {
display: inline-block; display: inline-block;
font-size: 14px; font-size: 14px;
text-transform: uppercase; text-transform: uppercase;
@ -163,9 +161,9 @@
width: 65px; width: 65px;
} }
.phone-email{ .phone-email {
i{ i {
color:$primary-dark; color: $primary-dark;
} }
} }
@ -191,7 +189,7 @@
vertical-align: super; vertical-align: super;
white-space: nowrap; white-space: nowrap;
} }
.name-wrap{ .name-wrap {
margin-left: 10px; margin-left: 10px;
} }
.date { .date {
@ -218,7 +216,7 @@
} }
} }
.mail-checkbox{ .mail-checkbox {
margin-top: 5px; margin-top: 5px;
margin-left: 6px; margin-left: 6px;
} }
@ -354,7 +352,7 @@
cursor: pointer; cursor: pointer;
} }
} }
.date{ .date {
white-space: nowrap; white-space: nowrap;
} }
} }
@ -416,14 +414,14 @@
.answer-container { .answer-container {
float: right; float: right;
margin-top: 10px; margin-top: 10px;
.btn{ .btn {
margin-top: 3px; margin-top: 3px;
background-color: $primary-light; background-color: $primary-light;
border: none; border: none;
color: white; color: white;
width: 100px; width: 100px;
transition: none; transition: none;
&:hover{ &:hover {
transform: none; transform: none;
background-color: $danger; background-color: $danger;
} }
@ -434,12 +432,11 @@
margin-top: -7px; margin-top: -7px;
} }
@keyframes rotateReturnAnimation { @keyframes rotateReturnAnimation {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
} }
50%{ 50% {
transform: rotate(10deg); transform: rotate(10deg);
} }
100% { 100% {
@ -449,7 +446,7 @@
@media screen and (max-width: 1300px) { @media screen and (max-width: 1300px) {
.mail-navigation-container{ .mail-navigation-container {
width: 260px width: 260px
} }
@ -463,9 +460,8 @@
} }
@media screen and (max-width: 1199px) { @media screen and (max-width: 1199px) {
.name-h{ .name-h {
display: inline; display: inline;
} }
.person-info .human-picture { .person-info .human-picture {
@ -477,7 +473,7 @@
} }
@media screen and (max-width: 990px) { @media screen and (max-width: 990px) {
.mail-navigation-container{ .mail-navigation-container {
width: 200px width: 200px
} }
@ -498,19 +494,19 @@
} }
.person-info{ .person-info {
padding-left: 0; padding-left: 0;
} }
.message-container{ .message-container {
padding-left: 15px; padding-left: 15px;
} }
.back-button, .contact-info{ .back-button, .contact-info {
margin-left: 15px; margin-left: 15px;
} }
.additional-info{ .additional-info {
display: none; display: none;
} }
@ -518,7 +514,7 @@
font-size: 10px; font-size: 10px;
} }
.margin-left{ .margin-left {
margin-left: 5px; margin-left: 5px;
} }
@ -526,7 +522,7 @@
@media screen and (max-width: 650px) { @media screen and (max-width: 650px) {
.mail-navigation-container{ .mail-navigation-container {
width: 175px width: 175px
} }
@ -538,10 +534,10 @@
width: calc(100% - 175px); width: calc(100% - 175px);
} }
.mail-body-part{ .mail-body-part {
display: none; display: none;
} }
.little-human .little-human-picture{ .little-human .little-human-picture {
width: 30px; width: 30px;
height: 30px; height: 30px;
} }
@ -549,12 +545,13 @@
width: 50px; width: 50px;
} }
} }
@media screen and (max-width: 470px) { @media screen and (max-width: 470px) {
.little-human .little-human-picture{ .little-human .little-human-picture {
display: none; display: none;
} }
.mail-navigation-container{ .mail-navigation-container {
width: 155px width: 155px
} }
@ -574,7 +571,7 @@
font-size: 14px; font-size: 14px;
} }
.mail-navigation-container .mail-navigation .new-mails{ .mail-navigation-container .mail-navigation .new-mails {
padding: 0px 5px; padding: 0px 5px;
margin-top: 0px; margin-top: 0px;
font-size: 12px; font-size: 12px;
@ -592,8 +589,6 @@
} }
.compose-header { .compose-header {
padding: 8px 3px 8px 10px; padding: 8px 3px 8px 10px;
color: white; color: white;
@ -615,14 +610,18 @@
} }
} }
.compose-container .ta-scroll-window > .ta-bind {
height: 290px;
overflow-y: scroll;
}
.compose-input { .compose-input {
border-left: 0; border-left: 0;
border-right: 0; border-right: 0;
border-top: 0; border-top: 0;
} }
.compose-footer { .compose-footer {
padding: 2px 4px; padding: 2px 4px;
background-color: whitesmoke; background-color: whitesmoke;
@ -633,7 +632,7 @@
margin: 3px; margin: 3px;
font-weight: 100; font-weight: 100;
} }
.btn-default{ .btn-default {
background-color: transparent; background-color: transparent;
border: none; border: none;
} }
@ -648,6 +647,7 @@
font-size: 18px; font-size: 18px;
margin-right: 5px; margin-right: 5px;
cursor: pointer; cursor: pointer;
color: $help-text;
&:hover { &:hover {
color: $primary-light; color: $primary-light;
} }