amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-03-11 01:41:22 +00:00
Code Issues Projects Releases Wiki Activity

Replace ngTagsInput by md-chips + md-autocomplete

Browse Source
This commit is contained in:
Francis Lachapelle
2015-04-18 01:19:35 -04:00
parent 14597f8f16
commit 0924b5154e
7 changed files with 46 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
UI/Templates/MailerUI/UIxMailEditor.wox
View File

@@ -26,26 +26,45 @@
<label class="pseudo-input-label">
<var:string label:value="To"/>
</label>
<tags-input type="text" name="to"
ng-model="message.editable.to"
label:placeholder="Add a recipient"
ng-focus="angular.element().triggerHandler('focus')">
<auto-complete source="userFilter($query)"><!-- to --></auto-complete>
</tags-input>
<md-chips ng-model="message.editable.to">
<md-autocomplete
md-selected-item="autocomplete.to.selected"
md-search-text="autocomplete.to.searchText"
md-items="user in userFilter(autocomplete.to.searchText)"
label:placeholder="Add a recipient">
<span md-highlight-text="autocomplete.to.searchText">{{user}}</span>
</md-autocomplete>
</md-chips>
</div>
<div class="pseudo-input-container">
<label class="pseudo-input-label">
<var:string label:value="Cc"/>
</label>
<div class="pseudo-input-inputLike">
<tags-input type="text" name="cc"
ng-model="message.editable.cc"
label:placeholder="Add a recipient">
<auto-complete source="userFilter($query)"><!-- to --></auto-complete>
</tags-input>
</div>
<md-chips ng-model="message.editable.cc">
<md-autocomplete
md-selected-item="autocomplete.cc.selected"
md-search-text="autocomplete.cc.searchText"
md-items="user in userFilter(autocomplete.cc.searchText)"
label:placeholder="Add a recipient">
<span md-highlight-text="autocomplete.cc.searchText">{{user}}</span>
</md-autocomplete>
</md-chips>
</div>
<div class="pseudo-input-container">
<label class="pseudo-input-label">
<var:string label:value="Bcc"/>
</label>
<md-chips ng-model="message.editable.bcc">
<md-autocomplete
md-selected-item="autocomplete.bcc.selected"
md-search-text="autocomplete.bcc.searchText"
md-items="user in userFilter(autocomplete.bcc.searchText)"
label:placeholder="Add a recipient">
<span md-highlight-text="autocomplete.bcc.searchText">{{user}}</span>
</md-autocomplete>
</md-chips>
</div>
<md-input-container>

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

@@ -9,8 +9,7 @@
title="title"
const:userDefaultsKeys="SOGoMailMessageCheck,SOGoRefreshViewCheck,SOGoMailSortByThreads,SOGoMailListViewColumnsOrder,SOGoMailDisplayRemoteInlineImages,SOGoMailComposeMessageType,SOGoMailReplyPlacement"
const:userSettingsKeys="Mail"
const:jsFiles="Common/resource.js, Common/user-model.js, Common/acl-model.js, Contacts/card-model.js, Contacts/addressbook-model.js, Mailer/message-model.js, Mailer/mailbox-model.js, Mailer/account-model.js, vendor/ckeditor/ckeditor.js, vendor/ckeditor/ck.js, vendor/ng-tags-input.js, vendor/angular-file-upload.js">
<!--const:cssFiles="ng-tags-input.css">-->
const:jsFiles="Common/resource.js, Common/user-model.js, Common/acl-model.js, Contacts/card-model.js, Contacts/addressbook-model.js, Mailer/message-model.js, Mailer/mailbox-model.js, Mailer/account-model.js, vendor/ckeditor/ckeditor.js, vendor/ckeditor/ck.js, vendor/angular-file-upload.js">
<script type="text/javascript">
var mailAccounts =<var:string value="mailAccounts" const:escapeHTML="NO" />;
var userNames =<var:string value="userNames" const:escapeHTML="NO" />;

5
UI/WebServerResources/Gruntfile.js
View File

