Tallys Martins · Tallys Martins · Tallys Martins · Tallys Martins · Paulo Tada · Paulo Tada
Showing 14 changed files Show diff stats
src/app/index.scss
src/app/layout/blocks/communities/communities-block.html
src/app/layout/blocks/communities/communities-block.scss
src/app/layout/scss/skins/_whbl.scss
src/app/profile/activities/activities.html
src/app/profile/image/image.html
src/app/profile/info/profile-info.component.ts
src/app/profile/info/profile-info.html
src/app/profile/info/profile-info.scss
src/app/profile/profile.component.ts
src/app/profile/profile.html
src/app/profile/profile.scss
src/languages/en.json
src/languages/pt.json
@@ -39,6 +39,12 @@ $break-sm-min: 992px;
 $break-xxs-max: ($break-xxs-min - 1);
 $break-sm-max: ($break-sm-min - 1);
 $break-xs-max: ($break-xs-min - 1);
+// TODO: improve this method to collect all the paddings with a single var 
+$wrapper-padding: 15px 15px 35px 15px;
+$wrapper-padding-top: 15px;
+$wrapper-padding-right: 15px;
+$wrapper-padding-bottom: 35px;
+$wrapper-padding-left: 15px;
  
  
 @import "../../bower_components/bootswatch/flatly/_variables.scss";
-<div class="communities-block">
-  <a ng-repeat="profile in ctrl.profiles" ui-sref="main.profile.home({profile: profile.identifier})" class="profile">
+<div ng-repeat="profile in ctrl.profiles" class="col-xs-2 col-md-4 block-item"> 
+  <a ui-sref="main.profile.home({profile: profile.identifier})">
     <noosfero-profile-image [profile]="profile"></noosfero-profile-image>
   </a>
+  <p>{{profile.name}}</p>
 </div>
-.communities-block {
-  .profile {
+.communitiesblock {
+  .panel-body {
+    text-align: center;
     margin: 10px;
-    img, i.profile-image {
-      width: 60px;
-    }
     img {
       display: inline-block;
       vertical-align: top;
     }
     i.profile-image {
         text-align: center;
-        font-size: 4.5em;
+        font-size: 7rem;
+    }
+    p {
+      overflow: hidden;
+      font-size: 1rem;
+    }
+    .block-item {
+      padding: 0px;
     }
   }
 }
@@ -122,7 +122,7 @@ $whbl-font-color: #16191c;
 	  margin-bottom: 0;
 	  position: relative;
 	  min-height: 1200px;
-	  padding: 15px 15px 35px 15px;
+	  padding: $wrapper-padding;
 	  margin-left: 220px;
 		// border-left: 2px solid #e7ebee;
 	}
-<timeline>
-  <timeline-event ng-repeat="activity in ctrl.activities | orderBy: 'created_at':true">
-    <noosfero-activity [activity]="activity"></noosfero-activity>
-  </timeline-event>
-</timeline>
+<div class="row">
+  <hr class="divider"/>
+  <div id="atividades">
+      <h4>Atividades Recentes</h4>
+      <timeline>
+        <timeline-event ng-repeat="activity in vm.activities | orderBy: 'created_at':true">
+          <hr class="divider"/>
+          <noosfero-activity [activity]="activity"></noosfero-activity>
+        </timeline-event>
+      </timeline>
+      <button type="button" class="btn btn-sm btn-block">Carregar mais</button>
+  </div>
+</div>
 <span class="profile-image-wrap" title="{{ctrl.profile.name}}">
-  <img ng-if="ctrl.profile.image" ng-src="{{ctrl.profile.image.url}}" class="img-responsive profile-image">
-  <i ng-if="!ctrl.profile.image" class="fa {{ctrl.defaultIcon}} fa-5x profile-image"></i>
+  <img ng-if="ctrl.profile.image" ng-src="{{ctrl.profile.image.url}}" class="">
+  <i ng-if="!ctrl.profile.image" class="fa {{ctrl.defaultIcon}} fa-5x profile-image img-avatar"></i>
 </span>
@@ -16,17 +16,23 @@ export class ProfileInfoComponent {
  
     activities: any;
     profile: noosfero.Profile;
+    showInformation: boolean = false;
  
     constructor(private profileService: ProfileService, private amDateFormatFilter: any) {
         this.init();
+        this.showInformation = false;
+    }
+
+    toggleInformation() {
+      console.log(this.showInformation);
+      console.log("argila");
+      this.showInformation = !this.showInformation;
+      console.log(this.showInformation);
     }
  
     init() {
         this.profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
             this.profile = profile;
-            return this.profileService.getActivities(<number>this.profile.id);
-        }).then((response: restangular.IResponse) => {
-            this.activities = response.data.activities;
         });
     }
 }
