Add marvin js modal

app/assets/javascripts/sitewide/marvinjs_editor.js

@@ -0,0 +1,17 @@
+var MarvinJsEditor = (function() {
+
+  var marvinJsModal = $('#MarvinJsModal');
+  var marvinJsContainer = $('#marvinjs-editor');
+  var marvinJsObject = $('#marvinjs-sketch');
+
+  return Object.freeze({
+    open: function() {
+      $(marvinJsModal).modal('show');
+      $(marvinJsObject)
+        .css('width', marvinJsContainer.width() + 'px')
+        .css('height', marvinJsContainer.height() + 'px')
+
+    }
+  });
+});
+MarvinJsEditor();

app/assets/stylesheets/marvinjs.scss

@@ -0,0 +1,70 @@
+@import "constants";
+@import "mixins";
+
+// MarvinJs modal
+.modal-marvin-js {
+  background: transparent;
+  font-size: $font-size-large;
+  padding: 0 !important;
+
+  .preview-close {
+    background: transparent;
+    border: 0;
+    color: $color-white;
+    display: inline-block;
+    float: right;
+  }
+
+  .modal-dialog {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    width: auto;
+  }
+
+  .modal-content {
+    background: transparent;
+    border: 0;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    color: $color-white;
+    height: 100%;
+    width: auto;
+  }
+
+  .modal-header {
+    background: $color-black;
+    border: 0;
+    height: 60px;
+    text-align: center;
+
+    .file-name {
+      float: left;
+    }
+  }
+
+  .modal-body {
+    height: calc(100% - 60px);
+    padding: 0;
+
+    #marvinjs-editor {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      position: relative;
+
+      #marvinjs-sketch {
+        overflow: hidden;
+        min-width: 500px;
+        min-height: 450px;
+      }
+    }
+  }
+
+  .file-save-link {
+    color: $color-white;
+    display: inline-block;
+    float: right;
+    margin-right: 20px;
+  }
+}

app/views/assets/marvinjs/_create_marvin_sketch_button.html.erb

@@ -0,0 +1,4 @@
+<span class="btn btn-default new-marvinjs-upload-button">
+  <span class="fas fa-file-invoice new-marvinjs-upload-icon"></span>
+  New chemical drawing
+</span>

app/views/layouts/application.html.erb

@@ -44,6 +44,7 @@
     <%= render "shared/about_modal" %>
     <%= render "shared/file_preview_modal.html.erb" %>
     <%= render "shared/file_edit_modal.html.erb" %>
+    <%= render "shared/marvinjs_modal.html.erb" %>
     <%= render "shared/navigation" %>
     
     <% if user_signed_in? && flash[:system_notification_modal] && current_user.show_login_system_notification? %>

app/views/shared/_marvinjs_modal.html.erb

@@ -0,0 +1,26 @@
+<div id="MarvinJsModal"
+     class="modal modal-marvin-js"
+     role="dialog"
+     aria-labelledby="marvinJsModal"
+     aria-hidden="true"
+     data-backdrop="static"
+     data-keyboard="false">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="preview-close" data-dismiss="modal"><span class="fas fa-times"></span></button>
+        <span class="file-name"></span>
+        <a class="file-save-link" href='#'>
+          <p><span class="fas fa-save"></span> <%= t('SaveClose')%></p>
+        </a>
+      </div>
+      <div class="modal-body">
+        <div id="marvinjs-editor">
+          <iframe id="marvinjs-sketch" src="https://marvinjs-demo.chemaxon.com/latest/editor.html" 
+  style="overflow: hidden; min-width: 500px; min-height: 450px"  ></iframe>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<%= javascript_include_tag("sitewide/marvinjs_editor") %>

app/views/steps/attachments/_list.html.erb

@@ -10,6 +10,8 @@
   </div>
   <div class="col-md-8">
     <div class="attachemnts-header pull-right">
+      <%= render partial: '/assets/marvinjs/create_marvin_sketch_button.html.erb',
+                 locals: {  element_id: step.id, element_type: 'Step' } %>
       <%= render partial: '/assets/wopi/create_wopi_file_button.html.erb',
                  locals: {  element_id: step.id, element_type: 'Step' } %>
       <div class="dropdown attachments-order" id="dd-att-step-<%= step.id %>">

config/initializers/assets.rb

@@ -67,6 +67,7 @@ Rails.application.config.assets.precompile +=
 Rails.application.config.assets.precompile += %w(datatables.js)
 Rails.application.config.assets.precompile += %w(search/index.js)
 Rails.application.config.assets.precompile += %w(global_activities/side_pane.js)
+Rails.application.config.assets.precompile += %w( sitewide/marvinjs_editor.js )
 Rails.application.config.assets.precompile += %w(navigation.js)
 Rails.application.config.assets.precompile += %w(secondary_navigation.js)
 Rails.application.config.assets.precompile += %w(datatables.css)