SAK-32223 Drop down now works as expected. (sakaiproject#3956)

aagrandaz · Feb 22, 2017 · d7ae013 · d7ae013
1 parent 6bcc9fe
commit d7ae013
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 58 deletions.
diff --git a/portal/portal-render-engine-impl/pack/src/webapp/vm/morpheus/includeLoginNav.vm b/portal/portal-render-engine-impl/pack/src/webapp/vm/morpheus/includeLoginNav.vm
@@ -64,7 +64,7 @@
                                     #if (${tabsSites.mrphs_profileToolUrl})
 
                                         <div id="loginUser" role="menuitem" class="has-avatar Mrphs-userNav__submenuitem--userlink #if (${site.isCurrentSite}) current-site #end">
-                                            <a href="javascript:void(0);" class="Mrphs-userNav__submenuitem--profilepicture" style="background-image:url(/direct/profile/${loginUserId}/image/thumb)" tabindex="-1"></a>
+                                            <a href="javascript:void(0);" class="Mrphs-userNav__drop-btn Mrphs-userNav__submenuitem--profilepicture" style="background-image:url(/direct/profile/${loginUserId}/image/thumb)" tabindex="-1"></a>
                                             <a href="javascript:void(0);" class="Mrphs-userNav__drop-btn Mrphs-userNav__submenuitem--username">${loginUserFirstName}</a>
                                         </div>
 
@@ -86,7 +86,7 @@
                                         #if (${tabsSites.mrphs_profileToolUrl})
                                             <div class="has-avatar">
                                                 <a class="Mrphs-userNav__submenuitem--profilelink" href="${tabsSites.mrphs_profileToolUrl}">
-                                                    <span class="Mrphs-userNav__submenuitem--profilepicture" style="background-image:url(/direct/profile/${loginUserId}/image/thumb)" tabindex="-1"></span>
+                                                    <span class="Mrphs-userNav__submenuitem--profilepicture Mrphs-userNav__pic-changer" style="background-image:url(/direct/profile/${loginUserId}/image/thumb)" tabindex="-1"></span>
                                                 </a>
                                             </div>
                                             <div class="Mrphs-userNav__submenuitem--profile">

diff --git a/reference/library/src/morpheus-master/js/src/sakai.morpheus.usernav.js b/reference/library/src/morpheus-master/js/src/sakai.morpheus.usernav.js
@@ -44,7 +44,7 @@ function toggleUserNav(event){
 $PBJQ(".js-toggle-user-nav a#loginUser > .Mrphs-userNav__drop-btn", "#loginLinks").on("click", toggleUserNav);
 $PBJQ(".js-toggle-user-nav .Mrphs-userNav__drop-btn", "#loginLinks").on("click", toggleUserNav);
 
-$PBJQ('.Mrphs-userNav__submenuitem--profilepicture').on("click", function (event) {
+$PBJQ('.Mrphs-userNav__pic-changer').on("click", function (event) {
 
     var $profileLink = $PBJQ(this);
 

diff --git a/reference/library/src/morpheus-master/sass/modules/navigation/_base.scss b/reference/library/src/morpheus-master/sass/modules/navigation/_base.scss
@@ -409,26 +409,28 @@ body.is-logged-out{
 			&:hover, &:active 
 			{
 				box-shadow: 0px 0px 5px 1px rgba(165, 165, 165, 0.95);
-                &:after {
-                    content: 'Change';
-                    //background: $nyu-profile-picture-change-background-color;
-                    //color: $nyu-profile-picture-change-color;
-                    color: #FFFFFF;
-                    position: absolute;
-                    bottom: 0px;
-                    font-size: 10px;
-                    width: 100%;
-                    text-align: center;
-                    padding: 0 0 4px;
-                    //opacity: $nyu-profile-picture-change-opacity;
-                    box-shadow: -1px 0 3px #666;
-                }
 			}
 			@media #{$phone}
 			{
 				margin-right: 1em;
 			}
 		}
+		.#{$namespace}userNav__pic-changer{
+			&:hover, &:active 
+			{
+				&:after {
+					content: 'Change';
+					color: #FFFFFF;
+					position: absolute;
+					bottom: 0px;
+					font-size: 10px;
+					width: 100%;
+					text-align: center;
+					padding: 0 0 4px;
+					box-shadow: -1px 0 3px #666;
+				}
+			}
+		}
 		.#{$namespace}userNav__submenuitem--username, .#{$namespace}userNav__submenuitem--userid{
 			@media #{$phone}{
 				display: none;
@@ -937,48 +939,76 @@ body.is-logged-out{
 	z-index: 20;
 }
 
-#cropToolbar {
-    margin-top: 10px;
-    .profile-image-zoom-in {
-      &:before {
-        font-family: 'FontAwesome';
-        content: '\f00e';
-      }
+#profileImageUpload {
+    .modal-dialog {
+        width: 332px !important;
     }
-    .profile-image-zoom-out {
-      &:before {
-        font-family: 'FontAwesome';
-        content: '\f010';
-      }
-    }
-    .profile-image-pan-left {
-      &:before {
-        font-family: 'FontAwesome';
-        content: '\f060';
-      }
-    }
-    .profile-image-pan-right {
-      &:before {
-        font-family: 'FontAwesome';
-        content: '\f061';
-      }
-    }
-    .profile-image-pan-up {
-      &:before {
-        font-family: 'FontAwesome';
-        content: '\f062';
-      }
+
+    #upload {
+        position: relative;
+
+        input[type="file"] {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+        }
     }
-    .profile-image-pan-down {
-      &:before {
-        font-family: 'FontAwesome';
-        content: '\f063';
-      }
+    #cropme {
+        height: 300px;
+        width: 300px;
+        margin-bottom: 20px;
+
+       .cropper-view-box {
+            border-radius: 50% !important;
+        }
     }
-    .profile-image-rotate {
-      &:before {
-        font-family: 'FontAwesome';
-        content: '\f01e';
-      }
+
+    #cropToolbar {
+        margin-top: 10px;
+        .profile-image-zoom-in {
+            &:before {
+                font-family: 'FontAwesome';
+                content: '\f00e';
+            }
+        }
+        .profile-image-zoom-out {
+            &:before {
+                font-family: 'FontAwesome';
+                content: '\f010';
+            }
+        }
+        .profile-image-pan-left {
+            &:before {
+                font-family: 'FontAwesome';
+                content: '\f060';
+            }
+        }
+        .profile-image-pan-right {
+            &:before {
+                font-family: 'FontAwesome';
+                content: '\f061';
+            }
+        }
+        .profile-image-pan-up {
+            &:before {
+                font-family: 'FontAwesome';
+                content: '\f062';
+            }
+        }
+        .profile-image-pan-down {
+            &:before {
+                font-family: 'FontAwesome';
+                content: '\f063';
+            }
+        }
+        .profile-image-rotate {
+            &:before {
+                font-family: 'FontAwesome';
+                content: '\f01e';
+            }
+        }
     }
-  }
+}