Lesion Tracker Redesign so far

Packages/design/app.styl

@@ -0,0 +1,6 @@
+@import "{design}/styles/webfonts"
+@import "{design}/styles/variables"
+@import "{design}/styles/mixins"
+@import "{design}/styles/spacings"
+
+@import "{design}/styles/global"

Packages/design/components/roundedButtonGroup/roundedButtonGroup.html

@@ -0,0 +1,7 @@
+<template name="roundedButtonGroup">
+    <div class="{{class}} viewerRoundedButtonGroup clearfix center-table">
+        {{#each item in this.options}}
+            <a class="viewerRoundedButton noselect {{inlineIf value.get item.key 'active'}}" data-key="{{item.key}}">{{item.text}}</a>
+        {{/each}}
+    </div>
+</template>

Packages/design/components/roundedButtonGroup/roundedButtonGroup.js

@@ -0,0 +1,15 @@
+Template.roundedButtonGroup.onRendered(() => {
+    const instance = Template.instance();
+    const value = instance.data.value;
+    if (!value.get()) {
+        value.set(instance.data.options[0].key);
+    }
+});
+
+Template.roundedButtonGroup.events({
+    'click [data-key]'(event, instance) {
+        const $element = $(event.currentTarget);
+        const key = $element.attr('data-key');
+        instance.data.value.set(key);
+    }
+});

Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl

@@ -0,0 +1,46 @@
+@import "{design}/app"
+
+$height = 25px
+$borderColorActive = #3C8074
+$textColorActive = #2D2D2D
+
+.viewerRoundedButtonGroup
+  font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif
+  font-weight: 500
+  position: relative
+
+  .viewerRoundedButton
+    background: $darkUiColor
+    border: 1px $uiBorderColorDark solid
+    color: $textSecondaryColor
+    cursor: pointer
+    display: inline-block
+    margin-left: -1px
+    float: left
+    font-size: 11px
+    height: $height
+    line-height: $height
+    padding: 0 15px
+    text-decoration: none
+    text-transform: uppercase
+    transition: $sidebarTransition
+    -webkit-transition: $sidebarTransition
+    -ms-transition: $sidebarTransition
+    -o-transition: $sidebarTransition
+    -moz-transition: $sidebarTransition
+    z-index: 1
+
+    &.active
+      background: $activeColor
+      color: $textColorActive
+      border-color: $borderColorActive
+      z-index: 2
+
+    &:first-child
+      margin-left: 0
+      border-bottom-left-radius: $height
+      border-top-left-radius: $height
+
+    &:last-child
+      border-bottom-right-radius: $height
+      border-top-right-radius: $height

Packages/design/package.js

@@ -0,0 +1,34 @@
+Package.describe({
+    name: 'design',
+    summary: 'OHIF Design styles and components',
+    version: '0.0.1'
+});
+
+Package.onUse(function(api) {
+    api.versionsFrom('1.2.1');
+
+    api.use('ecmascript');
+    api.use('standard-app-packages');
+    api.use('jquery');
+    api.use('stylus');
+
+    // Importable colors / typography settings
+    api.addFiles([
+        'app.styl',
+        'styles/global.styl',
+        'styles/mixins.styl',
+        'styles/spacings.styl',
+        'styles/variables.styl',
+        'styles/webfonts.styl'
+    ], 'client', {
+        isImport: true
+    });
+
+    // Rounded Button Group
+    api.addFiles([
+        'components/roundedButtonGroup/roundedButtonGroup.html',
+        'components/roundedButtonGroup/roundedButtonGroup.styl',
+        'components/roundedButtonGroup/roundedButtonGroup.js'
+    ], 'client');
+
+});

Packages/design/styles/global.styl

@@ -0,0 +1,10 @@
+html *
+    font-family: 'Roboto', sans-serif;
+
+hr
+  border-top: 1px solid $uiBorderColor;
+
+.center-table
+  display: table
+  margin-left: auto
+  margin-right: auto

Packages/design/styles/mixins.styl

@@ -0,0 +1,13 @@
+transition(t)
+  transition: t
+  -webkit-transition: t
+  -ms-transition: t
+  -o-transition: t
+  -moz-transition: t
+
+transform(t)
+  transform: t
+  -webkit-transform: t
+  -ms-transform: t
+  -o-transform: t
+  -moz-transform: t

Packages/design/styles/spacings.styl

@@ -0,0 +1,39 @@
+$spacer = 1rem
+
+$spacer-x = $spacer
+$spacer-y = $spacer
+
+$spacerAxis = $spacer-x,
+              $spacer-y
+
+$spacings = 0 0,
+            1 1,
+            2 1.5,
+            3 3g
+
+$properties = m margin,
+              p padding
+
+$sides = t top 1,
+         r right 0,
+         b bottom 1,
+         l left 0
+
+$axes = x left right 0,
+        y top bottom 1
+
+for $property in $properties
+  for $spacing in $spacings
+    .{$property[0]}-a-{$spacing[0]}
+      {$property[1]} $spacing[1]*$spacer !important
+    for $side in $sides
+      .{$property[0]}-{$side[0]}-{$spacing[0]}
+        {$property[1]}-{$side[1]} $spacing[1]*$spacerAxis[$side[2]] !important
+    for $axis in $axes
+      .{$property[0]}-{$axis[0]}-{$spacing[0]}
+        {$property[1]}-{$axis[1]} $spacing[1]*$spacerAxis[$axis[3]] !important
+        {$property[1]}-{$axis[2]} $spacing[1]*$spacerAxis[$axis[3]] !important
+
+.m-x-auto
+  margin-left: auto !important
+  margin-right: auto !important

Packages/design/styles/variables.styl

@@ -0,0 +1,34 @@
+// Interface UI Colors
+$defaultColor = #94A8B3
+$hoverColor = #ffffff
+$activeColor = #40D9B8
+$uiBorderColor = #436270
+$uiBorderColorDark = #3C5D80
+$darkUiColor = #16202B
+$primaryBackgroundColor = #000000
+
+// Text Colors
+$textPrimaryColor = #ffffff
+$textSecondaryColor = #91B9CD
+
+// Other Colors
+$errorColor = #E29E4A
+$menuBackgroundColor = #F2F2F2
+
+// Sizes
+$topBarHeight = 30px
+$toolbarHeight = 50px
+
+// Thicknesses
+$uiBorderThickness = 1px
+
+// Fonts
+$logoFontFamily = "Sanchez"
+$logoFontWeight = 300
+
+// Transitions
+$transitionDuration = 0.3s
+$transitionEffect = ease
+$sidebarTransition = all $transitionDuration $transitionEffect
+$studiesSidebarMenuWidth = 307px
+$lesionsSidebarMenuWidth = 317px

Packages/design/styles/webfonts.styl

@@ -0,0 +1,2 @@
+@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,latin-ext)
+@import url(http://fonts.googleapis.com/css?family=Sanchez:400,700&subset=latin,latin-ext)