Skip to content

Commit 628b0ac

Browse files
Add client feature descriptions (#3465)
* add question mark icon to explain client features Signed-off-by: HarHarLinks <2803622+HarHarLinks@users.noreply.github.com> * update Element Web features Signed-off-by: HarHarLinks <2803622+HarHarLinks@users.noreply.github.com> * update Element X features Signed-off-by: HarHarLinks <2803622+HarHarLinks@users.noreply.github.com> * spell out E2EE Signed-off-by: HarHarLinks <2803622+HarHarLinks@users.noreply.github.com> * spell multi- correctly Signed-off-by: HarHarLinks <2803622+HarHarLinks@users.noreply.github.com> * Add tooltip Signed-off-by: weeman <weeman@frankfurt.ccc.de> --------- Signed-off-by: HarHarLinks <2803622+HarHarLinks@users.noreply.github.com> Signed-off-by: weeman <weeman@frankfurt.ccc.de> Co-authored-by: weeman <weeman@frankfurt.ccc.de>
1 parent fe2886e commit 628b0ac

9 files changed

Lines changed: 104 additions & 43 deletions

File tree

‎content/ecosystem/clients/element-x.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ voip_jitsi = "unsupported"
2323
multi_account = "unsupported"
2424
multi_language = "supported"
2525
oauth = "supported"
26-
invisible_crypto = "supported"
26+
invisible_crypto = "partial"
2727

2828
[extra.features.2experimental]
2929
voip_matrixrtc = "supported"

‎content/ecosystem/clients/element.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@ voip_jitsi = "supported"
2323
multi_account = "unsupported"
2424
multi_language = "supported"
2525
oauth = "supported"
26-
invisible_crypto = "unknown"
26+
invisible_crypto = "partial"
2727

2828
[extra.features.2experimental]
29-
voip_matrixrtc = "unknown"
29+
voip_matrixrtc = "supported"
3030
sliding_sync = "unknown"
3131

3232
[extra.packages]

‎sass/_clients.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,12 @@ body:has(.projects-card-deck > div > .client-checkbox:checked) {
121121
text-align: center;
122122
}
123123
}
124+
125+
img {
126+
height: 1em;
127+
vertical-align: center;
128+
cursor: pointer;
129+
}
124130
}
125131

