refactor(components): refactor bottom settings component

tks18 · Jul 24, 2022 · 902d45f · 902d45f
1 parent 8208cd9
commit 902d45f
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/src/components/bottom-settings.vue b/src/components/bottom-settings.vue
@@ -20,6 +20,21 @@
  >
  <v-icon>mdi-cog-refresh</v-icon> Settings
  </v-btn>
+ <v-btn
+ v-if="model == 'fab'"
+ :class="endofPage ? 'fab-button-bottom' : 'fab-button'"
+ :bottom="true"
+ :absolute="true"
+ :fixed="true"
+ :right="true"
+ color="primary"
+ rounded
+ fab
+ v-bind="attrs"
+ v-on="on"
+ >
+ <v-icon>mdi-tune</v-icon>
+ </v-btn>
  </template>
  <v-sheet class="pa-8 mt-auto">
  <v-row align="start" justify="end">
@@ -146,6 +161,7 @@ export default {
  },
  },
  data: () => ({
+ endofPage: false,
  activated: false,
  colorDiag: false,
  blurDiag: false,
@@ -160,6 +176,7 @@ export default {
  ],
  }),
  mounted() {
+ this.scroll();
  const themecache = JSON.parse(localStorage.getItem('themecache'));
  if (themecache && themecache != null) {
  this.$state.store.botSettings.darkmode = themecache.dark;
@@ -210,6 +227,18 @@ export default {
  }),
  );
  },
+ scroll() {
+ window.onscroll = () => {
+ if (
+ window.innerHeight + window.pageYOffset >=
+ document.body.offsetHeight - 60
+ ) {
+ this.endofPage = true;
+ } else {
+ this.endofPage = false;
+ }
+ };
+ },
  },
 };
 </script>
diff --git a/src/styles/common.scss b/src/styles/common.scss
@@ -1,12 +1,12 @@
 .fab-button-bottom {
- margin-bottom: 130px;
+ margin-bottom: 280px;
  z-index: 9999;
  transition: margin-bottom 0.5s ease-in-out;
 }
 
 @media only screen and (min-width: 966px) {
  .fab-button-bottom {
- margin-bottom: 200px;
+ margin-bottom: 170px;
  z-index: 9999;
  transition: margin-bottom 0.5s ease-in-out;
  }