Add context menu to attahcments

app/assets/javascripts/protocols/steps.js.erb

@@ -542,7 +542,7 @@
             expandStep($new_step);
             toggleButtons(true);
             SmartAnnotation.preventPropagation('.atwho-user-popover');
-
+            $new_step.find('.attachments').trigger('reorder');
             tinyMCE.editors.step_description_textarea.remove();
             MarvinJsEditor.initNewButton('.new-marvinjs-upload-button');
 
@@ -623,63 +623,7 @@
   global.initHandsOnTable = initHandsOnTable;
 })(window);
 
-
 (function() {
-  var StepInlineAttachments = (function() {
-    function elementVisible(element) {
-      var elementRect = element.getBoundingClientRect();
-      var elementHeight = $(element).height()
-      return elementRect.top + (elementHeight / 2) >= 0 &&
-             elementRect.bottom <= (window.innerHeight || document.documentElement.clientHeight) + (elementHeight / 2)
-    }
-
-    function showElement(element) {
-      setTimeout(() => {
-        var iframeUrl = $(element).find('.iframe-placeholder').data('iframe-url');
-        if (elementVisible(element) && iframeUrl) {
-          $(element).find('.iframe-placeholder')
-            .replaceWith(`<iframe class="active-iframe-preview" src="${iframeUrl}"></iframe>`);
-          $(element).addClass('active').attr('data-created-at', new Date().getTime());
-        }
-      },500)
-    }
-
-    function hideElement(element) {
-      var iframeUrl = $(element).find('.active-iframe-preview').attr('src');
-      if (!elementVisible(element) && iframeUrl) {
-        $(element).find('iframe')
-          .replaceWith(`<div class="iframe-placeholder" data-iframe-url="${iframeUrl}"></div>`);
-        $(element).removeClass('active').attr('data-created-at', null)
-        return true
-      }
-      return false
-    }
-
-    function checkForAttachmentsState() {
-      $.each($('.inline-attachment-container'), function(i, element){
-        showElement(element)
-      })
-      if ($('.active-iframe-preview').length > 5){
-        let sortedIframes = $('.inline-attachment-container.active').sort(function(a, b) {
-          return +a.dataset.createdAt - +b.dataset.createdAt;
-        })
-        $.each(sortedIframes, function(i, element){
-          if (hideElement(element)) return false
-        })
-      }
-    }
-
-    return {
-      init: () => {
-        windowScrollEvents['StepInlineAttachments'] = StepInlineAttachments.scrollEvent;
-      },
-      scrollEvent: () => {
-        checkForAttachmentsState()
-      }
-    }
-
-  })();
-
     // Reorder attachments
   function reorderAttachmentsInit() {
     $('#steps').on('click', '.attachments-actions .change-order', function(e){
@@ -719,7 +663,7 @@
         element.style.order = i
       })
     })
-    .on('DOMSubtreeModified', function() {
+    .on('DOMSubtreeModified', '.attachments', function() {
       $(this).trigger('reorder');
     })
     $('.attachments').trigger('reorder');
@@ -738,7 +682,6 @@
     })
   }
 
-  StepInlineAttachments.init();
   reorderAttachmentsInit();
   initAssetViewModeToggle();
 })();

app/assets/javascripts/sitewide/assets.js

