content/static: directory tree fixes
- Reduces padding inside of directories rows.
- Directories expand when entering text search.
Change-Id: Idba574f0b6ca71d6bb940553f2a3e727b07218ef
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/290070
Trust: Jamal Carvalho <jamal@golang.org>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
TryBot-Result: kokoro <noreply+kokoro@google.com>
Reviewed-by: Julie Qiu <julie@golang.org>
diff --git a/content/static/css/unit_directories.css b/content/static/css/unit_directories.css
index 88da146..e8ac431 100644
--- a/content/static/css/unit_directories.css
+++ b/content/static/css/unit_directories.css
@@ -37,7 +37,7 @@
border-bottom: 0.0625rem solid var(--gray-8);
max-width: 32rem;
min-width: 12rem;
- padding: 0.5rem 1rem;
+ padding: 0.25rem 1rem;
word-break: break-word;
}
.UnitDirectories th {
diff --git a/content/static/js/table.js b/content/static/js/table.js
index 14a934a..11c4cdf 100644
--- a/content/static/js/table.js
+++ b/content/static/js/table.js
@@ -25,12 +25,15 @@
this.toggles.forEach(t => {
t.addEventListener('click', e => {
this.handleToggleClick(e);
- this.updateVisibleItems();
});
});
this.expandAll?.addEventListener('click', () => {
- this.handleExpandAllClick();
- this.updateVisibleItems();
+ this.expandAllItems();
+ });
+ document.addEventListener('keydown', e => {
+ if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
+ this.expandAllItems();
+ }
});
}
handleToggleClick(e) {
@@ -43,11 +46,13 @@
const isExpanded = target?.getAttribute('aria-expanded') === 'true';
target?.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');
e.stopPropagation();
+ this.updateVisibleItems();
}
- handleExpandAllClick() {
+ expandAllItems() {
this.table
.querySelectorAll('[aria-expanded=false]')
.forEach(t => t.setAttribute('aria-expanded', 'true'));
+ this.updateVisibleItems();
}
updateVisibleItems() {
this.toggles.forEach(t => {
diff --git a/content/static/js/table.js.map b/content/static/js/table.js.map
index 1bfd1cc..0066a5f 100644
--- a/content/static/js/table.js.map
+++ b/content/static/js/table.js.map
@@ -1 +1 @@
-{"version":3,"file":"table.js","sourceRoot":"","sources":["table.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"table.js","sourceRoot":"","sources":["table.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/content/static/js/table.test.ts b/content/static/js/table.test.ts
index 78b715b..3519234 100644
--- a/content/static/js/table.test.ts
+++ b/content/static/js/table.test.ts
@@ -87,4 +87,10 @@
expect(document.querySelector('#hidden-row-id-1').classList).toContain('visible');
expect(document.querySelector('#hidden-row-id-2').classList).toContain('visible');
});
+
+ it('expands rows when entering text search', () => {
+ document.dispatchEvent(new KeyboardEvent('keydown', { key: 'f', ctrlKey: true }));
+ expect(document.querySelector('#hidden-row-id-1').classList).toContain('visible');
+ expect(document.querySelector('#hidden-row-id-2').classList).toContain('visible');
+ });
});
diff --git a/content/static/js/table.ts b/content/static/js/table.ts
index 3845a9d..e8911e7 100644
--- a/content/static/js/table.ts
+++ b/content/static/js/table.ts
@@ -53,12 +53,16 @@
this.toggles.forEach(t => {
t.addEventListener('click', e => {
this.handleToggleClick(e);
- this.updateVisibleItems();
});
});
this.expandAll?.addEventListener('click', () => {
- this.handleExpandAllClick();
- this.updateVisibleItems();
+ this.expandAllItems();
+ });
+
+ document.addEventListener('keydown', e => {
+ if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
+ this.expandAllItems();
+ }
});
}
@@ -72,12 +76,14 @@
const isExpanded = target?.getAttribute('aria-expanded') === 'true';
target?.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');
e.stopPropagation();
+ this.updateVisibleItems();
}
- private handleExpandAllClick() {
+ private expandAllItems() {
this.table
.querySelectorAll('[aria-expanded=false]')
.forEach(t => t.setAttribute('aria-expanded', 'true'));
+ this.updateVisibleItems();
}
private updateVisibleItems() {
