Work on speechbubble

[TFS Changeset #79319]

umbraco/presentation/umbraco/css/umbracoGui.css

@@ -40,8 +40,28 @@ body{
 #rightDIV{width: 70%; position: absolute; top: 0px; right: 0px;}
 #uiArea{position: relative; margin: 0px 10px 0px 10px; display: none;}
 
-#defaultSpeechbubble{z-index: 10; display: none; background-image: url(../images/speechBubble/speechbubble.gif); width: 231px; position: absolute; right: 20px; bottom: 20px; height: 84px;}
-				
+#defaultSpeechbubble{z-index: 10; display: none; width: 231px; position: absolute; right: 30px; bottom: 20px; margin: 0px; padding:0;}
+.speechClose {float: right; width: 18px; height: 18px; margin-right: 18px; display: none;}
+.speechBubbleTop {background: url('../images/speechbubble/speechbubble_top.png') no-repeat; width: 235px; height: 6px; margin: 0px 0px 0px 3px; padding:0;}
+.speechBubbleContent {background: url('../images/speechbubble/speechbubble_body.png') no-repeat; width: 235px; margin:0;padding: 10px 20px 10px 10px;}
+.speechBubbleBottom {background: url('../images/speechbubble/speechbubble_bottom.png') no-repeat; width: 235px; height: 30px; margin:0px 0px 0px 1px;padding:0;}
+.speechBubbleContent h3 
+{
+    font-size: 14px;
+    font-weight: bold;
+  	font-family: Trebuchet MS, Lucida Grande, verdana, arial;
+    margin: 0;
+    padding: 0;
+    display: block;
+  	width: 220px;
+}
+.speechBubbleContent p 
+{
+    font-size: 11px;
+  	font-family: Trebuchet MS, Lucida Grande, verdana, arial;
+  	margin: 0;
+  	width: 220px;
+}
 #tray
 {
 	margin: 0px;

umbraco/presentation/umbraco/umbraco.aspx

@@ -42,6 +42,8 @@
         PathNameAlias="UmbracoRoot" />
     <umb:JsInclude ID="JsInclude16" runat="server" FilePath="Application/jQuery/jquery.cookie.js"
         PathNameAlias="UmbracoClient" Priority="1" />
+    <umb:JsInclude ID="JsInclude17" runat="server" FilePath="Application/jQuery/jquery.idle-timer.js"
+        PathNameAlias="UmbracoClient" Priority="1" />
     <script type="text/javascript">
         this.name = 'umbracoMain';
     </script>
@@ -74,6 +76,7 @@
                 </div>
             </asp:Panel>
             <div class="topBarButtons">
+                <span id="logout-warning" style="display:none;">You're idle. Logout will happen in <span id="logout-warning-counter"></span>.</span>
                 <button onclick="UmbClientMgr.appActions().launchAbout();" class="topBarButton">
                     <img src="images/aboutNew.png" alt="about" /><span><%=umbraco.ui.Text("general", "about")%></span></button>
                 <button onclick="UmbClientMgr.appActions().launchHelp('<%=this.getUser().Language%>', '<%=this.getUser().UserType.Name%>');"
@@ -163,6 +166,18 @@
             }
 
 
+            // add idle timer
+            var stimeout = 60000;
+
+            jQuery('#umbracoMainPageBody').bind("idle.idleTimer", function () {
+                jQuery("#logout-warning").show();
+            });
+
+            jQuery('#umbracoMainPageBody').bind("active.idleTimer", function () {
+                jQuery("#logout-warning").hide();
+            });
+
+            jQuery('#umbracoMainPageBody').idleTimer(stimeout);
 
             jQuery("#right").show();
         });

umbraco/presentation/umbraco/umbraco.aspx.designer.cs

@@ -183,6 +183,15 @@ namespace umbraco.cms.presentation {
         /// </remarks>
         protected global::ClientDependency.Core.Controls.JsInclude JsInclude16;
         
+        /// <summary>
+        /// JsInclude17 control.
+        /// </summary>
+        /// <remarks>
+        /// Auto-generated field.
+        /// To modify move field declaration from designer file to code-behind file.
+        /// </remarks>
+        protected global::ClientDependency.Core.Controls.JsInclude JsInclude17;
+        
         /// <summary>
         /// Form1 control.
         /// </summary>