More Setings UI Tweaks

This commit is contained in:
Sagi Dayan 2015-06-17 22:46:26 +03:00
parent d736cb021a
commit 51d11cac93
3 changed files with 187 additions and 56 deletions

View file

@ -2,10 +2,10 @@
body{ body{
font-family: "Alef Hebrew", font-family: "Alef Hebrew",
Helvetica Neue, Helvetica Neue,
Helvetica, Helvetica,
Arial, Arial,
sans-serif; sans-serif;
} }
.menuBtn { .menuBtn {
@ -144,10 +144,10 @@ body.noscroll
} }
.createCampus .createCampus
{ {
position:relative; position:relative;
} }
/*div.img campusAvatar /*div.img campusAvatar
@ -247,4 +247,63 @@ body.noscroll
.se-menu ul a{ .se-menu ul a{
text-decoration: none !important; text-decoration: none !important;
color: #7f7f7f; color: #7f7f7f;
} }
/*Settings Style*/
.settingList .settingListItem:hover{
background-color: #E2E2E2;
font-weight: bold;
}
.settingList .settingListItemRoot{
list-style: none;
padding: 0;
padding-left: 0;
}
.settingList .settingListItem{
width: 100%;
padding: 15px 0px auto 15px;
}
/*End Settings*/
/*md Effects*/
.md-avatar{
width: 40px;
height: 40px;
margin-top: 8px;
margin-bottom: 8px;
margin-right: 16px;
border-radius: 50%;
box-sizing: content-box;
}
md-list-item .md-no-style.md-button, md-list-item.md-no-proxy.md-button {
font-size: inherit;
height: inherit;
text-align: left;
text-transform: none;
width: 100%;
white-space: normal;
}
md-list-item, md-list-item .md-list-item-inner {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
min-height: 48px;
}
/*End Effects for MD*/

View file

@ -1,57 +1,78 @@
angular.module('SeHub') angular.module('SeHub')
.controller('settingsController', ['$scope', '$rootScope', 'dataService','apiService', '$cookies', '$location', .controller('settingsController', ['$scope', '$rootScope', 'dataService', 'apiService', '$cookies', '$location',
function($scope, $rootScope, dataService ,apiService, $cookies, $location) { function($scope, $rootScope, dataService, apiService, $cookies, $location) {
var token = $cookies['com.sehub.www']; var token = $cookies['com.sehub.www'];
$scope.loadingData = true; $scope.loadingData = true;
$scope.isInRegisterMode = false; $scope.isInRegisterMode = false;
$scope.title = "Settings" $scope.title = "Settings"
apiService.getUserByToken(token).success(function(data) { apiService.getUserByToken(token).success(function(data) {
if (data.message == 'No User Found') { if (data.message == 'No User Found') {
console.error("No User Found!"); console.error("No User Found!");
} }
$scope.loadingData = false;
$scope.user = data;
console.log(data);
if ($scope.user.isFirstLogin) {
$scope.menuObj = {};
$scope.isInRegisterMode = true;
$scope.loadingData = false; $scope.loadingData = false;
$location.path('/register') $scope.user = data;
console.log(data);
if ($scope.user.isFirstLogin) {
$scope.menuObj = {};
$scope.isInRegisterMode = true;
$scope.loadingData = false;
$location.path('/register')
}
});
$scope.isEditMode = false;
$scope.profileMode = "Edit Profile";
$scope.profileModeIcon = "fa fa-pencil";
$scope.changeProfileMode = function() {
$scope.isEditMode = !$scope.isEditMode;
if ($scope.isEditMode) {
$scope.profileMode = "Save Profile";
$scope.profileModeIcon = "fa fa-floppy-o";
} else {
dataService.userBrodcast($scope.user);
$scope.profileMode = "Edit Profile";
$scope.profileModeIcon = "fa fa-pencil";
}
} }
}); /**
* DEBUG DATA
*/
$scope.courses = [{
"courseName": "Advance Math",
"campusName": "JCE",
"startDate": {
"year": 2015,
"month": 4,
"day": 3
},
"endDate": {
"year": 2016,
"month": 5,
"day": 14
},
"taskFlag": false,
"campus_avatar": "https://yt3.ggpht.com/--ZkWxybWGOM/AAAAAAAAAAI/AAAAAAAAAAA/_nAICC_kzzI/s88-c-k-no/photo.jpg"
}];
$scope.campuses = [{
'title': 'JCE',
'email_ending': '@post.jce.ac.il',
'master_user_id': 123453433341,
'avatar_url': 'https://yt3.ggpht.com/--ZkWxybWGOM/AAAAAAAAAAI/AAAAAAAAAAA/_nAICC_kzzI/s88-c-k-no/photo.jpg'
}, {
'title': 'Stanford',
'email_ending': '@post.jce.ac.il',
'master_user_id': 123453433341,
'avatar_url': 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR9M4uQgaJP1zyiCGw-dK31hU8buWqeuOi9vTXBd4Y8hQcFTZqA'
}];
$scope.isEditMode = false;
$scope.profileMode = "Edit Profile";
$scope.profileModeIcon = "fa fa-pencil";
$scope.changeProfileMode = function() {
$scope.isEditMode = !$scope.isEditMode;
if ($scope.isEditMode) {
$scope.profileMode = "Save Profile";
$scope.profileModeIcon = "fa fa-floppy-o";
} else {
dataService.userBrodcast($scope.user);
$scope.profileMode = "Edit Profile";
$scope.profileModeIcon = "fa fa-pencil";
}
} }
]);
// {
// name: ";"
// isLecturer: false
// email: "sagidayan@gmail.com"
// username: "sagidayan"
// seToken: "76cd4178-94dd-4cb4-b464-111d2239e567"
// isFirstLogin: true
// campuses_id_list: [0]
// classes_id_list: [0]
// avatar_url: "https://avatars.githubusercontent.com/u/2984053?v=3"
// }
}]);

