More Setings UI Tweaks
This commit is contained in:
parent
d736cb021a
commit
51d11cac93
3 changed files with 187 additions and 56 deletions
|
@ -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*/
|
|
@ -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"
|
|
||||||
// }
|
|
||||||
|
|
||||||
|
|
||||||
}]);
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue