surya/freeplanet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- (Part 2 - Upgrade Components Quasar)

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/todos/SubMenus/SubMenus.scss
View File

@@ -11,7 +11,8 @@
cursor: pointer;
}
.menuInputProgress > div:nth-child(2) > div > input {
.menuInputProgress > div > div > div > input {
min-width: 30px;
max-width: 30px;
width: 30px;
}

16
src/components/todos/SubMenus/SubMenus.ts
View File

@@ -1,9 +1,9 @@
import Vue from 'vue'
import { Component, Prop } from 'vue-property-decorator'
import { ITodo } from '../../../model/index'
import { tools } from '@src/store/Modules/tools'
import { UserStore } from '@store'
import { ITodo } from '../../../model/index'
// Doesn't exist in quasar this ? error TS2305
// import { format } from 'quasar'
@@ -18,19 +18,19 @@ import { UserStore } from '@store'
export default class SubMenus extends Vue {
public selectPriority: [] = tools.selectPriority[UserStore.state.lang]
@Prop({ required: false }) menuPopupTodo: any[]
@Prop({ required: false }) itemtodo: ITodo
$q: any
@Prop({ required: false }) public menuPopupTodo: any[]
@Prop({ required: false }) public itemtodo: ITodo
public $q: any
clickMenu (field) {
public clickMenu(field) {
this.$emit('clickMenu', field)
}
setPriority (field) {
public setPriority(field) {
this.$emit('setPriority', field)
}
KeychangeProgress (e) {
public KeychangeProgress(e) {
// between(50, 10, 20)
if (this.itemtodo.progress > 100) {
@@ -46,7 +46,7 @@ export default class SubMenus extends Vue {
}
}
create () {
public create() {
this.selectPriority = tools.selectPriority[UserStore.state.lang]
console.log('CREAZIONE')

99
src/components/todos/SubMenus/SubMenus.vue
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>