126132
p {

‎sass/_tooltip.scss‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.tooltip-toggle {
2+
anchor-name: var(--tooltip-anchor-name);
3+
background: none;
4+
border: none;
5+
}
6+
7+
.tooltip-content {
8+
background-color: #000;
9+
border-radius: 8px;
10+
color: #fff;
11+
margin: 0 16px;
12+
padding: 6px 6px 4px;
13+
position-anchor: var(--tooltip-anchor-name);
14+
position-area: bottom;
15+
text-align: center;
16+
}
17+
18+
@media screen and (min-width: 768px) {
19+
.tooltip-content {
20+
margin: 0;
21+
max-width: 400px;
22+
}
23+
}

‎sass/style.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,4 @@
2727
@import '_working-groups';
2828
@import '_governing-board';
2929
@import '_branding';
30+
@import '_tooltip';

‎static/assets/circle_question.svg‎

Lines changed: 1 addition & 0 deletions
Loading
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
SPDX-FileCopyrightText: 2026 Font Awesome Free, Fonticons, Inc.
2+
3+
SPDX-License-Identifier: CC-BY-4.0

‎templates/ecosystem/client.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,10 +59,28 @@ <h5>{{ clients::category_label(category_name=category) }}</h3>
5959
<li
6060
class="{{ supported }}"
6161
aria-label="{{ clients::feature_aria_label(feature_name=feature, feature_status=supported) | trim}}"
62+
style="--tooltip-anchor-name: --tooltip-anchor-{{ feature }}"
6263
>
6364
<span aria-hidden>
6465
{{ clients::feature_label(feature_name=feature) | trim }}
6566
</span>
67+
<button
68+
class="tooltip-toggle"
69+
popovertarget="{{ feature }}-tooltip"
70+
type="button"
71+
>
72+
<img
73+
role="button"
74+
src="/assets/circle_question.svg"
75+
>
76+
</button>
77+
<div
78+
id="{{ feature }}-tooltip"
79+
class="tooltip-content"
80+
popover
81+
>
82+
{{ clients::feature_description(feature_name=feature) | trim }}
83+
</div>
6684
</li>
6785
{% endfor %}
6886
</ul>

‎templates/macros/clients.html‎

Lines changed: 49 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,38 @@
11
{# Human-readable labels for feature categories #}
22
{% macro category_label(category_name) %}
3-
{% if category_name == "1stable" %}
3+
{%- if category_name == "1stable" -%}
44
Stable Features
5-
{% elif category_name == "2experimental" %}
5+
{%- elif category_name == "2experimental" -%}
66
Experimental Features
7-
{% else %}
7+
{%- else -%}
88
{{category_name | replace(from="_", to=" ") | title }}
9-
{% endif %}
9+
{%- endif -%}
1010
{% endmacro %}
1111

12-
{# Client macros for the matrix.org website Features Schema (all boolean values):
13-
- e2ee: End-to-end encryption support, including media and calls if supported
14-
- spaces: Matrix Spaces support
15-
- voip_1to1: 1-to-1 voice/video calls, see https://spec.matrix.org/v1.17/client-server-api/#voice-over-ip
16-
- voip_jitsi: Jitsi-based group calls
17-
- threads: Threading support
18-
- sso: Legacy Single Sign-On (m.login.sso)
19-
- oauth: Native OIDC/OAuth 2.0 authentication (added in spec 1.15)
20-
- invisible_crypto: Implements https://github.com/matrix-org/matrix-spec-proposals/pull/4153
21-
- sliding_sync: Uses the new sync API https://github.com/matrix-org/matrix-spec-proposals/pull/4186
22-
- multi_account: Supports multiple accounts in a single client instance
23-
- multi_language: Internationalization/localization support
24-
#}
25-
26-
{# List of valid feature names for validation #}
27-
{% set VALID_FEATURES = [
28-
"e2ee",
29-
"spaces",
30-
"voip_1to1",
31-
"voip_jitsi",
32-
"voip_matrixrtc",
33-
"threads",
34-
"sso",
35-
"oauth",
36-
"invisible_crypto",
37-
"sliding_sync",
38-
"multi_account",
39-
"multi_language"
40-
] %}
41-
4212
{# Human-readable labels for features #}
4313
{% macro feature_label(feature_name) %}
4414
{%- if feature_name == "e2ee" -%}
45-
E2EE
46-
{%- elif feature_name == "sso" -%}
47-
Legacy SSO
48-
{%- elif feature_name == "oauth" -%}
49-
OAuth 2.0
15+
End-to-end encryption
5016
{%- elif feature_name == "voip_1to1" -%}
5117
VoIP (1:1)
5218
{%- elif feature_name == "voip_jitsi" -%}
5319
VoIP (Jitsi)
5420
{%- elif feature_name == "voip_matrixrtc" -%}
5521
VoIP (MatrixRTC)
22+
{%- elif feature_name == "sso" -%}
23+
Legacy SSO
24+
{%- elif feature_name == "oauth" -%}
25+
OAuth 2.0
26+
{%- elif feature_name == "invisible_crypto" -%}
27+
Invisible Cryptography
28+
{%- elif feature_name == "sliding_sync" -%}
29+
Simplified Sliding Sync
30+
{%- elif feature_name == "multi_account" -%}
31+
Multi-Account
32+
{%- elif feature_name == "multi_language" -%}
33+
Multi-Language
5634
{%- else -%}
57-
{{ feature_name | replace(from="_", to=" ") | title }}
35+
{{feature_name | replace(from="_", to=" ") | title }}
5836
{%- endif -%}
5937
{% endmacro %}
6038

@@ -79,6 +57,37 @@
7957
{% endif %}
8058
{% endmacro %}
8159

60+
{# Definitions for each of the features #}
61+
{% macro feature_description(feature_name) %}
62+
{%- if feature_name == "e2ee" -%}
63+
End-to-end encryption, including media and calls if supported
64+
{%- elif feature_name == "spaces" -%}
65+
Browse, join and manage Matrix spaces
66+
{%- elif feature_name == "voip_1to1" -%}
67+
1-to-1 voice/video calls
68+
{%- elif feature_name == "voip_jitsi" -%}
69+
Jitsi-based group calls
70+
{%- elif feature_name == "voip_matrixrtc" -%}
71+
Matrix-native voice/video calls based on MSC4143 MatrixRTC
72+
{%- elif feature_name == "threads" -%}
73+
Read, start and participate in threads
74+
{%- elif feature_name == "sso" -%}
75+
Log in with Single Sign-On using the legacy API
76+
{%- elif feature_name == "oauth" -%}
77+
Log in using the new API based on the OAuth 2.0/OIDC standard
78+
{%- elif feature_name == "invisible_crypto" -%}
79+
Simplified client user experience and improved security by enforcing device verification per MSC4153
80+
{%- elif feature_name == "sliding_sync" -%}
81+
Swift and efficient connection to the server using the next generation API from MSC4186
82+
{%- elif feature_name == "multi_account" -%}
83+
Log into multiple accounts at the same time using a single client instance
84+
{%- elif feature_name == "multi_language" -%}
85+
Client user interface supports multiple languages
86+
{%- else -%}
87+
{{ throw(message="Feature is missing a description!") }}
88+
{%- endif -%}
89+
{% endmacro %}
90+
8291
{% macro classes(client) %}
8392
{% if client.packages.apple_app_store.app_id and client.packages.apple_app_store.org %}
8493
platform-ios

0 commit comments

Comments
 (0)