Merge pull request #487 from flexion/407-view

#407 New Work Queue
flexion · Dec 26, 2018 · ec58ebf · ec58ebf
2 parents 7a9011e + 21d8df8
commit ec58ebf
Show file tree

Hide file tree

Showing 6 changed files with 169 additions and 91 deletions.
diff --git a/web-client/src/index.pug b/web-client/src/index.pug
@@ -5,6 +5,7 @@ html(lang="en")
     meta(built="" + Date())
     meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no")
     title U.S. Tax Court Electronic Filing and Case Management System
+    link(href="https://fonts.googleapis.com/css?family=Noto+Serif+JP:400,500,600,700" rel="stylesheet")
     link(rel="stylesheet" href="index.scss")
   body
     #app

diff --git a/web-client/src/index.scss b/web-client/src/index.scss
@@ -1,6 +1,9 @@
 $font-path: '../node_modules/uswds/dist/fonts';
 $image-path: '../node_modules/uswds/dist/img';
+$font-serif: 'Noto Serif JP';
+$color-primary-alt-lightest: #f1f9fc;
 
 @import '../node_modules/uswds/src/stylesheets/uswds.scss';
 @import './styles/overrides.scss';
 @import './styles/custom.scss';
+@import './styles/responsive-table.scss';
diff --git a/web-client/src/styles/custom.scss b/web-client/src/styles/custom.scss
@@ -89,32 +89,72 @@ h1[tabIndex='-1']:focus {
   margin-top: 2rem;
 }
 
