T-249: Adjusting measurements panel styles

2016-06-23 13:38:49 -03:00 · 2016-06-23 13:38:49 -03:00 · 1ffbf15ea3
commit 1ffbf15ea3
parent bca32d88e0
10 changed files with 80 additions and 66 deletions
--- a/Packages/design/styles/variables.styl
+++ b/Packages/design/styles/variables.styl
@ -9,6 +9,12 @@ $primaryBackgroundColor = #000000
 $boxBackgroundColor = #3E5975
 $boxBackgroundColorDark = #22374D

+// Common pallete
+$uiSkyBlue = #6FBDE2
+$uiGrayDark = #263340
+$uiGrayDarker = #16202B
+$uiGrayDarkest = #151A1F
+
 // Text Colors
 $textPrimaryColor = #ffffff
 $textSecondaryColor = #91B9CD
--- a/Packages/lesiontracker/client/components/lesionTable/lesionTable.html
+++ b/Packages/lesiontracker/client/components/lesionTable/lesionTable.html
@ -1,15 +1,13 @@
 <template name="lesionTable">
    <div id="lesionTableContainer">
        <div class="lesionTableLayoutChanger viewerRoundedButtonGroup">
-            {{ >roundedButtonGroup buttonGroupData }}
+            {{>roundedButtonGroup buttonGroupData}}
        </div>
        <div class="lesionTableTimepointHeaderRow">
