amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-03-16 04:05:55 +00:00
Code Issues Projects Releases Wiki Activity

Initial integration of ngMaterial in Webmail

Browse Source
This commit is contained in:
Francis Lachapelle
2015-01-09 15:58:11 -05:00
parent ceca8775b5
commit 7a2bc51e77
8 changed files with 179 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
UI/Templates/MailerUI/UIxMailFolderTemplate.wox
View File

@@ -6,23 +6,23 @@
xmlns:rsrc="OGo:url"
xmlns:label="OGo:label"
xmlns:uix="OGo:uix">
<div id="messagesList">
<ul data-vs-repeat="56"
data-vs-scroll-parent="#messagesList">
<li ng-repeat="currentMessage in mailbox.$messages track by currentMessage.id"
data-ng-class="{unread: !currentMessage.isread}">
<a data-ui-sref="mail.account.mailbox.message({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: currentMessage.uid})"
data-ui-sref-active="_selected">
<div class="name">
{{currentMessage.$shortAddress('from')}}
<span class="right" data-ng-bind-html="currentMessage.relativedate"><!-- date --></span>
</div>
<div class="subject">{{currentMessage.subject}}</div>
<i class="icon-ion-refresh"
data-ng-hide="mailbox.$loadMessage(currentMessage.uid)"><!-- loading --></i>
</a>
</li>
</ul>
</div>
<div id="messageView" data-ui-view="message"><!-- message view --></div>
<md-content md-scroll-y="md-scroll-y" style="width: 250px" id="messagesList">
<md-list data-n0-vs-repeat="56"
data-n0-vs-scroll-parent="#messagesList">
<md-item ng-repeat="currentMessage in mailbox.$messages track by currentMessage.id"
data-ng-class="{unread: !currentMessage.isread}">
<a data-ui-sref="mail.account.mailbox.message({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: currentMessage.uid})"
data-ui-sref-active="_selected">
<div class="name">
{{currentMessage.$shortAddress('from')}}
<span class="right" data-ng-bind-html="currentMessage.relativedate"><!-- date --></span>
</div>
<div class="subject">{{currentMessage.subject}}</div>
<i class="icon-ion-refresh"
data-ng-hide="mailbox.$loadMessage(currentMessage.uid)"><!-- loading --></i>
</a>
</md-item>
</md-list>
</md-content>
<md-content flex="flex" data-ui-view="message"><!-- message view --></md-content>
</container>

90
UI/Templates/MailerUI/UIxMailMainFrame.wox
View File

