Feature #44: Image capture WebRTC & HTML5 FileIO

Silverlight was previously used to capture webcam pictures and upload
file attachments. HTML5 FileIO is now used for all attachment uploading
- including drag-drop support. WebRTC is used to capture webcam images -
this falls back to a Flash polyfill when WebRTC isn't supported.

Disco.Web/ClientSource/Style/BundleSite.css

@@ -4743,6 +4743,106 @@ div.form > table table.sub > tbody > tr > th.name {
   border-right: none;
   padding-right: 0;
 }
+div.disco-attachmentUpload-dropTarget {
+  display: none;
+}
+div.disco-attachmentUpload-dropTarget.dragHighlight {
+  display: block;
+  position: absolute;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  width: calc(100% - 6px);
+  height: calc(100% - 6px);
+  background-color: rgba(251, 218, 152, 0.5);
+  border: 3px dashed #f0a30a;
+}
+div.disco-attachmentUpload-dropTarget.dragHighlight h2 {
+  margin-top: 3em !important;
+  color: #2c1e02;
+  text-align: center;
+  font-weight: bold;
+}
+div.disco-attachmentUpload-dropTarget.dragHighlight.dragHover {
+  background-color: rgba(173, 235, 110, 0.5);
+  border: 3px dashed #60a917;
+}
+div.disco-attachmentUpload-dropTarget.dragHighlight.dragHover h2 {
+  color: #000000;
+}
+div.disco-attachmentUpload-progress {
+  position: absolute;
+  right: 0px;
+  bottom: 48px;
+}
+div.disco-attachmentUpload-progress > div {
+  background-color: #fafafa;
+  padding: 4px 8px;
+}
+div.disco-attachmentUpload-progress > div i {
+  color: #1e6dab;
+  margin-right: 4px;
+}
+div.disco-attachmentUpload-commentDialog {
+  padding: 0.25em 0.5em !important;
+}
+div.disco-attachmentUpload-commentDialog table {
+  border: solid 1px #f4f4f4;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+div.disco-attachmentUpload-commentDialog table > tbody > tr > td {
+  border: solid 1px #f4f4f4;
+  background-color: #ffffff;
+}
+div.disco-attachmentUpload-commentDialog table > tbody > tr:nth-child(odd) > td {
+  background-color: #fcfcfc;
+}
+div.disco-attachmentUpload-commentDialog table > thead > tr > th,
+div.disco-attachmentUpload-commentDialog table > tbody > tr > th {
+  background-color: #f4f4f4;
+  border: solid 1px #f4f4f4;
+}
+div.disco-attachmentUpload-commentDialog table > tbody > tr:hover > td {
+  background-color: #fefefe;
+}
+div.disco-attachmentUpload-commentDialog table > tbody > tr:hover:nth-child(odd) > td {
+  background-color: #fafafa;
+}
+div.disco-attachmentUpload-commentDialog table > tfoot > tr > th,
+div.disco-attachmentUpload-commentDialog table > tfoot > tr > td {
+  background-color: #f4f4f4;
+}
+div.disco-attachmentUpload-commentDialog table th {
+  width: 80px;
+}
+div.disco-attachmentUpload-commentDialog table td.filename {
+  font-family: Consolas, "Courier New", monospace;
+  white-space: nowrap;
+  overflow: hidden;
+  -ms-text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+}
+div.disco-attachmentUpload-commentDialog table input.comments {
+  width: calc(100% - 5px);
+}
+div.disco-attachmentUpload-commentDialog table td.thumbnail {
+  display: none;
+  text-align: center;
+}
+div.disco-attachmentUpload-commentDialog table td.thumbnail img {
+  border: 1px solid #9e9e9e;
+  max-height: 250px;
+  max-width: 374px;
+}
+div.disco-attachmentUpload-imageDialog {
+  background-color: #000000 !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  width: 720px !important;
+  height: 540px !important;
+}
 .d-priority-high {
   color: #fa6800;
   width: 1.2857142857142858em;

Disco.Web/ClientSource/Style/Declarations.less

@@ -44,10 +44,10 @@
 
 // Status
 @StatusUnknown: @HeaderBackgroundColour;
-@StatusSuccess: #60a917;
+@StatusSuccess: @ThemeGreen;
 @StatusInformation: @ButtonColour;
-@StatusWarning: #f0a30a;
-@StatusAlert: #fa6800;
+@StatusWarning: @ThemeAmber;
+@StatusAlert: @ThemeOrange;
 @StatusError: @ButtonAlertColour;
 @StatusRemove: @ButtonAlertColour;
 

Disco.Web/ClientSource/Style/Device.css

@@ -253,12 +253,16 @@
 #DeviceDetailTab-DetailsContainer > table > tbody > tr > td {
   padding: 10px 6px;
 }
