adapt-authoring-ui 0.0.1

package/app/modules/editor/contentObject/views/editorPageComponentListView.js

@@ -0,0 +1,131 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var _ = require('underscore');
+  var Backbone = require('backbone');
+  var Origin = require('core/origin');
+  var EditorOriginView = require('../../global/views/editorOriginView');
+  var EditorPageComponentListItemView = require('./editorPageComponentListItemView');
+
+  var EditorPageComponentListView = EditorOriginView.extend({
+    className: "editor-component-list",
+    tagName: "div",
+    events: {
+      'click': 'onOverlayClicked',
+      'click .editor-component-list-sidebar-exit, .click-capture': 'closeView',
+      'keyup .editor-component-list-sidebar-search input': 'onSearchKeyup'
+    },
+
+    preRender: function(options) {
+      $('html').css('overflow-y', 'hidden');
+
+      this.listenTo(Origin, {
+        'editorComponentListView:remove': this.remove,
+        'window:resize': this.onScreenResize
+      });
+      
+      this.$parentElement = options.$parentElement;
+      this.parentView = options.parentView;
+
+      this.setupFilters();
+    },
+
+    setupFilters: function() {
+      this.availablePositions = {
+        left: false,
+        right: false,
+        full: false
+      };
+
+      _.each(this.model.get('layoutOptions'), function(layoutOption) {
+        switch(layoutOption.type) {
+          case 'left':
+            this.availablePositions.left = true;
+            break;
+          case 'right':
+            this.availablePositions.right = true;
+            break;
+          case 'full':
+            this.availablePositions.full = true;
+            break;
+        }
+      }, this);
+
+      this.model.set('_availablePosition', this.availablePositions);
+    },
+
+    postRender: function() {
+      this.renderComponentList();
+      this.headerHeight = this.$('.editor-component-list-sidebar-header').height();
+      $(window).resize();
+      // move bar into place and animate in
+      this.$el.css({ right:this.$('.editor-component-list-sidebar')
+        .width()*-1})
+        .velocity({ right: 0 }, {duration: 400, easing: 'easeOutQuart'});
+      
+      this.$('.editor-component-list-sidebar-search-field input').focus();
+    },
+
+    closeView: function() {
+      var self = this;
+      this.$el.velocity({ right:this.$('.editor-component-list-sidebar').width() *- 1 }, {
+        duration: 400, 
+        easing: 'easeOutQuart',
+        complete: function onAnimOut() {
+          $('html').css('overflow-y', '');
+          self.remove();
+        }
+      });
+    },
+
+    renderComponentList: function() {
+      Origin.trigger('editorComponentListView:removeSubviews');
+
+      Origin.editor.data.componentTypes.forEach(function(componentType) {
+        var properties = componentType.get('properties');
+        var availablePositions = _.clone(this.availablePositions);
+        
+        if (properties && properties.hasOwnProperty('_supportedLayout')) {
+          var supportedLayout = properties._supportedLayout.enum;
+          // Prune the available positions
+          if (_.indexOf(supportedLayout, 'half-width') == -1) {
+            availablePositions.left = false;
+            availablePositions.right = false;
+          }
+          if (_.indexOf(supportedLayout, 'full-width') == -1) {
+            availablePositions.full = false;
+          }
+        }
+
+        this.$('.editor-component-list-sidebar-list').append(new EditorPageComponentListItemView({
+          model: componentType,
+          availablePositions: availablePositions,
+          _parentId: this.model.get('_parentId'),
+          $parentElement: this.$parentElement,
+          parentView: this.parentView,
+          searchTerms: componentType.get('displayName').toLowerCase()
+        }).$el);
+      }, this);
+    },
+
+    onOverlayClicked: function(event) {
+      if ($(event.target).hasClass('editor-component-list')) {
+        Origin.trigger('editorComponentListView:removeSubviews');
+        $('html').css('overflow-y', '');
+        this.remove();
+      }
+    },
+
+    onSearchKeyup: function(event) {
+      var searchValue = $(event.currentTarget).val();
+      Origin.trigger('editorComponentListView:searchKeyup', searchValue);
+    },
+
+    onScreenResize: function(windowWidth, windowHeight) {
+      this.$('.editor-component-list-sidebar-list').height(windowHeight - this.headerHeight);
+    }
+  }, {
+    template: 'editorPageComponentList'
+  });
+
+  return EditorPageComponentListView;
+});

