diff --git a/ext/afform/admin/ang/afGuiEditor.css b/ext/afform/admin/ang/afGuiEditor.css index 330b3b4e465d..93c1d00f38de 100644 --- a/ext/afform/admin/ang/afGuiEditor.css +++ b/ext/afform/admin/ang/afGuiEditor.css @@ -99,7 +99,7 @@ height: 22px; width: 100%; opacity: 0; - transition: opacity 1s 2s; + transition: opacity .2s; position:relative; font-family: "Courier New", Courier, monospace; font-size: 12px; @@ -112,10 +112,15 @@ left: 0; padding-left: 15px; } -#afGuiEditor-canvas:hover .af-gui-bar { +#afGuiEditor:not(.af-gui-dragging) #afGuiEditor-canvas:hover .af-gui-bar { opacity: 1; transition: opacity .2s; } +#afGuiEditor-canvas .af-gui-dragtarget > .af-gui-bar { + background-color: #d7e6ff; + opacity: 1; + transition: opacity .1s; +} #afGuiEditor .af-gui-bar .btn.active { background-color: #b3b3b3; @@ -157,9 +162,14 @@ box-shadow: 0 0 5px #bbbbbb; } -#afGuiEditor .af-gui-container:hover { +#afGuiEditor .af-gui-container:hover, +#afGuiEditor.af-gui-dragging .af-gui-container { border: 2px dashed #757575; } +#afGuiEditor .af-gui-container.af-gui-dragtarget { + border: 2px solid #0071bd; + box-shadow: 0 0 5px #0071bd; +} #afGuiEditor .af-gui-markup { padding: 22px 3px 3px; @@ -203,7 +213,8 @@ } #afGuiEditor [ui-sortable] { - min-height: 25px; + min-height: 60px; + margin-top: 10px; } #afGuiEditor .af-gui-entity-palette-select-list { diff --git a/ext/afform/admin/ang/afGuiEditor.js b/ext/afform/admin/ang/afGuiEditor.js index dc2fe02a9378..3b78fe067d5d 100644 --- a/ext/afform/admin/ang/afGuiEditor.js +++ b/ext/afform/admin/ang/afGuiEditor.js @@ -172,12 +172,28 @@ }; }); - // Shoehorn in a non-angular widget for picking icons $(function() { + // Shoehorn in a non-angular widget for picking icons $('#crm-container').append('
'); CRM.loadScript(CRM.config.resourceBase + 'js/jquery/jquery.crmIconPicker.js').done(function() { $('#af-gui-icon-picker').crmIconPicker(); }); + // Add css class while dragging + $('#crm-container') + .on('sortover', function(e) { + $('.af-gui-container').removeClass('af-gui-dragtarget'); + $(e.target).closest('.af-gui-container').addClass('af-gui-dragtarget'); + }) + .on('sortout', '.af-gui-container', function() { + $(this).removeClass('af-gui-dragtarget'); + }) + .on('sortstart', '#afGuiEditor', function() { + $('#afGuiEditor').addClass('af-gui-dragging'); + }) + .on('sortstop', '#afGuiEditor', function() { + $('.af-gui-dragging').removeClass('af-gui-dragging'); + $('.af-gui-dragtarget').removeClass('af-gui-dragtarget'); + }); }); // Connect bootstrap dropdown.js with angular diff --git a/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.component.js b/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.component.js index 4f5fb1f70784..0b4d6a4d019d 100644 --- a/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.component.js +++ b/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.component.js @@ -38,6 +38,14 @@ } }; + this.sortableOptions = { + handle: '.af-gui-bar', + connectWith: '[ui-sortable]', + cancel: 'input,textarea,button,select,option,a,.dropdown-menu', + placeholder: 'af-gui-dropzone', + containment: '#afGuiEditor-canvas-body' + }; + $scope.isSelectedFieldset = function(entityName) { return entityName === ctrl.editor.getSelectedEntityName(); }; diff --git a/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.html b/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.html index d205755ee559..4082c032924c 100644 --- a/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.html +++ b/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.html @@ -15,7 +15,7 @@