-#deviceShowResources #Attachments {
+#deviceShowResources #AttachmentsContainer {
   padding: 0;
+}
+#deviceShowResources #Attachments {
+  position: relative;
   border: 1px solid #cccccc;
   background-color: #ffffff;
 }
 #deviceShowResources #Attachments div.attachmentOutput {
+  position: relative;
   height: 115px;
   overflow: auto;
   font-size: 0.95em;
@@ -303,6 +307,9 @@
   height: 48px;
   width: 48px;
 }
+#deviceShowResources #Attachments div.attachmentOutput > a span.icon img.loading {
+  display: none;
+}
 #deviceShowResources #Attachments div.attachmentOutput > a:hover {
   background-color: #ededed;
   border: 1px solid #cccccc;

Disco.Web/ClientSource/Style/Device.less

@@ -210,12 +210,17 @@
 
 
 #deviceShowResources {
-    #Attachments {
+    #AttachmentsContainer {
         padding: 0;
+    }
+
+    #Attachments {
+        position: relative;
         border: 1px solid @SubtleBorderColour;
         background-color: @white;
 
         div.attachmentOutput {
+            position: relative;
             height: 115px;
             overflow: auto;
             font-size: 0.95em;
@@ -260,6 +265,10 @@
                     img {
                         height: 48px;
                         width: 48px;
+
+                        &.loading {
+                            display: none;
+                        }
                     }
                 }
 
@@ -457,7 +466,6 @@
         color: @StatusInformation;
     }
 }
-
 // Icons used within Devices_Import_Review
 @import "FontAwesome\variables.less";
 

Disco.Web/ClientSource/Style/Job.css

@@ -243,8 +243,11 @@
   border-top: none;
   background-color: #eee;
 }
-#jobShowResources #Comments {
+#jobShowResources #CommentsContainer {
+  padding: 0;
   width: 375px;
+}
+#jobShowResources #Comments {
   height: 300px;
   padding: 0;
   border: 1px solid #cccccc;
@@ -329,13 +332,19 @@
   background-color: #ededed;
   border: 1px solid #cccccc;
 }
-#jobShowResources #Attachments {
-  height: 300px;
+#jobShowResources #AttachmentsContainer {
   padding: 0;
-  border: 1px solid #cccccc;
+}
+#jobShowResources #Attachments {
+  position: relative;
+  height: 300px;
+  border-top: 1px solid #cccccc;
+  border-right: 1px solid #cccccc;
+  border-bottom: 1px solid #cccccc;
   background-color: #ffffff;
 }
 #jobShowResources #Attachments div.attachmentOutput {
+  position: relative;
   height: 249px;
   overflow: auto;
 }
@@ -379,6 +388,9 @@
   height: 48px;
   width: 48px;
 }
+#jobShowResources #Attachments div.attachmentOutput > a span.icon img.loading {
+  display: none;
+}
 #jobShowResources #Attachments div.attachmentOutput > a:hover {
   background-color: #ededed;
   border: 1px solid #cccccc;

Disco.Web/ClientSource/Style/Job.less

@@ -215,8 +215,12 @@
 
 
 #jobShowResources {
-    #Comments {
+    #CommentsContainer {
+        padding: 0;
         width: 375px;
+    }
+
+    #Comments {
         height: 300px;
         padding: 0;
         border: 1px solid @SubtleBorderColour;
@@ -318,13 +322,20 @@
         }
     }
 
-    #Attachments {
-        height: 300px;
+    #AttachmentsContainer {
         padding: 0;
-        border: 1px solid @SubtleBorderColour;
+    }
+
+    #Attachments {
+        position: relative;
+        height: 300px;
+        border-top: 1px solid @SubtleBorderColour;
+        border-right: 1px solid @SubtleBorderColour;
+        border-bottom: 1px solid @SubtleBorderColour;
         background-color: @white;
 
         div.attachmentOutput {
+            position: relative;
             height: 249px;
             overflow: auto;
 
@@ -368,6 +379,10 @@
                     img {
                         height: 48px;
                         width: 48px;
+
+                        &.loading {
+                            display: none;
+                        }
                     }
                 }
 