package/app/modules/editor/contentObject/views/editorPageComponentPasteZoneView.js

@@ -0,0 +1,47 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require){
+  var Origin = require('core/origin');
+  var EditorPasteZoneView = require('../../global/views/editorPasteZoneView');
+
+  var EditorPageComponentPasteZone = EditorPasteZoneView.extend({
+    className : 'paste-zone paste-zone-component display-none',
+    events: {
+      'click .editor-paste-zone-paste': 'onPasteElementClicked'
+    },
+
+    preRender: function () {
+      this.listenTo(this.model, 'destroy', this.remove);
+      this.listenTo(Origin, 'editorView:removeSubViews editorPageView:removePageSubViews', this.remove);
+      this.listenTo(Origin, 'editor:dataLoaded', () => Origin.trigger('editorView:renderPage'))
+    },
+
+    postRender: function () {
+      var view = this;
+      this.$el.addClass('paste-zone-component-' + this.model.get('_pasteZoneLayout'));
+      this.$el.droppable({
+        accept: el =>  el.hasClass('component-draggable') && this.$el.css('visibility') == 'visible',
+        hoverClass: 'paste-zone-droppable',
+        drop: function (e, ui) {
+          var $component = $(ui.draggable);
+          var contentId = $component.attr('data-component-id');
+          var isLeft = $(this).hasClass('paste-zone-component-left');
+          var isRight = $(this).hasClass('paste-zone-component-right');
+          $.ajax({
+            type: 'PATCH',
+            url: `api/content/${contentId}`,
+            data: {
+              _layout: (!isLeft && !isRight) ? 'full' : (isLeft ? 'left' : 'right'),
+              _parentId: view.model.get('_parentId')
+            },
+            success: () => Origin.trigger('editor:refreshData'),
+            error: ({ responseJSON }) => Origin.Notify.alert({ type: 'error', text: responseJSON.message })
+          });
+        }
+      });
+    }
+  }, {
+    template: 'editorPageComponentPasteZone'
+  });
+
+  return EditorPageComponentPasteZone;
+});

package/app/modules/editor/contentObject/views/editorPageComponentView.js

