Updates autolink UI copy and styles

.gitignore

@@ -8,3 +8,4 @@ node_modules
 images/settings
 gitlens-*.vsix
 tsconfig*.tsbuildinfo
+.DS_Store

.vscodeignore

@@ -35,3 +35,4 @@ tsconfig*.json
 tsconfig*.tsbuildinfo
 webpack.config*.js
 yarn.lock
+.DS_Store

src/webviews/apps/settings/partials/autolinks.html

@@ -1,15 +1,15 @@
 <section id="autolinks" class="section--settings section--collapsible">
 	<div class="section__header">
 		<h2>Autolinks</h2>
-		<p class="section__header-hint">Specifies autolinks to external resources in commit messages. Use <code>&lt;num&gt;</code> as the variable for the reference number.</p>
+		<p class="section__header-hint">Use autolinks to identify external references, like JIRA issues or Zendesk tickets, in your commit messages and convert them to clickable links.</p>
 	</div>
 
 	<div class="section__collapsible">
 		<div class="section__group">
 			<div class="section__content">
 				<div class="setting-list" data-component="autolinks"></div>
-				<p>
-					<button class="button button--flat" id="autolinks" name="autolinks" type="button" data-action="show" data-action-target="autolink">Add new autolink</button>
+				<p class="mb-0">
+					<button class="button button--compact button--flat m-0" type="button" data-action="show" data-action-target="autolink">Add autolink</button>
 				</p>
 			</div>
 		</div>

src/webviews/apps/settings/settings.scss

@@ -504,6 +504,10 @@ section {
 	line-height: normal;
 	margin: 0.5em 0;
 
+	&--centered {
+		align-items: center;
+	}
+
 	input,
 	select {
 		flex-grow: 1;
@@ -524,6 +528,17 @@ section {
 			top: 0;
 			bottom: 0;
 		}
+		padding: {
+			top: 6px;
+			bottom: 6px;
+		}
+
+		.codicon {
+			line-height: 1;
+			vertical-align: text-bottom;
+			margin: -2px 0 -1px;
+			pointer-events: none;
+		}
 	}
 
 	label {
@@ -578,6 +593,14 @@ section {
 	}
 }
 
+.setting__input--long {
+	input[type='text'],
+	input:not([type]) {
+		min-width: 320px;
+		max-width: 320px;
+	}
+}
+
 .setting__input--big {
 	font-size: 2.2rem;
 	font-weight: 200;
@@ -789,6 +812,7 @@ section {
 	}
 }
 
+@import '../shared/codicons';
 @import '../shared/utils';
 @import '../shared/popup';
 // @import '../shared/snow';

src/webviews/apps/settings/settings.ts

@@ -182,12 +182,19 @@ export class SettingsApp extends AppWithConfig {
 
 			case 'show':
 				if (element.dataset.actionTarget) {
-					for (const el of document.querySelectorAll(`[data-show="${element.dataset.actionTarget}"]`)) {
+					for (const el of document.querySelectorAll(`[data-region="${element.dataset.actionTarget}"]`)) {
 						el.classList.remove('hidden');
 						(el.querySelector('input,select,textarea,button') as HTMLElement)?.focus();
 					}
 				}
 				break;
+			case 'hide':
+				if (element.dataset.actionTarget) {
+					for (const el of document.querySelectorAll(`[data-region="${element.dataset.actionTarget}"]`)) {
+						el.classList.add('hidden');
+					}
+				}
+				break;
 		}
 
 		e.preventDefault();
@@ -235,13 +242,14 @@ export class SettingsApp extends AppWithConfig {
 		if ($root == null) return;
 
 		const autolinkTemplate = (index: number, autolink?: AutolinkReference, isNew = false) => `
-			<div class="setting${ isNew ? ' hidden" data-show="autolink' : ''}">
+			<div class="setting${ isNew ? ' hidden" data-region="autolink' : ''}">
 				<div class="setting__group">
 					<div class="setting__input setting__input--short setting__input--with-actions">
 						<label for="autolinks.${index}.prefix">Prefix</label>
 						<input
 							id="autolinks.${index}.prefix"
 							name="autolinks.${index}.prefix"
+							placeholder="TICKET-"
 							data-setting
 							data-setting-type="arrayObject"
 							${ autolink?.prefix ? `value="${encodeURIComponent(autolink.prefix)}"` : ''}
@@ -257,7 +265,7 @@ export class SettingsApp extends AppWithConfig {
 									data-setting-type="arrayObject"
 									${ autolink?.ignoreCase ? 'checked' : ''}
 								>
-								<label class="toggle-button__label" for="autolinks.${index}.ignoreCase" aria-label="Case-sensitive">Aa</label>
+								<label class="toggle-button__label" for="autolinks.${index}.ignoreCase" title="Case-sensitive" aria-label="Case-sensitive">Aa</label>
 							</div>
 							<div class="toggle-button">
 								<input
@@ -269,21 +277,32 @@ export class SettingsApp extends AppWithConfig {
 									data-setting-type="arrayObject"
 									${ autolink?.alphanumeric ? 'checked' : ''}
 								>
-								<label class="toggle-button__label" for="autolinks.${index}.alphanumeric" aria-label="Alphanumeric">a1</label>
+								<label class="toggle-button__label" for="autolinks.${index}.alphanumeric" title="Alphanumeric" aria-label="Alphanumeric">a1</label>
 							</div>
 						</div>
 					</div>
-					<div class="setting__input">
+					<div class="setting__input setting__input--long setting__input--centered">
 						<label for="autolinks.${index}.url">URL</label>
 						<input
 							id="autolinks.${index}.url"
 							name="autolinks.${index}.url"
 							type="text"
+							placeholder="https://example.com/TICKET?q=&lt;num&gt;"
 							data-setting
 							data-setting-type="arrayObject"
 							${ autolink?.url ? `value="${encodeURIComponent(autolink.url)}"` : ''}
 						>
-						${ isNew ? '' : `
+						${ isNew ? `
+							<button
+								class="button button--compact button--flat-subtle"
+								type="button"
+								data-action="hide"
+								data-action-target="autolink"
+								disabled
+								title="Delete"
+								aria-label="Delete"
+							><i class="codicon codicon-close"></i></button>
+						` : `
 							<button
 								id="autolinks.${index}.delete"
 								name="autolinks.${index}.delete"
@@ -291,10 +310,19 @@ export class SettingsApp extends AppWithConfig {
 								type="button"
 								data-setting-type="arrayObject"
 								data-setting-clear
-							>delete</button>
+								title="Delete"
+								aria-label="Delete"
+							><i class="codicon codicon-close"></i></button>
 						`}
 					</div>
 				</div>
+				${ isNew ? `
+					<span class="setting__hint">
+						<span style="line-height: 2rem">
+							<i class="icon icon--sm icon__info"></i> Matches prefixes that are followed by a reference value within commit messages.<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The URL must contain a <code>&lt;num&gt;</code> for the reference value to be included in the link.
+						</span>
+					</span>
+				`: ''}
 			</div>
 		`;
 

src/webviews/apps/shared/codicons.scss

@@ -52,6 +52,7 @@
 
 	vertical-align: middle;
 	line-height: 2rem;
+	letter-spacing: normal;
 }
 
 .codicon-add:before {

src/webviews/apps/shared/utils.scss

@@ -10,6 +10,10 @@
 	display: none !important;
 }
 
+.m-0 {
+	margin: 0 !important;
+}
+
 .mb-0 {
 	margin-bottom: 0 !important;
 }