Disco.Web/ClientSource/Style/Site.css

@@ -1082,6 +1082,106 @@ div.form > table table.sub > tbody > tr > th.name {
   border-right: none;
   padding-right: 0;
 }
+div.disco-attachmentUpload-dropTarget {
+  display: none;
+}
+div.disco-attachmentUpload-dropTarget.dragHighlight {
+  display: block;
+  position: absolute;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  width: calc(100% - 6px);
+  height: calc(100% - 6px);
+  background-color: rgba(251, 218, 152, 0.5);
+  border: 3px dashed #f0a30a;
+}
+div.disco-attachmentUpload-dropTarget.dragHighlight h2 {
+  margin-top: 3em !important;
+  color: #2c1e02;
+  text-align: center;
+  font-weight: bold;
+}
+div.disco-attachmentUpload-dropTarget.dragHighlight.dragHover {
+  background-color: rgba(173, 235, 110, 0.5);
+  border: 3px dashed #60a917;
+}
+div.disco-attachmentUpload-dropTarget.dragHighlight.dragHover h2 {
+  color: #000000;
+}
+div.disco-attachmentUpload-progress {
+  position: absolute;
+  right: 0px;
+  bottom: 48px;
+}
+div.disco-attachmentUpload-progress > div {
+  background-color: #fafafa;
+  padding: 4px 8px;
+}
+div.disco-attachmentUpload-progress > div i {
+  color: #1e6dab;
+  margin-right: 4px;
+}
+div.disco-attachmentUpload-commentDialog {
+  padding: 0.25em 0.5em !important;
+}
+div.disco-attachmentUpload-commentDialog table {
+  border: solid 1px #f4f4f4;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+div.disco-attachmentUpload-commentDialog table > tbody > tr > td {
+  border: solid 1px #f4f4f4;
+  background-color: #ffffff;
+}
+div.disco-attachmentUpload-commentDialog table > tbody > tr:nth-child(odd) > td {
+  background-color: #fcfcfc;
+}
+div.disco-attachmentUpload-commentDialog table > thead > tr > th,
+div.disco-attachmentUpload-commentDialog table > tbody > tr > th {
+  background-color: #f4f4f4;
+  border: solid 1px #f4f4f4;
+}
+div.disco-attachmentUpload-commentDialog table > tbody > tr:hover > td {
+  background-color: #fefefe;
+}
+div.disco-attachmentUpload-commentDialog table > tbody > tr:hover:nth-child(odd) > td {
+  background-color: #fafafa;
+}
+div.disco-attachmentUpload-commentDialog table > tfoot > tr > th,
+div.disco-attachmentUpload-commentDialog table > tfoot > tr > td {
+  background-color: #f4f4f4;
+}
+div.disco-attachmentUpload-commentDialog table th {
+  width: 80px;
+}
+div.disco-attachmentUpload-commentDialog table td.filename {
+  font-family: Consolas, "Courier New", monospace;
+  white-space: nowrap;
+  overflow: hidden;
+  -ms-text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+}
+div.disco-attachmentUpload-commentDialog table input.comments {
+  width: calc(100% - 5px);
+}
+div.disco-attachmentUpload-commentDialog table td.thumbnail {
+  display: none;
+  text-align: center;
+}
+div.disco-attachmentUpload-commentDialog table td.thumbnail img {
+  border: 1px solid #9e9e9e;
+  max-height: 250px;
+  max-width: 374px;
+}
+div.disco-attachmentUpload-imageDialog {
+  background-color: #000000 !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  width: 720px !important;
+  height: 540px !important;
+}
 .d-priority-high {
   color: #fa6800;
   width: 1.2857142857142858em;

Disco.Web/ClientSource/Style/Site.less

@@ -907,9 +907,9 @@ select {
     color: #444;
 }
 
-select.small {
-    padding: 0;
-}
+    select.small {
+        padding: 0;
+    }
 
 input[type="submit"], button {
     font-family: @FontFamilyBody;
@@ -1075,6 +1075,100 @@ div.form {
         }
 }
 
+// Attachment Uploader
+div.disco-attachmentUpload-dropTarget {
+    display: none;
+
+    &.dragHighlight {
+        display: block;
+        position: absolute;
+        z-index: 1000;
+        top: 0;
+        left: 0;
+        width: calc(~"100% - 6px");
+        height: calc(~"100% - 6px");
+        background-color: fadeOut(lighten(@ThemeAmber, 30%), 50%);
+        border: 3px dashed @ThemeAmber;
+
+        h2 {
+            margin-top: 3em !important;
+            color: darken(@ThemeAmber, 40%);
+            text-align: center;
+            font-weight: bold;
+        }
+
+        &.dragHover {
+            background-color: fadeOut(lighten(@ThemeGreen, 30%), 50%);
+            border: 3px dashed @ThemeGreen;
+
+            h2 {
+                color: darken(@ThemeGreen, 40%);
+            }
+        }
+    }
+}
+
+div.disco-attachmentUpload-progress {
+    position: absolute;
+    right: 0px;
+    bottom: 48px;
+
+    & > div {
+        background-color: @BackgroundColourLight;
+        padding: 4px 8px;
+
+        i {
+            color: @StatusInformation;
+            margin-right: 4px;
+        }
+    }
+}
+
+div.disco-attachmentUpload-commentDialog {
+    padding: 0.25em 0.5em !important;
+
+    table {
+        .tableData;
+        table-layout: fixed;
+
+        th {
+            width: 80px;
+        }
+
+        td.filename {
+            font-family: @FontFamilyMono;
+            white-space: nowrap;
+            overflow: hidden;
+            -ms-text-overflow: ellipsis;
+            -o-text-overflow: ellipsis;
+            text-overflow: ellipsis;
+        }
+
+        input.comments {
+            width: calc(~"100% - 5px");
+        }
+
+        td.thumbnail {
+            display: none;
+            text-align: center;
+
+            img {
+                border: 1px solid @ButtonHoverColour;
+                max-height: 250px;
+                max-width: 374px;
+            }
+        }
+    }
+}
+
+div.disco-attachmentUpload-imageDialog {
+    background-color: @black !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+    width: 720px !important;
+    height: 540px !important;
+}
+
 // Priority Colours
 .d-priority-high {
     color: @PriorityHigh;

Disco.Web/ClientSource/Style/User.css

@@ -231,12 +231,16 @@
 #UserDetailTab-Authorization #UserDetailTab-Authorization_NoAccess h3 {
   margin-bottom: 10px;
 }
-#userShowResources #Attachments {
+#userShowResources #AttachmentsContainer {
   padding: 0;
+}
+#userShowResources #Attachments {
+  position: relative;
   border: 1px solid #cccccc;
   background-color: #ffffff;
 }
 #userShowResources #Attachments div.attachmentOutput {