@@ -0,0 +1,202 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(['../../global/views/editorOriginView', 'core/origin'], function(EditorOriginView, Origin) {
+  var EditorPageComponentView = EditorOriginView.extend({
+    className: 'component editable component-draggable',
+    tagName: 'div',
+    settings: _.extend({}, EditorOriginView.prototype.settings, {
+      autoRender: false,
+    }),
+    events: _.extend({}, EditorOriginView.prototype.events, {
+      'click .component-delete': 'deleteComponentPrompt',
+      'click .component-move': 'evaluateMove',
+      'click .open-context-component': 'openContextMenu',
+      'dblclick': 'loadComponentEdit'
+    }),
+
+    preRender: function() {
+      this.$el.addClass('component-' + this.model.get('_layout'));
+      this.listenTo(Origin, 'editorView:removeSubViews editorPageView:removePageSubViews', this.remove);
+      this.listenTo(Origin, 'editor:dataLoaded', () => Origin.trigger('editorView:renderPage'))
+      this.on({
+        'contextMenu:component:edit': this.loadComponentEdit,
+        'contextMenu:component:copy': this.onCopy,
+        'contextMenu:component:copyID': this.onCopyID,
+        'contextMenu:component:delete': this.deleteComponentPrompt
+      });
+      this.componentType = Origin.editor.data.componentTypes.findWhere({ component: this.model.get('_component') });
+      this.evaluateLayout(layouts => {
+        this.model.set('_movePositions', layouts);
+        this.render();
+      });
+    },
+
+    postRender: function () {
+      this.setupDragDrop();
+      _.defer(_.bind(function(){
+        this.trigger('componentView:postRender');
+        Origin.trigger('pageView:itemRendered', this);
+      }, this));
+    },
+
+    deleteComponentPrompt: function(event) {
+      event && event.preventDefault();
+
+      Origin.Notify.confirm({
+        type: 'warning',
+        title: Origin.l10n.t('app.deletecomponent'),
+        text: `${Origin.l10n.t('app.confirmdeletecomponent')}<br/><br/>${Origin.l10n.t('app.confirmdeletecomponentwarning')}`,
+        callback: result => result.isConfirmed && this.deleteComponent()
+      });
+    },
+
+    deleteComponent: function() {
+      this.model.destroy({
+        success: _.bind(function(model) {
+          this.remove();
+          Origin.trigger('editorView:renderPage');
+        }, this),
+        error: function(response) {
+          console.error(response);
+        }
+      })
+    },
+
+    loadComponentEdit: function(event) {
+      const { _courseId, _id, _type } = this.model.attributes;
+      Origin.router.navigateTo(`editor/${_courseId}/${_type}/${_id}/edit`);
+    },
+
+    setupDragDrop: function() {
+      var view = this;
+      var autoScrollTimer = false;
+      var $container = $('.contentPane');
+
+      this.$el.draggable({
+        opacity: 0.8,
+        handle: '.handle',
+        revert: 'invalid',
+        zIndex: 10000,
+        cursorAt: {
+          top: 22,
+          left: 0
+        },
+        appendTo:'.contentPane',
+        containment: '.contentPane',
+        helper: function (e) {
+          /** 
+           * Store the offset to stop the page jumping during the start of drag
+           * because of the drop zones changing the scroll position on the page
+           */
+          view.offsetTopFromWindow = view.$el.offset().top - $(window).scrollTop();
+          /** 
+           * This is in the helper method because the height needs to be
+           * manipulated before the drag start method due to adding drop zones
+           * Passing the supported layout as a parameter allows the method to
+           * determine which drop zones should be displayed
+           */
+          var supportedLayout = view.getSupportedLayout();
+          view.showDropZones(supportedLayout);
+          $(this).attr('data-component-id', view.model.get('_id'));
+          $(this).attr('data-block-id', view.model.get('_parentId'));
+          return $('<div class="drag-helper">' + view.model.get('title') + '</div>');
+        },
+        start: function(event) {
+          // Using the initial offset we're able to position the window back in place
+          $(window).scrollTop(view.$el.offset().top -view.offsetTopFromWindow);
+        },
+        drag: function(event) {
+          window.clearInterval(autoScrollTimer);
+
+          var SCROLL_THRESHOLD = $container.height()*0.2;
+          var SCROLL_INCREMENT = 7;
+
+          var offsetTop = $container.offset().top;
+          var clientY = event.originalEvent.clientY;
+          var scrollAmount;
+
+          if (clientY < (offsetTop+SCROLL_THRESHOLD)) {
+            scrollAmount = -SCROLL_INCREMENT;
+          }
+          else if (clientY > (($container.height()+offsetTop) - SCROLL_THRESHOLD)) {
+            scrollAmount = SCROLL_INCREMENT;
+          }
+
+          if(scrollAmount) {
+            autoScrollTimer = window.setInterval(function() {
+              $container.scrollTop($container.scrollTop()+scrollAmount);
+            }, 10);
+          }
+        },
+        stop: function () {
+          window.clearInterval(autoScrollTimer);
+          view.hideDropZones();
+          $container.scrollTop($(this).offset().top*-1);
+        }
+      });
+    },
+
+    getSupportedLayout: function() {
+      var supportedLayout /*= this.componentType.get('properties')._supportedLayout*/;
+      // allow all layouts by default
+      if(!supportedLayout) return { full: true, half: true };
+
+      return {
+        full: _.indexOf(supportedLayout.enum, 'full-width') > -1,
+        half: _.indexOf(supportedLayout.enum, 'half-width') > -1
+      }
+    },
+
+    evaluateLayout: function(cb) {
+      var supportedLayout = this.getSupportedLayout();
+      var movePositions = {
+        left: false,
+        right: false,
+        full: false
+      };
+      const siblings = this.getSiblings();
+      var showFull = supportedLayout.full && siblings.length < 1;
+      switch(this.model.get('_layout')) {
+        case 'left':
+          movePositions.right = supportedLayout.half;
+          movePositions.full = showFull;
+          break;
+        case 'right':
+          movePositions.left = supportedLayout.half;
+          movePositions.full = showFull;
+          break;
+        case 'full':
+          movePositions.left = supportedLayout.half;
+          movePositions.right = supportedLayout.half;
+          break
+      }
+      cb(movePositions);
+    },
+
+    evaluateMove: function(event) {
+      event && event.preventDefault();
+      var $btn = $(event.currentTarget);
+      const siblings = this.getSiblings();
+      var isLeft = $btn.hasClass('component-move-left');
+      var isRight = $btn.hasClass('component-move-right');
+      // move self to layout of clicked button
+      this.moveComponent(this.model.get('_id'), (isLeft ? 'left' : isRight ? 'right' : 'full'));
+      // move sibling to inverse of self
+      var siblingId = siblings.length && siblings[0].get('_id');
+      if (siblingId) this.moveComponent(siblingId, (isLeft ? 'right' : 'left'));
+    },
+
+    moveComponent: function (id, layout) {
+      $.ajax({
+        type: 'PATCH',
+        url:`api/content/${id}`,
+        data: { _layout: layout },
+        success: () => Origin.trigger('editor:refreshData'),
+        error: jqXHR => Origin.Notify.alert({ type: 'error', text: jqXHR.responseJSON.message })
+      });
+    }
+  }, {
+    template: 'editorPageComponent'
+  });
+
+  return EditorPageComponentView;
+});

