Преглед изворни кода

В PageScroller добавлены кнопки "в начало", "в конец"

Book Pauk пре 2 година
родитељ
комит
567d0bc28e

+ 1 - 1
client/components/Search/PageScroller/PageScroller.vue

@@ -6,7 +6,7 @@
         <div class="bg-white">
         <div class="bg-white">
             <NumInput 
             <NumInput 
                 v-model="page" :min="1" :max="pageCount"
                 v-model="page" :min="1" :max="pageCount"
-                style="width: 140px" minus-icon="la la-chevron-circle-left" plus-icon="la la-chevron-circle-right" :disable="disable"
+                style="width: 200px" minus-icon="la la-chevron-circle-left" plus-icon="la la-chevron-circle-right" :disable="disable" mm-buttons
             />
             />
         </div>
         </div>
         <div class="q-ml-xs">
         <div class="q-ml-xs">

+ 0 - 4
client/components/Search/Search.vue

@@ -318,10 +318,6 @@ class Search {
     created() {
     created() {
         this.commit = this.$store.commit;
         this.commit = this.$store.commit;
 
 
-        /*this.refresh = _.debounce(() => {
-            this.refreshDebounced();
-        }, 1000);*/
-
         this.loadSettings();
         this.loadSettings();
     }
     }
 
 

+ 33 - 1
client/components/share/NumInput.vue

@@ -9,6 +9,16 @@
     >
     >
         <slot></slot>
         <slot></slot>
         <template #prepend>
         <template #prepend>
+            <q-icon
+                v-show="mmButtons"
+                style="font-size: 100%"
+                v-ripple="modelValue != min" 
+                :class="(modelValue != min ? '' : 'disable')" 
+                name="la la-angle-double-left" 
+                class="button" 
+                @click="toMin"
+            />
+
             <q-icon
             <q-icon
                 v-ripple="validate(modelValue - step)" 
                 v-ripple="validate(modelValue - step)" 
                 :class="(validate(modelValue - step) ? '' : 'disable')" 
                 :class="(validate(modelValue - step) ? '' : 'disable')" 
@@ -37,6 +47,17 @@
                 @touchend.stop="onTouchEnd"
                 @touchend.stop="onTouchEnd"
                 @touchcancel.prevent.stop="onTouchEnd"
                 @touchcancel.prevent.stop="onTouchEnd"
             />
             />
+
+            <q-icon
+                v-show="mmButtons"
+                style="font-size: 100%"
+                v-ripple="modelValue != max" 
+                :class="(modelValue != max ? '' : 'disable')" 
+                name="la la-angle-double-right" 
+                class="button" 
+                @click="toMax"
+            />
+
         </template>
         </template>
     </q-input>
     </q-input>
 </template>
 </template>
@@ -74,6 +95,7 @@ class NumInput {
         disable: Boolean,
         disable: Boolean,
         minusIcon: {type: String, default: 'la la-minus-circle'},
         minusIcon: {type: String, default: 'la la-minus-circle'},
         plusIcon: {type: String, default: 'la la-plus-circle'},
         plusIcon: {type: String, default: 'la la-plus-circle'},
+        mmButtons: Boolean,
     };
     };
 
 
     filteredValue = 0;
     filteredValue = 0;
@@ -188,6 +210,14 @@ class NumInput {
         this.inTouch = false;
         this.inTouch = false;
         this.onMouseUp();
         this.onMouseUp();
     }
     }
+
+    toMin() {
+        this.filteredValue = this.min;
+    }
+
+    toMax() {
+        this.filteredValue = this.max;
+    }
 }
 }
 
 
 export default vueComponent(NumInput);
 export default vueComponent(NumInput);
@@ -202,7 +232,9 @@ export default vueComponent(NumInput);
 
 
 .button {
 .button {
     font-size: 130%;
     font-size: 130%;
-    border-radius: 20px;
+    border-radius: 15px;
+    width: 30px;
+    height: 30px;
     color: #bbb;
     color: #bbb;
     cursor: pointer;
     cursor: pointer;
 }
 }