Transmission/transmission
1
0
Fork 0
mirror of https://github.com/transmission/transmission.git synced 2025-12-20 02:18:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: revamped search bar for web client (#6948)

Browse Source
This commit is contained in:
Rukario
2025-11-05 12:21:50 -08:00
committed by GitHub
parent 90268076b8
commit c35af04606
3 changed files with 55 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
web/assets/css/transmission-app.scss
View File

@@ -379,7 +379,24 @@ a {
#torrent-search { #torrent-search {
width: 100%; width: 100%;
max-width: 160px; min-width: 140px;
max-width: 226px;
padding-right: 24px; /* accommodate reset button */
&::-webkit-search-cancel-button {
display: none;
}
}
#reset {
display: none;
cursor: pointer;
position: absolute;
right: 2px;
border: 0;
height: 20px;
width: 20px;
background: none;
} }
select { select {

3
web/public_html/index.html
View File

@@ -87,7 +87,10 @@
<span>Show</span> <span>Show</span>
<select id="filter-mode"></select> <select id="filter-mode"></select>
<select id="filter-tracker"></select> <select id="filter-tracker"></select>
<div style="display: flex; position: relative">
<input type="search" id="torrent-search" placeholder="Filter" /> <input type="search" id="torrent-search" placeholder="Filter" />
<input type="reset" id="reset" value="&times;" />
</div>
<span id="filter-count">&nbsp;</span> <span id="filter-count">&nbsp;</span>
<span class="flexible-space"></span> <span class="flexible-space"></span>
<div class="speed-container"> <div class="speed-container">

34
web/src/transmission.js
View File

@@ -89,6 +89,8 @@ export class Transmission extends EventTarget {
}); });
this.popup = Array.from({ length: Transmission.max_popups }).fill(null); this.popup = Array.from({ length: Transmission.max_popups }).fill(null);
this.busytyping = false;
// listen to actions // listen to actions
// TODO: consider adding a mutator listener here to see dynamic additions // TODO: consider adding a mutator listener here to see dynamic additions
for (const element of document.querySelectorAll(`button[data-action]`)) { for (const element of document.querySelectorAll(`button[data-action]`)) {
@@ -244,6 +246,20 @@ export class Transmission extends EventTarget {
e = document.querySelector('#filter-tracker'); e = document.querySelector('#filter-tracker');
newOpts(e, null, [['All', Prefs.FilterAll]]); newOpts(e, null, [['All', Prefs.FilterAll]]);
const s = document.querySelector('#torrent-search');
e = document.querySelector('#reset');
e.addEventListener('click', () => {
s.value = '';
this._setFilterText(s.value);
this.refilterAllSoon();
});
if (s.value.trim()) {
this.filterText = s.value;
e.style.display = 'block';
this.refilterAllSoon();
}
document.addEventListener('keydown', this._keyDown.bind(this)); document.addEventListener('keydown', this._keyDown.bind(this));
document.addEventListener('keyup', this._keyUp.bind(this)); document.addEventListener('keyup', this._keyUp.bind(this));
e = document.querySelector('#torrent-container'); e = document.querySelector('#torrent-container');
@@ -418,7 +434,11 @@ export class Transmission extends EventTarget {
e.classList.add(blur_token); e.classList.add(blur_token);
e.addEventListener('blur', () => e.classList.add(blur_token)); e.addEventListener('blur', () => e.classList.add(blur_token));
e.addEventListener('focus', () => e.classList.remove(blur_token)); e.addEventListener('focus', () => e.classList.remove(blur_token));
e.addEventListener('keyup', () => this._setFilterText(e.value)); e.addEventListener('input', () => {
if (e.value.trim() !== this.filterText) {
this._setFilterText(e.value);
}
});
} }
_onPrefChanged(key, value) { _onPrefChanged(key, value) {
@@ -760,8 +780,15 @@ export class Transmission extends EventTarget {
} }
_setFilterText(search) { _setFilterText(search) {
this.filterText = search ? search.trim() : null; clearTimeout(this.busytyping);
this.busytyping = setTimeout(
() => {
this.busytyping = false;
this.filterText = search.trim();
this.refilterAllSoon(); this.refilterAllSoon();
},
search ? 250 : 0,
);
} }
_onTorrentChanged(event_) { _onTorrentChanged(event_) {
@@ -1108,6 +1135,9 @@ TODO: fix this when notifications get fixed
} }
this._rows = []; this._rows = [];
this.dirtyTorrents = new Set(Object.keys(this._torrents)); this.dirtyTorrents = new Set(Object.keys(this._torrents));
document.querySelector('#reset').style.display =
this.filterText.length > 0 ? 'block' : 'none';
} }
// rows that overlap with dirtyTorrents need to be refiltered. // rows that overlap with dirtyTorrents need to be refiltered.