@@ -1,8 +1,9 @@
-
+/* global windowScrollEvents HelperModule I18n */
-$(document).on('click', '.asset .change-preview-type', function(e) {
+$(document).on('click', '.asset-context-menu .change-preview-type', function(e) {
-  var viewMode = $(this).data('preview-type');
+  var viewModeBtn = $(this);
-  var toggleUrl = $(this).data('toggle-view-url');
+  var viewMode = viewModeBtn.data('preview-type');
-  var assetId = $(this).closest('.asset').data('asset-id');
+  var toggleUrl = viewModeBtn.closest('.dropdown-menu').data('toggle-view-url');
+  var assetId = viewModeBtn.closest('.dropdown-menu').data('asset-id');
   e.preventDefault();
   e.stopPropagation();
   $.ajax({
@@ -11,7 +12,86 @@ $(document).on('click', '.asset .change-preview-type', function(e) {
     dataType: 'json',
     data: { asset: { view_mode: viewMode } },
     success: function(data) {
+      viewModeBtn.closest('.dropdown-menu').find('.change-preview-type').removeClass('selected');
+      viewModeBtn.addClass('selected');
       $(`.asset[data-asset-id=${assetId}]`).replaceWith(data.html);
     }
   });
 });
+
+$(document).on('click', '.asset .delete-asset', function(e) {
+  var asset = $(this).closest('.asset');
+  e.preventDefault();
+  e.stopPropagation();
+  $.ajax({
+    url: $(this).attr('href'),
+    type: 'DELETE',
+    dataType: 'json',
+    success: function(result) {
+      asset.remove();
+      HelperModule.flashAlertMsg(result.flash, 'success');
+    },
+    error: function() {
+      HelperModule.flashAlertMsg(I18n.t('general.no_permissions'), 'danger');
+    }
+  });
+});
+
+var InlineAttachments = (function() {
+  function elementVisible(element) {
+    var elementRect = element.getBoundingClientRect();
+    var elementHeight = $(element).height();
+    return elementRect.top + (elementHeight / 2) >= 0
+           && elementRect.bottom <= (window.innerHeight || document.documentElement.clientHeight) + (elementHeight / 2);
+  }
+
+  function showElement(element) {
+    setTimeout(() => {
+      var iframeUrl = $(element).find('.iframe-placeholder').data('iframe-url');
+      if (elementVisible(element) && iframeUrl) {
+        $(element).find('.iframe-placeholder')
+          .replaceWith(`<iframe class="active-iframe-preview" src="${iframeUrl}"></iframe>`);
+        $(element).addClass('active').attr('data-created-at', new Date().getTime());
+      }
+    }, 500);
+  }
+
+  function hideElement(element) {
+    var iframeUrl = $(element).find('.active-iframe-preview').attr('src');
+    if (!elementVisible(element) && iframeUrl) {
+      $(element).find('iframe')
+        .replaceWith(`<div class="iframe-placeholder" data-iframe-url="${iframeUrl}"></div>`);
+      $(element).removeClass('active').attr('data-created-at', null);
+      return true;
+    }
+    return false;
+  }
+
+  function checkForAttachmentsState() {
+    $.each($('.inline-attachment-container'), function(i, element) {
+      showElement(element);
+    });
+    if ($('.active-iframe-preview').length > 5) {
+      let sortedIframes = $('.inline-attachment-container.active').sort(function(a, b) {
+        return +a.dataset.createdAt - +b.dataset.createdAt;
+      });
+      $.each(sortedIframes, function(i, element) {
+        if (hideElement(element)) return false;
+      });
+    }
+  }
+
+  return {
+    init: () => {
+      windowScrollEvents.InlineAttachments = InlineAttachments.scrollEvent;
+    },
+    scrollEvent: () => {
+      checkForAttachmentsState();
+    }
+  };
+})();
+
+$(document).on('turbolinks:load', function() {
+  InlineAttachments.init();
+  InlineAttachments.scrollEvent();
+});

app/assets/stylesheets/shared/assets.scss

@@ -0,0 +1,301 @@
+// scss-lint:disable ImportantRule PropertyUnits NestingDepth SelectorDepth
+
+.attachment-container {
+  @include md-card-style;
+  grid-row: span 6;
+  height: 23em;
+  overflow: hidden;
+  padding: 1em;
+  position: relative;
+  width: var(--attachment-column-width);
+
+
+  .file-preview-link {
+    display: block;
+    height: 100%;
+    width: 100%;
+  }
+
+  .attachment-preview {
+    border-radius: $border-radius-default;
+    color: $color-volcano;
+    height: 14em;
+    position: relative;
+    text-align: center;
+    width: 100%;
+
+    &.processing {
+      background-image: url("/images/medium/processing.gif");
+      background-position: center;
+      background-repeat: no-repeat;
+    }
+
+    img {
+      max-height: 100%;
+      max-width: 100%;
+    }
+
+    &.marvinjs {
+
+      &::before,
+      &::after {
+        border-radius: 1em 0 0 1em;
+        bottom: 1em;
+        content: "";
+        display: block;
+        height: 2em;
+        line-height: 2em;
+        position: absolute;
+        right: -1em;
+        width: 2.25em;
+      }
+
+      &::before {
+        background: $marvinjs-color;
+      }
+
+      &::after {
+        background-image: url("/images/icon_small/marvinjs-white.svg");
+        height: 2.25em;
+        right: -.75em;
+        width: 2em;
+      }
+    }
+
+    .fas {
+      font-size: 100px;
+      line-height: 160px;
+    }
+  }
+
+  .no-shadow {
+    box-shadow: none;
+  }
+
+  .attachment-label,
+  .attachment-metadata {
+    background: $color-white;
+    overflow: hidden;
+    padding-top: 1em;
+    position: relative;
+    text-align: center;
+    text-overflow: ellipsis;
+    transition: $md-transaction;
+    white-space: nowrap;
+  }
+
+  .attachment-label {
+    @include font-main;
+    margin-top: 1.5em;
+    z-index: 2;
+  }
+
+  .attachment-metadata {
+    @include font-small;
+    color: $color-silver-chalice;
+    margin-top: -4em;
+  }
+
+  .remove-icon {
+    bottom: .5em;
+    cursor: pointer;
+    display: none;
+    position: absolute;
+    right: .5em;
+  }
+
+  &:hover {
+    box-shadow: $md-shadow;
+
+    .file-preview-link {
+      text-decoration: none;
+    }
+
+
+    .remove-icon {
+      display: inline-block;
+    }
+
+    .attachment-label,
+    .attachment-metadata {
+      margin-top: 0;
+
+    }
+  }
+
+  &.new {
+    border: 1px solid $brand-primary;
+
+    .dnd-error {
+      bottom: 15px;
+      float: left;
+      padding-left: 5px;
+      position: relative;
+    }
+
+    &::before {
+      background: $brand-primary;
+      border-radius: 0 $border-radius-default;
+      bottom: 0;
+      color: $color-white;
+      content: "NEW";
+      left: 0;
+      line-height: 20px;
+      position: absolute;
+      text-align: center;
+      width: 50px;
+      z-index: 2;
+    }
+  }
+
+  .asset-context-menu {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}
+
+.inline-attachment-container {
+  @include md-card-style;
+  grid-column: 1/-1;
+  grid-row: span 12;
+  height: 47em;
+
+  .active-iframe-preview {
+    border: 0;
+    height: calc(100% - 4em);
+    width: 100%;
+  }
+
+  .image-container,
+  .general-file-container {
+    align-items: center;
+    background: $color-concrete;
+    display: flex;
+    height: calc(100% - 4em);
+    justify-content: center;
+    padding: .5em;
+    width: 100%;
+
+    img {
+      max-height: 100%;
+      max-width: 100%;
+    }
+
+    .fas {
+      font-size: 10em;
+    }
+  }
+
+  .header {
+    align-items: center;
+    display: flex;
+    height: 4em;
+    padding: 0 1em;
+
+    .show-as-thumbnail {
+      cursor: pointer;
+      margin-left: auto;
+    }
+
+    .file-name {
+      @include font-main;
+      color: $brand-primary;
+    }
+
+    .file-metadata {
+      @include font-small;
+      color: $color-silver-chalice;
+      display: grid;
+      grid-column-gap: 1em;
+      grid-template-columns: max-content max-content;
+    }
+
+    .asset-context-menu {
+      margin-left: auto;
+    }
+  }
+}
+
+.list-attachment-container {
+  @include md-card-style;
+  align-items: center;
+  display: flex;
+  grid-column: 1/-1;
+  height: 3em;
+  padding: .5em;
+
+  .file-icon {
+    @include font-main;
+  }
+
+  .file-name {
+    @include font-main;
+    color: $brand-primary;
+    margin: 0 .5em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .file-metadata {
+    @include font-small;
+    color: $color-silver-chalice;
+    display: grid;
+    grid-column-gap: 1em;
+    grid-template-columns: max-content max-content;
+  }
+
+  .asset-context-menu {
+    margin-left: auto;
+  }
+}
+
+.asset-context-menu {
+  display: inline-block;
+
+  #dropdownAssetContextMenu {
+    background: $color-white;
+
+    &:focus,
+    &:active {
+      box-shadow: none;
+    }
+
+    &:hover {
+      background: $color-concrete;
+    }
+  }
+
+  .dropdown-menu {
+    @include font-button;
+    min-width: 200px;
+
+    .divider-label {
+      @include font-small;
+      color: $color-alto;
+      padding-left: 1em;
+    }
+
+    a {
+      cursor: pointer;
+      padding: .5em 1em;
+      text-align: left;
+    }
+
+    .change-preview-type,
+    .delete-asset {
+      .fas {
+        width: 1.5em;
+      }
+
+      &.selected::after {
+        @include font-awesome;
+        content: $font-fas-check;
+        margin-left: auto;
+        position: absolute;
+        right: 1em;
+      }
+    }
+  }
+}

app/assets/stylesheets/shared/file_preview.scss

@@ -65,6 +65,10 @@
       font-weight: bold;
       margin-right: auto;
     }
+
+    .asset-context-menu {
+      float: left;
+    }
   }
 
   .modal-body {

app/assets/stylesheets/steps.scss

@@ -156,7 +156,6 @@
   grid-column-gap: 1em;
   grid-row-gap: 1em;
   grid-template-columns: repeat(auto-fill, minmax(var(--attachment-column-width), 1fr));
-  justify-content: center;
   margin: 1em 0;
 
   .nested_fields {
@@ -164,168 +163,8 @@
   }
 }
 
-.attachment-container {
-  @include md-card-style;
-  grid-row: span 6;
-  justify-self: center;
-  overflow: hidden;
-  padding: 1em;
-  position: relative;
-  width: var(--attachment-column-width);
 
 
-  .file-preview-link {
-    display: block;
-    height: 100%;
-    width: 100%;
-  }
-
-  .show-inline {
-    background: $color-white;
-    border-radius: $border-radius-default;
-    line-height: 1em;
-    padding: .5em;
-    position: absolute;
-    right: 0;
-    text-align: center;
-    top: 0;
-    width: 2em;
-    z-index: 10;
-  }
-
-  .attachment-preview {
-    border-radius: $border-radius-default;
-    color: $color-volcano;
-    height: 14em;
-    position: relative;
-    text-align: center;
-    width: 100%;
-
-    &.processing {
-      background-image: url("/images/medium/processing.gif");
-      background-position: center;
-      background-repeat: no-repeat;
-    }
-
-    img {
-      max-height: 100%;
-      max-width: 100%;
-    }
-
-    &.marvinjs {
-
-      &::before,
-      &::after {
-        border-radius: 1em 0 0 1em;
-        bottom: 1em;
-        content: "";
-        display: block;
-        height: 2em;
-        line-height: 2em;
-        position: absolute;
-        right: -1em;
-        width: 2.25em;
-      }
-
-      &::before {
-        background: $marvinjs-color;
-      }
-
-      &::after {
-        background-image: url("/images/icon_small/marvinjs-white.svg");
-        height: 2.25em;
-        right: -.75em;
-        width: 2em;
-      }
-    }
-
-    i.fas {
-      font-size: 100px;
-      line-height: 160px;
-    }
-  }
-
-  .no-shadow {
-    box-shadow: none;
-  }
-
-  .attachment-label,
-  .attachment-metadata {
-    background: $color-white;
-    overflow: hidden;
-    padding-top: 1em;
-    position: relative;
-    text-align: center;
-    text-overflow: ellipsis;
-    transition: $md-transaction;
-    white-space: nowrap;
-  }
-
-  .attachment-label {
-    @include font-main;
-    margin-top: 1.5em;
-    z-index: 2;
-  }
-
-  .attachment-metadata {
-    @include font-small;
-    color: $color-silver-chalice;
-    margin-top: -4em;
-  }
-
-  .remove-icon {
-    bottom: .5em;
-    cursor: pointer;
-    display: none;
-    position: absolute;
-    right: .5em;
-  }
-
-  &:hover {
-    box-shadow: $md-shadow;
-
-    .file-preview-link {
-      text-decoration: none;
-    }
-
-
-    .remove-icon {
-      display: inline-block;
-    }
-
-    .attachment-label,
-    .attachment-metadata {
-      margin-top: 0;
-
-    }
-  }
-
-  &.new {
-    border: 1px solid $brand-primary;
-
-    .dnd-error {
-      bottom: 15px;
-      float: left;
-      padding-left: 5px;
-      position: relative;
-    }
-
-    &::before {
-      background: $brand-primary;
-      border-radius: 0 $border-radius-default;
-      bottom: 0;
-      color: $color-white;
-      content: "NEW";
-      left: 0;
-      line-height: 20px;
-      position: absolute;
-      text-align: center;
-      width: 50px;
-      z-index: 2;
-    }
-  }
-}
-
 .attachments-actions {
   align-items: center;
   display: flex;
@@ -390,89 +229,3 @@
 .expand-all-steps {
   margin: 0 0 15px 15px;
 }
-
-.inline-attachment-container {
-  @include md-card-style;
-  grid-column: 1/-1;
-  grid-row: span 12;
-
-  .active-iframe-preview {
-    border: 0;
-    height: calc(100% - 4em);
-    width: 100%;
-  }
-
-  .image-container,
-  .general-file-container {
-    align-items: center;
-    background: $color-concrete;
-    display: flex;
-    height: calc(100% - 4em);
-    justify-content: center;
-    padding: .5em;
-    width: 100%;
-
-    img {
-      max-height: 100%;
-      max-width: 100%;
-    }
-
-    .fas {
-      font-size: 10em;
-    }
-  }
-
-  .header {
-    align-items: center;
-    display: flex;
-    height: 4em;
-    padding: 0 1em;
-
-    .show-as-thumbnail {
-      cursor: pointer;
-      margin-left: auto;
-    }
-
-    .file-name {
-      @include font-main;
-      color: $brand-primary;
-    }
-
-    .file-metadata {
-      @include font-small;
-      color: $color-silver-chalice;
-      display: grid;
-      grid-column-gap: 1em;
-      grid-template-columns: max-content max-content;
-    }
-  }
-}
-
-.list-attachment-container {
-  @include md-card-style;
-  align-items: center;
-  display: flex;
-  grid-column: 1/-1;
-  padding: .5em;
-
-  .file-icon {
-    @include font-main;
-  }
-
-  .file-name {
-    @include font-main;
-    color: $brand-primary;
-    margin: 0 .5em;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .file-metadata {
-    @include font-small;
-    color: $color-silver-chalice;
-    display: grid;
-    grid-column-gap: 1em;
-    grid-template-columns: max-content max-content;
-  }
-}

app/controllers/assets_controller.rb

@@ -17,8 +17,8 @@ class AssetsController < ApplicationController
   helper_method :wopi_file_edit_button_status
 
   before_action :load_vars, except: :create_wopi_file
-  before_action :check_read_permission, except: :edit
+  before_action :check_read_permission, except: %i(edit destroy)
-  before_action :check_edit_permission, only: :edit
+  before_action :check_edit_permission, only: %i(edit destroy)
 
   def file_preview
     render json: { html: render_to_string(
@@ -176,6 +176,14 @@ class AssetsController < ApplicationController
     }, status: :ok
   end
 
+  def destroy
+    if @asset.destroy
+      render json: { flash: 'File deleted' }
+    else
+      render json: {}, status: :unprocessable_entity
+    end
+  end
+
   private
 
   def load_vars
@@ -203,25 +211,6 @@ class AssetsController < ApplicationController
     render_403 unless can_manage_asset?(@asset)
   end
 
-  # Check whether the wopi file can be edited and return appropriate response
-  def wopi_file_edit_button_status(asset)
-    file_ext = asset.file_name.split('.').last
-    if Constants::WOPI_EDITABLE_FORMATS.include?(file_ext)
-      edit_supported = true
-      title = ''
-    else
-      edit_supported = false
-      title = if Constants::FILE_TEXT_FORMATS.include?(file_ext)
-                I18n.t('assets.wopi_supported_text_formats_title')
-              elsif Constants::FILE_TABLE_FORMATS.include?(file_ext)
-                I18n.t('assets.wopi_supported_table_formats_title')
-              else
-                I18n.t('assets.wopi_supported_presentation_formats_title')
-              end
-    end
-    return edit_supported, title
-  end
-
   def append_wd_params(url)
     exclude_params = %w(wdPreviousSession wdPreviousCorrelation)
     wd_params = params.as_json.select { |key, _value| key[/^wd.*/] && !(exclude_params.include? key) }.to_query

app/controllers/marvin_js_assets_controller.rb

@@ -17,7 +17,10 @@ class MarvinJsAssetsController < ApplicationController
 
     if result[:asset] && marvin_params[:object_type] == 'Step'
       render json: {
-        html: render_to_string(partial: 'assets/asset.html.erb', locals: { asset: result[:asset] })
+        html: render_to_string(partial: 'assets/asset.html.erb', locals: {
+          asset: result[:asset],
+          gallery_view_id: marvin_params[:object_id]
+        })
       }
     elsif result[:asset] && marvin_params[:object_type] == 'Result'
       @my_module = result[:object].my_module

app/helpers/application_helper.rb

@@ -186,4 +186,23 @@ module ApplicationHelper
   def wopi_enabled?
     ENV['WOPI_ENABLED'] == 'true'
   end
+
+  # Check whether the wopi file can be edited and return appropriate response
+  def wopi_file_edit_button_status(asset)
+    file_ext = asset.file_name.split('.').last
+    if Constants::WOPI_EDITABLE_FORMATS.include?(file_ext)
+      edit_supported = true
+      title = ''
+    else
+      edit_supported = false
+      title = if Constants::FILE_TEXT_FORMATS.include?(file_ext)
+                I18n.t('assets.wopi_supported_text_formats_title')
+              elsif Constants::FILE_TABLE_FORMATS.include?(file_ext)
+                I18n.t('assets.wopi_supported_table_formats_title')
+              else
+                I18n.t('assets.wopi_supported_presentation_formats_title')
+              end
+    end
+    return edit_supported, title
+  end
 end

app/views/assets/_asset.html.erb

@@ -1,8 +1,31 @@
-<% gallery_view_id = nil unless defined? gallery_view_id %>
+<%
+unless defined? gallery_view_id
+  gallery_view_id = nil
+end
+
+unless defined? deletable
+  deletable = if asset.step
+                true
+              else
+                false
+              end
+end
+
+unless defined? editable
+  editable = true
+end
+
+partial_locals = {
+  asset: asset,
+  gallery_view_id: gallery_view_id,
+  deletable: deletable,
+  editable: editable
+}
+%>
 <% if asset.inline? %>
-    <%= render partial: 'assets/asset_inline.html.erb', locals: { asset: asset, gallery_view_id: gallery_view_id } %>
+    <%= render partial: 'assets/asset_inline.html.erb', locals: partial_locals %>
 <% elsif asset.list? %>
-    <%= render partial: 'assets/asset_list.html.erb', locals: { asset: asset, gallery_view_id: gallery_view_id } %>
+    <%= render partial: 'assets/asset_list.html.erb', locals: partial_locals %>
 <% else %>
-    <%= render partial: 'assets/asset_thumbnail.html.erb', locals: { asset: asset, gallery_view_id: gallery_view_id } %>
+    <%= render partial: 'assets/asset_thumbnail.html.erb', locals: partial_locals %>
 <% end %>

app/views/assets/_asset_context_menu.html.erb

@@ -0,0 +1,70 @@
+<div class="dropdown asset-context-menu">
+  <button class="btn btn-light dropdown-toggle icon-btn" type="button" id="dropdownAssetContextMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    <i class="fas fa-ellipsis-h"></i>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-right"
+      aria-labelledby="dropdownAssetContextMenu"
+      data-asset-id="<%= asset.id %>"
+      data-toggle-view-url="<%= toggle_view_mode_path(asset) %>">
+    <% if can_manage_asset?(asset) && editable %>
+      <% if wopi_enabled? && wopi_file?(asset) %>
+        <li>
+          <% edit_supported, title = wopi_file_edit_button_status(asset) %>
+          <%= render partial: 'assets/wopi/file_wopi_controls.html.erb',
+            locals: {
+              asset: asset,
+              edit_supported: edit_supported,
+              title: title
+            } %>
+        </li>
+        <li role="separator" class="divider"></li>
+      <% elsif asset.file.metadata[:asset_type] == 'marvinjs' %>
+        <li>
+          <a class="btn btn-light marvinjs-edit-button"
+            data-sketch-id="<%= asset.id %>"
+            data-update-url="<%= marvin_js_asset_path(asset) %>"
+            data-sketch-start-edit-url="<%= start_editing_marvin_js_asset_path(asset) %>"
+            data-sketch-name="<%= asset.file.metadata[:name] %>"
+            data-sketch-description="<%= asset.file.metadata[:description] %>"
+          >
+            <span class="fas fa-pencil-alt"></span>
+            <%= t('assets.file_preview.edit_in_marvinjs') %>
+          </a>
+        </li>
+        <li role="separator" class="divider"></li>
+      <% elsif asset.editable_image? %>
+        <li>
+          <a class="btn btn-light image-edit-button"
+            data-image-id="<%= asset.id %>"
+            data-image-name="<%= asset.file_name %>"
+            data-image-url="<%= asset_file_url_path(asset) %>"
+            data-image-quality="<%= asset.file_image_quality || 80 %>"
+            data-image-mime-type="<%= asset.file.content_type %>"
+            data-image-start-edit-url="<%= start_edit_image_path(asset) %>"
+          >
+            <span class="fas fa-pencil-alt"></span>
+            <%= t('assets.file_preview.edit_in_scinote') %>
+          </a>
+        </li>
+        <li role="separator" class="divider"></li>
+      <% end %>
+    <% end %>
+    <li class="divider-label"><%= t("protocols.steps.attachments.attachments_view_mode") %></li>
+    <% ['inline', 'thumbnail', 'list'].each do |view_mode| %>
+      <li>
+        <a class="change-preview-type <%= 'selected' if view_mode == asset.view_mode %>"  data-preview-type="<%= view_mode %>">
+          <%= t("assets.context_menu.#{view_mode}_html") %>
+        </a>
+      </li>
+    <% end %>
+    <% if can_manage_asset?(asset) && deletable %>
+      <li role="separator" class="divider"></li>
+      <li>
+        <a class="delete-asset" href="<%= asset_destroy_path(asset) %>">
+          <i class="fas fa-trash"></i>
+          <%= t("assets.context_menu.delete") %>
+        </a>
+      </li>
+    <% end %>
+  </ul>
+</div>

app/views/assets/_asset_inline.html.erb

@@ -22,24 +22,10 @@
         <span><%= t('assets.placeholder.size_label', size: number_to_human_size(asset.file_size)) %></span>
       </div>
     </div>
-    <div class="change-preview-type"
+    <%= render partial: 'assets/asset_context_menu.html.erb', locals: { asset: asset, deletable: deletable, editable: editable } %>
-         data-preview-type="inline"
-         data-toggle-view-url="<%= toggle_view_mode_path(asset) %>">
-      <i class="fas fa-desktop"></i>
-    </div>
-    <div class="change-preview-type"
-         data-preview-type="list"
-         data-toggle-view-url="<%= toggle_view_mode_path(asset) %>">
-      <i class="fas fa-list"></i>
-    </div>
-    <div class="change-preview-type"
-         data-preview-type="thumbnail"
-         data-toggle-view-url="<%= toggle_view_mode_path(asset) %>">
-      <i class="fas fa-th-large"></i>
-    </div>
   </div>
   <% if wopi_enabled? && wopi_file?(asset) %>
-    <div class="iframe-placeholder" data-iframe-url="<%= asset.get_action_url(current_user, 'embedview') %>"></div>
+    <div class="iframe-placeholder" data-iframe-url="<%= 'ya.ru' || asset.get_action_url(current_user, 'embedview') %>"></div>
   <% elsif asset.previewable? %>
     <div class="image-container">
       <%= image_tag asset.large_preview,

app/views/assets/_asset_list.html.erb

@@ -22,19 +22,5 @@
     <span><%= t('assets.placeholder.modified_label') %> <%= l(asset.updated_at, format: :full_date) if asset.updated_at %></span>
     <span><%= t('assets.placeholder.size_label', size: number_to_human_size(asset.file_size)) %></span>
   </div>
-  <div class="change-preview-type"
+  <%= render partial: 'assets/asset_context_menu.html.erb', locals: { asset: asset, deletable: deletable, editable: editable } %>
-       data-preview-type="inline"
-       data-toggle-view-url="<%= toggle_view_mode_path(asset) %>">
-    <i class="fas fa-desktop"></i>
-  </div>
-  <div class="change-preview-type"
-       data-preview-type="list"
-       data-toggle-view-url="<%= toggle_view_mode_path(asset) %>">
-    <i class="fas fa-list"></i>
-  </div>
-  <div class="change-preview-type"
-       data-preview-type="thumbnail"
-       data-toggle-view-url="<%= toggle_view_mode_path(asset) %>">
-    <i class="fas fa-th-large"></i>
-  </div>
 </div>

app/views/assets/_asset_thumbnail.html.erb

@@ -13,21 +13,6 @@
             gallery_view_id: gallery_view_id,
             preview_url: asset_file_preview_path(asset)
           } do %>
-      <div class="change-preview-type"
-           data-preview-type="inline"
-           data-toggle-view-url="<%= toggle_view_mode_path(asset) %>">
-        <i class="fas fa-desktop"></i>
-      </div>
-      <div class="change-preview-type"
-           data-preview-type="list"
-           data-toggle-view-url="<%= toggle_view_mode_path(asset) %>">
-        <i class="fas fa-list"></i>
-      </div>
-      <div class="change-preview-type"
-           data-preview-type="thumbnail"
-           data-toggle-view-url="<%= toggle_view_mode_path(asset) %>">
-        <i class="fas fa-th-large"></i>
-      </div>
     <div class="attachment-preview <%= asset.file.attached? ? asset.file.metadata['asset_type'] : '' %>">
       <% if asset.previewable? %>
         <%= image_tag asset.medium_preview,
@@ -50,4 +35,5 @@
       <%= number_to_human_size(asset.file_size) %>
     </div>
   <% end %>
+  <%= render partial: 'assets/asset_context_menu.html.erb', locals: { asset: asset, deletable: deletable, editable: editable } %>
 </div>

app/views/my_modules/_result_user_generated.html.erb

@@ -3,5 +3,5 @@
 <% elsif result.is_table %>
   <%= render partial: "results/result_table.html.erb", locals: {result: result} %>
 <% elsif result.is_asset %>
-  <%= render partial: 'assets/asset.html.erb', locals: { asset: result.asset } %>
+  <%= render partial: 'assets/asset.html.erb', locals: { asset: result.asset, gallery_view_id: result.my_module.id } %>
 <% end %>

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

@@ -38,6 +38,9 @@
      <a class="btn btn-light file-download-link" href="<%= rails_blob_path(asset.file, disposition: 'attachment') %>" data-turbolinks="false">
       <span class="fas fa-download"></span> <%= t('Download')%>
     </a>
+    <% if asset.step || asset.result %>
+      <%= render partial: 'assets/asset_context_menu.html.erb', locals: { asset: asset, deletable: false, editable: false } %>
+    <% end %>
     <button type="button" class="btn icon-btn btn-light" data-dismiss="modal"><span class="fas fa-times"></span></button>
   </div>
 </div>

config/locales/en.yml

@@ -2124,6 +2124,13 @@ en:
     file_preview:
       edit_in_scinote: "Edit in SciNote"
       edit_in_marvinjs: "Edit in Marvin JS"
+    context_menu:
+      set_view_size: "Set view size"
+      delete: "Delete file"
+      inline_html: "<i class=\"fas fa-desktop\"></i> Extra large"
+      thumbnail_html: "<i class=\"fas fa-th-large\"></i> Medium"
+      list_html: "<i class=\"fas fa-list\"></i> List"
+
   atwho:
     no_results:
       projects: "Projects with this name were not found"

config/routes.rb

@@ -603,6 +603,7 @@ Rails.application.routes.draw do
     patch 'files/:id/toggle_view_mode', to: 'assets#toggle_view_mode', as: 'toggle_view_mode'
     post 'files/:id/update_image', to: 'assets#update_image',
                                    as: 'update_asset_image'
+    delete 'files/:id/', to: 'assets#destroy', as: 'asset_destroy'
     post 'files/create_wopi_file',
          to: 'assets#create_wopi_file',
          as: 'create_wopi_file'