othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

LT-249: Creating selected row options for measurements panel

Browse Source
This commit is contained in:
Bruno Alves de Faria 2016-07-04 15:17:27 -03:00 committed by Erik Ziegler
parent cea41d09db
commit a7ca825755
5 changed files with 86 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.styl
View File

@ -44,6 +44,7 @@
.sidebar-right
flex: 1
margin-left: -6px
margin-right: - $lesionsSidebarMenuWidth
max-width: $lesionsSidebarMenuWidth
order: 3

2
Packages/lesiontracker/client/components/lesionTable/lesionTable.styl
View File

@ -2,7 +2,7 @@
#lesionTableContainer
background-color: $primaryBackgroundColor
height: calc(100% - 105px)
height: 100%
width: 100%
.lesionTableTimepointHeaderRow

14
Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.html
View File

@ -31,6 +31,20 @@
{{>lesionTableTimepointCell}}
{{/each}}
</div>
<div class="rowOptions">
<div class="rowAction js-rename pull-left m-r-2" tabindex="1">
<svg class="edit-icon">
<use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-measurements-additional"></use>
</svg>
Rename
</div>
<div class="rowAction js-delete pull-left" tabindex="1">
<svg class="close-icon">
<use xlink:href=/packages/lesiontracker/assets/icons.svg#icon-ui-close></use>
</svg>
Delete
</div>
</div>
</div>
</div>
</template>

5
Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.js
View File

@ -18,6 +18,11 @@ var keys = {
};
Template.lesionTableRow.events({
'click .lesionRowSidebar'(event, instance) {
const $row = instance.$('.lesionTableRow');
$row.closest('.lesionTableView').find('.lesionTableRow').not($row).removeClass('active');
$row.toggleClass('active');
},
'dblclick .location': function() {
log.info('Double clicked on Lesion Location cell');

87
Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl
View File

@ -2,32 +2,40 @@
.lesionTableRow
display: flex
height: 63px
margin-left: -6px
margin-top: 2px
width: 100%
padding-left: 6px
// required transformation to make inner fixed elements relative to this one
transform(scale(1))
width: calc(100% + 6px)
&:before
background-color: $activeColor
border-top-left-radius: 7px
border-bottom-left-radius: 7px
content: ''
display: block
height: 100%
left: 0
opacity: 0
pointer-events: none
position: fixed
top: 0
transition(all 0.3s ease)
width: 5px
&.active
margin-left: -6px
padding-left: 6px
// required transformation to make inner fixed elements relative to this one
transform(scale(1))
&:before
background-color: $activeColor
border-top-left-radius: 7px
border-bottom-left-radius: 7px
content: ''
display: block
height: 100%
left: 0
pointer-events: none
position: fixed
top: 0
width: 5px
opacity: 1
.lesionRowSidebar
color: $activeColor
.rowOptions
height: 35px
visibility: visible
&.response-status .lesionRowSidebar .response-status-icon
background-color: $defaultColor
border-radius: 11px
@ -54,11 +62,46 @@
svg
fill: $textPrimaryColor
.rowOptions
background-color: $uiGrayDarker
height: 0
overflow: hidden
transition(all 0.3s ease)
visibility: hidden
.rowAction
color: $defaultColor
cursor: pointer
line-height: 35px
transition(all 0.3s ease)
&:hover, &:active
color: $textPrimaryColor
svg
fill: $textPrimaryColor
stroke: $textPrimaryColor
svg
fill: $defaultColor
stroke: $defaultColor
transition(all 0.3s ease)
&.edit-icon
width: 14px
height: 13px
&.close-icon
width: 11px
height: 11px
.lesionRowSidebar
background: $uiGray
color: $textSecondaryColor
cursor: pointer
flex: 1
max-width: 30px
transition(all 0.3s ease)
.lesionNumber
font-size: 14px
@ -69,13 +112,12 @@
.lesionDetails
flex: 1
padding: 5px 2px 0 14px
display: flex
flex-direction: column
align-items: stretch
padding: 5px 2px 0 0
&>*
padding-left: 14px
.location
flex: 1
font-weight: 400
font-size: 14px
color: $textSecondaryColor
@ -86,6 +128,7 @@
.timepointData
display: flex
height: 27px
margin-top: 1px
div