jinql
/
blur-admin
mirror of https://github.com/akveo/blur-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

finilising team UI

pull/339/head
Youssef ABIDI 2017-08-20 05:58:07 +01:00
parent ebf208efbf
commit 49bae15bbf
15 changed files with 197 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/pages/components/mail/mailMessages.js
View File

@ -22,7 +22,7 @@
"attachment": "poem.txt",
"position": "Great Employee",
"tag": "friend",
"labels": ['inbox']
"labels": ['hr']
},
{
"id": "4563fdfvd",

BIN
src/app/pages/teams/.DS_Store vendored
View File

Binary file not shown.

14
src/app/pages/teams/members/MembersTabCtrl.js
View File

@ -9,19 +9,21 @@
.controller('MembersTabCtrl', MembersTabCtrl);
/** @ngInject */
function MembersTabCtrl(composeModal, mailMessages) {
function MembersTabCtrl(composeModal, membersList) {
var vm = this;
vm.navigationCollapsed = true;
vm.showCompose = function(subject, to , text){
vm.showCompose = function(id){
if (id != '')
vm.message = membersList.getMemberById(id);
else
vm.message = {};
composeModal.open({
subject : subject,
to: to,
text: text
message : vm.message
})
};
vm.tabs = mailMessages.getTabs();
vm.tabs = membersList.getTabs();
}
})();

78
src/app/pages/teams/members/composeBox/compose.html
View File

@ -1,26 +1,80 @@
<div class="compose-header">
<span>
New message
New member
</span>
<span class="header-controls">
<i class="ion-minus-round"></i>
<i class="ion-arrow-resize"></i>
<i ng-click="$dismiss()" class="ion-close-round"></i>
</span>
</div>
<div>
<input type="text" class="form-control compose-input default-color" placeholder="To" ng-model="boxCtrl.to">
<input type="text" class="form-control compose-input default-color" placeholder="Subject" ng-model="boxCtrl.subject">
<div class="compose-container">
<text-angular-toolbar ta-toolbar-class="toolbarMain" name="toolbarMain" ta-toolbar="[['h1','h2','h3','bold','italics', 'underline', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull']]"></text-angular-toolbar>
<text-angular name="htmlcontent" ta-target-toolbars='toolbarMain,toolbarFooter' ng-model="boxCtrl.text"></text-angular>
<div class="col-md-12">
<div class="form-group row clearfix"></div>
<div class="form-group row clearfix">
<div class="col-sm-5">
<div class="userpic">
<div class="userpic-wrapper">
<img ng-src="{{ boxCtrl.picture }}" ng-click="boxCtrl.uploadPicture()">
</div>
<i class="ion-ios-close-outline" ng-click="boxCtrl.removePicture()" ng-if="!boxCtrl.noPicture"></i>
<a href class="change-userpic" ng-click="boxCtrl.uploadPicture()">Change Profile Picture</a>
<input type="file" ng-show="false" id="uploadFile" ng-file-select="boxCtrl.onFileSelect($files)">
</div>
</div>
<div class="col-md-7">
<div class="form-group row clearfix">
<label for="inputFirstName" class="col-sm-3 control-label">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputFirstName" placeholder="" ng-model="boxCtrl.message.name">
</div>
</div>
<div class="form-group row clearfix">
<label for="inputLastName" class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputLastName" placeholder="" ng-model="boxCtrl.message.email">
</div>
</div>
<div class="form-group row clearfix">
<label class="col-sm-3 control-label">Department</label>
<div class="col-sm-9">
<select class="form-control" selectpicker>
<option>Web Development</option>
<option>System Development</option>
<option>Sales</option>
<option>Human Resources</option>
</select>
</div>
</div>
<div class="form-group row clearfix">
<label for="inputOccupation" class="col-sm-3 control-label">Occupation</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputOccupation" placeholder="" ng-model="boxCtrl.message.position">
</div>
</div>
</div>
</div>
<div class="col-md-12"></div>
</div>
<div class="compose-footer clearfix">
<button type="button" ng-click="$dismiss()" class="btn btn-send">Send</button>
<text-angular-toolbar ta-toolbar-class="toolbarFooter" name="toolbarFooter" ta-toolbar="[['insertLink', 'insertImage', 'html', 'quote','insertVideo']]"></text-angular-toolbar>
<button type="button" ng-click="$dismiss()" class="btn btn-send">Save</button>
<div class="footer-controls">
<i class="footer-control-first compose-footer-icon ion-arrow-down-b"></i>
<i ng-click="$dismiss()" class="compose-footer-icon ion-android-delete"></i>
<button type="button" ng-click="$dismiss()" class="btn btn-danger">Cancel</button>
</div>
</div>

27
src/app/pages/teams/members/composeBox/composeBoxCtrl.js
View File

@ -5,14 +5,31 @@
(function () {
'use strict';
angular.module('BlurAdmin.pages.components.mail')
angular.module('BlurAdmin.pages.teams.members')
.controller('composeBoxCtrl', composeBoxCtrl);
/** @ngInject */
function composeBoxCtrl(subject, to, text) {
function composeBoxCtrl(message,fileReader, $filter) {
var vm = this;
vm.subject = subject;
vm.to = to;
vm.text = text;
vm.message = message;
vm.picture = (message.pic && message.pic != "") ? $filter('profilePicture')(message.name.split(' ')[0]) : $filter('appImage')('theme/no-photo.png');
vm.removePicture = function () {
vm.picture = $filter('appImage')('theme/no-photo.png');
vm.noPicture = true;
};
vm.uploadPicture = function () {
var fileInput = document.getElementById('uploadFile');
fileInput.click();
};
vm.getFile = function () {
fileReader.readAsDataUrl(vm.file, vm)
.then(function (result) {
vm.picture = result;
});
};
}
})();

14
src/app/pages/teams/members/composeBox/composeModal.js
View File

@ -5,7 +5,7 @@
(function () {
'use strict';
angular.module('BlurAdmin.pages.components.mail')
angular.module('BlurAdmin.pages.teams.members')
.service('composeModal', composeModal);
/** @ngInject */
@ -13,19 +13,13 @@
this.open = function(options){
return $uibModal.open({
animation: false,
templateUrl: 'app/pages/components/mail/composeBox/compose.html',
templateUrl: 'app/pages/teams/members/composeBox/compose.html',
controller: 'composeBoxCtrl',
controllerAs: 'boxCtrl',
size: 'compose',
resolve: {
subject: function () {
return options.subject;
},
to: function () {
return options.to;
},
text: function () {
return options.text;
message: function () {
return options.message;
}
}
});

4
src/app/pages/teams/members/detail/MailDetailCtrl.js → src/app/pages/teams/members/detail/MemberDetailCtrl.js
View File

@ -9,9 +9,9 @@
.controller('MemberDetailCtrl', MemberDetailCtrl);
/** @ngInject */
function MemberDetailCtrl($stateParams, mailMessages) {
function MemberDetailCtrl($stateParams, membersList) {
var vm = this;
vm.mail = mailMessages.getMessageById($stateParams.id);
vm.member = membersList.getMemberById($stateParams.id);
vm.label = $stateParams.label;
}

47
src/app/pages/teams/members/detail/memberDetail.html
View File

@ -11,69 +11,44 @@
</div>
<div class="person-info row">
<div class="col-lg-4 col-md-12 no-padding">
<img ng-src="{{detailCtrl.mail.name.split(' ')[0] | profilePicture}}" class="human-picture">
<img ng-src="{{detailCtrl.member.name.split(' ')[0] | profilePicture}}" class="human-picture">
<div class="name">
<h2 class="name-h">{{detailCtrl.mail.name.split(' ')[0]}}</h2>
<h2 class="name-h">{{detailCtrl.member.name.split(' ')[0]}}</h2>
<h2 class="name-h second-name">{{detailCtrl.mail.name.split(' ')[1]}}</h2>
<h2 class="name-h second-name">{{detailCtrl.member.name.split(' ')[1]}}</h2>
<div>
<span class="mail-tag tag label {{detailCtrl.mail.tag}}">{{detailCtrl.mail.tag}}</span>
<span class="mail-tag tag label {{detailCtrl.member.tag}}">{{detailCtrl.member.tag}}</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-xs-12 no-padding">
<div class="contact-info phone-email">
<div>
<i class="ion-iphone"></i>
<span class="phone">777-777-7777</span>
<span class="position">{{detailCtrl.member.position}}</span>
</div>
<div>
<i class="ion-email"></i>
<span class="email">{{detailCtrl.mail.email}}</span>
<span class="email">{{detailCtrl.member.email}}</span>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-xs-12 no-padding">
<div class="contact-info position-address">
<div>
<span class="position">{{detailCtrl.mail.position}}</span>
</div>
<div>
<span class="address">12 Nezavisimosti st. Vilnius, Lithuania</span>
</div>
<span ng-repeat="l in detailCtrl.member.labels" class="tag label label-primary {{l}}">{{l}}</span>
</div>
</div>
</div>
<div class="row">
</div>
<div class="line"></div>
<div class="message-details">
<span class="subject">{{detailCtrl.mail.subject}} </span>
<span class="date">• {{detailCtrl.mail.date | date : 'h:mm a MMMM d '}}</span>
</div>
<div class="line"></div>
<div ng-bind-html="detailCtrl.mail.body" class="message-body">
</div>
<div class="line"></div>
<div class="attachment" ng-show="detailCtrl.mail.attachment">
<span class="file-links">1 Attachment - <a href>View</a> | <a href>Download</a></span>
<div>
<i class="file-icon ion-document"></i>
<span class="file-name">{{detailCtrl.mail.attachment}}</span>
</div>
</div>
<div class="line" ng-show="detailCtrl.mail.attachment"></div>
<div class="answer-container">
<button type="button" class="btn btn-with-icon" ng-click="tabCtrl.showCompose(detailCtrl.mail.subject,detailCtrl.mail.email,'')"><i class="ion-reply"></i>Reply</button>
<button type="button" class="btn btn-with-icon" ng-click="tabCtrl.showCompose(detailCtrl.mail.subject,'',detailCtrl.mail.body)"><i class="ion-forward"></i>Forward</button>
<button type="button" class="btn btn-with-icon"><i class="ion-printer"></i>Print</button>
<button type="button" class="btn btn-with-icon"><i class="ion-android-remove-circle"></i>Spam</button>
<button type="button" class="btn btn-with-icon"><i class="ion-android-delete"></i>Delete</button>
</div>
</div>
<div ng-show="!detailCtrl.mail">

7
src/app/pages/teams/members/list/MembersListCtrl.js
View File

@ -9,11 +9,12 @@
.controller('MembersListCtrl', MembersListCtrl);
/** @ngInject */
function MembersListCtrl($stateParams, mailMessages) {
function MembersListCtrl($scope, $stateParams, membersList) {
var vm = this;
console.log($stateParams.label);
vm.messages = mailMessages.getMessagesByLabel($stateParams.label);
vm.messages = ($stateParams.label == "list") ? membersList.getAllMessages() : membersList.getMembersByLabel($stateParams.label);
vm.label = $stateParams.label;
}
})();

6
src/app/pages/teams/members/list/membersList.html
View File

@ -38,7 +38,7 @@
<td ui-sref="teams.members.detail({id: m.id, label: listCtrl.label})">
<div class="name-container">
<div><span class="name">{{m.name}}</span></div>
<div><span class="tag label label-primary {{m.tag}}">{{m.tag}}</span></div>
<div><span ng-repeat="l in m.labels" class="tag label label-primary {{l}}">{{l}}</span></div>
</div>
</td>
<td ui-sref="teams.members.detail({id: m.id, label: listCtrl.label})">
@ -50,8 +50,8 @@
<span>{{m.position}}</span>
</td>
<td>
<button class="btn btn-primary editable-table-button btn-xs" ng-click="rowform.$show()">Edit</button>
<button class="btn btn-danger editable-table-button btn-xs" ng-click="removeUser($index)">Delete</button>
<button class="btn btn-primary editable-table-button btn-xs" ng-click="tabCtrl.showCompose(m.id)">Edit</button>
<button class="btn btn-danger editable-table-button btn-xs" ng-click="removeMember(m.id)">Delete</button>
</td>
</tr>
</table>

22
src/app/pages/teams/members/members.html
View File

@ -4,30 +4,20 @@
<div class="letter-layout">
<div class="mail-navigation-container" ng-class="{'expanded' : !tabCtrl.navigationCollapsed}">
<div class="text-center">
<button type="button" class="btn btn-default compose-button" ng-click="tabCtrl.showCompose('','','')">
<button type="button" class="btn btn-default compose-button" ng-click="tabCtrl.showCompose('')">
New member
</button>
</div>
<div ng-repeat="t in tabCtrl.tabs" ui-sref-active="active" class="mail-navigation"
ui-sref="teams.members.label({label: t.label})" ng-click="selectTab(t.label)">
{{t.name}}<span class="new-mails" ng-show="t.newMails">{{t.newMails}}</span>
</div>
<div class="labels">
<div class="labels-title">
</div>
<div class="labels-container">
<div class="label-item">
<span class="tag label work">Work</span>
</div>
<div class="label-item">
<span class="tag label family">Family</span>
</div>
<div class="label-item">
<span class="tag label friend">Friend</span>
</div>
<div class="label-item">
<span class="tag label study">Study</span>
<div ng-repeat="t in tabCtrl.tabs" ui-sref-active="active" class="label-item"
ui-sref="teams.members.label({label: t.label})" ng-click="selectTab(t.label)">
<span class="tag label {{t.label}}">{{t.name}}</span>
</div>
</div>
</div>

6
src/app/pages/teams/members/members.module.js
View File

@ -24,8 +24,8 @@
}).state('teams.members.label', {
url: '/:label',
templateUrl: 'app/pages/teams/members/list/membersList.html',
title: 'Mail',
controller: "MailListCtrl",
title: 'Members',
controller: "MembersListCtrl",
controllerAs: "listCtrl"
}).state('teams.members.detail', {
url: '/:label/:id',
@ -34,7 +34,7 @@
controller: "MemberDetailCtrl",
controllerAs: "detailCtrl"
});
$urlRouterProvider.when('/teams/members','/teams/members/inbox');
$urlRouterProvider.when('/teams/members','/teams/members/list');
}
})();

71
src/app/pages/teams/members/membersMessages.js
View File

@ -6,10 +6,10 @@
'use strict';
angular.module('BlurAdmin.pages.teams.members')
.service('membersMessages', membersMessages);
.service('membersList', membersList);
/** @ngInject */
function membersMessages($sce) {
function membersList($sce, $stateParams) {
var messages = [
{
"id": "4563faass",
@ -22,7 +22,7 @@
"attachment": "poem.txt",
"position": "Great Employee",
"tag": "friend",
"labels": ['inbox']
"labels": ['content']
},
{
"id": "4563fdfvd",
@ -36,7 +36,7 @@
"email": "petraramsey@mail.com",
"position": "Great Employee",
"tag": "study",
"labels": ['inbox']
"labels": ['content']
},
{
"id": "4563zxcss",
@ -49,7 +49,7 @@
"email": "petraramsey@mail.com",
"position": "Great Employee",
"tag": "work",
"labels": ['sent', 'important']
"labels": ['product', 'content']
},
{
"id": "8955sddf",
@ -63,7 +63,7 @@
"position": "Graphical designer",
"attachment": "design.psd",
"tag": "work",
"labels": ['inbox']
"labels": ['shops']
},
{
"id": "8955sdfcc",
@ -75,7 +75,7 @@
"email": "barlowshort@mail.com",
"position": "Graphical designer",
"tag": "study",
"labels": ['inbox']
"labels": ['innovation']
},
{
"id": "8955asewf",
@ -87,7 +87,7 @@
"email": "barlowshort@mail.com",
"position": "Graphical designer",
"tag": "work",
"labels": ['inbox', 'important']
"labels": ['shops', 'media']
},
{
"id": "2334uudsa",
@ -104,7 +104,7 @@
"position": "Technical Chef",
"attachment": "file.doc",
"tag": "family",
"labels": ['inbox', 'important']
"labels": ['hr', 'innovation']
},
{
"id": "2334aefvv",
@ -120,7 +120,7 @@
"email": "schwart@mail.com",
"position": "Technical Chef",
"tag": "family",
"labels": ['inbox', 'important']
"labels": ['tech', 'product']
},
{
"id": "2334cvdss",
@ -135,7 +135,7 @@
"email": "schwart@mail.com",
"position": "Technical Chef",
"tag": "study",
"labels": ['trash']
"labels": ['product']
},
{
"id": "8223xzxfn",
@ -148,7 +148,7 @@
"email": "lakeishaphillips@mail.com",
"position": "Mobile Developer",
"tag": 'family',
"labels": ['trash']
"labels": ['tech']
},
{
"id": "8223sdffn",
@ -161,7 +161,7 @@
"email": "lakeishaphillips@mail.com",
"position": "Mobile Developer",
"tag": 'family',
"labels": ['spam']
"labels": ['tech']
},
{
"id": "9391xdsff",
@ -174,7 +174,7 @@
"email": "carlsongoodman@mail.com",
"position": "Fullstack man",
"tag": "study",
"labels": ['draft']
"labels": ['tech']
},
{
"id": "8223xsdaa",
@ -187,10 +187,10 @@
"email": "lakeishaphillips@mail.com",
"position": "Mobile Developer",
"tag": "family",
"labels": ['draft']
"labels": ['hr']
},
{
"id": "9391xdsff",
"id": "9391xdsfd",
"name": "Vlad Lugovsky",
"subject": "What next",
"date": "2015-03-31T11:52:58",
@ -200,45 +200,48 @@
"email": "carlsongoodman@mail.com",
"position": "Fullstack man",
"tag": "study",
"labels": ['sent']
"labels": ['hr']
}
].sort(function (a, b) {
if (a.date > b.date) return 1;
if (a.date < b.date) return -1;
}).reverse();
var tabs = [{
label: 'inbox',
name: 'Inbox',
newMails: 7
label: 'hr',
name: 'HR'
}, {
label: 'sent',
name: 'Sent Mail'
label: 'tech',
name: 'Tech'
}, {
label: 'important',
name: 'Important'
label: 'product',
name: 'Product'
}, {
label: 'draft',
name: 'Draft',
newMails: 2
label: 'finance',
name: 'Finance'
}, {
label: 'spam',
name: 'Spam'
label: 'media',
name: 'Media'
}, {
label: 'trash',
name: 'Trash'
label: 'shops',
name: 'Shops'
}, {
label: 'innovation',
name: 'Innovation'
}];
return{
getTabs : function(){
return tabs
},
getMessagesByLabel : function(label){
console.log('label',$stateParams.label);
getMembersByLabel : function(label){
return messages.filter(function(m){
return m.labels.indexOf(label) != -1;
});
},
getMessageById : function(id){
getAllMessages : function(){
return messages;
},
getMemberById : function(id){
return messages.filter(function(m){
return m.id == id;
})[0];

2
src/app/pages/teams/teams.module.js
View File

@ -17,7 +17,7 @@
url: '/teams',
template : '<ui-view autoscroll="true" autoscroll-body-top></ui-view>',
abstract: true,
title: 'teams',
title: 'Teams',
sidebarMeta: {
icon: 'ion-gear-a',
order: 100,

40
src/sass/app/_email.scss
View File

@ -247,31 +247,50 @@
}
}
.mail-panel .mail-navigation-container .tag {
font-size: 20px;
font-weight: 300;
width: 159px;
text-transform: capitalize;
}
.mail-panel .tag {
text-transform: lowercase;
font-size: 11px;
font-weight: $font-light;
width: 45px;
cursor: pointer;
display: inline-block;
margin-right: 3px;
&.label {
padding: .2em .5em;
border-radius: 2px;
line-height: 1.1;
}
&.work {
&.tech {
background-color: $primary;
}
&.study {
&.product {
background-color: $warning;
}
&.family {
&.finance {
background-color: $success;
}
&.friend {
&.media {
background-color: $danger;
}
&.hr {
background-color: $danger;
}
&.shops {
background-color: $danger;
}
&.innovation {
background-color: $danger;
}
}
@ -667,7 +686,7 @@
.compose-footer {
padding: 2px 4px;
background-color: $mail-box;
.btn-send {
.btn-send, .btn-danger {
background-color: $primary-light;
color: white;
padding: 2px 10px;
@ -682,7 +701,6 @@
.footer-controls {
float: right;
margin: 6px;
}
.compose-footer-icon {
@ -741,11 +759,9 @@
}
.modal .modal-dialog.modal-compose {
max-width: 398px;
position: fixed;
bottom: 0;
right: 0;
max-height: 474px;
display: inline-block;
text-align: left;
vertical-align: middle;
.form-control, .bootstrap-tagsinput input {
@include placeholderStyle($dropdown-text, 1);