Download as
Browse Code »

Commit b471f0f7838ae7feecfb5326e18e1173fa051921

Authored by Leandro Santos
1 parent 52d4df8e
Exists in master and in 4 other branches cosmetic_changes_people_and_communities_block, profile_description_block_component, staging, translations

put the image upload works minimally propely

Showing 11 changed files with 115 additions and 143 deletions   Show diff stats
src/app/layout/blocks/profile-image/profile-image-block.html
  Diff comments   View file @b471f0f
1 <div class="center-block text-center profile-image-block"> 1 <div class="center-block text-center profile-image-block">
2 <a ui-sref="main.profile.info({profile: ctrl.owner.identifier})"> 2 <a ui-sref="main.profile.info({profile: ctrl.owner.identifier})">
3 <noosfero-profile-image [profile]="ctrl.owner" [editable]="true" [edit-class]="'profile-image-block-editable'"></noosfero-profile-image> 3 <noosfero-profile-image [profile]="ctrl.owner" [editable]="true" [edit-class]="'profile-image-block-editable'"></noosfero-profile-image>
4 - </a>  
5 - <a class="settings-link" target="_self" ui-sref="main.profile.settings({profile: ctrl.owner.identifier})">{{"blocks.profile_image.control_panel" | translate}}</a> 4 + </a>
6 <div class="actions" ng-show="ctrl.isMember!=null"> 5 <div class="actions" ng-show="ctrl.isMember!=null">
7 <div class="organization-actions" ng-if="ctrl.displayOrganizationActions()"> 6 <div class="organization-actions" ng-if="ctrl.displayOrganizationActions()">
8 <a ng-if="!ctrl.isMember" ng-click="ctrl.join()" class="btn btn-primary btn-sm join" href="#">{{"blocks.profile_image.join" | translate}}</a> 7 <a ng-if="!ctrl.isMember" ng-click="ctrl.join()" class="btn btn-primary btn-sm join" href="#">{{"blocks.profile_image.join" | translate}}</a>
src/app/layout/blocks/profile-image/profile-image-block.scss
  Diff comments   View file @b471f0f
1 .profile-image-block { 1 .profile-image-block {
2 - .settings-link {  
3 - display: block; 2 + .img-responsive {
  3 + display: initial;
4 } 4 }
5 - .upload-camera-container {  
6 - top: 77%;  
7 - left: 6%;  
8 - }  
9 -}  
10 -  
11 -.profile-image-block-editable {  
12 - top: 68%;  
13 - width: 284px;  
14 - font-weight: 700;  
15 - height: 43px;  
16 - padding-left: 30px;  
17 - padding-top: 13px;  
18 } 5 }
19 -  
20 -  
21 -  
22 -  
23 -  
src/app/profile/image/image.component.ts
  Diff comments   View file @b471f0f
1 import { Inject, Input, Component, provide } from "ng-forward"; 1 import { Inject, Input, Component, provide } from "ng-forward";
2 import { PersonService } from "../../../lib/ng-noosfero-api/http/person.service"; 2 import { PersonService } from "../../../lib/ng-noosfero-api/http/person.service";
  3 +import { PermissionService } from "../../shared/services/permission.service";