@@ -108,7 +108,6 @@ module.exports = function(grunt) {
'<%= 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 %>/ng-tags-input/ng-tags-input{,.min}.js',
'<%= src %>/underscore/underscore-min.{js,map}'
];
for (var j = 0; j < js.length; j++) {
@@ -123,7 +122,6 @@ module.exports = function(grunt) {
}
grunt.log.subhead('Copying font files');
var fonts = [
//'<%= src %>/ionic/release/fonts/ionicons.*',
'<%= src %>/material-design-iconic-font/fonts/Material-Design-Iconic-Font.*'
];
for (var j = 0; j < fonts.length; j++) {
@@ -136,9 +134,9 @@ module.exports = function(grunt) {
grunt.log.ok("copy " + src + " => " + dest);
}
}
/*
grunt.log.subhead('Copying CSS files');
var css = [
//'<%= src %>/ng-tags-input/ng-tags-input*.css' // This is no longer needed, ng-tags css is integrated to scss
];
for (var j = 0; j < css.length; j++) {
var files = grunt.file.expand(grunt.template.process(css[j], {data: options}));
@@ -150,6 +148,7 @@ module.exports = function(grunt) {
grunt.log.ok("copy " + src + " => " + dest);
}
}
*/
});
grunt.task.registerTask('build', ['static', 'sass', 'postcss:dist']);
grunt.task.registerTask('default', ['build', 'watch']);

1
UI/WebServerResources/bower.json
View File

@@ -11,7 +11,6 @@
"angular-file-upload": "latest",
"angular-material": "master",
"material-design-iconic-font": "latest",
"ng-tags-input": "latest",
"compass-mixins": "latest",
"underscore": "latest",
"breakpoint-slicer": "~1.3.6"