@@ -30,6 +30,7 @@
</var:foreach>
</style>
<!--
<div id="signatureFlagMessage" style="display: none" class="dialog right">
</div>
@@ -49,12 +50,12 @@
<li><var:string label:value="Open in New Mail Window" /></li>
<li><var:string label:value="Copy Folder Location" /></li>
<li><var:string label:value="Subscribe..." /></li>
<li><!-- separator --></li>
<li> separator </li>
<li><var:string label:value="Mark Folder Read" /></li>
<li><var:string label:value="New Folder..." /></li>
<li><var:string label:value="Compact This Folder" /></li>
<li><var:string label:value="Export This Folder" /></li>
<li><!-- separator --></li>
<li> separator </li>
<li><var:string label:value="Search Messages..." /></li>
<li><var:string label:value="Sharing..." /></li>
</ul>
@@ -65,13 +66,13 @@
<li><var:string label:value="Open in New Mail Window" /></li>
<li><var:string label:value="Copy Folder Location" /></li>
<li><var:string label:value="Subscribe..." /></li>
<li><!-- separator --></li>
<li> separator </li>
<li><var:string label:value="Mark Folder Read" /></li>
<li><var:string label:value="New Subfolder..." /></li>
<li><var:string label:value="Compact This Folder" /></li>
<li><var:string label:value="Archive This Folder" /></li>
<li><var:string label:value="Empty Trash" /></li>
<li><!-- separator --></li>
<li> separator </li>
<li><var:string label:value="Search Messages..." /></li>
<li><var:string label:value="Sharing..." /></li>
</ul>
@@ -82,7 +83,7 @@
<li><var:string label:value="Open in New Mail Window" /></li>
<li><var:string label:value="Copy Folder Location" /></li>
<li><var:string label:value="Subscribe..." /></li>
<li><!-- separator --></li>
<li> separator </li>
<li><var:string label:value="Mark Folder Read" /></li>
<li><var:string label:value="New Subfolder..." /></li>
<li><var:string label:value="Rename Folder..." /></li>
@@ -90,7 +91,7 @@
<li><var:string label:value="Archive This Folder" /></li>
<li><var:string label:value="Delete Folder" /></li>
<li><var:string label:value="Use This Folder For" /></li>
<li><!-- separator --></li>
<li> separator </li>
<li><var:string label:value="Search Messages..." /></li>
<li><var:string label:value="Sharing..." /></li>
</ul>
@@ -123,17 +124,17 @@
<div class="f-dropdown" id="messageListMenu">
<ul>
<li><var:string label:value="Open Message In New Window"/></li>
<li><!-- separator --></li>
<li> separator </li>
<li><var:string label:value="Reply to Sender Only"/></li>
<li><var:string label:value="Reply to All"/></li>
<li><var:string label:value="Forward"/></li>
<li><var:string label:value="Edit As New..."/></li>
<li><!-- separator --></li>
<li> separator </li>
<li><var:string label:value="Move To"/></li>
<li><var:string label:value="Copy To"/></li>
<li><var:string label:value="Label"/></li>
<li><var:string label:value="Mark"/></li>
<li><!-- separator --></li>
<li> separator </li>
<li><var:string label:value="Save As..."/></li>
<li><var:string label:value="View Message Source"/></li>
<li><var:string label:value="Print Preview"/></li>
@@ -145,12 +146,12 @@
<div class="f-dropdown" id="messagesListMenu">
<ul>
<li><var:string label:value="Forward"/></li>
<li><!-- separator --></li>
<li> separator </li>
<li><var:string label:value="Move To"/></li>
<li><var:string label:value="Copy To"/></li>
<li><var:string label:value="Label"/></li>
<li><var:string label:value="Mark"/></li>
<li><!-- separator --></li>
<li> separator </li>
<li><var:string label:value="Save As..."/></li>
<li><var:string label:value="Print Preview"/></li>
<li><var:string label:value="Print..."/></li>
@@ -166,10 +167,10 @@
<li><var:string label:value="Edit As New..."/></li>
<li><var:string label:value="Move To"/></li>
<li><var:string label:value="Copy To"/></li>
<li><!-- separator --></li>
<li> separator </li>
<li><var:string label:value="Label"/></li>
<li><var:string label:value="Mark"/></li>
<li><!-- separator --></li>
<li> separator </li>
<li><var:string label:value="Save As..."/></li>
<li><var:string label:value="View Message Source"/></li>
<li><var:string label:value="Print Preview"/></li>
@@ -181,7 +182,7 @@
<div class="f-dropdown" id="label-menu">
<ul id="" class="choiceMenu">
<li><var:string label:value="None" /></li>
<li><!-- separator --></li>
<li> separator </li>
<var:foreach list="availableLabels" item="currentLabel">
<li var:class="currentLabel.name.asCSSIdentifier" var:data-name="currentLabel.name"> <var:string value="currentLabel.label"/></li>
</var:foreach>
@@ -194,7 +195,7 @@
<li><var:string label:value="Thread As Read" /></li>
<li><var:string label:value="As Read By Date..." /></li>
<li><var:string label:value="All Read" /></li>
<li><!-- separator --></li>
<li> separator </li>
<li><var:string label:value="Flag" /></li>
</ul>
</div>
@@ -211,8 +212,9 @@
<li id="save_image"><var:string label:value="Save Image"/></li>
</ul>
</div>
-->
<div data-ui-view="mailboxes"><!-- mailboxes list --></div>
<div ui-view="mailboxes" layout="row" layout-fill="layout-fill"><!-- mailboxes list --></div>
<script type="text/ng-template" id="mailboxes.html">
@@ -237,25 +239,51 @@
</ul>
</div>
<div id="mailboxesList" class="folders-list">
<div class="newItemsToolbar">
<a class="button tiny radius split" data-ui-sref="mail.newMessage()"><var:string label:value="Compose"/><span data-dropdown-toggle="#draftsDrop"></span></a><br/>
</div>
<div class="scrollView">
<ul data-ng-repeat="account in accounts track by account.id">
<li>
<label>{{account.name}}
<button class="icon" label:title="New Folder..."
data-ng-click="newFolder(account)"><i class="icon-plus"><!-- new --></i></button></label>
</li>
<md-sidenav class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="$media('gt-md')" layout="column">
<div style="text-align: center; position: absolute; top: 0; width: 100%; z-index: 100;">[ZONE DE NAVIGATION]</div>
<md-toolbar class="md-tall" layout-align="end start">
<h2 class="md-toolbar-tools md-toolbar-tools-bottom">
<span class="md-flex">user@domain</span>
</h2>
</md-toolbar>
<md-content md-scroll-y="md-scroll-y" class="md-padding" ng-controller="LeftCtrl">
<md-button ng-click="close()" class="md-primary" hide-gt-md="hide-gt-md">Close</md-button>
<md-list ng-repeat="account in accounts track by account.id">
<md-item>
<md-item-content>
<div class="md-tile-content">
<md-button><h3>{{account.name}}</h3></md-button>
</div>
</md-item-content>
</md-item>
<sg-folder-tree data-ng-repeat="folder in account.$mailboxes track by folder.id"
data-sg-root="account"
data-sg-folder="folder"
data-sg-select-folder="setCurrentFolder"><!-- tree --></sg-folder-tree>
</ul>
</div>
</div>
<div data-ui-view="mailbox"><!-- messages list --></div>
</md-list>
</md-content>
</md-sidenav>
<!--<div class="newItemsToolbar">
<a class="button tiny radius split" data-ui-sref="mail.newMessage()"><var:string label:value="Compose"/><span data-dropdown-toggle="#draftsDrop"></span></a><br/>
</div>-->
<main layout="column" layout-fill="layout-fill">
<md-toolbar layout="row" layout-align="space-between start" class="md-tall md-warn">
<div class="md-toolbar-tools">
<span flex="flex">
<md-button ng-click="toggleLeft()" class="md-primary" hide-gt-md="hide-gt-md"><span class="icon-ic_menu_24px"></span></md-button>
<div class="display-1" style="font-size: 2em; font-weight: 300">
[[Calendar]]
</div>
</span>
<span class="sd-toolbar">
<span>search</span>
</span>
</div>
</md-toolbar>
<md-content layout="row" layout-md="column" layout-sm="column" layout-fill="layout-fill" flex="flex" class="md-padding" ui-view="mailbox"><!-- messages list --></md-content>
</main>
</script>
<script type="text/ng-template" id="mailbox.html">

