diff --git a/css/pb.css b/css/pb.css
index aa5073fa67dc20965301ed6f5c947e35b671703d..84c5e86b03db6f0b4461ecbbae6d6fea47d9acaf 100644
--- a/css/pb.css
+++ b/css/pb.css
@@ -420,10 +420,6 @@
line-height: 0.75;
}
-.pb-actions__icon {
- color: #228572;
-}
-
/* <Project/Categories> */
.pb-project-categories__list {
display: inline-block;
@@ -716,8 +712,12 @@
/* <Project/ProjectStatusIndicator> */
.project_status-indicator {
- text-decoration: none;
- font-weight: bold;
+ display: flex;
+ align-items: center;
+ padding: 0.25rem 0.5rem;
+ cursor: not-allowed;
+ border: none;
+ background: none;
}
/* <Search/FilterApplied> */
@@ -1038,3 +1038,11 @@
border: 1px solid;
}
}
+
+.project_status-indicator__label {
+ margin-bottom: 5px;
+ margin-left: 5px;
+ color: var(--color-gray-800);
+ font-size: 16px;
+ font-weight: 700;
+}
diff --git a/images/installed-check-icon.svg b/images/installed-check-icon.svg
new file mode 100644
index 0000000000000000000000000000000000000000..acc80a1af0ac8f8631076c5c1c1ca287fdaf57cf
--- /dev/null
+++ b/images/installed-check-icon.svg
@@ -0,0 +1 @@
+<svg fill="#55565B" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m6.464 13.676c-.194.194-.513.194-.707 0l-4.96-4.955c-.194-.193-.194-.513 0-.707l1.405-1.407c.194-.195.512-.195.707 0l2.849 2.848c.194.193.513.193.707 0l6.629-6.626c.195-.194.514-.194.707 0l1.404 1.404c.193.194.193.513 0 .707z"/></svg>
diff --git a/sveltejs/public/build/bundle.js b/sveltejs/public/build/bundle.js
index 2598ec17d590139dfd37105838e127d5c8677a42..31ddef62d28f2f60a6c4acb391bb1f0e8701fef6 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 fc9f20a4d9dab79018cb86d872583c7930061a13..358482615ee65b140b0aa3278c019d4546fef7ec 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 3e97859e550e3fcbe3389ba339e8f16976ecc818..45b759356994c2898fd639fe1a9d5495d4fc33a0 100644
--- a/sveltejs/src/Project/ActionButton.svelte
+++ b/sveltejs/src/Project/ActionButton.svelte
@@ -10,6 +10,7 @@
updated,
activeTab,
} from '../stores';
+ import ProjectIcon from './ProjectIcon.svelte';
import LoadingEllipsis from './LoadingEllipsis.svelte';
import { processQueue } from '../QueueProcessor';
@@ -62,7 +63,7 @@
<ProjectStatusIndicator {project} statusText={Drupal.t('Not compatible')} />
{:else if project.status === 'active'}
<ProjectStatusIndicator {project} statusText={Drupal.t('Installed')}>
- <span class="pb-actions__icon" aria-hidden="true">✓ </span>
+ <ProjectIcon type="installed" />
</ProjectStatusIndicator>
{:else}
<span>
diff --git a/sveltejs/src/Project/ProjectIcon.svelte b/sveltejs/src/Project/ProjectIcon.svelte
index 8628d1ce4c44627f8530cdda87ec374a45619155..3af92e5668301ce8a9e1ffbaf2aee6f40342f152 100644
--- a/sveltejs/src/Project/ProjectIcon.svelte
+++ b/sveltejs/src/Project/ProjectIcon.svelte
@@ -30,15 +30,32 @@
alt: Drupal.t('Well maintained'),
title: Drupal.t('This module is actively maintained by maintainers.'),
},
+ installed: {
+ path: 'installed-check-icon',
+ alt: Drupal.t('Installed'),
+ title: Drupal.t('This module is installed.'),
+ },
};
</script>
-<button class="pb-project__status-icon-btn" title={typeToImg[type].title}>
- <img
- src="{FULL_MODULE_PATH}/images/{typeToImg[type].path}{DARK_COLOR_SCHEME
- ? '--dark-color-scheme'
- : ''}.svg"
- class={`pb-icon pb-icon--${variant} pb-icon--${type} ${classes}`}
- alt={typeToImg[type].alt}
- />
-</button>
+{#if type === 'installed'}
+ <span class="pb-project__status-icon-span" title={typeToImg[type].title}>
+ <img
+ src="{FULL_MODULE_PATH}/images/{typeToImg[type].path}{DARK_COLOR_SCHEME
+ ? '--dark-color-scheme'
+ : ''}.svg"
+ class={`pb-icon pb-icon--${variant} pb-icon--${type} ${classes}`}
+ alt
+ />
+ </span>
+{:else}
+ <button class="pb-project__status-icon-btn" title={typeToImg[type].title}>
+ <img
+ src="{FULL_MODULE_PATH}/images/{typeToImg[type].path}{DARK_COLOR_SCHEME
+ ? '--dark-color-scheme'
+ : ''}.svg"
+ class={`pb-icon pb-icon--${variant} pb-icon--${type} ${classes}`}
+ alt={typeToImg[type].alt}
+ />
+ </button>
+{/if}
diff --git a/sveltejs/src/Project/ProjectStatusIndicator.svelte b/sveltejs/src/Project/ProjectStatusIndicator.svelte
index 08c02b514b0f42ee3c19720f2b12760474ba7a89..2e812ce9e5c2c9fc6693a7e06977c86bff739a0a 100644
--- a/sveltejs/src/Project/ProjectStatusIndicator.svelte
+++ b/sveltejs/src/Project/ProjectStatusIndicator.svelte
@@ -5,12 +5,12 @@
const { Drupal } = window;
</script>
-<span class="project_status-indicator">
+<button class="project_status-indicator" aria-disabled="true">
<slot />
- <span class="visually-hidden"
- >{Drupal.t('@module is', {
+ <span class="visually-hidden">
+ {Drupal.t('@module is', {
'@module': `${project.title}`,
- })}</span
- >
- {statusText}
-</span>
+ })}
+ </span>
+ <span class="project_status-indicator__label">{statusText}</span>
+</button>
diff --git a/tests/src/FunctionalJavascript/ProjectBrowserInstallerUiTest.php b/tests/src/FunctionalJavascript/ProjectBrowserInstallerUiTest.php
index 16225bf5fd91c8b7dd09f0a59a9123d09a74d466..1f7582c069e1f91abe043460e433c4324466f607 100644
--- a/tests/src/FunctionalJavascript/ProjectBrowserInstallerUiTest.php
+++ b/tests/src/FunctionalJavascript/ProjectBrowserInstallerUiTest.php
@@ -82,8 +82,8 @@ class ProjectBrowserInstallerUiTest extends WebDriverTestBase {
$this->assertSame('Install Cream cheese on a bagel', $download_button->getText());
$download_button->click();
$installed_action = $assert_session->waitForElementVisible('css', "$cream_cheese_module_selector .project_status-indicator", 30000);
- $this->assertTrue($assert_session->waitForText('✓ Cream cheese on a bagel is Installed'));
- $this->assertSame('✓ Cream cheese on a bagel is Installed', $installed_action->getText());
+ $this->assertTrue($assert_session->waitForText('Cream cheese on a bagel is Installed'));
+ $this->assertSame('Cream cheese on a bagel is Installed', $installed_action->getText());
// The activator in project_browser_test should have logged a message.
// @see \Drupal\project_browser_test\TestActivator
@@ -236,8 +236,9 @@ class ProjectBrowserInstallerUiTest extends WebDriverTestBase {
$cream_cheese_button = $page->find('css', "$cream_cheese_module_selector button.project__action_button");
$cream_cheese_button->click();
$installed_action = $assert_session->waitForElementVisible('css', "$cream_cheese_module_selector .project_status-indicator", 30000);
- $assert_session->waitForText('✓ Cream cheese on a bagel is Installed');
- $this->assertSame('✓ Cream cheese on a bagel is Installed', $installed_action->getText());
+ $assert_session->waitForText('Cream cheese on a bagel is Installed');
+ $this->assertSame('Cream cheese on a bagel is Installed', $installed_action->getText());
+
}
/**
@@ -273,8 +274,8 @@ class ProjectBrowserInstallerUiTest extends WebDriverTestBase {
$cream_cheese_button = $page->find('css', "$cream_cheese_module_selector button.project__action_button");
$cream_cheese_button->click();
$installed_action = $assert_session->waitForElementVisible('css', "$cream_cheese_module_selector .project_status-indicator", 30000);
- $assert_session->waitForText('✓ Cream cheese on a bagel is Installed');
- $this->assertSame('✓ Cream cheese on a bagel is Installed', $installed_action->getText());
+ $assert_session->waitForText('Cream cheese on a bagel is Installed');
+ $this->assertSame('Cream cheese on a bagel is Installed', $installed_action->getText());
}
/**
@@ -318,7 +319,7 @@ class ProjectBrowserInstallerUiTest extends WebDriverTestBase {
$installed_action = $assert_session->waitForElementVisible('css', "$cream_cheese_module_selector .project_status-indicator", 30000);
$this->assertNotEmpty($installed_action);
$installed_action = $installed_action->waitFor(30, function ($button) {
- return $button->getText() === '✓ Cream cheese on a bagel is Installed';
+ return $button->getText() === 'Cream cheese on a bagel is Installed';
});
$this->assertTrue($installed_action);
}
@@ -392,13 +393,13 @@ class ProjectBrowserInstallerUiTest extends WebDriverTestBase {
$installed_action = $assert_session->waitForElementVisible('css', "$cream_cheese_module_selector .project_status-indicator", 30000);
$installed_action = $installed_action->waitFor(30, function ($button) {
- return $button->getText() === '✓ Cream cheese on a bagel is Installed';
+ return $button->getText() === 'Cream cheese on a bagel is Installed';
});
$this->assertTrue($installed_action);
$installed_action = $assert_session->waitForElementVisible('css', "$kangaroo_module_selector .project_status-indicator", 30000);
$installed_action = $installed_action->waitFor(30, function ($button) {
- return $button->getText() === '✓ Kangaroo is Installed';
+ return $button->getText() === 'Kangaroo is Installed';
});
$this->assertTrue($installed_action);