From b429efb2ba277a3628d5abb669b8cbe1cb8700ab Mon Sep 17 00:00:00 2001 From: Mo Alsharaf Date: Thu, 30 May 2024 14:34:54 +1200 Subject: [PATCH] Fix layout issues with userform in elemental context (#1294) --- client/dist/js/userforms-cms.js | 2 +- client/dist/styles/userforms-cms.css | 2 +- client/src/bundles/FieldEditor.js | 20 -------------------- client/src/styles/userforms-cms.scss | 14 ++++++++------ 4 files changed, 10 insertions(+), 28 deletions(-) diff --git a/client/dist/js/userforms-cms.js b/client/dist/js/userforms-cms.js index 078654115..49aa1756d 100644 --- a/client/dist/js/userforms-cms.js +++ b/client/dist/js/userforms-cms.js @@ -1 +1 @@ -!function(){"use strict";var e={662:function(e,o,r){var t=c(r(754)),i=c(r(311)),d=c(r(363)),n=r(691),l=r(648),s=r(845),a=c(r(872)),m=c(r(902));function c(e){return e&&e.__esModule?e:{default:e}}const f=(0,l.loadComponent)("FormBuilderModal");i.default.entwine("ss",(e=>{function o(o,r,t){o?(e(r).show(),e(t).hide()):(e(t).show(),e(r).hide())}e("#Form_EditForm_Fields").entwine({onmatch(){this._super(),this.on("addnewinline",(()=>{this.one("reload",(()=>{this.find(".ss-gridfield-item").last().find(".col-ClassName select").attr("data-folderconfirmed",0)}))}))}}),e("#Form_ConfirmFolderForm_FolderOptions-new").entwine({onmatch(){e("#Form_ConfirmFolderForm_CreateFolder_Holder").detach().appendTo(e("#Form_ConfirmFolderForm_FolderOptions-new").parent().parent()),o(e(this).prop("checked"),"#Form_ConfirmFolderForm_CreateFolder_Holder","#Form_ConfirmFolderForm_FolderID_Holder")},onchange(){o(e(this).prop("checked"),"#Form_ConfirmFolderForm_CreateFolder_Holder","#Form_ConfirmFolderForm_FolderID_Holder")}}),e("#Form_ConfirmFolderForm_FolderOptions-existing").entwine({onmatch(){e("#Form_ConfirmFolderForm_FolderID_Holder").detach().appendTo(e("#Form_ConfirmFolderForm_FolderOptions-existing").parent().parent()),o(e(this).prop("checked"),"#Form_ConfirmFolderForm_FolderID_Holder","#Form_ConfirmFolderForm_CreateFolder_Holder")},onchange(){o(e(this).prop("checked"),"#Form_ConfirmFolderForm_FolderID_Holder","#Form_ConfirmFolderForm_CreateFolder_Holder")}}),e("#Form_ConfirmFolderForm_FolderID_Holder .treedropdownfield.is-open,#Form_ItemEditForm_FolderID .treedropdownfield.is-open").entwine({onunmatch(){const o=window.ss.config.adminUrl||"/admin/",r=a.default.parse((0,s.joinUrlPaths)(o,"user-forms/getfoldergrouppermissions")),t=m.default.parse(r.query);t.FolderID=e(this).find("input[name=FolderID]").val();const d=a.default.format({...r,search:m.default.stringify(t)});return fetch(d,{credentials:"same-origin"}).then((e=>e.json())).then((o=>(e(this).siblings(".form__field-description").html(o),e(this).parent().siblings(".form__field-description").html(o),o))).catch((e=>{i.default.noticeAdd({text:e.message,stay:!1,type:"error"})}))}}),e(".uf-field-editor .ss-gridfield-items .dropdown.editable-column-field.form-group--no-label:not([data-folderconfirmed='1'])").entwine({onchange(){if("SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFileField"!==this.get(0).value)return;if(e(".uf-field-editor .ss-gridfield-items .dropdown.editable-column-field.form-group--no-label[data-folderconfirmed='1']").length)return;let o=e("#confirm-folder__dialog-wrapper");o.length&&o.remove(),o=e('
');const r=e(this).closest("tr").data("id");o.data("id",r),e("body").append(o),o.open()}}),e("#confirm-folder__dialog-wrapper").entwine({ReactRoot:null,onunmatch(){this._clearModal()},open(){this._renderModal(!0)},close(o){if(!o){const o=e("#confirm-folder__dialog-wrapper").data("id");e(`.ss-gridfield-item[data-id='${o}'] .dropdown.editable-column-field.form-group--no-label[data-folderconfirmed='0']`).val("SilverStripe\\UserForms\\Model\\EditableFormField\\EditableTextField")}this._renderModal(!1)},_renderModal(o){var r=this;const i=t.default._t("UserForms.FILE_CONFIRMATION_TITLE","Select file upload folder"),l=e(this).data("id"),c=window.ss.config.adminUrl||"/admin/",u=a.default.parse((0,s.joinUrlPaths)(c,"user-forms/confirmfolderformschema")),F=m.default.parse(u.query);F.ID=l;const p=a.default.format({...u,search:m.default.stringify(F)});let _=this.getReactRoot();_||(_=(0,n.createRoot)(this[0]),this.setReactRoot(_)),_.render(d.default.createElement(f,{title:i,isOpen:o,onSubmit:function(){return r._handleSubmitModal(...arguments)},onClosed:function(){return r._handleHideModal(...arguments)},schemaUrl:p,bodyClassName:"modal__dialog",className:"confirm-folder-modal",responseClassBad:"modal__response modal__response--error",responseClassGood:"modal__response modal__response--good",identifier:"UserForms.ConfirmFolder"}))},_clearModal(){const e=this.getReactRoot();e&&(e.unmount(),this.setReactRoot(null))},_handleHideModal(){return this.close()},_handleSubmitModal(o,r,d){return d().then((()=>{i.default.noticeAdd({text:t.default._t("UserForms.FILE_CONFIRMATION_CONFIRMATION","Folder confirmed successfully."),stay:!1,type:"success"}),this.close(!0),e("[name=action_doSave], [name=action_save]").click()})).catch((e=>{i.default.noticeAdd({text:e.message,stay:!1,type:"error"})}))}}),e("#Form_ConfirmFolderForm_action_cancel").entwine({onclick(){e("#confirm-folder__dialog-wrapper").close()}})}))},299:function(e,o,r){var t;((t=r(311))&&t.__esModule?t:{default:t}).default.entwine("ss",(e=>{let o=null;e(".uf-field-editor .ss-gridfield-items").entwine({onmatch(){let r=0,t=0;const i=e(".uf-field-editor .ss-gridfield-buttonrow").addClass("sticky-buttons"),d=e(".cms-content-header.north").first().height()+parseInt(e(".sticky-buttons").css("padding-top"),10),n=e(".uf-field-editor");this._super(),this.find(".ss-gridfield-item").each(((o,i)=>{switch(e(i).data("class")){case"SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep":return void(t=0);case"SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroup":t+=1,r=t;break;case"SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroupEnd":r=t,t-=1;break;default:r=t}e(i).toggleClass("infieldgroup",r>0);for(let o=1;o<=5;o++)e(i).toggleClass(`infieldgroup-level-${o}`,r>=o)})),o=setInterval((()=>{const e=n.offset().top;i.width("100%"),e>d||0===e?i.removeClass("sticky-buttons"):i.addClass("sticky-buttons")}),300)},onunmatch(){this._super(),clearInterval(o)}}),e(".uf-field-editor .ss-gridfield-buttonrow .action").entwine({onclick(e){this._super(e),this.trigger("addnewinline")}}),e(".uf-field-editor").entwine({onmatch(){this._super(),this.on("addnewinline",(()=>{this.one("reload",(()=>{let o=this.find(".ss-gridfield-item").last(),r=null;"SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroupEnd"===o.attr("data-class")?(r=o,r.prev().find(".col-Title input").focus(),o=r.add(r.prev()),r.css("visibility","hidden")):o.find(".col-Title input").focus(),o.addClass("flashBackground");const t=e(".cms-content-fields");t.length>0&&t.scrollTop(t[0].scrollHeight),r&&r.css("visibility","visible")}))}))},onummatch(){this._super()}})}))},519:function(e,o,r){var t;((t=r(311))&&t.__esModule?t:{default:t}).default.entwine("ss",(e=>{const o=()=>{const o=e('input[name="SendPlain"]').is(":checked");e(".field.toggle-html-only")[o?"hide":"show"](),e(".field.toggle-plain-only")[o?"show":"hide"]()};e("#Form_ItemEditForm .EmailRecipientForm").entwine({onmatch:()=>{o()},onunmatch:()=>{(void 0)._super()}}),e('#Form_ItemEditForm .EmailRecipientForm input[name="SendPlain"]').entwine({onchange:()=>{o()}})}))},648:function(e){e.exports=Injector},872:function(e){e.exports=NodeUrl},363:function(e){e.exports=React},691:function(e){e.exports=ReactDomClient},754:function(e){e.exports=i18n},311:function(e){e.exports=jQuery},902:function(e){e.exports=qs},845:function(e){e.exports=ssUrlLib}},o={};function r(t){var i=o[t];if(void 0!==i)return i.exports;var d=o[t]={exports:{}};return e[t](d,d.exports,r),d.exports}r(299),r(662),r(519)}(); \ No newline at end of file +!function(){"use strict";var e={662:function(e,o,r){var t=c(r(754)),i=c(r(311)),d=c(r(363)),n=r(691),l=r(648),s=r(845),a=c(r(872)),m=c(r(902));function c(e){return e&&e.__esModule?e:{default:e}}const f=(0,l.loadComponent)("FormBuilderModal");i.default.entwine("ss",(e=>{function o(o,r,t){o?(e(r).show(),e(t).hide()):(e(t).show(),e(r).hide())}e("#Form_EditForm_Fields").entwine({onmatch(){this._super(),this.on("addnewinline",(()=>{this.one("reload",(()=>{this.find(".ss-gridfield-item").last().find(".col-ClassName select").attr("data-folderconfirmed",0)}))}))}}),e("#Form_ConfirmFolderForm_FolderOptions-new").entwine({onmatch(){e("#Form_ConfirmFolderForm_CreateFolder_Holder").detach().appendTo(e("#Form_ConfirmFolderForm_FolderOptions-new").parent().parent()),o(e(this).prop("checked"),"#Form_ConfirmFolderForm_CreateFolder_Holder","#Form_ConfirmFolderForm_FolderID_Holder")},onchange(){o(e(this).prop("checked"),"#Form_ConfirmFolderForm_CreateFolder_Holder","#Form_ConfirmFolderForm_FolderID_Holder")}}),e("#Form_ConfirmFolderForm_FolderOptions-existing").entwine({onmatch(){e("#Form_ConfirmFolderForm_FolderID_Holder").detach().appendTo(e("#Form_ConfirmFolderForm_FolderOptions-existing").parent().parent()),o(e(this).prop("checked"),"#Form_ConfirmFolderForm_FolderID_Holder","#Form_ConfirmFolderForm_CreateFolder_Holder")},onchange(){o(e(this).prop("checked"),"#Form_ConfirmFolderForm_FolderID_Holder","#Form_ConfirmFolderForm_CreateFolder_Holder")}}),e("#Form_ConfirmFolderForm_FolderID_Holder .treedropdownfield.is-open,#Form_ItemEditForm_FolderID .treedropdownfield.is-open").entwine({onunmatch(){const o=window.ss.config.adminUrl||"/admin/",r=a.default.parse((0,s.joinUrlPaths)(o,"user-forms/getfoldergrouppermissions")),t=m.default.parse(r.query);t.FolderID=e(this).find("input[name=FolderID]").val();const d=a.default.format({...r,search:m.default.stringify(t)});return fetch(d,{credentials:"same-origin"}).then((e=>e.json())).then((o=>(e(this).siblings(".form__field-description").html(o),e(this).parent().siblings(".form__field-description").html(o),o))).catch((e=>{i.default.noticeAdd({text:e.message,stay:!1,type:"error"})}))}}),e(".uf-field-editor .ss-gridfield-items .dropdown.editable-column-field.form-group--no-label:not([data-folderconfirmed='1'])").entwine({onchange(){if("SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFileField"!==this.get(0).value)return;if(e(".uf-field-editor .ss-gridfield-items .dropdown.editable-column-field.form-group--no-label[data-folderconfirmed='1']").length)return;let o=e("#confirm-folder__dialog-wrapper");o.length&&o.remove(),o=e('
');const r=e(this).closest("tr").data("id");o.data("id",r),e("body").append(o),o.open()}}),e("#confirm-folder__dialog-wrapper").entwine({ReactRoot:null,onunmatch(){this._clearModal()},open(){this._renderModal(!0)},close(o){if(!o){const o=e("#confirm-folder__dialog-wrapper").data("id");e(`.ss-gridfield-item[data-id='${o}'] .dropdown.editable-column-field.form-group--no-label[data-folderconfirmed='0']`).val("SilverStripe\\UserForms\\Model\\EditableFormField\\EditableTextField")}this._renderModal(!1)},_renderModal(o){var r=this;const i=t.default._t("UserForms.FILE_CONFIRMATION_TITLE","Select file upload folder"),l=e(this).data("id"),c=window.ss.config.adminUrl||"/admin/",F=a.default.parse((0,s.joinUrlPaths)(c,"user-forms/confirmfolderformschema")),u=m.default.parse(F.query);u.ID=l;const p=a.default.format({...F,search:m.default.stringify(u)});let _=this.getReactRoot();_||(_=(0,n.createRoot)(this[0]),this.setReactRoot(_)),_.render(d.default.createElement(f,{title:i,isOpen:o,onSubmit:function(){return r._handleSubmitModal(...arguments)},onClosed:function(){return r._handleHideModal(...arguments)},schemaUrl:p,bodyClassName:"modal__dialog",className:"confirm-folder-modal",responseClassBad:"modal__response modal__response--error",responseClassGood:"modal__response modal__response--good",identifier:"UserForms.ConfirmFolder"}))},_clearModal(){const e=this.getReactRoot();e&&(e.unmount(),this.setReactRoot(null))},_handleHideModal(){return this.close()},_handleSubmitModal(o,r,d){return d().then((()=>{i.default.noticeAdd({text:t.default._t("UserForms.FILE_CONFIRMATION_CONFIRMATION","Folder confirmed successfully."),stay:!1,type:"success"}),this.close(!0),e("[name=action_doSave], [name=action_save]").click()})).catch((e=>{i.default.noticeAdd({text:e.message,stay:!1,type:"error"})}))}}),e("#Form_ConfirmFolderForm_action_cancel").entwine({onclick(){e("#confirm-folder__dialog-wrapper").close()}})}))},299:function(e,o,r){var t;((t=r(311))&&t.__esModule?t:{default:t}).default.entwine("ss",(e=>{e(".uf-field-editor .ss-gridfield-items").entwine({onmatch(){let o=0,r=0;this._super(),this.find(".ss-gridfield-item").each(((t,i)=>{switch(e(i).data("class")){case"SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep":return void(r=0);case"SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroup":r+=1,o=r;break;case"SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroupEnd":o=r,r-=1;break;default:o=r}e(i).toggleClass("infieldgroup",o>0);for(let r=1;r<=5;r++)e(i).toggleClass(`infieldgroup-level-${r}`,o>=r)}))},onunmatch(){this._super()}}),e(".uf-field-editor .ss-gridfield-buttonrow .action").entwine({onclick(e){this._super(e),this.trigger("addnewinline")}}),e(".uf-field-editor").entwine({onmatch(){this._super(),this.on("addnewinline",(()=>{this.one("reload",(()=>{let o=this.find(".ss-gridfield-item").last(),r=null;"SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroupEnd"===o.attr("data-class")?(r=o,r.prev().find(".col-Title input").focus(),o=r.add(r.prev()),r.css("visibility","hidden")):o.find(".col-Title input").focus(),o.addClass("flashBackground");const t=e(".cms-content-fields");t.length>0&&t.scrollTop(t[0].scrollHeight),r&&r.css("visibility","visible")}))}))},onummatch(){this._super()}})}))},519:function(e,o,r){var t;((t=r(311))&&t.__esModule?t:{default:t}).default.entwine("ss",(e=>{const o=()=>{const o=e('input[name="SendPlain"]').is(":checked");e(".field.toggle-html-only")[o?"hide":"show"](),e(".field.toggle-plain-only")[o?"show":"hide"]()};e("#Form_ItemEditForm .EmailRecipientForm").entwine({onmatch:()=>{o()},onunmatch:()=>{(void 0)._super()}}),e('#Form_ItemEditForm .EmailRecipientForm input[name="SendPlain"]').entwine({onchange:()=>{o()}})}))},648:function(e){e.exports=Injector},872:function(e){e.exports=NodeUrl},363:function(e){e.exports=React},691:function(e){e.exports=ReactDomClient},754:function(e){e.exports=i18n},311:function(e){e.exports=jQuery},902:function(e){e.exports=qs},845:function(e){e.exports=ssUrlLib}},o={};function r(t){var i=o[t];if(void 0!==i)return i.exports;var d=o[t]={exports:{}};return e[t](d,d.exports,r),d.exports}r(299),r(662),r(519)}(); \ No newline at end of file diff --git a/client/dist/styles/userforms-cms.css b/client/dist/styles/userforms-cms.css index 82053b7cc..638791b4b 100644 --- a/client/dist/styles/userforms-cms.css +++ b/client/dist/styles/userforms-cms.css @@ -1 +1 @@ -.uf-field-editor{padding-bottom:0}.uf-field-editor .grid-field__table .ss-gridfield-item{height:46px}.uf-field-editor .grid-field__table .ss-gridfield-item,.uf-field-editor .grid-field__table .ss-gridfield-item:hover{background:#fff}.uf-field-editor .grid-field__table .ss-gridfield-item td{border-right-width:0;vertical-align:middle;padding-top:6px;padding-bottom:6px}.uf-field-editor .grid-field__table .ss-gridfield-item td:last-child{border-right-width:1px}.uf-field-editor .grid-field__table .ss-gridfield-item .handle{min-height:46px}.uf-field-editor .grid-field__table .ss-gridfield-item.flash-background{animation:flash-background 2s linear}.uf-field-editor .grid-field__table .ss-gridfield-item.ui-sortable-placeholder{height:50px}.uf-field-editor .grid-field__table .ss-gridfield-item .form-group{padding:0;margin-bottom:2px;color:#43536d}.uf-field-editor .grid-field__table .ss-gridfield-item .form-group:after{border-bottom:0}.uf-field-editor .grid-field__table .ss-gridfield-item .form-group .form__field-label{flex:auto;max-width:100%;padding-bottom:0}.uf-field-editor .grid-field__table .ss-gridfield-item.infieldgroup,.uf-field-editor .grid-field__table .ss-gridfield-item.infieldgroup:hover{background:#fff}.uf-field-editor .grid-field__table .ss-gridfield-item.infieldgroup .col-reorder,.uf-field-editor .grid-field__table .ss-gridfield-item.infieldgroup .handle{background:#ced5e1}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\UserForms\Model\EditableFormField\EditableFormStep],.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\UserForms\Model\EditableFormField\EditableFormStep]:hover{background:#566b8d;color:#fff}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\UserForms\Model\EditableFormField\EditableFormStep] label{font-weight:bold;color:#fff;font-size:15px;padding-bottom:0}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\UserForms\Model\EditableFormField\EditableFormStep]+.ss-gridfield-item[data-class=SilverStripe\UserForms\Model\EditableFormField\EditableFieldGroup] td{border-top:3px solid #ced5e1}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\UserForms\Model\EditableFormField\EditableFormStep] .grid-field__icon-action:before{color:#fff}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\UserForms\Model\EditableFormField\EditableFormStep] .grid-field__icon-action:hover:before{color:#566b8d}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\UserForms\Model\EditableFormField\EditableFieldGroup] td{border-top:3px solid #ced5e1}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\UserForms\Model\EditableFormField\EditableFieldGroup] .form__field-label{font-weight:bold;padding-bottom:0;color:#43536d}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\UserForms\Model\EditableFormField\EditableFieldGroupEnd] td{border-bottom:3px solid #ced5e1}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\UserForms\Model\EditableFormField\EditableFieldGroupEnd]+.ss-gridfield-item[data-class=SilverStripe\UserForms\Model\EditableFormField\EditableFieldGroupEnd]{border-top:0}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\UserForms\Model\EditableFormField\EditableFieldGroupEnd] .col-buttons .action{display:none}.uf-field-editor .sticky-buttons{position:fixed;top:73px;z-index:1;background:#fafbfc;border-bottom:1px solid #dbe0e9;padding:12px;margin-left:-12px}.uf-field-editor .sticky-buttons button.action{margin-bottom:0}.uf-field-editor .sticky-buttons~.ss-gridfield-table{margin-top:73px}.cms .grid-field__table .grid-field__uf-filter-header{padding:0}.cms .grid-field__table .grid-field__uf-filter-header .form__fieldgroup-label{color:#fff}.cms .grid-field__table .grid-field__uf-filter-header .ss-gridfield-button-filter:not(.trigger){background-color:#3fa142}.cms .grid-field__table .grid-field__uf-filter-header .ss-gridfield-button-filter:not(.trigger):hover{background-color:#3fa142}.cms .grid-field__table .grid-field__uf-filter-header table{width:100%}.cms-preview{z-index:2}.userform-field__allowed-length .form__fieldgroup-item{margin-top:0}.userform-field__allowed-length .field.text{min-width:auto}.userform-field__allowed-length input.text{width:4rem}.userform-field__allowed-length-separator{display:inline-block;margin:0 .6rem .6rem 0}.userform-confirm-folder .form__field-description{display:flex;align-items:center}.userform-confirm-folder .form__field-description .icon::before{font-size:16px;line-height:inherit;margin-right:6px;vertical-align:middle} +.uf-field-editor{padding-bottom:0;position:relative}.uf-field-editor .grid-field__table .ss-gridfield-item{height:46px}.uf-field-editor .grid-field__table .ss-gridfield-item,.uf-field-editor .grid-field__table .ss-gridfield-item:hover{background:#fff}.uf-field-editor .grid-field__table .ss-gridfield-item td{border-right-width:0;vertical-align:middle;padding-top:6px;padding-bottom:6px}.uf-field-editor .grid-field__table .ss-gridfield-item td:last-child{border-right-width:1px}.uf-field-editor .grid-field__table .ss-gridfield-item .handle{min-height:46px}.uf-field-editor .grid-field__table .ss-gridfield-item.flash-background{animation:flash-background 2s linear}.uf-field-editor .grid-field__table .ss-gridfield-item.ui-sortable-placeholder{height:50px}.uf-field-editor .grid-field__table .ss-gridfield-item .form-group{padding:0;margin-bottom:2px;color:#43536d}.uf-field-editor .grid-field__table .ss-gridfield-item .form-group:after{border-bottom:0}.uf-field-editor .grid-field__table .ss-gridfield-item .form-group .form__field-label{flex:auto;max-width:100%;padding-bottom:0}.uf-field-editor .grid-field__table .ss-gridfield-item.infieldgroup,.uf-field-editor .grid-field__table .ss-gridfield-item.infieldgroup:hover{background:#fff}.uf-field-editor .grid-field__table .ss-gridfield-item.infieldgroup .col-reorder,.uf-field-editor .grid-field__table .ss-gridfield-item.infieldgroup .handle{background:#ced5e1}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\UserForms\Model\EditableFormField\EditableFormStep],.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\UserForms\Model\EditableFormField\EditableFormStep]:hover{background:#566b8d;color:#fff}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\UserForms\Model\EditableFormField\EditableFormStep] label{font-weight:bold;color:#fff;font-size:15px;padding-bottom:0}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\UserForms\Model\EditableFormField\EditableFormStep]+.ss-gridfield-item[data-class=SilverStripe\UserForms\Model\EditableFormField\EditableFieldGroup] td{border-top:3px solid #ced5e1}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\UserForms\Model\EditableFormField\EditableFormStep] .grid-field__icon-action:before{color:#fff}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\UserForms\Model\EditableFormField\EditableFormStep] .grid-field__icon-action:hover:before{color:#566b8d}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\UserForms\Model\EditableFormField\EditableFieldGroup] td{border-top:3px solid #ced5e1}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\UserForms\Model\EditableFormField\EditableFieldGroup] .form__field-label{font-weight:bold;padding-bottom:0;color:#43536d}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\UserForms\Model\EditableFormField\EditableFieldGroupEnd] td{border-bottom:3px solid #ced5e1}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\UserForms\Model\EditableFormField\EditableFieldGroupEnd]+.ss-gridfield-item[data-class=SilverStripe\UserForms\Model\EditableFormField\EditableFieldGroupEnd]{border-top:0}.uf-field-editor .grid-field__table .ss-gridfield-item[data-class=SilverStripe\UserForms\Model\EditableFormField\EditableFieldGroupEnd] .col-buttons .action{display:none}.uf-field-editor .ss-gridfield-buttonrow-before{position:sticky;top:-1.5rem;z-index:1;transform:translate(0, -0.1rem);width:calc(100% + 3.1rem) !important;background:#fafbfc;border-bottom:1px solid #dbe0e9;padding:1rem}.uf-field-editor .ss-gridfield-buttonrow-before button.action{margin-bottom:0}.uf-field-editor .ss-gridfield-buttonrow-before~.ss-gridfield-table{margin-top:73px}.cms .grid-field__table .grid-field__uf-filter-header{padding:0}.cms .grid-field__table .grid-field__uf-filter-header .form__fieldgroup-label{color:#fff}.cms .grid-field__table .grid-field__uf-filter-header .ss-gridfield-button-filter:not(.trigger){background-color:#3fa142}.cms .grid-field__table .grid-field__uf-filter-header .ss-gridfield-button-filter:not(.trigger):hover{background-color:#3fa142}.cms .grid-field__table .grid-field__uf-filter-header table{width:100%}.cms-preview{z-index:2}.userform-field__allowed-length .form__fieldgroup-item{margin-top:0}.userform-field__allowed-length .field.text{min-width:auto}.userform-field__allowed-length input.text{width:4rem}.userform-field__allowed-length-separator{display:inline-block;margin:0 .6rem .6rem 0}.userform-confirm-folder .form__field-description{display:flex;align-items:center}.userform-confirm-folder .form__field-description .icon::before{font-size:16px;line-height:inherit;margin-right:6px;vertical-align:middle} diff --git a/client/src/bundles/FieldEditor.js b/client/src/bundles/FieldEditor.js index 956961abb..f9f425649 100644 --- a/client/src/bundles/FieldEditor.js +++ b/client/src/bundles/FieldEditor.js @@ -5,17 +5,10 @@ import jQuery from 'jquery'; jQuery.entwine('ss', ($) => { - let stickyHeaderInterval = null; - $('.uf-field-editor .ss-gridfield-items').entwine({ onmatch() { let thisLevel = 0; let depth = 0; - const $buttonrow = $('.uf-field-editor .ss-gridfield-buttonrow').addClass('sticky-buttons'); - const navHeight = $('.cms-content-header.north').first().height() - + parseInt($('.sticky-buttons').css('padding-top'), 10); - const fieldEditor = $('.uf-field-editor'); - this._super(); // Loop through all rows and set necessary styles @@ -45,22 +38,9 @@ jQuery.entwine('ss', ($) => { $(el).toggleClass(`infieldgroup-level-${i}`, thisLevel >= i); } }); - - // Make sure gridfield buttons stick to top of page when user scrolls down - stickyHeaderInterval = setInterval(() => { - const offsetTop = fieldEditor.offset().top; - $buttonrow.width('100%'); - if (offsetTop > navHeight || offsetTop === 0) { - $buttonrow.removeClass('sticky-buttons'); - } else { - $buttonrow.addClass('sticky-buttons'); - } - }, 300); }, onunmatch() { this._super(); - - clearInterval(stickyHeaderInterval); }, }); diff --git a/client/src/styles/userforms-cms.scss b/client/src/styles/userforms-cms.scss index cffafca8a..1304aceab 100644 --- a/client/src/styles/userforms-cms.scss +++ b/client/src/styles/userforms-cms.scss @@ -1,5 +1,6 @@ .uf-field-editor { padding-bottom: 0; + position: relative; // Row styles .grid-field__table { @@ -122,14 +123,15 @@ } } - .sticky-buttons { - position: fixed; - top: 73px; + .ss-gridfield-buttonrow-before { + position: sticky; + top: -1.5rem; z-index: 1; + transform: translate(0, -0.1rem); + width: calc(100% + 3.1rem) !important; background: $body-bg; border-bottom: 1px solid $border-color-light; - padding: 12px; - margin-left: -12px; + padding: 1rem; & button.action { margin-bottom: 0; @@ -202,4 +204,4 @@ vertical-align: middle; } } -} \ No newline at end of file +}