+  position: relative;
   height: 115px;
   overflow: auto;
   font-size: 0.95em;
@@ -281,6 +285,9 @@
   height: 48px;
   width: 48px;
 }
+#userShowResources #Attachments div.attachmentOutput > a span.icon img.loading {
+  display: none;
+}
 #userShowResources #Attachments div.attachmentOutput > a:hover span.remove {
   opacity: .5;
 }

Disco.Web/ClientSource/Style/User.less

@@ -206,12 +206,17 @@
 
 
 #userShowResources {
-    #Attachments {
+    #AttachmentsContainer {
         padding: 0;
+    }
+
+    #Attachments {
+        position: relative;
         border: 1px solid @SubtleBorderColour;
         background-color: @white;
 
         div.attachmentOutput {
+            position: relative;
             height: 115px;
             overflow: auto;
             font-size: 0.95em;
@@ -256,6 +261,10 @@
                     img {
                         height: 48px;
                         width: 48px;
+
+                        &.loading {
+                            display: none;
+                        }
                     }
                 }
 
@@ -272,8 +281,7 @@
                     cursor: pointer;
                     opacity: 0;
 
-                    &:hover
-                    {
+                    &:hover {
                         opacity: 1;
                     }
                 }
@@ -290,8 +298,7 @@
             background-color: @white;
             padding: 3px;
 
-            span.action
-            {
+            span.action {
                 color: @HeaderBackgroundColour;
                 display: block;
                 margin: 0 4px 0 0;
@@ -301,8 +308,7 @@
                 border: 1px solid @white;
                 padding: .5em;
 
-                &:hover
-                {
+                &:hover {
                     color: @HyperLinkColour;
                     background-color: @SubtleColour;
                     border: 1px solid @SubtleBorderColour;