diff --git a/app/assets/javascripts/sitewide/file_preview.js.erb b/app/assets/javascripts/sitewide/file_preview.js.erb
index 5a0d50803..d570fddbd 100644
--- a/app/assets/javascripts/sitewide/file_preview.js.erb
+++ b/app/assets/javascripts/sitewide/file_preview.js.erb
@@ -1,3 +1,6 @@
+
+//= require assets
+
(function(global) {
'use strict';
@@ -15,6 +18,7 @@
});
}
+
function initImageEditor(data) {
// var ImageEditor = require('tui-image-editor');
var blackTheme = {
@@ -103,12 +107,13 @@
var imageEditor = new tui.ImageEditor('#tui-image-editor', {
includeUI: {
loadImage: {
- path: data['large-preview-url'],
- name: 'SampleImage'
+ // path: data['large-preview-url'],
+ path: data['download-url'],
+ name: data.filename
},
theme: blackTheme, // or whiteTheme
- // menu: ['shape', 'filter'],
- initMenu: 'filter',
+ menu: ['draw', 'text', 'shape', 'crop', 'flip', 'icon', 'filter'],
+ initMenu: 'draw',
menuBarPosition: 'bottom'
},
cssMaxWidth: 700,
@@ -120,17 +125,30 @@
usageStatistics: false
});
- $('.file-save-link').click(function(ev) {
+ $('#fileEditModal').find('.file-name').text('Editing: ' + data.filename);
+ $('#fileEditModal').modal('show');
+
+ $('.tui-image-editor-header').hide();
+
+ $('.file-save-link').off().click(function(ev) {
ev.preventDefault();
ev.stopPropagation();
+ animateSpinner(null, true);
$.ajax({
type: 'POST',
url: '/files/' + data.id + '/update_image',
data: {
image: imageEditor.toDataURL()
+ },
+ success: function(res) {
+ $('#modal_link' + data.id).parent().html(res.html);
+ setupAssetsLoading();
}
}).done(function() {
- console.log('saved');
+ animateSpinner(null, false);
+ imageEditor.clearObjects();
+ $('#tui-image-editor').html('');
+ $('#fileEditModal').modal('hide');
});
});
@@ -161,13 +179,18 @@
} else {
animateSpinner('.file-preview-container', false);
modal.find('.file-preview-container')
- .append($('![]()
')
- .attr('src', data['large-preview-url'])
- .attr('alt', name)
- .click(function(ev) {
- ev.stopPropagation();
- })
- );
+ .append($('![]()
')
+ .attr('src', data['large-preview-url'])
+ .attr('alt', name)
+ .click(function(ev) {
+ ev.stopPropagation();
+ }));
+ modal.find('.file-edit-link').off().click(function(ev) {
+ ev.preventDefault();
+ ev.stopPropagation();
+ modal.modal('hide');
+ initImageEditor(data);
+ });
}
} else {
modal.find('.file-preview-container').html(data['preview-icon']);
diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index ce6eeb1c9..71831cf23 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -1519,6 +1519,61 @@ table.dataTable {
margin-right: 20px;
}
+ .file-edit-link {
+ color: $color-white;
+ display: inline-block;
+ float: right;
+ margin-right: 20px;
+ }
+}
+
+// Image edit modal
+.modal-file-edit {
+ 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;
+ }
+
.file-save-link {
color: $color-white;
display: inline-block;
diff --git a/app/controllers/assets_controller.rb b/app/controllers/assets_controller.rb
index 6654a59f7..5fa98388c 100644
--- a/app/controllers/assets_controller.rb
+++ b/app/controllers/assets_controller.rb
@@ -153,6 +153,18 @@ class AssetsController < ApplicationController
@asset.save!
# Post process file here
@asset.post_process_file(@asset.team)
+
+ respond_to do |format|
+ format.json do
+ render json: {
+ html: render_to_string(
+ partial: 'shared/asset_link',
+ locals: { asset: @asset, display_image_tag: true },
+ formats: :html
+ )
+ }
+ end
+ end
end
private
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 20305cfcd..30123cd15 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -22,9 +22,10 @@
+
-
-
+
+
<%= render "shared/about_modal" %>
<%= render "shared/file_preview_modal.html.erb" %>
+ <%= render "shared/file_edit_modal.html.erb" %>
<%= render "shared/navigation" %>
<% if user_signed_in? && flash[:system_notification_modal] && current_user.show_login_system_notification? %>
diff --git a/app/views/shared/_file_edit_modal.html.erb b/app/views/shared/_file_edit_modal.html.erb
new file mode 100644
index 000000000..74af2d0c6
--- /dev/null
+++ b/app/views/shared/_file_edit_modal.html.erb
@@ -0,0 +1,24 @@
+
diff --git a/app/views/shared/_file_preview_modal.html.erb b/app/views/shared/_file_preview_modal.html.erb
index 7b14b3a90..dfeac76bb 100644
--- a/app/views/shared/_file_preview_modal.html.erb
+++ b/app/views/shared/_file_preview_modal.html.erb
@@ -15,12 +15,12 @@
<%= t('Download')%>
-
- <%= t('Save')%>
+
+ <%= t('Edit')%>