-<div class="profile-wall">
+<!-- <div class="profile-wall mainbox clearfix">
  
   <div class="col-lg-3 col-md-4 col-sm-4">
     <div class="main-box clearfix">
@@ -8,6 +8,7 @@
       <div id="profile-left" class="main-box-body clearfix">
         <noosfero-profile-image [profile]="vm.profile" class="img-responsive center-block"></noosfero-profile-image>
         <span class="label" ng-class="{'label-danger': vm.profile.type == 'Community', 'label-info': vm.profile.type == 'Person'}">{{vm.profile | translateProfile}}</span>
+
         <div class="profile-since">
           {{"profile.member_since" | translate}}: {{vm.profile.created_at | amDateFormat:'MMMM YYYY'}}
         </div>
@@ -27,4 +28,38 @@
       </uib-tabset>
     </div>
   </div>
+</div> -->
+
+<div class="bg-image"></div>
+
+<div class="container" id="noosfero-profile">
+  <div class="col-sm-2">
+    <noosfero-profile-image [profile]="vm.profile" class="img-responsive center-block" data-pin-nopin="true"></noosfero-profile-image>
+    <div class="social-links">
+      <ul>
+        <li>Facebook</li>
+        <li>Linkdin</li>
+      </ul>
+    </div>
+  </div>
+  <div class="col-sm-10">
+    <h3>{{ vm.profile.name }}</h3>
+    <div ng-switch="description">
+    <p ng-if="vm.profile.additional_data['description']">
+      {{ 'profile.person.description' | translate }}: {{ vm.profile.additional_data['description'] }}
+    </p>
+    <p class="pull-left">www.noosfero.gov.br/<strong>{{ vm.profile.identifier }}</strong></p>
+    <div class="pull-right info-contato">
+      <button ng-click="vm.toggleInformation()" class="btn btn-sm">{{ 'profile.person.contact_info' | translate }}</button>
+      <div clas="profile-contact" ng-show="vm.showInformation">
+        <p class="email" ng-if="vm.profile.additional_data['contact_email']">Email: {{ vm.profile.additional_data['contact_email'] }}</p>
+        <p class="phone" ng-if="vm.profile.additional_data['contact_phone']">
+          {{ 'profile.person.contact_phone' | translate }}: {{ vm.profile.additional_data['contact_phone'] }}
+        </p>
+        <p class="phone" ng-if="(!vm.profile.additional_data['contact_phone'] && !vm.profile.additional_data['contact_email'])">
+          {{ 'profile.person.no_contact_info' | translate }}
+        </p>
+      </div>
+    </div>
+  </div>
 </div>
@@ -6,6 +6,7 @@ import {CmsComponent} from &#39;../article/cms/cms.component&#39;;
 import {ContentViewerComponent} from "../article/content-viewer/content-viewer.component";
 import {ContentViewerActionsComponent} from "../article/content-viewer/content-viewer-actions.component";
 import {ActivitiesComponent} from "./activities/activities.component";
+import {ActivityComponent} from "./activities/activity/activity.component";
 import {ProfileService} from "../../lib/ng-noosfero-api/http/profile.service";
 import {NotificationService} from "../shared/services/notification.service";
 import {MyProfileComponent} from "./myprofile.component";
