LT-242: Creating UI resizable, improving heads up display layout and fixing tool selection behavior
This commit is contained in:
Bruno Alves de Faria
Erik Ziegler
parent
40062e2e9d
commit
9beee70081
@ -17,7 +17,7 @@ $textColorActive = #2D2D2D
|
||||
|
||||
.roundedButton
|
||||
align-items: center
|
||||
background-color: $uiGrayDarker
|
||||
background-color: $uiGrayDark
|
||||
border: 1px $uiBorderColorDark solid
|
||||
color: $textSecondaryColor
|
||||
display: flex
|
||||
@ -56,7 +56,7 @@ $textColorActive = #2D2D2D
|
||||
|
||||
&:hover .roundedButton
|
||||
background-color: $boxBackgroundColor
|
||||
color: $uiGrayDarker
|
||||
color: $uiGrayDark
|
||||
|
||||
&.active .roundedButton
|
||||
background-color: $activeColor
|
||||
@ -66,5 +66,5 @@ $textColorActive = #2D2D2D
|
||||
&:hover .roundedButton
|
||||
&.active .roundedButton
|
||||
svg
|
||||
fill: $uiGrayDarker
|
||||
stroke: $uiGrayDarker
|
||||
fill: $uiGrayDark
|
||||
stroke: $uiGrayDark
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
// Common pallete
|
||||
$uiYellow = #E29E4A
|
||||
$uiSkyBlue = #6FBDE2
|
||||
$uiGrayDark = #263340
|
||||
$uiGrayDarker = #16202B
|
||||
$uiGrayDarkest = #151A1F
|
||||
|
||||
$uiGray = #263340
|
||||
$uiGrayDark = #16202B
|
||||
$uiGrayDarker = #151A1F
|
||||
$uiGrayDarkest = #14191E
|
||||
|
||||
// Interface UI Colors
|
||||
$defaultColor = #94A8B3
|
||||
|
||||
@ -1,183 +1,185 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<symbol id="icon-hud" viewBox="0 0 20 22">
|
||||
<title>
|
||||
HUD
|
||||
</title>
|
||||
<g id="icon-hud-group" fill="none" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path id="icon-hud-dashes" d="m14.5,2.75 2,0 a2.5 2.5 0 0 1 2.5 2.5 l0,13.25 a2.5 2.5 0 0 1 -2.5 2.5 l-11.5,0 a2.5 2.5 0 0 1 -2.5 -2.5 l0,-1" stroke-dasharray="1,3" />
|
||||
<path id="icon-hud-box" d="m0.5,2 0,14 a1.5 1.5 0 0 0 1.5 1.5 l12,0 a1.5 1.5 0 0 0 1.5 -1.5 l0,-14" />
|
||||
<path id="icon-hud-top" d="m2,2 12,0" stroke-width="4" />
|
||||
<path id="icon-hud-paralel" d="m4.4,7.5 7.2,0 m0,3 -7.2,0 m0,3 7.2,0" stroke-linecap="square" />
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id="icon-measurements-additional" viewBox="0 0 16 16">
|
||||
<title>
|
||||
Additional Measurements
|
||||
</title>
|
||||
<g id="icon-measurements-additional-group" stroke="none">
|
||||
<path id="icon-measurements-additional-boxes" d="M11,2 l1.85,-1.85 a1 1 0 0 1 1,0 l2,2 a1 1 0 0 1 0,1 l-1.85,1.85Z M10,3 l-10,10 0,3 3,0 10,-10Z M16,16 l0,-2 -9,0 -2,2Z" />
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id="icon-measurements-lesions" viewBox="0 0 18 10">
|
||||
<title>
|
||||
Lesions
|
||||
</title>
|
||||
<g id="icon-measurements-lesions-group" stroke="none">
|
||||
<path id="icon-measurements-lesions-boxes" d="M0,0 2,0 2,2 0,2Z M4,0 18,0 18,2 4,2Z M0,4 2,4 2,6 0,6Z M4,4 18,4 18,6 4,6Z M0,8 2,8 2,10 0,10Z M4,8 18,8 18,10 4,10Z" />
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id="icon-settings" viewBox="0 0 15 15">
|
||||
<title>
|
||||
Settings
|
||||
</title>
|
||||
<path d="M12.85 8.25C12.85 8.03 12.93 7.8 12.93 7.5 12.93 7.2 12.93 6.98 12.85 6.75L14.43 5.48C14.58 5.33 14.58 5.18 14.5 5.03L13 2.4C12.93 2.33 12.78 2.25 12.55 2.33L10.68 3.08C10.3 2.78 9.85 2.55 9.4 2.33L9.1 0.38C9.18 0.15 8.95 0 8.8 0L5.8 0C5.65 0 5.43 0.15 5.43 0.3L5.13 2.33C4.68 2.48 4.3 2.78 3.85 3.08L2.05 2.33C1.83 2.25 1.68 2.33 1.53 2.48L0.03 5.1C-0.05 5.18 0.03 5.4 0.18 5.55L1.75 6.75C1.75 6.98 1.68 7.2 1.68 7.5 1.68 7.8 1.68 8.03 1.75 8.25L0.18 9.53C0.03 9.68 0.03 9.82 0.1 9.98L1.6 12.6C1.68 12.68 1.83 12.75 2.05 12.68L3.93 11.93C4.3 12.23 4.75 12.45 5.2 12.68L5.5 14.63C5.5 14.78 5.65 14.93 5.88 14.93L8.88 14.93C9.03 14.93 9.25 14.78 9.25 14.63L9.55 12.68C10 12.45 10.45 12.23 10.83 11.93L12.7 12.68C12.85 12.75 13.08 12.68 13.15 12.53L14.65 9.9C14.73 9.75 14.73 9.53 14.58 9.45L12.85 8.25 12.85 8.25ZM7.3 10.13C5.88 10.13 4.68 8.93 4.68 7.5 4.68 6.08 5.88 4.88 7.3 4.88 8.73 4.88 9.93 6.08 9.93 7.5 9.93 8.93 8.73 10.13 7.3 10.13L7.3 10.13Z" id="Shape"/>
|
||||
</symbol>
|
||||
<symbol id="icon-status-complete" viewBox="0 0 27 27">
|
||||
<title>
|
||||
Complete
|
||||
</title>
|
||||
<path d="M13.5 0C6.08 0 0 6.04 0 13.42 0 20.8 6.08 26.83 13.5 26.83 20.93 26.83 27 20.8 27 13.42 27 6.04 20.93 0 13.5 0L13.5 0ZM10.8 20.13L4.05 13.42 5.94 11.54 10.8 16.37 21.06 6.17 22.95 8.05 10.8 20.13 10.8 20.13Z" id="Shape"/>
|
||||
</symbol>
|
||||
<symbol id="icon-status-lock" viewBox="0 0 16 21">
|
||||
<title>
|
||||
Locked
|
||||
</title>
|
||||
<path d="M14 7L13 7 13 5C13 2.2 10.8 0 8 0 5.2 0 3 2.2 3 5L3 7 2 7C0.9 7 0 7.9 0 9L0 19C0 20.1 0.9 21 2 21L14 21C15.1 21 16 20.1 16 19L16 9C16 7.9 15.1 7 14 7L14 7ZM11.1 7L4.9 7 4.9 5C4.9 3.3 6.3 1.9 8 1.9 9.7 1.9 11.1 3.3 11.1 5L11.1 7 11.1 7Z"/>
|
||||
</symbol>
|
||||
<symbol id="icon-studies" viewBox="0 0 15 13">
|
||||
<title>
|
||||
Studies
|
||||
</title>
|
||||
<g id="icon-studies-group" stroke="none">
|
||||
<path id="icon-studies-boxes" d="M0,0 7,0 7,6 0,6Z M8,0 15,0 15,6 8,6Z M0,7 7,7 7,13 0,13Z M8,7 15,7 15,13 8,13Z" />
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id="icon-tools-levels" viewBox="0 0 18 18">
|
||||
<title>
|
||||
Window / Level
|
||||
</title>
|
||||
<g id="icon-tools-levels-group">
|
||||
<path id="icon-tools-levels-path" d="M14.5,3.5 a1 1 0 0 1 -11,11 Z" stroke="none" opacity="0.8" />
|
||||
<circle id="icon-tools-levels-circle" cx="9" cy="9" r="8" fill="none" stroke-width="2" />
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id="icon-tools-link" viewBox="0 0 23 15">
|
||||
<title>
|
||||
Link
|
||||
</title>
|
||||
<g id="icon-tools-link-group" stroke="none">
|
||||
<circle id="icon-tools-link-circle-l" opacity="0.8" cx="7.5" cy="7.5" r="7.5" />
|
||||
<circle id="icon-tools-link-circle-r" opacity="0.6" cx="15.5" cy="7.5" r="7.5" />
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id="icon-tools-measure-non-target" viewBox="0 0 24 24">
|
||||
<title>
|
||||
Non-Target Measurement
|
||||
</title>
|
||||
<g id="icon-tools-measure-non-target-group" fill="none" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle id="icon-tools-measure-non-target-circle" cx="6.5" cy="6.5" r="6" />
|
||||
<path id="icon-tools-measure-non-target-plus" d="M6.5,3 l0,7 M3,6.5 l7,0"></path>
|
||||
<path id="icon-tools-measure-non-target-arrow" d="M23,7 l-15,15 M7,17 l0,6 6,0" stroke-width="2" />
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id="icon-tools-measure-target" viewBox="0 0 26 26">
|
||||
<title>
|
||||
Target Measurement
|
||||
</title>
|
||||
<g id="icon-tools-measure-target-group" stroke-width="0">
|
||||
<path id="icon-tools-measure-target-ruler" d="m9.5,26 2,-2 -1.5,-1.5 0.5,-0.5 1.5,1.5 1.5,-1.5 -2.5,-2.5 0.5,-0.5 2.5,2.5 1.5,-1.5 -1.5,-1.5 0.5,-0.5 1.5,1.5 1.5,-1.5 -2.5,-2.5 0.5,-0.5 2.5,2.5 1.5,-1.5 -1.5,-1.5 0.5,-0.5 1.5,1.5 1.5,-1.5 -2.5,-2.5 0.5,-0.5 2.5,2.5 1.5,-1.5 -1.5,-1.5 0.5,-0.5 1.5,1.5 2,-2 -4,-4 a2 2 0 0 0 -2.5 0 l-14 14 a2 2 0 0 0 0 2.5 l4,4 Z" />
|
||||
<path id="icon-tools-measure-target-plus" d="m6,0 a6 6 0 0 1 0 12 a6 6 0 0 1 0 -12 m0.5,3 a0.5 0.5 0 0 0 -1 0 l0,2.5 -2.5,0 a0.5 0.5 0 0 0 0 1 l2.5,0 0,2.5 a0.5 0.5 0 0 0 1 0 l0,-2.5 2.5,0 a0.5 0.5 0 0 0 0 -1 l-2.5,0 z" />
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id="icon-tools-measure-temp" viewBox="0 0 24 24">
|
||||
<title>
|
||||
Temporary Measurement
|
||||
</title>
|
||||
<g id="icon-tools-measure-temp-group" fill="none" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle id="icon-tools-measure-temp-circle" cx="6.5" cy="6.5" r="6" />
|
||||
<path id="icon-tools-measure-temp-plus" d="M6.5,3 l0,7 M3,6.5 l7,0"></path>
|
||||
<path id="icon-tools-measure-temp-dashes" d="m22.5,6 -16.5,16.5" stroke-width="3" stroke-dasharray="0.6666,5" />
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id="icon-tools-more" viewBox="0 0 18 18">
|
||||
<title>
|
||||
More
|
||||
</title>
|
||||
<g id="icon-tools-more-group" stroke="none">
|
||||
<path id="icon-tools-more-circle" d="M9,0 a9 9 0 0 1 0 18 a9 9 0 0 1 0 -18 M4.5,8 a1.5 1.5 0 0 0 0 3 a1.5 1.5 0 0 0 0 -3 M9,8 a1.5 1.5 0 0 0 0 3 a1.5 1.5 0 0 0 0 -3 M13.5,8 a1.5 1.5 0 0 0 0 3 a1.5 1.5 0 0 0 0 -3" />
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id="icon-tools-pan" viewBox="0 0 18 18">
|
||||
<title>
|
||||
Pan
|
||||
</title>
|
||||
<g id="icon-tools-pan-group" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path id="icon-tools-pan-line-v" d="M9,1 L9,17"></path>
|
||||
<path id="icon-tools-pan-line-h" d="M1,9 L17,9"></path>
|
||||
<polyline id="icon-tools-pan-caret-t" points="7 3 9 1 11 3"></polyline>
|
||||
<polyline id="icon-tools-pan-caret-r" points="15 11 17 9 15 7"></polyline>
|
||||
<polyline id="icon-tools-pan-caret-b" points="11 15 9 17 7 15"></polyline>
|
||||
<polyline id="icon-tools-pan-caret-l" points="3 7 1 9 3 11"></polyline>
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id="icon-tools-zoom" viewBox="0 0 17 17">
|
||||
<title>
|
||||
Zoom
|
||||
</title>
|
||||
<g id="icon-tools-zoom-group" fill="none" stroke-width="2" stroke-linecap="round">
|
||||
<path id="icon-tools-zoom-path" d="m11.5,11.5 4.5,4.5" />
|
||||
<circle id="icon-tools-zoom-circle" cx="7" cy="7" r="6" />
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id="icon-trial-info" viewBox="0 0 20 20">
|
||||
<title>
|
||||
Trial Information
|
||||
</title>
|
||||
<g id="icon-trial-info-group" fill="none" stroke-width="2">
|
||||
<path id="icon-trial-info-circle" d="M10,1 a9 9 0 0 1 0 18 a9 9 0 0 1 0 -18 M10,5 l0,2 m0,2 0,6" />
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id="icon-ui-accordion-expand" viewBox="0 0 12 8">
|
||||
<title>
|
||||
Expand
|
||||
</title>
|
||||
<polygon transform="translate(6.000000, 3.700000) rotate(-270.000000) translate(-6.000000, -3.700000) " points="3.7 -2.3 2.3 -0.9 6.9 3.7 2.3 8.3 3.7 9.7 9.7 3.7"/>
|
||||
</symbol>
|
||||
<symbol id="icon-ui-add" viewBox="0 0 12 13">
|
||||
<title>
|
||||
Add
|
||||
</title>
|
||||
<path d="M6.5 7L6.5 12C6.5 12.28 6.28 12.5 6 12.5 5.72 12.5 5.5 12.28 5.5 12L5.5 7 0.5 7C0.22 7 0 6.78 0 6.5 0 6.22 0.22 6 0.5 6L5.5 6 5.5 1C5.5 0.72 5.72 0.5 6 0.5 6.28 0.5 6.5 0.72 6.5 1L6.5 6 11.5 6C11.78 6 12 6.22 12 6.5 12 6.78 11.78 7 11.5 7L6.5 7Z" id="Combined-Shape"/>
|
||||
</symbol>
|
||||
<symbol id="icon-ui-close" viewBox="0 0 14 14">
|
||||
<title>
|
||||
Close
|
||||
</title>
|
||||
<polygon id="Shape" points="14 1.4 12.6 0 7 5.6 1.4 0 0 1.4 5.6 7 0 12.6 1.4 14 7 8.4 12.6 14 14 12.6 8.4 7"/>
|
||||
</symbol>
|
||||
<symbol id="icon-create-comment" viewBox="0 0 37 34">
|
||||
<title>
|
||||
Comment
|
||||
</title>
|
||||
<path fill="#94a8b3" d="M22.32 14L35 14C36.1 14 37 14.9 37 16L37 28C37 29.1 36.1 30 35 30L21 30 17 34 17 20.39C19.45 18.97 21.36 16.71 22.32 14Z" id="Combined-Shape"/>
|
||||
<path d="M10 0C4.5 0 0 4.5 0 10 0 15.5 4.5 20 10 20 15.5 20 20 15.5 20 10 20 4.5 15.5 0 10 0L10 0ZM15 11L11 11 11 15 9 15 9 11 5 11 5 9 9 9 9 5 11 5 11 9 15 9 15 11 15 11Z" id="Shape"/>
|
||||
</symbol>
|
||||
<symbol id="icon-create-screen-capture" viewBox="0 0 37 35">
|
||||
<title>
|
||||
Capture Screen
|
||||
</title>
|
||||
<g id="camera-alt" transform="translate(17.000000, 17.000000)" fill="#94a8b3">
|
||||
<path d="M10 13C11.66 13 13 11.66 13 10 13 8.34 11.66 7 10 7 8.34 7 7 8.34 7 10 7 11.66 8.34 13 10 13Z" id="Oval"/>
|
||||
<path d="M7 0L5.2 2 2 2C0.9 2 0 2.9 0 4L0 16C0 17.1 0.9 18 2 18L18 18C19.1 18 20 17.1 20 16L20 4C20 2.9 19.1 2 18 2L14.8 2 13 0 7 0 7 0ZM10 15C7.2 15 5 12.8 5 10 5 7.2 7.2 5 10 5 12.8 5 15 7.2 15 10 15 12.8 12.8 15 10 15L10 15Z" id="Shape"/>
|
||||
</g>
|
||||
<path d="M10 0C4.5 0 0 4.5 0 10 0 15.5 4.5 20 10 20 15.5 20 20 15.5 20 10 20 4.5 15.5 0 10 0L10 0ZM15 11L11 11 11 15 9 15 9 11 5 11 5 9 9 9 9 5 11 5 11 9 15 9 15 11 15 11Z" id="Shape"/>
|
||||
</symbol>
|
||||
<symbol id="icon-ui-warning" viewBox="0 0 22 20">
|
||||
<title>
|
||||
Warning
|
||||
</title>
|
||||
<g id="icon-ui-warning-group" stroke="none">
|
||||
<path d="m11,0 11,20 -22,0Z m1,7 -2,0 0,6 2,0Z m0,8 -2,0 0,2 2,0Z" />
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<symbol id="icon-hud" viewBox="0 0 20 22">
|
||||
<title>
|
||||
HUD
|
||||
</title>
|
||||
<g id="icon-hud-group" fill="none" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path id="icon-hud-dashes" d="m14.5,2.75 2,0 a2.5 2.5 0 0 1 2.5 2.5 l0,13.25 a2.5 2.5 0 0 1 -2.5 2.5 l-11.5,0 a2.5 2.5 0 0 1 -2.5 -2.5 l0,-1" stroke-dasharray="1,3" />
|
||||
<path id="icon-hud-box" d="m0.5,2 0,14 a1.5 1.5 0 0 0 1.5 1.5 l12,0 a1.5 1.5 0 0 0 1.5 -1.5 l0,-14" />
|
||||
<path id="icon-hud-top" d="m2,2 12,0" stroke-width="4" />
|
||||
<path id="icon-hud-paralel" d="m4.4,7.5 7.2,0 m0,3 -7.2,0 m0,3 7.2,0" stroke-linecap="square" />
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id="icon-measurements-additional" viewBox="0 0 16 16">
|
||||
<title>
|
||||
Additional Measurements
|
||||
</title>
|
||||
<g id="icon-measurements-additional-group" stroke="none">
|
||||
<path id="icon-measurements-additional-boxes" d="M11,2 l1.85,-1.85 a1 1 0 0 1 1,0 l2,2 a1 1 0 0 1 0,1 l-1.85,1.85Z M10,3 l-10,10 0,3 3,0 10,-10Z M16,16 l0,-2 -9,0 -2,2Z" />
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id="icon-measurements-lesions" viewBox="0 0 18 10">
|
||||
<title>
|
||||
Lesions
|
||||
</title>
|
||||
<g id="icon-measurements-lesions-group" stroke="none">
|
||||
<path id="icon-measurements-lesions-boxes" d="M0,0 2,0 2,2 0,2Z M4,0 18,0 18,2 4,2Z M0,4 2,4 2,6 0,6Z M4,4 18,4 18,6 4,6Z M0,8 2,8 2,10 0,10Z M4,8 18,8 18,10 4,10Z" />
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id="icon-settings" viewBox="0 0 15 15">
|
||||
<title>
|
||||
Settings
|
||||
</title>
|
||||
<path d="M12.85 8.25C12.85 8.03 12.93 7.8 12.93 7.5 12.93 7.2 12.93 6.98 12.85 6.75L14.43 5.48C14.58 5.33 14.58 5.18 14.5 5.03L13 2.4C12.93 2.33 12.78 2.25 12.55 2.33L10.68 3.08C10.3 2.78 9.85 2.55 9.4 2.33L9.1 0.38C9.18 0.15 8.95 0 8.8 0L5.8 0C5.65 0 5.43 0.15 5.43 0.3L5.13 2.33C4.68 2.48 4.3 2.78 3.85 3.08L2.05 2.33C1.83 2.25 1.68 2.33 1.53 2.48L0.03 5.1C-0.05 5.18 0.03 5.4 0.18 5.55L1.75 6.75C1.75 6.98 1.68 7.2 1.68 7.5 1.68 7.8 1.68 8.03 1.75 8.25L0.18 9.53C0.03 9.68 0.03 9.82 0.1 9.98L1.6 12.6C1.68 12.68 1.83 12.75 2.05 12.68L3.93 11.93C4.3 12.23 4.75 12.45 5.2 12.68L5.5 14.63C5.5 14.78 5.65 14.93 5.88 14.93L8.88 14.93C9.03 14.93 9.25 14.78 9.25 14.63L9.55 12.68C10 12.45 10.45 12.23 10.83 11.93L12.7 12.68C12.85 12.75 13.08 12.68 13.15 12.53L14.65 9.9C14.73 9.75 14.73 9.53 14.58 9.45L12.85 8.25 12.85 8.25ZM7.3 10.13C5.88 10.13 4.68 8.93 4.68 7.5 4.68 6.08 5.88 4.88 7.3 4.88 8.73 4.88 9.93 6.08 9.93 7.5 9.93 8.93 8.73 10.13 7.3 10.13L7.3 10.13Z" id="Shape"/>
|
||||
</symbol>
|
||||
<symbol id="icon-status-complete" viewBox="0 0 27 27">
|
||||
<title>
|
||||
Complete
|
||||
</title>
|
||||
<path d="M13.5 0C6.08 0 0 6.04 0 13.42 0 20.8 6.08 26.83 13.5 26.83 20.93 26.83 27 20.8 27 13.42 27 6.04 20.93 0 13.5 0L13.5 0ZM10.8 20.13L4.05 13.42 5.94 11.54 10.8 16.37 21.06 6.17 22.95 8.05 10.8 20.13 10.8 20.13Z" id="Shape"/>
|
||||
</symbol>
|
||||
<symbol id="icon-status-lock" viewBox="0 0 16 21">
|
||||
<title>
|
||||
Locked
|
||||
</title>
|
||||
<path d="M14 7L13 7 13 5C13 2.2 10.8 0 8 0 5.2 0 3 2.2 3 5L3 7 2 7C0.9 7 0 7.9 0 9L0 19C0 20.1 0.9 21 2 21L14 21C15.1 21 16 20.1 16 19L16 9C16 7.9 15.1 7 14 7L14 7ZM11.1 7L4.9 7 4.9 5C4.9 3.3 6.3 1.9 8 1.9 9.7 1.9 11.1 3.3 11.1 5L11.1 7 11.1 7Z"/>
|
||||
</symbol>
|
||||
<symbol id="icon-studies" viewBox="0 0 15 13">
|
||||
<title>
|
||||
Studies
|
||||
</title>
|
||||
<g id="icon-studies-group" stroke="none">
|
||||
<path id="icon-studies-boxes" d="M0,0 7,0 7,6 0,6Z M8,0 15,0 15,6 8,6Z M0,7 7,7 7,13 0,13Z M8,7 15,7 15,13 8,13Z" />
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id="icon-tools-levels" viewBox="0 0 18 18">
|
||||
<title>
|
||||
Window / Level
|
||||
</title>
|
||||
<g id="icon-tools-levels-group">
|
||||
<path id="icon-tools-levels-path" d="M14.5,3.5 a1 1 0 0 1 -11,11 Z" stroke="none" opacity="0.8" />
|
||||
<circle id="icon-tools-levels-circle" cx="9" cy="9" r="8" fill="none" stroke-width="2" />
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id="icon-tools-link" viewBox="0 0 23 15">
|
||||
<title>
|
||||
Link
|
||||
</title>
|
||||
<g id="icon-tools-link-group" stroke="none">
|
||||
<circle id="icon-tools-link-circle-l" opacity="0.8" cx="7.5" cy="7.5" r="7.5" />
|
||||
<circle id="icon-tools-link-circle-r" opacity="0.6" cx="15.5" cy="7.5" r="7.5" />
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id="icon-tools-measure-non-target" viewBox="0 0 24 24">
|
||||
<title>
|
||||
Non-Target Measurement
|
||||
</title>
|
||||
<g id="icon-tools-measure-non-target-group" fill="none" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle id="icon-tools-measure-non-target-circle" cx="6.5" cy="6.5" r="6" />
|
||||
<path id="icon-tools-measure-non-target-plus" d="M6.5,3 l0,7 M3,6.5 l7,0"></path>
|
||||
<path id="icon-tools-measure-non-target-arrow" d="M23,7 l-15,15 M7,17 l0,6 6,0" stroke-width="2" />
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id="icon-tools-measure-target" viewBox="0 0 26 26">
|
||||
<title>
|
||||
Target Measurement
|
||||
</title>
|
||||
<g id="icon-tools-measure-target-group" stroke-width="0">
|
||||
<path id="icon-tools-measure-target-ruler" d="m9.5,26 2,-2 -1.5,-1.5 0.5,-0.5 1.5,1.5 1.5,-1.5 -2.5,-2.5 0.5,-0.5 2.5,2.5 1.5,-1.5 -1.5,-1.5 0.5,-0.5 1.5,1.5 1.5,-1.5 -2.5,-2.5 0.5,-0.5 2.5,2.5 1.5,-1.5 -1.5,-1.5 0.5,-0.5 1.5,1.5 1.5,-1.5 -2.5,-2.5 0.5,-0.5 2.5,2.5 1.5,-1.5 -1.5,-1.5 0.5,-0.5 1.5,1.5 2,-2 -4,-4 a2 2 0 0 0 -2.5 0 l-14 14 a2 2 0 0 0 0 2.5 l4,4 Z" />
|
||||
<path id="icon-tools-measure-target-plus" d="m6,0 a6 6 0 0 1 0 12 a6 6 0 0 1 0 -12 m0.5,3 a0.5 0.5 0 0 0 -1 0 l0,2.5 -2.5,0 a0.5 0.5 0 0 0 0 1 l2.5,0 0,2.5 a0.5 0.5 0 0 0 1 0 l0,-2.5 2.5,0 a0.5 0.5 0 0 0 0 -1 l-2.5,0 z" />
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id="icon-tools-measure-temp" viewBox="0 0 24 24">
|
||||
<title>
|
||||
Temporary Measurement
|
||||
</title>
|
||||
<g id="icon-tools-measure-temp-group" fill="none" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle id="icon-tools-measure-temp-circle" cx="6.5" cy="6.5" r="6" />
|
||||
<path id="icon-tools-measure-temp-plus" d="M6.5,3 l0,7 M3,6.5 l7,0"></path>
|
||||
<path id="icon-tools-measure-temp-dashes" d="m22.5,6 -16.5,16.5" stroke-width="3" stroke-dasharray="0.6666,5" />
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id="icon-tools-more" viewBox="0 0 18 18">
|
||||
<title>
|
||||
More
|
||||
</title>
|
||||
<g id="icon-tools-more-group" stroke="none">
|
||||
<path id="icon-tools-more-circle" d="M9,0 a9 9 0 0 1 0 18 a9 9 0 0 1 0 -18 M4.5,8 a1.5 1.5 0 0 0 0 3 a1.5 1.5 0 0 0 0 -3 M9,8 a1.5 1.5 0 0 0 0 3 a1.5 1.5 0 0 0 0 -3 M13.5,8 a1.5 1.5 0 0 0 0 3 a1.5 1.5 0 0 0 0 -3" />
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id="icon-tools-pan" viewBox="0 0 18 18">
|
||||
<title>
|
||||
Pan
|
||||
</title>
|
||||
<g id="icon-tools-pan-group" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path id="icon-tools-pan-line-v" d="M9,1 L9,17"></path>
|
||||
<path id="icon-tools-pan-line-h" d="M1,9 L17,9"></path>
|
||||
<polyline id="icon-tools-pan-caret-t" points="7 3 9 1 11 3"></polyline>
|
||||
<polyline id="icon-tools-pan-caret-r" points="15 11 17 9 15 7"></polyline>
|
||||
<polyline id="icon-tools-pan-caret-b" points="11 15 9 17 7 15"></polyline>
|
||||
<polyline id="icon-tools-pan-caret-l" points="3 7 1 9 3 11"></polyline>
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id="icon-tools-zoom" viewBox="0 0 17 17">
|
||||
<title>
|
||||
Zoom
|
||||
</title>
|
||||
<g id="icon-tools-zoom-group" fill="none" stroke-width="2" stroke-linecap="round">
|
||||
<path id="icon-tools-zoom-path" d="m11.5,11.5 4.5,4.5" />
|
||||
<circle id="icon-tools-zoom-circle" cx="7" cy="7" r="6" />
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id="icon-trial-info" viewBox="0 0 20 20">
|
||||
<title>
|
||||
Trial Information
|
||||
</title>
|
||||
<g id="icon-trial-info-group" fill="none" stroke-width="2">
|
||||
<path id="icon-trial-info-circle" d="M10,1 a9 9 0 0 1 0 18 a9 9 0 0 1 0 -18 M10,5 l0,2 m0,2 0,6" />
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id="icon-ui-accordion-expand" viewBox="0 0 12 8">
|
||||
<title>
|
||||
Expand
|
||||
</title>
|
||||
<polygon transform="translate(6.000000, 3.700000) rotate(-270.000000) translate(-6.000000, -3.700000) " points="3.7 -2.3 2.3 -0.9 6.9 3.7 2.3 8.3 3.7 9.7 9.7 3.7"/>
|
||||
</symbol>
|
||||
<symbol id="icon-ui-add" viewBox="0 0 12 13">
|
||||
<title>
|
||||
Add
|
||||
</title>
|
||||
<path d="M6.5 7L6.5 12C6.5 12.28 6.28 12.5 6 12.5 5.72 12.5 5.5 12.28 5.5 12L5.5 7 0.5 7C0.22 7 0 6.78 0 6.5 0 6.22 0.22 6 0.5 6L5.5 6 5.5 1C5.5 0.72 5.72 0.5 6 0.5 6.28 0.5 6.5 0.72 6.5 1L6.5 6 11.5 6C11.78 6 12 6.22 12 6.5 12 6.78 11.78 7 11.5 7L6.5 7Z" id="Combined-Shape"/>
|
||||
</symbol>
|
||||
<symbol id="icon-ui-close" viewBox="0 0 14 14">
|
||||
<title>
|
||||
Close
|
||||
</title>
|
||||
<g id="icon-ui-close-group" stroke-width="1.75">
|
||||
<path id="icon-ui-close-path" d="M1,1 13,13 M1,13 13,1" />
|
||||
</g>
|
||||
</symbol>
|
||||
<symbol id="icon-create-comment" viewBox="0 0 37 34">
|
||||
<title>
|
||||
Comment
|
||||
</title>
|
||||
<path fill="#94a8b3" d="M22.32 14L35 14C36.1 14 37 14.9 37 16L37 28C37 29.1 36.1 30 35 30L21 30 17 34 17 20.39C19.45 18.97 21.36 16.71 22.32 14Z" id="Combined-Shape"/>
|
||||
<path d="M10 0C4.5 0 0 4.5 0 10 0 15.5 4.5 20 10 20 15.5 20 20 15.5 20 10 20 4.5 15.5 0 10 0L10 0ZM15 11L11 11 11 15 9 15 9 11 5 11 5 9 9 9 9 5 11 5 11 9 15 9 15 11 15 11Z" id="Shape"/>
|
||||
</symbol>
|
||||
<symbol id="icon-create-screen-capture" viewBox="0 0 37 35">
|
||||
<title>
|
||||
Capture Screen
|
||||
</title>
|
||||
<g id="camera-alt" transform="translate(17.000000, 17.000000)" fill="#94a8b3">
|
||||
<path d="M10 13C11.66 13 13 11.66 13 10 13 8.34 11.66 7 10 7 8.34 7 7 8.34 7 10 7 11.66 8.34 13 10 13Z" id="Oval"/>
|
||||
<path d="M7 0L5.2 2 2 2C0.9 2 0 2.9 0 4L0 16C0 17.1 0.9 18 2 18L18 18C19.1 18 20 17.1 20 16L20 4C20 2.9 19.1 2 18 2L14.8 2 13 0 7 0 7 0ZM10 15C7.2 15 5 12.8 5 10 5 7.2 7.2 5 10 5 12.8 5 15 7.2 15 10 15 12.8 12.8 15 10 15L10 15Z" id="Shape"/>
|
||||
</g>
|
||||
<path d="M10 0C4.5 0 0 4.5 0 10 0 15.5 4.5 20 10 20 15.5 20 20 15.5 20 10 20 4.5 15.5 0 10 0L10 0ZM15 11L11 11 11 15 9 15 9 11 5 11 5 9 9 9 9 5 11 5 11 9 15 9 15 11 15 11Z" id="Shape"/>
|
||||
</symbol>
|
||||
<symbol id="icon-ui-warning" viewBox="0 0 22 20">
|
||||
<title>
|
||||
Warning
|
||||
</title>
|
||||
<g id="icon-ui-warning-group" stroke="none">
|
||||
<path d="m11,0 11,20 -22,0Z m1,7 -2,0 0,6 2,0Z m0,8 -2,0 0,2 2,0Z" />
|
||||
</g>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 9.9 KiB |
@ -29,7 +29,7 @@
|
||||
font-size: 14px
|
||||
padding: 0 10px
|
||||
color: $textPrimaryColor
|
||||
background-color: $uiGrayDarker
|
||||
background-color: $uiGrayDark
|
||||
|
||||
.form-group
|
||||
padding: 10px
|
||||
|
||||
@ -1,13 +1,16 @@
|
||||
<template name="lesionTableHUD">
|
||||
<div id="lesionTableHUD">
|
||||
<div id="lesionTableHUD" class="{{hudHidden}}">
|
||||
<div class="header">
|
||||
Measurements
|
||||
<span>Measurements</span>
|
||||
<svg class="buttonClose">
|
||||
<use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-ui-close"></use>
|
||||
</svg>
|
||||
</div>
|
||||
{{ >lesionTableView }}
|
||||
{{>lesionTableView}}
|
||||
<div class="footer">
|
||||
{{ #each toolbarButtons }}
|
||||
{{ >toolbarSectionButton }}
|
||||
{{ /each }}
|
||||
{{#each toolbarButton in toolbarButtons}}
|
||||
{{>toolbarSectionButton toolbarButton}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@ -1,4 +1,18 @@
|
||||
Template.lesionTableHUD.onRendered(() => {
|
||||
const instance = Template.instance();
|
||||
instance.$('#lesionTableHUD').resizable().draggable();
|
||||
});
|
||||
|
||||
Template.lesionTableHUD.events({
|
||||
'click .buttonClose'(event, instance) {
|
||||
Session.set('lesionTableHudOpen', false);
|
||||
}
|
||||
});
|
||||
|
||||
Template.lesionTableHUD.helpers({
|
||||
hudHidden() {
|
||||
return Session.get('lesionTableHudOpen') ? '' : 'hidden';
|
||||
},
|
||||
toolbarButtons() {
|
||||
var buttonData = [];
|
||||
|
||||
@ -26,8 +40,3 @@ Template.lesionTableHUD.helpers({
|
||||
return buttonData;
|
||||
}
|
||||
});
|
||||
|
||||
Template.lesionTableHUD.onRendered(function() {
|
||||
var dialog = $('#lesionTableHUD');
|
||||
dialog.draggable();
|
||||
});
|
||||
@ -1,34 +1,47 @@
|
||||
@import "{design}/app"
|
||||
|
||||
$borderColor = rgba(77, 99, 110, 0.81)
|
||||
$backgroundColor = #14191e
|
||||
|
||||
#lesionTableHUD
|
||||
display: none
|
||||
position: absolute
|
||||
top: auto
|
||||
left: auto
|
||||
bottom: 3px
|
||||
right: 3px
|
||||
|
||||
z-index: 10000
|
||||
width: 318px
|
||||
height: 326px
|
||||
opacity: 0.95
|
||||
background: black
|
||||
border-radius: 8px
|
||||
border: solid 1px $borderColor;
|
||||
bottom: 3px
|
||||
height: 326px
|
||||
left: auto
|
||||
opacity: 0.95
|
||||
overflow: hidden
|
||||
position: absolute
|
||||
right: 3px
|
||||
top: auto
|
||||
width: 318px
|
||||
z-index: 10000
|
||||
|
||||
.lesionTableView.scrollArea
|
||||
margin-left: 0
|
||||
padding-left: 0
|
||||
|
||||
.header
|
||||
width: 100%
|
||||
background: $uiGrayDarkest
|
||||
border-bottom: $uiBorderThickness solid $borderColor
|
||||
color: $textSecondaryColor
|
||||
font-weight: 300
|
||||
font-size: 20px
|
||||
height: 55px
|
||||
line-height: 55px
|
||||
background: $backgroundColor
|
||||
border-bottom: $uiBorderThickness solid $borderColor
|
||||
position: relative
|
||||
text-align: center
|
||||
font-weight: 200
|
||||
font-size: 20px
|
||||
color: $textSecondaryColor
|
||||
width: 100%
|
||||
|
||||
svg.buttonClose
|
||||
color: $defaultColor
|
||||
cursor: pointer
|
||||
height: 14px
|
||||
position: absolute
|
||||
right: 14px
|
||||
stroke: $defaultColor
|
||||
top: 20px
|
||||
width: 14px
|
||||
|
||||
.lesionTableView.scrollArea
|
||||
height: calc(100% - 55px - 70px)
|
||||
@ -39,7 +52,7 @@ $backgroundColor = #14191e
|
||||
height: 70px
|
||||
position: absolute
|
||||
bottom: 0
|
||||
background: $backgroundColor
|
||||
background: $uiGrayDarkest
|
||||
border-top: $uiBorderThickness solid $borderColor
|
||||
padding: 10px
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
$headerRowHeight = 63px
|
||||
|
||||
.lesionTableHeaderRow
|
||||
background-color: $uiGrayDarkest
|
||||
background-color: $uiGrayDarker
|
||||
color: $textSecondaryColor
|
||||
display: flex
|
||||
fill: $textSecondaryColor
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
&.response-status .lesionRowSidebar .response-status-icon
|
||||
background-color: $defaultColor
|
||||
border-radius: 11px
|
||||
color: $uiGrayDark
|
||||
color: $uiGray
|
||||
font-size: 12px
|
||||
font-weight: 700
|
||||
height: 21px
|
||||
@ -55,7 +55,7 @@
|
||||
fill: $textPrimaryColor
|
||||
|
||||
.lesionRowSidebar
|
||||
background: $uiGrayDark
|
||||
background: $uiGray
|
||||
color: $textSecondaryColor
|
||||
flex: 1
|
||||
max-width: 30px
|
||||
|
||||
@ -10,9 +10,11 @@
|
||||
{{>lesionTableRow (extend this rowItem=nonTarget)}}
|
||||
{{/each}}
|
||||
|
||||
{{>lesionTableHeaderRow id="newLesion" measurements=newLesions currentTimepointId=currentTimepointId}}
|
||||
{{#each newLesion in newLesions}}
|
||||
{{>lesionTableRow (extend this rowItem=newLesion)}}
|
||||
{{/each}}
|
||||
{{#if gt this.timepoints.get.length 1}}
|
||||
{{>lesionTableHeaderRow id="newLesion" measurements=newLesions currentTimepointId=currentTimepointId}}
|
||||
{{#each newLesion in newLesions}}
|
||||
{{>lesionTableRow (extend this rowItem=newLesion)}}
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@import "{design}/app"
|
||||
|
||||
.lesionTableView.scrollArea
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
@ -100,7 +100,7 @@ $seriesSpacing = 2px
|
||||
.studyTimepointStudy.active .studyModality
|
||||
box-shadow: inset 0 0 0 3px $activeColor
|
||||
.studyBox
|
||||
background-color: $uiGrayDarker
|
||||
background-color: $uiGrayDark
|
||||
border: solid 1px $activeColor
|
||||
border-radius: 11px
|
||||
display: block
|
||||
|
||||
@ -39,7 +39,7 @@
|
||||
<div class="pull-right m-t-1 rm-x-1">
|
||||
{{>roundedButtonGroup rightSidebarToggleButtonData}}
|
||||
</div>
|
||||
<div id="toggleHUD" class="toolbarSectionButton pull-right rp-x-1 m-t-1 rm-r-3">
|
||||
<div id="toggleHUD" class="toolbarSectionButton pull-right rp-x-1 m-t-1 rm-r-3 {{#if session 'lesionTableHudOpen'}}active{{/if}}">
|
||||
<div class="svgContainer">
|
||||
<svg>
|
||||
<use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-hud"></use>
|
||||
|
||||
@ -106,39 +106,9 @@ Template.toolbarSection.helpers({
|
||||
});
|
||||
|
||||
Template.toolbarSection.events({
|
||||
// TODO: Inherit these from toolbar template somehow
|
||||
'click .imageViewerTool': function(e) {
|
||||
$(e.currentTarget).tooltip('hide');
|
||||
|
||||
var tool = e.currentTarget.id;
|
||||
|
||||
var elements = $('.imageViewerViewport');
|
||||
|
||||
var activeTool = toolManager.getActiveTool();
|
||||
if (tool === activeTool) {
|
||||
var defaultTool = toolManager.getDefaultTool();
|
||||
console.log('Setting active tool to: ' + defaultTool);
|
||||
toolManager.setActiveTool(defaultTool, elements);
|
||||
} else {
|
||||
console.log('Setting active tool to: ' + tool);
|
||||
toolManager.setActiveTool(tool, elements);
|
||||
}
|
||||
},
|
||||
'click .imageViewerCommand': function(e) {
|
||||
$(e.currentTarget).tooltip('hide');
|
||||
|
||||
var command = e.currentTarget.id;
|
||||
if (!OHIF.viewer.functionList.hasOwnProperty(command)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var activeViewport = Session.get('activeViewport');
|
||||
var element = $('.imageViewerViewport').get(activeViewport);
|
||||
OHIF.viewer.functionList[command](element);
|
||||
},
|
||||
'click #toggleHUD': function(e) {
|
||||
var lesionTableHUD = document.getElementById('lesionTableHUD');
|
||||
toggleDialog(lesionTableHUD);
|
||||
'click #toggleHUD'(event, instance) {
|
||||
const state = Session.get('lesionTableHudOpen');
|
||||
Session.set('lesionTableHudOpen', !state);
|
||||
},
|
||||
'click #moreTools'(event, instance) {
|
||||
const $target = $(event.currentTarget);
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
width: 100%
|
||||
|
||||
.toolbarSectionDrawer
|
||||
background-color: $uiGrayDarkest
|
||||
background-color: $uiGrayDarker
|
||||
border-radius: 7px
|
||||
color: $textPrimaryColor
|
||||
content: ''
|
||||
|
||||
@ -11,3 +11,35 @@ Template.toolbarSectionButton.helpers({
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
Template.toolbarSectionButton.events({
|
||||
'click .imageViewerTool'(event, instance) {
|
||||
$(event.currentTarget).tooltip('hide');
|
||||
|
||||
var tool = event.currentTarget.id;
|
||||
|
||||
var elements = $('.imageViewerViewport');
|
||||
|
||||
var activeTool = toolManager.getActiveTool();
|
||||
if (tool === activeTool) {
|
||||
var defaultTool = toolManager.getDefaultTool();
|
||||
console.log('Setting active tool to: ' + defaultTool);
|
||||
toolManager.setActiveTool(defaultTool, elements);
|
||||
} else {
|
||||
console.log('Setting active tool to: ' + tool);
|
||||
toolManager.setActiveTool(tool, elements);
|
||||
}
|
||||
},
|
||||
'click .imageViewerCommand'(event, instance) {
|
||||
$(event.currentTarget).tooltip('hide');
|
||||
|
||||
var command = event.currentTarget.id;
|
||||
if (!OHIF.viewer.functionList.hasOwnProperty(command)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var activeViewport = Session.get('activeViewport');
|
||||
var element = $('.imageViewerViewport').get(activeViewport);
|
||||
OHIF.viewer.functionList[command](element);
|
||||
}
|
||||
});
|
||||
|
||||
@ -3,6 +3,11 @@ Template.registerHelper('instance', () => {
|
||||
return Template.instance();
|
||||
});
|
||||
|
||||
// Return the session value for the given key
|
||||
Template.registerHelper('session', key => {
|
||||
return Session.get(key);
|
||||
});
|
||||
|
||||
// Create a new object and extends it with the argument objects
|
||||
Template.registerHelper('extend', (...argsArray) => {
|
||||
// Create the resulting object
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
// Allow attaching to jQuery selectors
|
||||
$.fn.draggable = function() {
|
||||
makeDraggable(this);
|
||||
return this;
|
||||
};
|
||||
|
||||
/**
|
||||
@ -106,4 +107,4 @@ makeDraggable = function(element) {
|
||||
|
||||
element.on('mousedown', startMoving);
|
||||
element.on('touchstart', startMoving);
|
||||
};
|
||||
};
|
||||
147
Packages/viewerbase/lib/ui/resizable/resizable.js
Normal file
147
Packages/viewerbase/lib/ui/resizable/resizable.js
Normal file
@ -0,0 +1,147 @@
|
||||
// Allow attaching to jQuery selectors
|
||||
$.fn.resizable = function(options) {
|
||||
_.each(this, element => {
|
||||
const resizableInstance = $(element).data('resizableInstance');
|
||||
if (options === 'destroy' && resizableInstance) {
|
||||
$(element).removeData('resizableInstance');
|
||||
resizableInstance.destroy();
|
||||
} else {
|
||||
if (resizableInstance) {
|
||||
resizableInstance.options(options);
|
||||
} else {
|
||||
$(element).data('resizableInstance', new Resizable(element, options));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
/**
|
||||
* This class makes an element resizable.
|
||||
*/
|
||||
class Resizable {
|
||||
|
||||
constructor(element, options={}) {
|
||||
this.element = element;
|
||||
this.$element = $(element);
|
||||
this.options(options);
|
||||
}
|
||||
|
||||
options(options={}) {
|
||||
const { boundSize, minWidth, minHeight } = options;
|
||||
this.minWidth = minWidth || this.$element.width() || 16;
|
||||
this.minHeight = minHeight || this.$element.height() || 16;
|
||||
this.boundSize = boundSize || 8;
|
||||
|
||||
this.destroy();
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
for (var x = -1; x <= 1; x++) {
|
||||
for (var y = -1; y <= 1; y++) {
|
||||
this.createBound(x, y);
|
||||
}
|
||||
}
|
||||
|
||||
this.$element.addClass('resizable');
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.$element.removeClass('resizable').find('resize-bound').remove();
|
||||
}
|
||||
|
||||
attachEventHandlers($bound, xDirection, yDirection) {
|
||||
const $window = $(window);
|
||||
|
||||
const initResizeHandler = event => {
|
||||
event.stopPropagation();
|
||||
|
||||
this.width = this.initialWidth = this.$element.width();
|
||||
this.height = this.initialHeight = this.$element.height();
|
||||
this.startWidth = this.width;
|
||||
this.startHeight = this.height;
|
||||
|
||||
this.posX = parseInt(this.$element.css('left'));
|
||||
this.posY = parseInt(this.$element.css('top'));
|
||||
this.startPosX = this.posX;
|
||||
this.startPosY = this.posY;
|
||||
|
||||
this.startX = event.clientX;
|
||||
this.startY = event.clientY;
|
||||
|
||||
this.$element.addClass('resizing');
|
||||
|
||||
$window.on('mousemove', resizeHandler);
|
||||
$window.on('mouseup', endResizeHandler);
|
||||
};
|
||||
|
||||
const resizeHandler = event => {
|
||||
let x, y;
|
||||
x = event.clientX < 0 ? 0 : event.clientX;
|
||||
x = x > window.innerWidth ? window.innerWidth : x;
|
||||
y = event.clientY < 0 ? 0 : event.clientY;
|
||||
y = y > window.innerHeight ? window.innerHeight : y;
|
||||
|
||||
const xDistance = (x - this.startX) * xDirection;
|
||||
const yDistance = (y - this.startY) * yDirection;
|
||||
|
||||
const width = xDistance + this.startWidth;
|
||||
const height = yDistance + this.startHeight;
|
||||
this.width = width < this.minWidth ? this.minWidth : width;
|
||||
this.height = height < this.minHeight ? this.minHeight : height;
|
||||
this.$element.width(this.width);
|
||||
this.$element.height(this.height);
|
||||
|
||||
if (xDirection < 0) {
|
||||
this.posX = this.startPosX - xDistance;
|
||||
if (width < this.minWidth) {
|
||||
this.posX = this.startPosX + (this.startWidth - this.minWidth);
|
||||
}
|
||||
|
||||
this.$element.css('left', `${this.posX}px`);
|
||||
}
|
||||
|
||||
if (yDirection < 0) {
|
||||
this.posY = this.startPosY - yDistance;
|
||||
if (height < this.minHeight) {
|
||||
this.posY = this.startPosY + (this.startHeight - this.minHeight);
|
||||
}
|
||||
|
||||
this.$element.css('top', `${this.posY}px`);
|
||||
}
|
||||
};
|
||||
|
||||
const endResizeHandler = event => {
|
||||
$window.off('mousemove', resizeHandler);
|
||||
$window.off('mouseup', endResizeHandler);
|
||||
|
||||
this.$element.removeClass('resizing');
|
||||
};
|
||||
|
||||
$bound.on('mousedown', initResizeHandler);
|
||||
}
|
||||
|
||||
createBound(xDirection, yDirection) {
|
||||
if (xDirection === 0 && xDirection === yDirection) {
|
||||
return;
|
||||
}
|
||||
|
||||
const $bound = $('<div class="resize-bound"></div>');
|
||||
|
||||
$bound[0].onselectstart = () => false;
|
||||
|
||||
$bound.css('font-size', `${this.boundSize}px`);
|
||||
|
||||
const mapX = ['left', 'center', 'right'];
|
||||
const mapY = ['top', 'middle', 'bottom'];
|
||||
$bound.addClass('bound-' + mapX[xDirection + 1]);
|
||||
$bound.addClass('bound-' + mapY[yDirection + 1]);
|
||||
|
||||
$bound.appendTo(this.$element);
|
||||
|
||||
this.attachEventHandlers($bound, xDirection, yDirection);
|
||||
}
|
||||
|
||||
}
|
||||
55
Packages/viewerbase/lib/ui/resizable/resizable.styl
Normal file
55
Packages/viewerbase/lib/ui/resizable/resizable.styl
Normal file
@ -0,0 +1,55 @@
|
||||
@import "{design}/app"
|
||||
|
||||
.resizable
|
||||
transform(scale(1))
|
||||
|
||||
&.resizing, .resize-bound
|
||||
user-select: none
|
||||
-webkit-touch-callout: none
|
||||
-webkit-user-select: none
|
||||
-khtml-user-select: none
|
||||
-moz-user-select: none
|
||||
-ms-user-select: none
|
||||
|
||||
.resize-bound
|
||||
content: ''
|
||||
line-height: 1em
|
||||
position: fixed
|
||||
|
||||
.bound-left
|
||||
left: 0
|
||||
width: 1em
|
||||
|
||||
.bound-center
|
||||
left: 1em
|
||||
height: 1em
|
||||
right: 1em
|
||||
|
||||
.bound-right
|
||||
right: 0
|
||||
width: 1em
|
||||
|
||||
.bound-top
|
||||
top: 0
|
||||
height: 1em
|
||||
|
||||
.bound-middle
|
||||
top: 1em
|
||||
width: 1em
|
||||
bottom: 1em
|
||||
|
||||
.bound-bottom
|
||||
bottom: 0
|
||||
height: 1em
|
||||
|
||||
.bound-left.bound-top, .bound-right.bound-bottom
|
||||
cursor: nwse-resize
|
||||
|
||||
.bound-left.bound-bottom, .bound-right.bound-top
|
||||
cursor: nesw-resize
|
||||
|
||||
.bound-left.bound-middle, .bound-right.bound-middle
|
||||
cursor: ew-resize
|
||||
|
||||
.bound-center.bound-top, .bound-center.bound-bottom
|
||||
cursor: ns-resize
|
||||
@ -117,7 +117,9 @@ Package.onUse(function(api) {
|
||||
api.addFiles('lib/toolManager.js', 'client');
|
||||
api.addFiles('lib/enablePrefetchOnElement.js', 'client');
|
||||
api.addFiles('lib/displayReferenceLines.js', 'client');
|
||||
api.addFiles('lib/draggable.js', 'client');
|
||||
api.addFiles('lib/ui/draggable/draggable.js', 'client');
|
||||
api.addFiles('lib/ui/resizable/resizable.js', 'client');
|
||||
api.addFiles('lib/ui/resizable/resizable.styl', 'client');
|
||||
api.addFiles('lib/toggleDialog.js', 'client');
|
||||
api.addFiles('lib/setActiveViewport.js', 'client');
|
||||
api.addFiles('lib/switchToImageByIndex.js', 'client');
|
||||
|
||||
@ -8,13 +8,13 @@ $inputBackgroundColor = #2c363f
|
||||
$inputPlaceholderColor = lightgray
|
||||
|
||||
$studyListToolbarHeight = 75px
|
||||
$theadBackgroundColor = $uiGrayDarkest
|
||||
$theadBackgroundColor = $uiGrayDarker
|
||||
$tablePadding = 8%
|
||||
$bodyCellHeight = 40px
|
||||
|
||||
.studyListToolbar
|
||||
height: $studyListToolbarHeight
|
||||
background: $uiGrayDarkest
|
||||
background: $uiGrayDarker
|
||||
border-bottom: 2px solid black
|
||||
padding: 0 30px
|
||||
|
||||
@ -149,7 +149,7 @@ $bodyCellHeight = 40px
|
||||
background-color: black
|
||||
|
||||
&:nth-child(even)
|
||||
background-color: $uiGrayDarkest
|
||||
background-color: $uiGrayDarker
|
||||
|
||||
td
|
||||
height: $bodyCellHeight
|
||||
|
||||
Loading…
Reference in New Issue
Block a user