Skip to content

Commit aa8e05f

Browse files
lymanlailymanlai
committed
Merge branch 'develop' of github.com:arrking/austack into develop
2 parents d1989f1 + 18555ff commit aa8e05f

File tree

15 files changed

+225
-68
lines changed

15 files changed

+225
-68
lines changed

‎bower.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@
1616
"angular-i18n": "~1.3.14",
1717
"angular-moment": "~0.9.0",
1818
"angular-loading-bar": "~0.7.1",
19-
"jQuery": "~2.1.4",
2019
"angular-breadcrumb": "~0.4.0",
2120
"angular-timer": "~1.3.3",
2221
"cal-heatmap": "~3.5.2",

‎client/app/account/account.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@
1515
.module('austackApp.account', [
1616
'ui.router',
1717
'timer',
18-
'ngImgCrop',
1918
'ngMaterial',
2019
'austackApp.account.settings'
2120
])

‎client/app/account/profile/profile.controller.js‎

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,37 +5,24 @@
55
.module('austackApp.account')
66
.controller('ProfileController', ProfileController);
77

8-
ProfileController.$inject = ['$state', '$scope', '$mdDialog', 'Auth'];
8+
ProfileController.$inject = ['$state', '$mdDialog', 'Auth'];
99

10-
function ProfileController($state, $scope, $mdDialog, Auth) {
10+
function ProfileController($state, $mdDialog, Auth) {
1111
var vm = this;
1212

13-
$scope.myImage = '';
14-
$scope.croppedImage = '';
15-
1613
vm.user = Auth.getCurrentUser();
1714
vm.gotoSettings = gotoSettings;
1815

1916
function gotoSettings() {
20-
$mdDialog.hide().then(function () {
21-
$state.go('settings');
22-
});
17+
$state.go('settings');
18+
$mdDialog.hide();
2319
}
2420

2521
vm.user.avatar = vm.user.avaar || 'assets/images/profile.png';
2622

2723
vm.close = function () {
2824
$mdDialog.hide();
2925
};
30-
angular.element(document.querySelector('#fileInput')).on('change', function (ev) {
31-
var file = ev.currentTarget.files[0];
32-
var reader = new FileReader();
33-
reader.onload = function (ev) {
34-
$scope.$apply(function ($scope) {
35-
$scope.myImage = ev.target.result;
36-
});
37-
};
38-
});
3926
}
4027

4128
})();

‎client/app/account/settings/settings.controller.js‎

Lines changed: 43 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,51 @@
55
.module('austackApp.account.settings')
66
.controller('AccountSettingsController', AccountSettingsController);
77

8-
AccountSettingsController.$inject = ['$mdDialog'];
9-
10-
function AccountSettingsController($mdDialog) {
8+
/* @ngInject */
9+
function AccountSettingsController($scope, $mdDialog, Toast, user, UserService, CropImageService) {
1110
var vm = this;
1211

13-
vm.hide = function () {
14-
$mdDialog.hide();
15-
};
16-
vm.cancel = function () {
17-
$mdDialog.cancel();
18-
};
19-
vm.answer = function (answer) {
20-
$mdDialog.hide(answer);
21-
};
12+
var fileInput = document.querySelector('#fileInput');
13+
var target;
14+
15+
vm.user = user;
16+
vm.user.avatar = vm.user.avatar || 'assets/images/profile.png';
17+
vm.uploadImage = uploadImage;
18+
vm.update = update;
19+
20+
function uploadImage(ev) {
21+
target = ev;
22+
ev.preventDefault();
23+
fileInput.click();
24+
}
25+
26+
function update() {
27+
UserService.update(vm.user)
28+
.then(function (data) {
29+
Toast.show('更新成功');
30+
})
31+
.catch(function () {
32+
Toast.show('更新失败');
33+
});
34+
}
35+
36+
angular.element(fileInput).on('change', handleFileSelect);
37+
38+
function handleFileSelect(evt) {
39+
var file = evt.currentTarget.files[0];
40+
var reader = new FileReader();
41+
reader.onload = function (evt) {
42+
$scope.$apply(function ($scope) {
43+
var srcImage = evt.target.result;
44+
CropImageService.show(srcImage, target)
45+
.then(function (data) {
46+
vm.user.avatar = data;
47+
update();
48+
});
49+
});
50+
};
51+
reader.readAsDataURL(file);
52+
}
2253
}
2354

2455
})();

‎client/app/account/settings/settings.html‎

