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).
gui: Show folder/device status on small screens
On larger screens, folder and device status is shown in a textual form
directly next to folder and device titles. However, on small screens,
only icons are currently shown, which may be ambiguous to new users, who
cannot possibly know what a specific icon means (see [1]). Thus, on
small screens only, display a new entry in folder/device info that
contains the same textual information that is shown in the title on
larger screens.
Signed-off-by: Tomasz Wilczyński <twilczynski@naver.com>
Co-authored-by: André Colomb <src@andre.colomb.de>
The string is currently hard-coded in English, so allow to translate it
into other languages. It appears mainly in the browser title bar before
logging in into the GUI or when the GUI is still loading.
Signed-off-by: Tomasz Wilczyński <twilczynski@naver.com>
Following up on #9192, this makes use of the new mechanism for the theme
names.
The dummy string added for testing is removed again here. All
translations are updated to the new nested syntax, except Chinese
(zh-HK) where the string weren't actually translated.
Some translations, especially single words or other short
labels for buttons and the like, may not be transferable between
contexts even if they happen to be equal in English. In these cases,
setting an explicit translation ID is important for context separation.
Angular Translate also supports nested JSON in translation tables,
addressed using `.` as namespace separator; this enhancement makes use
of this when extracting translation with an explicit translation ID.
