Review task/event viewer/editor

Components will now appear in dialogs instead of a right sidenav.

This commit also introduces read-only viewers for tasks and events.

UI/WebServerResources/scss/components/chips/chips.scss

@@ -2,13 +2,16 @@
 @import 'extends';
 
 // Remove the line under the tags of the message viewer
-.msg-header {
-  md-chips {
+md-chips {
+  &.sg-readonly {
     .md-chips {
       box-shadow: none;
       &.md-focused {
         box-shadow: none;
       }
+      .md-chip-content {
+        max-width: initial; // fix bug in ng-material
+      }
     }
   }
 }

UI/WebServerResources/scss/components/icon/icon.scss

@@ -45,6 +45,13 @@
 // Define CSS styles to use ng-class with md-icon
 md-icon {
   transition: 240ms;
+  &.sg-icon-toolbar-bg {
+    font-size: 84px;
+    opacity: 0.2;
+    position: absolute;
+    right: $mg * 3;
+    transform: rotate(-15deg);
+  }
   &.md-rotate-45 {
     transform: rotate(45deg);
   }
@@ -56,7 +63,10 @@ md-icon {
   }
 //   &.icon-add:before {
 //     content: "\e317";
-//   }
+  //   }
+  &.icon-alarm:before {
+    content: "\e855";
+  }
   &.icon-check:before {
     content: "\e5ca";
   }
@@ -81,6 +91,12 @@ md-icon {
 //  &.icon_public:before {
 //    content: "\e80b";
 //  }
+  &.icon-visibility-off:before {
+    content: "\e8f5";
+  }
+  &.icon-vpn-key:before {
+    content: "\e0da";
+  }
 }
 
 // Message flag

UI/WebServerResources/scss/components/list/list.scss

@@ -46,7 +46,7 @@ md-list-item {
 // Add some padding to the first icon in a list item
 .md-list-item-inner {
   > i:first-child {
-    padding-right: $mg;
+    margin-left: $mg;
   }
 }