Update #74: Friendly disconnected messages

When the live connection to the server is interrupted some ui elements
are disabled. If the connection fails (due to errors or failed
reconnection) a dialog instructs the user to check their connection and
refresh the browser. Relates to Device, Job and User pages (logs and
attachments).

Disco.Web/ClientSource/Style/Device.css

@@ -357,6 +357,15 @@
   background-color: #ededed;
   border: 1px solid #cccccc;
 }
+#deviceShowResources #Attachments div.attachmentInput span.action.disabled {
+  color: rgba(51, 51, 51, 0.2);
+  cursor: default;
+}
+#deviceShowResources #Attachments div.attachmentInput span.action.disabled:hover {
+  color: rgba(51, 51, 51, 0.2);
+  background-color: inherit;
+  border: 1px solid #ffffff;
+}
 #Devices_Export .Devices_Export_Type_Target {
   margin-top: 10px;
   display: none;

Disco.Web/ClientSource/Style/Device.less

@@ -330,6 +330,17 @@
                     background-color: @SubtleColour;
                     border: 1px solid @SubtleBorderColour;
                 }
+
+                &.disabled {
+                    color: fade(@HeaderBackgroundColour, 20%);
+                    cursor: default;
+
+                    &:hover {
+                        color: fade(@HeaderBackgroundColour, 20%);
+                        background-color: inherit;
+                        border: 1px solid @white;
+                    }
+                }
             }
         }
     }

Disco.Web/ClientSource/Style/Job.css

@@ -346,6 +346,15 @@
   background-color: #ededed;
   border: 1px solid #cccccc;
 }
+#jobShowResources #Comments div.commentInput span.action.disabled {
+  color: rgba(51, 51, 51, 0.2);
+  cursor: default;
+}
+#jobShowResources #Comments div.commentInput span.action.disabled:hover {
+  color: rgba(51, 51, 51, 0.2);
+  background-color: inherit;
+  border: 1px solid #ffffff;
+}
 #jobShowResources #AttachmentsContainer {
   padding: 0;
 }
@@ -446,6 +455,15 @@
   background-color: #ededed;
   border: 1px solid #cccccc;
 }
+#jobShowResources #Attachments div.attachmentInput span.action.disabled {
+  color: rgba(51, 51, 51, 0.2);
+  cursor: default;
+}
+#jobShowResources #Attachments div.attachmentInput span.action.disabled:hover {
+  color: rgba(51, 51, 51, 0.2);
+  background-color: inherit;
+  border: 1px solid #ffffff;
+}
 #Job_Show_Job_Actions_AddQueue_Dialog {
   height: 400px;
 }

Disco.Web/ClientSource/Style/Job.less

@@ -336,6 +336,17 @@
                     background-color: @SubtleColour;
                     border: 1px solid @SubtleBorderColour;
                 }
+
+                &.disabled {
+                    color: fade(@HeaderBackgroundColour, 20%);
+                    cursor: default;
+
+                    &:hover {
+                        color: fade(@HeaderBackgroundColour, 20%);
+                        background-color: inherit;
+                        border: 1px solid @white;
+                    }
+                }
             }
         }
     }
@@ -452,6 +463,17 @@
                     background-color: @SubtleColour;
                     border: 1px solid @SubtleBorderColour;
                 }
+
+                &.disabled {
+                    color: fade(@HeaderBackgroundColour, 20%);
+                    cursor: default;
+
+                    &:hover {
+                        color: fade(@HeaderBackgroundColour, 20%);
+                        background-color: inherit;
+                        border: 1px solid @white;
+                    }
+                }
             }
         }
     }

Disco.Web/ClientSource/Style/User.css

@@ -444,6 +444,15 @@
   background-color: #ededed;
   border: 1px solid #cccccc;
 }
+#userShowResources #Attachments div.attachmentInput span.action.disabled {
+  color: rgba(51, 51, 51, 0.2);
+  cursor: default;
+}
+#userShowResources #Attachments div.attachmentInput span.action.disabled:hover {
+  color: rgba(51, 51, 51, 0.2);
+  background-color: inherit;
+  border: 1px solid #ffffff;
+}
 #User_Show_Details_Actions_CreateJob_Dialog #CreateJob_Assignments {
   margin-top: 6px;
   background-color: #ffffff;

Disco.Web/ClientSource/Style/User.less

@@ -463,6 +463,17 @@
                     background-color: @SubtleColour;
                     border: 1px solid @SubtleBorderColour;
                 }
+
+                &.disabled {
+                    color: fade(@HeaderBackgroundColour, 20%);
+                    cursor: default;
+
+                    &:hover {
+                        color: fade(@HeaderBackgroundColour, 20%);
+                        background-color: inherit;
+                        border: 1px solid @white;
+                    }
+                }
             }
         }
     }