Team-Greenvironment
/
greenvironment-frontend
mirror of https://github.com/Team-Greenvironment/greenvironment-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

added material design and rank names to social container

Browse Source
master
Max 5 years ago
parent d135cc74ba
commit 78932fb17c
13 changed files with 110 additions and 144 deletions
Show Stats Download Patch File Download Diff File

5
src/app/components/chatlist/chatlist.component.html
Unescape Escape View File

@ -1,8 +1,9 @@
<div id='chatlist'>
<div id="header">
<!--<div id="header">
<span class="title">Chats</span>
<button id="newchat" (click)="newChat()"><span><i class="fa fa-plus fa-3x" aria-hidden="true"></i></span></button>
</div>
</div>-->
<mat-toolbar><span>Chat</span></mat-toolbar>
<div id="chats">
<div class="chatitem" *ngFor="let chat of childChats"
[class.selected]="chat === selectedChat" (click)="showChat(chat)">

3
src/app/components/feed/postlist/postlist.component.sass
Unescape Escape View File

@ -6,8 +6,7 @@
width: 100%
margin-top: 0.5em
::ng-deep .mat-card-header-text
::ng-deep .mat-card-header-text
margin: 0px

6
src/app/components/home/home.component.html
Unescape Escape View File

@ -1,7 +1,7 @@
<div id="content" fxShow="true" fxHide.lt-md="true">
<home-chatmanager id="chatcontainer" *ngIf="loggedIn"></home-chatmanager>
<home-feed id="feedcontainer"></home-feed>
<home-social id="socialcontainer" *ngIf="loggedIn"></home-social>
<div id="chat"><home-chatmanager id="chatcontainer" *ngIf="!loggedIn"></home-chatmanager></div>
<div id="feed"><home-feed id="feedcontainer"></home-feed></div>
<div id="social"><home-social id="socialcontainer" *ngIf="!loggedIn"></home-social></div>
</div>
<!--
<mat-tab-group headerPosition="below" position="0" id="bottom-menu" fxShow="true" fxHide.gt-sm="true">

47
src/app/components/home/home.component.sass
Unescape Escape View File

@ -2,28 +2,30 @@
@import '../../../styles/vars.sass'
#content
grid-template: 100%/ 25% 50% 25%
display: grid
min-height: 90vh
max-height: 90vh
#chatcontainer
@include gridPosition(1, 3, 1, 2)
background-color: $cBoxBodyBackground
overflow: auto
#feedcontainer
@include gridPosition(1, 3, 2, 3)
display: grid
grid-template: 10% 90% /100%
overflow: auto
#socialcontainer
@include gridPosition(1, 3, 3, 4)
display: grid
grid-template: 50% 50% /100%
background-color: $cBoxBodyBackground
overflow: auto
position: fixed
width: 100%
height: calc(100% - 56px)
#chat
box-sizing: content-box
height: 100%
width: 25%
float: left
overflow-y: auto
#feed
box-sizing: content-box
height: 100%
width: 50%
float: left
overflow-y: auto
#social
box-sizing: content-box
height: 100%
width: 25%
float: left
overflow-y: auto
.mat-toolbar.mat-primary
width: 100%
@ -36,7 +38,6 @@
.bottom-menu
position: fixed
width: 100%
height: calc(100% - 56px)

20
src/app/components/social/friends/friends.component.html
Unescape Escape View File

@ -1,12 +1,22 @@
<div id="header">
<!--<div id="header">
<span class="title">Friends</span>
<button id="new" type="submit"><span><i class="fa fa-plus fa-3x" aria-hidden="true"></i></span></button>
<button id="invitations" type="submit"><span><i class="fa fa-envelope-o fa-3x" aria-hidden="true"></i></span></button>
</div>
<div id="friendslist">
<div class="frienditem" *ngFor="let friend of friends"
</div>-->
<mat-toolbar><span>Friends</span></mat-toolbar>
<div id="friendlist">
<!--<div class="frienditem" *ngFor="let friend of friends"
[class.selected]="friend === selectedFriend" (click)="showFriendProfile(friend)">
<div class="picture">Pic</div>
<div class="name"><span>{{friend.name}}</span></div>
</div>
</div>-->
<mat-card class="friend-card" *ngFor="let friend of friends"
[class.selected]="friend === selectedFriend" (click)="showFriendProfile(friend)"
tabindex="0">
<mat-card-header>
<div mat-card-avatar class="profile-picture"></div>
<mat-card-title>{{friend.name}}</mat-card-title>
<mat-card-subtitle>{{friend.rankname}}</mat-card-subtitle>
</mat-card-header>
</mat-card>
</div>

