diff --git a/css/pb.css b/css/pb.css index 4b9724a9ebf59f11c711e5056cb9f88a280e60ed..a1c7101122b31b564971b6511cb7085ee988b0a0 100644 --- a/css/pb.css +++ b/css/pb.css @@ -1109,3 +1109,11 @@ .views-bulk-actions__item-gin { color: var(--gin-color-text-light); } + +button.project_status-indicator.project_status-indicator-gin { + margin-bottom: 5px; + margin-left: 5px; + background: none; + font-size: 16px; + font-weight: 700; +} diff --git a/images/green-checkmark-icon.svg b/images/green-checkmark-icon.svg new file mode 100644 index 0000000000000000000000000000000000000000..a5b5957f7d27831f5a34f5c0952e55b39e1ec625 --- /dev/null +++ b/images/green-checkmark-icon.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 13"><path d="M2 6.571L5.6 10 14 2" fill="none" stroke="#42a877" stroke-width="3"/></svg> diff --git a/sveltejs/public/build/bundle.js b/sveltejs/public/build/bundle.js index 5c66cad85af1aa2b4f5ec21900d18e58cf13d20a..6a9b13b6d7f9fa13dc03149f0c97338758025003 100644 Binary files a/sveltejs/public/build/bundle.js and b/sveltejs/public/build/bundle.js differ diff --git a/sveltejs/public/build/bundle.js.map b/sveltejs/public/build/bundle.js.map index 480233094349d9370c7284826fc77addd06bd998..e10d701950532613c6245af8b08f0d361ddc9815 100644 Binary files a/sveltejs/public/build/bundle.js.map and b/sveltejs/public/build/bundle.js.map differ diff --git a/sveltejs/src/Project/ActionButton.svelte b/sveltejs/src/Project/ActionButton.svelte index 69550405f54374b4d51c3053a8b131aba4363834..0cc036c4e7768396a0dd4fac8ea649ad523e10ee 100644 --- a/sveltejs/src/Project/ActionButton.svelte +++ b/sveltejs/src/Project/ActionButton.svelte @@ -15,6 +15,7 @@ // eslint-disable-next-line import/no-mutable-exports,import/prefer-default-export export let project; + const drupalSetting = drupalSettings; const { Drupal } = window; const processMultipleProjects = MAX_SELECTIONS === null || MAX_SELECTIONS > 1; @@ -58,7 +59,11 @@ <ProjectStatusIndicator {project} statusText={Drupal.t('Not compatible')} /> {:else if project.status === 'active'} <ProjectStatusIndicator {project} statusText={Drupal.t('Installed')}> - <ProjectIcon type="installed" /> + {#if 'gin' in drupalSetting && drupalSetting.gin.darkmode === '1'} + <ProjectIcon type="greenInstalled" /> + {:else} + <ProjectIcon type="installed" /> + {/if} </ProjectStatusIndicator> {:else} <span> diff --git a/sveltejs/src/Project/ProjectIcon.svelte b/sveltejs/src/Project/ProjectIcon.svelte index 3de062636d8e2f15ca9baeaceb8d2e0f185ab8ae..27a9501c02bebf46ea6ded24f60da69df248cb1d 100644 --- a/sveltejs/src/Project/ProjectIcon.svelte +++ b/sveltejs/src/Project/ProjectIcon.svelte @@ -37,6 +37,11 @@ alt: Drupal.t('Installed'), title: Drupal.t('This project is installed.'), }, + greenInstalled: { + path: 'green-checkmark-icon', + alt: Drupal.t('Installed'), + title: Drupal.t('This module is installed.'), + }, }; </script> diff --git a/sveltejs/src/Project/ProjectStatusIndicator.svelte b/sveltejs/src/Project/ProjectStatusIndicator.svelte index 2e812ce9e5c2c9fc6693a7e06977c86bff739a0a..4ae3a375f2b3289ad662c9e7736efd25559cbba5 100644 --- a/sveltejs/src/Project/ProjectStatusIndicator.svelte +++ b/sveltejs/src/Project/ProjectStatusIndicator.svelte @@ -1,16 +1,27 @@ <script> export let project; export let statusText; + let buttonClasses = ''; + let buttonLabelClasses = ''; const { Drupal } = window; + $: { + // @see css/pb.css + if ('gin' in drupalSettings && drupalSettings.gin.darkmode === '1') { + buttonClasses = 'project_status-indicator-gin'; + buttonLabelClasses = 'project_status-indicator__label-gin'; + } else { + buttonLabelClasses = 'project_status-indicator__label'; + } + } </script> -<button class="project_status-indicator" aria-disabled="true"> +<button class="project_status-indicator {buttonClasses}" aria-disabled="true"> <slot /> <span class="visually-hidden"> {Drupal.t('@module is', { '@module': `${project.title}`, })} </span> - <span class="project_status-indicator__label">{statusText}</span> + <span class={buttonLabelClasses}>{statusText}</span> </button>