Merge pull request #300 from AEtheve/add-clear-history-button

Add clear history button

Author: divamgupta

electron_app/src/assets/css/theme.css

@@ -132,6 +132,12 @@
         height: 15px;
         margin: 10px 0px;
     }
+    .v-toast__item--default {
+        background-color: #ffffff;
+    }
+    .v-toast__item .v-toast__icon {
+        background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45.999 45.999'%3e %3cpath fill='%23AAA' d='M39.264 6.736c-8.982-8.981-23.545-8.982-32.528 0-8.982 8.982-8.981 23.545 0 32.528 8.982 8.98 23.545 8.981 32.528 0 8.981-8.983 8.98-23.545 0-32.528zM25.999 33a3 3 0 11-6 0V21a3 3 0 116 0v12zm-3.053-17.128c-1.728 0-2.88-1.224-2.844-2.735-.036-1.584 1.116-2.771 2.879-2.771 1.764 0 2.88 1.188 2.917 2.771-.001 1.511-1.152 2.735-2.952 2.735z'/%3e %3c/svg%3e") no-repeat;
+    }
 }
 
 @media (prefers-color-scheme: dark) {

electron_app/src/components/History.vue

@@ -3,6 +3,7 @@
     <div  class="animatable_content_box ">
 
         <b-form-input
+            @input="currentPage=1"
             onkeypress="return event.keyCode != 13;"
             size="sm"
             placeholder="Search by prompt text"
@@ -16,8 +17,19 @@
         <div @click="toggle_order()" style="float:right; margin-bottom: 20px;" class="l_button">
           {{this.app_state.show_history_in_oldest_first ? "Oldest": "Newest"}} First
         </div>
+        <div @click="clear_history()" style="float:right; margin-bottom: 20px;" class="l_button">
+          Clear History
+        </div>
         <div v-if="Object.values(app_state.app_data.history).length > 0">
-            <div v-for="history_box in get_history()" :key="history_box.key" style="clear: both;">
+                <div v-if="get_history().length > 30">
+                    <b-pagination
+                        v-model="currentPage"
+                        :total-rows="get_history().length"
+                        :per-page="30"
+                    />
+                </div>
+                <div v-for="history_box in get_history().slice((currentPage - 1) * 30, currentPage * 30)" :key="history_box.key" style="clear: both;">
+
 
                 <div @click="delete_hist(history_box.key)" style="float:right; margin-top: 10px;"  class="l_button">Delete</div>
                 <!-- <div @click="share_on_arthub(history_box)" style="float:right; margin-top: 10px;"  class="l_button">Share</div> -->
@@ -65,6 +77,7 @@
 </template>
 <script>
 import ImageItem from '../components/ImageItem.vue'
+import {native_confirm} from "../native_functions_vue_bridge.js";
 import {share_on_arthub} from '../utils.js'
 
 import Vue from 'vue'
@@ -83,7 +96,8 @@ export default {
     },
     data() {
         return {
-            searchText: ''
+            searchText: '',
+            currentPage: 1,
         };
     },
     methods: {
@@ -95,7 +109,6 @@ export default {
           let history = Object.values(this.app_state.app_data.history);
           const that = this;
           const list = this.app_state.show_history_in_oldest_first ? history : history.reverse();
-
           if (that.searchText.trim() === '') {
             return list;
           }
@@ -104,7 +117,7 @@ export default {
             keys: ['prompt'],
             useExtendedSearch: true,
           });
-          
+
           return fuse.search(that.searchText).map(r => r.item);
 
         },
@@ -132,6 +145,12 @@ export default {
             return r;
         },
 
+         clear_history(){
+            if (native_confirm("Are you sure you want to clear history?")){
+                Vue.set( this.app_state.app_data, "history", {});
+            }
+        },
+
         share_on_arthub(box){
             this.app_state.global_loader_modal_msg = "Uploading";
             let params = this.get_box_params_dict(box);
@@ -147,6 +166,24 @@ export default {
 }
 </script>
 <style>
+.page-item .page-link{
+    outline: none !important;
+   box-shadow: none;
+}
+.page-item .page-link{
+    font-size: 13px;
+}
+@media (prefers-color-scheme: dark) {
+    .page-item .page-link, .page-item.disabled .page-link{
+        background-color:#303030;
+        border-color: #303030;
+        color:rgba(255, 255, 255, 0.5);
+    }
+    .page-item.active .page-link{
+        background-color:#606060;
+        border-color: #606060;
+    }
+}
 </style>
 <style scoped>
 .history_box_info {

electron_app/src/components_bare/SDOptionsDropdown.vue

@@ -303,6 +303,15 @@ export default {
 }
 </script>
 <style scoped>
+.b-dropdown ::-webkit-scrollbar {
+    appearance: none;
+    width: 7px;
+}
+.b-dropdown ::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: rgba(0, 0, 0, .5);
+    box-shadow: 0 0 1px rgba(255, 255, 255, .5);
+}
 .options_title {
     display: flex;
     flex-direction: row;