+.work-queue-tab-container {
+  border: 1px solid $color-gray-light;
+  background-color: $color-gray-lightest;
+}
+
+.work-queue-tab {
+  display: inline-block;
+  padding: 1rem 2rem;
+  border-right: 1px solid $color-gray-light;
+  margin: 0;
+  background-color: $color-white;
+  box-shadow: 0 2px 0 $color-white;
+}
+
 table.work-queue {
-  a {
-    display: block;
-    margin-bottom: 1rem;
-    font-weight: bold;
+  td,
+  th {
+    border: none;
   }
 
-  border: 1px solid $color-gray-light;
-  margin-top: 3rem;
-  border-collapse: collapse;
+  tbody tr {
+    border-top: 1px solid $color-gray-light;
+  }
 
   td {
-    padding-bottom: 1rem;
-    border: none;
-    background-color: inherit;
-    font-weight: inherit;
-    vertical-align: top;
+    font-size: 1.4rem; // 14px
+    label {
+      margin: 0;
+    }
   }
 
-  thead {
-    border: 1px solid $color-gray-light;
+  thead th {
+    background-color: $color-white;
+    font-weight: 600;
   }
 
-  th {
-    font-size: 1.5rem;
+  .action-bar {
+    background-color: $color-primary-alt-lightest;
+    font-size: 1.7rem;
+
+    label {
+      display: inline-block;
+      margin: 0;
+    }
+
+    select {
+      display: inline-block;
+      width: auto;
+      margin: 0 1rem;
+    }
+
+    button {
+      margin: 0;
+    }
+
+    .selected-count {
+      margin-right: 3rem;
+      font-weight: $font-bold;
+    }
   }
+
+  width: 100%;
+  border-top: none;
+  border-right: 1px solid $color-gray-light;
+  border-bottom: 1px solid $color-gray-light;
+  border-left: 1px solid $color-gray-light;
 }
 
 table.case-list thead th,
@@ -143,6 +183,15 @@ input:focus::placeholder {
   color: transparent;
 }
 
+.fa-file-pdf {
+  margin-right: 1rem;
+}
+
+#paygov-link-container {
+  padding-bottom: 2rem;
+  text-align: center;
+}
+
 .progress-container {
   max-width: 50rem;
   height: 2rem;
@@ -158,15 +207,6 @@ input:focus::placeholder {
   transition: all 2s;
 }
 
-.fa-file-pdf {
-  margin-right: 1rem;
-}
-
-#paygov-link-container {
-  padding-bottom: 2rem;
-  text-align: center;
-}
-
 .progress-indicator {
   position: fixed;
   z-index: 100;
@@ -214,15 +254,23 @@ iframe {
 
   li {
     display: inline-block;
-    padding: 0.5rem 2rem;
-    margin: 0;
+    padding: 0.5rem 0;
+    margin: 0 2rem 0 0;
     cursor: pointer;
+
+    h2 {
+      font-weight: $font-normal;
+    }
   }
 
   .active {
     border-bottom: 0.3rem $color-blue solid;
     cursor: default;
     font-weight: $font-bold;
+
+    h2 {
+      font-weight: $font-bold;
+    }
   }
 }
 
@@ -255,44 +303,3 @@ iframe {
     background-color: white;
   }
 }
-
-.responsive-table {
-  width: 100%;
-
-  label {
-    margin: 1rem 0 !important;
-  }
-
-  .responsive-label {
-    display: none;
-  }
-}
-
-@media only screen and (max-width: $small-screen) {
-  .responsive-table {
-    thead {
-      display: none;
-    }
-
-    tr {
-      display: block;
-    }
-
-    td {
-      display: block;
-      border: none;
-    }
-
-    .responsive-title {
-      border-bottom: 1px solid $color-gray-light;
-      background: $color-gray-lightest;
-      font-weight: $font-bold;
-    }
-
-    .responsive-label {
-      display: block;
-      margin-bottom: 0.5rem;
-      font-weight: $font-bold;
-    }
-  }
-}
diff --git a/web-client/src/styles/overrides.scss b/web-client/src/styles/overrides.scss
@@ -28,7 +28,7 @@ h1 {
 }
 
 h2 {
-  font-size: 26px;
+  font-size: 24px;
 }
 
 legend {

diff --git a/web-client/src/styles/responsive-table.scss b/web-client/src/styles/responsive-table.scss
@@ -0,0 +1,40 @@
+.responsive-table {
+  width: 100%;
+
+  label {
+    margin: 1rem 0 !important;
+  }
+
+  .responsive-label {
+    display: none;
+  }
+}
+
+@media only screen and (max-width: $small-screen) {
+  .responsive-table {
+    thead {
+      display: none;
+    }
+
+    tr {
+      display: block;
+    }
+
+    td {
+      display: block;
+      border: none;
+    }
+
+    .responsive-title {
+      border-bottom: 1px solid $color-gray-light;
+      background: $color-gray-lightest;
+      font-weight: $font-bold;
+    }
+
+    .responsive-label {
+      display: block;
+      margin-bottom: 0.5rem;
+      font-weight: $font-bold;
+    }
+  }
+}
diff --git a/web-client/src/views/WorkQueue.jsx b/web-client/src/views/WorkQueue.jsx
@@ -10,25 +10,61 @@ export default connect(
     return (
       <React.Fragment>
         <h1 tabIndex="-1">Work Queue</h1>
-        <table className="responsive-table work-queue" id="work-queue">
+        <div className="horizontal-tabs subsection">
+          <ul>
+            <li className="active">
+              <h2>My Queue</h2>
+            </li>
+            <li>
+              <h2>Section Queue</h2>
+            </li>
+          </ul>
+        </div>
+        <div className="work-queue-tab-container">
+          <h3 className="work-queue-tab">Inbox</h3>
+        </div>
+        <table className="work-queue" id="work-queue">
           <thead>
             <tr>
-              <th aria-label="Docket Number" />
-              <th>Message</th>
-              <th>Trial Date</th>
-              <th>Sent by</th>
+              <th>Select</th>
+              <th aria-label="Docket Number">Docket</th>
               <th>Received</th>
+              <th>Document</th>
+              <th>Status</th>
+              <th>Due</th>
+              <th>From</th>
+              <th>To</th>
             </tr>
           </thead>
           <tbody>
+            <tr>
+              <td colSpan="8" className="action-bar">
+                <span className="selected-count">2 selected</span>
+                <label htmlFor="options">Send to</label>
+                <select name="options" id="options">
+                  <option value>- Select -</option>
+                  <option value="value1">Option A</option>
+                  <option value="value2">Option B</option>
+                  <option value="value3">Option C</option>
+                </select>
+                <button className="usa-button">Send</button>
+              </td>
+            </tr>
             {workQueue.map(item => (
               <tr key={item.workItemId}>
-                <td className="responsive-title">
-                  <span className="responsive-label">Docket number</span>
-                  {item.docketNumber}
+                <td>
+                  <input
+                    id={item.workItemId}
+                    type="checkbox"
+                    name="historical-figures-1"
+                    value={item.workItemId}
+                    checked
+                  />
+                  <label htmlFor={item.workItemId} />
                 </td>
+                <td>{item.docketNumber}</td>
+                <td>Received</td>
                 <td>
-                  <span className="responsive-label">Message</span>
                   <a
                     href={`/case-detail/${item.docketNumber}/documents/${
                       item.document.documentId
@@ -37,20 +73,11 @@ export default connect(
                   >
                     {item.document.documentType}
                   </a>
-                  {item.messages[0].message}
-                </td>
-                <td>
-                  <span className="responsive-label">Trial Date</span>
-                  {item.trialDate}
-                </td>
-                <td>
-                  <span className="responsive-label">Sent By</span>
-                  {item.messages[0].sentBy}
-                </td>
-                <td>
-                  <span className="responsive-label">Received</span>
-                  {item.messages[0].createdAtFormatted}
                 </td>
+                <td>General Docket</td>
+                <td>12/15/2018</td>
+                <td>{item.messages[0].sentBy}</td>
+                <td>Unassigned</td>
               </tr>
             ))}
           </tbody>
-Original file line number
+Diff line change
@@ Expand Up / @@ -28,7 +28,7 @@ h1 { @@
     }
     h2 {
-      font-size: 26px;
+      font-size: 24px;
     }
     legend {
@@ Expand Down @@