CloudFlare DNS: fix search (custom filter), search icon left of box

This commit is contained in:
master3395
2026-02-16 15:14:00 +01:00
parent 34b9d53ff7
commit 048a62d74a
3 changed files with 25 additions and 6 deletions

View File

@@ -568,9 +568,10 @@
.sortable-th { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable-th:hover { background: var(--bg-hover, #f0f1ff); }
.sort-icon { margin-left: 4px; opacity: 0.7; font-size: 0.75rem; }
.dns-search-wrap { position: relative; max-width: 400px; }
.dns-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
.dns-search-input { padding-left: 36px; padding-right: 36px; border-radius: 8px; border: 1px solid var(--border-primary, #e2e8f0); }
.dns-search-wrap { position: relative; max-width: 440px; display: flex; align-items: center; }
.dns-search-icon-left { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 38px; margin-right: 0; padding-right: 0; color: #94a3b8; background: var(--bg-hover, #f1f5f9); border: 1px solid var(--border-primary, #e2e8f0); border-right: none; border-radius: 8px 0 0 8px; flex-shrink: 0; }
.dns-search-input { flex: 1; padding-left: 12px; padding-right: 36px; border-radius: 0 8px 8px 0; border: 1px solid var(--border-primary, #e2e8f0); border-left: none; min-width: 0; }
.dns-search-wrap:focus-within .dns-search-icon-left { background: var(--bg-primary, #fff); color: #5b5fcf; }
.dns-search-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #94a3b8; padding: 4px; }
.dns-search-clear:hover { color: #64748b; }
</style>
@@ -907,7 +908,7 @@
</h4>
<div class="dns-search-wrap mb-3" ng-if="!loadingRecords && records.length > 0">
<i class="fas fa-search dns-search-icon"></i>
<span class="dns-search-icon-left"><i class="fas fa-search"></i></span>
<input type="text" class="form-control dns-search-input" ng-model="dnsSearchFilter" placeholder="{% trans 'Search name, type, value...' %}" title="{% trans 'Search through all records' %}">
<span class="dns-search-clear" ng-if="dnsSearchFilter" ng-click="dnsSearchFilter = ''" title="{% trans 'Clear search' %}"><i class="fas fa-times"></i></span>
</div>
@@ -920,7 +921,7 @@
No DNS records found.
</div>
<div ng-if="!loadingRecords && records.length > 0 && dnsSearchFilter && (records | filter:dnsSearchFilter).length === 0" class="alert alert-info" style="margin-bottom: 1rem;">
<div ng-if="!loadingRecords && records.length > 0 && dnsSearchFilter && (records | filter:matchDnsSearch).length === 0" class="alert alert-info" style="margin-bottom: 1rem;">
<i class="fas fa-info-circle"></i> {% trans "No records match your search." %}
</div>
@@ -949,7 +950,7 @@
</tr>
</thead>
<tbody>
<tr ng-repeat="record in records | filter:dnsSearchFilter | orderBy:sortColumn:sortReverse track by record.id">
<tr ng-repeat="record in records | filter:matchDnsSearch | orderBy:sortColumn:sortReverse track by record.id">
<td class="editable-cell">
<span ng-hide="isEditing(record, 'name')" ng-click="startEdit(record, 'name')" class="cell-click" title="{% trans 'Click to edit' %}"><strong ng-bind="record.name"></strong></span>
<input ng-show="isEditing(record, 'name')" type="text" class="inline-input" ng-model="record.name" ng-blur="saveInlineField(record, 'name')" ng-keypress="$event.keyCode === 13 && saveInlineField(record, 'name')">

View File

@@ -1159,6 +1159,15 @@ app.controller('addModifyDNSRecordsCloudFlare', function ($scope, $http, $window
return list;
};
$scope.dnsSearchFilter = '';
$scope.matchDnsSearch = function (record) {
var q = ($scope.dnsSearchFilter || '').toLowerCase().trim();
if (!q) return true;
var name = (record.name || '').toLowerCase();
var type = (record.type || '').toLowerCase();
var content = (record.content || '').toLowerCase();
var priority = String(record.priority != null ? record.priority : '');
return name.indexOf(q) !== -1 || type.indexOf(q) !== -1 || content.indexOf(q) !== -1 || priority.indexOf(q) !== -1;
};
$scope.sortColumn = 'name';
$scope.sortReverse = false;
$scope.setSort = function (col) {

View File

@@ -1163,6 +1163,15 @@ app.controller('addModifyDNSRecordsCloudFlare', function ($scope, $http, $window
return list;
};
$scope.dnsSearchFilter = '';
$scope.matchDnsSearch = function (record) {
var q = ($scope.dnsSearchFilter || '').toLowerCase().trim();
if (!q) return true;
var name = (record.name || '').toLowerCase();
var type = (record.type || '').toLowerCase();
var content = (record.content || '').toLowerCase();
var priority = String(record.priority != null ? record.priority : '');
return name.indexOf(q) !== -1 || type.indexOf(q) !== -1 || content.indexOf(q) !== -1 || priority.indexOf(q) !== -1;
};
$scope.sortColumn = 'name';
$scope.sortReverse = false;
$scope.setSort = function (col) {