fix(gui): fix tabs visually disabled but still clickable during ignore patterns setup (fixes #10634) (#10651)
### Purpose Fixes issue #10634. ### Testing Manually tested by reproducing the issue: - Created a new folder with "Add ignore patterns" enabled - Verified that after saving, only the "Ignore Patterns" tab remains accessible - Confirmed that other tabs are visually disabled and no longer clickable ### Screenshots No visible UI changes. ### Explanation of the Fix **Cause** The issue was caused by only visually disabling tabs in the UI by setting their `href` attribute to an empty string (`href=""`). This made the tabs appear disabled, but they were still clickable, leading to confusing behavior where users could interact with the tabs without any actual navigation. **Fix** - Introduced `isFolderTabDisabled` to centralize the logic for determining whether a tab should be disabled - Added `onFolderTabClick` to prevent interaction with disabled tabs - Updated the HTML to remove tab behavior (such as `data-toggle="tab"` and `href`) when a tab is disabled ### Documentation No documentation changes required. Signed-off-by: JRNitre <nichinichisou67@outlook.com> Co-authored-by: Jakob Borg <jakob@kastelo.net>
This commit is contained in:
@@ -2713,6 +2713,27 @@ angular.module('syncthing.core')
|
||||
}
|
||||
}, $scope.emitHTTPError);
|
||||
};
|
||||
|
||||
$scope.isFolderTabDisabled = function (tab) {
|
||||
if (!$scope.currentFolder) {
|
||||
return false;
|
||||
}
|
||||
if ($scope.currentFolder._editing === "new-ignores") {
|
||||
return tab !== "ignores";
|
||||
}
|
||||
if (tab === "ignores" && $scope.currentFolder._recvEnc) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
$scope.onFolderTabClick = function ($event, tab) {
|
||||
if ($scope.isFolderTabDisabled(tab)) {
|
||||
$event.preventDefault();
|
||||
$event.stopPropagation();
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
function saveFolderIgnoresExisting() {
|
||||
if ($scope.ignores.disabled) {
|
||||
|
||||
@@ -2,11 +2,46 @@
|
||||
<div class="modal-body">
|
||||
<form role="form" name="folderEditor">
|
||||
<ul class="nav nav-tabs" ng-init="loadFormIntoScope(folderEditor)">
|
||||
<li ng-class="{'disabled': currentFolder._editing == 'new-ignores'}" class="active"><a data-toggle="tab" href="{{currentFolder._editing == 'new-ignores' ? '' : '#folder-general'}}"><span class="fas fa-cog"></span> <span translate>General</span></a></li>
|
||||
<li ng-class="{'disabled': currentFolder._editing == 'new-ignores'}"><a data-toggle="tab" href="{{currentFolder._editing == 'new-ignores' ? '' : '#folder-sharing'}}"><span class="fas fa-share-alt"></span> <span translate>Sharing</span></a></li>
|
||||
<li ng-class="{'disabled': currentFolder._editing == 'new-ignores'}"><a data-toggle="tab" href="{{currentFolder._editing == 'new-ignores' ? '' : '#folder-versioning'}}"><span class="fa fa-files-o"></span> <span translate>File Versioning</span></a></li>
|
||||
<li ng-class="{'disabled': currentFolder._recvEnc}"><a data-toggle="tab" href="{{currentFolder._recvEnc ? '' : '#folder-ignores'}}"><span class="fas fa-filter"></span> <span translate>Ignore Patterns</span></a></li>
|
||||
<li ng-class="{'disabled': currentFolder._editing == 'new-ignores'}"><a data-toggle="tab" href="{{currentFolder._editing == 'new-ignores' ? '' : '#folder-advanced'}}"><span class="fas fa-cogs"></span> <span translate>Advanced</span></a></li>
|
||||
<li ng-class="{disabled: isFolderTabDisabled('general')}">
|
||||
<a
|
||||
ng-attr-data-toggle="{{isFolderTabDisabled('general') ? undefined : 'tab'}}"
|
||||
ng-attr-href="{{isFolderTabDisabled('general') ? undefined : '#folder-general'}}"
|
||||
ng-click="onFolderTabClick($event, 'general')">
|
||||
<span class="fas fa-cog"></span> <span translate>General</span>
|
||||
</a>
|
||||
</li>
|
||||
<li ng-class="{disabled: isFolderTabDisabled('sharing')}">
|
||||
<a
|
||||
ng-attr-data-toggle="{{isFolderTabDisabled('sharing') ? undefined : 'tab'}}"
|
||||
ng-attr-href="{{isFolderTabDisabled('sharing') ? undefined : '#folder-sharing'}}"
|
||||
ng-click="onFolderTabClick($event, 'sharing')">
|
||||
<span class="fas fa-share-alt"></span> <span translate>Sharing</span>
|
||||
</a>
|
||||
</li>
|
||||
<li ng-class="{disabled: isFolderTabDisabled('versioning')}">
|
||||
<a
|
||||
ng-attr-data-toggle="{{isFolderTabDisabled('versioning') ? undefined : 'tab'}}"
|
||||
ng-attr-href="{{isFolderTabDisabled('versioning') ? undefined : '#folder-versioning'}}"
|
||||
ng-click="onFolderTabClick($event, 'versioning')">
|
||||
<span class="fa fa-files-o"></span> <span translate>File Versioning</span>
|
||||
</a>
|
||||
</li>
|
||||
<li ng-class="{disabled: isFolderTabDisabled('ignores')}">
|
||||
<a
|
||||
ng-attr-data-toggle="{{isFolderTabDisabled('ignores') ? undefined : 'tab'}}"
|
||||
ng-attr-href="{{isFolderTabDisabled('ignores') ? undefined : '#folder-ignores'}}"
|
||||
ng-click="onFolderTabClick($event, 'ignores')">
|
||||
<span class="fas fa-filter"></span> <span translate>Ignore Patterns</span>
|
||||
</a>
|
||||
</li>
|
||||
<li ng-class="{disabled: isFolderTabDisabled('advanced')}">
|
||||
<a
|
||||
ng-attr-data-toggle="{{isFolderTabDisabled('advanced') ? undefined : 'tab'}}"
|
||||
ng-attr-href="{{isFolderTabDisabled('advanced') ? undefined : '#folder-advanced'}}"
|
||||
ng-click="onFolderTabClick($event, 'advanced')">
|
||||
<span class="fas fa-cogs"></span> <span translate>Advanced</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
|
||||
|
||||
Reference in New Issue
Block a user