package/app/modules/editor/contentObject/views/editorPageEditSidebarView.js

@@ -0,0 +1,28 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var Backbone = require('backbone');
+  var Origin = require('core/origin');
+  var SidebarItemView = require('modules/sidebar/views/sidebarItemView');
+
+  var EditorPageEditSidebarView = SidebarItemView.extend({
+    events: {
+      'click .editor-page-edit-sidebar-save': 'saveEditing',
+      'click .editor-page-edit-sidebar-cancel': 'cancelEditing'
+    },
+
+    saveEditing: function(event) {
+      event && event.preventDefault();
+      this.updateButton('.editor-page-edit-sidebar-save', Origin.l10n.t('app.saving'))
+      Origin.trigger('editorPageEditSidebar:views:save');
+    },
+
+    cancelEditing: function(event) {
+      event && event.preventDefault();
+      Backbone.history.history.back();
+    }
+  }, {
+    template: 'editorPageEditSidebar'
+  });
+
+  return EditorPageEditSidebarView;
+});

package/app/modules/editor/contentObject/views/editorPageEditView.js

@@ -0,0 +1,19 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var Backbone = require('backbone');
+  var Origin = require('core/origin');
+  var EditorOriginView = require('../../global/views/editorOriginView');
+
+  var EditorPageEditView = EditorOriginView.extend({
+    className: "page-edit",
+    tagName: "div",
+
+    preRender: function() {
+      this.listenTo(Origin, 'editorPageEditSidebar:views:save', this.save);
+    }
+  }, {
+    template: 'editorPageEdit'
+  });
+
+  return EditorPageEditView;
+});

package/app/modules/editor/contentObject/views/editorPageSidebarView.js

@@ -0,0 +1,13 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var Origin = require('core/origin');
+  var SidebarItemView = require('modules/sidebar/views/sidebarItemView');
+
+  var EditorPageSidebarView = SidebarItemView.extend({
+    // if adding 'events', extend from the base view
+  }, {
+    template: 'editorPageSidebar'
+  });
+
+  return EditorPageSidebarView;
+});

package/app/modules/editor/contentObject/views/editorPageView.js

