From ebef71da3bf2a4816bc4689748c7fa721e2782b7 Mon Sep 17 00:00:00 2001
From: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>
Date: Mon, 13 Apr 2020 17:58:52 -0300
Subject: [PATCH] add viewport notification

---
 .../components/Notification/Notification.jsx  |  2 +-
 .../ViewportActionBar/ViewportActionBar.jsx   |  2 +-
 platform/ui/src/views/Viewer/Viewer.mdx       | 31 ++++++++++++++++++-
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/platform/ui/src/components/Notification/Notification.jsx b/platform/ui/src/components/Notification/Notification.jsx
index 87dec9b73..d90a83c57 100644
--- a/platform/ui/src/components/Notification/Notification.jsx
+++ b/platform/ui/src/components/Notification/Notification.jsx
@@ -35,7 +35,7 @@ const Notification = ({ type, text, actionButtons }) => {
   const { icon, color } = getIconData();
 
   return (
-    <div className="p-2 flex flex-col lg:flex-row lg:items-center bg-common-bright rounded">
+    <div className="mx-2 p-2 flex flex-col lg:flex-row lg:items-center bg-common-bright rounded">
       <div className="flex flex-grow">
         <Icon name={icon} className={classnames('w-5', color)} />
         <span className="text-base text-black ml-2">{text}</span>
diff --git a/platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx b/platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx
index c9ad9b1e5..a38a6c5b4 100644
--- a/platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx
+++ b/platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx
@@ -69,7 +69,7 @@ const ViewportActionBar = ({ isTracked, isLocked, modality }) => {
     );
   };
   return (
-    <div className="flex items-center m-2 pb-2 border-b border-primary-light">
+    <div className="flex items-center mx-2 mt-2 pb-2 border-b border-primary-light">
       <div className="flex flex-grow">
         <div className="flex items-center">
           {renderIconStatus()}
diff --git a/platform/ui/src/views/Viewer/Viewer.mdx b/platform/ui/src/views/Viewer/Viewer.mdx
index 47251f310..2d171805e 100644
--- a/platform/ui/src/views/Viewer/Viewer.mdx
+++ b/platform/ui/src/views/Viewer/Viewer.mdx
@@ -18,6 +18,7 @@ import {
   StudyBrowser,
   ViewportActionBar,
   ViewportGrid,
+  Notification,
 } from '@ohif/ui';
 
 import Header from './components/Header';
@@ -57,7 +58,35 @@ import ViewportToolbar from './components/ViewportToolBar';
             <div className="flex flex-2 w-100 border-b border-transparent h-12">
               <ViewportToolbar />
             </div>
-            <div className="flex flex-1 items-center justify-center bg-black text-white border rounded-lg border-secondary-light h-100 overflow-hidden">CONTENT</div>
+            <div className="flex flex-1 h-full overflow-hidden bg-black items-center justify-center">
+              <ViewportGrid
+                rows={1}
+                cols={2}
+                viewportContents={[
+                  <div className="flex flex-col h-full">
+                    <ViewportActionBar isTracked modality="CT" />
+                    <Notification
+                      text="Track all measurement for this series?"
+                      type="info"
+                      actionButtons={
+                        <div>
+                          <Button>No</Button>
+                          <Button className="ml-2">No, do not ask again</Button>
+                          <Button className="ml-2" color="primary">
+                            Yes
+                          </Button>
+                        </div>
+                      }
+                    />
+                  </div>,
+                  <div className="flex flex-col h-full">
+                    <ViewportActionBar isTracked={false} modality="CT" />
+                  </div>,
+                ]}
+                setActiveViewportIndex={setActiveViewportIndex}
+                activeViewportIndex={activeViewportIndex}
+              />
+            </div>
           </div>
           <SidePanel
             side="right"