17
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', 'vs-repeat', 'ck', 'ngTagsInput', 'angularFileUpload', 'SOGo.Common', 'SOGo.UI', 'SOGo.UIDesktop', 'SOGo.ContactsUI', 'ngAnimate'])
angular.module('SOGo.MailerUI', ['ngSanitize', 'ui.router', 'vs-repeat', 'ck', 'angularFileUpload', 'SOGo.Common', 'SOGo.UI', 'SOGo.UIDesktop', 'SOGo.ContactsUI', 'ngAnimate'])
.constant('sgSettings', {
baseURL: ApplicationBaseURL,
@@ -20,7 +20,7 @@
}
})
.config(['$stateProvider', '$urlRouterProvider', 'tagsInputConfigProvider', function($stateProvider, $urlRouterProvider, tagsInputConfigProvider) {
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('mail', {
url: '/Mail',
@@ -159,11 +159,11 @@
$urlRouterProvider.otherwise('/Mail');
// Set default configuration for tags input
tagsInputConfigProvider.setDefaults('tagsInput', {
addOnComma: false,
replaceSpacesWithDashes: false,
allowedTagsPattern: /([\w\!\#$\%\&\'\*\+\-\/\=\?\^\`{\|\}\~]+\.)*[\w\!\#$\%\&\'\*\+\-\/\=\?\^\`{\|\}\~]+@((((([a-z0-9]{1}[a-z0-9\-]{0,62}[a-z0-9]{1})|[a-z])\.)+[a-z]{2,})|(\d{1,3}\.){3}\d{1,3}(\:\d{1,5})?)/i
});
// tagsInputConfigProvider.setDefaults('tagsInput', {
// addOnComma: false,
// replaceSpacesWithDashes: false,
// allowedTagsPattern: /([\w\!\#$\%\&\'\*\+\-\/\=\?\^\`{\|\}\~]+\.)*[\w\!\#$\%\&\'\*\+\-\/\=\?\^\`{\|\}\~]+@((((([a-z0-9]{1}[a-z0-9\-]{0,62}[a-z0-9]{1})|[a-z])\.)+[a-z]{2,})|(\d{1,3}\.){3}\d{1,3}(\:\d{1,5})?)/i
// });
}])
.run(function($rootScope) {
@@ -258,6 +258,7 @@
}])
.controller('MessageEditorCtrl', ['$scope', '$rootScope', '$stateParams', '$state', '$q', 'FileUploader', 'stateAccounts', 'stateMessage', '$timeout', 'encodeUriFilter', 'sgFocus', 'sgDialog', 'sgAccount', 'sgMailbox', 'sgAddressBook', function($scope, $rootScope, $stateParams, $state, $q, FileUploader, stateAccounts, stateMessage, $timeout, encodeUriFilter, focus, Dialog, Account, Mailbox, AddressBook) {
$scope.autocomplete = {to: {}, cc: {}, bcc: {}};
if ($stateParams.actionName == 'reply') {
stateMessage.$reply().then(function(msgObject) {
$scope.message = msgObject;
@@ -294,7 +295,7 @@
$scope.userFilter = function($query) {
var deferred = $q.defer();
AddressBook.$filterAll($query).then(function(results) {
deferred.resolve(_.invoke(results, '$shortFormat'));
deferred.resolve(_.invoke(results, '$shortFormat', $query));
});
return deferred.promise;
};

134
UI/WebServerResources/scss/components/ngTags/ng-tags-input.scss
View File

@@ -1,134 +0,0 @@
/// ng-tags-input.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
tags-input {
display: block;
}
tags-input *, tags-input *:before, tags-input *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
tags-input .host {
position: relative;
}
tags-input .host:active {
outline: none;
}
tags-input .tags {
@extend .pseudo-input-field;
padding: 0;
line-height: 2 * $mg;
word-wrap: break-word;
cursor: text;
border-bottom: 1px solid $colorGrayLighter;
transition: $swift-ease-out;
}
tags-input .tags.focused {
border-bottom: 2px solid sg-color($sogoBlue, 500);
}
tags-input/deep/#inner-editor {
color: $colorGrayLight;
line-height: inherit;
}
:root/deep/#placeholder,
:root/deep/::-webkit-input-placeholder {
color: $colorGrayLight;
height: $mg;
font: inherit;
line-height: inherit;
padding: 0;
}
tags-input .tags .tag-list {
margin: 0;
padding: 0;
list-style-type: none;
}
// Trying to make it chip-like
tags-input .tags .tag-item {
margin: 2px;
padding: $line $mg;
display: inline-block;
float: left;
height: (4 * $line);
font-size: sg-size(body);
line-height: (2 * $line);
border: none;
border-radius: (2 * $line);
background-color: sg-color($sogoPaper, 100);
}
tags-input .tags .tag-item.selected {
}
tags-input .tags .tag-item .remove-button {
margin: 0 0 0 5px;
padding: 0;
border: none;
background: none;
cursor: pointer;
vertical-align: middle;
color: #585858;
}
tags-input .tags .tag-item .remove-button:active {
color: red;
}
tags-input .tags .input {
border: 0;
outline: none;
font: inherit;
background-color: transparent;
-webkit-appearance: none;
-moz-appearance: none;
}
tags-input .tags .input.invalid-tag {
color: red;
}
tags-input .tags .input::-ms-clear {
display: none;
}
tags-input.ng-invalid .tags {
-webkit-box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
-moz-box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6);
}
tags-input .autocomplete {
margin-top: 0;
position: absolute;
padding: 5px 0;
z-index: 999;
width: 100%;
background-color: white;
border: none;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
top: 100%;
}
tags-input .autocomplete .suggestion-list {
margin: 0;
padding: 0;
list-style-type: none;
}
tags-input .autocomplete .suggestion-item {
padding: 5px 10px;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: black;
background-color: white;
}
tags-input .autocomplete .suggestion-item.selected {
color: white;
background-color: sg-color($sogoBlue, 300);
}
tags-input .autocomplete .suggestion-item.selected em {
color: white;
background-color: sg-color($sogoBlue, 700);
}
tags-input .autocomplete .suggestion-item em {
color: $colorGrayDark;
background-color: white;
}

4
UI/WebServerResources/scss/styles.scss
View File

@@ -89,10 +89,6 @@
@import 'components/pseudo-input/pseudo-input';
@import 'views/view';
// Ng-tags styles for re-skinning
// ------------------------------------------------------------------------------
@import 'components/ngTags/ng-tags-input';
// core styles - need to be after components till settings are correctly implemented
// ------------------------------------------------------------------------------
@import 'core/base_styles/base_style';