@@ -0,0 +1,183 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require){
+  var Backbone = require('backbone');
+  var Helpers = require('core/helpers');
+  var Origin = require('core/origin');
+  var ArticleModel = require('core/models/articleModel');
+  var EditorOriginView = require('../../global/views/editorOriginView');
+  var EditorPageArticleView = require('./editorPageArticleView');
+  var EditorPasteZoneView = require('../../global/views/editorPasteZoneView');
+
+  var EditorPageView = EditorOriginView.extend({
+    className: 'page',
+    tagName: 'div',
+    childrenRenderedCount: 0,
+    events: _.extend({}, EditorOriginView.prototype.events, {
+      'click .add-article': 'addNewArticle',
+      'click .page-edit-button': 'openContextMenu',
+      'dblclick .page-detail': 'loadPageEdit',
+      'click .paste-cancel': 'onPasteCancel'
+    }),
+
+    preRender: function() {
+      Origin.editor.blockCount = 0;
+
+      this.listenTo(Origin, {
+        'editorView:removeSubViews': this.remove,
+        'pageView:itemAnimated': this.onChildRendered,
+        'editorView:renderPage': this.render
+      });
+      Origin.contentHeader.setButtons(Origin.contentHeader.BUTTON_TYPES.OPTIONS, [
+        {
+          title: Origin.l10n.t('app.collapseAllArticles'),
+          icon: 'minus',
+          callbackEvent: 'editorView:collapseArticle:collapse',
+          value: 'collapse',
+          group: 'collapseArticle',
+        },
+        {
+          title: Origin.l10n.t('app.expandAllArticles'),
+          icon: 'plus',
+          callbackEvent: 'editorView:collapseArticle:expand',
+          value: 'expand',
+          group: 'collapseArticle',
+        }
+      ]);
+
+      this._onScroll = _.bind(_.throttle(this.onScroll, 400), this);
+    },
+
+    render: async function() {
+      try {
+        var returnVal = EditorOriginView.prototype.render.apply(this, arguments);
+        this.addArticleViews();
+        return returnVal;
+      } catch(e) {
+        Origin.Notify.alert({ type: 'error', text: Origin.l10n.t('app.errorfetchingdata') })
+      }
+    },
+
+    postRender: function() {
+      this.setupScrollListener();
+    },
+
+    addArticleViews: function() {
+      this.$('.page-articles').empty();
+      Origin.trigger('editorPageView:removePageSubViews');
+      // Insert the 'pre' paste zone for articles
+      var prePasteArticle = new ArticleModel({
+        _parentId: this.model.get('_id'),
+        _type: 'article',
+        _pasteZoneSortOrder: 1
+      });
+      this.$('.page-articles').append(new EditorPasteZoneView({ model: prePasteArticle }).$el);
+      // Iterate over each article and add it to the page
+      this.getChildren()
+        .filter(c => c.get('_type') === 'article')
+        .sort(Helpers.sortContentObjects)
+        .forEach(c => this.addArticleView(c));
+    },
+
+    addArticleView: function(articleModel, scrollIntoView) {
+      scrollIntoView = scrollIntoView || false;
+
+      var newArticleView = new EditorPageArticleView({ model: articleModel });
+      var sortOrder = articleModel.get('_sortOrder');
+      var $articles = this.$('.page-articles .article');
+      var index = sortOrder > 0 ? sortOrder-1 : undefined;
+      var shouldAppend = index === undefined || index >= $articles.length || $articles.length === 0;
+
+      if(shouldAppend) { // add to the end of the article
+        this.$('.page-articles').append(newArticleView.$el);
+      } else { // 'splice' block into the new position
+        $($articles[index]).before(newArticleView.$el);
+      }
+      if (scrollIntoView) {
+        $.scrollTo(newArticleView.$el, 200);
+      }
+      // Increment the 'sortOrder' property
+      articleModel.set('_pasteZoneSortOrder', sortOrder + 1);
+      // Post-article paste zone - sort order of placeholder will be one greater
+      this.$('.page-articles').append(new EditorPasteZoneView({ model: articleModel }).$el);
+      return newArticleView;
+    },
+
+    addNewArticle: function(event) {
+      event && event.preventDefault();
+      (new ArticleModel()).save({
+        _parentId: this.model.get('_id'),
+        _courseId: Origin.editor.data.course.get('_id'),
+        _type: 'article'
+      }, {
+        success: model => {
+          var articleView = this.addArticleView(model);
+          articleView._skipRender = true; // prevent render of blocks in postRender
+          articleView.addBlock();
+        },
+        error: () => Origin.Notify.alert({ type: 'error', text: Origin.l10n.t('app.erroraddingarticle') })
+      });
+    },
+
+    loadPageEdit: function(event) {
+      event && event.preventDefault();
+       Origin.router.navigateTo(`editor/${this.model.get('_courseId')}/page/${this.model.get('_id')}/edit`);
+    },
+
+    // TODO fragile HACK, refactor context menu code to allow what I want to do later...
+    openContextMenu: function(event) {
+      if(!event) return console.log('Error: needs a current target to attach the menu to...');
+      event.preventDefault();
+      event.stopPropagation();
+
+      var fakeModel = new Backbone.Model({ _id: this.model.get('_id'), _type: 'page-min' });
+      var fakeView = new Backbone.View({ model: fakeModel });
+
+      this.listenTo(fakeView, {
+        'contextMenu:page-min:edit': this.loadPageEdit,
+        'contextMenu:page-min:copyID': this.onCopyID
+      });
+      Origin.trigger('contextMenu:open', fakeView, event);
+    },
+
+    onCutArticle: function(view) {
+      this.once('pageView:postRender', view.showPasteZones);
+      this.render();
+    },
+
+    setupScrollListener: function() {
+      $('.contentPane').on('scroll', this._onScroll);
+    },
+
+    onScroll: function(event) {
+      Origin.editor.scrollTo = event.currentTarget.scrollTop;
+    },
+
+    removeScrollListener: function() {
+      $('.contentPane').off('scroll', this._onScroll);
+    },
+
+    onChildRendered: function() {
+      this.childrenRenderedCount++;
+
+      if (this.childrenRenderedCount < Origin.editor.blockCount) {
+        return;
+      }
+      if (Origin.editor.scrollTo > 0) {
+        this.removeScrollListener();
+      }
+      $('.contentPane').scrollTo(Origin.editor.scrollTo, {
+        duration: 200,
+        onAfter: () => this.setupScrollListener()
+      });
+    },
+
+    remove: function() {
+      this.removeScrollListener();
+      EditorOriginView.prototype.remove.apply(this, arguments);
+    }
+  }, {
+    template: 'editorPage'
+  });
+
+  return EditorPageView;
+});

