From 7aebb20c584829e1372c2078574c316f1208fb2b Mon Sep 17 00:00:00 2001 From: Bruno Alves de Faria Date: Tue, 19 Jul 2016 10:05:10 -0300 Subject: [PATCH] LT-253: Making lesion table looks like the specified in design --- LesionTracker/.meteor/dev_bundle | 1 + Packages/design/package.js | 3 +- .../design/styles/components/select2.styl | 62 +++++++++++++++++++ Packages/design/styles/imports/mixins.styl | 10 +++ .../both/schema/additionalFindings.js | 12 ++-- .../additionalFindings.html | 2 +- .../additionalFindings.styl | 32 ++++++---- 7 files changed, 102 insertions(+), 20 deletions(-) create mode 100644 LesionTracker/.meteor/dev_bundle create mode 100644 Packages/design/styles/components/select2.styl diff --git a/LesionTracker/.meteor/dev_bundle b/LesionTracker/.meteor/dev_bundle new file mode 100644 index 000000000..88055c0bb --- /dev/null +++ b/LesionTracker/.meteor/dev_bundle @@ -0,0 +1 @@ +C:\Users\bruno\AppData\Local\.meteor\packages\meteor-tool\1.3.4_4\mt-os.windows.x86_32\dev_bundle \ No newline at end of file diff --git a/Packages/design/package.js b/Packages/design/package.js index 0c0b080ac..64115b13a 100644 --- a/Packages/design/package.js +++ b/Packages/design/package.js @@ -31,7 +31,8 @@ Package.onUse(function(api) { // Component styles api.addFiles([ - 'styles/components/radio.styl' + 'styles/components/radio.styl', + 'styles/components/select2.styl' ], 'client'); // Rounded Button Group diff --git a/Packages/design/styles/components/select2.styl b/Packages/design/styles/components/select2.styl new file mode 100644 index 000000000..d91a3fef1 --- /dev/null +++ b/Packages/design/styles/components/select2.styl @@ -0,0 +1,62 @@ +@import "{design}/app" + +// TODO: [design] can't we use colors that are already in common pallete? +$gray1 = #C3C3C3 +$gray2 = #B6B6B6 +$gray3 = #676767 +$gray4 = #3E3E3E +$borderRadius = 2px + +span.select2.select2-container + font-weight: normal + + span.select2-selection + border: 0 + border-radius: $borderRadius + + &, span.select2-selection__rendered, span.select2-selection__arrow + height: 30px + + span.select2-selection__rendered + line-height: 34px + padding-left: 11px + + span.select2-selection__arrow + background-color: $gray1 + border-left: 1px solid $primaryBackgroundColor + border-top-right-radius: $borderRadius + border-bottom-right-radius: $borderRadius + right: 0 + top: 0 + width: 20px + + b + display: none + + span.select2-selection--multiple + background-color: $gray2 + min-height: 30px + + input.select2-search__field + color: $gray4 + placeholder-color($gray4) + + li.select2-selection__choice + background-color: #FFF + border-color: $uiGray + border-radius: $borderRadius + color: $gray4 + line-height: 22px + margin-top: 3px + + span.select2-selection__choice__remove + color: $gray3 + float: right + font-size: 20px + font-weight: 300 + line-height: 20px + margin-left: 6px + margin-right: 0 + + span.select2-selection__clear + display: none diff --git a/Packages/design/styles/imports/mixins.styl b/Packages/design/styles/imports/mixins.styl index 9bf66a4db..c67ced44a 100644 --- a/Packages/design/styles/imports/mixins.styl +++ b/Packages/design/styles/imports/mixins.styl @@ -25,3 +25,13 @@ transform-origin(o) -ms-transform-origin: o -o-transform-origin: o -moz-transform-origin: o + +placeholder-color(c) + &::-webkit-input-placeholder + color: c + &:-moz-placeholder + color: c + &::-moz-placeholder + color: c + &:-ms-input-placeholder + color: c diff --git a/Packages/lesiontracker/both/schema/additionalFindings.js b/Packages/lesiontracker/both/schema/additionalFindings.js index 67a4e8369..8cf64c99b 100644 --- a/Packages/lesiontracker/both/schema/additionalFindings.js +++ b/Packages/lesiontracker/both/schema/additionalFindings.js @@ -11,42 +11,42 @@ export const schema = new SimpleSchema({ // TODO: Add check so that the value cannot be None & something other region regionsOfMetastaticDisease: { type: [String], - label: 'Regions of Metastatic Disease', + label: 'Regions of metastatic disease', allowedValues: ['None', 'Lymph Node'], defaultValue: ['None'], optional: true }, tracerRelatedToMetastaticDisease: { type: String, - label: 'Tracer Related to Metastatic Disease?', + label: 'Tracer related to metastatic disease?', allowedValues: ['Yes', 'No'], defaultValue: 'Yes', optional: true }, numberOfBoneLesions: { type: String, - label: 'Number of Bone Lesions', + label: 'Number of bone lesions', allowedValues: ['0', '1-2', '2-4', '>5'], defaultValue: '0', optional: true }, acceptableImageQuality: { type: String, - label: 'Acceptable Image Quality', + label: 'Acceptable image quality', allowedValues: ['Yes', 'No'], defaultValue: 'Yes', optional: true }, adequateAnatomicalCoverage: { type: String, - label: 'Adequate Anatomical Coverage', + label: 'Adequate anatomical coverage', allowedValues: ['Yes', 'No'], defaultValue: 'Yes', optional: true }, presenceOfContrast: { type: String, - label: 'Presence of Contrast', + label: 'Presence of contrast', allowedValues: ['Yes', 'No'], defaultValue: 'Yes', optional: true diff --git a/Packages/lesiontracker/client/components/additionalFindings/additionalFindings.html b/Packages/lesiontracker/client/components/additionalFindings/additionalFindings.html index 70ec73b34..abad1c2f1 100644 --- a/Packages/lesiontracker/client/components/additionalFindings/additionalFindings.html +++ b/Packages/lesiontracker/client/components/additionalFindings/additionalFindings.html @@ -15,7 +15,7 @@ key='regionsOfMetastaticDisease' multiple=true options=(clone - placeholder='Search Regions' + placeholder='Choose a region...' allowClear=true ) }} diff --git a/Packages/lesiontracker/client/components/additionalFindings/additionalFindings.styl b/Packages/lesiontracker/client/components/additionalFindings/additionalFindings.styl index bb94d7801..0b8428f90 100644 --- a/Packages/lesiontracker/client/components/additionalFindings/additionalFindings.styl +++ b/Packages/lesiontracker/client/components/additionalFindings/additionalFindings.styl @@ -10,7 +10,6 @@ overflow-x: hidden overflow-y: auto margin-right: -16px - padding-bottom: 100px padding-right: 16px -webkit-overflow-scrolling: touch @@ -33,7 +32,8 @@ .form-group color: $textPrimaryColor - padding: 7px 11px + margin-bottom: 0 + padding: 7px 27px 7px 11px width: 100% &:not(:last-child) @@ -43,7 +43,7 @@ display: block font-weight: bold line-height: 15px - margin: 10px 0 8px + margin: 10px 2px 8px .control-label font-size: 14px @@ -51,8 +51,17 @@ display: inline-block padding: 5px + .select2 + margin-bottom: 8px + margin-left: 3px + margin-top: 5px + + .select2-selection--single + width: 91px + .group-radio height: 30px + margin-bottom: 15px label display: inline-block @@ -61,7 +70,7 @@ font-weight: 100 height: 30px line-height: 30px - width: 50% + width: 109px .disease-regions + .select2 width: 100% !important @@ -71,7 +80,7 @@ .buttonSection cursor: pointer - height: 100px + height: 90px color: $defaultColor &:hover @@ -91,17 +100,16 @@ div float: left display: inline-block - height: 80px + height: 92px .buttonLabel - line-height: 80px - padding: 0 30px + line-height: 92px + padding: 0 12px .svgContainer - padding: 15px 5px - width: 40px + padding: 25px 14px svg - width: 40px - height: 40px + width: 36px + height: 36px fill: $textPrimaryColor