- (Part 2 - Upgrade Components Quasar)

This commit is contained in:
Paolo Arena
2019-03-13 01:53:53 +01:00
parent 74ecc4f278
commit 67748ce94f
20 changed files with 570 additions and 526 deletions

View File

@@ -1,6 +1,6 @@
<template>
<div>
<q-list link separator no-border class="todo-menu">
<q-list separator no-border class="todo-menu">
<div v-for="field in menuPopupTodo" :key="field.value">
<q-item clickable v-ripple v-if="(field.value !== 130) && (field.value !== 100)" :icon="field.icon"
@click.native="clickMenu(field.value)">
@@ -8,56 +8,31 @@
<q-icon :name="field.icon"/>
</q-item-section>
<q-item-section v-if="field.value !== 120" label class="item-menu">{{field.label}}</q-item-section>
<q-item-section v-if="field.value !== 120" label class="item-menu">
<q-item-label>{{field.label}}</q-item-label>
</q-item-section>
<q-item-section side top v-if="field.value === 101">
<q-checkbox v-model="itemtodo.enableExpiring"/>
</q-item-section>
<q-item-section v-if="field.value === 110">
<q-item-section side v-if="field.value === 110">
<q-checkbox v-model="itemtodo.completed"/>
</q-item-section>
<!--<q-item tag="label" v-ripple>-->
<!--<q-item-section side top>-->
<!--<q-checkbox v-model="check1" />-->
<!--</q-item-section>-->
<!--<q-item-section>-->
<!--<q-item-label>Notifications</q-item-label>-->
<!--<q-item-label caption>-->
<!--Notify me about updates to apps or games that I downloaded-->
<!--</q-item-label>-->
<!--</q-item-section>-->
<!--</q-item>-->
<!--<q-item tag="label" v-ripple>-->
<!--<q-item-section side top>-->
<!--<q-checkbox v-model="check2" />-->
<!--</q-item-section>-->
<!--<q-item-section>-->
<!--<q-item-label>Sound</q-item-label>-->
<!--<q-item-label caption>-->
<!--Auto-update apps at anytime. Data charges may apply-->
<!--</q-item-label>-->
<!--</q-item-section>-->
<!--</q-item>-->
<q-item-section v-if="field.value === 120">
<q-slider :class="$parent.menuProgress" v-model="itemtodo.progress" :min="0" :max="100"
:step="5"/>
<q-slider label
:class="$parent.menuProgress"
v-model="itemtodo.progress"
:min="0"
:max="100"
:step="5" @change="val => { lazy = val }"
/>
</q-item-section>
<q-item-section v-if="field.value === 120">
<q-item-section side v-if="field.value === 120">
<div>
<q-input v-model="itemtodo.progress"
class="menuInputProgress"
type="number"
suffix="%"
@change="val => { model = val }"
@keydown="KeychangeProgress"
/>
<q-item-label style="color: blue">{{itemtodo.progress}} %</q-item-label>
</div>
</q-item-section>
</q-item>
@@ -70,30 +45,38 @@
{{field.label}}
</q-item-section>
</q-item>
<q-item clickable v-if="(field.value === 130)" :icon="field.icon"
@click.native="clickMenu(field.value)">
<q-item clickable v-if="(field.value === 130)">
<q-item-section avatar>
<q-icon :name="$parent.iconPriority" inverted color="primary"/>
<q-icon name="priority_high" inverted color="primary"/>
</q-item-section>
<q-item-section>
<q-btn-dropdown ref="dropdown_priority" flat :label="field.label"
>
<q-list bordered>
<q-item clickable v-ripple v-for="field in selectPriority" :key="field.value"
@click.native="setPriority(field.value)">
<q-item-section avatar>
<q-icon :name="field.icon" inverted color="primary"/>
</q-item-section>
<q-item-section>
{{field.label}}
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
<q-item-section>{{field.label}}</q-item-section>
<q-item-section side>
<q-icon name="keyboard_arrow_right"/>
</q-item-section>
<q-menu auto-close anchor="bottom middle" self="top middle">
<q-list dense>
<q-item side clickable :icon="field.icon"
@click="clickMenu(field.value)">
<q-item-section>
<q-list dense>
<q-item clickable v-ripple v-for="fieldprior in selectPriority"
:key="fieldprior.value"
@click="setPriority(fieldprior.value)">
<q-item-section avatar>
<q-icon :name="fieldprior.icon" inverted color="primary"/>
</q-item-section>
<q-item-section>
{{fieldprior.label}}
</q-item-section>
</q-item>
</q-list>
</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-item>
</div>
</q-list>