41
src/app/components/social/friends/friends.component.sass
Unescape Escape View File

@ -2,31 +2,18 @@
@import '../../../../styles/vars.sass'
@import '../social.component.sass'
#friendslist
overflow: auto
@include gridPosition(2, 3, 1, 2)
div:hover
background-color: darken($cPrimaryBackground, 10%)
#friendlist
padding: 0.5em
.friend-card
box-sizing: border-box
width: 100%
margin-top: 0.5em
cursor: pointer
.frienditem
background-color: $cPrimaryBackground
height: 3em
margin: 0.2em
padding: 0.25em
border-radius: 0.25em
//border: solid
display: grid
grid-template: 100% / 20% 60% 20%
.picture
@include gridPosition(1, 2, 1, 2)
border: solid
.name, .date
margin-top: auto
margin-bottom: auto
.name
@include gridPosition(1, 2, 2, 3)
font-weight: bold
text-align: left
padding-left: 0.5em
span
font-size: 125%
.mat-card-subtitle
margin: 0
.profile-picture
background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg)
background-size: cover

3
src/app/components/social/friends/friends.component.ts
Unescape Escape View File

@ -35,13 +35,14 @@ export class FriendsComponent implements OnInit {
}
readOutFriendsNames(pId: number, pResponse : any) {
this.friends.push(new FriendInfo(pId, pResponse.data.getUser.name))
this.friends.push(new FriendInfo(pId, pResponse.data.getUser.name,pResponse.data.getUser.level ))
}
buildJson(pId: number): any {
const body = {query: `query($userId: ID) {
getUser(userId:$userId) {
name
level
}
}`, variables: {
userId: pId

18
src/app/components/social/groups/groups.component.html
Unescape Escape View File

@ -1,12 +1,20 @@
<div id="header">
<!--<div id="header">
<span class="title">Groups</span>
<button id="new" type="submit"><span><i class="fa fa-plus fa-3x" aria-hidden="true"></i></span></button>
<button id="invitations" type="submit"><span><i class="fa fa-envelope-o fa-3x" aria-hidden="true"></i></span></button>
</div>
<div id="groupslist">
<div class="groupitem" *ngFor="let group of groups"
</div>-->
<mat-toolbar><span>Groups</span></mat-toolbar>
<div id="grouplist">
<!--<div class="groupitem" *ngFor="let group of groups"
[class.selected]="group === selectedGroup" (click)="showGroup(group)">
<div class="picture">Pic</div>
<div class="name"><span>{{group.name}}</span></div>
</div>
</div>-->
<mat-card class="group-card" *ngFor="let group of groups"
[class.selected]="group === selectedGroup" (click)="showGroup(group)">
<mat-card-header>
<div mat-card-avatar class="group-picture"></div>
<mat-card-title>{{group.name}}</mat-card-title>
</mat-card-header>
</mat-card>
</div>

41
src/app/components/social/groups/groups.component.sass
Unescape Escape View File

@ -2,31 +2,16 @@
@import '../../../../styles/vars.sass'
@import '../social.component.sass'
#groupslist
overflow: auto
@include gridPosition(2, 3, 1, 2)
div:hover
background-color: darken($cPrimaryBackground, 10%)
cursor: pointer
.groupitem
background-color: $cPrimaryBackground
height: 3em
margin: 0.2em
padding: 0.25em
border-radius: 0.25em
//border: solid
display: grid
grid-template: 100% / 20% 60% 20%
.picture
@include gridPosition(1, 2, 1, 2)
border: solid
.name, .date
margin-top: auto
margin-bottom: auto
.name
@include gridPosition(1, 2, 2, 3)
font-weight: bold
text-align: left
padding-left: 0.5em
span
font-size: 125%
#grouplist
padding: 0.5em
.group-card
box-sizing: border-box
width: 100%
margin-top: 0.5em
.mat-card-subtitle
margin: 0
.group-picture
background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg)
background-size: cover

46
src/app/components/social/social.component.sass
Unescape Escape View File

@ -2,43 +2,13 @@
@import '../../../styles/vars.sass'
#friendscontainer
@include gridPosition(1, 2, 1, 2)
display: grid
grid-template: 15% 85% /100%
box-sizing: content-box
height: 50%
width: 100%
overflow: auto
#groupscontainer
@include gridPosition(2, 3, 1, 2)
display: grid
grid-template: 15% 85% /100%
#header
@include gridPosition(1, 2, 1, 2)
background-color: $cBoxHeaderBackground
display: grid
grid-template: 100% /60% 20% 20%
span
color: $cFontWhite
span.title
@include gridPosition(1, 2, 1, 2)
margin-top: 0.25em
margin-left: 0.25em
line-height: 100%
font-size: 2em
button
background-color: $cBoxHeaderBackground
border: none
button:hover
background-color: lighten($cBoxHeaderBackground, 10%)
cursor: pointer
button:active
background-color: darken($cBoxHeaderBackground, 5%)
#new
@include gridPosition(1, 2, 2, 3)
#invitations
@include gridPosition(1, 2, 3, 4)
box-sizing: content-box
height: 50%
width: 100%
overflow: auto

7
src/app/models/friendinfo.ts
Unescape Escape View File

@ -1,9 +1,14 @@
import { Levellist } from 'src/app/models/levellist';
export class FriendInfo {
levellist: Levellist = new Levellist();
id: number
name: string
rankname: string
constructor(pId: number, pName: string) {
constructor(pId: number, pName: string, pLevel: number) {
this.id = pId
this.name = pName
this.rankname = this.levellist.getLevelName(pLevel);
}
}

3
src/app/models/levellist.ts
Unescape Escape View File

@ -11,11 +11,8 @@ export class Levellist{
getLevelName(lev:number): any{
var name: string = 'not defined';
console.log(lev);
this.levels.forEach(rank => {
console.log(rank.level);
if(lev == rank.level){
console.log('found matching level');
name = rank.name;
}
});

10
src/app/services/chat/chat.service.ts
Unescape Escape View File

@ -105,13 +105,15 @@ export class ChatService {
for(let chat of temp.data.getSelf.chats) {
let memberID: number
let memberName: string
let memberLevel: number
for(let member of chat.members) {
if(member.id != this.ownID) {
memberID = member.id
memberName = member.name
memberLevel = member.level
}
}
chatPartners.push(new FriendInfo(memberID, memberName))
chatPartners.push(new FriendInfo(memberID, memberName, memberLevel))
}
return chatPartners
@ -221,7 +223,7 @@ export class ChatService {
getBodyForRequestOfAllChatPartners() {
const body = {query: `query {
getSelf {
chats(first: 1000, offset: 0) {members{name, id}}
chats(first: 1000, offset: 0) {members{name, id, level}}
}}`
}
@ -243,7 +245,7 @@ export class ChatService {
const body = {query: `query {
getSelf {
chats(first: 1000, offset: 0) {
id, members{name, id},
id, members{name, id, level},
messages(first: 1000, offset: 0) {
author {id}, createdAt, content
}
@ -256,7 +258,7 @@ export class ChatService {
getBodyForGetChatsByID(pChatID: number) {
const body = {query: `query($chatID: ID!) {
getChat(chatId: $chatID) {id, members{name, id},
getChat(chatId: $chatID) {id, members{name, id, level},
messages(first: 1000, offset: 0) {author {id}, createdAt, content}}
}
}`, variables: {

Write Preview
Loading…
Cancel
Save