3 import { ProfileImageEditorComponent } from "./profile-image-editor.component"; 4 import { ProfileImageEditorComponent } from "./profile-image-editor.component";
4 5
5 /** 6 /**
@@ -13,7 +14,7 @@ import { ProfileImageEditorComponent } from &quot;./profile-image-editor.component&quot;; @@ -13,7 +14,7 @@ import { ProfileImageEditorComponent } from &quot;./profile-image-editor.component&quot;;
13 templateUrl: 'app/profile/image/image.html', 14 templateUrl: 'app/profile/image/image.html',
14 providers: [provide('personService', { useClass: PersonService })] 15 providers: [provide('personService', { useClass: PersonService })]
15 }) 16 })
16 -@Inject(PersonService, "$uibModal", "$scope") 17 +@Inject(PersonService, PermissionService, "$uibModal", "$scope")
17 export class ProfileImageComponent { 18 export class ProfileImageComponent {
18 19
19 /** 20 /**
@@ -41,7 +42,8 @@ export class ProfileImageComponent { @@ -41,7 +42,8 @@ export class ProfileImageComponent {
41 croppedDataUrl: any; 42 croppedDataUrl: any;
42 modalInstance: any; 43 modalInstance: any;
43 44
44 - constructor(private personService: PersonService, private $uibModal: ng.ui.bootstrap.IModalService, private $scope: ng.IScope) { 45 + constructor(private personService: PersonService, private permissionService: PermissionService, private $uibModal: ng.ui.bootstrap.IModalService, private $scope: ng.IScope) {
  46 + console.log('wwwwwwwwwwwwwwwwwwwwwwww', this.editable);
45 } 47 }
46 48
47 fileSelected(file: any, errFiles: any) { 49 fileSelected(file: any, errFiles: any) {
@@ -73,6 +75,10 @@ export class ProfileImageComponent { @@ -73,6 +75,10 @@ export class ProfileImageComponent {
73 return this._showCamera; 75 return this._showCamera;
74 } 76 }
75 77
  78 + isEditable() {
  79 + return this.editable && this.permissionService.isAllowed(this.profile, 'allow_edit');
  80 + }
  81 +
76 82
77 /** 83 /**
78 * @ngdoc method 84 * @ngdoc method
src/app/profile/image/image.html
  Diff comments   View file @b471f0f
1 -<div id="profile-image-container" style="">  
2 - <div class="profile-image-wrap" title="{{ctrl.profile.name}}" ng-mouseenter="ctrl.showChange(true)" ng-mouseleave="ctrl.showChange(false)">  
3 - <img ng-if="ctrl.profile.image" ng-src="{{ctrl.profile.image.url}}" class="img-responsive profile-image">  
4 - <i ng-if="!ctrl.profile.image" class="fa {{ctrl.defaultIcon}} fa-5x profile-image"></i>  
5 - <div ng-if="ctrl.editable" class="upload-camera-container">  
6 - <i id="camera" class="fa fa-camera upload-camera" aria-hidden="true"></i>  
7 - </div>  
8 - <div ng-if="ctrl.editable" id="select-photo-container" name="select-photo-container" class="select-photo-container container" ng-class="ctrl.editClass">  
9 - <a id="upload-container" class="upload-container" href="#" rel="dialog" role="button">  
10 - <!-- The upload button hidden behind the camera -->  
11 - <div class="upload-button" ngf-select="ctrl.fileSelected($file)"  
12 - ngf-pattern="'image/*'" ngf-accept="'image/*'"  
13 - ngf-max-size="20MB" ngf-resize="{width: 100, height: 100}"  
14 - data-toggle="modal" data-target=".crop-dialog">  
15 - {{"profile.image.upload" | translate}}  
16 - </div>  
17 - </a>  
18 - </div>  
19 - 1 +<div ng-if="ctrl.isEditable()" id="profile-image-container">
  2 + <div class="profile-image-wrap" title="{{ctrl.profile.name}}" ng-mouseenter="ctrl.showChange(true)" ng-mouseleave="ctrl.showChange(false)">
  3 + <div class="hovereffect ">
  4 + <i ng-if="!ctrl.profile.image" class="fa {{ctrl.defaultIcon}} fa-5x profile-image"></i>
  5 + <img ng-if="ctrl.profile.image" ng-src="{{ctrl.profile.image.url}}" class="img-responsive profile-image">
  6 + <div class='container-camera'>
  7 + <a ngf-select="ctrl.fileSelected($file)"
  8 + ngf-pattern="'image/*'" ngf-accept="'image/*'"
  9 + ngf-max-size="20MB"
  10 + data-toggle="modal" data-target=".crop-dialog" href="#"><i class="fa fa-camera upload-camera" ></i>
  11 + </a>
  12 + </div>
  13 + <div class="overlay"></div>
20 </div> 14 </div>
  15 + </div>
21 </div> 16 </div>
  17 +<span ng-if="!ctrl.isEditable()" class="profile-image-wrap" title="{{ctrl.profile.name}}">
  18 + <img ng-if="ctrl.profile.image" ng-src="{{ctrl.profile.image.url}}" class="img-responsive profile-image">
  19 + <i ng-if="!ctrl.profile.image" class="fa {{ctrl.defaultIcon}} fa-5x profile-image"></i>
  20 +</span>
src/app/profile/image/image.scss
  Diff comments   View file @b471f0f
1 -i.profile-image {  
2 - color: rgb(44, 62, 80);  
3 -  
4 - border-radius: 50%;  
5 - background-clip: padding-box;  
6 - margin-bottom: 15px;  
7 -}  
8 -  
9 -.profile-image-wrap {  
10 - display: inline;  
11 -}  
12 -  
13 -#profile-image-container {  
14 - display: inline;  
15 -}  
16 -  
17 -#profile-image-container:hover {  
18 - .select-photo-container {  
19 - z-index: 1; 1 +.hovereffect {
  2 + width:100%;
  3 + height:100%;
  4 + float:left;
  5 + overflow:hidden;
  6 + position:relative;
  7 + text-align:center;
  8 + cursor:default;
  9 + .container-camera {
  10 + position: relative;
  11 + z-index: 2;
  12 + .upload-camera{
  13 + right: 0px;
  14 + left: 0px;
  15 + position: absolute;
  16 + font-size: 1.5em;
  17 + bottom: 2px;
  18 + text-shadow: 0px 0px 3px black;
  19 + color: white;
  20 + padding-top: 5px;
  21 + &:hover{
  22 + font-size: 1.5em;
  23 + background-color: rgba(0, 0, 0, 0.50);
  24 + }
  25 +
  26 + }
  27 + }
  28 + .overlay {
  29 + width:100%;
  30 + height:100%;
  31 + position:absolute;
  32 + overflow:hidden;
  33 + top:0;
  34 + left:0;
  35 + opacity:0;
  36 + background-color:rgba(0,0,0,0.5);
  37 + -webkit-transition:all .4s ease-in-out;
  38 + transition:all .4s ease-in-out;
  39 + z-index: 1;
  40 + }
  41 + img {
  42 + display:block;
  43 + position:relative;
  44 + -webkit-transition:all .4s linear;
  45 + transition:all .4s linear;
  46 + width: 100%;
  47 + }
  48 + &:hover {
  49 + img {
  50 + -ms-transform:scale(1.2);
  51 + -webkit-transform:scale(1.2);
  52 + transform:scale(1.2);
20 } 53 }
21 - .upload-camera-container {  
22 - transform: scale(.75); 54 + .overlay {
  55 + opacity:1;
  56 + filter:alpha(opacity=100);
23 } 57 }
24 -}  
25 -  
26 -.upload-camera-container {  
27 - text-align: left;  
28 - position: absolute;  
29 - z-index: 5;  
30 -}  
31 -  
32 -.upload-camera {  
33 - color: white;  
34 - position: absolute;  
35 - transition: all .3s cubic-bezier(.175, .885, .32, 1.275);  
36 - opacity: 1;  
37 -}  
38 -  
39 -.select-photo-container {  
40 - position: absolute;  
41 - z-index: -1;  
42 - background: #000;  
43 - background: rgba(0, 0, 0, .6);  
44 - background: linear-gradient(transparent, rgba(0, 0, 0, .6) 70%, rgba(0, 0, 0, .6) 100%);  
45 - transition: top .13s ease-out;  
46 -}  
47 -  
48 -#upload-container {  
49 - position: relative;  
50 - text-decoration: none;  
51 -}  
52 -  
53 -.upload-container a:hover {  
54 - text-decoration: none;  
55 -}  
56 -  
57 -.upload-button {  
58 - -webkit-font-smoothing: antialiased;  
59 - color: #fff;  
60 -}  
61 -  
62 -.upload-container {  
63 - color:#fff;  
64 - display: block;  
65 - overflow: hidden;  
66 - position: relative;  
67 - text-align: left;  
68 - min-width: 89px;  
69 -}  
70 -  
71 -.cropArea {  
72 - background: #E4E4E4;  
73 - overflow: hidden;  
74 - width:300px;  
75 - height:150px;  
76 -}  
77 -  
78 -.crop-area {  
79 - display: none;  
80 -}  
81 -  
82 -form .progress {  
83 - line-height: 15px;  
84 -}  
85 -  
86 -.progress {  
87 - display: inline-block;  
88 - width: 100px;  
89 - border: 3px groove #CCC;  
90 -}  
91 -.progress div {  
92 - font-size: smaller;  
93 - background: orange;  
94 - width: 0; 58 + }
95 } 59 }
src/app/profile/image/profile-image-editor.component.ts
  Diff comments   View file @b471f0f
@@ -4,7 +4,6 @@ import { PersonService } from &quot;../../../lib/ng-noosfero-api/http/person.service&quot; @@ -4,7 +4,6 @@ import { PersonService } from &quot;../../../lib/ng-noosfero-api/http/person.service&quot;
4 4
5 export class ProfileImageEditorComponent { 5 export class ProfileImageEditorComponent {
6 6
7 - activities: any;  
8 croppedDataUrl: string; 7 croppedDataUrl: string;
9 static $inject = ["picFile", "profile", "personService", "$uibModalInstance"]; 8 static $inject = ["picFile", "profile", "personService", "$uibModalInstance"];
10 9
src/app/profile/image/profile-image-editor.html
  Diff comments   View file @b471f0f
@@ -3,18 +3,14 @@ @@ -3,18 +3,14 @@
3 </div> 3 </div>
4 <div class="modal-body"> 4 <div class="modal-body">
5 <form class=""> 5 <form class="">
6 - <div ngf-drop ng-model="ctrl.picFile" ngf-pattern="image/*" class="cropArea"> 6 + <div ngf-drop ng-model="ctrl.picFile" ngf-pattern="image/*" class="crop-area">
7 <img-crop image="ctrl.picFile | ngfDataUrl" area-type="square" 7 <img-crop image="ctrl.picFile | ngfDataUrl" area-type="square"
8 result-image="ctrl.croppedDataUrl" ng-init="ctrl.croppedDataUrl=''"> 8 result-image="ctrl.croppedDataUrl" ng-init="ctrl.croppedDataUrl=''">
9 </img-crop> 9 </img-crop>
10 </div> 10 </div>
11 - <div> 11 + <div class='cropped-image'>
12 <img ng-src="{{ctrl.croppedDataUrl}}" /> 12 <img ng-src="{{ctrl.croppedDataUrl}}" />
13 - </div>  
14 - <span class="progress" ng-show="progress >= 0">  
15 - <div style="width: {{progress" ng-bind="progress + '%'"></div>  
16 - </span> <span ng-show="ctrl.result">Upload Successful</span> <span class="err"  
17 - ng-show="ctrl.errorMsg">{{errorMsg}}</span> 13 + </div>
18 </form> 14 </form>
19 15
20 <div class="actions"> 16 <div class="actions">
src/app/profile/image/profile-image-editor.scss 0 → 100644
  Diff comments   View file @b471f0f
@@ -0,0 +1,13 @@ @@ -0,0 +1,13 @@
  1 +.crop-area{
  2 + background: #E4E4E4;
  3 + height: 200px;
  4 +}
  5 +.cropped-image {
  6 + margin-top: 10px;
  7 + text-align: center;
  8 +}
  9 +
  10 +.modal-body .actions{
  11 + text-align: center;
  12 +
  13 +}
src/app/shared/services/permission.service.ts 0 → 100644
  Diff comments   View file @b471f0f
@@ -0,0 +1,11 @@ @@ -0,0 +1,11 @@
  1 +import {Injectable, Inject} from "ng-forward";
  2 +
  3 +type WithPermissions = noosfero.Profile | noosfero.Comment | noosfero.Article;
  4 +
  5 +@Injectable()
  6 +export class PermissionService {
  7 + isAllowed(target: WithPermissions, permission: string) {
  8 + return target.permissions.indexOf(permission) >= 0;
  9 + }
  10 +
  11 +}
src/lib/ng-noosfero-api/interfaces/article.ts
  Diff comments   View file @b471f0f
@@ -8,6 +8,8 @@ namespace noosfero { @@ -8,6 +8,8 @@ namespace noosfero {
8 parent: Article; 8 parent: Article;
9 body: string; 9 body: string;
10 title: string; 10 title: string;
  11 +
  12 +
11 name: string; 13 name: string;
12 published: boolean; 14 published: boolean;
13 setting: any; 15 setting: any;
src/lib/ng-noosfero-api/interfaces/comment.ts
  Diff comments   View file @b471f0f
@@ -5,6 +5,7 @@ namespace noosfero { @@ -5,6 +5,7 @@ namespace noosfero {
5 reply_of: Comment; 5 reply_of: Comment;
6 replies: Comment[]; 6 replies: Comment[];
7 body: string; 7 body: string;
  8 + permissions: string[];
8 } 9 }
9 10
10 export interface CommentViewModel extends Comment { 11 export interface CommentViewModel extends Comment {