[Interactive visualizer] Add left footer (#368)

Author: cbeausei

interactive-visualizers/src/app/app.component.html

@@ -59,8 +59,31 @@
         </div>
       </div>
 
-      <div class="LeftFooter"
-           id="left-footer-section">
+      <!-- Left footer -->
+      <div class="LeftFooter">
+        <img *ngIf="publisherThumbnailUrl != null"
+             class="LeftFooterPublisherThumbnailUrl"
+             src="{{ publisherThumbnailUrl }}"
+             alt="">
+        <div *ngIf="publisherName != null"
+             class="LeftFooterPublisherNameContainer">
+          <div class="LeftFooterPublisherNameHeader">
+            Published by:
+          </div>
+          <div class="LeftFooterPublisherNameText">
+            {{ publisherName }}
+          </div>
+        </div>
+        <a class="LeftFooterTermsOfService"
+           href="https://www.google.com/intl/en/policies/terms/"
+           target="_blank">
+          Terms of Service
+        </a>
+        <a class="LeftFooterPrivacyPolicy"
+           href="https://www.google.com/intl/en/policies/privacy/"
+           target="_blank">
+          Privacy Policy
+        </a>
       </div>
     </div>
     <div class="RightSide">

interactive-visualizers/src/app/app.component.scss

@@ -218,6 +218,56 @@ $XXSMALL_FONT_SIZE: 12px;
   width: calc(100% - 4px);
 }
 
+/* Left footer */
+
+.LeftFooterPublisherThumbnailUrl {
+  border-radius: 100%;
+  display: inline-block;
+  height: 50px;
+  width: 50px;
+}
+
+.LeftFooterPublisherNameContainer {
+  display: inline-block;
+  height: 100%;
+  margin-left: 12px;
+  vertical-align: top;
+}
+
+.LeftFooterPublisherNameHeader {
+  color: $SECONDARY_TEXT_COLOR;
+  font-size: $XXSMALL_FONT_SIZE;
+  height: 17px;
+  margin-top: 7px;
+}
+
+.LeftFooterPublisherNameText {
+  color: $PRIMARY_TEXT_COLOR;
+  font-size: $SMALL_FONT_SIZE;
+  height: 26px;
+}
+
+.LeftFooterPrivacyPolicy {
+  color: $PRIMARY_TEXT_COLOR;
+  cursor: pointer;
+  float: right;
+  font-size: $XXSMALL_FONT_SIZE;
+  margin-top: 28px;
+  padding-right: 8px;
+  text-decoration: none;
+}
+
+.LeftFooterTermsOfService {
+  border-left: solid 1px $BORDER_COLOR;
+  color: $PRIMARY_TEXT_COLOR;
+  cursor: pointer;
+  float: right;
+  font-size: $XXSMALL_FONT_SIZE;
+  margin-top: 28px;
+  padding-left: 8px;
+  text-decoration: none;
+}
+
 /* Input section */
 
 .DragAndDrop {

interactive-visualizers/src/app/app.component.ts

@@ -40,6 +40,8 @@ export class AppComponent implements OnInit {
   title = 'interactive-visualizers';
 
   // Model related variables.
+  publisherThumbnailUrl: string|null = null;
+  publisherName: string|null = null;
   modelMetadataUrl: string|null = null;
   modelMetadata: any|null = null;
   modelType: string|null = null;
@@ -67,6 +69,12 @@ export class AppComponent implements OnInit {
       throw new Error(NO_MODEL_METADATA_ERROR_MESSAGE);
     }
     const modelMetadataUrl = urlParams.get('modelMetadataUrl');
+    if (urlParams.has('publisherThumbnailUrl')) {
+      this.publisherThumbnailUrl = urlParams.get('publisherThumbnailUrl');
+    }
+    if (urlParams.has('publisherName')) {
+      this.publisherName = urlParams.get('publisherName');
+    }
 
     this.initApp(modelMetadataUrl);
   }