From a538b5f07d361670f5ba9170a14a8566276acfb7 Mon Sep 17 00:00:00 2001 From: Erik Ziegler Date: Tue, 13 Oct 2015 20:50:48 +0200 Subject: [PATCH] Cleanup to make LesionTracker layout work with refactored packages --- .../client/compatibility/lesionTool.js | 7 ++- .../components/hidingPanel/hidingPanel.styl | 7 +-- .../lesionMeasurementContainer.html | 5 ++ .../lesionMeasurementContainer.styl | 7 +++ .../lesionTableContainer.html | 5 ++ .../lesionTableContainer.styl | 7 +++ .../lesionTrackerLayout.html | 16 ++++++ .../lesionTrackerLayout.styl | 18 +++++++ .../client/components/toolbar/toolbar.css | 48 ------------------ .../client/components/toolbar/toolbar.html | 36 ++++++------- .../client/components/toolbar/toolbar.js | 21 ++++---- .../client/components/toolbar}/toolbar.styl | 0 LesionTracker/client/components/viewer.css | 9 +++- LesionTracker/client/components/viewer.html | 1 + LesionTracker/client/components/viewer.js | 2 +- .../components/viewerMain/viewerMain.css | 5 -- .../components/viewerMain/viewerMain.html | 1 + .../components/viewerMain/viewerMain.styl | 8 +++ LesionTracker/client/route.js | 4 +- .../client/stylesheets/docking-container.css | 9 ++-- .../viewer/{toolRow => toolbar}/toolbar.html | 0 .../viewer/{toolRow => toolbar}/toolbar.js | 0 .../components/viewer/toolbar/toolbar.styl | 15 ++++++ OHIFViewer/images/logo.png | Bin 0 -> 5710 bytes .../studyBrowser/studyBrowser.styl | 6 ++- 25 files changed, 140 insertions(+), 97 deletions(-) create mode 100644 LesionTracker/client/components/lesionMeasurementContainer/lesionMeasurementContainer.html create mode 100644 LesionTracker/client/components/lesionMeasurementContainer/lesionMeasurementContainer.styl create mode 100644 LesionTracker/client/components/lesionTableContainer/lesionTableContainer.html create mode 100644 LesionTracker/client/components/lesionTableContainer/lesionTableContainer.styl create mode 100644 LesionTracker/client/components/lesionTrackerLayout/lesionTrackerLayout.html create mode 100644 LesionTracker/client/components/lesionTrackerLayout/lesionTrackerLayout.styl delete mode 100644 LesionTracker/client/components/toolbar/toolbar.css rename {OHIFViewer/client/components/viewer/toolRow => LesionTracker/client/components/toolbar}/toolbar.styl (100%) delete mode 100644 LesionTracker/client/components/viewerMain/viewerMain.css create mode 100644 LesionTracker/client/components/viewerMain/viewerMain.styl rename OHIFViewer/client/components/viewer/{toolRow => toolbar}/toolbar.html (100%) rename OHIFViewer/client/components/viewer/{toolRow => toolbar}/toolbar.js (100%) create mode 100644 OHIFViewer/client/components/viewer/toolbar/toolbar.styl create mode 100644 OHIFViewer/images/logo.png diff --git a/LesionTracker/client/compatibility/lesionTool.js b/LesionTracker/client/compatibility/lesionTool.js index 389091db9..14fa4add9 100644 --- a/LesionTracker/client/compatibility/lesionTool.js +++ b/LesionTracker/client/compatibility/lesionTool.js @@ -282,4 +282,9 @@ var cornerstoneTools = (function ($, cornerstone, cornerstoneMath, cornerstoneTo toolType: toolType }); return cornerstoneTools; -}($, cornerstone, cornerstoneMath, cornerstoneTools)); \ No newline at end of file +}($, cornerstone, cornerstoneMath, cornerstoneTools)); + +toolManager.addTool('lesion', { + mouse: cornerstoneTools.lesion, + touch: cornerstoneTools.lesionTouch +}); \ No newline at end of file diff --git a/LesionTracker/client/components/hidingPanel/hidingPanel.styl b/LesionTracker/client/components/hidingPanel/hidingPanel.styl index bff3dc975..63aa6b9a4 100644 --- a/LesionTracker/client/components/hidingPanel/hidingPanel.styl +++ b/LesionTracker/client/components/hidingPanel/hidingPanel.styl @@ -1,9 +1,6 @@ .hidingPanel width: 12% height: 100% - margin-top: 35px + padding-top: 35px position: relative - float: left - overflow: auto - background-color: blue - color: black \ No newline at end of file + float: left \ No newline at end of file diff --git a/LesionTracker/client/components/lesionMeasurementContainer/lesionMeasurementContainer.html b/LesionTracker/client/components/lesionMeasurementContainer/lesionMeasurementContainer.html new file mode 100644 index 000000000..70b990a2b --- /dev/null +++ b/LesionTracker/client/components/lesionMeasurementContainer/lesionMeasurementContainer.html @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/LesionTracker/client/components/lesionMeasurementContainer/lesionMeasurementContainer.styl b/LesionTracker/client/components/lesionMeasurementContainer/lesionMeasurementContainer.styl new file mode 100644 index 000000000..41a05cb28 --- /dev/null +++ b/LesionTracker/client/components/lesionMeasurementContainer/lesionMeasurementContainer.styl @@ -0,0 +1,7 @@ +.lesionMeasurementContainer + width: 24% + float: left + height: 100% + + background-color: white + border: 8px solid lightblue \ No newline at end of file diff --git a/LesionTracker/client/components/lesionTableContainer/lesionTableContainer.html b/LesionTracker/client/components/lesionTableContainer/lesionTableContainer.html new file mode 100644 index 000000000..2caf2f007 --- /dev/null +++ b/LesionTracker/client/components/lesionTableContainer/lesionTableContainer.html @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/LesionTracker/client/components/lesionTableContainer/lesionTableContainer.styl b/LesionTracker/client/components/lesionTableContainer/lesionTableContainer.styl new file mode 100644 index 000000000..5cf65bb5d --- /dev/null +++ b/LesionTracker/client/components/lesionTableContainer/lesionTableContainer.styl @@ -0,0 +1,7 @@ +.lesionTableContainer + background-color: pink + height: 25% + max-height: 200px + + background-color: white + border: 8px solid pink diff --git a/LesionTracker/client/components/lesionTrackerLayout/lesionTrackerLayout.html b/LesionTracker/client/components/lesionTrackerLayout/lesionTrackerLayout.html new file mode 100644 index 000000000..4f6f8c3d4 --- /dev/null +++ b/LesionTracker/client/components/lesionTrackerLayout/lesionTrackerLayout.html @@ -0,0 +1,16 @@ + \ No newline at end of file diff --git a/LesionTracker/client/components/lesionTrackerLayout/lesionTrackerLayout.styl b/LesionTracker/client/components/lesionTrackerLayout/lesionTrackerLayout.styl new file mode 100644 index 000000000..2629a51f8 --- /dev/null +++ b/LesionTracker/client/components/lesionTrackerLayout/lesionTrackerLayout.styl @@ -0,0 +1,18 @@ +.navbar + margin-bottom: 0 + border-radius: 0px + +.navbar-form + margin: 0 + padding: 15px 3px + +.navbar-default + -webkit-transition: background-color 200ms linear + -moz-transition: background-color 200ms linear + -o-transition: background-color 200ms linear + -ms-transition: background-color 200ms linear + transition: background-color 200ms linear + +@media (min-width: 768px) + .navbar + border-radius: 0px \ No newline at end of file diff --git a/LesionTracker/client/components/toolbar/toolbar.css b/LesionTracker/client/components/toolbar/toolbar.css deleted file mode 100644 index 21cbff5c8..000000000 --- a/LesionTracker/client/components/toolbar/toolbar.css +++ /dev/null @@ -1,48 +0,0 @@ -.toolbar { - width: 100%; - height: 35px; - text-align: center; -} - -#toolbar-group button { - text-align: center; - margin-top: 2px; - margin-right: 3px; - margin-left: 3px; - color: #ffffff; - background-color: black; - width: 30px; - height: 30px; - border: 1px solid white; -} - -#toolbar-group button > span { - width: 12px; - height: 12px; - position: absolute; - top: 9px; - left: 9px; - right: 9px; - bottom: 9px; -} - - -#toolbar-group .btn:hover { - border-width: 3px; - background-color: transparent; - color: white; -} -#toolbar-group .btn:focus, .btn:active { - outline: 0 !important; - border-width: 5px; - background-color: transparent; - color:white; - text-align: center; -} - -#toolbar-group .btn:focus > span{ - top: 6px; - left: 6px; - right: 6px; - bottom: 6px; -} \ No newline at end of file diff --git a/LesionTracker/client/components/toolbar/toolbar.html b/LesionTracker/client/components/toolbar/toolbar.html index e40c066f7..710e5de5a 100644 --- a/LesionTracker/client/components/toolbar/toolbar.html +++ b/LesionTracker/client/components/toolbar/toolbar.html @@ -1,16 +1,26 @@ \ No newline at end of file diff --git a/LesionTracker/client/components/viewer.js b/LesionTracker/client/components/viewer.js index d7b3e0584..bfcc9709e 100644 --- a/LesionTracker/client/components/viewer.js +++ b/LesionTracker/client/components/viewer.js @@ -60,7 +60,7 @@ function resizeViewports() { Session.setDefault('ActiveViewport', 0); Session.setDefault('viewportRows', 1); -Session.setDefault('viewportColumns', 1); +Session.setDefault('viewportColumns', 2); // Avoid doing DOM manipulation during the resize handler // because it is fired very often. diff --git a/LesionTracker/client/components/viewerMain/viewerMain.css b/LesionTracker/client/components/viewerMain/viewerMain.css deleted file mode 100644 index fe6a741cb..000000000 --- a/LesionTracker/client/components/viewerMain/viewerMain.css +++ /dev/null @@ -1,5 +0,0 @@ -.viewerMain { - width: 88%; - height: 100%; - margin-left: 12%; -} \ No newline at end of file diff --git a/LesionTracker/client/components/viewerMain/viewerMain.html b/LesionTracker/client/components/viewerMain/viewerMain.html index 3113df387..94cf7fa71 100644 --- a/LesionTracker/client/components/viewerMain/viewerMain.html +++ b/LesionTracker/client/components/viewerMain/viewerMain.html @@ -2,6 +2,7 @@
{{> toolbar}} {{> imageViewerViewports}} + {{> lesionTableContainer}}
\ No newline at end of file diff --git a/LesionTracker/client/components/viewerMain/viewerMain.styl b/LesionTracker/client/components/viewerMain/viewerMain.styl new file mode 100644 index 000000000..57d9ab8c9 --- /dev/null +++ b/LesionTracker/client/components/viewerMain/viewerMain.styl @@ -0,0 +1,8 @@ +.viewerMain + width: 64%; + height: 100% + float: left + +#imageViewerViewports + height: calc(75% - 30px) + width: 100% \ No newline at end of file diff --git a/LesionTracker/client/route.js b/LesionTracker/client/route.js index eca66daf3..f8a6ced20 100644 --- a/LesionTracker/client/route.js +++ b/LesionTracker/client/route.js @@ -1,5 +1,5 @@ Router.configure({ - layoutTemplate: 'layout', + layoutTemplate: 'lesionTrackerLayout', //loadingTemplate: '', notFoundTemplate: 'notFound' }); @@ -14,7 +14,7 @@ Router.route('/', function () { ViewerStudies = new Mongo.Collection(null); Router.route('/viewer/:_id', { - layoutTemplate: 'layout', + layoutTemplate: 'lesionTrackerLayout', name: 'viewer', onBeforeAction: function() { var self = this; diff --git a/LesionTracker/client/stylesheets/docking-container.css b/LesionTracker/client/stylesheets/docking-container.css index 265bd5f69..fa15baec2 100644 --- a/LesionTracker/client/stylesheets/docking-container.css +++ b/LesionTracker/client/stylesheets/docking-container.css @@ -1,16 +1,17 @@ /*****************************/ /* Toggle */ /*****************************/ -* { - box-sizing: border-box; -} .dockingContainer, .collapseVertical, .collapseHorizontal { + -o-transition: all 0.3s ease-out; + -ms-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .dockingContainer { + -o-transition: all 0.3s ease-out; + -ms-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; @@ -47,6 +48,8 @@ .btnCollapseIcon-collapse{ -moz-transform: rotate(180deg); + -ms-transform: rotate(180deg); + -o-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } diff --git a/OHIFViewer/client/components/viewer/toolRow/toolbar.html b/OHIFViewer/client/components/viewer/toolbar/toolbar.html similarity index 100% rename from OHIFViewer/client/components/viewer/toolRow/toolbar.html rename to OHIFViewer/client/components/viewer/toolbar/toolbar.html diff --git a/OHIFViewer/client/components/viewer/toolRow/toolbar.js b/OHIFViewer/client/components/viewer/toolbar/toolbar.js similarity index 100% rename from OHIFViewer/client/components/viewer/toolRow/toolbar.js rename to OHIFViewer/client/components/viewer/toolbar/toolbar.js diff --git a/OHIFViewer/client/components/viewer/toolbar/toolbar.styl b/OHIFViewer/client/components/viewer/toolbar/toolbar.styl new file mode 100644 index 000000000..774a71141 --- /dev/null +++ b/OHIFViewer/client/components/viewer/toolbar/toolbar.styl @@ -0,0 +1,15 @@ +#toolbar + background-color: black + text-align: center + + .btn-group + display: inline-block + + button + text-align: center + color: #ffffff + background-color: #424242 + border-color: #424242 + + &.active, &:active + background-color: #3B678E \ No newline at end of file diff --git a/OHIFViewer/images/logo.png b/OHIFViewer/images/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..da8c2746f57cdc72181f757cdd8ca7a31de13d62 GIT binary patch literal 5710 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 literal 0 HcmV?d00001 diff --git a/Packages/viewerbase/components/studyBrowser/studyBrowser/studyBrowser.styl b/Packages/viewerbase/components/studyBrowser/studyBrowser/studyBrowser.styl index f5487f6a8..1ed31828d 100644 --- a/Packages/viewerbase/components/studyBrowser/studyBrowser/studyBrowser.styl +++ b/Packages/viewerbase/components/studyBrowser/studyBrowser/studyBrowser.styl @@ -1,6 +1,8 @@ .studyBrowser float: left height: 100% - width: 120px + width: 100% + min-width: 120px overflow: auto - background-color: black \ No newline at end of file + background-color: black + padding-bottom: 20px \ No newline at end of file