-            <div class="spacer">
-            </div>
-            {{ #each timepoints }}
-            {{ >lesionTableTimepointHeader }}
-            {{ /each }}
+            {{#each timepoints}}
+                {{>lesionTableTimepointHeader}}
+            {{/each}}
        </div>
-        {{ >lesionTableView }}
+        {{>lesionTableView}}
    </div>
-</template>
+</template>
--- a/Packages/lesiontracker/client/components/lesionTable/lesionTable.styl
+++ b/Packages/lesiontracker/client/components/lesionTable/lesionTable.styl
@ -1,17 +1,15 @@
@import "{design}/app"

 #lesionTableContainer
-  width: 100%
+  background-color: $primaryBackgroundColor
  height: calc(100% - 105px)
-  background-color: #000000
+  width: 100%

 .lesionTableTimepointHeaderRow
  display: flex
-
-  .spacer
-    width: 20px
+  padding: 2px 2px 0 44px

 .lesionTableLayoutChanger
+  margin: 0 auto
  padding: 20px
  text-align: center
-  margin: 0 auto
--- a/Packages/lesiontracker/client/components/lesionTableHeaderRow/lesionTableHeaderRow.styl
+++ b/Packages/lesiontracker/client/components/lesionTableHeaderRow/lesionTableHeaderRow.styl
@ -3,59 +3,62 @@
 $headerRowHeight = 63px

 .lesionTableHeaderRow
-  border-top: 2px solid black
-  background: #151a1f
+  background-color: $uiGrayDarkest
  color: $textSecondaryColor
-  fill: $textSecondaryColor
-  width: 316px
-  height: $headerRowHeight
  display: flex
+  fill: $textSecondaryColor
+  height: $headerRowHeight
  line-height: $headerRowHeight
+  margin-top: 2px
+  width: 316px

  div
+    align-items: stretch
    flex: 1
    justify-content: space-around
-    align-items: stretch
    text-align: center

  .add
-    padding: 0 10px
-    max-width: 40px
    cursor: pointer
+    max-width: 30px
+    padding-left: 2px

    svg
      height: $headerRowHeight
      max-width: 11px

  .type
+    color: $textSecondaryColor
+    font-size: 22px
+    font-weight: 300
+    line-height: $headerRowHeight
    padding: 0 10px
    text-align: left
-    font-weight: 300
-    color: #91b9cd
-    height: $headerRowHeight
-    font-size: 13pt

  .numberOfLesions
    float: right
-    color:  #6fbde2
-    font-weight: 100
+    color: $uiSkyBlue
+    font-weight: 300
    font-size: 40px
-    max-width: 50px
-    margin-right: 5px
+    max-width: 54px
    height: $headerRowHeight
-    line-height: $headerRowHeight
+    line-height: 66px

  .max
    height: $headerRowHeight
+    max-width: 64px
+    text-align: right

    .maxNumLesions
-      margin: 21px auto
-      height: 20px
-      line-height: 20px
-      width: 47px
-      font-size: 12px
-      text-transform: uppercase
-      font-weight: 500
+      background-color: $textSecondaryColor;
      border-radius: 3px
      color: black
-      background-color: $textSecondaryColor;
+      display: table
+      font-size: 12px
+      font-weight: 500
+      height: 19px
+      line-height: 17px
+      margin-left: auto
+      margin-top: 22px
+      padding: 2px 6px 0
+      text-transform: uppercase
--- a/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl
+++ b/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl
@ -2,45 +2,51 @@

 .lesionTableRow
  display: flex
-  border-top: 2px solid black
  height: 63px
+  margin-top: 2px
  width: 100%

  .lesionRowSidebar
-    flex: 1
+    background: $uiGrayDark
    color: $textSecondaryColor
-    background: $darkUiColor
+    flex: 1
    max-width: 30px
+    padding-right: 5px

    .lesionNumber
+      font-size: 14px
+      font-weight: 400
+      padding-top: 10px
      text-align: center
-      font-weight: 200
-      padding: 3px

    &.active
      border-left: 4px $activeColor solid

  .lesionDetails
    flex: 1
-    padding-left: 20px
-    padding-top: 5px
+    padding: 5px 2px 0 14px
    display: flex
    flex-direction: column
    align-items: stretch

    .location
      flex: 1
-      font-weight: 200
+      font-weight: 400
      font-size: 14px
      color: $textSecondaryColor
-      height: 20px
+      height: 30px
+      line-height: 30px
+      margin-left: -2px
      width: 100%

    .timepointData
      display: flex
+      margin-top: 1px

      div
-        font-weight: 200
-        padding-bottom: 10px
        flex: 1
+        font-size: 14px
+        font-weight: 400
        justify-content: space-around
+        line-height: 18px
+        padding-bottom: 10px
--- a/Packages/lesiontracker/client/components/lesionTableTimepointHeader/lesionTableTimepointHeader.html
+++ b/Packages/lesiontracker/client/components/lesionTableTimepointHeader/lesionTableTimepointHeader.html
@ -1,10 +1,10 @@
 <template name="lesionTableTimepointHeader">
    <div class="lesionTableTimepointHeader">
        <div class="timepointName">
-            {{ timepointName }}
+            {{timepointName}}
        </div>
        <div  class="timepointDate">
-            {{ formatDA latestDate "DD-MMM-YY"}}
+            {{formatDA latestDate "DD-MMM-YY"}}
        </div>
    </div>
-</template>
+</template>
--- a/Packages/lesiontracker/client/components/lesionTableTimepointHeader/lesionTableTimepointHeader.styl
+++ b/Packages/lesiontracker/client/components/lesionTableTimepointHeader/lesionTableTimepointHeader.styl
@ -2,16 +2,21 @@

 .lesionTableTimepointHeader
  flex: 1
-  padding-left: 20px
  justify-content: space-around

  div
-    text-align: center
+    border-left: $uiBorderColor $uiBorderThickness solid
+    font-weight: 400
+    padding-left: 12px
+    text-align: left

  .timepointName
    color: $textSecondaryColor
+    font-size: 12px
+    line-height: 12px

  .timepointDate
-    font-weight: 200
    color: $textPrimaryColor
-    border-left: $uiBorderColor $uiBorderThickness solid
+    font-size: 14px
+    line-height: 20px
+    padding-bottom: 6px
--- a/Packages/lesiontracker/client/components/lesionTableView/lesionTableView.styl
+++ b/Packages/lesiontracker/client/components/lesionTableView/lesionTableView.styl
@ -5,9 +5,8 @@
  overflow-y: auto
  margin-right: -16px
  padding-bottom: 100px
-  padding-right: 16px

  -webkit-overflow-scrolling: touch

  &::-webkit-scrollbar
-    display: none
+    display: none
--- a/Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.styl
+++ b/Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.styl
@ -1,7 +1,6 @@
@import "{design}/app"

 $circleSize = 46px
-$progressTextColor = #6fbde2

 .radialProgress
  height: $circleSize
@ -34,7 +33,7 @@ $progressTextColor = #6fbde2
    font-weight: 700
    font-size: 17px
    text-align: center
-    color: $progressTextColor
+    color: $uiSkyBlue
    top: 0

    svg
--- a/Packages/worklist/client/components/worklistResult/worklistResult.styl
+++ b/Packages/worklist/client/components/worklistResult/worklistResult.styl
@ -8,13 +8,13 @@ $inputBackgroundColor = #2c363f
 $inputPlaceholderColor = lightgray

 $studyListToolbarHeight = 75px
-$theadBackgroundColor =  #151a1f
+$theadBackgroundColor =  $uiGrayDarkest
 $tablePadding = 8%
 $bodyCellHeight = 40px

 .studyListToolbar
  height: $studyListToolbarHeight
-  background: #151a1f
+  background: $uiGrayDarkest
  border-bottom: 2px solid black
  padding: 0 30px

@ -35,7 +35,7 @@ $bodyCellHeight = 40px
  .studyCount
    font-size: 40px
    font-weight: 100
-    color: #6fbde2
+    color: $uiSkyBlue
    padding: 0 10px
    line-height: $studyListToolbarHeight

@ -149,7 +149,7 @@ $bodyCellHeight = 40px
        background-color: black

        &:nth-child(even)
-          background-color: #151a1f
+          background-color: $uiGrayDarkest

        td
          height: $bodyCellHeight
@ -175,4 +175,4 @@ $bodyCellHeight = 40px
            // This selector is necessary to override bootstrap's 'table' class
            border-top: 1px solid #436270
            border-bottom: 1px solid #436270
-            background-color: $hoverColor
+            background-color: $hoverColor