diff --git a/src/js/control-view.js b/src/js/control-view.js index 7aa3a58..31b3f8d 100644 --- a/src/js/control-view.js +++ b/src/js/control-view.js @@ -57,6 +57,7 @@ module.exports = { selected_items_to_delete: [], search_query: "", filtered_files: [], + selected_folder_index: null, }; }, @@ -296,6 +297,7 @@ module.exports = { }, populateFiles(index) { + this.selected_folder_index = index; this.filtered_files = this.state.gcode_list[index].files.map(item => item.file_name); }, diff --git a/src/pug/templates/control-view.pug b/src/pug/templates/control-view.pug index 7e6cf45..512bf5f 100644 --- a/src/pug/templates/control-view.pug +++ b/src/pug/templates/control-view.pug @@ -323,16 +323,17 @@ script#control-view-template(type="text/x-template") message.error-message(:show.sync="deleteGCode") h3(slot="header") Select files to delete: div(slot="body") - input.search-bar(type="text" v-model="search_query" placeholder="Search Files...") + input.search-bar(type="text", v-model="search_query", placeholder="Search Files...") .container .folders h3 Folders - div(v-for="(index, folder) in state.gcode_list" :key="index" @click="populateFiles(index)" class="folder-item") {{ folder.name }} + div(v-for="(index, folder) in state.gcode_list", :key="index", @click="populateFiles(index)", + class="folder-item", :class="{ selected: index === selected_folder_index }") {{ folder.name }} .files h3 Files label.file-item(v-for="item in gcode_filtered_files" :key="item") input(type="checkbox" :value="item" v-model="selected_items_to_delete") - | {{ item }} + | {{ item }} div(slot="footer") button.pure-button(@click="cancel_delete",style="height:50px") Cancel //- button.pure-button.button-error(@click="delete_all_except_macros") diff --git a/src/stylus/style.styl b/src/stylus/style.styl index 0acebab..453f615 100644 --- a/src/stylus/style.styl +++ b/src/stylus/style.styl @@ -292,12 +292,6 @@ span.unit .drop-down-container height 50px - .gcode_container - display grid - overflow-y scroll - max-height 400px - margin-bottom 10px - .container display flex width 100% @@ -319,6 +313,10 @@ span.unit .search-bar margin-bottom 10px width 50% + + .folder-item.selected + font-weight bold + background-color #add1ad table border-collapse collapse