From f1d376fddb2853b2bd41cceffce52245b06f6a84 Mon Sep 17 00:00:00 2001 From: Peter Kiss Date: Mon, 22 Apr 2024 16:29:04 +0200 Subject: [PATCH 1/8] Fix modal initialization --- includes/class-job-dashboard-shortcode.php | 6 +++++- includes/class-job-overlay.php | 4 +--- includes/class-wp-job-manager.php | 2 -- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/includes/class-job-dashboard-shortcode.php b/includes/class-job-dashboard-shortcode.php index defba535b..f76de4f86 100644 --- a/includes/class-job-dashboard-shortcode.php +++ b/includes/class-job-dashboard-shortcode.php @@ -153,6 +153,8 @@ public function output_job_dashboard( $attrs ) { $job_actions[ $job->ID ] = $this->get_job_actions( $job ); } + do_action( 'job_manager_job_dashboard_before', $jobs ); + get_job_manager_template( 'job-dashboard.php', [ @@ -164,7 +166,9 @@ public function output_job_dashboard( $attrs ) { ] ); - do_action( 'job_manager_job_dashboard', $jobs ); + Job_Overlay::instance()->output_modal_element(); + + do_action( 'job_manager_job_dashboard_after', $jobs ); return ob_get_clean(); } diff --git a/includes/class-job-overlay.php b/includes/class-job-overlay.php index cd3b22f42..162795f96 100644 --- a/includes/class-job-overlay.php +++ b/includes/class-job-overlay.php @@ -32,7 +32,6 @@ public function __construct() { add_action( 'job_manager_ajax_job_dashboard_overlay', [ $this, 'ajax_job_overlay' ] ); add_action( 'wp_ajax_job_dashboard_overlay', [ $this, 'ajax_job_overlay' ] ); add_action( 'admin_footer', [ $this, 'init_admin_dashboard_overlay' ], 10 ); - add_action( 'job_manager_job_dashboard', [ $this, 'init_dashboard_overlay' ], 10 ); add_action( 'job_manager_job_overlay_footer', [ $this, 'output_footer_actions' ], 10 ); } @@ -139,6 +138,7 @@ public function init_admin_dashboard_overlay() { } $this->init_dashboard_overlay(); + $this->output_modal_element(); } /** @@ -167,8 +167,6 @@ public function init_dashboard_overlay() { 'statsEnabled' => \WP_Job_Manager\Stats::is_enabled(), ] ); - - $this->output_modal_element(); } /** diff --git a/includes/class-wp-job-manager.php b/includes/class-wp-job-manager.php index 553206f0e..56ab35b01 100644 --- a/includes/class-wp-job-manager.php +++ b/includes/class-wp-job-manager.php @@ -572,8 +572,6 @@ public function frontend_scripts() { ] ); - Job_Overlay::instance()->init_dashboard_overlay(); - wp_localize_script( 'wp-job-manager-job-submission', 'job_manager_job_submission', From dee4ca9675ba1e8ea1d2c5fc5938d148d5a99815 Mon Sep 17 00:00:00 2001 From: Peter Kiss Date: Mon, 22 Apr 2024 16:30:17 +0200 Subject: [PATCH 2/8] Tweak dashboard styles, columns --- assets/css/job-dashboard.scss | 105 +++++++++++++++++++++++++++------- assets/css/ui.elements.scss | 24 ++++++-- templates/job-dashboard.php | 12 ++-- 3 files changed, 110 insertions(+), 31 deletions(-) diff --git a/assets/css/job-dashboard.scss b/assets/css/job-dashboard.scss index c042434ea..237642cff 100644 --- a/assets/css/job-dashboard.scss +++ b/assets/css/job-dashboard.scss @@ -2,10 +2,14 @@ @import 'mixins'; @import 'job-overlay'; -.jm-dashboard { +.jm-dashboard-table { + container-name: jm-dashboard-table; container-type: inline-size; - --jm-dashboard-company-logo-size: calc(var(--jm-ui-icon-size) + 2 * var(--jm-ui-space-xs)); + + &.jm-dashboard-table--large { + container-name: jm-dashboard-table-large; + } } .jm-dashboard-job, .jm-dashboard-header { @@ -42,14 +46,10 @@ .jm-dashboard-job-column { flex: 1 1 calc(50% - var(--jm-ui-space-sm)); min-width: 0; -} - -.jm-dashboard small { - font-size: var(--jm-ui-font-size-s); -} - -.jm-dashboard .job_title { - flex: 1 1 200%; + line-height: 1.2; + small { + white-space: nowrap; + } } .jm-dashboard-job-column.company { @@ -60,7 +60,7 @@ } } -.jm-dashboard .job-status { +.jm-dashboard-table .job-status { text-transform: uppercase; font-weight: 500; font-size: var(--jm-ui-font-size-s); @@ -80,10 +80,6 @@ width: var(--jm-ui-icon-size-s); height: var(--jm-ui-icon-size-s); } - - .job-status-rejected { - color: var(--jm-ui-error-color); - } } .jm-dashboard img.company_logo { @@ -92,20 +88,17 @@ object-fit: contain; } - .jm-dashboard-job-column.actions { - flex: 0.5 1 100%; text-align: right; display: flex; justify-content: flex-end; align-items: center; - gap: var(--jm-ui-space-m); + gap: var(--jm-ui-space-s); } .jm-dashboard-job-column a.job-title { font-weight: 600; font-size: var(--jm-ui-font-size); - line-height: 1.2; text-decoration: unset; } @@ -113,6 +106,29 @@ text-decoration: underline; } +.jm-dashboard-job-column-label { + text-transform: uppercase; + font-size: var(--jm-ui-font-size-s); + font-weight: 200; + color: fadeCurrentColor( 70% ); +} + +.jm-dashboard-job .jm-dashboard-job-column-label { + display: none; +} + +.jm-dashboard small { + font-size: var(--jm-ui-font-size-s); +} + +.jm-dashboard-table .job_title { + flex: 1 1 200%; +} + +.jm-dashboard-table--large .job_title { + flex: 1 1 150%; +} + .jm-dashboard-action { display: block; text-decoration: none; @@ -126,12 +142,33 @@ color: inherit; } -.job-dashboard-action-delete { +.jm-dashboard .job-dashboard-action-delete { color: var(--jm-ui-danger-color); } -@container (width < 540px) -{ +.jm-dashboard .job-manager-pagination { + ul.page-numbers { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + font-size: var(--jm-ui-font-size); + border: unset; + gap: 12px; + } + li { + min-width: 32px; + text-align: center; + border: 1px solid var(--jm-ui-border-light); + border-radius: 2px; + + } +} + +@mixin jm-dashboard-job-mobile { + .jm-dashboard-job-column:where(:not(.job_title):not(.actions):not(.company)) .jm-dashboard-job-column-label { + display: block; + } .jm-dashboard-job { flex-wrap: wrap; align-items: flex-start; @@ -149,4 +186,28 @@ flex-basis: calc( 100% - var(--jm-dashboard-company-logo-size) - var(--jm-ui-space-sm) ); order: -1; } + +} + +@container jm-dashboard-table-large (width < 940px) +{ + .jm-dashboard-job-column.job_title { + flex-basis: 100%; + } +} + +@container jm-dashboard-table (width < 540px) +{ + @include jm-dashboard-job-mobile; +} +@container jm-dashboard-table-large (width < 780px) +{ + @include jm-dashboard-job-mobile; +} + +@container jm-dashboard-table-large (540px < width < 780px) +{ + .jm-dashboard-job-column { + flex: 1 1 calc(33% - 2 * var(--jm-ui-space-sm)); + } } diff --git a/assets/css/ui.elements.scss b/assets/css/ui.elements.scss index 341029714..db96453f1 100644 --- a/assets/css/ui.elements.scss +++ b/assets/css/ui.elements.scss @@ -1,4 +1,8 @@ +.jm-ui { + font-family: var(--jm-ui-font-family); +} + .jm-ui-row { display: flex; gap: var(--jm-ui-space-xs); @@ -26,6 +30,7 @@ text-decoration: none; outline: unset; cursor: pointer; + border: unset; } .jm-ui-button, @@ -51,6 +56,14 @@ } } +a[href].jm-ui-button, +a[href].jm-ui-button--outline, +a[href].jm-ui-button--icon { + html body & { + text-decoration: none; + } +} + .jm-ui-button { border: 1px solid currentColor; @@ -67,13 +80,10 @@ } } -.jm-ui-button--small, +.jm-ui-button--small { - padding: var(--jm-ui-space-xxs) var(--jm-ui-space-s); gap: var(--jm-ui-space-xs); font-size: var(--jm-ui-font-size-s); - font-weight: 400; - letter-spacing: -0.1px; } .jm-ui-button__a { @@ -83,6 +93,10 @@ .jm-ui-button--outline { background: unset; border: 1px solid currentColor; + + &:hover, &:focus { + border: 1px solid currentColor; + } } .jm-ui-button--icon { @@ -238,7 +252,7 @@ font-size: var(--jm-ui-font-size-s); text-align: left; white-space: nowrap; - + line-height: 1.5; display: flex; flex-direction: column; } diff --git a/templates/job-dashboard.php b/templates/job-dashboard.php index d271a6e37..d11b1b804 100644 --- a/templates/job-dashboard.php +++ b/templates/job-dashboard.php @@ -30,9 +30,10 @@ } $submit_job_form_page_id = get_option( 'job_manager_submit_job_form_page_id' ); + ?> -
+
@@ -51,7 +52,8 @@
-
+ 4 ? 'jm-dashboard-table--large' : ''; ?> +
@@ -68,9 +70,9 @@ class="jm-dashboard-empty">
$column ) : ?>
+ class="jm-dashboard-job-column jm-dashboard-job-column-label ">
-
+
@@ -78,6 +80,8 @@ class="jm-dashboard-job-column "> $column ) : ?>
+
From e51a18c9da5c4d9431fbc438da638e93281f0542 Mon Sep 17 00:00:00 2001 From: Peter Kiss Date: Mon, 22 Apr 2024 18:20:08 +0200 Subject: [PATCH 3/8] Expand theme support script --- assets/css/job-dashboard.scss | 2 +- assets/css/job-overlay.scss | 2 +- assets/css/ui.dialog.scss | 4 + assets/css/ui.neutral.scss | 7 +- assets/js/job-dashboard.js | 2 - assets/js/ui-theme-support.js | 169 ++++++++++++++++++++++++++++++++++ assets/js/ui.color-utils.js | 85 +++++++++++++++++ assets/js/ui.js | 25 ----- includes/ui/class-ui.php | 10 +- webpack.config.js | 13 +-- 10 files changed, 279 insertions(+), 40 deletions(-) create mode 100644 assets/js/ui-theme-support.js create mode 100644 assets/js/ui.color-utils.js delete mode 100644 assets/js/ui.js diff --git a/assets/css/job-dashboard.scss b/assets/css/job-dashboard.scss index 237642cff..e2a84a8f4 100644 --- a/assets/css/job-dashboard.scss +++ b/assets/css/job-dashboard.scss @@ -60,7 +60,7 @@ } } -.jm-dashboard-table .job-status { +.jm-dashboard .job-status { text-transform: uppercase; font-weight: 500; font-size: var(--jm-ui-font-size-s); diff --git a/assets/css/job-overlay.scss b/assets/css/job-overlay.scss index 7d94cd43e..a00d7349c 100644 --- a/assets/css/job-overlay.scss +++ b/assets/css/job-overlay.scss @@ -131,7 +131,7 @@ .jm-job-stats { --jm-stat-color-page-view: var(--jm-ui-accent-color); - --jm-stat-color-unique-view: color-mix(in srgb, #000, var(--jm-stat-color-page-view) 40%); + --jm-stat-color-unique-view: var(--jm-ui-accent-alt-color); } .jm-job-stat-details { diff --git a/assets/css/ui.dialog.scss b/assets/css/ui.dialog.scss index 992015282..2f1c48c79 100644 --- a/assets/css/ui.dialog.scss +++ b/assets/css/ui.dialog.scss @@ -21,6 +21,7 @@ } .jm-dialog { + font-family: var(--jm-ui-font-family); font-size: var(--jm-ui-font-size); --jm-dialog-padding: var(--jm-ui-space-l); } @@ -54,6 +55,9 @@ overflow: auto; overscroll-behavior: contain; + a:where(:not(:hover):not(:active):not(:focus)) { + color: var(--jm-ui-accent-color, #1a1a1a); + } } .jm-dialog-modal-container { position: relative; diff --git a/assets/css/ui.neutral.scss b/assets/css/ui.neutral.scss index cea8f5680..2efe0cb4c 100644 --- a/assets/css/ui.neutral.scss +++ b/assets/css/ui.neutral.scss @@ -17,14 +17,16 @@ --jm-ui-faint-color: #{fadeCurrentColor(2.5%)}; --jm-ui-accent-color: inherit; + --jm-ui-accent-alt-color: inherit; --jm-ui-danger-color: #cc1818; - --jm-ui-error-color: #cc1818; + --jm-ui-danger-color-dark-mode: #f86c80; + --jm-ui-error-color: var(--jm-ui-danger-color); --jm-ui-info-color: #4e71ec; --jm-ui-success-color: #4ab866; --jm-ui-accent-color-contrast: #ffffff; --jm-ui-button-color: var(--jm-ui-accent-color, inherit); - --jm-ui-button-contrast: var(--jm-ui-accent-color-contrast, #ffffff); + --jm-ui-button-color-contrast: var(--jm-ui-accent-color-contrast, #ffffff); --jm-ui-link-color: var(--jm-ui-accent-color, inherit); --jm-ui-notice-error: var(--jm-ui-danger-color); @@ -50,6 +52,7 @@ --jm-ui-space-xl: calc(16 * var(--jm-ui-space-base)); // 64px --jm-ui-space-xxl: calc(24 * var(--jm-ui-space-base)); // 96px + --jm-ui-font-family: inherit; --jm-ui-font-size: 16px; --jm-ui-font-size-m: 14px; --jm-ui-font-size-s: 12px; diff --git a/assets/js/job-dashboard.js b/assets/js/job-dashboard.js index 058dd5123..44830eca1 100644 --- a/assets/js/job-dashboard.js +++ b/assets/js/job-dashboard.js @@ -2,8 +2,6 @@ import domReady from '@wordpress/dom-ready'; -import './ui'; - // eslint-disable-next-line camelcase const { i18nConfirmDelete, overlayEndpoint, statsEnabled } = job_manager_job_dashboard; diff --git a/assets/js/ui-theme-support.js b/assets/js/ui-theme-support.js new file mode 100644 index 000000000..73d8c0659 --- /dev/null +++ b/assets/js/ui-theme-support.js @@ -0,0 +1,169 @@ +import domReady from '@wordpress/dom-ready'; + +import { Color } from './ui.color-utils'; + +const uiVariables = { + /** + * Set up accent color variable to the link color. + */ + '--jm-ui-accent-color': { + init: ( { linkColor } ) => linkColor.css, + value: null, + }, + /** + * Set the background color used for overlay elements to dark/light. + */ + '--jm-ui-background-color': { + init: ( { darkMode, backgroundColor } ) => { + if ( backgroundColor ) { + // Check if the page background color is dark enough for dark mode's white text, and use a slightly lighter version of it. + if ( darkMode && backgroundColor.l < 0.5 ) { + return `color-mix(in srgb, #fff, ${ backgroundColor.css } 95%)`; + } + + if ( ! darkMode ) { + return `color-mix(in srgb, #fff, ${ backgroundColor.css } 50%)`; + } + } + return darkMode ? '#111' : '#fff'; + }, + value: null, + }, + /** + * Use the text color for the UI text color if it has enough contrast with the background. + */ + '--jm-ui-text-color': { + init: ( { darkMode, textColor } ) => { + if ( textColor ) { + // Use theme text color if it has enough contrast with the background. + if ( ( darkMode && textColor.l < 0.25 ) || ( ! darkMode && textColor.l > 0.25 ) ) { + return textColor.css; + } + } + return darkMode ? '#fff' : '#000'; + }, + value: null, + }, + /** + * Create a darker or lighter blend of the accent color, based on its brightness. + */ + '--jm-ui-accent-alt-color': { + init: ( { linkColor, backgroundColor } ) => { + const lighten = linkColor.l < 0.2; + const darkBase = backgroundColor?.l < 0.4 ? backgroundColor.css : '#000'; + const base = lighten ? '#fff' : darkBase; + const amount = lighten ? '65%' : '40%'; + + return `color-mix(in srgb, ${ base }, var(--jm-ui-accent-color) ${ amount })`; + }, + value: null, + }, + /** + * Use the background color for the button text color if it has enough contrast. + */ + '--jm-ui-accent-color-contrast': { + init: ( { linkColor, backgroundColor } ) => { + if ( Math.abs( backgroundColor?.l - linkColor?.l ) > 0.5 ) { + return backgroundColor.css; + } + return '#fff'; + }, + value: null, + }, + /** + * Adjust the red danger/error color to be legible on dark backgrounds. + */ + '--jm-ui-danger-color': { + init: ( { backgroundColor } ) => { + if ( backgroundColor?.l < 0.5 ) { + return `var(--jm-ui-danger-color-dark-mode)`; + } + }, + value: null, + default: '#cc1818', + }, + /** + * Try to use the font family (typically sans-serif) used by the theme for menus and other elements, rather than the serif font typically used for post content. + */ + '--jm-ui-font-family': { + init: ( { bodyFontFamily } ) => bodyFontFamily, + value: null, + }, +}; + +/** + * Detect and compute style variables based on the site theme. + * Skips any variable that's been explicitly set already. + */ +function applyThemeStyles() { + const style = getComputedStyle( document.documentElement ); + for ( const [ key, color ] of Object.entries( uiVariables ) ) { + let value = style.getPropertyValue( key ); + + const hasCustomValue = color.default ? color.default !== value : !! value; + + if ( ! hasCustomValue ) { + value = color.init( ThemeStyles.get() ); + if ( value ) { + document.documentElement.style.setProperty( key, value ); + } + } + + color.value = value; + } +} + +/** + * Detected theme styles. + */ +const ThemeStyles = { + linkColor: null, + textColor: null, + backgroundColor: null, + darkMode: false, + bodyFontFamily: false, + initialized: false, + /** + * Query computed styles for various elements to detect theme colors and styles. + */ + detect() { + const postTag = document.createElement( 'div' ); + postTag.classList.add( 'wp-block-post-content' ); + postTag.style.display = 'none'; + const linkTag = document.createElement( 'a' ); + linkTag.setAttribute( 'href', '#?' ); + + const textTag = document.createElement( 'p' ); + + const main = document.querySelector( 'main' ) ?? document.body; + postTag.appendChild( linkTag ); + postTag.appendChild( textTag ); + main.appendChild( postTag ); + this.linkColor = Color.parse( getComputedStyle( linkTag ).color ); + this.textColor = Color.parse( getComputedStyle( textTag ).color ); + this.backgroundColor = Color.parse( getComputedStyle( document.body ).backgroundColor ); + this.calculate(); + postTag.remove(); + + this.bodyFontFamily = getComputedStyle( document.body ).fontFamily; + }, + calculate() { + this.darkMode = this.textColor.l > 0.8; + }, + get() { + if ( ! this.initialized ) { + this.detect(); + this.initialized = true; + } + return this; + }, +}; + +domReady( () => { + try { + applyThemeStyles(); + } catch ( e ) { + // eslint-disable-next-line no-console + console.error( e ); + } +} ); diff --git a/assets/js/ui.color-utils.js b/assets/js/ui.color-utils.js new file mode 100644 index 000000000..481434952 --- /dev/null +++ b/assets/js/ui.color-utils.js @@ -0,0 +1,85 @@ +/** + * Parse a CSS color string and provide RGB and HSL values. + * + * Supported formats: "rgb(255, 255, 255)" or "rgba(255, 255, 255, 0.5)" + * + * Use as Color.parse( rgbString ) + */ +export class Color { + /** + * Create a new Color instance. + * + * @param {Object} rgb RGB values ( { r: 255, g: 255, b: 255, a: 1.0 } ) + */ + constructor( rgb ) { + Object.assign( this, rgb ); + Object.assign( this, Color.toHsl( rgb ) ); + } + + /** + * Parse a CSS color string and return a new Color instance. + * + * @param {string} rgbString CSS color string. + * + * @return {?Color} Color instance or null if parsing failed. + */ + static parse( rgbString ) { + const match = rgbString?.match?.( /(\d+)/g ); + + if ( ! match || match.length < 3 ) { + return null; + } + + const [ r, g, b, a ] = match; + return new Color( { r: +r, g: +g, b: +b, a: a ? +a : 1.0 } ); + } + + /** + * Convert RGB to HSL. + * + * @param {{r: number, g: number, b: number, a: number}} rgb RGB values. + * @return {{a: number, s: number, h: number, l: number}} HSL values. + */ + static toHsl( rgb ) { + let { r, g, b, a } = rgb; + r /= 255; + g /= 255; + b /= 255; + + const max = Math.max( r, g, b ); + const min = Math.min( r, g, b ); + let h, s; + const l = ( max + min ) / 2; + + if ( max === min ) { + h = s = 0; + } else { + const d = max - min; + s = l > 0.5 ? d / ( 2 - max - min ) : d / ( max + min ); + + switch ( max ) { + case r: + h = ( g - b ) / d + ( g < b ? 6 : 0 ); + break; + case g: + h = ( b - r ) / d + 2; + break; + case b: + h = ( r - g ) / d + 4; + break; + } + + h /= 6; + } + + return { h, s, l, a: +a }; + } + + /** + * Render as CSS color string. + */ + get css() { + const { r, g, b, a } = this; + return `rgba(${ r }, ${ g }, ${ b }, ${ a })`; + } +} diff --git a/assets/js/ui.js b/assets/js/ui.js deleted file mode 100644 index ac7cc8309..000000000 --- a/assets/js/ui.js +++ /dev/null @@ -1,25 +0,0 @@ -// detect link color - -export const ACCENT_COLOR_CSS_VAR = '--jm-ui-accent-color'; - -function computeAccentColor() { - if ( getComputedStyle( document.documentElement ).getPropertyValue( ACCENT_COLOR_CSS_VAR ) ) { - return; - } - - const linkTag = document.createElement( 'a' ); - linkTag.setAttribute( 'href', '#?' ); - linkTag.style.display = 'none'; - const main = document.querySelector( 'main' ) ?? document.body; - main.appendChild( linkTag ); - const color = getComputedStyle( linkTag ).color; - linkTag.remove(); - - if ( ! color ) { - return; - } - - document.documentElement.style.setProperty( ACCENT_COLOR_CSS_VAR, color ); -} - -computeAccentColor(); diff --git a/includes/ui/class-ui.php b/includes/ui/class-ui.php index 369ec2b62..997a66cf1 100644 --- a/includes/ui/class-ui.php +++ b/includes/ui/class-ui.php @@ -46,8 +46,9 @@ class UI { private function __construct() { $this->has_ui = false; $this->css_variables = []; - add_action( 'wp_enqueue_scripts', [ $this, 'register_styles' ], 5 ); + add_action( 'init', [ $this, 'register_styles' ], 5 ); add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_styles' ], 99 ); + add_action( 'admin_enqueue_scripts', [ $this, 'enqueue_styles' ], 99 ); } /** @@ -57,6 +58,7 @@ private function __construct() { */ public function register_styles() { \WP_Job_Manager::register_style( 'wp-job-manager-ui', 'css/ui.css', [] ); + \WP_Job_Manager::register_script( 'wp-job-manager-ui-theme-support', 'js/ui-theme-support.js' ); } /** @@ -65,11 +67,13 @@ public function register_styles() { * @access private */ public function enqueue_styles() { - \WP_Job_Manager::register_style( 'wp-job-manager-ui', 'css/ui.css', [] ); - if ( $this->has_ui || wp_style_is( 'wp-job-manager-ui', 'enqueued' ) ) { wp_enqueue_style( 'wp-job-manager-ui' ); + if ( apply_filters( 'job_manager_ui_theme_support_script', true ) ) { + wp_enqueue_script( 'wp-job-manager-ui-theme-support' ); + } + wp_add_inline_style( 'wp-job-manager-ui', $this->generate_inline_css() ); } diff --git a/webpack.config.js b/webpack.config.js index b80bb7402..c0e9fe798 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,5 +1,5 @@ -const defaultConfig = require('@wordpress/scripts/config/webpack.config'); -const path = require('path'); +const defaultConfig = require( '@wordpress/scripts/config/webpack.config' ); +const path = require( 'path' ); const files = { 'js/admin': 'js/admin.js', @@ -9,6 +9,7 @@ const files = { 'js/job-application': 'js/job-application.js', 'js/job-dashboard': 'js/job-dashboard.js', 'js/job-submission': 'js/job-submission.js', + 'js/ui-theme-support': 'js/ui-theme-support.js', 'js/multiselect': 'js/multiselect.js', 'js/term-multiselect': 'js/term-multiselect.js', 'js/wpjm-stats': 'js/wpjm-stats.js', @@ -30,14 +31,14 @@ const files = { const baseDist = 'assets/dist/'; -Object.keys(files).forEach(function (key) { - files[key] = path.resolve('./assets', files[key]); -}); +Object.keys( files ).forEach( function ( key ) { + files[ key ] = path.resolve( './assets', files[ key ] ); +} ); module.exports = { ...defaultConfig, entry: files, output: { - path: path.resolve('.', baseDist), + path: path.resolve( '.', baseDist ), }, }; From b4e70de7e4e098fdc9a50055730537464030b7ee Mon Sep 17 00:00:00 2001 From: Peter Kiss Date: Mon, 22 Apr 2024 18:20:24 +0200 Subject: [PATCH 4/8] Fix loading for admin overlay --- includes/class-job-overlay.php | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/includes/class-job-overlay.php b/includes/class-job-overlay.php index 162795f96..268096fab 100644 --- a/includes/class-job-overlay.php +++ b/includes/class-job-overlay.php @@ -31,7 +31,7 @@ class Job_Overlay { public function __construct() { add_action( 'job_manager_ajax_job_dashboard_overlay', [ $this, 'ajax_job_overlay' ] ); add_action( 'wp_ajax_job_dashboard_overlay', [ $this, 'ajax_job_overlay' ] ); - add_action( 'admin_footer', [ $this, 'init_admin_dashboard_overlay' ], 10 ); + add_action( 'current_screen', [ $this, 'init_admin_dashboard_overlay' ], 10 ); add_action( 'job_manager_job_overlay_footer', [ $this, 'output_footer_actions' ], 10 ); } @@ -85,7 +85,6 @@ public function ajax_job_overlay() { */ public function output_modal_element() { - UI::instance()->enqueue_styles(); wp_enqueue_style( 'wp-job-manager-job-dashboard' ); wp_enqueue_script( 'wp-job-manager-job-dashboard' ); @@ -131,6 +130,11 @@ private function render_job_overlay( $job ) { * @return void */ public function init_admin_dashboard_overlay() { + + if ( ! Stats::is_enabled() ) { + return; + } + $screen = get_current_screen(); if ( ! $screen || 'edit-job_listing' !== $screen->id ) { @@ -138,7 +142,7 @@ public function init_admin_dashboard_overlay() { } $this->init_dashboard_overlay(); - $this->output_modal_element(); + add_action( 'admin_footer', [ $this, 'output_modal_element' ] ); } /** @@ -150,6 +154,7 @@ public function init_admin_dashboard_overlay() { */ public function init_dashboard_overlay() { + UI::ensure_styles(); \WP_Job_Manager::register_script( 'wp-job-manager-job-dashboard', 'js/job-dashboard.js', null, true ); \WP_Job_Manager::register_style( 'wp-job-manager-job-dashboard', 'css/job-dashboard.css', [ 'wp-job-manager-ui' ] ); From 8998cec27b4ba1899accc6cdad593b4235f1af8d Mon Sep 17 00:00:00 2001 From: Peter Kiss Date: Wed, 24 Apr 2024 17:38:04 +0200 Subject: [PATCH 5/8] Fix issues --- assets/js/ui-theme-support.js | 9 +++++---- includes/class-job-dashboard-shortcode.php | 10 ++++++++++ templates/job-dashboard.php | 12 +++++++----- 3 files changed, 22 insertions(+), 9 deletions(-) diff --git a/assets/js/ui-theme-support.js b/assets/js/ui-theme-support.js index 73d8c0659..93c30d8c5 100644 --- a/assets/js/ui-theme-support.js +++ b/assets/js/ui-theme-support.js @@ -100,7 +100,11 @@ function applyThemeStyles() { for ( const [ key, color ] of Object.entries( uiVariables ) ) { let value = style.getPropertyValue( key ); - const hasCustomValue = color.default ? color.default !== value : !! value; + let hasCustomValue = !! value; + + if ( color.default ) { + hasCustomValue = color.default !== value; + } if ( ! hasCustomValue ) { value = color.init( ThemeStyles.get() ); @@ -142,12 +146,9 @@ const ThemeStyles = { this.linkColor = Color.parse( getComputedStyle( linkTag ).color ); this.textColor = Color.parse( getComputedStyle( textTag ).color ); this.backgroundColor = Color.parse( getComputedStyle( document.body ).backgroundColor ); - this.calculate(); postTag.remove(); this.bodyFontFamily = getComputedStyle( document.body ).fontFamily; - }, - calculate() { this.darkMode = this.textColor.l > 0.8; }, get() { diff --git a/includes/class-job-dashboard-shortcode.php b/includes/class-job-dashboard-shortcode.php index f76de4f86..0996b24a2 100644 --- a/includes/class-job-dashboard-shortcode.php +++ b/includes/class-job-dashboard-shortcode.php @@ -153,6 +153,11 @@ public function output_job_dashboard( $attrs ) { $job_actions[ $job->ID ] = $this->get_job_actions( $job ); } + /** + * Output content before the job dashboard. + * + * @param \WP_Query $jobs The jobs displayed. + */ do_action( 'job_manager_job_dashboard_before', $jobs ); get_job_manager_template( @@ -168,6 +173,11 @@ public function output_job_dashboard( $attrs ) { Job_Overlay::instance()->output_modal_element(); + /** + * Output content after the job dashboard. + * + * @param \WP_Query $jobs The jobs displayed. + */ do_action( 'job_manager_job_dashboard_after', $jobs ); return ob_get_clean(); diff --git a/templates/job-dashboard.php b/templates/job-dashboard.php index d11b1b804..bbed08ca5 100644 --- a/templates/job-dashboard.php +++ b/templates/job-dashboard.php @@ -69,10 +69,13 @@ class="jm-dashboard-empty">
$column ) : ?> -
+
+ +
-
+
+ +
@@ -80,8 +83,7 @@ class="jm-dashboard-job-column jm-dashboard-job-column-label $column ) : ?>
-
+
From 9e6910e3cd135dcdeaad4a597f00dc5edba1e6a8 Mon Sep 17 00:00:00 2001 From: Peter Kiss Date: Wed, 24 Apr 2024 17:45:11 +0200 Subject: [PATCH 6/8] Color fixes --- assets/css/ui.dialog.scss | 2 +- assets/js/ui-theme-support.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/assets/css/ui.dialog.scss b/assets/css/ui.dialog.scss index 2f1c48c79..5e4366564 100644 --- a/assets/css/ui.dialog.scss +++ b/assets/css/ui.dialog.scss @@ -55,7 +55,7 @@ overflow: auto; overscroll-behavior: contain; - a:where(:not(:hover):not(:active):not(:focus)) { + body & a:not(:hover):not(:active):not(:focus) { color: var(--jm-ui-accent-color, #1a1a1a); } } diff --git a/assets/js/ui-theme-support.js b/assets/js/ui-theme-support.js index 93c30d8c5..b3a8acbe3 100644 --- a/assets/js/ui-theme-support.js +++ b/assets/js/ui-theme-support.js @@ -69,6 +69,7 @@ const uiVariables = { return '#fff'; }, value: null, + default: '#ffffff', }, /** * Adjust the red danger/error color to be legible on dark backgrounds. From b5d3ae5964eed3f0802ddb0ea37fa3d574375ebf Mon Sep 17 00:00:00 2001 From: Peter Kiss Date: Wed, 24 Apr 2024 18:10:31 +0200 Subject: [PATCH 7/8] Fix variable overrides --- assets/css/ui.neutral.scss | 2 +- includes/ui/class-ui.php | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/assets/css/ui.neutral.scss b/assets/css/ui.neutral.scss index 2efe0cb4c..70f98eff7 100644 --- a/assets/css/ui.neutral.scss +++ b/assets/css/ui.neutral.scss @@ -1,5 +1,5 @@ -:root { +:where(:root) { --jm-ui-border-light: #{fadeCurrentColor(15%)}; --jm-ui-border-faint: #{fadeCurrentColor(5%)}; --jm-ui-border-strong: currentColor; diff --git a/includes/ui/class-ui.php b/includes/ui/class-ui.php index 997a66cf1..ae0c351ff 100644 --- a/includes/ui/class-ui.php +++ b/includes/ui/class-ui.php @@ -114,6 +114,9 @@ private function generate_inline_css() { $css = ':root {'; foreach ( $vars as $name => $value ) { + if ( empty( $value ) ) { + continue; + } $css .= esc_attr( $name ) . ': ' . esc_attr( $value ) . ';'; } From df2ed4356240699fa85e622a7ebadc2c53d45716 Mon Sep 17 00:00:00 2001 From: Peter Kiss Date: Wed, 24 Apr 2024 18:18:13 +0200 Subject: [PATCH 8/8] Update docs --- includes/ui/class-ui.php | 3 +++ 1 file changed, 3 insertions(+) diff --git a/includes/ui/class-ui.php b/includes/ui/class-ui.php index ae0c351ff..ce8c389a9 100644 --- a/includes/ui/class-ui.php +++ b/includes/ui/class-ui.php @@ -70,6 +70,9 @@ public function enqueue_styles() { if ( $this->has_ui || wp_style_is( 'wp-job-manager-ui', 'enqueued' ) ) { wp_enqueue_style( 'wp-job-manager-ui' ); + /** + * Filter whether to load the script that detects theme colors and styles for the plugin's UI elements. + */ if ( apply_filters( 'job_manager_ui_theme_support_script', true ) ) { wp_enqueue_script( 'wp-job-manager-ui-theme-support' ); }