From ea4b577e80b57ae0226c53a456be9fdfe7c484bf Mon Sep 17 00:00:00 2001 From: Iwona Just Date: Wed, 22 May 2024 14:48:56 +0100 Subject: [PATCH 1/4] style fields when in inline editing mode --- src/web/assets/cp/src/css/_main.scss | 26 +++++++++++++++++++ .../assets/cp/src/js/TableElementIndexView.js | 12 ++++++--- 2 files changed, 35 insertions(+), 3 deletions(-) diff --git a/src/web/assets/cp/src/css/_main.scss b/src/web/assets/cp/src/css/_main.scss index 4cd6c1d9615..f1bb90ff444 100644 --- a/src/web/assets/cp/src/css/_main.scss +++ b/src/web/assets/cp/src/css/_main.scss @@ -3576,6 +3576,32 @@ table { .source-path { margin: -22px calc(var(--padding) * -1 + 2px) 24px; } + + .inline-editing { + textarea, + input[type='email'], + input[type='text'].fullwidth, + input[type='url'] { + min-width: 10rem; + } + + .money-container input[type='text'].fullwidth, + input[type='text'][inputmode].fullwidth { + min-width: 5rem; + } + + .lightswitch-outer-container .lightswitch-inner-container span { + overflow: initial; + } + + .selectize.select:not(.fullwidth) { + width: 10rem; + } + + .flex:has(input[type='text'][inputmode].fullwidth) { + flex-wrap: nowrap; + } + } } .elementselectormodal & { diff --git a/src/web/assets/cp/src/js/TableElementIndexView.js b/src/web/assets/cp/src/js/TableElementIndexView.js index aba4b3b409c..d01e9b5ff7a 100644 --- a/src/web/assets/cp/src/js/TableElementIndexView.js +++ b/src/web/assets/cp/src/js/TableElementIndexView.js @@ -172,7 +172,9 @@ Craft.TableElementIndexView = Craft.BaseElementIndexView.extend({ Craft.cp.displaySuccess(Craft.t('app', 'Changes saved.')); this.elementIndex.inlineEditing = false; - this.elementIndex.updateElements(true, false); + this.elementIndex.updateElements(true, false).then(() => { + this.elementIndex.$elements.removeClass('inline-editing'); + }); }) .catch(() => { this.elementIndex.setIndexAvailable(); @@ -186,7 +188,9 @@ Craft.TableElementIndexView = Craft.BaseElementIndexView.extend({ this.addListener(this.$cancelBtn, 'activate', () => { this.$cancelBtn.addClass('loading'); this.elementIndex.inlineEditing = false; - this.elementIndex.updateElements(true, false); + this.elementIndex.updateElements(true, false).then(() => { + this.elementIndex.$elements.removeClass('inline-editing'); + }); }); this.addListener(this.$elementContainer, 'keydown', (event) => { @@ -214,7 +218,9 @@ Craft.TableElementIndexView = Craft.BaseElementIndexView.extend({ this.addListener(this.$editBtn, 'activate', () => { this.$editBtn.addClass('loading'); this.elementIndex.inlineEditing = true; - this.elementIndex.updateElements(true, false); + this.elementIndex.updateElements(true, false).then(() => { + this.elementIndex.$elements.addClass('inline-editing'); + }); }); } }, From fb19e2802c6c5649a8cbfbf138fdfc45a010a223 Mon Sep 17 00:00:00 2001 From: Iwona Just Date: Wed, 22 May 2024 14:53:29 +0100 Subject: [PATCH 2/4] sorting tags when in inline editing mode --- src/web/assets/cp/src/js/TagSelectInput.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/web/assets/cp/src/js/TagSelectInput.js b/src/web/assets/cp/src/js/TagSelectInput.js index f5823348163..e17b9696f2f 100644 --- a/src/web/assets/cp/src/js/TagSelectInput.js +++ b/src/web/assets/cp/src/js/TagSelectInput.js @@ -147,6 +147,9 @@ Craft.TagSelectInput = Craft.BaseElementSelectInput.extend( }, getElementSortAxis: function () { + if (this.$container.parents('.inline-editing').length == 1) { + return 'y'; + } return 'x'; }, From 82c592fd54f8e8983b691395d589f06fc97c251c Mon Sep 17 00:00:00 2001 From: Iwona Just Date: Wed, 22 May 2024 14:58:49 +0100 Subject: [PATCH 3/4] build --- src/web/assets/cp/dist/cp.js | 2 +- src/web/assets/cp/dist/cp.js.map | 2 +- src/web/assets/cp/dist/css/cp.css | 2 +- src/web/assets/cp/dist/css/cp.css.map | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/web/assets/cp/dist/cp.js b/src/web/assets/cp/dist/cp.js index 9d20a2d4d19..3645201647c 100644 --- a/src/web/assets/cp/dist/cp.js +++ b/src/web/assets/cp/dist/cp.js @@ -1,3 +1,3 @@ /*! For license information please see cp.js.LICENSE.txt */ -(function(){var __webpack_modules__={463:function(){Craft.Accordion=Garnish.Base.extend({$trigger:null,targetSelector:null,_$target:null,init:function(t){var e=this;this.$trigger=$(t),this.$trigger.data("accordion")&&(console.warn("Double-instantiating an accordion trigger on an element"),this.$trigger.data("accordion").destroy()),this.$trigger.data("accordion",this),this.targetSelector=this.$trigger.attr("aria-controls")?"#".concat(this.$trigger.attr("aria-controls")):null,this.targetSelector&&(this._$target=$(this.targetSelector)),this.addListener(this.$trigger,"click","onTriggerClick"),this.addListener(this.$trigger,"keypress",(function(t){var n=t.keyCode;n!==Garnish.SPACE_KEY&&n!==Garnish.RETURN_KEY||(t.preventDefault(),e.onTriggerClick())}))},onTriggerClick:function(){"true"===this.$trigger.attr("aria-expanded")?this.hideTarget(this._$target):this.showTarget(this._$target)},showTarget:function(t){var e=this;if(t&&t.length){this.showTarget._currentHeight=t.height(),t.removeClass("hidden"),this.$trigger.removeClass("collapsed").addClass("expanded").attr("aria-expanded","true");for(var n=0;n=this.settings.maxItems)){var e=$(t).appendTo(this.$tbody),n=e.find(".delete");this.settings.sortable&&this.sorter.addItems(e),this.$deleteBtns=this.$deleteBtns.add(n),this.addListener(n,"click","handleDeleteBtnClick"),this.totalItems++,this.updateUI()}},reorderItems:function(){var t=this;if(this.settings.sortable){for(var e=[],n=0;n=this.settings.maxItems?$(this.settings.newItemBtnSelector).addClass("hidden"):$(this.settings.newItemBtnSelector).removeClass("hidden"))}},{defaults:{tableSelector:null,noItemsSelector:null,newItemBtnSelector:null,idAttribute:"data-id",nameAttribute:"data-name",sortable:!1,allowDeleteAll:!0,minItems:0,maxItems:null,reorderAction:null,deleteAction:null,reorderSuccessMessage:Craft.t("app","New order saved."),reorderFailMessage:Craft.t("app","Couldn’t save new order."),confirmDeleteMessage:Craft.t("app","Are you sure you want to delete “{name}”?"),deleteSuccessMessage:Craft.t("app","“{name}” deleted."),deleteFailMessage:Craft.t("app","Couldn’t delete “{name}”."),onReorderItems:$.noop,onDeleteItem:$.noop}})},6872:function(){Craft.AssetImageEditor=Garnish.Modal.extend({$body:null,$footer:null,$imageTools:null,$buttons:null,$cancelBtn:null,$replaceBtn:null,$saveBtn:null,$focalPointBtn:null,$editorContainer:null,$straighten:null,$croppingCanvas:null,$spinner:null,$constraintContainer:null,$constraintRadioInputs:null,$customConstraints:null,canvas:null,image:null,viewport:null,focalPoint:null,grid:null,croppingCanvas:null,clipper:null,croppingRectangle:null,cropperHandles:null,cropperGrid:null,croppingShade:null,imageStraightenAngle:0,viewportRotation:0,originalWidth:0,originalHeight:0,imageVerticeCoords:null,zoomRatio:1,animationInProgress:!1,currentView:"",assetId:null,cacheBust:null,draggingCropper:!1,scalingCropper:!1,draggingFocal:!1,previousMouseX:0,previousMouseY:0,shiftKeyHeld:!1,editorHeight:0,editorWidth:0,cropperState:!1,scaleFactor:1,flipData:{},focalPointState:!1,maxImageSize:null,lastLoadedDimensions:null,imageIsLoading:!1,mouseMoveEvent:null,croppingConstraint:!1,constraintOrientation:"landscape",showingCustomConstraint:!1,saving:!1,renderImage:null,renderCropper:null,_queue:null,init:function(t,e){var n=this;this._queue=new Craft.Queue,this.cacheBust=Date.now(),this.setSettings(e,Craft.AssetImageEditor.defaults),null===this.settings.allowDegreeFractions&&(this.settings.allowDegreeFractions=Craft.isImagick),Garnish.prefersReducedMotion()&&(this.settings.animationDuration=1),this.assetId=t,this.flipData={x:0,y:0},this.$container=$('').appendTo(Garnish.$bod),this.$body=$('
').appendTo(this.$container),this.$footer=$('