Skip to content

Commit

Permalink
gui: Specialize a special-purpose checkbox style (#9236)
Browse files Browse the repository at this point in the history
### Purpose

Discovered while working on the WebAuthn credentials table in #9175:
there's a style on `td input[type="checkbox"]` that modifies margins for
all checkboxes in `<table>`s. It looks like this style is specially
tailored to the particular table that added it (PR #8734), so it should
have a correspondingly special-purpose class to not accidentally apply
it to other tables.

As best as I could tell there are only 2 instances of `<input
type="checkbox">` in `<td>`s, shown in the screenshots below.

### Testing

- Open "Actions > Logging > Debugging Facilities" and observe the
vertical spacing of the checkboxes.
- Open "Edit Folder > Advanced", check "Sync Extended Attributes" or
"Send Extended Attributes", click "Add filter entry" and observe the
vertical spacing of the checkbox that appears.

### Screenshots

#### Before

![Logs > Debugging
Facilities](https://github.com/syncthing/syncthing/assets/1367758/998fc66d-a0ad-41d9-a476-7a2b3da622d1)
![Add filter
entry](https://github.com/syncthing/syncthing/assets/1367758/647cb565-fcd0-4a81-a6ca-1f75137039b0)

#### After

Logs > Debugging Facilities now more compact:
![Logs > Debugging Facilities now
](https://github.com/syncthing/syncthing/assets/1367758/7cf8fc77-610e-4b4a-be21-c50d30be7bb9)

Add filter entry unchanged:
![Add filter
entry](https://github.com/syncthing/syncthing/assets/1367758/0ba710d6-cee1-49b4-92bc-acfc0c22c2bd)
  • Loading branch information
emlun committed Nov 21, 2023
1 parent 8e9ee3f commit 1f7d236
Show file tree
Hide file tree
Showing 2 changed files with 3 additions and 2 deletions.
3 changes: 2 additions & 1 deletion gui/default/assets/css/overrides.css
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,8 @@ table.table-auto td {
max-width: 0px;
}

td input[type="checkbox"] {
/* Tag name is needed for selector to be specific enough to override Bootstrap style */
input[type="checkbox"].extended-attributes-filter-rule-checkbox {
margin-top: 13px;
}

Expand Down
2 changes: 1 addition & 1 deletion gui/default/syncthing/folder/editFolderModalView.html
Original file line number Diff line number Diff line change
Expand Up @@ -344,7 +344,7 @@
</colgroup>
<tr ng-repeat="entry in currentFolder.xattrFilter.entries">
<td>
<input type="checkbox" ng-model="entry.permit">
<input type="checkbox" ng-model="entry.permit" class="extended-attributes-filter-rule-checkbox"/>
</td>
<td><input class="form-control text-left" aria-required="true" ng-model="entry.match"/></td>
<td>
Expand Down

0 comments on commit 1f7d236

Please sign in to comment.