Merge branch 'card_flip' into all_ui_elements

lnbits/core/templates/core/wallet.html

@@ -25,68 +25,6 @@
     } : ''"
       >
         {% endif %}
-        <q-scroll-area
-          v-if="!mobileSimple"
-          style="
-            height: 115px;
-            width: 100%;
-            overflow-x: auto;
-            overflow-y: hidden;
-          "
-        >
-          <div class="row no-wrap q-gutter-md q-pr-md">
-            <q-card
-              v-for="wallet in g.user.wallets"
-              :key="wallet.id"
-              class="wallet-list-card"
-              bordered
-              tag="a"
-              :href="wallet.url"
-              :style="
-          g.wallet && g.wallet.id === wallet.id
-            ? `border: 1px solid ${primaryColor}; width: 250px; text-decoration: none;`
-            : 'width: 250px; text-decoration: none;'
-        "
-              :class="{
-            'active-wallet-card': g.wallet && g.wallet.id === wallet.id
-          }"
-            >
-              <q-card-section>
-                <div class="row items-center">
-                  <q-avatar
-                    size="lg"
-                    :color="
-                g.wallet && g.wallet.id === wallet.id
-                  ? $q.dark.isActive
-                    ? 'primary'
-                    : 'primary'
-                  : 'grey-5'
-              "
-                  >
-                    <q-icon
-                      name="flash_on"
-                      :size="$q.dark.isActive ? '21px' : '20px'"
-                      :color="$q.dark.isActive ? 'black' : 'grey-3'"
-                    ></q-icon>
-                  </q-avatar>
-                  <div
-                    class="text-h6 q-pl-md"
-                    :class="{
-                'text-bold': g.wallet && g.wallet.id === wallet.id
-              }"
-                    v-text="wallet.name"
-                  ></div>
-                </div>
-                <div class="row items-center q-pt-sm">
-                  <h6 class="q-my-none text-no-wrap">
-                    <strong v-text="wallet.fsat"></strong>
-                    <small> {{LNBITS_DENOMINATION}}</small>
-                  </h6>
-                </div>
-              </q-card-section>
-            </q-card>
-          </div>
-        </q-scroll-area>
         <div class="row">
           <div class="col-lg-9 col-12">
             <q-card

lnbits/static/js/base.js

