github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-15 09:48:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

seems to work fine, still checking things out

Browse Source
This commit is contained in:
Peter Olu 2022-04-28 05:07:58 +01:00
parent 5404e6f621
commit a234993c0c
1 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/views/dashboard/controls/Tab.vue
View File

@ -147,7 +147,14 @@ limitations under the License. -->
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { ref, watch, onMounted, onBeforeUnmount, defineComponent, toRefs } from "vue"; import {
ref,
watch,
onMounted,
onBeforeUnmount,
defineComponent,
toRefs,
} from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import type { PropType } from "vue"; import type { PropType } from "vue";
import { LayoutConfig } from "@/types/dashboard"; import { LayoutConfig } from "@/types/dashboard";
@ -186,7 +193,9 @@ export default defineComponent({
const currentItem = ref<number>(0); const currentItem = ref<number>(0);
const isScrolling = ref(false); const isScrolling = ref(false);
const l = dashboardStore.layout.findIndex((d: LayoutConfig) => d.i === props.data.i); const l = dashboardStore.layout.findIndex(
(d: LayoutConfig) => d.i === props.data.i
);
if (dashboardStore.layout[l].children.length) { if (dashboardStore.layout[l].children.length) {
dashboardStore.setCurrentTabItems( dashboardStore.setCurrentTabItems(
dashboardStore.layout[l].children[activeTabIndex.value].children dashboardStore.layout[l].children[activeTabIndex.value].children
@ -239,6 +248,14 @@ export default defineComponent({
scrollTo(currentItem.value); scrollTo(currentItem.value);
} }
} }
function scrollTo(index: number) {
arrayOfItems.value[index]?.scrollIntoView();
if (isScrolling.value) {
setTimeout(() => {
isScrolling.value = false;
}, 1020);
}
}
watch( watch(
() => dashboardStore.currentTabItems, () => dashboardStore.currentTabItems,
() => { () => {
@ -296,7 +313,9 @@ export default defineComponent({
function clickTabGrid(e: Event, item: LayoutConfig) { function clickTabGrid(e: Event, item: LayoutConfig) {
e.stopPropagation(); e.stopPropagation();
activeTabWidget.value = item.i; activeTabWidget.value = item.i;
dashboardStore.activeGridItem(`${props.data.i}-${activeTabIndex.value}-${item.i}`); dashboardStore.activeGridItem(
`${props.data.i}-${activeTabIndex.value}-${item.i}`
);
handleClick(e); handleClick(e);
} }
function layoutUpdatedEvent() { function layoutUpdatedEvent() {
@ -388,14 +407,11 @@ export default defineComponent({
position: relative; position: relative;
height: 80vh; height: 80vh;
display: block; display: block;
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-points-y: repeat(100%);
scroll-snap-destination: 0 0;
scroll-snap-type: y mandatory;
scroll-snap-type: mandatory;
scroll-behavior: smooth; scroll-behavior: smooth;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
perspective: 1000;
overflow: hidden;
} }
.scroll-snap-container::-webkit-scrollbar { .scroll-snap-container::-webkit-scrollbar {
display: none; display: none;