mirror of
https://github.com/moparisthebest/mail
synced 2024-12-24 16:28:49 -05:00
created module,view architecture
This commit is contained in:
Tankred Hase
parent
2776c6087a
commit
059b5a3762
9
src/css/message-list-desktop.scss
Normal file
9
src/css/message-list-desktop.scss
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
/* message-list-desktop */
|
||||||
|
|
||||||
|
.left-listing {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-reader {
|
||||||
|
margin-left: 344px;
|
||||||
|
}
|
||||||
126
src/css/message-list.scss
Normal file
126
src/css/message-list.scss
Normal file
@ -0,0 +1,126 @@
|
|||||||
|
/* folder name */
|
||||||
|
|
||||||
|
.folder-name {
|
||||||
|
position: absolute;
|
||||||
|
padding: 13px 15px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-btn {
|
||||||
|
float: left;
|
||||||
|
background-color: $lightgrey-color;
|
||||||
|
height: 1em;
|
||||||
|
width: 1.3em;
|
||||||
|
margin-right: 10px;
|
||||||
|
|
||||||
|
.blue-box {
|
||||||
|
float: inherit;
|
||||||
|
background-color: $blue-color;
|
||||||
|
height: 5px;
|
||||||
|
width: 100%;
|
||||||
|
box-shadow: 1px 1px 1px $lightgrey-box-shadow-color;
|
||||||
|
margin-bottom: 0.16em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* message list */
|
||||||
|
|
||||||
|
.message-list {
|
||||||
|
background-color: $lightgrey-color;
|
||||||
|
padding: 46px 15px;
|
||||||
|
width: 314px;
|
||||||
|
|
||||||
|
/* Landscape phone to portrait tablet */
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
width: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin marked {
|
||||||
|
background-color: $blue-color;
|
||||||
|
color: $lightgrey-color;
|
||||||
|
.sent-date, .from {
|
||||||
|
color: $lightgrey-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin read-bubble {
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 1.95em;
|
||||||
|
margin-left: 0.5em;
|
||||||
|
width: 0.9em;
|
||||||
|
height: 0.9em;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
@mixin read-bubble-grey {
|
||||||
|
background: $lightgrey-color;
|
||||||
|
box-shadow: inset 1px 1px 1px $lightgrey-box-shadow-color;
|
||||||
|
}
|
||||||
|
@mixin read-bubble-blue {
|
||||||
|
background: $blue-color;
|
||||||
|
box-shadow: inset 0.5px 1px 1px $blue-box-shadow-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unread {
|
||||||
|
@include read-bubble;
|
||||||
|
@include read-bubble-blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.read {
|
||||||
|
@include read-bubble;
|
||||||
|
@include read-bubble-grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
background-color: white;
|
||||||
|
margin: 8px 0;
|
||||||
|
padding: 10px 0;
|
||||||
|
height: 85px;
|
||||||
|
.from {
|
||||||
|
color: $blue-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $lightgrey-color;
|
||||||
|
}
|
||||||
|
&:hover.selected {
|
||||||
|
@include marked;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-left: 32px;
|
||||||
|
margin-right: 32px;
|
||||||
|
}
|
||||||
|
.from {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
.subject-line {
|
||||||
|
font-size: 0.875em;
|
||||||
|
margin-top: 0.5em;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
.subject {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.sent-date {
|
||||||
|
float: right;
|
||||||
|
color: #D8D8D8;
|
||||||
|
}
|
||||||
|
.text-preview {
|
||||||
|
font-size: 0.875em;
|
||||||
|
line-height: 1.2em;
|
||||||
|
height: 2.35em;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
li.selected {
|
||||||
|
@include marked;
|
||||||
|
|
||||||
|
.unread {
|
||||||
|
@include read-bubble-grey;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
5
src/css/read.scss
Normal file
5
src/css/read.scss
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
/* read view */
|
||||||
|
|
||||||
|
.read-message {
|
||||||
|
padding: 10px 15px;
|
||||||
|
}
|
||||||
@ -20,129 +20,8 @@ body {
|
|||||||
color: $default-text-color;
|
color: $default-text-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* folder name */
|
/* import view modules */
|
||||||
|
|
||||||
.folder-name {
|
@import "message-list-desktop";
|
||||||
position: absolute;
|
@import "message-list";
|
||||||
padding: 13px 15px;
|
@import "read";
|
||||||
|
|
||||||
p {
|
|
||||||
font-size: 1.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hamburger-btn {
|
|
||||||
float: left;
|
|
||||||
background-color: $lightgrey-color;
|
|
||||||
height: 1em;
|
|
||||||
width: 1.3em;
|
|
||||||
margin-right: 10px;
|
|
||||||
|
|
||||||
.blue-box {
|
|
||||||
float: inherit;
|
|
||||||
background-color: $blue-color;
|
|
||||||
height: 5px;
|
|
||||||
width: 100%;
|
|
||||||
box-shadow: 1px 1px 1px $lightgrey-box-shadow-color;
|
|
||||||
margin-bottom: 0.16em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* message list */
|
|
||||||
|
|
||||||
.message-list {
|
|
||||||
background-color: $lightgrey-color;
|
|
||||||
padding: 46px 15px;
|
|
||||||
width: 314px;
|
|
||||||
|
|
||||||
/* Landscape phone to portrait tablet */
|
|
||||||
@media (max-width: 767px) {
|
|
||||||
width: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin marked {
|
|
||||||
background-color: $blue-color;
|
|
||||||
color: $lightgrey-color;
|
|
||||||
.sent-date, .from {
|
|
||||||
color: $lightgrey-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin read-bubble {
|
|
||||||
position: absolute;
|
|
||||||
margin-top: 1.95em;
|
|
||||||
margin-left: 0.5em;
|
|
||||||
width: 0.9em;
|
|
||||||
height: 0.9em;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
@mixin read-bubble-grey {
|
|
||||||
background: $lightgrey-color;
|
|
||||||
box-shadow: inset 1px 1px 1px $lightgrey-box-shadow-color;
|
|
||||||
}
|
|
||||||
@mixin read-bubble-blue {
|
|
||||||
background: $blue-color;
|
|
||||||
box-shadow: inset 0.5px 1px 1px $blue-box-shadow-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.unread {
|
|
||||||
@include read-bubble;
|
|
||||||
@include read-bubble-blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.read {
|
|
||||||
@include read-bubble;
|
|
||||||
@include read-bubble-grey;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
background-color: white;
|
|
||||||
margin: 8px 0;
|
|
||||||
padding: 10px 0;
|
|
||||||
height: 85px;
|
|
||||||
.from {
|
|
||||||
color: $blue-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $lightgrey-color;
|
|
||||||
}
|
|
||||||
&:hover.selected {
|
|
||||||
@include marked;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-left: 32px;
|
|
||||||
margin-right: 32px;
|
|
||||||
}
|
|
||||||
.from {
|
|
||||||
font-size: 1.5em;
|
|
||||||
}
|
|
||||||
.subject-line {
|
|
||||||
font-size: 0.875em;
|
|
||||||
margin-top: 0.5em;
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
}
|
|
||||||
.subject {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.sent-date {
|
|
||||||
float: right;
|
|
||||||
color: #D8D8D8;
|
|
||||||
}
|
|
||||||
.text-preview {
|
|
||||||
font-size: 0.875em;
|
|
||||||
line-height: 1.2em;
|
|
||||||
height: 2.35em;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
li.selected {
|
|
||||||
@include marked;
|
|
||||||
|
|
||||||
.unread {
|
|
||||||
@include read-bubble-grey;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -6,10 +6,15 @@ require(['angular', 'js/controller/message-list', 'angularRoute', 'angularTouch'
|
|||||||
|
|
||||||
var app = angular.module('mail', ['ngRoute', 'ngTouch']);
|
var app = angular.module('mail', ['ngRoute', 'ngTouch']);
|
||||||
app.config(function($routeProvider) {
|
app.config(function($routeProvider) {
|
||||||
$routeProvider.when('/', {
|
$routeProvider
|
||||||
templateUrl: 'tpl/message-list.html',
|
.when('/folders/:folder', {
|
||||||
controller: MessageListCtrl
|
templateUrl: 'tpl/message-list-desktop.html',
|
||||||
});
|
controller: MessageListCtrl
|
||||||
|
})
|
||||||
|
.when('/folders/:folder/messages/:messageId', {
|
||||||
|
templateUrl: 'tpl/read.html',
|
||||||
|
controller: MessageListCtrl
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
angular.element().ready(function() {
|
angular.element().ready(function() {
|
||||||
|
|||||||
@ -4,8 +4,9 @@ define(function(require) {
|
|||||||
var appController = require('js/app-controller'),
|
var appController = require('js/app-controller'),
|
||||||
moment = require('moment');
|
moment = require('moment');
|
||||||
|
|
||||||
var MessageListCtrl = function($scope) {
|
var MessageListCtrl = function($scope, $routeParams) {
|
||||||
$scope.folderName = 'Inbox';
|
$scope.folder = $routeParams.folder;
|
||||||
|
$scope.messageId = $routeParams.messageId;
|
||||||
|
|
||||||
$scope.select = function(email) {
|
$scope.select = function(email) {
|
||||||
$scope.selected = email;
|
$scope.selected = email;
|
||||||
@ -14,7 +15,7 @@ define(function(require) {
|
|||||||
if (true) {
|
if (true) {
|
||||||
createDummyMails(function(emails) {
|
createDummyMails(function(emails) {
|
||||||
$scope.emails = emails;
|
$scope.emails = emails;
|
||||||
$scope.$apply();
|
$scope.select($scope.emails[0]);
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -59,6 +60,7 @@ define(function(require) {
|
|||||||
|
|
||||||
function createDummyMails(callback) {
|
function createDummyMails(callback) {
|
||||||
var Email = function(unread) {
|
var Email = function(unread) {
|
||||||
|
this.uid = '1';
|
||||||
this.from = [{
|
this.from = [{
|
||||||
name: 'Whiteout Support',
|
name: 'Whiteout Support',
|
||||||
address: 'support@whiteout.io'
|
address: 'support@whiteout.io'
|
||||||
@ -68,6 +70,7 @@ define(function(require) {
|
|||||||
}]; // list of receivers
|
}]; // list of receivers
|
||||||
this.unread = unread;
|
this.unread = unread;
|
||||||
this.displayDate = '23.08.13';
|
this.displayDate = '23.08.13';
|
||||||
|
this.longDisplayDate = 'Wednesday, 23.08.2013 19:23';
|
||||||
this.subject = "Welcome Max"; // Subject line
|
this.subject = "Welcome Max"; // Subject line
|
||||||
this.body = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy."; // plaintext body
|
this.body = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy."; // plaintext body
|
||||||
};
|
};
|
||||||
|
|||||||
@ -15,9 +15,9 @@
|
|||||||
cordova: 'cordova-2.5.0',
|
cordova: 'cordova-2.5.0',
|
||||||
ImapClient: 'imap-client-browserified',
|
ImapClient: 'imap-client-browserified',
|
||||||
SmtpClient: 'smtp-client-browserified',
|
SmtpClient: 'smtp-client-browserified',
|
||||||
angular: 'angular/angular.min',
|
angular: 'angular/angular',
|
||||||
angularRoute: 'angular/angular-route.min',
|
angularRoute: 'angular/angular-route',
|
||||||
angularTouch: 'angular/angular-touch.min',
|
angularTouch: 'angular/angular-touch',
|
||||||
moment: 'moment.min'
|
moment: 'moment.min'
|
||||||
},
|
},
|
||||||
shim: {
|
shim: {
|
||||||
|
|||||||
7
src/tpl/message-list-desktop.html
Normal file
7
src/tpl/message-list-desktop.html
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<div class="left-listing">
|
||||||
|
<div ng-include="'tpl/message-list.html'"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right-reader">
|
||||||
|
<div ng-include="'tpl/read.html'"></div>
|
||||||
|
</div>
|
||||||
@ -5,7 +5,7 @@
|
|||||||
<span class="blue-box blue-box-margin"></span>
|
<span class="blue-box blue-box-margin"></span>
|
||||||
<span class="blue-box blue-box-margin"></span>
|
<span class="blue-box blue-box-margin"></span>
|
||||||
</span>
|
</span>
|
||||||
{{folderName}}
|
{{folder}}
|
||||||
</p>
|
</p>
|
||||||
</div><!--/.folder-name-->
|
</div><!--/.folder-name-->
|
||||||
|
|
||||||
|
|||||||
8
src/tpl/read.html
Normal file
8
src/tpl/read.html
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
<div class="read-message">
|
||||||
|
<p>{{selected.subject}}</p>
|
||||||
|
<p>{{selected.longDisplayDate}}</p>
|
||||||
|
<p>From: {{selected.from[0].name}}</p>
|
||||||
|
<p>To: <span ng-repeat="t in selected.to">{{t.address}} </span></p>
|
||||||
|
<p>CC: <span ng-repeat="t in selected.cc">{{t.address}} </span></p>
|
||||||
|
<p>{{selected.body}}</p>
|
||||||
|
</div>
|
||||||
Loading…
Reference in New Issue
Block a user