package/app/modules/editor/course/index.js

@@ -0,0 +1,26 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var CourseModel = require('core/models/courseModel');
+  var EditorCourseEditSidebarView = require('./views/editorCourseEditSidebarView');
+  var EditorCourseEditView = require('./views/editorCourseEditView');
+  var EditorHelpers = require('../global/helpers');
+  var Origin = require('core/origin');
+
+  Origin.on('router:project', route1 => route1 === 'new' && createNewCourse());
+  Origin.on('editor:course', renderCourseEdit);
+
+  async function renderCourseEdit() {
+    EditorHelpers.setPageTitle(Origin.editor.data.course);
+    var form = await Origin.scaffold.buildForm({ model: Origin.editor.data.course });
+    Origin.contentPane.setView(EditorCourseEditView, { model: Origin.editor.data.course, form });
+    Origin.sidebar.addView(new EditorCourseEditSidebarView({ form }).$el);
+  }
+
+  async function createNewCourse() {
+    var model = new CourseModel();
+    Origin.trigger('contentHeader:updateTitle', { breadcrumbs: ['dashboard'], title: Origin.l10n.t('app.editornew') });
+    var form = await Origin.scaffold.buildForm({ model });
+    Origin.contentPane.setView(EditorCourseEditView, { model, form });
+    Origin.sidebar.addView(new EditorCourseEditSidebarView({ form }).$el);
+  }
+});

package/app/modules/editor/course/templates/editorCourseEdit.hbs

@@ -0,0 +1,2 @@
+<div class="course-edit-inner form-container">
+</div>

package/app/modules/editor/course/templates/editorCourseEditSidebar.hbs

@@ -0,0 +1,19 @@
+<div class="sidebar-item-inner">
+{{!--     <div class="sidebar-row sidebar-item-title">
+        <h2 class="sidebar-item-title-inner">
+            {{t 'app.projectsettings'}}
+        </h2>
+    </div> --}}
+        <div class="separator"></div>
+        <button class="editor-project-edit-sidebar-save action-primary">
+            <span class="editor-project-edit-sidebar-save-inner">
+                {{t 'app.save'}}
+            </span>
+        </button>
+        <button class="editor-project-edit-sidebar-cancel action-secondary">
+            <span class="editor-project-edit-sidebar-cancel-inner">
+                {{t 'app.cancel'}}
+            </span>
+        </button>
+        <div class="separator" />
+</div>