From b471f0f7838ae7feecfb5326e18e1173fa051921 Mon Sep 17 00:00:00 2001 From: Leandro Nunes dos Santos Date: Thu, 4 Aug 2016 13:01:04 -0300 Subject: [PATCH] put the image upload works minimally propely --- src/app/layout/blocks/profile-image/profile-image-block.html | 3 +-- src/app/layout/blocks/profile-image/profile-image-block.scss | 22 ++-------------------- src/app/profile/image/image.component.ts | 10 ++++++++-- src/app/profile/image/image.html | 37 ++++++++++++++++++------------------- src/app/profile/image/image.scss | 148 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------------------------------------------------------------- src/app/profile/image/profile-image-editor.component.ts | 1 - src/app/profile/image/profile-image-editor.html | 10 +++------- src/app/profile/image/profile-image-editor.scss | 13 +++++++++++++ src/app/shared/services/permission.service.ts | 11 +++++++++++ src/lib/ng-noosfero-api/interfaces/article.ts | 2 ++ src/lib/ng-noosfero-api/interfaces/comment.ts | 1 + 11 files changed, 115 insertions(+), 143 deletions(-) create mode 100644 src/app/profile/image/profile-image-editor.scss create mode 100644 src/app/shared/services/permission.service.ts diff --git a/src/app/layout/blocks/profile-image/profile-image-block.html b/src/app/layout/blocks/profile-image/profile-image-block.html index 6005aa1..2d5f38e 100644 --- a/src/app/layout/blocks/profile-image/profile-image-block.html +++ b/src/app/layout/blocks/profile-image/profile-image-block.html @@ -1,8 +1,7 @@
- - {{"blocks.profile_image.control_panel" | translate}} +
{{"blocks.profile_image.join" | translate}} diff --git a/src/app/layout/blocks/profile-image/profile-image-block.scss b/src/app/layout/blocks/profile-image/profile-image-block.scss index 390c7af..d854b68 100644 --- a/src/app/layout/blocks/profile-image/profile-image-block.scss +++ b/src/app/layout/blocks/profile-image/profile-image-block.scss @@ -1,23 +1,5 @@ .profile-image-block { - .settings-link { - display: block; + .img-responsive { + display: initial; } - .upload-camera-container { - top: 77%; - left: 6%; - } -} - -.profile-image-block-editable { - top: 68%; - width: 284px; - font-weight: 700; - height: 43px; - padding-left: 30px; - padding-top: 13px; } - - - - - diff --git a/src/app/profile/image/image.component.ts b/src/app/profile/image/image.component.ts index cd46f19..9404e7a 100644 --- a/src/app/profile/image/image.component.ts +++ b/src/app/profile/image/image.component.ts @@ -1,5 +1,6 @@ import { Inject, Input, Component, provide } from "ng-forward"; import { PersonService } from "../../../lib/ng-noosfero-api/http/person.service"; +import { PermissionService } from "../../shared/services/permission.service"; import { ProfileImageEditorComponent } from "./profile-image-editor.component"; /** @@ -13,7 +14,7 @@ import { ProfileImageEditorComponent } from "./profile-image-editor.component"; templateUrl: 'app/profile/image/image.html', providers: [provide('personService', { useClass: PersonService })] }) -@Inject(PersonService, "$uibModal", "$scope") +@Inject(PersonService, PermissionService, "$uibModal", "$scope") export class ProfileImageComponent { /** @@ -41,7 +42,8 @@ export class ProfileImageComponent { croppedDataUrl: any; modalInstance: any; - constructor(private personService: PersonService, private $uibModal: ng.ui.bootstrap.IModalService, private $scope: ng.IScope) { + constructor(private personService: PersonService, private permissionService: PermissionService, private $uibModal: ng.ui.bootstrap.IModalService, private $scope: ng.IScope) { + console.log('wwwwwwwwwwwwwwwwwwwwwwww', this.editable); } fileSelected(file: any, errFiles: any) { @@ -73,6 +75,10 @@ export class ProfileImageComponent { return this._showCamera; } + isEditable() { + return this.editable && this.permissionService.isAllowed(this.profile, 'allow_edit'); + } + /** * @ngdoc method diff --git a/src/app/profile/image/image.html b/src/app/profile/image/image.html index 41e23d6..aa5d1bb 100644 --- a/src/app/profile/image/image.html +++ b/src/app/profile/image/image.html @@ -1,21 +1,20 @@ -
-
- - -
- -
- - +
+
+
+ + +
+ + +
+
+
+ + + + diff --git a/src/app/profile/image/image.scss b/src/app/profile/image/image.scss index d41268f..b3864e6 100644 --- a/src/app/profile/image/image.scss +++ b/src/app/profile/image/image.scss @@ -1,95 +1,59 @@ -i.profile-image { - color: rgb(44, 62, 80); - - border-radius: 50%; - background-clip: padding-box; - margin-bottom: 15px; -} - -.profile-image-wrap { - display: inline; -} - -#profile-image-container { - display: inline; -} - -#profile-image-container:hover { - .select-photo-container { - z-index: 1; +.hovereffect { + width:100%; + height:100%; + float:left; + overflow:hidden; + position:relative; + text-align:center; + cursor:default; + .container-camera { + position: relative; + z-index: 2; + .upload-camera{ + right: 0px; + left: 0px; + position: absolute; + font-size: 1.5em; + bottom: 2px; + text-shadow: 0px 0px 3px black; + color: white; + padding-top: 5px; + &:hover{ + font-size: 1.5em; + background-color: rgba(0, 0, 0, 0.50); + } + + } + } + .overlay { + width:100%; + height:100%; + position:absolute; + overflow:hidden; + top:0; + left:0; + opacity:0; + background-color:rgba(0,0,0,0.5); + -webkit-transition:all .4s ease-in-out; + transition:all .4s ease-in-out; + z-index: 1; + } + img { + display:block; + position:relative; + -webkit-transition:all .4s linear; + transition:all .4s linear; + width: 100%; + } + &:hover { + img { + -ms-transform:scale(1.2); + -webkit-transform:scale(1.2); + transform:scale(1.2); } - .upload-camera-container { - transform: scale(.75); + .overlay { + opacity:1; + filter:alpha(opacity=100); } -} - -.upload-camera-container { - text-align: left; - position: absolute; - z-index: 5; -} - -.upload-camera { - color: white; - position: absolute; - transition: all .3s cubic-bezier(.175, .885, .32, 1.275); - opacity: 1; -} - -.select-photo-container { - position: absolute; - z-index: -1; - background: #000; - background: rgba(0, 0, 0, .6); - background: linear-gradient(transparent, rgba(0, 0, 0, .6) 70%, rgba(0, 0, 0, .6) 100%); - transition: top .13s ease-out; -} - -#upload-container { - position: relative; - text-decoration: none; -} - -.upload-container a:hover { - text-decoration: none; -} - -.upload-button { - -webkit-font-smoothing: antialiased; - color: #fff; -} - -.upload-container { - color:#fff; - display: block; - overflow: hidden; - position: relative; - text-align: left; - min-width: 89px; -} - -.cropArea { - background: #E4E4E4; - overflow: hidden; - width:300px; - height:150px; -} - -.crop-area { - display: none; -} - -form .progress { - line-height: 15px; -} - -.progress { - display: inline-block; - width: 100px; - border: 3px groove #CCC; -} -.progress div { - font-size: smaller; - background: orange; - width: 0; + } } diff --git a/src/app/profile/image/profile-image-editor.component.ts b/src/app/profile/image/profile-image-editor.component.ts index 757bd77..7fd4053 100644 --- a/src/app/profile/image/profile-image-editor.component.ts +++ b/src/app/profile/image/profile-image-editor.component.ts @@ -4,7 +4,6 @@ import { PersonService } from "../../../lib/ng-noosfero-api/http/person.service" export class ProfileImageEditorComponent { - activities: any; croppedDataUrl: string; static $inject = ["picFile", "profile", "personService", "$uibModalInstance"]; diff --git a/src/app/profile/image/profile-image-editor.html b/src/app/profile/image/profile-image-editor.html index e58eb74..96b7910 100644 --- a/src/app/profile/image/profile-image-editor.html +++ b/src/app/profile/image/profile-image-editor.html @@ -3,18 +3,14 @@
-
+
-
+
-
- -
- Upload Successful {{errorMsg}} +
diff --git a/src/app/profile/image/profile-image-editor.scss b/src/app/profile/image/profile-image-editor.scss new file mode 100644 index 0000000..c52e94f --- /dev/null +++ b/src/app/profile/image/profile-image-editor.scss @@ -0,0 +1,13 @@ +.crop-area{ + background: #E4E4E4; + height: 200px; +} +.cropped-image { + margin-top: 10px; + text-align: center; +} + +.modal-body .actions{ + text-align: center; + +} diff --git a/src/app/shared/services/permission.service.ts b/src/app/shared/services/permission.service.ts new file mode 100644 index 0000000..596fe53 --- /dev/null +++ b/src/app/shared/services/permission.service.ts @@ -0,0 +1,11 @@ +import {Injectable, Inject} from "ng-forward"; + +type WithPermissions = noosfero.Profile | noosfero.Comment | noosfero.Article; + +@Injectable() +export class PermissionService { + isAllowed(target: WithPermissions, permission: string) { + return target.permissions.indexOf(permission) >= 0; + } + +} diff --git a/src/lib/ng-noosfero-api/interfaces/article.ts b/src/lib/ng-noosfero-api/interfaces/article.ts index 81c4b89..2c9f34e 100644 --- a/src/lib/ng-noosfero-api/interfaces/article.ts +++ b/src/lib/ng-noosfero-api/interfaces/article.ts @@ -8,6 +8,8 @@ namespace noosfero { parent: Article; body: string; title: string; + + name: string; published: boolean; setting: any; diff --git a/src/lib/ng-noosfero-api/interfaces/comment.ts b/src/lib/ng-noosfero-api/interfaces/comment.ts index 6611ad8..2f8a3c3 100644 --- a/src/lib/ng-noosfero-api/interfaces/comment.ts +++ b/src/lib/ng-noosfero-api/interfaces/comment.ts @@ -5,6 +5,7 @@ namespace noosfero { reply_of: Comment; replies: Comment[]; body: string; + permissions: string[]; } export interface CommentViewModel extends Comment { -- libgit2 0.21.2