Merge pull request #840 from alpheios-project/i836-update-menu

Update main menu
alpheios-project · Jun 27, 2022 · 8eb49f1 · 8eb49f1
2 parents 486ffee + b6fd010
commit 8eb49f1
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 26 deletions.
diff --git a/src/vue/alignments-list.vue b/src/vue/alignments-list.vue
@@ -12,15 +12,15 @@
           <td class="alpheios-alignment-editor-alignments-table_link" @click="uploadAlignmentFromDB(alData)">
             {{ formatHasTokens(alData.hasTokens) }}
           </td>
-          <td class="alpheios-alignment-editor-alignments-table_delete-icon">
+          <td class="alpheios-alignment-editor-alignments-table_delete-icon" v-if="!menuVersion">
             <span :id="removeId(alData)" class="alpheios-alignment-editor-alignments-table_delete-icon_span" @click="deleteAlignmentFromDB(alData)">
               <delete-icon />
             </span>
           </td>
         </tr>
     </table>
 
-    <p class="alpheios-alignment-editor-alignments-clear-all" v-if="alignments.length > 0">
+    <p class="alpheios-alignment-editor-alignments-clear-all" v-if="!menuVersion && alignments.length > 0">
       <button class="alpheios-editor-button-tertiary alpheios-actions-menu-button" @click="clearAllAlignments">Clear Alignments</button>
     </p>
   </div>
@@ -35,6 +35,11 @@ export default {
     deleteIcon: DeleteIcon
   },
   props: {
+    menuVersion: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
   },
   data () {
     return {

diff --git a/src/vue/app.vue b/src/vue/app.vue
@@ -12,6 +12,7 @@
         @add-target = "addTarget"
         @clear-all = "startOver"
         @new-initial-alignment = "startNewInitialAlignment"
+        @upload-data-from-db = "uploadDataFromDB"
 
         @showOptions = "showOptions"
         @showSourceTextEditor = "showSourceTextEditor"

diff --git a/src/vue/main-menu.vue b/src/vue/main-menu.vue
@@ -5,21 +5,12 @@
         <x-close-icon />
       </span>
       <div class="alpheios-alignment-app-menu__buttons">
-        <div class="alpheios-alignment-app-menu__buttons-blocks">
-          <button class="alpheios-app-menu-link" id ="alpheios-main-menu-source-editor" :class="{ 'alpheios-app-menu-link-current': currentPage === 'text-editor-page' }"
-                  @click="showSourceTextEditor" >
-                  {{ l10n.getMsgS('MAIN_MENU_TEXT_ENTER_LINK') }}
-          </button>
-          <button class="alpheios-app-menu-link" id ="alpheios-main-menu-alignment-groups-editor" :class="{ 'alpheios-app-menu-link-current': currentPage === 'align-editor-page' }"
-                  @click="showAlignmentGroupsEditor" :disabled="!alignEditAvailable">
-                  {{ l10n.getMsgS('MAIN_MENU_TEXT_ALIGN_LINK') }}
-          </button>
-          <button class="alpheios-app-menu-link" id ="alpheios-main-menu-tokens-editor" :class="{ 'alpheios-app-menu-link-current': currentPage === 'tokens-editor-page' }"
-                  @click="showTokensEditor" :disabled="!tokensEditAvailable">
-                  {{ l10n.getMsgS('MAIN_MENU_TEXT_EDIT_LINK') }}
-          </button>
-        </div>
         <div class="alpheios-alignment-app-menu__buttons-actions">
+
+          <button class="alpheios-app-menu-link" id ="alpheios-main-menu-clear-all" 
+                  @click="clearAll">
+                  {{ l10n.getMsgS('INITIAL_NEW_ALIGNMENT') }}
+          </button>
 
           <button class="alpheios-app-menu-link" id ="alpheios-main-menu-upload" 
                   @click="uploadTexts"  >
@@ -33,12 +24,15 @@
                 {{ l10n.getMsgS('MAIN_MENU_CHOOSE_FILE') }}                
               </label>
             </span>
+            <span> OR upload autosaved</span>
+          </div>
+
+          <div class="alpheios-alignment-editor-initial-screen__alignments-container" v-show="showUploadBlock" v-if="indexedDBAvailable">
+              <alignments-list 
+                  :menuVersion = "true"
+                  @upload-data-from-db="uploadDataFromDB"
+              />
           </div>
-
-          <button class="alpheios-app-menu-link" id ="alpheios-main-menu-clear-all" 
-                  @click="clearAll">
-                  {{ l10n.getMsgS('INITIAL_NEW_ALIGNMENT') }}
-          </button>
         </div>
       </div>
     </div> <!--alpheios-alignment-app-menu-->
@@ -55,13 +49,16 @@ import UploadIcon from '@/inline-icons/upload.svg'
 import XCloseIcon from '@/inline-icons/x-close.svg'
 import Tooltip from '@/vue/common/tooltip.vue'
 
+import AlignmentsList from '@/vue/alignments-list.vue'
+
 export default {
   name: 'MainMenu',
   components: {
     downloadIcon: DownloadIcon,
     uploadIcon: UploadIcon,
     xCloseIcon: XCloseIcon,
-    tooltip: Tooltip
+    tooltip: Tooltip, 
+    alignmentsList: AlignmentsList
   },
   props: {
     menuShow: {
@@ -129,6 +126,9 @@ export default {
     },
     tokensEditAvailable () {
       return this.alignEditAvailable && this.enableTokensEditorOptionItemValue
+    },
+    indexedDBAvailable () {
+      return this.$textC.indexedDBAvailable
     }
   },
   methods: {
@@ -244,18 +244,24 @@ export default {
       this.$emit('showTokensEditor')
       this.currentPage = 'tokens-editor-page'
       this.closeMenu()
+    },
+
+    uploadDataFromDB (alData) {
+      this.$emit('upload-data-from-db', alData)
+      this.showUploadBlock = false
+      this.closeMenu()
     }
   }
 }
 </script>
 <style lang="scss">
   .alpheios-alignment-app-menu {
       height: 100%; 
-      width: 250px; 
+      width: 400px; 
       position: fixed; 
       z-index: 10000;
       top: 0; 
-      left: -250px;
+      left: -400px;
       background-color: #e0e0e0; 
       overflow-x: hidden; 
        
@@ -297,7 +303,7 @@ export default {
 
     padding: 10px 0;
     border-top: 2px solid #ddd;
-    border-bottom: 2px solid #ddd;
+    // border-bottom: 2px solid #ddd;
   }
 
   .alpheios-main-menu-upload-block-radio-block_item,
@@ -306,6 +312,8 @@ export default {
   }
 
   .alpheios-main-menu-upload-block_item {
+    text-align: center;
+
     &.alpheios-token-edit-actions-button {
       width: 30px;
       height: 30px;

diff --git a/src/vue/text-editor/text-editor-single-block.vue b/src/vue/text-editor/text-editor-single-block.vue
@@ -414,7 +414,9 @@ export default {
      */
     async restartTextEditor () {
       this.text = ''
-      this.$refs[this.fileUploadRef].value = ''
+      if (this.$refs[this.fileUploadRef]) {
+        this.$refs[this.fileUploadRef].value = ''
+      }
       this.uploadFile = ''
       this.prepareDefaultTextEditorOptions()