Merge pull request #15537 from craftcms/bugfix/sidebar-queue-indicato…

…r-styling

Queue jobs styling cleanup

CHANGELOG-WIP.md

@@ -31,3 +31,4 @@
 
 ### System
 - MySQL mutex locks and PHP session names are now namespaced using the application ID combined with the environment name. ([#15313](https://github.com/craftcms/cms/issues/15313))
+- Fixed styling issues. ([#15537](https://github.com/craftcms/cms/pull/15537))

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);
   }
 

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;
 }
 

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 {

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);

src/web/assets/cp/src/js/CP.js

@@ -1917,6 +1917,7 @@ var JobProgressIcon = Garnish.Base.extend({
   $a: null,
   $label: null,
   $progressLabel: null,
+  $tooltip: $(),
 
   progress: null,
   failMode: false,
@@ -1967,24 +1968,25 @@ var JobProgressIcon = Garnish.Base.extend({
       .appendTo($labelContainer)
       .hide();
 
-    this.$tooltip = $('<craft-tooltip/>', {
-      placement: 'right',
-      'self-managed': true,
-      'aria-label': this.$label.text(),
-    }).appendTo(this.$a);
+    // 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 = $('<craft-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;
     this._arcRadius = 7 * m;
     this._lineWidth = 3 * m;
 
-    this._$bgCanvas = this._createCanvas(
-      'bg',
-      this.$li.css('background-color')
-    );
+    this._$bgCanvas = this._createCanvas('bg', '#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');
@@ -1995,15 +1997,16 @@ 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();
     } else {
       this.$progressLabel.hide();
     }
 
-    this.$tooltip.attr('aria-label', description);
+    if (this.$tooltip.length) {
+      this.$tooltip.attr('aria-label', description);
+    }
   },
 
   setProgress: function (progress) {

src/web/assets/cp/src/js/CraftGlobalSidebar.js

@@ -1,13 +1,15 @@
 class CraftGlobalSidebar extends HTMLElement {
+  get items() {
+    return this.querySelectorAll('.sidebar-action');
+  }
+
   connectedCallback() {
     this.trigger = this.querySelector('#sidebar-trigger');
 
     if (this.trigger) {
       this.trigger.addEventListener('open', this.expand.bind(this));
       this.trigger.addEventListener('close', this.collapse.bind(this));
     }
-
-    this.items = this.querySelectorAll('.sidebar-action');
   }
 
   disconnectedCallback() {

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();
       }
     }
   }