Skip to content

Commit

Permalink
Refactor VersionCheck component: Update sidebar header text and align…
Browse files Browse the repository at this point in the history 
…ment
  • Loading branch information
@Adammatthiesen
Adammatthiesen committed Dec 20, 2024
1 parent 547782a commit 27b8d72
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 62 deletions.
3 changes: 2 additions & 1 deletion packages/studiocms_dashboard/src/components/SingleSidebar.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import SidebarLink from './SidebarLink.astro';
import Admin from './islands/sidebar/Admin.astro';
import UserAccount from './islands/sidebar/UserAccount.astro';
import VersionCheck from './islands/sidebar/VersionCheck.astro';
import VersionCheckPart from './shared-parts/VersionCheck.astro';
const { versionCheck } = dashboardConfig;
Expand All @@ -23,7 +24,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:sidebar');
<span class="sidebar-title">StudioCMS</span>
{ versionCheck && (
<VersionCheck server:defer>
<span slot="fallback"></span>
<span slot="fallback"><VersionCheckPart /></span>
</VersionCheck>
)}
</div>
Expand Down
64 changes: 3 additions & 61 deletions packages/studiocms_dashboard/src/components/islands/sidebar/VersionCheck.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import studioCMS_SDK_Cache from 'studiocms:sdk/cache';
import currentVersion from 'studiocms:version';
import { Modal } from '@studiocms/ui/components';
import { compare } from 'semver';
import VersionCheckPart from '../../shared-parts/VersionCheck.astro';
const data = await getUserData(Astro);
Expand All @@ -16,7 +17,7 @@ const lastChecked = latestVersion.lastCacheUpdate;
const comparison = compare(currentVersion, latestVersion.version);
const classList = comparison === -1 ? 'outdated' : comparison === 0 ? 'latest' : 'future';
const status = comparison === -1 ? 'outdated' : comparison === 0 ? 'latest' : 'future';
function timeAgo(date: Date) {
const now = new Date();
Expand Down Expand Up @@ -59,10 +60,7 @@ function dateWithTimeAndZone(date: Date) {

{ isAdmin && (
<div class="version-container" id="version-modal-trigger" title="Click for more information" aria-label="Click for more information">
<code class="version-check">
<span class="version-line">v{currentVersion}</span>
<span class="status" class:list={[classList]} />
</code>
<VersionCheckPart {status} />
</div>

<Modal id="version-modal" size="sm">
Expand Down Expand Up @@ -126,20 +124,6 @@ function dateWithTimeAndZone(date: Date) {
cursor: default;
}

.version-check {
display: flex;
flex-direction: row;
gap: .375rem;
width: 100%;
justify-content: left;
text-align: center;
align-items: center;
align-content: center;
vertical-align: middle;
color: hsl(var(--text-muted));
font-size: .875em;
}

.version-link {
text-decoration: none !important;
}
Expand Down Expand Up @@ -218,48 +202,6 @@ function dateWithTimeAndZone(date: Date) {
mask-size: 100% 100%;
}

.outdated {
display: inline-block;
width: 14px;
height: 14px;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 0 1-1.41-8.775a5.25 5.25 0 0 1 10.233-2.33a3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5z'/%3E%3C/svg%3E");
background-color: hsl(var(--warning-base));
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}

.latest {
display: inline-block;
width: 14px;
height: 14px;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m4.5 12.75l6 6l9-13.5'/%3E%3C/svg%3E");
background-color: hsl(var(--success-base));
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}

.future {
display: inline-block;
width: 14px;
height: 14px;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104q-.376.034-.75.082m.75-.082a24.3 24.3 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104q.377.034.75.082M19.8 15.3l-1.57.393A9.07 9.07 0 0 1 12 15a9.07 9.07 0 0 0-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.3 48.3 0 0 1 12 21a48 48 0 0 1-8.135-.687c-1.718-.293-2.3-2.379-1.067-3.61L5 14.5'/%3E%3C/svg%3E");
background-color: hsl(var(--primary-base));
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}

.brand--github {
display: inline-block;
width: 24px;
Expand Down
73 changes: 73 additions & 0 deletions packages/studiocms_dashboard/src/components/shared-parts/VersionCheck.astro
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
---
import currentVersion from 'studiocms:version';
interface Props {
status?: 'outdated' | 'latest' | 'future';
}
const { status } = Astro.props;
---

<code class="version-check">
<span>v{currentVersion}</span>
{status && <span class="status" class:list={[status]} />}
</code>

<style>
.version-check {
display: flex;
flex-direction: row;
gap: .375rem;
width: 100%;
justify-content: left;
text-align: center;
align-items: center;
align-content: center;
vertical-align: middle;
color: hsl(var(--text-muted));
font-size: .875em;
}

.outdated {
display: inline-block;
width: 14px;
height: 14px;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 0 1-1.41-8.775a5.25 5.25 0 0 1 10.233-2.33a3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5z'/%3E%3C/svg%3E");
background-color: hsl(var(--warning-base));
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}

.latest {
display: inline-block;
width: 14px;
height: 14px;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m4.5 12.75l6 6l9-13.5'/%3E%3C/svg%3E");
background-color: hsl(var(--success-base));
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}

.future {
display: inline-block;
width: 14px;
height: 14px;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104q-.376.034-.75.082m.75-.082a24.3 24.3 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104q.377.034.75.082M19.8 15.3l-1.57.393A9.07 9.07 0 0 1 12 15a9.07 9.07 0 0 0-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.3 48.3 0 0 1 12 21a48 48 0 0 1-8.135-.687c-1.718-.293-2.3-2.379-1.067-3.61L5 14.5'/%3E%3C/svg%3E");
background-color: hsl(var(--primary-base));
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}

</style>

0 comments on commit 27b8d72

Please sign in to comment.