From d7144bb478ced20e7b67457794ee916e394c717a Mon Sep 17 00:00:00 2001 From: Carlos Purificacao Date: Thu, 21 Jul 2016 10:29:07 -0300 Subject: [PATCH] Initial implementation --- bower.json | 9 ++++++++- gulp/watch.js | 1 + src/app/layout/blocks/profile-image/profile-image-block.html | 2 +- src/app/layout/blocks/profile-image/profile-image-block.scss | 18 ++++++++++++++++++ src/app/main/main.component.ts | 2 +- src/app/profile/image/image.component.ts | 59 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++-- src/app/profile/image/image.html | 25 +++++++++++++++++++++---- src/app/profile/image/image.scss | 91 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/app/profile/image/profile-image-editor.component.ts | 61 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/app/profile/image/profile-image-editor.html | 24 ++++++++++++++++++++++++ src/app/profile/info/profile-info.html | 10 ++++++---- src/app/profile/info/profile-info.scss | 21 +++++++++++++++++++++ src/languages/en.json | 1 + src/languages/pt.json | 1 + 14 files changed, 312 insertions(+), 13 deletions(-) create mode 100644 src/app/profile/image/profile-image-editor.component.ts create mode 100644 src/app/profile/image/profile-image-editor.html create mode 100644 src/app/profile/info/profile-info.scss diff --git a/bower.json b/bower.json index f4cb3d9..b1eb693 100644 --- a/bower.json +++ b/bower.json @@ -39,12 +39,19 @@ "angular-click-outside": "^2.7.1", "ng-ckeditor": "^0.2.1", "angular-tag-cloud": "^0.3.0", - "angular-ui-switch": "^0.1.1" + "angular-ui-switch": "^0.1.1", + "ng-file-upload": "^12.0.4", + "ng-img-crop": "^0.3.2" }, "devDependencies": { "angular-mocks": "~1.5.0" }, "overrides": { + "ng-file-upload": { + "main": [ + "ng-file-upload-all.js" + ] + }, "ng-ckeditor": { "main": [ "ng-ckeditor.js", diff --git a/gulp/watch.js b/gulp/watch.js index 8ba4ea0..2d957b0 100644 --- a/gulp/watch.js +++ b/gulp/watch.js @@ -46,6 +46,7 @@ gulp.task('watch', ['inject'], function () { watchPaths.push(path.join(src, '/app/**/*.html')); watchPaths.push(path.join(src, conf.paths.plugins, '/**/*.html')); }); + watchPaths.push(stylePaths); gulp.watch(watchPaths, function(event) { browserSync.reload(event.path); }); 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 f9159e3..0db0401 100644 --- a/src/app/layout/blocks/profile-image/profile-image-block.html +++ b/src/app/layout/blocks/profile-image/profile-image-block.html @@ -1,6 +1,6 @@
- + {{"blocks.profile_image.control_panel" | 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 a609250..585d4eb 100644 --- a/src/app/layout/blocks/profile-image/profile-image-block.scss +++ b/src/app/layout/blocks/profile-image/profile-image-block.scss @@ -2,4 +2,22 @@ .settings-link { display: block; } + .upload-camera-container { + top: 305px; + left: 23px; + } +} + +.profile-image-block-editable { + top: 287px; + width: 284px; + font-weight: 700; + height: 43px; + padding-left: 30px; + padding-top: 13px; } + + + + + diff --git a/src/app/main/main.component.ts b/src/app/main/main.component.ts index c5095b2..622c258 100644 --- a/src/app/main/main.component.ts +++ b/src/app/main/main.component.ts @@ -116,7 +116,7 @@ export class EnvironmentContent { "angular-bind-html-compile", "angularMoment", "angular.filter", "akoenig.deckgrid", "angular-timeline", "duScroll", "oitozero.ngSweetAlert", "pascalprecht.translate", "tmh.dynamicLocale", "angularLoad", - "angular-click-outside", "ngTagCloud", "noosfero.init", "uiSwitch"] + "angular-click-outside", "ngTagCloud", "noosfero.init", "uiSwitch", "ngFileUpload", "ngImgCrop"] }) @StateConfig([ { diff --git a/src/app/profile/image/image.component.ts b/src/app/profile/image/image.component.ts index a35ae94..9b68739 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} from "ng-forward"; - +import {Inject, Input, Component, provide} from "ng-forward"; +import {PersonService} from "../../../lib/ng-noosfero-api/http/person.service"; +import {ProfileImageEditorComponent} from "./profile-image-editor.component"; /** * @ngdoc controller @@ -10,7 +11,9 @@ import {Inject, Input, Component} from "ng-forward"; @Component({ selector: "noosfero-profile-image", templateUrl: 'app/profile/image/image.html', + providers: [ provide('personService', { useClass: PersonService }) ] }) +@Inject(PersonService, "$uibModal", "Upload", "$timeout", "$scope") export class ProfileImageComponent { /** @@ -29,7 +32,53 @@ export class ProfileImageComponent { * The default icon used by this profile */ defaultIcon: string; + + @Input() editable: boolean; + + @Input() editClass: string; + + picFile: any; + croppedDataUrl: any; + modalInstance: any; + constructor(private personService: PersonService, private $uibModal: any, private Upload: any, + private $timeout: any, private $scope: ng.IScope) { + //console.log("ImageComponent.Created with upload: ", this.Upload); + //console.log("ImageComponent.Cropped: ", this.croppedDataUrl); + //console.log("ImageComponent.PicFile: ", this.picFile); + } + + fileSelected(file: any, errFiles: any) { + console.log("File selected: ", file); + if (file) { + this.picFile = file; + this.modalInstance = this.$uibModal.open({ + templateUrl: 'app/profile/image/profile-image-editor.html', + controller: ProfileImageEditorComponent, + controllerAs: 'ctrl', + scope: this.$scope, + bindToController: true, + backdrop: 'static', + resolve: { + picFile: this.picFile, + profile: this.profile, + personService: this.personService + } + }); + } + } + + private _showCamera: boolean = false; + + showChange(show: boolean) { + this._showCamera = show; + } + + showCamera() { + return this._showCamera; + } + + /** * @ngdoc method * @name ngOnInit @@ -43,5 +92,11 @@ export class ProfileImageComponent { this.defaultIcon = 'fa-user'; } } + + ngAfterViewInit() { + console.log("Parent scope: ", this.$scope.$parent['ctrl']['__proto__']); + console.log("Editable: " + this.editable); + console.log("Edit_class: " + this.editClass); + } } diff --git a/src/app/profile/image/image.html b/src/app/profile/image/image.html index 29c9fec..37f3475 100644 --- a/src/app/profile/image/image.html +++ b/src/app/profile/image/image.html @@ -1,4 +1,21 @@ - - - - +
+
+ + +
+ +
+ + +
+
diff --git a/src/app/profile/image/image.scss b/src/app/profile/image/image.scss index 0f67fe7..8bc935c 100644 --- a/src/app/profile/image/image.scss +++ b/src/app/profile/image/image.scss @@ -5,3 +5,94 @@ i.profile-image { 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; + } + .upload-camera-container { + transform: scale(.75); + } +} + +.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 { + //overflow: hidden; + 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; + //word-wrap: break-word; +} + +.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 new file mode 100644 index 0000000..0752440 --- /dev/null +++ b/src/app/profile/image/profile-image-editor.component.ts @@ -0,0 +1,61 @@ +import {StateConfig, Component, Input, Output, Inject, provide} from 'ng-forward'; +import {TranslateProfile} from "../../shared/pipes/translate-profile.filter"; +import {PersonService} from "../../../lib/ng-noosfero-api/http/person.service"; + +export class ProfileImageEditorComponent { + + activities: any; + croppedDataUrl: string; + static $inject = ["Upload", "$timeout", "$scope", "picFile", "profile", "personService", "$uibModalInstance"]; + + constructor( + private upload: any, private $timeout: any, private $scope: ng.IScope, + public picFile: any, private profile: noosfero.Profile, private personService: PersonService, + private $uibModalInstance: any) { + //this.picFile = this.picFile; + console.log("Value set: ", this.picFile); + } + + uploadImage(dataUrl: any, name: any) { + console.log("Uploading [" + name + "] with data: ", dataUrl); + let data = dataUrl.substring(dataUrl.indexOf('base64,') + 7); + let image_name = this.profile.name + "_" + name; + let base64_image_json = { + tempfile: data, + filename: image_name, + type: this.picFile.type + }; + console.log("Base64Image JSON: ", base64_image_json); + this.personService.uploadImage(this.profile, base64_image_json).then( (result: any) => { + console.log("Upload finished: ", result); + this.$uibModalInstance.close(name); + }); + } + + uploadFiles(file: any, errFiles: any) { + console.log("Going to upload: ", file); + + //$scope.f = file; + let errFile = errFiles && errFiles[0]; + if (file) { + let base64 = this.upload.base64DataUrl(file); + console.log("Base64", base64); + base64.then( (base64Urls: any) => { + console.log("Uploading base64Urls: ", base64Urls); + let data = base64Urls.substring(base64Urls.indexOf('base64,') + 7); + let image_name = this.profile.name + "_" + file.name; + let base64_image_json = { + tempfile: data, + filename: image_name, + type: file.type + }; + console.log("Base64Image JSON: ", base64_image_json); + this.personService.uploadImage(this.profile, base64_image_json); + }); + } + } + + cancel() { + this.$uibModalInstance.close(); + } +} diff --git a/src/app/profile/image/profile-image-editor.html b/src/app/profile/image/profile-image-editor.html new file mode 100644 index 0000000..585792e --- /dev/null +++ b/src/app/profile/image/profile-image-editor.html @@ -0,0 +1,24 @@ +
+

{{"profile.image.edit" | translate}}

+
+
+
+
+ + +
+
+ +
+ +
+ Upload Successful {{errorMsg}} +
+ +
+ + +
+
diff --git a/src/app/profile/info/profile-info.html b/src/app/profile/info/profile-info.html index db417de..2069769 100644 --- a/src/app/profile/info/profile-info.html +++ b/src/app/profile/info/profile-info.html @@ -6,10 +6,12 @@

{{vm.profile.name}}

- - {{vm.profile | translateProfile}} -
- {{"profile.member_since" | translate}}: {{vm.profile.created_at | amDateFormat:'MMMM YYYY'}} + +
+ {{vm.profile | translateProfile}} +
+ {{"profile.member_since" | translate}}: {{vm.profile.created_at | amDateFormat:'MMMM YYYY'}} +
diff --git a/src/app/profile/info/profile-info.scss b/src/app/profile/info/profile-info.scss new file mode 100644 index 0000000..fb6d236 --- /dev/null +++ b/src/app/profile/info/profile-info.scss @@ -0,0 +1,21 @@ +.profile-info .upload-camera-container { + top: 162px; + left: 39px; +} + +.profile-info-editable { + top: 151px; + width: 103px; + height: 28px; +} + +.profile-info-editable .upload-button { + font-size: 0.8em; + padding-top: 9px; + padding-left: 6px; + font-weight: bold; +} + +.profile-info-extrainfo { + margin-top: 10px; +} \ No newline at end of file diff --git a/src/languages/en.json b/src/languages/en.json index ec23074..8b1ded8 100644 --- a/src/languages/en.json +++ b/src/languages/en.json @@ -19,6 +19,7 @@ "profile.others_info": "Others", "profile.community.title": "Community", "profile.person.title": "Person", + "profile.image.upload": "Upload Photo", "activities.title": "Activities", "activities.create_article.description": "has published on", "activities.add_member_in_community.description": "has joined the community", diff --git a/src/languages/pt.json b/src/languages/pt.json index 02f7c95..742283a 100644 --- a/src/languages/pt.json +++ b/src/languages/pt.json @@ -19,6 +19,7 @@ "profile.others_info": "Outras informações", "profile.community.title": "Comunidade", "profile.person.title": "Pessoa", + "profile.image.upload": "Enviar photo", "activities.title": "Atividades", "activities.create_article.description": "publicou em", "activities.add_member_in_community.description": "entrou na comunidade", -- libgit2 0.21.2