- moved dashboard buttons for changing currency and hidding values to…

… the sticky controls panel

front/assets/styles/theme.css

@@ -1061,4 +1061,14 @@ img, svg {
     display: flex;
     align-items: center;
     justify-content: center;
+}
+
+.app-button-small {
+    border: 1px solid var(--van-text-color-2);
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 3px;
+    padding: 5px 5px;
 }

front/components/dashboard/dashboard-accounts/dashboard-accounts.vue

@@ -2,20 +2,6 @@
   <van-cell-group inset >
     <div class="flex-center-vertical">
       <div class="van-cell-group-title">Total balance:</div>
-      <div class="flex-1" />
-
-      <van-button v-if="hasMultipleCurrencies" @click="onToggleTotalCurrency" size="small" class="mr-10">
-        <template #icon>
-          <app-icon :icon="TablerIconConstants.transaction" :size="20" />
-          {{ dataStore.dashboardCurrency }}
-        </template>
-      </van-button>
-
-      <van-button @click="onToggleShowDashboardAccountValues" size="small" class="mr-10">
-        <template #icon>
-          <app-icon :icon="profileStore.dashboard.showAccountAmounts ? TablerIconConstants.eyeHidden : TablerIconConstants.eyeVisible" :size="20" />
-        </template>
-      </van-button>
     </div>
 
     <van-grid :column-num="2">
@@ -83,24 +69,13 @@ const accountTotal = computed(() => {
   return getFormattedValue(dataStore.dashboardAccountsEstimatedTotal)
 })
 
-const onToggleShowDashboardAccountValues = async () => {
-  profileStore.dashboard.showAccountAmounts = !profileStore.dashboard.showAccountAmounts
-}
 
 const getAccountAmount = (account) => {
   return `${getFormattedValue(Account.getBalance(account))} ${Account.getCurrency(account)}`
 }
 
 const hasMultipleCurrencies = computed(() => dataStore.dashboardAccountsCurrencyList.length > 1)
 
