- todo: design: flexbox, dragging, icons, priority.

src/components/todos/SingleTodo/SingleTodo.scss

@@ -1,37 +1,115 @@
-.flex-container {
-  padding: 0;
-  margin: 0;
-  list-style: none;
+.flex-item{
+   background-color: #d5e2eb;
+  padding: 1px;
+  margin: 1px;
+  color: #000;
+  font-size: 0.85rem;
+  flex: 1 1 auto;
+}
 
-  -ms-box-orient: horizontal;
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -moz-flex;
-  display: -webkit-flex;
-  display: flex;
+.flex-container2 {
+  flex-flow: row nowrap;
+  justify-content: space-between;
+}
+
+.btn-item {
+  max-width: 24px;
 }
 
 
-#appsingletodo {
-  color: white;
-  font-size: 1.1rem;
-  display: flex;
-  margin: 2px;
-  padding: 3px;
-  border: 2px;
-  background-color: #9db6ff;
+.pos-item {
+  max-width: 24px;
+  min-width: 24px;
+  margin: 0 auto;
+  height: 36px;
+  line-height: 36px;
+  text-align: center;
+}
+
+.priority-item-popover {
+  max-width: 24px;
+  min-width: 24px;
+  padding: 0px;
+}
+
+.priority-item {
+  max-width: 24px;
+  min-width: 24px;
+}
+
+.completed-item {
+  max-width: 24px;
+  min-width: 24px;
+}
+
+.myexpired {
+  padding-top: 0px;
+  padding-bottom: 0px;
+  font-size: 12px;
+}
+
+.data-item {
+  max-width: 100px;
+  min-width: 100px;
+  display: block;
+  visibility: initial;
+}
+
+@media screen and (max-width: 600px) {
+  .data-item {
+    display: none;
+    visibility: hidden;
+    content: "";
+  }
+}
+
+
+.div_descr {
+  // background-color: green;
+  flex: 2 1 auto;
+}
+
+
+.appsingletodo {
+  color: black;
+  font-size: 1.0rem;
+  // display: flex;
+  margin: 1px;
+  padding: 2px;
+  border: 1px;
+  background-color: #e1ebed;
 }
 
 .mycols{
-  padding: 2px;
   margin: 1px;
-  border-color: #8a8484;
-  border-style: outset;
-  /* background-color: green; */
+  padding: 2px;
+  //width: 40px;
+  // border-color: #8a8484;
+  // border-style: outset;
+  margin: auto;
+  // flex-grow: 1;
+}
+
+
+
+.mycols:hover{
+
 }
 
 .mybtn{
   width: 18px;
   height: 18px;
 }
+
+.icon_completed {
+  position: relative;
+  transform: translateY(0%);
+}
+
+.mydescr{
+}
+
+
+.icon_completed:hover {
+  color: darkgreen;
+}

src/components/todos/SingleTodo/SingleTodo.ts

@@ -1,8 +1,6 @@
 import Vue from 'vue'
 import { Component, Prop, Watch } from 'vue-property-decorator'
 
-require('./SingleTodo.scss')
-
 import { rescodes } from '../../../store/Modules/rescodes'
 import { UserStore } from '@modules'
 
@@ -12,7 +10,12 @@ import { ITodo } from '../../../model/index'
   name: 'SingleTodo'
 })
 export default class SingleTodo extends Vue {
-  public selectPriority: []
+  public selectPriority: [] = []
+  public iconCompleted: string = ''
+  public iconPriority: string = ''
+  public popover: boolean = false
+  $q: any
+
   @Prop({required: true}) itemtodo: ITodo
 
   @Watch('itemtodo.completed') valueChanged() {
@@ -25,12 +28,52 @@ export default class SingleTodo extends Vue {
     this.$emit('eventupdate', this.itemtodo)
   }
 
+  setCompleted () {
+    // console.log('setCompleted')
+    this.itemtodo.completed = !this.itemtodo.completed
+
+    this.updateicon()
+
+    this.updatedata()
+  }
+
+  updatedata() {
+    this.$emit('eventupdate', this.itemtodo)
+  }
+
+  updateicon () {
+    if (this.itemtodo.completed)
+      this.iconCompleted = 'check_circle'
+    else
+      this.iconCompleted = 'check_circle_outline'
+
+
+    if (this.itemtodo.priority === rescodes.Todos.PRIORITY_HIGH)
+      this.iconPriority = 'expand_less'  // expand_less
+    else if (this.itemtodo.priority === rescodes.Todos.PRIORITY_NORMAL)
+      this.iconPriority = 'remove'
+    else if (this.itemtodo.priority === rescodes.Todos.PRIORITY_LOW)
+      this.iconPriority = 'expand_more'  // expand_more
+
+  }
+
   created() {
+    this.updateicon()
+
     this.selectPriority = rescodes.selectPriority[UserStore.state.lang]
+
   }
 
   remove(id) {
     this.$emit('event', id)
   }
 
+  setPriority (newpriority) {
+
+    this.itemtodo.priority = newpriority
+
+    this.updatedata()
+
+    // this.$q.notify('setPriority: ' + elem)
+  }
 }

src/components/todos/SingleTodo/SingleTodo.vue

@@ -1,30 +1,55 @@
 <template>
-    <div id="appsingletodo" class="flex-container">
+    <div class="row flex-container2">
+        <div class="flex-item pos-item">{{ itemtodo.pos }}ª</div>
+        <div class="flex-item priority-item">
+            <q-btn push
+                   class="priority-item-popover"
+                   :icon="iconPriority">
+                <q-popover
+                        v-model="popover"
+                        self="top left"
 
-        <div class="doc-container">
-            <div class="row">
-                <div class="flex-item mycols">P: {{ itemtodo.pos }}</div>
-                <q-checkbox class="flex-item mycols" v-model="itemtodo.completed" :label="itemtodo.descr" />
-                <div class="flex-item mycols">
-                <q-select
-                        v-model="itemtodo.priority"
-                        float-label=""
-                        radio
-                        :options="selectPriority"
-                />
-                </div>
-
-                <div class="flex-item mycols"><q-datetime
-                        v-model="itemtodo.expiring_at"/></div>
-                <div class="flex-item mycols">
-                    <q-btn class="mybtn" round color="" icon="delete" @click="remove(itemtodo.id)"></q-btn>
-                </div>
-
-            </div>
+                >
+                    <q-list link>
+                        <q-item v-for="field in selectPriority" :key="field.value"
+                                @click.native="setPriority(field.value), popover = false">
+                            <q-item-side :icon="field.icon" inverted color="primary"/>
+                            <q-item-main>
+                                <q-item-tile label>{{field.label}}</q-item-tile>
+                            </q-item-main>
+                        </q-item>
+                    </q-list>
+                </q-popover>
+            </q-btn>
+        </div>
+        <div class="flex-item completed-item">
+            <q-btn push
+                   class="priority-item-popover"
+                   :icon="iconCompleted"
+                   @click.native="setCompleted">
+            </q-btn>
+            <!--<q-icon class=" mycols allleft icon_completed ScheduleStatus" :name="iconCompleted"
+                    @click.native="setCompleted"/>-->
+        </div>
+        <div class="flex-item div_descr">
+            {{ itemtodo.descr }}
         </div>
 
+        <div class="flex-item data-item">
+            <q-datetime
+                    v-model="itemtodo.expiring_at"
+                    class="myexpired"/>
+        </div>
+        <div class="flex-item btn-item">
+            <q-btn class="mybtn" round color="" icon="delete" @click="remove(itemtodo.id)"></q-btn>
+        </div>
     </div>
+
 </template>
 
 <script lang="ts" src="./SingleTodo.ts">
 </script>
+
+<style lang="scss" scoped>
+    @import './SingleTodo.scss';
+</style>