mirror of https://github.com/akveo/blur-admin
Merge branch 'v2' into lugovsky-feature
Conflicts: src/app/pages/mail/mail.htmlpull/3/head
Vladimir Lugovsky
commit
d11b25827a
|
|
@ -50,7 +50,8 @@
|
|||
"angular-ui-tree": "~2.12.0",
|
||||
"ionrangeslider": "~2.1.2",
|
||||
"angular-bootstrap": "~0.14.3",
|
||||
"angular-animate": "~1.4.8"
|
||||
"angular-animate": "~1.4.8",
|
||||
"textAngular": "~1.4.6"
|
||||
},
|
||||
"overrides": {
|
||||
"amcharts": {
|
||||
|
|
|
|||
|
|
@ -19,6 +19,13 @@
|
|||
url: '/form-layouts',
|
||||
templateUrl: 'app/pages/form/layouts/layouts.html'
|
||||
})
|
||||
.state('form-wizard',
|
||||
{
|
||||
url: '/form-wizard',
|
||||
templateUrl: 'app/pages/form/wizard/wizardPage.html',
|
||||
controller: 'WizardCtrl',
|
||||
controllerAs: 'vm'
|
||||
})
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<section ng-show="selected" class="tab" ng-transclude></section>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<div class="wizard">
|
||||
<div class="row">
|
||||
<div class="wizard-navigation-container">
|
||||
<div ng-repeat="t in $baWizardController.tabs" class="wizard-navigation {{$baWizardController.tabNum == $index ? 'active' : ''}}" ng-click="$baWizardController.selectTab($index)">
|
||||
{{t.title}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="progress progress-wizard">
|
||||
<div class="progress-bar progress-bar-info active" role="progressbar"
|
||||
aria-valuemin="0" aria-valuemax="100" style="{{'width: ' + $baWizardController.progress + '%;'}}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="steps" ng-transclude></div>
|
||||
|
||||
<nav>
|
||||
<ul class="pager wizard-pager">
|
||||
<li class="previous"><button ng-disabled="$baWizardController.isFirstTab()" ng-click="$baWizardController.previousTab()" type="button" class=" btn btn-primary"><span aria-hidden="true">←</span> previous</button></li>
|
||||
<li class="next"> <button ng-disabled="$baWizardController.isLastTab()" ng-click="$baWizardController.nextTab()" type="button" class="btn btn-primary">next <span aria-hidden="true">→</span></button></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<div class="widgets">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<blur-panel title="Form Wizard" class-container="with-scroll">
|
||||
<ba-wizard>
|
||||
<ba-wizard-tab title="Personal info" form="vm.personalInfoForm">
|
||||
<form name="vm.personalInfoForm" novalidate>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group has-feedback"
|
||||
ng-class="{'has-error': vm.personalInfoForm.username.$invalid && (vm.personalInfoForm.username.$dirty || vm.personalInfoForm.$submitted)}">
|
||||
<label for="exampleUsername1">Username</label>
|
||||
<input type="text" class="form-control" id="exampleUsername1" name="username" placeholder="Username" ng-model="vm.personalInfo.username" required>
|
||||
<span class="help-block error-block basic-block">Required</span>
|
||||
</div>
|
||||
<div class="form-group" ng-class="{'has-error': vm.personalInfoForm.email.$invalid && (vm.personalInfoForm.email.$dirty || vm.personalInfoForm.$submitted)}">
|
||||
<label for="exampleInputEmail1">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" name="email" placeholder="Email" ng-model="vm.personalInfo.email" required>
|
||||
<span class="help-block error-block basic-block">Proper email required</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group" ng-class="{'has-error': vm.personalInfoForm.password.$invalid && (vm.personalInfoForm.password.$dirty || vm.personalInfoForm.$submitted)}">
|
||||
<label for="exampleInputPassword1">Password</label>
|
||||
<input type="password" class="form-control" id="exampleInputPassword1" name="password" placeholder="Password" ng-model="vm.personalInfo.password" required>
|
||||
<span class="help-block error-block basic-block">Required</span>
|
||||
</div>
|
||||
<div class="form-group" ng-class="{'has-error': !vm.arePersonalInfoPasswordsEqual() && (vm.personalInfoForm.confirmPassword.$dirty || vm.personalInfoForm.$submitted)}">
|
||||
<label for="exampleInputConfirmPassword1">Confirm Password</label>
|
||||
<input type="password" class="form-control" id="exampleInputConfirmPassword1" name="confirmPassword" placeholder="Confirm Password" ng-model="vm.personalInfo.confirmPassword" required>
|
||||
<span class="help-block error-block basic-block">Passwords should match</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</ba-wizard-tab>
|
||||
<ba-wizard-tab title="Product Info" form="vm.productInfoForm">
|
||||
<form name="vm.productInfoForm" novalidate>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group has-feedback"
|
||||
ng-class="{'has-error': vm.productInfoForm.productName.$invalid && (vm.productInfoForm.productName.$dirty || vm.productInfoForm.$submitted)}">
|
||||
<label for="productName">Product name</label>
|
||||
<input type="text" class="form-control" id="productName" name="productName" placeholder="Product name" ng-model="vm.productInfo.productName" required>
|
||||
<span class="help-block error-block basic-block">Required</span>
|
||||
</div>
|
||||
<div class="form-group" ng-class="{'has-error': vm.productInfoForm.productId.$invalid && (vm.productInfoForm.productId.$dirty || vm.productInfoForm.$submitted)}">
|
||||
<label for="productId">Product id</label>
|
||||
<input type="text" class="form-control" id="productId" name="productId" placeholder="productId" ng-model="vm.productInfo.productId" required>
|
||||
<span class="help-block error-block basic-block">Required</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="productName">Category</label>
|
||||
<select class="form-control" title="Category" selectpicker>
|
||||
<option selected>Electronics</option>
|
||||
<option>Toys</option>
|
||||
<option>Weed</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</ba-wizard-tab>
|
||||
<ba-wizard-tab title="Shipment" form="vm.addressForm">
|
||||
<form name="vm.addressForm" novalidate>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group has-feedback"
|
||||
ng-class="{'has-error': vm.addressForm.address.$invalid && (vm.addressForm.address.$dirty || vm.addressForm.$submitted)}">
|
||||
<label for="productName">Shipment address</label>
|
||||
<input type="text" class="form-control" id="address" name="address" placeholder="Shipment address" ng-model="vm.shipment.address" required>
|
||||
<span class="help-block error-block basic-block">Required</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="productName">Shipment method</label>
|
||||
<select class="form-control" title="Category" selectpicker>
|
||||
<option selected>Fast & expensive</option>
|
||||
<option>Cheap & free</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label class="custom-checkbox">
|
||||
<input type="checkbox">
|
||||
<span>Save shipment info</span>
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</ba-wizard-tab>
|
||||
<ba-wizard-tab title="Finish">
|
||||
<form class="form-horizontal" name="vm.finishForm" novalidate>
|
||||
Congratulations! You have successfully filled the form
|
||||
</form>
|
||||
</ba-wizard-tab>
|
||||
</ba-wizard>
|
||||
</blur-panel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.pages.form')
|
||||
.controller('WizardCtrl', WizardCtrl)
|
||||
.directive('baWizard', baWizard)
|
||||
.directive('baWizardTab', baWizardTab);
|
||||
|
||||
/** @ngInject */
|
||||
function WizardCtrl($scope) {
|
||||
var vm = this;
|
||||
|
||||
vm.personalInfo = {};
|
||||
vm.productInfo = {};
|
||||
vm.shipment = {};
|
||||
|
||||
vm.arePersonalInfoPasswordsEqual = function () {
|
||||
return vm.personalInfo.confirmPassword && vm.personalInfo.password == vm.personalInfo.confirmPassword;
|
||||
};
|
||||
|
||||
setInterval(function() {
|
||||
console.log(vm.productInfo)
|
||||
}, 5000)
|
||||
}
|
||||
|
||||
function baWizard() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
transclude: true,
|
||||
templateUrl: 'app/pages/form/wizard/wizard.html',
|
||||
controllerAs: '$baWizardController',
|
||||
controller: ['$scope', function ($scope) {
|
||||
var vm = this;
|
||||
vm.tabs = [];
|
||||
|
||||
vm.tabNum = 0;
|
||||
vm.progress = 0;
|
||||
|
||||
vm.addTab = function(tab) {
|
||||
tab.setPrev(vm.tabs[vm.tabs.length - 1]);
|
||||
vm.tabs.push(tab);
|
||||
vm.selectTab(0);
|
||||
};
|
||||
|
||||
$scope.$watch(angular.bind(vm, function () {return vm.tabNum;}), countProgress);
|
||||
|
||||
vm.selectTab = function (tabNum) {
|
||||
vm.tabs[vm.tabNum].submit();
|
||||
if (vm.tabs[tabNum].isAvailiable()) {
|
||||
vm.tabNum = tabNum;
|
||||
vm.tabs.forEach(function (t, tIndex) {
|
||||
tIndex == vm.tabNum ? t.select(true) : t.select(false);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
vm.isFirstTab = function () {
|
||||
return vm.tabNum == 0;
|
||||
};
|
||||
|
||||
vm.isLastTab = function () {
|
||||
return vm.tabNum == vm.tabs.length - 1 ;
|
||||
};
|
||||
|
||||
vm.nextTab = function () {
|
||||
vm.selectTab(vm.tabNum + 1)
|
||||
};
|
||||
|
||||
vm.previousTab = function () {
|
||||
vm.selectTab(vm.tabNum - 1)
|
||||
};
|
||||
|
||||
function countProgress() {
|
||||
vm.progress = ((vm.tabNum + 1) / vm.tabs.length) * 100;
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
function baWizardTab() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
transclude: true,
|
||||
require: '^baWizard',
|
||||
scope: {
|
||||
form: '='
|
||||
},
|
||||
templateUrl: 'app/pages/form/wizard/tab.html',
|
||||
link: function($scope, $element, $attrs, wizard) {
|
||||
$scope.selected = true;
|
||||
|
||||
var tab = {
|
||||
title: $attrs.title,
|
||||
select: select,
|
||||
submit: submit,
|
||||
isComplete: isComplete,
|
||||
isAvailiable: isAvailiable,
|
||||
prevTab: undefined,
|
||||
setPrev: setPrev
|
||||
};
|
||||
|
||||
wizard.addTab(tab);
|
||||
|
||||
function select(isSelected) {
|
||||
if (isSelected) {
|
||||
$scope.selected = true;
|
||||
} else {
|
||||
$scope.selected = false;
|
||||
}
|
||||
}
|
||||
|
||||
function submit() {
|
||||
$scope.form && $scope.form.$setSubmitted(true);
|
||||
}
|
||||
|
||||
function isComplete() {
|
||||
return $scope.form ? $scope.form.$valid : true;
|
||||
}
|
||||
|
||||
function isAvailiable() {
|
||||
return tab.prevTab ? tab.prevTab.isComplete() : true;
|
||||
}
|
||||
|
||||
function setPrev(pTab) {
|
||||
tab.prevTab = pTab;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
})();
|
||||
|
||||
|
|
@ -1,299 +0,0 @@
|
|||
/**
|
||||
* @author v.lugovsky
|
||||
* created on 16.12.2015
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.pages.mail')
|
||||
.controller('MailCtrl', MailCtrl);
|
||||
|
||||
/** @ngInject */
|
||||
function MailCtrl($scope, $location, $sce) {
|
||||
$scope.messages = [
|
||||
{
|
||||
"id": "4563faass",
|
||||
"name": "Nasta Tyshkavets",
|
||||
"subject": "Great text",
|
||||
"date": "2015-08-28T07:57:09",
|
||||
"important": true,
|
||||
"body": $sce.trustAsHtml("<p>Hey John,</p><p>Check out this cool text.</p>"),
|
||||
"pic": "img/Nasta.png",
|
||||
"email": "petraramsey@mail.com",
|
||||
"attachment": "poem.txt",
|
||||
"draft": false,
|
||||
"trash": false,
|
||||
"position": "Great Employee",
|
||||
"tag": "friend"
|
||||
},
|
||||
{
|
||||
"id": "4563fdfvd",
|
||||
"name": "Nasta Tyshkavets",
|
||||
"subject": "Lores ipsum",
|
||||
"date": "2015-11-19T03:30:45",
|
||||
"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>" +
|
||||
"<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",
|
||||
"email": "petraramsey@mail.com",
|
||||
"position": "Great Employee",
|
||||
"tag": "work",
|
||||
"draft": false,
|
||||
"trash": false
|
||||
},
|
||||
{
|
||||
"id": "4563zxcss",
|
||||
"name": "Nasta Tyshkavets",
|
||||
"subject": "Lores ipsum",
|
||||
"date": "2015-10-19T03:30:45",
|
||||
"important": false,
|
||||
"body": $sce.trustAsHtml("<p>Hey John,</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>"),
|
||||
"pic": "img/Nasta.png",
|
||||
"email": "petraramsey@mail.com",
|
||||
"position": "Great Employee",
|
||||
"tag": "work",
|
||||
"draft": false,
|
||||
"trash": true
|
||||
},
|
||||
{
|
||||
"id": "8955sddf",
|
||||
"name": "Nick Cat",
|
||||
"subject": "New Design",
|
||||
"date": "2015-05-05T12:59:45",
|
||||
"important": true,
|
||||
"body": $sce.trustAsHtml("<p>Hey John, Consectetur adipiscing elit</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/Nick.png",
|
||||
"email": "barlowshort@mail.com",
|
||||
"position": "Graphical designer",
|
||||
"attachment": "design.psd",
|
||||
"draft": false,
|
||||
"trash": false,
|
||||
"tag": "work"
|
||||
},
|
||||
{
|
||||
"id": "8955sdfcc",
|
||||
"name": "Nick Cat",
|
||||
"subject": "Gift card",
|
||||
"date": "2015-07-18T10:19:01",
|
||||
"important": false,
|
||||
"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": "work"
|
||||
},
|
||||
{
|
||||
"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",
|
||||
"email": "barlowshort@mail.com",
|
||||
"position": "Graphical designer",
|
||||
"draft": false,
|
||||
"trash": false,
|
||||
"tag": "work"
|
||||
},
|
||||
{
|
||||
"id": "2334uudsa",
|
||||
"name": "Kostya Danovsky",
|
||||
"subject": "Street Art",
|
||||
"date": "2015-11-22T10:05:09",
|
||||
"important": false,
|
||||
"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>Lorem ipsum dolor sit amet! Nullam imperdiet justo a ipsum laoreet euismod.</p>" +
|
||||
"<br><p>Cras tincidunt fermentum lectus, quis scelerisque lorem volutpat sed." +
|
||||
"Sed quis orci sed nisl sagittis viverra id at mauris. Nam venenatis mi nibh. Sed fringilla mattis vehic</p>"),
|
||||
"pic": "img/Kostya.png",
|
||||
"email": "schwartzalford@mail.com",
|
||||
"position": "Technical Chef",
|
||||
"draft": false,
|
||||
"attachment": "file.doc",
|
||||
"trash": false,
|
||||
"tag" : "work"
|
||||
},
|
||||
{
|
||||
"id": "2334aefvv",
|
||||
"name": "Kostya Danovsky",
|
||||
"subject": "New product",
|
||||
"date": "2015-06-22T06:26:10",
|
||||
"important": true,
|
||||
"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>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." +
|
||||
"Cras tincidunt fermentum lectus, quis scelerisque lorem volutpat sed. Sed quis orci sed nisl sagittis viverra id at mauris. Nam venenatis mi nibh. Sed fringilla mattis vehic</p>"),
|
||||
"pic": "img/Kostya.png",
|
||||
"email": "schwartzalford@mail.com",
|
||||
"position": "Technical Chef",
|
||||
"draft": false,
|
||||
"trash": false,
|
||||
"tag" : "work"
|
||||
},
|
||||
{
|
||||
"id": "8223xzxfn",
|
||||
"name": "Andrey Hrabouski",
|
||||
"subject": "Skype moji",
|
||||
"date": "2015-07-16T06:47:53",
|
||||
"important": false,
|
||||
"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>"),
|
||||
"pic": "img/Andrey.png",
|
||||
"email": "lakeishaphillips@mail.com",
|
||||
"position": "Mobile Developer",
|
||||
"tag" : 'family',
|
||||
"draft": false,
|
||||
"trash": true
|
||||
},
|
||||
{
|
||||
"id": "8223sdffn",
|
||||
"name": "Andrey Hrabouski",
|
||||
"subject": "My App",
|
||||
"date": "2015-06-20T07:05:02",
|
||||
"important": false,
|
||||
"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>"),
|
||||
"pic": "img/Andrey.png",
|
||||
"email": "lakeishaphillips@mail.com",
|
||||
"position": "Mobile Developer",
|
||||
"draft": false,
|
||||
"trash": false,
|
||||
"tag" : 'family',
|
||||
"spam": true
|
||||
},
|
||||
{
|
||||
"id": "9391xdsff",
|
||||
"name": "Vlad Lugovsky",
|
||||
"subject": "Cool",
|
||||
"date": "2015-03-31T11:52:58",
|
||||
"important": false,
|
||||
"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>"),
|
||||
"pic": "img/Vlad.png",
|
||||
"email": "carlsongoodman@mail.com",
|
||||
"my": true,
|
||||
"position": "Fullstack man",
|
||||
"tag": "study",
|
||||
"draft": false,
|
||||
"trash": false,
|
||||
"spam": false
|
||||
},
|
||||
{
|
||||
"id": "9391xdsff",
|
||||
"name": "Vlad Lugovsky",
|
||||
"subject": "Whan next",
|
||||
"date": "2015-03-31T11:52:58",
|
||||
"important": false,
|
||||
"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>"),
|
||||
"pic": "img/Vlad.png",
|
||||
"email": "carlsongoodman@mail.com",
|
||||
"my": true,
|
||||
"position": "Fullstack man",
|
||||
"tag": "study",
|
||||
"draft": true,
|
||||
"trash": false,
|
||||
"spam": false
|
||||
}
|
||||
].sort(function (a, b) {
|
||||
if (a.date > b.date) return 1;
|
||||
if (a.date < b.date) return -1;
|
||||
}).reverse();
|
||||
|
||||
$scope.tabs = [
|
||||
{
|
||||
label: 'inbox',
|
||||
name: 'Inbox',
|
||||
filter: function (messages) {
|
||||
return messages.filter(function (m) {
|
||||
return !m.trash && !m.draft && !m.spam && !m.my
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'sentMail',
|
||||
name: 'Sent Mail',
|
||||
filter: function (messages) {
|
||||
return messages.filter(function (m) {
|
||||
return m.my && !m.trash && !m.draft
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'important',
|
||||
name: 'Important',
|
||||
filter: function (messages) {
|
||||
return messages.filter(function (m) {
|
||||
return m.important && !m.trash && !m.draft
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'draft',
|
||||
name: 'Draft',
|
||||
filter: function (messages) {
|
||||
return messages.filter(function (m) {
|
||||
return m.draft && !m.trash
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'spam',
|
||||
name: 'Spam',
|
||||
filter: function (messages) {
|
||||
return messages.filter(function (m) {
|
||||
return m.spam && !m.trash
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'trash',
|
||||
name: 'Trash',
|
||||
filter: function (messages) {
|
||||
return messages.filter(function (m) {
|
||||
return m.trash
|
||||
});
|
||||
}
|
||||
}];
|
||||
|
||||
$scope.selectTab = function (tab) {
|
||||
$scope.tab = tab;
|
||||
$scope.currentMessages = $scope.tabs[tab].filter($scope.messages);
|
||||
$scope.mail = $scope.currentMessages[0];
|
||||
//var mailId = $scope.mail ? $scope.mail.id : '';
|
||||
//$location.path("/mail/"+$scope.tabs[tab].label+"/"+ mailId);
|
||||
};
|
||||
|
||||
$scope.selectMail = function (mail) {
|
||||
$scope.mail = mail;
|
||||
//$location.path("/mail/"+$scope.tabs[$scope.tab].label+"/"+ mail.id);
|
||||
};
|
||||
|
||||
$scope.isSelectedTab = function (tab) {
|
||||
return $scope.tab === tab;
|
||||
};
|
||||
|
||||
function findTabByLabel(label) {
|
||||
var i = 0;
|
||||
while (label && i < $scope.tabs.length && $scope.tabs[i].label.toLowerCase() !== label.toLowerCase())i++;
|
||||
return i === $scope.tabs.length ? 0 : i;
|
||||
}
|
||||
|
||||
function findMessageById(id) {
|
||||
var i = 0;
|
||||
while (id && i < $scope.currentMessages.length && $scope.currentMessages[i].id !== id)i++;
|
||||
return i === $scope.currentMessages.length ? 0 : i;
|
||||
}
|
||||
|
||||
$scope.tab = findTabByLabel(0);
|
||||
$scope.currentMessages = $scope.tabs[$scope.tab].filter($scope.messages);
|
||||
$scope.mail = $scope.currentMessages[findMessageById(0)];
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
/**
|
||||
* @author v.lugovsky
|
||||
* created on 16.12.2015
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.pages.mail')
|
||||
.controller('MailTabCtrl', MailTabCtrl);
|
||||
|
||||
/** @ngInject */
|
||||
function MailTabCtrl($scope, $state, $stateParams, composeModal, mailMessages) {
|
||||
|
||||
$scope.selectTab = function (tab) {
|
||||
$state.go('mail.label',{
|
||||
label : tab
|
||||
})
|
||||
};
|
||||
|
||||
console.log($state);
|
||||
|
||||
$scope.showCompose = function(subject, to , text){
|
||||
composeModal.open({
|
||||
subject : subject,
|
||||
to: to,
|
||||
text: text
|
||||
})
|
||||
};
|
||||
|
||||
$scope.tabs = mailMessages.getTabs();
|
||||
$scope.currentTabLabel = $stateParams.label ? $stateParams.label : $scope.tabs[0].label;
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
/**
|
||||
* @author v.lugovsky
|
||||
* created on 16.12.2015
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.pages.mail')
|
||||
.directive('blurEmail', blurEmail);
|
||||
|
||||
/** @ngInject */
|
||||
function blurEmail() {
|
||||
return {
|
||||
restrict: 'EA',
|
||||
controller: 'MailCtrl',
|
||||
templateUrl: 'app/pages/mail/blurEmail.html'
|
||||
};
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
@ -1,156 +0,0 @@
|
|||
<div class="mail-container">
|
||||
<div class="row">
|
||||
<div class="mail-navigation-container">
|
||||
<div ng-repeat="t in tabs" class="mail-navigation {{tab == $index ? 'active' : ''}}" ng-click="selectTab($index)">
|
||||
{{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">
|
||||
Compose
|
||||
</button>
|
||||
</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>
|
||||
<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">
|
||||
<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>
|
||||
</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>
|
||||
<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' : ''}}"
|
||||
ng-click="selectMail(m)">
|
||||
<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>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message-container with-scroll">
|
||||
<div class="message" ng-show="mail">
|
||||
<div class="person-info row">
|
||||
<div class="col-lg-4 col-sm-4 col-xs-12 no-padding">
|
||||
<img ng-src="{{mail.name.split(' ')[0] | profilePicture}}" class="human-picture">
|
||||
|
||||
<div class="name">
|
||||
<h2>{{mail.name.split(' ')[0]}}</h2>
|
||||
|
||||
<h2>{{mail.name.split(' ')[1]}}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-4 col-xs-12 no-padding">
|
||||
<div class="contact-info phone-email">
|
||||
<div>
|
||||
<i class="ion-iphone"></i>
|
||||
<span class="phone">777-777-7777</span>
|
||||
</div>
|
||||
<div>
|
||||
<i class="ion-email"></i>
|
||||
<span class="email">{{mail.email}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-sm-4 col-xs-12 no-padding">
|
||||
<div class="contact-info position-address">
|
||||
<div>
|
||||
<span class="position">{{mail.position}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="address">12 Nezavisimosti st. Vilnius, Lithuania</span>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<span class="subject">{{mail.subject}} </span>
|
||||
<span class="date">• {{mail.date | date : 'h:mm a MMMM d '}}</span>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div ng-bind-html="mail.body" class="message-body">
|
||||
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="attachment" ng-show="mail.attachment">
|
||||
<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 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>
|
||||
|
||||
</div>
|
||||
<div ng-show="!mail">
|
||||
<h5 ng-class="text-center">Nothing to show</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
/**
|
||||
* @author a.demeshko
|
||||
* created on 28.12.2015
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.pages.mail')
|
||||
.controller('MailDetailCtrl', MailDetailCtrl);
|
||||
|
||||
/** @ngInject */
|
||||
function MailDetailCtrl($scope, $state,$stateParams, mailMessages) {
|
||||
$scope.mail = mailMessages.getMessageById($stateParams.id);
|
||||
$scope.back = function(){
|
||||
$state.go('mail.label', {
|
||||
label: 'inbox'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<div class="message-container">
|
||||
<div class="message">
|
||||
<div class="row">
|
||||
<button ng-click="back()" 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-md-12 no-padding">
|
||||
<img ng-src="{{mail.name.split(' ')[0] | profilePicture}}" class="human-picture">
|
||||
|
||||
<div class="name">
|
||||
<h2 class="name-h">{{mail.name.split(' ')[0]}}</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 class="col-lg-4 col-md-6 col-xs-12 no-padding">
|
||||
<div class="contact-info phone-email">
|
||||
<div>
|
||||
<i class="ion-iphone"></i>
|
||||
<span class="phone">777-777-7777</span>
|
||||
</div>
|
||||
<div>
|
||||
<i class="ion-email"></i>
|
||||
<span class="email">{{mail.email}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<div>
|
||||
<span class="address">12 Nezavisimosti st. Vilnius, Lithuania</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="message-details">
|
||||
<span class="subject">{{mail.subject}} </span>
|
||||
<span class="date">• {{mail.date | date : 'h:mm a MMMM d '}}</span>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div ng-bind-html="mail.body" class="message-body">
|
||||
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line" ng-show="mail.attachment"></div>
|
||||
<div class="answer-container">
|
||||
<button type="button" class="btn btn-with-icon" ng-click="showCompose(mail.subject,mail.email,'')"><i class="ion-reply"></i>Reply</button>
|
||||
<button type="button" class="btn btn-with-icon" ng-click="showCompose(mail.subject,'',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-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 ng-show="!mail">
|
||||
<h5 ng-class="text-center">Nothing to show</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
/**
|
||||
* @author a.demeshko
|
||||
* created on 28.12.2015
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.pages.mail')
|
||||
.controller('MailListCtrl', MailListCtrl);
|
||||
|
||||
/** @ngInject */
|
||||
function MailListCtrl($scope, $state, $stateParams, mailMessages) {
|
||||
|
||||
$scope.messages = mailMessages.getMessagesByLabel($stateParams.label);
|
||||
$scope.$parent.currentTabLabel = $stateParams.label;
|
||||
$scope.selectMail = function (mail) {
|
||||
$state.go('mail.detail', {
|
||||
id: mail.id,
|
||||
back: $stateParams.label
|
||||
})
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<div 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" id="inlineCheckbox01" value="option1">
|
||||
</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>
|
||||
</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="messages">
|
||||
<table>
|
||||
<tr ng-repeat="m in messages track by m.id | orderBy:'-date'"
|
||||
class="side-message-navigation-item little-human shineHover {{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 >
|
||||
<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>
|
||||
|
|
@ -1,7 +1,44 @@
|
|||
<div class="row">
|
||||
<div class="col-md-12 col-sm-12"
|
||||
ba-panel
|
||||
ba-panel-class="with-scroll">
|
||||
<blur-email></blur-email>
|
||||
<div class="row mail-row">
|
||||
<div class="col-md-12 col-sm-12">
|
||||
<blur-panel class-container="xmedium-panel mail-panel">
|
||||
<div class="mail-container">
|
||||
<div class="row letter-layout">
|
||||
<div class="mail-navigation-container">
|
||||
<div class="compose-button">
|
||||
<button type="button" class="btn compose-button" ng-click="showCompose('','','')">
|
||||
Compose
|
||||
</button>
|
||||
</div>
|
||||
<div ng-repeat="t in tabs" class="mail-navigation {{currentTabLabel == t.label ? 'active' : ''}}"
|
||||
ng-click="selectTab(t.label)">
|
||||
{{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="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>
|
||||
<ui-view></ui-view>
|
||||
</div>
|
||||
</div>
|
||||
</blur-panel>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -6,15 +6,29 @@
|
|||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.pages.mail', [])
|
||||
.config(routeConfig);
|
||||
.config(routeConfig);
|
||||
|
||||
/** @ngInject */
|
||||
function routeConfig($stateProvider) {
|
||||
function routeConfig($stateProvider,$urlRouterProvider) {
|
||||
$stateProvider
|
||||
.state('mail', {
|
||||
url: '/mail',
|
||||
templateUrl: 'app/pages/mail/mail.html'
|
||||
});
|
||||
.state('mail', {
|
||||
url: '/mail',
|
||||
abstract: true,
|
||||
templateUrl: 'app/pages/mail/mail.html',
|
||||
controller: "MailTabCtrl",
|
||||
controllerAs: "tabCtrl"
|
||||
}).state('mail.label', {
|
||||
url: '/:label',
|
||||
templateUrl: 'app/pages/mail/list/mailList.html',
|
||||
controller: "MailListCtrl",
|
||||
controllerAs: "listCtrl"
|
||||
}).state('mail.detail', {
|
||||
url: '/detail/:id',
|
||||
templateUrl: 'app/pages/mail/detail/mailDetail.html',
|
||||
controller: "MailDetailCtrl",
|
||||
controllerAs: "detailCtrl"
|
||||
});
|
||||
$urlRouterProvider.when('/mail','/mail/inbox');
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
<div class="compose-header">
|
||||
<span>
|
||||
New message
|
||||
</span>
|
||||
<span class="header-controls">
|
||||
<i class="ion-minus-round"></i>
|
||||
<i class="ion-arrow-resize"></i>
|
||||
<i ng-click="close()" class="ion-close-round"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div >
|
||||
<input type="text" class="form-control compose-input" placeholder="To" ng-model="to">
|
||||
<input type="text" class="form-control compose-input" placeholder="Subject" ng-model="subject">
|
||||
<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 name="htmlcontent" ta-target-toolbars='toolbarMain,toolbarFooter' ng-model="text"></text-angular>
|
||||
</div>
|
||||
</div>
|
||||
<div class="compose-footer">
|
||||
<button type="button" ng-click="close()" 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>
|
||||
<div class="footer-controls">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
/**
|
||||
* @author a.demeshko
|
||||
* created on 24/12/15
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.theme.components')
|
||||
.controller('composeBoxCtrl', composeBoxCtrl);
|
||||
|
||||
/** @ngInject */
|
||||
function composeBoxCtrl($scope, $uibModalInstance, subject, to, text) {
|
||||
|
||||
$scope.subject = subject;
|
||||
$scope.to = to;
|
||||
$scope.text = text;
|
||||
console.log(subject, to , text);
|
||||
$scope.close = function () {
|
||||
$uibModalInstance.dismiss('cancel');
|
||||
};
|
||||
}
|
||||
})();
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
'/icons': 'Icons',
|
||||
'/login': 'Authentication',
|
||||
'/maps': 'Maps',
|
||||
'/mail': 'Mail',
|
||||
'/mail': 'Mail Box',
|
||||
'/modals': 'Modals',
|
||||
'/profile': 'User Profile',
|
||||
'/tables': 'Tables',
|
||||
|
|
|
|||
|
|
@ -54,6 +54,10 @@
|
|||
{
|
||||
title: 'Form Layouts',
|
||||
root: '#/form-layouts'
|
||||
},
|
||||
{
|
||||
title: 'From Wizard',
|
||||
root: '#/form-wizard'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -114,7 +118,7 @@
|
|||
{
|
||||
title: 'Mail',
|
||||
icon: 'ion-ios-email-outline',
|
||||
root: '#/mail'
|
||||
root: '#/mail/inbox'
|
||||
},
|
||||
{
|
||||
title: 'Maps',
|
||||
|
|
|
|||
|
|
@ -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, '') : '';
|
||||
};
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
/**
|
||||
* @author a.demeshko
|
||||
* created on 12/24/15
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.theme')
|
||||
.service('composeModal', composeModal);
|
||||
|
||||
/** @ngInject */
|
||||
function composeModal($uibModal) {
|
||||
return {
|
||||
open : function(options){
|
||||
return $uibModal.open({
|
||||
animation: false,
|
||||
templateUrl: 'app/theme/components/composeBox/compose.html',
|
||||
controller: 'composeBoxCtrl',
|
||||
size: 'slim',
|
||||
resolve: {
|
||||
subject: function () {
|
||||
return options.subject;
|
||||
},
|
||||
to: function () {
|
||||
return options.to;
|
||||
},
|
||||
text: function () {
|
||||
return options.text;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
@ -0,0 +1,236 @@
|
|||
/**
|
||||
* @author a.demeshko
|
||||
* created on 12/29/15
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.theme')
|
||||
.service('mailMessages', mailMessages);
|
||||
|
||||
/** @ngInject */
|
||||
function mailMessages($sce) {
|
||||
var messages = [
|
||||
{
|
||||
"id": "4563faass",
|
||||
"name": "Nasta Linnie",
|
||||
"subject": "Great text",
|
||||
"date": "2015-08-28T07:57:09",
|
||||
"body": $sce.trustAsHtml("<p>Hey John, </p><p>Check out this cool text.</p>"),
|
||||
"pic": "img/Nasta.png",
|
||||
"email": "petraramsey@mail.com",
|
||||
"attachment": "poem.txt",
|
||||
"position": "Great Employee",
|
||||
"tag": "friend",
|
||||
"labels": ['inbox']
|
||||
},
|
||||
{
|
||||
"id": "4563fdfvd",
|
||||
"name": "Nasta Linnie",
|
||||
"subject": "Lores ipsum",
|
||||
"date": "2015-11-19T03:30:45",
|
||||
"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>" +
|
||||
"<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",
|
||||
"email": "petraramsey@mail.com",
|
||||
"position": "Great Employee",
|
||||
"tag": "study",
|
||||
"labels": ['inbox']
|
||||
},
|
||||
{
|
||||
"id": "4563zxcss",
|
||||
"name": "Nasta Linnie",
|
||||
"subject": "Lores ipsum",
|
||||
"date": "2015-10-19T03:30:45",
|
||||
"important": false,
|
||||
"body": $sce.trustAsHtml("<p>Hey Nasta, </p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>"),
|
||||
"pic": "img/Nasta.png",
|
||||
"email": "petraramsey@mail.com",
|
||||
"position": "Great Employee",
|
||||
"tag": "work",
|
||||
"labels": ['sent', 'important']
|
||||
},
|
||||
{
|
||||
"id": "8955sddf",
|
||||
"name": "Nick Cat",
|
||||
"subject": "New Design",
|
||||
"date": "2015-05-05T12:59:45",
|
||||
"body": $sce.trustAsHtml("<p>Hey John, Consectetur adipiscing elit</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/Nick.png",
|
||||
"email": "barlowshort@mail.com",
|
||||
"position": "Graphical designer",
|
||||
"attachment": "design.psd",
|
||||
"tag": "work",
|
||||
"labels": ['inbox']
|
||||
},
|
||||
{
|
||||
"id": "8955sdfcc",
|
||||
"name": "Nick Cat",
|
||||
"subject": "Gift card",
|
||||
"date": "2015-07-18T10:19:01",
|
||||
"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",
|
||||
"tag": "study",
|
||||
"labels": ['inbox']
|
||||
},
|
||||
{
|
||||
"id": "8955asewf",
|
||||
"name": "Nick Cat",
|
||||
"subject": "Some news",
|
||||
"date": "2015-09-23T03:04:10",
|
||||
"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",
|
||||
"tag": "work",
|
||||
"labels": ['inbox', 'important']
|
||||
},
|
||||
{
|
||||
"id": "2334uudsa",
|
||||
"name": "Kostya Danovsky",
|
||||
"subject": "Street Art",
|
||||
"date": "2015-11-22T10:05:09",
|
||||
"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>Lorem ipsum dolor sit amet! Nullam imperdiet justo a ipsum laoreet euismod.</p>" +
|
||||
"<br><p>Cras tincidunt fermentum lectus, quis scelerisque lorem volutpat sed." +
|
||||
"Sed quis orci sed nisl sagittis viverra id at mauris. Nam venenatis mi nibh. Sed fringilla mattis vehic</p>"),
|
||||
"pic": "img/Kostya.png",
|
||||
"email": "schwartzalford@mail.com",
|
||||
"position": "Technical Chef",
|
||||
"attachment": "file.doc",
|
||||
"tag": "family",
|
||||
"labels": ['inbox', 'important']
|
||||
},
|
||||
{
|
||||
"id": "2334aefvv",
|
||||
"name": "Kostya Danovsky",
|
||||
"subject": "New product",
|
||||
"date": "2015-06-22T06:26:10",
|
||||
"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>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." +
|
||||
"Cras tincidunt fermentum lectus, quis scelerisque lorem volutpat sed. Sed quis orci sed nisl sagittis viverra id at mauris. Nam venenatis mi nibh. Sed fringilla mattis vehic</p>"),
|
||||
"pic": "img/Kostya.png",
|
||||
"email": "schwartzalford@mail.com",
|
||||
"position": "Technical Chef",
|
||||
"tag": "family",
|
||||
"labels": ['inbox', 'important']
|
||||
},
|
||||
{
|
||||
"id": "2334cvdss",
|
||||
"name": "Kostya Danovsky",
|
||||
"subject": "Old product",
|
||||
"date": "2015-06-22T06:26:10",
|
||||
"body": $sce.trustAsHtml("<p>Hello John, </p>" +
|
||||
"<p>Consectetur adipiscing elit. Aliquam sodales sem in nibh pellentesque, ac dignissim mi dapibus.</p>" +
|
||||
"<br>"+
|
||||
"<p>Cras tincidunt fermentum lectus, quis scelerisque lorem volutpat sed. Sed quis orci sed nisl sagittis viverra id at mauris. Nam venenatis mi nibh. Sed fringilla mattis vehic</p>"),
|
||||
"pic": "img/Kostya.png",
|
||||
"email": "schwartzalford@mail.com",
|
||||
"position": "Technical Chef",
|
||||
"tag": "study",
|
||||
"labels": ['trash']
|
||||
},
|
||||
{
|
||||
"id": "8223xzxfn",
|
||||
"name": "Andrey Hrabouski",
|
||||
"subject": "Skype moji",
|
||||
"date": "2015-07-16T06:47:53",
|
||||
"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>"),
|
||||
"pic": "img/Andrey.png",
|
||||
"email": "lakeishaphillips@mail.com",
|
||||
"position": "Mobile Developer",
|
||||
"tag": 'family',
|
||||
"labels": ['trash']
|
||||
},
|
||||
{
|
||||
"id": "8223sdffn",
|
||||
"name": "Andrey Hrabouski",
|
||||
"subject": "My App",
|
||||
"date": "2015-06-20T07:05:02",
|
||||
"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>"),
|
||||
"pic": "img/Andrey.png",
|
||||
"email": "lakeishaphillips@mail.com",
|
||||
"position": "Mobile Developer",
|
||||
"tag": 'family',
|
||||
"labels": ['spam']
|
||||
},
|
||||
{
|
||||
"id": "9391xdsff",
|
||||
"name": "Vlad Lugovsky",
|
||||
"subject": "Cool",
|
||||
"date": "2015-03-31T11:52:58",
|
||||
"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>"),
|
||||
"pic": "img/Vlad.png",
|
||||
"email": "carlsongoodman@mail.com",
|
||||
"position": "Fullstack man",
|
||||
"tag": "study",
|
||||
"labels": ['draft']
|
||||
},
|
||||
{
|
||||
"id": "9391xdsff",
|
||||
"name": "Vlad Lugovsky",
|
||||
"subject": "What next",
|
||||
"date": "2015-03-31T11:52:58",
|
||||
"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>"),
|
||||
"pic": "img/Vlad.png",
|
||||
"email": "carlsongoodman@mail.com",
|
||||
"position": "Fullstack man",
|
||||
"tag": "study",
|
||||
"labels": ['sent']
|
||||
}
|
||||
].sort(function (a, b) {
|
||||
if (a.date > b.date) return 1;
|
||||
if (a.date < b.date) return -1;
|
||||
}).reverse();
|
||||
var tabs = [{
|
||||
label: 'inbox',
|
||||
name: 'Inbox',
|
||||
newMails: 7
|
||||
}, {
|
||||
label: 'sent',
|
||||
name: 'Sent Mail'
|
||||
}, {
|
||||
label: 'important',
|
||||
name: 'Important'
|
||||
}, {
|
||||
label: 'draft',
|
||||
name: 'Draft',
|
||||
newMails: 2
|
||||
}, {
|
||||
label: 'spam',
|
||||
name: 'Spam'
|
||||
}, {
|
||||
label: 'trash',
|
||||
name: 'Trash'
|
||||
}];
|
||||
|
||||
return{
|
||||
getTabs : function(){
|
||||
return tabs
|
||||
},
|
||||
getMessagesByLabel : function(label){
|
||||
return messages.filter(function(m){
|
||||
return m.labels.indexOf(label) != -1;
|
||||
});
|
||||
},
|
||||
getMessageById : function(id){
|
||||
return messages.filter(function(m){
|
||||
return m.id == id;
|
||||
})[0];
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
@ -11,6 +11,7 @@
|
|||
'angular-chartist',
|
||||
'angular.morris-chart',
|
||||
'ui.tree',
|
||||
'textAngular',
|
||||
'BlurAdmin.theme.components'
|
||||
]);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,95 +1,192 @@
|
|||
.letter-layout{
|
||||
margin-top: -15px;
|
||||
margin-right: -22px;
|
||||
}
|
||||
|
||||
.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;
|
||||
&.active {
|
||||
color: $dribble-color;
|
||||
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;
|
||||
}
|
||||
transition: transform .5s ease;
|
||||
&:hover{
|
||||
transform: skew(-10deg);
|
||||
&.active {
|
||||
background-color: $primary-light;
|
||||
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;
|
||||
padding: 0 15px;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
height: 650px;
|
||||
height: 550px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
.side-message-navigation{
|
||||
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;
|
||||
}
|
||||
|
||||
.side-message-navigation{
|
||||
width: 249px;
|
||||
}
|
||||
&.study {
|
||||
border-left:4px solid $google-color;
|
||||
}
|
||||
|
||||
.message-container{
|
||||
width: calc(100% - 250px);
|
||||
}
|
||||
&.family {
|
||||
border-left:4px solid $warning;
|
||||
}
|
||||
|
||||
.additional-info{
|
||||
display: none;
|
||||
&.date{
|
||||
display: table-cell;
|
||||
&.friend {
|
||||
border-left:4px solid $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
|
||||
.additional-info{
|
||||
&.date{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.side-message-navigation{
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.message-container{
|
||||
width: calc(100% - 180px);
|
||||
}
|
||||
.mail-body-part{
|
||||
text-overflow: ellipsis;
|
||||
height: 16px;
|
||||
overflow: hidden;
|
||||
margin-top: 3px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
|
||||
.side-message-navigation{
|
||||
width: 380px;
|
||||
}
|
||||
|
||||
.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% - 300px);
|
||||
padding: 15px 15px 10px 30px;
|
||||
box-shadow: -4px 0 7px -2px $input-border;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
|
||||
.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 +223,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;
|
||||
}
|
||||
.name-wrap{
|
||||
margin-left: 10px;
|
||||
}
|
||||
.date {
|
||||
text-align: right;
|
||||
span {
|
||||
vertical-align: super;
|
||||
padding-rigth: 5px;
|
||||
}
|
||||
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);
|
||||
animation: rotateReturnAnimation 0.5s;
|
||||
}
|
||||
}
|
||||
|
||||
&.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 +310,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 +326,6 @@
|
|||
h2 {
|
||||
margin-bottom: 0;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -265,7 +369,7 @@
|
|||
}
|
||||
.position {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.address {
|
||||
|
|
@ -280,6 +384,7 @@
|
|||
.subject {
|
||||
font-size: 20px;
|
||||
margin-right: 10px;
|
||||
font-weight: 100;
|
||||
}
|
||||
.control-icons {
|
||||
float: right;
|
||||
|
|
@ -289,11 +394,13 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.date{
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.message-body {
|
||||
margin: 20px 0;
|
||||
width: 85%;
|
||||
font-weight: 100;
|
||||
line-height: 18px;
|
||||
p {
|
||||
|
|
@ -302,31 +409,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;
|
||||
font-size: 14px;
|
||||
margin-left: 3px;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.file-link {
|
||||
font-size: 25px;
|
||||
border-bottom: solid 3px;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-line {
|
||||
margin: 15px;
|
||||
.tag{
|
||||
margin-left: 10px;
|
||||
.file-links {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -356,10 +454,168 @@
|
|||
}
|
||||
|
||||
.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 {
|
||||
width: 60%;
|
||||
float: left;
|
||||
.second-name {
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
|
||||
@keyframes rotateReturnAnimation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
50%{
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@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% - 200px);
|
||||
}
|
||||
|
||||
.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% - 175px);
|
||||
}
|
||||
|
||||
.mail-body-part{
|
||||
display: none;
|
||||
}
|
||||
.little-human .little-human-picture{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.messages-control .more-button {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 470px) {
|
||||
.little-human .little-human-picture{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mail-navigation-container{
|
||||
width: 155px
|
||||
}
|
||||
|
||||
.side-message-navigation {
|
||||
width: calc(100% - 155px);
|
||||
}
|
||||
|
||||
.message-container {
|
||||
width: calc(100% - 155px);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -380,6 +380,13 @@ label.custom-input-danger {
|
|||
color: $help-text;
|
||||
}
|
||||
|
||||
.help-block.error-block {
|
||||
display: none;
|
||||
.has-error &.basic-block {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin groupAddon($color) {
|
||||
background: $color;
|
||||
color: #ffffff;
|
||||
|
|
@ -484,4 +491,36 @@ label.custom-input-danger {
|
|||
}
|
||||
.progress-bar-danger {
|
||||
background-color: $danger;
|
||||
}
|
||||
|
||||
.progress-wizard {
|
||||
margin-top: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.wizard-pager {
|
||||
.previous {
|
||||
float: left;
|
||||
}
|
||||
.next {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-navigation-container {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
padding: 15px 0;
|
||||
.wizard-navigation {
|
||||
cursor: pointer;
|
||||
display: table-cell;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
font-weight: 100;
|
||||
font-size: 18px;
|
||||
&.active {
|
||||
color: $primary-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,79 @@
|
|||
.mail-container{
|
||||
div{
|
||||
|
||||
.compose-header {
|
||||
padding: 8px 3px 8px 10px;
|
||||
color: white;
|
||||
font-weight: 100;
|
||||
font-size: 13px;
|
||||
background-color: $github-color;
|
||||
}
|
||||
|
||||
.header-controls {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
i {
|
||||
margin-right: 5px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: $primary-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.compose-input {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.compose-footer {
|
||||
padding: 2px 4px;
|
||||
background-color: whitesmoke;
|
||||
.btn-send {
|
||||
background-color: $primary-light;
|
||||
color: white;
|
||||
padding: 2px 10px;
|
||||
margin: 3px;
|
||||
font-weight: 100;
|
||||
}
|
||||
.btn-default{
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-controls {
|
||||
float: right;
|
||||
margin: 6px;
|
||||
}
|
||||
|
||||
.compose-footer-icon {
|
||||
font-size: 18px;
|
||||
margin-right: 5px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: $primary-light;
|
||||
}
|
||||
}
|
||||
|
||||
.compose-container {
|
||||
background-color: whitesmoke;
|
||||
.ta-text.ta-editor {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.footer-control-first {
|
||||
border-right: 2px solid $help-text;
|
||||
display: inline-block;
|
||||
padding-right: 9px;
|
||||
}
|
||||
|
||||
.modal .modal-dialog.modal-slim {
|
||||
width: 398px;
|
||||
float: right;
|
||||
margin-top: 10%;
|
||||
}
|
||||
Loading…
Reference in New Issue