-
Notifications
You must be signed in to change notification settings - Fork 74
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Horizontal layer buttons #2566
Merged
javerbukh
merged 33 commits into
spacetelescope:main
from
javerbukh:horizontal-layer-buttons
Nov 20, 2023
Merged
Horizontal layer buttons #2566
Changes from 30 commits
Commits
Show all changes
33 commits
Select commit
Hold shift + click to select a range
bf22850
Layers now represented as horizontal buttons
javerbukh 2de03cf
Fix codestyle
javerbukh 6483a01
Fix codestlye and remove comments
javerbukh 3c31e18
Viewer multiselect mixed state working
javerbukh 9ab3162
Working on handling edge cases of mixed state
javerbukh f34e42b
Use messages in LayerSelect to call parts of _on_layers_changed
javerbukh 1fd124f
Remove unused elements
javerbukh 1ef9bdb
Fix button colors not updating after unmix state
javerbukh 93ce319
Fix codestyle
javerbukh fdf0703
Attempt 2 at fixing code style
javerbukh 85c1a3b
Fix CI, put buttons in icon order
javerbukh 7b2ef3d
Code style again
javerbukh 10aaa91
Fix more tests
javerbukh 60ad145
Everything handled by _on_layers_changed
javerbukh 639eb87
button styling/tooltip based on (mixed)-color/visibility
kecnry 17f4e33
improve tab styling
kecnry e4650ff
avoid second loop when applying RGB presets
kecnry f9640e0
improved handling of colormap and mixed colormode
kecnry 9a3c30e
remove elevation
kecnry d3baec2
use all_color_to_label in tab styling
kecnry 939d3be
Mixed visibility and color represented in button
javerbukh 611ea92
improved handling of subset color when in colormap
kecnry 1f56e99
improved dark-theme support
kecnry fb64d0f
tooltip and RGB preset support for mixed visibility
kecnry fd4353d
Visible is set to layer visible and bitmap visible
javerbukh 5d50565
avoid displacement when no tabs selected
kecnry f0a7966
Fix CI tests
javerbukh 37c9605
RGB presets: handle unmixing state
kecnry 10d1f20
Address review comments
javerbukh 02661cc
Forgot one change
javerbukh a0e8ee2
for styling, always check if item in list, not as substring
kecnry bea110d
Update changelog
javerbukh 32a75df
Add tests
javerbukh File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,79 @@ | ||
<template> | ||
<div> | ||
<span class="suppress-scrollbar" style="display: inline-block; white-space: nowrap; margin-left: -24px; width: calc(100% + 48px); overflow-x: scroll; overflow-y: hidden"> | ||
<span v-for="(item, index) in items" :class="selected.includes(item.label) ? 'layer-tab-selected' : ''" :style="'display: inline-block; padding: 12px; '+(selected.includes(item.label) ? 'border-top: 2px solid #c75109' : 'border-top: 2px solid transparent')"> | ||
<j-tooltip :tooltipcontent="tooltipContent(item)"> | ||
<v-btn | ||
:rounded="item.is_subset" | ||
@click="() => {if (!multiselect){$emit('update:selected', item.label)} else if(selected.indexOf(item.label) === -1) {$emit('update:selected', selected.concat(item.label))} else {$emit('update:selected', selected.filter(select => select != item.label))} }" | ||
:style="'padding: 0px; margin-bottom: 4px; background: '+visibilityStyle(item)+', '+colorStyle(item)" | ||
width="30px" | ||
min-width="30px" | ||
height="30px" | ||
> | ||
<span style="color: white; text-shadow: 0px 0px 3px black"> | ||
{{ item.icon }} | ||
</span> | ||
</v-btn> | ||
</j-tooltip> | ||
</span> | ||
</span> | ||
</div> | ||
</template> | ||
|
||
<script> | ||
module.exports = { | ||
props: ['items', 'selected', 'multiselect', 'colormode'], | ||
methods: { | ||
tooltipContent(item) { | ||
var tooltip = item.label | ||
if (item.mixed_visibility) { | ||
tooltip += '<br/>Visible: mixed' | ||
} else if (!item.visible) { | ||
tooltip += '<br/>Visible: false' | ||
} | ||
if (this.$props.colormode === 'Colormaps' && !item.is_subset) { | ||
tooltip += '<br/>Color mode: colormap' | ||
} else if (this.$props.colormode === 'mixed' && !item.is_subset) { | ||
tooltip += '<br/>Color mode: mixed' | ||
} | ||
if (item.mixed_color && (this.$props.colormode !== 'Colormaps' || item.is_subset)) { | ||
tooltip += '<br/>Color: mixed' | ||
} | ||
return tooltip | ||
}, | ||
visibilityStyle(item) { | ||
if (item.mixed_visibility){ | ||
return 'repeating-linear-gradient(30deg, rgba(0,0,0,0.3), rgba(0,0,0,0.3) 3px, transparent 3px, transparent 3px, transparent 10px)' | ||
} | ||
else if (item.visible) { | ||
return 'repeating-linear-gradient(30deg, transparent, transparent 10px)' | ||
} else { | ||
return 'repeating-linear-gradient(30deg, rgba(0,0,0,0.8), rgba(0,0,0,0.8) 7px, transparent 7px, transparent 7px, transparent 10px)' | ||
} | ||
}, | ||
colorStyle(item) { | ||
if (this.$props.colormode == 'Colormaps' && !item.is_subset) { | ||
return 'repeating-linear-gradient( -45deg, gray, gray 20px)' | ||
} | ||
if (item.mixed_color) { | ||
colors = item.all_colors_to_label | ||
const strip_width = 42 / colors.length | ||
|
||
var style = 'repeating-linear-gradient( -45deg, ' | ||
for ([ind, color] of colors.entries()) { | ||
style += color + ' '+ind*strip_width+'px, ' + color + ' '+(ind+1)*strip_width+'px' | ||
if (ind !== colors.length-1) { | ||
style += ', ' | ||
} | ||
} | ||
style += ')' | ||
return style | ||
} | ||
return 'repeating-linear-gradient( -45deg, '+item.color+', '+item.color+' 20px)' | ||
|
||
} | ||
} | ||
}; | ||
|
||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@rosteen - does this change make sense to you? Now that we have this info already parsed, we can avoid the double-loop and can explicitly handle the mixed case - this means that if a layer is visible in one selected viewer, but not all, it will still be included in the logic. The alternative would be to only act all layers visible in all selected viewers, but I think you said you intended for this behavior, right?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Seems fine to me, and yeah I preferred updating all visible layers in any selected viewer.