No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. mboeni
    • Profile
    • Following 0
    • Followers 0
    • Topics 32
    • Posts 116
    • Best 9
    • Groups 0

    mboeni

    @mboeni

    13
    Reputation
    59
    Profile views
    116
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    mboeni Follow

    Best posts made by mboeni

    • RE: Where do I find docs/info on custom keyboard shortcuts? (Solved)

      Just in case anyone else is interested, here is how it works:

      Add the following under mounted in your Vue file:

      document.addEventListener('keydown', this.keyListener)
      

      and here is how the handler works:

       keyListener: function (e) {
            if (e.key === '1' && (e.ctrlKey || e.metaKey)) {
              this.$root.$emit('userAlert', 'fatal', 'A message from the president', 'Obey the president!')
            } else if (e.key === '2' && (e.ctrlKey || e.metaKey)) {
              this.$root.$emit('userNotify', 'Ivey sent you a new message', '5 min ago.', 'notifications_active')
            } else if (e.key === '3' && (e.ctrlKey || e.metaKey)) {
              this.$root.$emit('showProgress', 0.35)
            } else if (e.key === '4' && (e.ctrlKey || e.metaKey)) {
              this.$root.$emit('showProgress', 0.70)
            } else if (e.key === '5' && (e.ctrlKey || e.metaKey)) {
              this.$root.$emit('showProgress', 1.00)
            }
          }
      

      Works like a charm 🙂

      Cheers,
      Michael

      posted in Help
      mboeni
      mboeni
    • RE: Promise puzzlement...

      @jraez Yep, that’s what I opted for…it works now as it should 🙂

      Thanks a lot for your help @jraez and @metalsadman !

      Cheers,
      M.

      posted in Help
      mboeni
      mboeni
    • RE: App Icon for frameless electron app not showing in build (Solved)

      Solved it (at least for my case):

      This does not work:
      <q-icon name="img:statics/icons/icon.png" />

      This works for dev and build:
      <img alt="App Logo" src="~assets/icon.png">

      Cheers,
      M.

      PS: I tried the ~assets/icon.png path with q-icon and it did not work for me.

      posted in Help
      mboeni
      mboeni
    • Best practices for logging?

      Hi there

      I just wondered how to go about logging in Quasar and/or Vue. I have found very little documentation so far.

      Is there a tested/proven approach to setting up logging to be used in development as well as production?

      Cheers,
      M.

      posted in Help
      mboeni
      mboeni
    • RE: Component's text color not properly updated (Solved)

      Right, it seems that I’ve got it working how. Another bug I had was interfering as well…phew… 😉

      Thanks for your help @metalsadman @Hawkeye64

      posted in Help
      mboeni
      mboeni
    • Using q-route-tab with splitter (Solved)

      Hi there

      I would like to have a a setup where I use a splitter and have the q-tabs on the left (v-slot:before) and the content on the right (v-slot:after). Clicking on the tab should load a page and display it in the appropriate place to the right (<router-view/>).

      Issue: The whole page is replaced, not just the right side of the splitter. How do I make sure routing to a page does not overwrite the whole page?

      Here’s the code:

      <template>
        <q-page class="flex flex-start bg-secondary">
          <div style="width:100%">
            <q-splitter
              :value="160"
              disable
              unit="px"
            >
              <template v-slot:before>
                <q-tabs
                  v-model="selectedTab"
                  vertical
                  dense
                  inline-label
                  >
                  <div class="q-pa-sm" >
                    <q-item-label lines="1" class="q-mt-xs text-body2 text-weight-bold text-uppercase" :style="{ color: localTextColor1 }" >DEV TOOLS</q-item-label>
                  </div>
                  <q-route-tab
                    name="iveDebug"
                    icon="account_box"
                    label="IVE Debugging"
                    style="justify-content:initial"
                    :style="{ color: localTextColor2 }"
                    to="/ivedebug"
                    exact
                  />
                </q-tabs>
              </template>
              <template v-slot:after>
                <q-page-container>
                  <router-view/>
                </q-page-container>
              </template>
            </q-splitter>
          </div>
        </q-page>
      </template>
      

      Here’s the routing I’m doing:

        {
          path: '/ivedebug',
          component: () => import('layouts/MainLayout.vue'),
          children: [
            { path: '', component: () => import('pages/IveDebug.vue') }
          ]
        }
      

      Cheers,
      m.

      posted in Help
      mboeni
      mboeni
    • RE: Quasar Email Internal Validation

      If you don’t need it too fancy…I’m doing a bit of regex in my utility lib to achieve this:

      export function validateEmail (email) {
        var reg = /^([A-Za-z0-9_\-.+])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,})$/
        if (!reg.test(email)) return false
        return true
      }
      

      🙂

      posted in Help
      mboeni
      mboeni
    • RE: [Solved] Opening link in external browser - multiplatform safe

      @kiani Not yet. Thanks, that’s exactly what I needed 🙂

      posted in Help
      mboeni
      mboeni
    • RE: Tabs don't align-left in vertical Q-Tabs (Solved)

      @metalsadman

      Got it. It worked like this:

      <q-tab name="myAccount" icon="account_box" label="My Account" style="justify-content:initial" />
      <q-tab name="appearance" icon="palette" label="Appearance" style="justify-content:initial"/>
      <q-tab name="ive" icon="visibility" label="IVE" style="justify-content:initial" />
      

      Thanks for your help 🙂

      posted in Help
      mboeni
      mboeni

    Latest posts made by mboeni

    • RE: Having a q-item-label expand to available width

      Follow up: would wrapping the q-item-label in a <div> be the correct way of spacing the labels? I’m not really able to get this working right now -.-

      posted in Help
      mboeni
      mboeni
    • Having a q-item-label expand to available width

      Hey there

      I’m doing a list and want to have a specific q-item-section expand to fill the available space. Consider the following code:

                                    <q-list bordered>
                                      <q-item clickable v-ripple>
                                        <q-item-section avatar>
                                          <q-avatar>
                                            <img :src="`https://cdn.quasar.dev/img/avatar6.jpg`">
                                          </q-avatar>
                                        </q-item-section>
                                        <q-item-section>
                                          <q-item-label>Topic Name</q-item-label>
                                        </q-item-section>
                                        <q-item-section>
                                          <q-item-label>Twitch</q-item-label>
                                          <q-item-label>Mixer</q-item-label>
                                          <q-item-label>YouTube</q-item-label>
                                        </q-item-section>
                                        <q-item-section>
                                          <q-item-label>Description goes here...</q-item-label>
                                        </q-item-section>
                                        <q-item-section>
                                          <q-item-label>External Link 1</q-item-label>
                                        </q-item-section>
                                        <q-item-section>
                                          <q-item-label>External Link 2</q-item-label>
                                        </q-item-section>
                                      </q-item>
                                    </q-list>
      

      I would like to have the q-item-label that holds the description use as much space horizontally as available (i.e. expand). What is the correct way to achieve this?

      Cheers,
      Michael

      posted in Help
      mboeni
      mboeni
    • RE: [Solved] Unexpected page refresh at first form submit

      @tof06 Yep, that solved it! I added the submit.prevent directive and removed the @click. Thanks!

      posted in Help
      mboeni
      mboeni
    • [Solved] Unexpected page refresh at first form submit

      Hi all

      I am using the following form:

                          <form>
                            <div class="row">
                                <div class="column ">
                                  <q-input
                                    ref='noOfTopGamesField'
                                    label='# of Top Games'
                                    type="number"
                                    outlined
                                    dense
                                    dark
                                    color="accent"
                                    bg-color="secondary"
                                    v-model="noOfTopGames"
                                    style="width:100px"
                                    error-message="Please enter a value between 1 and 100."
                                    :error="!isNoOfTopGamesValid"
                                  />
                                </div>
                                <div class="column q-ma-xs">
                                  <div class="row q-ml-md">
                                    <q-btn
                                      @click="runQueryTopGames"
                                      type="submit"
                                      unelevated
                                      color='positive'
                                      icon="refresh"
                                      size='sm'
                                      />
                                  </div>
                                </div>
                            </div>
                          </form>
      

      and clicking on the submit button triggers the following code:

          runQueryTopGames: async function () {
            if (this.$refs.noOfTopGamesField.error === false) {
              this.topGames = []
              try {
                this.topGames = await twLib.getTopGamesInfo(this.noOfTopGames)
              } catch (error) {
                this.$root.$emit('userNotify', 'No Data Found', "There don't seem to be any top games.", 'error')
                console.log('error: ' + error)
              }
            }
          }
      

      I now have the following issue:

      When i start the application and execute the form for the first time, it leads to a refresh of the page. From the second time onwards, it works as expected.

      I have no idea why the refresh is done?

      anyone?

      Best
      Michael

      posted in Help
      mboeni
      mboeni
    • RE: [Solved] Should images work in grid-mode tables?

      Just in case anyone else is interested. I was able to solve it like this:

                              <div v-if="topGamesGridMode === false">
                                <q-table
                                  dark
                                  bordered
                                  color="accent"
                                  card-class="bg-primary"
                                  :style="{ color: localTextColor1 }"
                                  title="Top Games"
                                  :data="topGames"
                                  :columns="topGamesColumns"
                                  :pagination.sync="topGamesPagination"
                                  row-key="id"
                                >
                                  <template v-slot:body-cell-boxShot="boxShot">
                                    <q-td :props="boxShot">
                                      <div>
                                        <q-img :src='boxShot.value' basic />
                                      </div>
                                    </q-td>
                                  </template>
                                </q-table>
                              </div>
                              <div v-else>
                                <q-table
                                  grid
                                  dark
                                  bordered
                                  color="accent"
                                  card-class="bg-primary"
                                  :style="{ color: localTextColor1 }"
                                  title="Top Games"
                                  :data="topGames"
                                  :columns="topGamesColumns"
                                  :pagination.sync="topGamesPaginationGrid"
                                  row-key="id"
                                >
                                  <template v-slot:item="props">
                                    <q-card bordered dark class="q-ma-sm tileBGColor" style="max-width: 300px; min-width: 300px">
                                      <div class="q-ma-sm" v-for="col in props.cols" :key="col.id">
                                        <div v-if="col.label === 'Box Shot'">
                                          <q-img :src='col.value' basic />
                                        </div>
                                        <div v-if="col.label === 'Game Name'">
                                          <div class="text-h6">
                                            {{col.value}}
                                          </div>
                                        </div>
                                        <div v-if="col.label === '# of Viewers'">
                                          <div class="row text-h8">
                                            <div class="column col-4">Viewers:</div>
                                            <div class="column">{{col.value}}</div>
                                          </div>
                                        </div>
                                        <div v-if="col.label === '# of Channels'">
                                          <div class="row text-h8">
                                            <div class="column col-4">Channels:</div>
                                            <div class="column">{{col.value}}</div>
                                          </div>
                                        </div>
                                      </div>
                                    </q-card>
                                  </template>
                                </q-table>
                              </div>
      

      Cheers,
      Michael

      posted in Help
      mboeni
      mboeni
    • [Solved] Should images work in grid-mode tables?

      Hi all

      I show images in a table which works fine in the normal table mode. If I set the grid mode though, the URL is displayed instead of the image. Here’s the code:

      <div v-if="topGamesGrid === false">
                                <q-table
                                  dark
                                  bordered
                                  color="accent"
                                  card-class="bg-primary"
                                  :style="{ color: localTextColor1 }"
                                  title="Top Games"
                                  :data="topGames"
                                  :columns="topGamesColumns"
                                  :pagination.sync="topGamesPagination"
                                  row-key="id"
                                >
                                  <template v-slot:body-cell-boxShot="boxShot">
                                    <q-td :props="boxShot">
                                      <div>
                                        <q-img :src='boxShot.value' basic />
                                      </div>
                                    </q-td>
                                  </template>
                                </q-table>
                              </div>
                              <div v-else>
                                <q-table
                                  grid
                                  dark
                                  bordered
                                  color="accent"
                                  card-class="bg-primary"
                                  :style="{ color: localTextColor1 }"
                                  title="Top Games"
                                  :data="topGames"
                                  :columns="topGamesColumns"
                                  :pagination.sync="topGamesPagination"
                                  row-key="id"
                                >
                                  <template v-slot:body-cell-boxShot="boxShot">
                                    <q-td :props="boxShot">
                                      <div>
                                        <q-img :src='boxShot.value' basic />
                                      </div>
                                    </q-td>
                                  </template>
                                </q-table>
                              </div>
      

      Any ideas why that is?

      Cheers,
      Michael

      posted in Help
      mboeni
      mboeni
    • RE: Q-card "on-hover"

      The code still does this:

                   <div v-if="infoBlock.channelUrl !== '' ">
                      <q-card-section class="q-ma-xs infoBlock">
                      <q-img
                        :src='infoBlock.image'
                        basic
                        @click='imgClicked(infoBlock.channelUrl)'
                      >
                      </q-img>
                      </q-card-section>
                    </div>
                    <div v-else>
                      <q-card-section class="q-ma-xs" >
                      <q-img
                        :src='infoBlock.image'
                        basic
                        @click='imgClicked(infoBlock.channelUrl)'
                      >
                      </q-img>
                      </q-card-section>
                    </div>
      

      I’m doing it on the card section that wraps the image…

      posted in Help
      mboeni
      mboeni
    • RE: Q-card "on-hover"

      @metalsadman Interesting…although this gives me a different effect:

      b7e80f79-6dd2-4c42-ac9b-88dbe6a25147-image.png

      Now the image is included in the highlighting…:o

      posted in Help
      mboeni
      mboeni
    • RE: Q-card "on-hover"

      @metalsadman yep, that’s what I did…see code below 🙂

      posted in Help
      mboeni
      mboeni
    • RE: Q-card "on-hover"

      @metalsadman Thanks for the tip.

      I found a way which kinda also works for me:

                  <div v-if="infoBlock.channelUrl !== '' ">
                      <q-card-section class="q-ma-xs infoBlock">
                      <q-img
                        :src='infoBlock.image'
                        basic
                        @click='imgClicked(infoBlock.channelUrl)'
                      >
                      </q-img>
                      </q-card-section>
                    </div>
                    <div v-else>
                      <q-card-section class="q-ma-xs" >
                      <q-img
                        :src='infoBlock.image'
                        basic
                        @click='imgClicked(infoBlock.channelUrl)'
                      >
                      </q-img>
                      </q-card-section>
                    </div>
      

      and this on the scss side:

      .infoBlock {
          background-color:(var(--q-color-primary))
      }
      .infoBlock:hover {
        background-color:(var(--q-color-accent))
      }
      

      Although I don’t like the duplicated code…

      I’ll give @mouseover a shot too.

      Cheers,
      Michael

      PS: This is the result:

      b255356a-e100-48fa-a235-0fe7c8abbb3d-image.png

      posted in Help
      mboeni
      mboeni