Preview Open locally menu fixes [SCI-9795]

app/javascript/vue/shared/content/attachments/context_menu.vue

@@ -69,9 +69,7 @@
 
 <script>
 import deleteAttachmentModal from './delete_modal.vue';
-import editLaunchingApplicationModal from './edit_launching_application_modal.vue';
 import moveAssetModal from '../modal/move.vue';
-import NoPredefinedAppModal from '../modal/no_predefined_app_modal.vue';
 import MoveMixin from './mixins/move.js';
 import OpenLocallyMixin from './mixins/open_locally.js';
 import MenuDropdown from '../../menu_dropdown.vue';
@@ -81,9 +79,7 @@ export default {
   components: {
     deleteAttachmentModal,
     moveAssetModal,
-    MenuDropdown,
-    NoPredefinedAppModal,
-    editLaunchingApplicationModal
+    MenuDropdown
   },
   mixins: [MoveMixin, OpenLocallyMixin],
   props: {
@@ -96,9 +92,7 @@ export default {
   data() {
     return {
       viewModeOptions: ['inline', 'thumbnail', 'list'],
-      deleteModal: false,
-      editAppModal: false,
-      showNoPredefinedAppModal: false
+      deleteModal: false
     };
   },
   computed: {

app/javascript/vue/shared/content/attachments/mixins/open_locally.js

@@ -1,12 +1,20 @@
 import axios from '../../../../../packs/custom_axios.js';
+import editLaunchingApplicationModal from '../../modal/edit_launching_application_modal.vue';
+import NoPredefinedAppModal from '../../modal/no_predefined_app_modal.vue';
 
 export default {
   data() {
     return {
       localAppName: null,
-      scinoteEditRunning: false
+      scinoteEditRunning: false,
+      showNoPredefinedAppModal: false,
+      editAppModal: false
     };
   },
+  components: {
+    editLaunchingApplicationModal,
+    NoPredefinedAppModal
+  },
   computed: {
     canOpenLocally() {
       return this.scinoteEditRunning &&

app/javascript/vue/shared/content/attachments/open_locally_menu.vue

@@ -12,17 +12,31 @@
           v-if="this.menu.length > 1"
           class="ml-auto"
           :listItems="this.menu"
-          :btnClasses="`btn btn-light icon-btn !bg-sn-white`"
+          :btnClasses="`btn btn-light icon-btn`"
           :position="'right'"
           :btnText="i18n.t('attachments.open_in')"
           :caret="true"
           @openLocally="openLocally"
           @openImageEditor="openImageEditor"
         ></MenuDropdown>
-        <a v-else-if="this.menu.length === 1" class="btn btn-light !bg-sn-white" :href="this.menu[0].url" :target="this.menu[0].target" @click="this[this.menu[0].emit]()">
+        <a v-else-if="this.menu.length === 1" class="btn btn-light" :href="this.menu[0].url" :target="this.menu[0].target" @click="this[this.menu[0].emit]()">
           {{ this.menu[0].text }}
         </a>
     </div>
+
+    <Teleport to="body">
+      <NoPredefinedAppModal
+        v-if="showNoPredefinedAppModal"
+        :fileName="attachment.attributes.file_name"
+        @confirm="showNoPredefinedAppModal = false"
+      />
+      <editLaunchingApplicationModal
+          v-if="editAppModal"
+          :fileName="attachment.attributes.file_name"
+          :application="this.localAppName"
+          @cancel="editAppModal = false"
+      />
+    </Teleport>
   </div>
 </template>
 
@@ -53,7 +67,7 @@ export default {
         });
       }
 
-      if (this.attachment.attributes.image_editable) {
+      if (this.attachment.attributes.image_editable && !this.canOpenLocally) {
         menu.push({
           text: this.i18n.t('assets.file_preview.edit_in_scinote'),
           emit: 'openImageEditor'

app/views/shared/file_preview/_content.html.erb

@@ -38,10 +38,10 @@
           <span class="sn-icon sn-icon-edit"></span>
           <%= t('assets.file_preview.edit_in_scinote') %>
         </button>
-        <div id="openLocallyMenu" data-behaviour="vue">
-          <open-locally-menu data="<%= AssetSerializer.new(asset, scope: { user: current_user }).to_json %>"/>
-        </div>
       <% end %>
+      <div id="openLocallyMenu" data-behaviour="vue">
+        <open-locally-menu data="<%= AssetSerializer.new(asset, scope: { user: current_user }).to_json %>"/>
+      </div>
     <% end %>
     <a class="btn btn-light file-download-link" href="<%= rails_blob_path(asset.file, disposition: 'attachment') %>" data-turbolinks="false">
       <span class="sn-icon sn-icon-export"></span> <%= t('Download')%>

config/locales/en.yml

@@ -399,6 +399,7 @@ en:
     sort_by: "SORT BY"
     attachments_view_mode: "ALL ATTACHMENTS VIEW SIZE"
     open_locally_in: "Open in %{application}"
+    open_in: "Open in"
     open_locally: "Open locally"
     new:
       description: 'New'