UI improvements (#2926)

lnbits/core/templates/admin/_tab_users.html

@@ -60,10 +60,10 @@
         <br />
         <q-item tag="label" v-ripple>
           <q-item-section>
-            <q-item-label v-text="$t('allow_creation_users')"></q-item-label>
+            <q-item-label v-text="$t('allow_creation_user')"></q-item-label>
             <q-item-label
               caption
-              v-text="$t('allow_creation_users_desc')"
+              v-text="$t('allow_creation_user_desc')"
             ></q-item-label>
           </q-item-section>
           <q-item-section avatar>

lnbits/core/templates/core/wallet.html

@@ -221,8 +221,8 @@
                   color="grey-5"
                   text-color="black"
                   size="xs"
-                  icon="add"
+                  icon="edit"
-                  style="position: relative; left: -20px; bottom: -10px"
+                  style="position: relative; left: -15px; bottom: -10px"
                 ></q-btn>
                 <div class="text-subtitle1 q-mt-none q-mb-none">
                   {{ SITE_TITLE }} Wallet:

lnbits/static/css/base.css

@@ -532,6 +532,9 @@ video {
   word-break: break-word;
 }
 
+.q-card {
+  border-radius: 10px;
+}
 .q-card code {
   overflow-wrap: break-word;
 }

lnbits/static/i18n/en.js

@@ -512,5 +512,7 @@ window.localisation.en = {
   payments_count_in_out_chart: 'Count In/Out Chart',
   reset_wallet_keys: 'Reset Keys',
   reset_wallet_keys_desc:
-    'Reset the API keys for this wallet. This will invalidate the current keys and generate new ones.'
+    'Reset the API keys for this wallet. This will invalidate the current keys and generate new ones.',
+  view_list: 'View wallets as list',
+  view_column: 'View wallets as rows'
 }

lnbits/static/js/base.js

@@ -471,6 +471,7 @@ window.windowMixin = {
       toggleSubs: true,
       mobileSimple: true,
       walletFlip: true,
+      showAddWalletDialog: {show: false},
       borderSelection: null,
       gradientSelection: null,
       themeSelection: null,
@@ -506,6 +507,23 @@ window.windowMixin = {
       }
       this.$q.localStorage.set('lnbits.walletFlip', this.walletFlip)
     },
+    submitAddWallet() {
+      if (
+        this.showAddWalletDialog.name &&
+        this.showAddWalletDialog.name.length > 0
+      ) {
+        LNbits.api.createWallet(
+          this.g.user.wallets[0],
+          this.showAddWalletDialog.name
+        )
+        this.showAddWalletDialog = {show: false}
+      } else {
+        this.$q.notify({
+          message: 'Please enter a name for the wallet',
+          color: 'negative'
+        })
+      }
+    },
     simpleMobile() {
       this.$q.localStorage.set('lnbits.mobileSimple', !this.mobileSimple)
       this.refreshRoute()

lnbits/static/scss/base.scss

@@ -207,6 +207,7 @@ video {
 }
 
 .q-card {
+  border-radius: 10px;
   code {
     overflow-wrap: break-word;
   }

lnbits/templates/base.html

@@ -16,6 +16,13 @@
         src: url("{{ static_url_for('static', 'fonts/material-icons-v50.woff2') }}")
           format('woff2');
       }
+      .wallet-list-card {
+        margin-top: 1px;
+        margin-right: 1rem;
+      }
+      .wallet-list-card:first-child {
+        margin-left: 1px;
+      }
     </style>
     <title>{% block title %}{{ SITE_TITLE }}{% endblock %}</title>
     <meta charset="utf-8" />
@@ -100,9 +107,8 @@
             </q-badge>
             <q-btn-dropdown
               v-if="isUserAuthorized"
-              dense
               flat
-              round
+              rounded
               size="sm"
               class="q-pl-sm"
             >
@@ -171,18 +177,31 @@
           show-if-above
           :elevated="$q.screen.lt.md"
         >
-          <q-item-label
+          <q-item>
-            :style="$q.dark.isActive ? 'color:rgba(255, 255, 255, 0.64)' : ''"
+            <q-item-section>
-            class="q-item__label q-item__label--header"
+              <q-item-label
-            header
+                :style="$q.dark.isActive ? 'color:rgba(255, 255, 255, 0.64)' : ''"
-            v-text="$t('wallets')"
+                class="q-item__label q-item__label--header q-pa-none"
-          ></q-item-label>
+                header
-          <q-btn
+                v-text="$t('wallets')"
-            flat
+              ></q-item-label>
-            :icon=" walletFlip ? 'keyboard_arrow_right' : 'keyboard_arrow_down'"
+            </q-item-section>
-            class="absolute-top-right"
+            <q-item-section side>
-            @click="flipWallets($q.screen.lt.md)"
+              <q-btn
-          ></q-btn>
+                flat
+                :icon=" walletFlip ? 'view_list' : 'view_column'"
+                color="grey"
+                class=""
+                @click="flipWallets($q.screen.lt.md)"
+              >
+                <q-tooltip
+                  ><span
+                    v-text="walletFlip ? $t('view_list') : $t('view_column')"
+                  ></span
+                ></q-tooltip>
+              </q-btn>
+            </q-item-section>
+          </q-item>
           <lnbits-wallet-list
             v-if="!walletFlip"
             :balance="balance"
@@ -207,9 +226,62 @@
                 width: 100%;
                 overflow-x: auto;
                 overflow-y: hidden;
+                mask-image: linear-gradient(
+                  to right,
+                  hsl(0 0% 0% / 1) 80%,
+                  hsl(0 0% 0% / 0)
+                );
               "
             >
-              <div class="row no-wrap q-gutter-md q-pr-md">
+              <div class="row no-wrap q-pr-md">
+                <q-card class="wallet-list-card">
+                  <q-card-section
+                    class="flex flex-center column full-height text-center"
+                  >
+                    <div>
+                      <q-btn
+                        round
+                        color="primary"
+                        icon="add"
+                        @click="showAddWalletDialog.show = true"
+                      >
+                        <q-tooltip
+                          ><span v-text="$t('add_wallet')"></span
+                        ></q-tooltip>
+                      </q-btn>
+                      <q-dialog
+                        v-model="showAddWalletDialog.show"
+                        persistent
+                        @hide="showAddWalletDialog = {show: false}"
+                      >
+                        <q-card style="min-width: 350px">
+                          <q-card-section>
+                            <div class="text-h6">Wallet name</div>
+                          </q-card-section>
+
+                          <q-card-section class="q-pt-none">
+                            <q-input
+                              dense
+                              v-model="showAddWalletDialog.name"
+                              autofocus
+                              @keyup.enter="submitAddWallet()"
+                            ></q-input>
+                          </q-card-section>
+
+                          <q-card-actions align="right" class="text-primary">
+                            <q-btn flat label="Cancel" v-close-popup></q-btn>
+                            <q-btn
+                              flat
+                              label="Add wallet"
+                              v-close-popup
+                              @click="submitAddWallet()"
+                            ></q-btn>
+                          </q-card-actions>
+                        </q-card>
+                      </q-dialog>
+                    </div>
+                  </q-card-section>
+                </q-card>
                 <q-card
                   v-for="wallet in g.user.wallets"
                   :key="wallet.id"
@@ -219,7 +291,9 @@
                   style="text-decoration: none"
                   :style="
         g.wallet && g.wallet.id === wallet.id
-          ? `width: 250px; text-decoration: none; cursor: pointer;`
+          ? `width: 250px; text-decoration: none; cursor: pointer; background-color: ${
+              $q.dark.isActive ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.08)'
+            } !important;`
           : 'width: 250px; text-decoration: none; border: 0px; cursor: pointer;'
       "
                   :class="{