28
UI/Templates/UIxPageFrame.wox
View File

@@ -20,13 +20,11 @@
<meta name="author" content="SKYRIX Software AG/Inverse inc." />
<meta name="robots" content="stop" />
<meta name="build" var:content="buildDate" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="mailto:support@inverse.ca" rev="made" />
<link rel="shortcut icon" var:href="siteFavicon" type="image/x-icon" />
<link type="text/css" rel="stylesheet" rsrc:href="css/app.css" />
<link type="text/css" rel="stylesheet" rsrc:href="css/icons.css"/>
<var:if condition="hasProductSpecificCSS"
><link type="text/css" rel="stylesheet" var:href="productCSSURL"
/></var:if>
<link type="text/css" rel="stylesheet" rsrc:href="css/angular-material.css"/>
<var:if condition="hasPageSpecificCSS"
><link type="text/css" rel="stylesheet" var:href="pageCSSURL"
/></var:if>
@@ -40,7 +38,7 @@
</var:if-ie>
</head>
<body var:data-ng-app="angularModule" var:class="bodyClasses"
<body style="overflow: hidden" var:data-ng-app="angularModule" var:class="bodyClasses"
><var:if condition="isCompatibleBrowser"
><var:if condition="singleWindowModeEnabled"
><div id="popupFrame" style="display: none;"><iframe width="100%" height="100%" src="/SOGo/loading"><!-- space --></iframe></div></var:if
@@ -57,8 +55,8 @@
></var:if
><var:if condition="isPopup" const:negate="YES"
><var:if condition="isUIxDebugEnabled"
><div id="logConsole"><!-- space --></div></var:if>
<nav class="top-bar">
><!-- space --></var:if>
<!-- <nav class="top-bar">
<section class="top-bar-section">
<var:if condition="canLogoff">
<ul class="right">
@@ -70,7 +68,7 @@
<li><a href="?theme=mobile"><var:string label:value="Mobile Version"/></a></li>
</ul>
</li>
<li class="divider hide-for-small"><!-- divider --></li>
<li class="divider hide-for-small"> divider </li>
<li>
<a id="logoff" var:href="logoffPath"><var:string label:value="Disconnect"/></a>
</li>
@@ -113,11 +111,15 @@
</var:if>
</ul>
</section>
</nav>
</nav>-->
</var:if>
<!-- <var:component className="UIxToolbar" var:toolbar="toolbar"/>-->
<div id="pageContent"><var:component-content/></div>
<div class="container" layout="row" layout-fill="layout-fill">
<var:component-content/>
</div>
<md-toolbar class="" layout-align="center center" style="background-color:#212121; position: fixed; bottom: 0px; left: 0px; width: 100%; z-index: 100">
<span>[BOTTOM BAR]</span>
</md-toolbar>
<script type="text/javascript">
var ApplicationBaseURL = '<var:string value="modulePath"/>';
@@ -145,14 +147,18 @@
<var:string value="productLocalizableStrings" const:escapeHTML="NO"/>
</script>
<script type="text/javascript" rsrc:src="js/vendor/underscore-min.js"><!-- space --></script>
<script type="text/javascript" rsrc:src="js/vendor/hammer.js"><!-- space --></script>
<script type="text/javascript" rsrc:src="js/vendor/angular.js"><!-- space --></script>
<script type="text/javascript" rsrc:src="js/vendor/angular-animate.js"><!-- space --></script>
<script type="text/javascript" rsrc:src="js/vendor/angular-sanitize.js"><!-- space --></script>
<script type="text/javascript" rsrc:src="js/vendor/angular-aria.js"><!-- space --></script>
<script type="text/javascript" rsrc:src="js/vendor/angular-material.js"><!-- space --></script>
<script type="text/javascript" rsrc:src="js/vendor/angular-ui-router.js"><!-- space --></script>
<script type="text/javascript" rsrc:src="js/vendor/mm-foundation-tpls.js"><!-- space --></script>
<script type="text/javascript" rsrc:src="js/vendor/angular-recursion.js"><!-- space --></script>
<script type="text/javascript" rsrc:src="js/vendor/angular-vs-repeat.js"><!-- space --></script>
<script type="text/javascript" rsrc:src="js/Common/utils.js"><!-- space --></script>
<script type="text/javascript" rsrc:src="js/Common/ui.js"><!-- space --></script>
<script type="text/javascript" rsrc:src="js/Common/ui-common.js"><!-- space --></script>
<script type="text/javascript" rsrc:src="js/Common/ui-desktop.js"><!-- space --></script>
<var:if condition="hasProductSpecificJavaScript"><script type="text/javascript"

