diff --git a/app/assets/javascripts/marvinjs_editor.js b/app/assets/javascripts/marvinjs_editor.js index 5c1875805..0b307d568 100644 --- a/app/assets/javascripts/marvinjs_editor.js +++ b/app/assets/javascripts/marvinjs_editor.js @@ -1,4 +1,4 @@ -/* global MarvinJSUtil, I18n, FilePreviewModal, tinymce, TinyMCE */ +/* global MarvinJSUtil, I18n, FilePreviewModal, tinymce, TinyMCE PerfectScrollbar */ /* eslint-disable no-param-reassign */ /* eslint-disable wrap-iife */ @@ -69,10 +69,11 @@ var MarvinJsEditor = (function() { return Object.freeze({ open: function(config) { + MarvinJsEditor().team_sketches(); preloadActions(config); $(marvinJsModal).modal('show'); $(marvinJsObject) - .css('width', marvinJsContainer.width() + 'px') + .css('width', (marvinJsContainer.width() - 200) + 'px') .css('height', marvinJsContainer.height() + 'px'); marvinJsModal.find('.file-save-link').off('click').on('click', () => { if (config.mode === 'new') { @@ -244,6 +245,28 @@ var MarvinJsEditor = (function() { $(object).remove(); } }); + }, + + team_sketches: function() { + var ps = new PerfectScrollbar(marvinJsContainer.find('.marvinjs-team-sketch')[0]); + marvinJsContainer.find('.sketch-container').remove(); + $.get('/marvin_js_assets/team_sketches', function(result) { + $(result.html).appendTo(marvinJsContainer.find('.marvinjs-team-sketch')); + + $.each(result.sketches, function(i, sketch) { + var sketchObj = marvinJsContainer.find('.marvinjs-team-sketch .sketch-container[data-sketch-id="' + sketch + '"]'); + var src = sketchObj.find('#description'); + var dest = sketchObj.find('img'); + MarvinJsEditor().create_preview(src, dest); + setTimeout(() => { ps.update(); }, 500); + marvinJsContainer.find('.sketch-container').click(function() { + var sketchContainer = $(this); + loadEditor().then(function(sketcherInstance) { + sketcherInstance.importStructure('mrv', sketchContainer.find('#description').val()); + }); + }); + }); + }); } }); }); diff --git a/app/assets/stylesheets/marvinjs.scss b/app/assets/stylesheets/marvinjs.scss index 4a649f1a5..be1582275 100644 --- a/app/assets/stylesheets/marvinjs.scss +++ b/app/assets/stylesheets/marvinjs.scss @@ -71,10 +71,66 @@ width: 100%; #marvinjs-sketch { + border-right: 1px solid $color-gainsboro; + float: left; min-height: 450px; min-width: 500px; overflow: hidden; } + + .marvinjs-team-sketch { + background: $color-white; + float: right; + height: calc(100% - 40px); + overflow-y: scroll; + position: relative; + width: 200px; + } + + .marvinjs-team-sketch-header { + background: $color-white; + border-bottom: 1px solid $color-gainsboro; + color: $color-emperor; + float: right; + font-size: 16px; + height: 40px; + line-height: 39px; + text-align: center; + width: 200px; + } + + } + + .sketch-container { + @include md-card-style; + cursor: pointer; + margin: 10px; + overflow: hidden; + padding: 10px; + position: relative; + + .sketch-image { + height: 100%; + width: 100%; + } + + .sketch-name { + color: $brand-primary; + font-family: Lato; + font-size: 16px; + line-height: 18px; + margin: 10px auto; + overflow: hidden; + text-align: center; + width: 160px; + } + + .sketch-object { + color: $color-emperor; + font-size: 12px; + opacity: .6; + text-align: center; + } } } diff --git a/app/controllers/marvin_js_assets_controller.rb b/app/controllers/marvin_js_assets_controller.rb index 6519aa31e..5652be0a7 100644 --- a/app/controllers/marvin_js_assets_controller.rb +++ b/app/controllers/marvin_js_assets_controller.rb @@ -39,6 +39,19 @@ class MarvinJsAssetsController < ApplicationController render json: MarvinJsAsset.update_sketch(marvin_params) end + def team_sketches + result = '' + sketches = current_team.marvin_js_assets.where.not(object_type: 'TinyMceAsset') + sketches.each do |sketch| + result += render_to_string( + partial: 'shared/marvinjs_modal_sketch.html.erb', + locals: { sketch: sketch } + ) + end + + render json: { html: result, sketches: sketches.pluck(:id) } + end + private def marvin_params diff --git a/app/models/team.rb b/app/models/team.rb index 50103041f..4c22f2ba6 100644 --- a/app/models/team.rb +++ b/app/models/team.rb @@ -39,6 +39,7 @@ class Team < ApplicationRecord has_many :repositories, dependent: :destroy has_many :reports, inverse_of: :team, dependent: :destroy has_many :activities, inverse_of: :team, dependent: :destroy + has_many :marvin_js_assets, inverse_of: :team, dependent: :destroy attr_accessor :without_templates attr_accessor :without_intro_demo diff --git a/app/views/shared/_marvinjs_modal.html.erb b/app/views/shared/_marvinjs_modal.html.erb index 3a222d963..c9f22d987 100644 --- a/app/views/shared/_marvinjs_modal.html.erb +++ b/app/views/shared/_marvinjs_modal.html.erb @@ -16,8 +16,9 @@