@@ -453,6 +453,7 @@ window.windowMixin = {
   data() {
     return {
       toggleSubs: true,
+      walletFlip: true,
       reactionChoice: 'confettiBothSides',
       borderChoice: '',
       gradientChoice:
@@ -472,6 +473,17 @@ window.windowMixin = {
   },
 
   methods: {
+    flipWallets(smallScreen) {
+      this.walletFlip = !this.walletFlip
+      if (this.walletFlip && smallScreen) {
+        this.g.visibleDrawer = false
+      }
+      this.$q.localStorage.set('lnbits.walletFlip', this.walletFlip)
+    },
+    simpleMobile() {
+      this.mobileSimple = !this.mobileSimple
+      this.$q.localStorage.set('lnbits.mobileSimple', this.mobileSimple)
+    },
     changeColor(newValue) {
       document.body.setAttribute('data-theme', newValue)
       this.$q.localStorage.set('lnbits.theme', newValue)
@@ -700,6 +712,8 @@ window.windowMixin = {
     }
     await this.checkUsrInUrl()
     this.themeParams()
+    this.walletFlip = this.$q.localStorage.getItem('lnbits.walletFlip')
+    this.mobileSimple = this.$q.localStorage.getItem('lnbits.mobileSimple')
   }
 }
 

lnbits/static/js/wallet.js

@@ -7,6 +7,7 @@ window.app = Vue.createApp({
       origin: window.location.origin,
       wallet: LNbits.map.wallet(window.wallet),
       user: LNbits.map.user(window.user),
+      mobileSimple: false,
       exportUrl: `${window.location.origin}/wallet?usr=${window.user.id}&wal=${window.wallet.id}`,
       baseUrl: `${window.location.protocol}//${window.location.host}/`,
       receive: {
@@ -50,7 +51,6 @@ window.app = Vue.createApp({
       },
       balance: parseInt(wallet.balance_msat / 1000),
       fiatBalance: 0,
-      mobileSimple: false,
       update: {
         name: null,
         currency: null

lnbits/templates/base.html

@@ -158,7 +158,22 @@
           show-if-above
           :elevated="$q.screen.lt.md"
         >
-          <lnbits-wallet-list :balance="balance"></lnbits-wallet-list>
+          <q-item-label
+            :style="$q.dark.isActive ? 'color:rgba(255, 255, 255, 0.64)' : ''"
+            class="q-item__label q-item__label--header"
+            header
+            v-text="$t('wallets')"
+          ></q-item-label>
+          <q-btn
+            flat
+            :icon=" walletFlip ? 'keyboard_arrow_right' : 'keyboard_arrow_down'"
+            class="absolute-top-right"
+            @click="flipWallets($q.screen.lt.md)"
+          ></q-btn>
+          <lnbits-wallet-list
+            v-if="!walletFlip"
+            :balance="balance"
+          ></lnbits-wallet-list>
 
           <lnbits-manage
             :show-admin="'{{LNBITS_ADMIN_UI}}' == 'True'"
@@ -172,6 +187,69 @@
         {% endblock %} {% block page_container %}
         <q-page-container>
           <q-page class="q-px-md q-py-lg" :class="{'q-px-lg': $q.screen.gt.xs}">
+            <q-scroll-area
+              v-if="walletFlip"
+              style="
+                height: 130px;
+                width: 100%;
+                overflow-x: auto;
+                overflow-y: hidden;
+              "
+            >
+              <div class="row no-wrap q-gutter-md q-pr-md">
+                <q-card
+                  v-for="wallet in g.user.wallets"
+                  :key="wallet.id"
+                  class="wallet-list-card"
+                  bordered
+                  tag="a"
+                  :href="wallet.url"
+                  :style="
+          g.wallet && g.wallet.id === wallet.id
+            ? `border: 1px solid ${primaryColor}; width: 250px; text-decoration: none;`
+            : 'width: 250px; text-decoration: none;'
+        "
+                  :class="{
+            'active-wallet-card': g.wallet && g.wallet.id === wallet.id
+          }"
+                >
+                  <q-card-section>
+                    <div class="row items-center">
+                      <q-avatar
+                        size="lg"
+                        :color="
+                g.wallet && g.wallet.id === wallet.id
+                  ? $q.dark.isActive
+                    ? 'primary'
+                    : 'primary'
+                  : 'grey-5'
+              "
+                      >
+                        <q-icon
+                          name="flash_on"
+                          :size="$q.dark.isActive ? '21px' : '20px'"
+                          :color="$q.dark.isActive ? 'black' : 'grey-3'"
+                        ></q-icon>
+                      </q-avatar>
+                      <div
+                        class="text-h6 q-pl-md"
+                        :class="{
+                'text-bold': g.wallet && g.wallet.id === wallet.id
+              }"
+                        v-text="wallet.name"
+                      ></div>
+                    </div>
+                    <div class="row items-center q-pt-sm">
+                      <h6 class="q-my-none text-no-wrap">
+                        <strong v-text="wallet.fsat"></strong>
+                        <small> {{LNBITS_DENOMINATION}}</small>
+                      </h6>
+                    </div>
+                  </q-card-section>
+                </q-card>
+              </div>
+            </q-scroll-area>
+
             {% block page %}{% endblock %}
           </q-page>
         </q-page-container>

lnbits/templates/components.vue

@@ -4,7 +4,6 @@
     dense
     class="lnbits-drawer__q-list"
   >
-    <q-item-label header v-text="$t('wallets')"></q-item-label>
     <q-item
       v-for="wallet in wallets"
       :key="wallet.id"
@@ -53,7 +52,6 @@
         side
         v-show="activeWallet && activeWallet.id === wallet.id"
       >
-        <q-icon name="chevron_right" color="grey-5" size="md"></q-icon>
       </q-item-section>
     </q-item>
     <q-item clickable @click="showForm = !showForm">