SAK-29574 Adapted presence list to morpheus

vishu77 · Jun 29, 2015 · b4d88a1 · b4d88a1
1 parent d9934a1
commit b4d88a1
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 18 deletions.
diff --git a/portal/portal-render-engine-impl/pack/src/webapp/vm/morpheus/includeFooterExtras.vm b/portal/portal-render-engine-impl/pack/src/webapp/vm/morpheus/includeFooterExtras.vm
@@ -4,8 +4,9 @@
 
         #if ($neoChat)
 
-            <div id="Mrphs-footerApp__chat" class="Mrphs-footerApp__presence is-hidden">
+            <div id="Mrphs-footerApp__chat" class="Mrphs-footerApp__portalChat is-hidden">
                 <a href="#" id="Mrphs-footerApp--toggle" class="Mrphs-footerApp--toggle Mrphs-footerApp--toggle-chat">
+                    <span class="fa fa-comments-o"></span>
                     ${rloader.pc_title} 
                     <span id="Mrphs-footerApp--count" class="Mrphs-footerApp--count Mrphs-footerApp--count-chat"></span>
                 </a>
@@ -19,6 +20,7 @@
                 <h1 class="skip">${rloader.sit_presencehead}</h1>
                 <div id="footerAppPresence" class="Mrphs-footerApp__presence">
                     <a href="#" id="presenceToggle" class="Mrphs-footerApp--toggle Mrphs-footerApp--toggle-presence">
+                        <span class="fa fa-users"></span>
                         <span class="skip">Toggle users present panel</span>
                     </a>
                     <span class="skip">Number of users present:</span>
@@ -244,25 +246,29 @@
 
 #if ( (!$neoChat) && ${loggedIn} && ${sitePages.pageNavShowPresenceLoggedIn} )
 
-    <div id="presenceArea" class="trayPopup hidden Mrphs-portalChat__presence is-hidden">
-        <div id="presenceWrapper" class="Mrphs-portalChat__presence--container">
-            <div id="presenceTitle" class="Mrphs-portalChat__presence--title">
+    <div id="presenceArea" class="trayPopup hidden Mrphs-presence__area is-hidden">
+        <div id="presenceWrapper" class="Mrphs-presence__area--wrapper">
+            <div id="presenceTitle" class="Mrphs-presence__area--title">
                 ${rloader.sit_presencetitle}
+                <a href="#" id="presenceClose" class="trayPopupClose Mrphs-presence__area--title--close"> </a>
             </div>
-            <a href="#" id="presenceClose" class="trayPopupClose Mrphs-portalChat__presence--popup">x</a>
-        </div>
 
         #if (${sitePages.pageNavPresenceIframe})
 
-            <iframe name="presenceIframe" id="presenceIframe" class="Mrphs-portalChat__presence--iframe" title="${rloader.sit_presencetitle}" src="${sitePages.pageNavPresenceUrl}?auto=true">
+            <iframe name="presenceIframe" id="presenceIframe" class="Mrphs-presence__area--iframe" title="${rloader.sit_presencetitle}" src="${sitePages.pageNavPresenceUrl}?auto=true">
             </iframe>
 
         #else
 
-            <div id="presenceIframe" class="Mrphs-portalChat__presence--iframe-div"></div>
-
+            <div id="presenceIframe" class="Mrphs-presence__area--iframe-div"></div>
+            <script>
+                //these are global variables...
+                var sakaiPresenceTimeDelay = ${sitePages.sakaiPresenceTimeDelay};
+                var sakaiPresenceFragment = "${sitePages.pageNavPresenceUrl}?output_fragment=yes&auto=true";
+                var sakaiLastPresenceTimeOut = setTimeout('updatePresence()', sakaiPresenceTimeDelay); 
+            </script>
         #end ## END of IF (${sitePages.pageNavPresenceIframe})
-
+        </div><!-- End of div#presenceWrapper -->
     </div> <!-- End of div#presenceArea -->
 
 #end ## END of IF ( (!$neoChat) && ${loggedIn} && ${sitePages.pageNavShowPresenceLoggedIn }
diff --git a/reference/library/src/morpheus-master/sass/modules/tool/chat/_chat.scss b/reference/library/src/morpheus-master/sass/modules/tool/chat/_chat.scss
@@ -6,26 +6,30 @@
 
 .Mrphs-{
 	&footerApp{
-		&__presence{
-		  	background-color: $footerApp__chat__header__background;
-		  	color: $footerApp__chat__header__color;
+		&__presence, &__portalChat{
+		    background-color: $footerApp__chat__header__background;
+		    color: $footerApp__chat__header__color;
 		    float: left;
 		    text-align: left;
 		    vertical-align: bottom;
-		    width: 225px;
 		    height: 30px;
-		    padding: 5px 0px 0px 0px;
+		    padding: 5px 10px 0px 10px;
 		    position: fixed;
 		    bottom: 0px;
 		    right: 20px;
-		}&--toggle{
+		}
+		&__portalChat{
+		    width: 205px;
+		}
+		&--toggle{
 		    display: inline-block;
-		    padding: 2px 0px 0px 10px;
+		    padding: 2px 0px 0px 0px;
 		    color: $footerApp__chat__header__color;
 		    text-decoration: none;
 		    height: 16px;
 		    font-weight: bold;
-		}&--count.present{
+		}
+		&--count.present{
 		    min-width: 15px;
 		    height: 15px;
 		    display: inline-block;
@@ -38,6 +42,58 @@
 		    padding: 2px;
 		    font-size: 0.8em;
 		  }
+		  &--count.empty{
+		  	display: none;
+		  }
+	}
+	&presence {
+		&__area {
+		    background-color: #fff;
+		    border: 1px solid #ccc;
+		    position: fixed;
+		    height: 265px;
+		    width: 175px;
+		    bottom: 30px;
+		    right: 20px;
+
+		    &--wrapper {
+		        width: 100%;
+		        height: 100%;
+		    }
+		    &--title {
+		        font-weight: bold;
+		        padding: 5px;
+		        vertical-align: middle;
+		        color: $footerApp__chat__header__color;
+		        background-color: $footerApp__chat__header__background;
+
+		        &--close {
+		            padding: 0px !important;
+		            content: '';
+		            width: 16px;
+		            height: 16px;
+		            background: url("/library/image/sakai/cross.png") 0 0 no-repeat;
+		            float: right;
+		            text-align: right;
+		            margin-top: 5px;
+			    }
+		    }
+		    &--iframe, &--iframe-div {
+		        height: 242px;
+		        width: 100%;
+		        overflow: auto;
+
+		       .presenceList{
+		            font-size: .8em;
+		            list-style: none;
+		            margin: 0;
+		            padding-left: .1em;
+		            li{
+		                margin-bottom: .2em;
+		            }
+		        }
+		    }
+		}
 	}
 	&portalChat{
 		    width: 225px;