Lines changed: 39 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,44 @@
1-
<md-dialog>
2-
<form>
3-
<md-toolbar>
4-
<div class="md-toolbar-tools">
5-
<h2>设置</h2>
6-
<span flex></span>
7-
<md-button class="md-icon-button" ng-click="vm.answer('not applicable')" aria-label="Close settings">
8-
<md-icon md-svg-src="navigation:ic_close_24px"></md-icon>
9-
</md-button>
1+
<md-content layout="column" flex id="account-settings-content">
2+
<form name="updateForm">
3+
<h2 class="md-subheader">头像</h2>
4+
<div layout="row" layout-align="start center">
5+
<div>
6+
<img class="avatar" ng-src="{{vm.user.avatar}}" />
107
</div>
11-
</md-toolbar>
12-
<md-dialog-content>
138
<div>
14-
<p>
15-
The mango is a juicy stone fruit belonging to the genus Mangifera, consisting of numerous tropical fruiting trees, cultivated mostly for edible fruit. The majority of these species are found in nature as wild mangoes. They all belong to the flowering plant family Anacardiaceae. The mango is native to South and Southeast Asia, from where it has been distributed worldwide to become one of the most cultivated fruits in the tropics.
16-
</p>
9+
<md-button ng-click="vm.uploadImage($event)" class="md-raised md-accent">上传图片</md-button>
10+
<input hide type="file" id="fileInput" />
1711
</div>
18-
</md-dialog-content>
19-
<div class="md-actions" layout="row">
20-
<md-button href="http://en.wikipedia.org/wiki/Mango" target="_blank">
21-
查看帮助
22-
</md-button>
23-
<span flex></span>
24-
<md-button ng-click="vm.answer('not useful')" class="md-primary">
25-
取消
26-
</md-button>
27-
<md-button ng-click="vm.answer('useful')" class="md-primary">
28-
保存
29-
</md-button>
12+
</div>
13+
<div layout="row">
14+
<md-input-container flex>
15+
<label>手机号</label>
16+
<input ng-model="vm.user.mobile" disabled>
17+
</md-input-container>
18+
</div>
19+
<div layout="row">
20+
<md-input-container flex>
21+
<label>用户名</label>
22+
<input ng-model="vm.user.name">
23+
</md-input-container>
24+
</div>
25+
<div layout="row">
26+
<md-input-container flex>
27+
<label>邮箱</label>
28+
<input name="email" type="email" ng-model="vm.user.email">
29+
<div ng-messages="updateForm.email.$error" ng-if="updateForm.email.$dirty">
30+
<div ng-message="email">输入的邮箱格式不正确</div>
31+
</div>
32+
</md-input-container>
33+
</div>
34+
<div layout="row">
35+
<md-input-container flex>
36+
<label>公司</label>
37+
<input ng-model="vm.user.company">
38+
</md-input-container>
39+
</div>
40+
<div flex layout="row" layout-align="space-between center">
41+
<md-button ng-disabled="updateForm.$invalid" ng-click="vm.update()" class="md-raised md-primary">保存</md-button>
3042
</div>
3143
</form>
32-
</md-dialog>
44+
</md-content>

‎client/app/account/settings/settings.js‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@
22
'use strict';
33

44
angular
5-
.module('austackApp.account.settings', [])
5+
.module('austackApp.account.settings', [
6+
'austackApp.auth',
7+
'austackApp.cropImage'
8+
])
69
.config(configAccountSettingsLogin);
710

811
// inject configAccountSettingsLogin dependencies
@@ -25,13 +28,21 @@
2528
role: 'admin',
2629
templateUrl: 'app/account/settings/settings.html',
2730
controller: 'AccountSettingsController',
28-
controllerAs: 'settings',
31+
controllerAs: 'vm',
2932
ncyBreadcrumb: {
3033
label: '账户设置'
34+
},
35+
resolve: {
36+
user: resolveUser
3137
}
3238
};
3339

3440
$stateProvider.state(state);
3541
}
3642

43+
/* @ngInject */
44+
function resolveUser(User) {
45+
return User.get().$promise;
46+
}
47+
3748
})();

‎client/app/account/settings/settings.scss‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,11 @@
1-
1+
#account-settings-content {
2+
padding: 16px;
3+
.avatar {
4+
width: 100px;
5+
height: 100px;
6+
border-radius: 50%;
7+
margin: 20px 50px 10px 0px;
8+
background-color: #fff;
9+
border: 2px solid rgba($as-primary, 0.3);
10+
}
11+
}

‎client/app/components/crop-image/crop-image.controller.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
(function () {
2+
'use strict';
3+
4+
angular
5+
.module('austackApp.cropImage')
6+
.controller('CropImageController', CropImageController);
7+
8+
CropImageController.$inject = ['$scope', '$mdDialog', 'srcImage'];
9+
10+
function CropImageController($scope, $mdDialog, srcImage) {
11+
var vm = this;
12+
13+
vm.srcImage = srcImage;
14+
vm.croppedImage = null;
15+
vm.save = saveImage;
16+
vm.close = closeDialog;
17+
18+
function saveImage() {
19+
$mdDialog.hide(vm.croppedImage);
20+
}
21+
22+
function closeDialog() {
23+
$mdDialog.cancel();
24+
}
25+
}
26+
27+
})();

‎client/app/components/crop-image/crop-image.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<md-dialog class="crop-image" aria-label="Crop image">
2+
<form>
3+
<md-toolbar>
4+
<div class="md-toolbar-tools">
5+
<h2>上传头像</h2>
6+
<span flex></span>
7+
<md-button class="md-icon-button" ng-click="vm.close()" aria-label="Close settings">
8+
<md-icon md-svg-src="navigation:ic_close_24px"></md-icon>
9+
</md-button>
10+
</div>
11+
</md-toolbar>
12+
<md-dialog-content>
13+
<div class="crop-area">
14+
<img-crop image="vm.srcImage" result-image="vm.croppedImage"></img-crop>
15+
</div>
16+
</md-dialog-content>
17+
<div class="md-actions" layout="row">
18+
<span flex></span>
19+
<md-button ng-click="vm.close()" class="md-primary">
20+
取消
21+
</md-button>
22+
<md-button ng-click="vm.save()" class="md-raised md-primary">
23+
保存
24+
</md-button>
25+
</div>
26+
</form>
27+
</md-dialog>

‎client/app/components/crop-image/crop-image.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.crop-image {
2+
.crop-area {
3+
background: #E4E4E4;
4+
overflow: hidden;
5+
width: 500px;
6+
height: 350px;
7+
}
8+
}

0 commit comments

Comments
 (0)