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 1 <div class="center-block text-center profile-image-block">
2 2 <a ui-sref="main.profile.info({profile: ctrl.owner.identifier})">
3 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 5 <div class="actions" ng-show="ctrl.isMember!=null">
7 6 <div class="organization-actions" ng-if="ctrl.displayOrganizationActions()">
8 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 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 1 import { Inject, Input, Component, provide } from "ng-forward";
2 2 import { PersonService } from "../../../lib/ng-noosfero-api/http/person.service";
  3 +import { PermissionService } from "../../shared/services/permission.service";
3 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 14 templateUrl: 'app/profile/image/image.html',
14 15 providers: [provide('personService', { useClass: PersonService })]
15 16 })
16   -@Inject(PersonService, "$uibModal", "$scope")
  17 +@Inject(PersonService, PermissionService, "$uibModal", "$scope")
17 18 export class ProfileImageComponent {
18 19  
19 20 /**
... ... @@ -41,7 +42,8 @@ export class ProfileImageComponent {
41 42 croppedDataUrl: any;
42 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 49 fileSelected(file: any, errFiles: any) {
... ... @@ -73,6 +75,10 @@ export class ProfileImageComponent {
73 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 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 14 </div>
  15 + </div>
21 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 4  
5 5 export class ProfileImageEditorComponent {
6 6  
7   - activities: any;
8 7 croppedDataUrl: string;
9 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 3 </div>
4 4 <div class="modal-body">
5 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 7 <img-crop image="ctrl.picFile | ngfDataUrl" area-type="square"
8 8 result-image="ctrl.croppedDataUrl" ng-init="ctrl.croppedDataUrl=''">
9 9 </img-crop>
10 10 </div>
11   - <div>
  11 + <div class='cropped-image'>
12 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 14 </form>
19 15  
20 16 <div class="actions">
... ...
src/app/profile/image/profile-image-editor.scss 0 → 100644
  Diff comments   View file @b471f0f
... ... @@ -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 @@
  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 8 parent: Article;
9 9 body: string;
10 10 title: string;
  11 +
  12 +
11 13 name: string;
12 14 published: boolean;
13 15 setting: any;
... ...
src/lib/ng-noosfero-api/interfaces/comment.ts
  Diff comments   View file @b471f0f
... ... @@ -5,6 +5,7 @@ namespace noosfero {
5 5 reply_of: Comment;
6 6 replies: Comment[];
7 7 body: string;
  8 + permissions: string[];
8 9 }
9 10  
10 11 export interface CommentViewModel extends Comment {
... ...