28
UI/WebServerResources/Gruntfile.js
View File

@@ -47,10 +47,13 @@ module.exports = function(grunt) {
'<%= src %>/angular/angular{,.min}.js{,.map}',
'<%= src %>/angular-animate/angular-animate{,.min}.js{,.map}',
'<%= src %>/angular-sanitize/angular-sanitize{,.min}.js{,.map}',
'<%= src %>/angular-aria/angular-aria{,.min}.js{,.map}',
'<%= src %>/angular-material/angular-material{,.min}.js{,.map}',
'<%= src %>/angular-ui-router/release/angular-ui-router{,.min}.js',
'<%= src %>/angular-recursion/angular-recursion{,.min}.js',
'<%= src %>/angular-vs-repeat/src/angular-vs-repeat{,.min}.js',
'<%= src %>/angular-file-upload/angular-file-upload{,.min}.js{,map}',
'<%= src %>/hammerjs/hammer{,.min}.js{,.map}',
'<%= src %>/ng-tags-input/ng-tags-input{,.min}.js',
'<%= src %>/angular-foundation/mm-foundation-tpls{,.min}.js',
'<%= src %>/foundation/js/foundation{,.min}.js',
@@ -80,17 +83,20 @@ module.exports = function(grunt) {
grunt.log.ok("copy " + src + " => " + dest);
}
grunt.log.subhead('Copying CSS files');
var css = grunt.file.expand(
grunt.template.process('<%= src %>/ng-tags-input/ng-tags-input*.css',
{data: options})
);
for (var i = 0; i < css.length; i++) {
var src = css[i];
var paths = src.split('/');
var dest = options.css_dest + paths[paths.length-1];
grunt.file.copy(src, dest);
grunt.log.ok("copy " + src + " => " + dest);
}
var css = [
'<%= src %>/ng-tags-input/ng-tags-input*.css',
'<%= src %>/angular-material/angular-material*.css'
];
for (var j = 0; j < css.length; j++) {
var files = grunt.file.expand(grunt.template.process(css[j], {data: options}))
for (var i = 0; i < files.length; i++) {
var src = files[i];
var paths = src.split('/');
var dest = options.css_dest + paths[paths.length-1];
grunt.file.copy(src, dest);
grunt.log.ok("copy " + src + " => " + dest);
}
}
});
grunt.task.registerTask('build', ['static', 'sass']);
grunt.task.registerTask('default', ['build','watch']);