@@ -13,15 +14,14 @@ import {ProfileActionsComponent} from &quot;./profile-actions.component&quot;;
 import {ProfileToolbarComponent} from "./profile-toolbar.component";
 /**
  * @ngdoc controller
- * @name profile.Profile
- * @description
+ * @name profile.Profile * @description
  *  This is the profile controller. It provide routes to supported Noosfero Profiles.
  */
  
 @Component({
     selector: 'profile',
     templateUrl: "app/profile/profile.html",
-    directives: [ActivitiesComponent],
+    directives: [ActivityComponent],
     providers: [
         provide('profileService', { useClass: ProfileService }),
         provide('notificationService', { useClass: NotificationService })
@@ -33,7 +33,7 @@ import {ProfileToolbarComponent} from &quot;./profile-toolbar.component&quot;;
         url: "^/profile/:profile",
         component: ProfileInfoComponent,
         views: {
-            "mainBlockContent": {
+            "profile-info": {
                 templateUrl: "app/profile/info/profile-info.html",
                 controller: ProfileInfoComponent,
                 controllerAs: "vm"
@@ -46,7 +46,6 @@ import {ProfileToolbarComponent} from &quot;./profile-toolbar.component&quot;;
             "toolbar@main": {
                 templateUrl: "app/profile/toolbar.html",
                 controller: ProfileToolbarComponent,
-                controllerAs: "vm"
             }
         }
     },
@@ -142,4 +141,6 @@ export class ProfileComponent {
             notificationService.error({ message: "notification.profile.not_found" });
         });
     }
+
+
 }
@@ -4,10 +4,14 @@
                   [attribute]="'custom_header'"
                   [profile]="vm.profile">
   </custom-content>
-  <noosfero-boxes ng-if="vm.boxes"
-                  [layout]="vm.profile.layout_template"
-                  [boxes]="vm.boxes"
-                  [owner]="vm.profile" class="row">
-  </noosfero-boxes>
+  <div class="row" ui-view="profile-info"></div>
+
+  <div class="wrapper-container">
+    <noosfero-boxes ng-if="vm.boxes"
+                    [layout]="vm.profile.layout_template"
+                    [boxes]="vm.boxes"
+                    [owner]="vm.profile" class="row">
+    </noosfero-boxes>
+  </div>
   <custom-content class="profile-footer" [label]="'profile.custom_footer.label'" [attribute]="'custom_footer'" [profile]="vm.profile"></custom-content>
 </div>
+
+@mixin padding-sides {
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+@mixin profile-img {
+  text-align: center;
+  margin: 10px;
+  border: 1px solid #eee;
+}
+
+@media (min-width: 768px) {
+  .container {max-width: 980px;}
+}
+
 .profile-container {
   @extend .container-fluid;
-  padding: 0 1%;
-  @media (max-width: 978px) {
-    padding: 0 2%;
+  margin-top:     -$wrapper-padding-top;
+  margin-left:    -$wrapper-padding-left;
+  margin-bottom:  -$wrapper-padding-bottom;
+  margin-right:   -$wrapper-padding-right;
+  @media (max-width: 978px) {padding: 0 2%;}
+}
+
+.wrapper-container {
+  margin: auto;
+  max-width: 980px;
+}
+
+.dropdown-menu {
+  >li {
+    margin:5px 0;
+    >a {
+      padding:3px 10px 3px 0 !important;
+      &:hover {background-color:transparent !important;}
+    }
   }
 }
  
-#profile-left {
-  text-align: center;
-  margin-top: 15px;
+.bg-image {
+  background-color:#eee;
+  height: 260px;
+}
+
+.social-links {
+  ul {
+    list-style:none;
+    text-align:center;
+    padding:0;
+    margin:0;
+  }
+}
+
+#noosfero-profile {
+  background:#fff;
+  margin: -200px auto auto;
+  z-index:9999;
+  left:0;
+  right:0;
+  border:1px solid #eee;
+  padding:20px 0;
+  font-size: 14px;
+
+  img,
+  i {@include profile-img;}
+
+  .col-sm-2 {text-align: center;}
+
+  h3 {margin-top: 16px;}
+
+  .btn {
+    font-size: 12px;
+    padding: 5px 10px;
+  }
+
+  .profile-contact {
+    padding-top: 10px;
+    p {margin: 0px;}
+  }
 }
@@ -17,6 +17,10 @@
   "profile.others_info": "Others",
   "profile.community.title": "Community",
   "profile.person.title": "Person",
+  "profile.person.description": "Description",
+  "profile.person.contact_info": "Contact Informations",
+  "profile.person.contact_phone": "Phone",
+  "profile.person.no_contact_info": "No contact informations",
   "activities.title": "Activities",
   "activities.create_article.description": "has published on",
   "activities.add_member_in_community.description": "has joined the community",
@@ -17,6 +17,10 @@
   "profile.others_info": "Outras informações",
   "profile.community.title": "Comunidade",
   "profile.person.title": "Pessoa",
+  "profile.person.description": "Descrição",
+  "profile.person.contact_info": "Informações de Contato",
+  "profile.person.contact_phone": "Telefone",
+  "profile.person.no_contact_info": "Sem informações de contato",
   "activities.title": "Atividades",
   "activities.create_article.description": "publicou em",
   "activities.add_member_in_community.description": "entrou na comunidade",
...	...	@@ -39,6 +39,12 @@ $break-sm-min: 992px;
39	39	$break-xxs-max: ($break-xxs-min - 1);
40	40	$break-sm-max: ($break-sm-min - 1);
41	41	$break-xs-max: ($break-xs-min - 1);
	42	+// TODO: improve this method to collect all the paddings with a single var
	43	+$wrapper-padding: 15px 15px 35px 15px;
	44	+$wrapper-padding-top: 15px;
	45	+$wrapper-padding-right: 15px;
	46	+$wrapper-padding-bottom: 35px;
	47	+$wrapper-padding-left: 15px;
42	48
43	49
44	50	@import "../../bower_components/bootswatch/flatly/_variables.scss";
...	...
1		-<div class="communities-block">
2		- <a ng-repeat="profile in ctrl.profiles" ui-sref="main.profile.home({profile: profile.identifier})" class="profile">
	1	+<div ng-repeat="profile in ctrl.profiles" class="col-xs-2 col-md-4 block-item">
	2	+ <a ui-sref="main.profile.home({profile: profile.identifier})">
3	3	<noosfero-profile-image [profile]="profile"></noosfero-profile-image>
4	4	</a>
	5	+ <p>{{profile.name}}</p>
5	6	</div>
...	...
1		-.communities-block {
2		- .profile {
	1	+.communitiesblock {
	2	+ .panel-body {
	3	+ text-align: center;
3	4	margin: 10px;
4		- img, i.profile-image {
5		- width: 60px;
6		- }
7	5	img {
8	6	display: inline-block;
9	7	vertical-align: top;
10	8	}
11	9	i.profile-image {
12	10	text-align: center;
13		- font-size: 4.5em;
	11	+ font-size: 7rem;
	12	+ }
	13	+ p {
	14	+ overflow: hidden;
	15	+ font-size: 1rem;
	16	+ }
	17	+ .block-item {
	18	+ padding: 0px;
14	19	}
15	20	}
16	21	}
...	...
...	...	@@ -122,7 +122,7 @@ $whbl-font-color: #16191c;
122	122	margin-bottom: 0;
123	123	position: relative;
124	124	min-height: 1200px;
125		- padding: 15px 15px 35px 15px;
	125	+ padding: $wrapper-padding;
126	126	margin-left: 220px;
127	127	// border-left: 2px solid #e7ebee;
128	128	}
...	...
1		-<timeline>
2		- <timeline-event ng-repeat="activity in ctrl.activities \| orderBy: 'created_at':true">
3		- <noosfero-activity [activity]="activity"></noosfero-activity>
4		- </timeline-event>
5		-</timeline>
	1	+<div class="row">
	2	+ <hr class="divider"/>
	3	+ <div id="atividades">
	4	+ <h4>Atividades Recentes</h4>
	5	+ <timeline>
	6	+ <timeline-event ng-repeat="activity in vm.activities \| orderBy: 'created_at':true">
	7	+ <hr class="divider"/>
	8	+ <noosfero-activity [activity]="activity"></noosfero-activity>
	9	+ </timeline-event>
	10	+ </timeline>
	11	+ <button type="button" class="btn btn-sm btn-block">Carregar mais</button>
	12	+ </div>
	13	+</div>
...	...
1	1	<span class="profile-image-wrap" title="{{ctrl.profile.name}}">
2		- <img ng-if="ctrl.profile.image" ng-src="{{ctrl.profile.image.url}}" class="img-responsive profile-image">
3		- <i ng-if="!ctrl.profile.image" class="fa {{ctrl.defaultIcon}} fa-5x profile-image"></i>
	2	+ <img ng-if="ctrl.profile.image" ng-src="{{ctrl.profile.image.url}}" class="">
	3	+ <i ng-if="!ctrl.profile.image" class="fa {{ctrl.defaultIcon}} fa-5x profile-image img-avatar"></i>
4	4	</span>
...	...
...	...	@@ -16,17 +16,23 @@ export class ProfileInfoComponent {
16	16
17	17	activities: any;
18	18	profile: noosfero.Profile;
	19	+ showInformation: boolean = false;
19	20
20	21	constructor(private profileService: ProfileService, private amDateFormatFilter: any) {
21	22	this.init();
	23	+ this.showInformation = false;
	24	+ }
	25	+
	26	+ toggleInformation() {
	27	+ console.log(this.showInformation);
	28	+ console.log("argila");
	29	+ this.showInformation = !this.showInformation;
	30	+ console.log(this.showInformation);
22	31	}
23	32
24	33	init() {
25	34	this.profileService.getCurrentProfile().then((profile: noosfero.Profile) => {
26	35	this.profile = profile;
27		- return this.profileService.getActivities(<number>this.profile.id);
28		- }).then((response: restangular.IResponse) => {
29		- this.activities = response.data.activities;
30	36	});
31	37	}
32	38	}
...	...
1		-<div class="profile-wall">
	1	+<!-- <div class="profile-wall mainbox clearfix">
2	2
3	3	<div class="col-lg-3 col-md-4 col-sm-4">
4	4	<div class="main-box clearfix">
...	...	@@ -8,6 +8,7 @@
8	8	<div id="profile-left" class="main-box-body clearfix">
9	9	<noosfero-profile-image [profile]="vm.profile" class="img-responsive center-block"></noosfero-profile-image>
10	10	<span class="label" ng-class="{'label-danger': vm.profile.type == 'Community', 'label-info': vm.profile.type == 'Person'}">{{vm.profile \| translateProfile}}</span>
	11	+
11	12	<div class="profile-since">
12	13	{{"profile.member_since" \| translate}}: {{vm.profile.created_at \| amDateFormat:'MMMM YYYY'}}
13	14	</div>
...	...	@@ -27,4 +28,38 @@
27	28	</uib-tabset>
28	29	</div>
29	30	</div>
	31	+</div> -->
	32	+
	33	+<div class="bg-image"></div>
	34	+
	35	+<div class="container" id="noosfero-profile">
	36	+ <div class="col-sm-2">
	37	+ <noosfero-profile-image [profile]="vm.profile" class="img-responsive center-block" data-pin-nopin="true"></noosfero-profile-image>
	38	+ <div class="social-links">
	39	+ <ul>
	40	+ <li>Facebook</li>
	41	+ <li>Linkdin</li>
	42	+ </ul>
	43	+ </div>
	44	+ </div>
	45	+ <div class="col-sm-10">
	46	+ <h3>{{ vm.profile.name }}</h3>
	47	+ <div ng-switch="description">
	48	+ <p ng-if="vm.profile.additional_data['description']">
	49	+ {{ 'profile.person.description' \| translate }}: {{ vm.profile.additional_data['description'] }}
	50	+ </p>
	51	+ <p class="pull-left">www.noosfero.gov.br/<strong>{{ vm.profile.identifier }}</strong></p>
	52	+ <div class="pull-right info-contato">
	53	+ <button ng-click="vm.toggleInformation()" class="btn btn-sm">{{ 'profile.person.contact_info' \| translate }}</button>
	54	+ <div clas="profile-contact" ng-show="vm.showInformation">
	55	+ <p class="email" ng-if="vm.profile.additional_data['contact_email']">Email: {{ vm.profile.additional_data['contact_email'] }}</p>
	56	+ <p class="phone" ng-if="vm.profile.additional_data['contact_phone']">
	57	+ {{ 'profile.person.contact_phone' \| translate }}: {{ vm.profile.additional_data['contact_phone'] }}
	58	+ </p>
	59	+ <p class="phone" ng-if="(!vm.profile.additional_data['contact_phone'] && !vm.profile.additional_data['contact_email'])">
	60	+ {{ 'profile.person.no_contact_info' \| translate }}
	61	+ </p>
	62	+ </div>
	63	+ </div>
	64	+ </div>
30	65	</div>
...	...
...	...	@@ -6,6 +6,7 @@ import {CmsComponent} from '../article/cms/cms.component';
6	6	import {ContentViewerComponent} from "../article/content-viewer/content-viewer.component";
7	7	import {ContentViewerActionsComponent} from "../article/content-viewer/content-viewer-actions.component";
8	8	import {ActivitiesComponent} from "./activities/activities.component";
	9	+import {ActivityComponent} from "./activities/activity/activity.component";
9	10	import {ProfileService} from "../../lib/ng-noosfero-api/http/profile.service";
10	11	import {NotificationService} from "../shared/services/notification.service";
11	12	import {MyProfileComponent} from "./myprofile.component";
...	...	@@ -13,15 +14,14 @@ import {ProfileActionsComponent} from "./profile-actions.component";
13	14	import {ProfileToolbarComponent} from "./profile-toolbar.component";
14	15	/**
15	16	* @ngdoc controller
16		- * @name profile.Profile
17		- * @description
	17	+ * @name profile.Profile * @description
18	18	* This is the profile controller. It provide routes to supported Noosfero Profiles.
19	19	*/
20	20
21	21	@Component({
22	22	selector: 'profile',
23	23	templateUrl: "app/profile/profile.html",
24		- directives: [ActivitiesComponent],
	24	+ directives: [ActivityComponent],
25	25	providers: [
26	26	provide('profileService', { useClass: ProfileService }),
27	27	provide('notificationService', { useClass: NotificationService })
...	...	@@ -33,7 +33,7 @@ import {ProfileToolbarComponent} from "./profile-toolbar.component";
33	33	url: "^/profile/:profile",
34	34	component: ProfileInfoComponent,
35	35	views: {
36		- "mainBlockContent": {
	36	+ "profile-info": {
37	37	templateUrl: "app/profile/info/profile-info.html",
38	38	controller: ProfileInfoComponent,
39	39	controllerAs: "vm"
...	...	@@ -46,7 +46,6 @@ import {ProfileToolbarComponent} from "./profile-toolbar.component";
46	46	"toolbar@main": {
47	47	templateUrl: "app/profile/toolbar.html",
48	48	controller: ProfileToolbarComponent,
49		- controllerAs: "vm"
50	49	}
51	50	}
52	51	},
...	...	@@ -142,4 +141,6 @@ export class ProfileComponent {
142	141	notificationService.error({ message: "notification.profile.not_found" });
143	142	});
144	143	}
	144	+
	145	+
145	146	}
...	...
...	...	@@ -4,10 +4,14 @@
4	4	[attribute]="'custom_header'"
5	5	[profile]="vm.profile">
6	6	</custom-content>
7		- <noosfero-boxes ng-if="vm.boxes"
8		- [layout]="vm.profile.layout_template"
9		- [boxes]="vm.boxes"
10		- [owner]="vm.profile" class="row">
11		- </noosfero-boxes>
	7	+ <div class="row" ui-view="profile-info"></div>
	8	+
	9	+ <div class="wrapper-container">
	10	+ <noosfero-boxes ng-if="vm.boxes"
	11	+ [layout]="vm.profile.layout_template"
	12	+ [boxes]="vm.boxes"
	13	+ [owner]="vm.profile" class="row">
	14	+ </noosfero-boxes>
	15	+ </div>
12	16	<custom-content class="profile-footer" [label]="'profile.custom_footer.label'" [attribute]="'custom_footer'" [profile]="vm.profile"></custom-content>
13	17	</div>
...	...