From 2a06a1b19ff6c1b130eee178b8f71ebedab398ad Mon Sep 17 00:00:00 2001
From: Keith Daulton <keith.daulton@gitkraken.com>
Date: Wed, 31 May 2023 16:22:37 -0400
Subject: [PATCH] Updates welcome and home links
---
src/webviews/apps/home/home.html | 22 +++++++-----
src/webviews/apps/home/home.scss | 29 ++--------------
src/webviews/apps/welcome/welcome.html | 61 +++++++++++-----------------------
3 files changed, 36 insertions(+), 76 deletions(-)
diff --git a/src/webviews/apps/home/home.html b/src/webviews/apps/home/home.html
index c3298fa..5f38ab2 100644
--- a/src/webviews/apps/home/home.html
+++ b/src/webviews/apps/home/home.html
@@ -5,10 +5,8 @@
</head>
<body class="home preload" data-placement="#{placement}">
- <a href="#links" class="sr-skip sr-only-focusable">skip to links</a>
- <a href="#main" class="sr-skip sr-only-focusable">skip to main content</a>
<div class="home__nav">
- <nav class="inline-nav" id="links" tabindex="-1" aria-label="Help and Resources">
+ <nav class="inline-nav" id="links" aria-label="Help and Resources">
<div class="inline-nav__group">
<a
class="inline-nav__link inline-nav__link--text"
@@ -104,9 +102,9 @@
</div>
</div>
</header>
- <main class="home__main scrollable" id="main" tabindex="-1">
+ <main class="home__main scrollable" id="main">
<nav class="nav-list">
- <h3 class="nav-list__title t-eyebrow">Popular views</h3>
+ <h2 class="nav-list__title t-eyebrow">Popular views</h2>
<a
class="nav-list__item"
href="command:gitlens.showGraph"
@@ -157,7 +155,7 @@
>
</nav>
<nav class="nav-list">
- <h3 class="nav-list__title t-eyebrow">Activity Bar</h3>
+ <h2 class="nav-list__title t-eyebrow">Activity Bar</h2>
<a
class="nav-list__item"
href="command:workbench.view.extension.gitlens"
@@ -184,7 +182,7 @@
>
</nav>
<nav class="nav-list">
- <h3 class="nav-list__title t-eyebrow">Configuration</h3>
+ <h2 class="nav-list__title t-eyebrow">Configuration</h2>
<a
class="nav-list__item"
href="command:gitlens.showSettingsPage"
@@ -193,9 +191,17 @@
><code-icon class="nav-list__icon" icon="gear"></code-icon
><span class="nav-list__label">GitLens Settings</span></a
>
+ <a
+ class="nav-list__item"
+ href="command:gitlens.showSettingsPage?%22autolinks%22"
+ title="Open Autolinks Settings"
+ aria-label="Open Autolinks Settings"
+ ><code-icon class="nav-list__icon" icon="code"></code-icon
+ ><span class="nav-list__label">Autolinks Settings</span></a
+ >
</nav>
<nav class="nav-list">
- <h3 class="nav-list__title t-eyebrow">Getting Started</h3>
+ <h2 class="nav-list__title t-eyebrow">Getting Started</h2>
<a
class="nav-list__item"
href="command:gitlens.showWelcomePage"
diff --git a/src/webviews/apps/home/home.scss b/src/webviews/apps/home/home.scss
index d1a5568..a27f1b4 100644
--- a/src/webviews/apps/home/home.scss
+++ b/src/webviews/apps/home/home.scss
@@ -1,3 +1,4 @@
+@use '../shared/styles/utils';
@use '../shared/styles/properties';
:root {
@@ -100,18 +101,9 @@ body {
}
:focus {
- outline-color: var(--vscode-focusBorder);
+ @include utils.focus();
}
-.sr-skip {
- position: fixed;
- z-index: var(--gitlens-z-popover);
- top: 0.2rem;
- left: 0.2rem;
- display: inline-block;
- padding: 0.2rem 0.4rem;
- background-color: var(--color-view-background);
-}
.sr-only,
.sr-only-focusable:not(:active):not(:focus) {
clip: rect(0 0 0 0);
@@ -123,26 +115,11 @@ body {
white-space: nowrap;
}
-h3 {
- border: none;
- color: var(--color-view-header-foreground);
- font-size: 1.5rem;
- font-weight: 600;
- margin-bottom: 0;
- white-space: nowrap;
-}
-
-h4 {
- font-size: 1.5rem;
- font-weight: 400;
- margin: 1rem 0;
-}
-
a {
text-decoration: none;
&:focus {
- outline-color: var(--focus-border);
+ @include utils.focus();
}
&:hover {
diff --git a/src/webviews/apps/welcome/welcome.html b/src/webviews/apps/welcome/welcome.html
index f0c725e..c8dd463 100644
--- a/src/webviews/apps/welcome/welcome.html
+++ b/src/webviews/apps/welcome/welcome.html
@@ -466,90 +466,67 @@
<nav class="welcome__resources-nav">
<h3 class="t-eyebrow">Activity Bar</h3>
<a
- class="nav-list__item"
href="command:workbench.view.extension.gitlens"
title="Show GitLens Side Bar"
aria-label="Show GitLens Side Bar"
- ><code-icon class="nav-list__icon" icon="gl-gitlens"></code-icon
- ><span class="nav-list__label">GitLens</span></a
+ ><code-icon icon="gl-gitlens"></code-icon><span>GitLens</span></a
>
<a
- class="nav-list__item"
href="command:workbench.view.scm"
title="Show Source Control Side Bar"
aria-label="Show GitLens Side Bar"
- ><code-icon class="nav-list__icon" icon="source-control"></code-icon
- ><span class="nav-list__label">Source Control</span></a
+ ><code-icon icon="source-control"></code-icon><span>Source Control</span></a
>
<a
- class="nav-list__item"
href="command:workbench.view.extension.gitlensInspect"
title="Show GitLens Inspect Side Bar"
aria-label="Show GitLens Inspect Side Bar"
- ><code-icon class="nav-list__icon" icon="gl-gitlens-inspect"></code-icon
- ><span class="nav-list__label">GitLens Inspect</span></a
+ ><code-icon icon="gl-gitlens-inspect"></code-icon><span>GitLens Inspect</span></a
>
</nav>
<nav class="welcome__resources-nav">
<h3 class="t-eyebrow">Popular views</h3>
- <a
- class="nav-list__item"
- href="command:gitlens.showGraph"
- title="Show Commit Graph"
- aria-label="Show Commit Graph"
- ><code-icon class="nav-list__icon" icon="gl-graph"></code-icon
- ><span class="nav-list__label">Commit Graph ✨</span></a
+ <a href="command:gitlens.showGraph" title="Show Commit Graph" aria-label="Show Commit Graph"
+ ><code-icon icon="gl-graph"></code-icon><span>Commit Graph ✨</span></a
>
- <a
- class="nav-list__item"
- href="command:gitlens.showFocusPage"
- title="Open Focus"
- aria-label="Open Focus"
- ><code-icon class="nav-list__icon" icon="target"></code-icon
- ><span class="nav-list__label">Focus ✨</span></a
+ <a href="command:gitlens.showFocusPage" title="Open Focus" aria-label="Open Focus"
+ ><code-icon icon="target"></code-icon><span>Focus ✨</span></a
>
- <a
- class="nav-list__item"
- href="command:gitlens.showCommitsView"
- title="Show Commits view"
- aria-label="Show Commits view"
- ><code-icon class="nav-list__icon" icon="gl-commits-view"></code-icon
- ><span class="nav-list__label">Commits view</span></a
+ <a href="command:gitlens.showCommitsView" title="Show Commits view" aria-label="Show Commits view"
+ ><code-icon icon="gl-commits-view"></code-icon><span>Commits view</span></a
>
<a
- class="nav-list__item"
href="command:gitlens.showCommitDetailsView"
title="Show Commit Details view"
aria-label="Show Commit Details view"
- ><code-icon class="nav-list__icon" icon="gl-commit-view"></code-icon
- ><span class="nav-list__label">Commit Details view</span></a
+ ><code-icon icon="gl-commit-view"></code-icon><span>Commit Details view</span></a
>
<a
- class="nav-list__item"
href="command:gitlens.showFileHistoryView"
title="Show File History view"
aria-label="Show File History view"
- ><code-icon class="nav-list__icon" icon="gl-history-view"></code-icon
- ><span class="nav-list__label">File History view</span></a
+ ><code-icon icon="gl-history-view"></code-icon><span>File History view</span></a
>
<a
- class="nav-list__item"
href="command:gitlens.showTimelineView"
title="Show Visual File History view"
aria-label="Show Visual File History view"
- ><code-icon class="nav-list__icon" icon="graph-scatter"></code-icon
- ><span class="nav-list__label">Visual File History ✨</span></a
+ ><code-icon icon="graph-scatter"></code-icon><span>Visual File History ✨</span></a
>
</nav>
<nav class="welcome__resources-nav">
<h3 class="t-eyebrow">Configuration</h3>
<a
- class="nav-list__item"
href="command:gitlens.showSettingsPage"
title="Open GitLens Settings"
aria-label="Open GitLens Settings"
- ><code-icon class="nav-list__icon" icon="gear"></code-icon
- ><span class="nav-list__label">GitLens Settings</span></a
+ ><code-icon icon="gear"></code-icon><span>GitLens Settings</span></a
+ >
+ <a
+ href="command:gitlens.showSettingsPage?%22autolinks%22"
+ title="Open Autolinks Settings"
+ aria-label="Open Autolinks Settings"
+ ><code-icon icon="code"></code-icon><span>Autolinks Settings</span></a
>
</nav>