From 954d73392321936cc66873e57fefdaf93a43d958 Mon Sep 17 00:00:00 2001 From: Brian Hanson Date: Wed, 14 Aug 2024 14:28:48 -0500 Subject: [PATCH 1/8] Queue jobs styling cleanup --- src/web/assets/cp/src/css/_global-sidebar.scss | 7 +++---- src/web/assets/cp/src/js/CP.js | 12 ++---------- src/web/assets/cp/src/js/CraftGlobalSidebar.js | 5 ++++- 3 files changed, 9 insertions(+), 15 deletions(-) diff --git a/src/web/assets/cp/src/css/_global-sidebar.scss b/src/web/assets/cp/src/css/_global-sidebar.scss index 99feba4659d..51bad3194b4 100644 --- a/src/web/assets/cp/src/css/_global-sidebar.scss +++ b/src/web/assets/cp/src/css/_global-sidebar.scss @@ -248,13 +248,12 @@ } .sidebar-action--job { - grid-column: 2/4 !important; - align-items: flex-start; + align-items: start; .sidebar-action__label { flex-wrap: wrap; - padding-block: var(--xs); - gap: var(--xs); + padding-block: var(--2xs); + gap: var(--2xs); } .label { diff --git a/src/web/assets/cp/src/js/CP.js b/src/web/assets/cp/src/js/CP.js index 99fa2614075..07136b27265 100644 --- a/src/web/assets/cp/src/js/CP.js +++ b/src/web/assets/cp/src/js/CP.js @@ -1944,12 +1944,6 @@ var JobProgressIcon = Garnish.Base.extend({ .appendTo($labelContainer) .hide(); - this.$tooltip = $('', { - placement: 'right', - 'self-managed': true, - 'aria-label': this.$label.text(), - }).appendTo(this.$a); - let m = window.devicePixelRatio > 1 ? 2 : 1; this._canvasSize = 18 * m; this._arcPos = this._canvasSize / 2; @@ -1958,10 +1952,10 @@ var JobProgressIcon = Garnish.Base.extend({ this._$bgCanvas = this._createCanvas( 'bg', - this.$li.css('background-color') + '#a3afbb' ); this._$staticCanvas = this._createCanvas('static', this.$li.css('color')); - this._$hoverCanvas = this._createCanvas('hover', '#fff'); + this._$hoverCanvas = this._createCanvas('hover', this.$li.css('color')); this._$failCanvas = this._createCanvas('fail', '#da5a47').hide(); this._staticCtx = this._$staticCanvas[0].getContext('2d'); @@ -1979,8 +1973,6 @@ var JobProgressIcon = Garnish.Base.extend({ } else { this.$progressLabel.hide(); } - - this.$tooltip.attr('aria-label', description); }, setProgress: function (progress) { diff --git a/src/web/assets/cp/src/js/CraftGlobalSidebar.js b/src/web/assets/cp/src/js/CraftGlobalSidebar.js index c5cd3a384d1..9ef73770d29 100644 --- a/src/web/assets/cp/src/js/CraftGlobalSidebar.js +++ b/src/web/assets/cp/src/js/CraftGlobalSidebar.js @@ -1,4 +1,8 @@ class CraftGlobalSidebar extends HTMLElement { + get items() { + return this.querySelectorAll('.sidebar-action'); + } + connectedCallback() { this.trigger = this.querySelector('#sidebar-trigger'); @@ -7,7 +11,6 @@ class CraftGlobalSidebar extends HTMLElement { this.trigger.addEventListener('close', this.collapse.bind(this)); } - this.items = this.querySelectorAll('.sidebar-action'); } disconnectedCallback() { From 9e46396c87a2c7ce8ccdc6cd71ba17352394d497 Mon Sep 17 00:00:00 2001 From: Brian Hanson Date: Wed, 14 Aug 2024 14:34:32 -0500 Subject: [PATCH 2/8] Prettier --- src/web/assets/cp/src/js/CP.js | 5 +---- src/web/assets/cp/src/js/CraftGlobalSidebar.js | 1 - 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/src/web/assets/cp/src/js/CP.js b/src/web/assets/cp/src/js/CP.js index 07136b27265..62b07372ff6 100644 --- a/src/web/assets/cp/src/js/CP.js +++ b/src/web/assets/cp/src/js/CP.js @@ -1950,10 +1950,7 @@ var JobProgressIcon = Garnish.Base.extend({ this._arcRadius = 7 * m; this._lineWidth = 3 * m; - this._$bgCanvas = this._createCanvas( - 'bg', - '#a3afbb' - ); + this._$bgCanvas = this._createCanvas('bg', '#a3afbb'); this._$staticCanvas = this._createCanvas('static', this.$li.css('color')); this._$hoverCanvas = this._createCanvas('hover', this.$li.css('color')); this._$failCanvas = this._createCanvas('fail', '#da5a47').hide(); diff --git a/src/web/assets/cp/src/js/CraftGlobalSidebar.js b/src/web/assets/cp/src/js/CraftGlobalSidebar.js index 9ef73770d29..f347c7049b8 100644 --- a/src/web/assets/cp/src/js/CraftGlobalSidebar.js +++ b/src/web/assets/cp/src/js/CraftGlobalSidebar.js @@ -10,7 +10,6 @@ class CraftGlobalSidebar extends HTMLElement { this.trigger.addEventListener('open', this.expand.bind(this)); this.trigger.addEventListener('close', this.collapse.bind(this)); } - } disconnectedCallback() { From be1c122e32ab8321c182ac03303825229250715a Mon Sep 17 00:00:00 2001 From: Brian Hanson Date: Thu, 15 Aug 2024 09:37:02 -0500 Subject: [PATCH 3/8] Fix error color Stylelint has a [rule for color function notation](https://stylelint.io/user-guide/rules/color-function-notation/) which converts things into the "modern" syntax. --- src/web/assets/cp/src/css/_cp.scss | 2 +- src/web/assets/cp/src/css/_variables.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/web/assets/cp/src/css/_cp.scss b/src/web/assets/cp/src/css/_cp.scss index b820fc51f47..d6c3d381645 100644 --- a/src/web/assets/cp/src/css/_cp.scss +++ b/src/web/assets/cp/src/css/_cp.scss @@ -1766,7 +1766,7 @@ li.breadcrumb-toggle-wrapper { .error-summary { border: 1px solid var(--error-color); box-shadow: none; - background-color: rgb(var(--error-color-rgb) 0.03); + background-color: rgb(var(--error-color-rgb) / 3%); padding: var(--m); } diff --git a/src/web/assets/cp/src/css/_variables.scss b/src/web/assets/cp/src/css/_variables.scss index d9324e75e48..d30f10600c3 100644 --- a/src/web/assets/cp/src/css/_variables.scss +++ b/src/web/assets/cp/src/css/_variables.scss @@ -44,8 +44,8 @@ --dark-sel-color: var(--gray-500); // alert/notice colors - --error-color-rgb: 216, 31, 35; - --error-color: rgb(var(--error-color-rgb) 1); + --error-color-rgb: 216 31 35; + --error-color: rgb(var(--error-color-rgb)); --warning-color: var(--amber-700); --success-color: var(--teal-700); --notice-color: var(--sky-700); From 13cffd6f9ac1e85395e3c2b98daa4b11624cfe41 Mon Sep 17 00:00:00 2001 From: Brian Hanson Date: Thu, 15 Aug 2024 09:41:36 -0500 Subject: [PATCH 4/8] Let floating UI handle positioning --- src/web/assets/cp/src/css/_craft-tooltip.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/web/assets/cp/src/css/_craft-tooltip.scss b/src/web/assets/cp/src/css/_craft-tooltip.scss index fd2a14cc5fc..ce2ff0a0e0b 100644 --- a/src/web/assets/cp/src/css/_craft-tooltip.scss +++ b/src/web/assets/cp/src/css/_craft-tooltip.scss @@ -8,8 +8,11 @@ transition: opacity 100ms ease-in-out, transform 150ms ease-in-out; - inset-block-start: 0; - inset-inline-start: 0; + /* stylelint-disable */ + /* We need to keep these non-logical so floating-ui can override them */ + top: 0; + left: 0; + /* stylelint-enable */ z-index: 99; } From 0d8691dd4e65d0ba5f727c4db96bef5da8d9971a Mon Sep 17 00:00:00 2001 From: Brian Hanson Date: Thu, 15 Aug 2024 09:57:26 -0500 Subject: [PATCH 5/8] Remove title attribute --- src/web/assets/cp/src/js/CP.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/web/assets/cp/src/js/CP.js b/src/web/assets/cp/src/js/CP.js index 62b07372ff6..c55a7eaf590 100644 --- a/src/web/assets/cp/src/js/CP.js +++ b/src/web/assets/cp/src/js/CP.js @@ -1963,7 +1963,6 @@ var JobProgressIcon = Garnish.Base.extend({ }, setDescription: function (description, progressLabel) { - this.$a.attr('title', description); this.$label.text(description); if (progressLabel) { this.$progressLabel.text(progressLabel).show(); From c957674b8ced921e67e727e37df018d3b0c48b31 Mon Sep 17 00:00:00 2001 From: Brian Hanson Date: Thu, 15 Aug 2024 12:08:34 -0500 Subject: [PATCH 6/8] Render tooltip on collapsed nav --- src/web/assets/cp/src/js/CP.js | 15 +++++++++++++++ src/web/assets/cp/src/js/CraftTooltip.js | 1 + 2 files changed, 16 insertions(+) diff --git a/src/web/assets/cp/src/js/CP.js b/src/web/assets/cp/src/js/CP.js index c55a7eaf590..3508b711366 100644 --- a/src/web/assets/cp/src/js/CP.js +++ b/src/web/assets/cp/src/js/CP.js @@ -1894,6 +1894,7 @@ var JobProgressIcon = Garnish.Base.extend({ $a: null, $label: null, $progressLabel: null, + $tooltip: $(), progress: null, failMode: false, @@ -1944,6 +1945,16 @@ var JobProgressIcon = Garnish.Base.extend({ .appendTo($labelContainer) .hide(); + // If the sidebar is collapsed, make sure to add a tooltip. + // CraftGlobalSidebar.js will handle removing it and adding it back on expand/contract + if (Garnish.$bod.data('sidebar') === 'collapsed') { + this.$tooltip = $('', { + placement: 'right', + 'self-managed': true, + 'aria-label': this.$label.text(), + }).appendTo(this.$a); + } + let m = window.devicePixelRatio > 1 ? 2 : 1; this._canvasSize = 18 * m; this._arcPos = this._canvasSize / 2; @@ -1969,6 +1980,10 @@ var JobProgressIcon = Garnish.Base.extend({ } else { this.$progressLabel.hide(); } + + if (this.$tooltip.length) { + this.$tooltip.attr('aria-label', description); + } }, setProgress: function (progress) { diff --git a/src/web/assets/cp/src/js/CraftTooltip.js b/src/web/assets/cp/src/js/CraftTooltip.js index e8e5d025af7..8a457ce5216 100644 --- a/src/web/assets/cp/src/js/CraftTooltip.js +++ b/src/web/assets/cp/src/js/CraftTooltip.js @@ -98,6 +98,7 @@ class CraftTooltip extends HTMLElement { // innerText will remove the arrow, so we have to put it back if we need it. if (this.arrow) { this.renderArrow(); + this.update(); } } } From 287f9302841395161ebff710f4c66cda2f5b5572 Mon Sep 17 00:00:00 2001 From: brandonkelly Date: Sun, 25 Aug 2024 09:00:19 -0400 Subject: [PATCH 7/8] 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 c503559a73b..7320bf86339 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=$('