-const onToggleTotalCurrency = () => {
-  if (dataStore.dashboardAccountsCurrencyList.length === 0) {
-    return
-  }
-  let index = dataStore.dashboardAccountsCurrencyList.indexOf(dataStore.dashboardCurrency)
-  let newIndex = (index + 1) % dataStore.dashboardAccountsCurrencyList.length
-  dataStore.dashboardCurrency = dataStore.dashboardAccountsCurrencyList[newIndex]
-}
 
 const actionSheet = useActionSheet()
 const onShowActionSheet = (account) => {

front/components/dashboard/dashboard-controls/dashboard-control-buttons.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="text-size-14 flex-center-vertical gap-1">
+    <div class="app-button-small" v-if="hasMultipleCurrencies" @click="onToggleTotalCurrency">
+      <app-icon :icon="TablerIconConstants.transaction" :size="14" />
+      {{ dataStore.dashboardCurrency }}
+    </div>
+
+    <div class="app-button-small" @click="onToggleShowDashboardAccountValues">
+      <app-icon :icon="profileStore.dashboard.showAccountAmounts ? TablerIconConstants.eyeHidden : TablerIconConstants.eyeVisible" :size="20" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { addMonths } from 'date-fns'
+import TablerIconConstants from '~/constants/TablerIconConstants.js'
+import { useWindowScroll } from '@vueuse/core'
+import { animateOnNext, animateOnPrevious } from '~/utils/AnimationUtils.js'
+
+const dataStore = useDataStore()
+const profileStore = useProfileStore()
+
+
+
+const hasMultipleCurrencies = computed(() => dataStore.dashboardAccountsCurrencyList.length > 1)
+
+const onToggleTotalCurrency = () => {
+  if (dataStore.dashboardAccountsCurrencyList.length === 0) {
+    return
+  }
+  let index = dataStore.dashboardAccountsCurrencyList.indexOf(dataStore.dashboardCurrency)
+  let newIndex = (index + 1) % dataStore.dashboardAccountsCurrencyList.length
+  dataStore.dashboardCurrency = dataStore.dashboardAccountsCurrencyList[newIndex]
+}
+
+const onToggleShowDashboardAccountValues = async () => {
+  profileStore.dashboard.showAccountAmounts = !profileStore.dashboard.showAccountAmounts
+}
+
+
+</script>

front/components/dashboard/dashboard-controls/dashboard-control.vue

@@ -0,0 +1,61 @@
+<template>
+    <van-cell-group inset class="dashboard-control-date" :style="style" @click="onChooseMonth">
+      <div class="flex-center-vertical gap-2">
+        <app-icon :icon="TablerIconConstants.leftArrow" @click.stop="onPreviousMonth" :size="24" class="m-10" />
+        <div class="flex-1 flex-center flex-column my-2">
+          <div class="text-size-14 font-weight-600">{{ rangeTitle }}</div>
+          <dashboard-control-buttons />
+        </div>
+
+        <app-icon :icon="TablerIconConstants.rightArrow" @click.stop="onNextMonth" :size="24" class="m-10" />
+      </div>
+    </van-cell-group>
+
+    <app-month-year v-model="dataStore.dashboard.month" v-model:showDropdown="showDropdown" />
+</template>
+
+<script setup>
+import { addMonths } from 'date-fns'
+import TablerIconConstants from '~/constants/TablerIconConstants.js'
+import { useWindowScroll } from '@vueuse/core'
+import { animateOnNext, animateOnPrevious } from '~/utils/AnimationUtils.js'
+import DashboardControls from '~/components/dashboard/dashboard-controls/dashboard-control-buttons.vue'
+import DashboardControlButtons from '~/components/dashboard/dashboard-controls/dashboard-control-buttons.vue'
+
+const dataStore = useDataStore()
+const profileStore = useProfileStore()
+
+const dashboardControlDate = ref(null)
+
+const rangeTitle = computed(() => {
+  let date1 = DateUtils.dateToUI(dataStore.dashboardDateStart)
+  let date2 = DateUtils.dateToUI(dataStore.dashboardDateEnd)
+  return `${date1} - ${date2}`
+})
+const onNextMonth = () => {
+  dataStore.dashboard.month = addMonths(dataStore.dashboard.month, 1)
+  animateOnNext(dashboardControlDate.value)
+}
+const onPreviousMonth = () => {
+  dataStore.dashboard.month = addMonths(dataStore.dashboard.month, -1)
+  animateOnPrevious(dashboardControlDate.value)
+}
+
+const { y } = useWindowScroll()
+const style = computed(() => {
+  return y.value > 20 ? `box-shadow: rgba(60, 64, 67, 0.1) 0px 1px 2px 0px, rgba(60, 64, 67, 0.05) 0px 1px 3px 1px;` : ``
+})
+
+const showDropdown = ref(false)
+
+const onChooseMonth = () => {
+  // showDropdown.value = true
+}
+
+watch(
+  () => dataStore.dashboard.month,
+  (newValue) => {
+    dataStore.fetchDashboardTransactionsForInterval()
+  },
+)
+</script>

front/pages/dashboard.vue

@@ -4,7 +4,7 @@
 
     <van-pull-refresh v-model="isLoadingAccounts" @refresh="onRefresh">
       <div ref="dashboard" class="flex-column display-flex">
-        <dashboard-control-date />
+        <dashboard-control />
 
         <dashboard-calendar :style="getStyleForCard(DASHBOARD_SECTIONS.calendar)" />
 
@@ -45,6 +45,7 @@ import { DASHBOARD_SECTIONS } from '~/constants/DashboardConstants.js'
 import TablerIconConstants from '~/constants/TablerIconConstants.js'
 import { useSwipe } from '@vueuse/core'
 import { addMonths } from 'date-fns'
+import DashboardControlButtons from '~/components/dashboard/dashboard-controls/dashboard-control-buttons.vue'
 
 const toolbar = useToolbar()
 toolbar.init({ title: 'Dashboard' })

front/utils/AnimationUtils.js

@@ -82,3 +82,32 @@ export async function animateSaveButton() {
     duration: 700,
   })
 }
+
+
+export async function animateOnNext (element) {
+  await nextTick()
+
+  console.log('animateOnNext', { element})
+  anime({
+    targets: element,
+    duration: 100,
+    translateX: [0, 10],
+    direction: 'alternate',
+    delay: 0,
+    easing: 'easeOutSine'
+  })
+}
+
+export async function animateOnPrevious (element) {
+  await nextTick()
+
+  anime({
+    targets: element,
+    translateX: [0, -10,],
+    duration: 100,
+    direction: 'alternate',
+    delay: 0,
+    easing: 'easeOutSine'
+
+  })
+}