View file

@ -9,6 +9,7 @@
<div> <div>
<md-card layout-padding> <md-card layout-padding>
<div id="profile" layout="column"> <div id="profile" layout="column">
<!-- User Profile Box -->
<div class="user-box" layout="row"> <div class="user-box" layout="row">
<div> <div>
<img ng-src="{{user.avatar_url}}" alt="" style="width:20%"> <img ng-src="{{user.avatar_url}}" alt="" style="width:20%">
@ -20,6 +21,7 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Start View Profile -->
<div layout="column" ng-if="!isEditMode"> <div layout="column" ng-if="!isEditMode">
<div> <div>
<h2>{{user.name}}</h2> <h2>{{user.name}}</h2>
@ -31,7 +33,7 @@
I Am a: {{(user.isLecturer) ? "Lecturer" : "Student"}} I Am a: {{(user.isLecturer) ? "Lecturer" : "Student"}}
</div> </div>
</div> </div>
<!-- End View Profile -->
<!-- Starting Edit Mode Div --> <!-- Starting Edit Mode Div -->
<div layout="column" ng-if="isEditMode"> <div layout="column" ng-if="isEditMode">
<div> <div>
@ -52,8 +54,57 @@
</md-switch> </md-switch>
</div> </div>
</div> </div>
<!-- End Edit Div -->
</md-card> </md-card>
</div> </div>
<!-- Campuses & Classes Div -->
<div flex>
<md-card layout-padding>
<h3><i class="fa fa-graduation-cap"></i> My Classes</h3>
<div class="settingList">
<div class="settingListRoot">
<div ng-repeat="course in courses" class="settingListItem" layout="row">
<div>
<img alt="{{ person.name }}" ng-src="{{ course.campus_avatar }}" class="md-avatar" />
</div>
<div class="port_spacer">
{{ course.courseName }} - <strong>IN</strong> {{course.campusName}}
</div>
<div class="spacer"></div>
<div>
<md-button class="">
X
</md-button>
</div>
<md-divider ng-if="!$last"></md-divider>
</div>
</div>
</div>
<h3><i class="fa fa-university"></i> My Campuses</h3>
<div class="settingList">
<div class="settingListRoot">
<div ng-repeat="campus in campuses" class="settingListItem" layout="row">
<div>
<img alt="{{ person.name }}" ng-src="{{ campus.avatar_url }}" class="md-avatar" />
</div>
<div class="port_spacer">
{{ campus.title }} -
</div>
<div class="spacer"></div>
<div>
<md-button class="">
X
</md-button>
</div>
<md-divider ng-if="!$last"></md-divider>
</div>
</div>
</div>
</md-card>
</div>
<!-- End Campuses & Classes Div -->
</div> </div>
</md-card> </md-card>