From 059b5a3762796951badb89ab623b3e5d386b87cb Mon Sep 17 00:00:00 2001
From: Tankred Hase
Date: Fri, 6 Sep 2013 18:34:36 +0200
Subject: [PATCH] created module,view architecture
---
src/css/message-list-desktop.scss | 9 +++
src/css/message-list.scss | 126 +++++++++++++++++++++++++++++
src/css/read.scss | 5 ++
src/css/style.scss | 129 +-----------------------------
src/js/app.js | 13 ++-
src/js/controller/message-list.js | 9 ++-
src/require-config.js | 6 +-
src/tpl/message-list-desktop.html | 7 ++
src/tpl/message-list.html | 2 +-
src/tpl/read.html | 8 ++
10 files changed, 178 insertions(+), 136 deletions(-)
create mode 100644 src/css/message-list-desktop.scss
create mode 100644 src/css/message-list.scss
create mode 100644 src/css/read.scss
create mode 100644 src/tpl/message-list-desktop.html
create mode 100644 src/tpl/read.html
diff --git a/src/css/message-list-desktop.scss b/src/css/message-list-desktop.scss
new file mode 100644
index 0000000..8d7a010
--- /dev/null
+++ b/src/css/message-list-desktop.scss
@@ -0,0 +1,9 @@
+/* message-list-desktop */
+
+.left-listing {
+ float: left;
+}
+
+.right-reader {
+ margin-left: 344px;
+}
\ No newline at end of file
diff --git a/src/css/message-list.scss b/src/css/message-list.scss
new file mode 100644
index 0000000..b18010b
--- /dev/null
+++ b/src/css/message-list.scss
@@ -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;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/css/read.scss b/src/css/read.scss
new file mode 100644
index 0000000..a495ac4
--- /dev/null
+++ b/src/css/read.scss
@@ -0,0 +1,5 @@
+/* read view */
+
+.read-message {
+ padding: 10px 15px;
+}
\ No newline at end of file
diff --git a/src/css/style.scss b/src/css/style.scss
index b041a25..f978a8a 100644
--- a/src/css/style.scss
+++ b/src/css/style.scss
@@ -20,129 +20,8 @@ body {
color: $default-text-color;
}
-/* folder name */
+/* import view modules */
-.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;
- }
- }
-}
+@import "message-list-desktop";
+@import "message-list";
+@import "read";
\ No newline at end of file
diff --git a/src/js/app.js b/src/js/app.js
index 19e1cef..5dffc0a 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -6,10 +6,15 @@ require(['angular', 'js/controller/message-list', 'angularRoute', 'angularTouch'
var app = angular.module('mail', ['ngRoute', 'ngTouch']);
app.config(function($routeProvider) {
- $routeProvider.when('/', {
- templateUrl: 'tpl/message-list.html',
- controller: MessageListCtrl
- });
+ $routeProvider
+ .when('/folders/:folder', {
+ templateUrl: 'tpl/message-list-desktop.html',
+ controller: MessageListCtrl
+ })
+ .when('/folders/:folder/messages/:messageId', {
+ templateUrl: 'tpl/read.html',
+ controller: MessageListCtrl
+ });
});
angular.element().ready(function() {
diff --git a/src/js/controller/message-list.js b/src/js/controller/message-list.js
index e57ff81..4a37906 100644
--- a/src/js/controller/message-list.js
+++ b/src/js/controller/message-list.js
@@ -4,8 +4,9 @@ define(function(require) {
var appController = require('js/app-controller'),
moment = require('moment');
- var MessageListCtrl = function($scope) {
- $scope.folderName = 'Inbox';
+ var MessageListCtrl = function($scope, $routeParams) {
+ $scope.folder = $routeParams.folder;
+ $scope.messageId = $routeParams.messageId;
$scope.select = function(email) {
$scope.selected = email;
@@ -14,7 +15,7 @@ define(function(require) {
if (true) {
createDummyMails(function(emails) {
$scope.emails = emails;
- $scope.$apply();
+ $scope.select($scope.emails[0]);
});
return;
}
@@ -59,6 +60,7 @@ define(function(require) {
function createDummyMails(callback) {
var Email = function(unread) {
+ this.uid = '1';
this.from = [{
name: 'Whiteout Support',
address: 'support@whiteout.io'
@@ -68,6 +70,7 @@ define(function(require) {
}]; // list of receivers
this.unread = unread;
this.displayDate = '23.08.13';
+ this.longDisplayDate = 'Wednesday, 23.08.2013 19:23';
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
};
diff --git a/src/require-config.js b/src/require-config.js
index 09d8aab..62727dd 100644
--- a/src/require-config.js
+++ b/src/require-config.js
@@ -15,9 +15,9 @@
cordova: 'cordova-2.5.0',
ImapClient: 'imap-client-browserified',
SmtpClient: 'smtp-client-browserified',
- angular: 'angular/angular.min',
- angularRoute: 'angular/angular-route.min',
- angularTouch: 'angular/angular-touch.min',
+ angular: 'angular/angular',
+ angularRoute: 'angular/angular-route',
+ angularTouch: 'angular/angular-touch',
moment: 'moment.min'
},
shim: {
diff --git a/src/tpl/message-list-desktop.html b/src/tpl/message-list-desktop.html
new file mode 100644
index 0000000..c2f456f
--- /dev/null
+++ b/src/tpl/message-list-desktop.html
@@ -0,0 +1,7 @@
+
+
+
\ No newline at end of file
diff --git a/src/tpl/message-list.html b/src/tpl/message-list.html
index c646063..ffcf966 100644
--- a/src/tpl/message-list.html
+++ b/src/tpl/message-list.html
@@ -5,7 +5,7 @@
- {{folderName}}
+ {{folder}}
diff --git a/src/tpl/read.html b/src/tpl/read.html
new file mode 100644
index 0000000..dd3da1d
--- /dev/null
+++ b/src/tpl/read.html
@@ -0,0 +1,8 @@
+
+
{{selected.subject}}
+
{{selected.longDisplayDate}}
+
From: {{selected.from[0].name}}
+
To: {{t.address}}
+
CC: {{t.address}}
+
{{selected.body}}
+
\ No newline at end of file