octoleo/syncthing
1
0
Fork 0
mirror of https://github.com/octoleo/syncthing.git synced 2024-12-22 10:58:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

gui: Fix wrapping in "Shared With" / "Folders" lists. (#9438)

Browse Source 
This change was split off from #9355 as an independent clean-up / fix.
See that PR for review discussion, testing, and screenshots.

Improve the wrapping of folder labels / device names by going back to
word-wrapping, but making sure other spans, such as the trailing comma,
do not get separated from the label span.

* Avoid adding whitespace caused by line wraps in HTML source code.

The different cases within the ng-switch block are separated by
newlines for readability, but that gets parsed as whitespace.  For
wrapping purposes, this should not happen, because then there is no
way to keep other HTML parts glued to the name / label in each list
entry.

* Simplify redundant conditional comma code.

The separating comma after a device name or folder label (all but the
last) should always stick to it.  Use the HTML comment trick to avoid
whitespace and therefore a wrapping opportunity caused by the code
formatting newline.  Thus the conditional comma only needs to be
defined once, not in each ng-switch case.

* Wrap at word boundaries and only break up words if necessary.

Use the overflow-wrap: break-word; style instead of word-break:
break-all;.  While the latter is suitable for longish paths, breaking
device names or folder labels arbitrarily within words is ugly.

This also makes the the <sup> numbers actually stay glued to their
respective neighboring words.

Include legacy CSS alias "word-wrap" in the class definition.

* Fix indentation (unrelated).
This commit is contained in:
André Colomb 2024-03-03 20:55:09 +01:00 committed by GitHub
parent ac942e2481
commit 13a6d43f0b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
gui/default/assets/css/overrides.css
View File

@ -189,6 +189,13 @@ input[type="checkbox"].extended-attributes-filter-rule-checkbox {
word-break: break-all; word-break: break-all;
} }
/* Break up long words in paragraphs only if necessary to prevent text overflow. */
.overflow-break-word {
overflow-wrap: break-word;
/* Legacy name alias */
word-wrap: break-word;
}
.folder-advanced { .folder-advanced {
padding: 1rem; padding: 1rem;
margin-bottom: 15px; margin-bottom: 15px;

26
gui/default/index.html
View File

@ -404,9 +404,9 @@
<span class="hidden-xs">{{folderStatusText(folder)}}</span> <span class="hidden-xs">{{folderStatusText(folder)}}</span>
<span ng-switch-when="scanning" ng-if="scanPercentage(folder.id) != undefined">({{scanPercentage(folder.id) | percent}})</span> <span ng-switch-when="scanning" ng-if="scanPercentage(folder.id) != undefined">({{scanPercentage(folder.id) | percent}})</span>
<span ng-switch-when="syncing">({{syncPercentage(folder.id) | percent}}, {{model[folder.id].needBytes | binary}}B)</span> <span ng-switch-when="syncing">({{syncPercentage(folder.id) | percent}}, {{model[folder.id].needBytes | binary}}B)</span>
<span class="inline-icon"> <span class="inline-icon">
<span class="visible-xs fa fa-fw {{folderStatusIcon(folder)}}" aria-label="{{folderStatusText(folder)}}"></span> <span class="visible-xs fa fa-fw {{folderStatusIcon(folder)}}" aria-label="{{folderStatusText(folder)}}"></span>
</span> </span>
</div> </div>
<div class="panel-title-text"> <div class="panel-title-text">
<span tooltip data-original-title="{{folder.label.length != 0 ? folder.id : ''}}">{{folder.label.length != 0 ? folder.label : folder.id}}</span> <span tooltip data-original-title="{{folder.label.length != 0 ? folder.id : ''}}">{{folder.label.length != 0 ? folder.label : folder.id}}</span>
@ -585,12 +585,13 @@
</tr> </tr>
<tr> <tr>
<th><span class="fas fa-fw fa-share-alt"></span>&nbsp;<span translate>Shared With</span></th> <th><span class="fas fa-fw fa-share-alt"></span>&nbsp;<span translate>Shared With</span></th>
<td class="text-right no-overflow-ellipse word-break-all"> <td class="text-right no-overflow-ellipse overflow-break-word">
<span ng-repeat="device in otherDevices(folder.devices)"> <span ng-repeat="device in otherDevices(folder.devices)">
<span ng-switch="completion[device.deviceID][folder.id].remoteState"> <span ng-switch="completion[device.deviceID][folder.id].remoteState"><!-- Avoid stray space...
<span ng-switch-when="notSharing" data-original-title="{{'The remote device has not accepted sharing this folder.' | translate}}" tooltip>{{deviceName(devices[device.deviceID])}}<sup>1</sup><span ng-if="!$last">,</span></span> --><span ng-switch-when="notSharing" data-original-title="{{'The remote device has not accepted sharing this folder.' | translate}}" tooltip>{{deviceName(devices[device.deviceID])}}<sup>1</sup></span><!-- Avoid stray space...
<span ng-switch-when="paused" data-original-title="{{'The remote device has paused this folder.' | translate}}" tooltip>{{deviceName(devices[device.deviceID])}}<sup>2</sup><span ng-if="!$last">,</span></span> --><span ng-switch-when="paused" data-original-title="{{'The remote device has paused this folder.' | translate}}" tooltip>{{deviceName(devices[device.deviceID])}}<sup>2</sup></span><!-- Avoid stray space...
<span ng-switch-default>{{deviceName(devices[device.deviceID])}}<span ng-if="!$last">,</span></span> --><span ng-switch-default>{{deviceName(devices[device.deviceID])}}</span><!-- Avoid stray space...
--><span ng-if="!$last">,</span>
</span> </span>
</span> </span>
</td> </td>
@ -940,12 +941,13 @@
</tr> </tr>
<tr ng-if="deviceFolders(deviceCfg).length > 0"> <tr ng-if="deviceFolders(deviceCfg).length > 0">
<th><span class="fas fa-fw fa-folder"></span>&nbsp;<span translate>Folders</span></th> <th><span class="fas fa-fw fa-folder"></span>&nbsp;<span translate>Folders</span></th>
<td class="text-right no-overflow-ellipse word-break-all"> <td class="text-right no-overflow-ellipse overflow-break-word">
<span ng-repeat="folderID in deviceFolders(deviceCfg)"> <span ng-repeat="folderID in deviceFolders(deviceCfg)">
<span ng-switch="completion[deviceCfg.deviceID][folderID].remoteState"> <span ng-switch="completion[deviceCfg.deviceID][folderID].remoteState"><!-- Avoid stray space...
<span ng-switch-when="notSharing" data-original-title="{{'The remote device has not accepted sharing this folder.' | translate}}" tooltip>{{folderLabel(folderID)}}<sup>1</sup><span ng-if="!$last">,</span></span> --><span ng-switch-when="notSharing" data-original-title="{{'The remote device has not accepted sharing this folder.' | translate}}" tooltip>{{folderLabel(folderID)}}<sup>1</sup></span><!-- Avoid stray space...
<span ng-switch-when="paused" data-original-title="{{'The remote device has paused this folder.' | translate}}" tooltip>{{folderLabel(folderID)}}<sup>2</sup><span ng-if="!$last">,</span></span> --><span ng-switch-when="paused" data-original-title="{{'The remote device has paused this folder.' | translate}}" tooltip>{{folderLabel(folderID)}}<sup>2</sup></span><!-- Avoid stray space...
<span ng-switch-default>{{folderLabel(folderID)}}<span ng-if="!$last">,</span></span> --><span ng-switch-default>{{folderLabel(folderID)}}</span><!-- Avoid stray space...
--><span ng-if="!$last">,</span>
</span> </span>
</span> </span>
</td> </td>