Add extra padding when bottom nav is expanded
Test: Visual
Change-Id: I6d42e07ab945a37b21b6f9cc328d348ddef5507c
diff --git a/tools/winscope/src/App.vue b/tools/winscope/src/App.vue
index fc680d9..7f4e892 100644
--- a/tools/winscope/src/App.vue
+++ b/tools/winscope/src/App.vue
@@ -30,7 +30,7 @@
>Clear</md-button>
</md-app-toolbar>
- <md-app-content class="main-content">
+ <md-app-content class="main-content" :style="mainContentStyle">
<section class="data-inputs" v-if="!dataLoaded">
<div class="input">
<dataadb class="adbinput" ref="adb" :store="store" @dataReady="onDataReady" @statusChange="setStatus" />
@@ -58,6 +58,7 @@
:store="store"
:ref="overlayRef"
v-if="dataLoaded"
+ v-on:bottom-nav-height-change="handleBottomNavHeightChange"
/>
</section>
</md-app-content>
@@ -80,6 +81,8 @@
const APP_NAME = "Winscope";
+const CONTENT_BOTTOM_PADDING = 25;
+
export default {
name: 'app',
mixins: [FileType, SaveAsZip, FocusedDataViewFinder],
@@ -95,6 +98,9 @@
navigationStyle: NAVIGATION_STYLE.GLOBAL,
}),
overlayRef: "overlay",
+ mainContentStyle: {
+ 'padding-bottom': `${CONTENT_BOTTOM_PADDING}px`,
+ },
}
},
created() {
@@ -141,6 +147,13 @@
this.title = APP_NAME;
}
},
+ handleBottomNavHeightChange(newHeight) {
+ this.$set(
+ this.mainContentStyle,
+ 'padding-bottom',
+ `${ CONTENT_BOTTOM_PADDING + newHeight }px`
+ );
+ },
},
computed: {
files() {
@@ -205,7 +218,6 @@
.data-view {
display: flex;
flex-direction: column;
- padding-bottom: 75px; /* TODO: Disable if no bottom bar */
}
.card-toolbar {
diff --git a/tools/winscope/src/Overlay.vue b/tools/winscope/src/Overlay.vue
index b502b25..804782c 100644
--- a/tools/winscope/src/Overlay.vue
+++ b/tools/winscope/src/Overlay.vue
@@ -246,6 +246,9 @@
this.$store.commit('setMergedTimeline', this.mergedTimeline);
this.updateNavigationFileFilter();
},
+ mounted() {
+ this.emitBottomHeightUpdate();
+ },
destroyed() {
this.$store.commit('removeMergedTimeline', this.mergedTimeline);
},
@@ -261,6 +264,8 @@
minimized() {
// Minimized toggled
this.updateNavigationFileFilter();
+
+ this.$nextTick(this.emitBottomHeightUpdate);
}
},
computed: {
@@ -373,6 +378,10 @@
})
},
methods: {
+ emitBottomHeightUpdate() {
+ const newHeight = this.$refs.bottomNav.$el.clientHeight;
+ this.$emit('bottom-nav-height-change', newHeight);
+ },
computeMergedTimeline() {
const mergedTimeline = {
timeline: [], // Array of integers timestamps
