Skip to content

Commit

Permalink
Add dynamic menu position update - in progress
Browse files Browse the repository at this point in the history
  • Loading branch information
@haticekaratay
haticekaratay committed Jan 31, 2024
1 parent 276b528 commit 6590146
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 43 deletions.
4 changes: 2 additions & 2 deletions jdaviz/components/viewer_data_select.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<j-tooltip v-if="menuButtonAvailable()" tipid="viewer-toolbar-data">
<v-menu attach offset-y :close-on-content-click="false" v-model="viewer.data_open">
<v-menu :attach="'#target-' + viewer.id" offset-y :close-on-content-click="false" v-model="viewer.data_open">
<template v-slot:activator="{ on, attrs }">
<v-btn
text
Expand Down Expand Up @@ -57,7 +57,7 @@
></j-viewer-data-select-item>
</v-row>

<div v-if="extraDataItems.length" style="margin-bottom: -100px; height: 200px">
<div v-if="extraDataItems.length" style="margin-bottom: -8px">
<v-row key="extra-items-expand" style="padding-left: 25px; margin-right: 0px; padding-bottom: 4px; background-color: #E3F2FD">
<span
@click="toggleShowExtraItems"
Expand Down
105 changes: 64 additions & 41 deletions jdaviz/container.vue
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,44 @@
<template>
<component :is="stack.container">
<g-viewer-tab
v-for="(child, index) in stack.children"
:stack="child"
:key="index"
:data_items="data_items"
:app_settings="app_settings"
:icons="icons"
:viewer_icons="viewer_icons"
:layer_icons="layer_icons"
@resize="(e) => $emit('resize', e)"
:closefn="closefn"
@data-item-visibility="$emit('data-item-visibility', $event)"
@data-item-unload="$emit('data-item-unload', $event)"
@data-item-remove="$emit('data-item-remove', $event)"
@call-viewer-method="$emit('call-viewer-method', $event)"
></g-viewer-tab>
<gl-component
v-for="(viewer, index) in stack.viewers"
:key="viewer.id"
:title="viewer.reference || viewer.id"
:tab-id="viewer.id"
@resize="(e) => $emit('resize', e)"
@destroy="destroy($event, viewer.id)"
style="display: flex; flex-flow: column; height: 100%; overflow-y: auto; overflow-x: hidden"
>
<div id="scrollable-container" style="position: relative; overflow: auto;">
<g-viewer-tab
v-for="(child, index) in stack.children"
:stack="child"
:key="index"
:data_items="data_items"
:app_settings="app_settings"
:icons="icons"
:viewer_icons="viewer_icons"
:layer_icons="layer_icons"
@resize="(e) => $emit('resize', e)"
:closefn="closefn"
@data-item-visibility="$emit('data-item-visibility', $event)"
@data-item-unload="$emit('data-item-unload', $event)"
@data-item-remove="$emit('data-item-remove', $event)"
@call-viewer-method="$emit('call-viewer-method', $event)"
></g-viewer-tab>
<gl-component
v-for="(viewer, index) in stack.viewers"
:key="viewer.id"
:title="viewer.reference || viewer.id"
:tab-id="viewer.id"
@resize="(e) => $emit('resize', e)"
@destroy="destroy($event, viewer.id)"
style="display: flex; flex-flow: column; height: 100%; overflow-y: auto; overflow-x: hidden"
>
<div>
<v-row dense style="background-color: #205f76; margin: 0px" class="jdaviz-viewer-toolbar">
<j-viewer-data-select
:data_items="data_items"
:viewer="viewer"
:app_settings="app_settings"
:layer_icons="layer_icons"
:icons="icons"
@data-item-visibility="$emit('data-item-visibility', $event)"
@data-item-unload="$emit('data-item-unload', $event)"
@data-item-remove="$emit('data-item-remove', $event)"
<j-viewer-data-select
:data_items="data_items"
:viewer="viewer"
:app_settings="app_settings"
:layer_icons="layer_icons"
:icons="icons"
@data-item-visibility="$emit('data-item-visibility', $event)"
@data-item-unload="$emit('data-item-unload', $event)"
@data-item-remove="$emit('data-item-remove', $event)"
></j-viewer-data-select>


<v-toolbar-items v-if="viewer.reference === 'table-viewer'">
<j-tooltip tipid='table-prev'>
<v-btn icon @click="$emit('call-viewer-method', {'id': viewer.id, 'method': 'prev_row'})" color="white">
Expand All @@ -55,7 +55,6 @@
<v-spacer></v-spacer>
<jupyter-widget class='jdaviz-nested-toolbar' :widget="viewer.toolbar"></jupyter-widget>
</v-row>

</div>

<v-card tile flat style="flex: 1; margin-top: -2px; overflow: hidden;">
Expand All @@ -80,13 +79,15 @@
</div>
</div>

<jupyter-widget
:widget="viewer.widget"
<jupyter-widget
:widget="viewer.widget"
:ref="'viewer-widget-'+viewer.id"
:style="'width: 100%; height: 100%; overflow: hidden; transform: rotateY('+viewer_rotateY(viewer.canvas_flip_horizontal)+') rotate('+viewer.canvas_angle+'deg)'"
></jupyter-widget>
></jupyter-widget>
</v-card>
</gl-component>
<div ref="menuAttachTarget" :id="'target-' + viewer.id" style="position: absolute;"></div>
</gl-component>
</div>
</component>
</template>

Expand All @@ -112,7 +113,7 @@
.viewer-label:hover {
background-color: #e5e5e5;
width: auto;
border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
.imviz div.v-card.v-card--flat.v-sheet.v-sheet--tile {
Expand All @@ -135,7 +136,29 @@ module.exports = {
this.$emit('resize')
}
},
mounted() {
let menuAttachTarget = this.$refs.menuAttachTarget[0]
while (menuAttachTarget && menuAttachTarget.className !== "lm_items") {
if (["auto"].includes(window.getComputedStyle(menuAttachTarget).overflowY)) {
menuAttachTarget.addEventListener("scroll", this.onScroll);
}
menuAttachTarget = menuAttachTarget.parentElement;
}
},
beforeDestroy() {
let menuAttachTarget = this.$refs.menuAttachTarget[0]
while (menuAttachTarget && menuAttachTarget.className !== "lm_items") {
if (["auto"].includes(window.getComputedStyle(menuAttachTarget).overflowY)) {
menuAttachTarget.removeEventListener("scroll", this.onScroll);
}
menuAttachTarget = menuAttachTarget.parentElement;
}
},
methods: {
onScroll(e) {
// TODO: Complete scroll logic for the menu
},
computeChildrenPath() {
return this.$parent.computeChildrenPath();
},
Expand Down

0 comments on commit 6590146

Please sign in to comment.