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