5
UI/WebServerResources/bower.json
View File

@@ -2,13 +2,14 @@
"name": "sogo-web",
"private": true,
"devDependencies": {
"angular": "~1.3",
"angular-animate": "~1.3",
"angular": "1.3.x",
"angular-animate": "1.3.x",
"angular-ui-router": "~0.2",
"angular-foundation": ">0.3",
"angular-recursion": "~1",
"angular-vs-repeat": "~1",
"angular-file-upload": "~1",
"angular-material": "~0.7.0",
"ng-tags-input": "~2",
"foundation": ">5.3",
"ionic": "1.0.0-beta.14",

18
UI/WebServerResources/js/Common/ui-desktop.js
View File

@@ -191,7 +191,7 @@
selectFolder: '=sgSelectFolder'
},
template:
'<li>' +
'<md-item>' +
' <span class="folder-container">' +
' <span class="folder-content">' +
' <i class="icon icon-ion-folder"></i>' +
@@ -209,7 +209,7 @@
' </span>' +
' </span>' +
' </span>' +
'</li>' +
'</md-item>' +
'<sg-folder-tree ng-repeat="child in folder.children track by child.path"' +
' data-sg-root="root"' +
' data-sg-folder="child"' +
@@ -240,15 +240,15 @@
var list, items;
if (!scope.mode.selected) {
list = iElement.parent();
while (list[0].tagName != 'UL') {
while (list[0].tagName != 'MD-LIST') {
list = list.parent();
}
items = list.find('li');
items = list.find('md-item');
// Highlight element as "loading"
items.removeClass('_selected');
items.removeClass('_loading');
angular.element(iElement.find('li')[0]).addClass('_loading');
angular.element(iElement.find('md-item')[0]).addClass('_loading');
// Call external function
scope.selectFolder(scope.root, scope.folder);
@@ -269,14 +269,14 @@
items;
scope.mode.selected = true;
while (list[0].tagName != 'UL') {
while (list[0].tagName != 'MD-LIST') {
list = list.parent();
}
items = list.find('li');
items = list.find('md-item');
// Hightlight element as "selected"
angular.element(iElement.find('li')[0]).removeClass('_loading');
angular.element(iElement.find('li')[0]).addClass('_selected');
angular.element(iElement.find('md-item')[0]).removeClass('_loading');
angular.element(iElement.find('md-item')[0]).addClass('_selected');
// Show options button
angular.forEach(items, function(element) {

48
UI/WebServerResources/js/Common/ui.js Normal file
View File

@@ -0,0 +1,48 @@
/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
/* Angular JavaScript for common UI services */
// TODO: Normalize the namespace and prefixes
/**
* The common SOGo UI, app module
*
* @type {angular.Module}
*/
(function() {
'use strict';
angular.module('SOGo.UI', ['ngMaterial' ])
.controller('toggleCtrl', ['$scope', '$timeout', '$mdSidenav', '$log', function($scope, $timeout, $mdSidenav, $log) {
$scope.toggleLeft = function() {
$mdSidenav('left').toggle()
.then(function(){
$log.debug("toggle left is done");
});
};
$scope.toggleRight = function() {
$mdSidenav('right').toggle()
.then(function(){
$log.debug("toggle RIGHT is done");
});
};
}])
.controller('LeftCtrl', function($scope, $timeout, $mdSidenav, $log) {
$scope.close = function() {
$mdSidenav('left').close()
.then(function(){
$log.debug("close LEFT is done");
});
};
})
.controller('RightCtrl', function($scope, $timeout, $mdSidenav, $log) {
$scope.close = function() {
$mdSidenav('right').close()
.then(function(){
$log.debug("close RIGHT is done");
});
};
});
})();

10
UI/WebServerResources/js/MailerUI.js
View File

@@ -7,7 +7,7 @@
angular.module('SOGo.Common', []);
angular.module('SOGo.ContactsUI', []);
angular.module('SOGo.MailerUI', ['ngSanitize', 'ui.router', 'mm.foundation', 'vs-repeat', 'ck', 'ngTagsInput', 'angularFileUpload', 'SOGo.Common', 'SOGo.UICommon', 'SOGo.UIDesktop', 'SOGo.ContactsUI'])
angular.module('SOGo.MailerUI', ['ngSanitize', 'ui.router', 'mm.foundation', 'vs-repeat', 'ck', 'ngTagsInput', 'angularFileUpload', 'SOGo.Common', 'SOGo.UI', 'SOGo.UICommon', 'SOGo.UIDesktop', 'SOGo.ContactsUI'])
.constant('sgSettings', {
baseURL: ApplicationBaseURL,
@@ -62,8 +62,12 @@
})
.state('mail.account.mailbox', {
url: '/:mailboxId',
templateUrl: 'mailbox.html',
controller: 'MailboxCtrl',
views: {
'mailbox@mail': {
templateUrl: 'mailbox.html',
controller: 'MailboxCtrl'
}
},
resolve: {
stateMailbox: ['$stateParams', 'stateAccount', 'decodeUriFilter', function($stateParams, stateAccount, decodeUriFilter) {
var mailboxId = decodeUriFilter($stateParams.mailboxId);