-
![]()
-
-
-
-
-
-
+
+
+
+
+
![]()
+
+
+
+
+
+
+
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 @@