ui: making the security menu more compact

css/_e2ee.scss

@@ -4,8 +4,13 @@
     }
 
     .description {
-        font-size: .8em;
+        font-size: 13px;
         margin: 15px 0;
+
+        .read-more {
+            cursor: pointer;
+            opacity: .7;
+        }
     }
 
     .key-field {
@@ -14,6 +19,7 @@
         flex-direction: row;
 
         label {
+            font-size: 14px;
             font-weight: 700;
         }
 

css/_lobby.scss

@@ -34,6 +34,10 @@
     display: flex;
     flex-direction: column;
 
+    .description {
+        font-size: 13px;
+    }
+
     .control-row {
         display: flex;
         flex-direction: row;

css/modals/security/_security.scss

@@ -8,6 +8,10 @@
             display: flex;
             flex-direction: column;
 
+            .description {
+                font-size: 13px;
+            }
+
             .password {
                 align-items: center;
                 display: flex;
@@ -25,10 +29,6 @@
             }
         }
 
-        & > :first-child:not(:last-child) {
-            margin-right: 24px;
-        }
-
         .separator-line {
             margin: 24px 0 24px -20px;
             padding: 0 20px;

lang/main-el.json

@@ -193,11 +193,9 @@
         "dismiss": "Απόρριψη",
         "displayNameRequired": "Γεια σου! Ποιο είναι το όνομα σου;",
         "done": "Έγινε",
-        "e2eeDescription": "<p>Η από άκρη σε άκρη κρυπτογράφηση είναι σήμερα <strong>σε ΠΕΙΡΑΜΑΤΙΚΟ στάδιο</strong>. Παρακαλώ δείτε <a href='https://jitsi.org/blog/e2ee/' target='_blank'>αυτήν την ανάρτηση</a> για λεπτομέρειες.</p><br/><p>Παρακαλώ να έχετε κατά νου ότι η ενεργοποίηση της από άκρη σε άκρη κρυπτογράφησης θα απενεργοποιήσει από την πλευρά του διακομιστή υπηρεσίες όπως: καταγραφή, live streaming και συμμετοχή μέσω τηλεφώνου. Επίσης, να έχετε κατά νου ότι η συνάντηση θα λειτουργήσει μόνο για τους ανθρώπους που συνδέονται από φυλλομετρητές με υποστήριξη για insertable streams.</p>",
+        "e2eeDescription": "Η από άκρη σε άκρη κρυπτογράφηση είναι σήμερα σε ΠΕΙΡΑΜΑΤΙΚΟ στάδιο. Παρακαλώ να έχετε κατά νου ότι η ενεργοποίηση της από άκρη σε άκρη κρυπτογράφησης θα απενεργοποιήσει από την πλευρά του διακομιστή υπηρεσίες όπως: καταγραφή, live streaming και συμμετοχή μέσω τηλεφώνου. Επίσης, να έχετε κατά νου ότι η συνάντηση θα λειτουργήσει μόνο για τους ανθρώπους που συνδέονται από φυλλομετρητές με υποστήριξη για insertable streams.",
-        "e2eeLabel": "Κλειδί",
         "e2eeNoKey": "None",
         "e2eeSet": "Set",
-        "e2eeTitle": "Από άκρη σε άκρη κρυπτογράφηση",
         "e2eeToggleSet": "Set key",
         "e2eeWarning": "ΠΡΟΕΙΔΟΠΟΊΗΣΗ: Δε φαίνεται να έχουν όλοι οι συμμετέχοντες στη συνάντηση αυτή υποστήριξη για από άκρη σε άκρη κρυπτογράφηση. Αν την ενεργοποιήσετε, δεν θα μπορέσουν να σας δουν ούτε να σας ακούσουν.",
         "enterDisplayName": "Παρακαλώ εισάγετε το όνομά σας εδώ",

lang/main-es.json

@@ -195,9 +195,7 @@
         "dismiss": "Descartar",
         "displayNameRequired": "¡Hola! ¿Cuál es tu nombre?",
         "done": "Listo",
-        "e2eeDescription": "<p>El cifrado Extremo-a-Extremo es actualmente <strong>EXPERIMENTAL</strong>. Por favor lea<a href='https://jitsi.org/blog/e2ee/' target='_blank'>este artículo</a> para más detalles.</p><br/><p>Tenga en cuenta que activar el cifrado extremo-a-extremo puede deshabilitar servicios en el servidor como: grabación, transmisión en vivo y participación telefónica. Sin embargo tenga en cuenta que esta reunion solo funcionará con personas que se unan usando un navegador.</p>",
+        "e2eeDescription": "El cifrado Extremo-a-Extremo es actualmente EXPERIMENTAL. Tenga en cuenta que activar el cifrado extremo-a-extremo puede deshabilitar servicios en el servidor como: grabación, transmisión en vivo y participación telefónica. Sin embargo tenga en cuenta que esta reunion solo funcionará con personas que se unan usando un navegador.",
-        "e2eeLabel": "Clave",
-        "e2eeTitle": "Cifrado Extremo-a-Extremo",
         "e2eeWarning": "ATENCION: No todos los participantes de esta reunión soportan cifrado Extremo-a-Extremo. Si usted habilita el cifrado ellos no podrán verlo ni oirlo.",
         "enterDisplayName": "Por favor ingresa tu nombre aquí",
         "error": "Error",

lang/main-esUS.json

@@ -194,9 +194,7 @@
         "dismiss": "Descartar",
         "displayNameRequired": "¡Hola! ¿Cuál es tu nombre?",
         "done": "Listo",
-        "e2eeDescription": "<p>El cifrado Extremo-a-Extremo es actualmente <strong>EXPERIMENTAL</strong>. Por favor lea<a href='https://jitsi.org/blog/e2ee/' target='_blank'>este artículo</a> para más detalles.</p><br/><p>Tenga en cuenta que activar el cifrado extremo-a-extremo puede deshabilitar servicios en el servidor como: grabación, transmisión en vivo y participación telefónica. Sin embargo tenga en cuenta que esta reunion solo funcionará con personas que se unan usando un navegador.</p>",
+        "e2eeDescription": "El cifrado Extremo-a-Extremo es actualmente EXPERIMENTAL. Tenga en cuenta que activar el cifrado extremo-a-extremo puede deshabilitar servicios en el servidor como: grabación, transmisión en vivo y participación telefónica. Sin embargo tenga en cuenta que esta reunion solo funcionará con personas que se unan usando un navegador.",
-        "e2eeLabel": "Clave",
-        "e2eeTitle": "Cifrado Extremo-a-Exremo",
         "e2eeWarning": "ATENCION: No todos los participantes de esta reunión soportan cifrado Extremo-a-Extremo. Si usted habilita el cifrado ellos no podrán verlo ni oirlo.",
         "enterDisplayName": "Por favor ingresa tu nombre aquí",
         "error": "Error",

lang/main-eu.json

@@ -175,9 +175,6 @@
         "dismiss": "Baztertu",
         "displayNameRequired": "Kaixo! Zein da zure izena?",
         "done": "Eginda",
-        "e2eeDescription": "",
-        "e2eeLabel": "",
-        "e2eeTitle": "",
         "e2eeWarning": "",
         "enterDisplayName": "Sartu zure izena hemen",
         "error": "Errorea",

lang/main-mr.json

@@ -175,9 +175,7 @@
         "dismiss": "Dismiss",
         "displayNameRequired": "हाय! तुझे नाव काय आहे?",
         "done": "पूर्ण झाले",
-        "e2eeDescription": "<p>एंड-टू-एंड एनक्रिप्शन सध्या आहे <strong>प्रायोगिक</strong>. कृपया पहा <a href='https://jitsi.org/blog/e2ee/' target='_blank'>this post</a>तपशीलांसाठी.</p><br/><p>कृपया लक्षात ठेवा की एंड-टू-एंड एन्क्रिप्शन चालू केल्याने सर्व्हर-साइड प्रदान सेवा प्रभावीपणे अक्षम होईल: रेकॉर्डिंग, थेट प्रवाह आणि फोन सहभाग. हे देखील लक्षात ठेवा की मीटिंग केवळ समाविष्ट करण्यायोग्य प्रवाहांसाठी समर्थन असलेल्या ब्राउझरमधून सामील झालेल्या लोकांसाठीच कार्य करेल.</p>",
+        "e2eeDescription": "एंड-टू-एंड एनक्रिप्शन सध्या आहे प्रायोगिक. कृपया लक्षात ठेवा की एंड-टू-एंड एन्क्रिप्शन चालू केल्याने सर्व्हर-साइड प्रदान सेवा प्रभावीपणे अक्षम होईल: रेकॉर्डिंग, थेट प्रवाह आणि फोन सहभाग. हे देखील लक्षात ठेवा की मीटिंग केवळ समाविष्ट करण्यायोग्य प्रवाहांसाठी समर्थन असलेल्या ब्राउझरमधून सामील झालेल्या लोकांसाठीच कार्य करेल.",
-        "e2eeLabel": "Key",
-        "e2eeTitle": "एंड-टू-एंड एनक्रिप्शन",
         "e2eeWarning": "चेतावणी:या बैठकीतील सर्व सहभागींना एंड-टू-एंड एनक्रिप्शनसाठी समर्थन असल्याचे दिसत नाही. आपण सक्षम केल्यास ते आपल्याला पाहण्यास किंवा ऐकण्यास सक्षम राहणार नाहीत.",
         "enterDisplayName": "कृपया आपले नाव येथे प्रविष्ट करा",
         "error": "त्रुटी",

lang/main-oc.json

@@ -278,9 +278,7 @@
         "muteEveryoneTitle": "",
         "muteEveryoneDialog": "",
         "muteEveryoneElseTitle": "Copar lo son a totes levat {{whom}} ?",
-        "muteEveryoneElseDialog": "",
+        "muteEveryoneElseDialog": ""
-        "e2eeTitle": "Chiframent del cap a la fin",
-        "e2eeLabel": "Clau"
     },
     "dialOut": {
         "statusMessage": "ara es {{status}}"

lang/main-sl.json

@@ -189,9 +189,6 @@
         "dismiss": "Prekliči",
         "displayNameRequired": "Pozdravljeni! Kako vam je ime?",
         "done": "Končano",
-        "e2eeDescription": "<p>End-to-End Encryption is currently <strong>EXPERIMENTAL</strong>. Please see <a href='https://jitsi.org/blog/e2ee/' target='_blank'>this post</a> for details.</p><br/><p>Please keep in mind that turning on end-to-end encryption will effectively disable server-side provided services such as: recording, live streaming and phone participation. Also keep in mind that the meeting will only work for people joining from browsers with support for insertable streams.</p>",
-        "e2eeLabel": "Key",
-        "e2eeTitle": "End-to-End Encryption",
         "e2eeWarning": "WARNING: Not all participants in this meeting seem to have support for End-to-End encryption. If you enable it they won't be able to see nor hear you.",
         "enterDisplayName": "Prosimo vnesite svoje ime",
         "error": "Napaka",

lang/main-uk.json

@@ -180,9 +180,7 @@
         "dismiss": "Скасувати",
         "displayNameRequired": "Вітання! Як вас звати?",
         "done": "Готово",
-        "e2eeDescription": "<p>Наскрізне шифрування зараз в режимі<strong>ТЕСТУВАННЯ</strong>. Будь ласка, перегляньте <a href='https://jitsi.org/blog/e2ee/' target='_blank'>цю публікацію</a> для докладної інформації.</p><br/><p>Зверніть увагу, що увімкнення наскрізного шифрування призведе до вимкнення таких служб на стороні сервера: запису, живої трансляції запису в онлайні та участі у конференції за допомогою вхідного телефонного дзвінка. Також, просимо звернути увагу, що приєднання до зустрічі в такому разі буде можливе лише з браузера, який має підтримувати потоки зі вставкою (insertable streams).</p>",
+        "e2eeDescription": "Наскрізне шифрування зараз в режимі ТЕСТУВАННЯ. Зверніть увагу, що увімкнення наскрізного шифрування призведе до вимкнення таких служб на стороні сервера: запису, живої трансляції запису в онлайні та участі у конференції за допомогою вхідного телефонного дзвінка. Також, просимо звернути увагу, що приєднання до зустрічі в такому разі буде можливе лише з браузера, який має підтримувати потоки зі вставкою (insertable streams).",
-        "e2eeLabel": "Ключ",
-        "e2eeTitle": "Наскрізне шифрування",
         "e2eeWarning": "УВАГА: Схоже, що не всі учасники цієї зустрічі мають підтримку технології наскрізного шифрування. Якщо ви увімкнете цю функцію, то вони не зможуть ані чути, ані бачити вас.",
         "enterDisplayName": "Будь ласка, зазначте ваше ім'я",
         "error": "Помилка",

lang/main.json

@@ -193,10 +193,9 @@
         "dismiss": "Dismiss",
         "displayNameRequired": "Hi! What’s your name?",
         "done": "Done",
-        "e2eeDescription": "End-to-End Encryption is currently EXPERIMENTAL. Please see <a href='https://jitsi.org/blog/e2ee/' target='_blank'>this post</a> for details. Please keep in mind that turning on end-to-end encryption will effectively disable server-side provided services such as: recording, live streaming and phone participation. Also keep in mind that the meeting will only work for people joining from browsers with support for insertable streams.",
+        "e2eeDescription": "End-to-End Encryption is currently EXPERIMENTAL. Please keep in mind that turning on end-to-end encryption will effectively disable server-side provided services such as: recording, live streaming and phone participation. Also keep in mind that the meeting will only work for people joining from browsers with support for insertable streams.",
-        "e2eeLabel": "Key",
+        "e2eeLabel": "E2EE key",
         "e2eeNoKey": "None",
-        "e2eeTitle": "End-to-End Encryption",
         "e2eeToggleSet": "Set key",
         "e2eeSet": "Set",
         "e2eeWarning": "WARNING: Not all participants in this meeting seem to have support for End-to-End encryption. If you enable it they won't be able to see nor hear you.",
@@ -247,6 +246,7 @@
         "passwordRequired": "$t(lockRoomPasswordUppercase) required",
         "popupError": "Your browser is blocking pop-up windows from this site. Please enable pop-ups in your browser's security settings and try again.",
         "popupErrorTitle": "Pop-up blocked",
+        "readMore": "more",
         "recording": "Recording",
         "recordingDisabledBecauseOfActiveLiveStreamingTooltip": "Not possible while a live stream is active",
         "recordingDisabledForGuestTooltip": "Guests can't start recordings.",

react/features/e2ee/components/E2EESection.js

@@ -4,7 +4,7 @@ import React, { Component } from 'react';
 import type { Dispatch } from 'redux';
 
 import { createE2EEEvent, sendAnalytics } from '../../analytics';
-import { translate, translateToHTML } from '../../base/i18n';
+import { translate } from '../../base/i18n';
 import { getParticipants } from '../../base/participants';
 import { connect } from '../../base/redux';
 import { setE2EEKey } from '../actions';
@@ -40,6 +40,11 @@ type State = {
      */
     editing: boolean,
 
+    /**
+     * True if the section description should be expanded, false otherwise.
+     */
+    expand: boolean,
+
     /**
      * The current E2EE key.
      */
@@ -68,10 +73,12 @@ class E2EESection extends Component<Props, State> {
 
         this.state = {
             editing: false,
+            expand: false,
             key: this.props._key
         };
 
         // Bind event handlers so they are only bound once for every instance.
+        this._onExpand = this._onExpand.bind(this);
         this._onKeyChange = this._onKeyChange.bind(this);
         this._onSet = this._onSet.bind(this);
         this._onToggleSetKey = this._onToggleSetKey.bind(this);
@@ -85,15 +92,19 @@ class E2EESection extends Component<Props, State> {
      */
     render() {
         const { _everyoneSupportsE2EE, t } = this.props;
-        const { editing } = this.state;
+        const { editing, expand } = this.state;
+        const description = t('dialog.e2eeDescription');
 
         return (
             <div id = 'e2ee-section'>
-                <p className = 'title'>
-                    { t('dialog.e2eeTitle') }
-                </p>
                 <p className = 'description'>
-                    { translateToHTML(t, 'dialog.e2eeDescription') }
+                    { expand && description }
+                    { !expand && description.substring(0, 100) }
+                    { !expand && <span
+                        className = 'read-more'
+                        onClick = { this._onExpand }>
+                            ... { t('dialog.readMore') }
+                    </span> }
                 </p>
                 {
                     !_everyoneSupportsE2EE
@@ -125,6 +136,19 @@ class E2EESection extends Component<Props, State> {
         );
     }
 
+    _onExpand: () => void;
+
+    /**
+     * Callback to be invoked when the description is expanded.
+     *
+     * @returns {void}
+     */
+    _onExpand() {
+        this.setState({
+            expand: true
+        });
+    }
+
     _onKeyChange: (Object) => void;
 
     /**

react/features/lobby/components/web/LobbySection.js

@@ -88,7 +88,9 @@ class LobbySection extends PureComponent<Props, State> {
         return (
             <>
                 <div id = 'lobby-section'>
-                    { t('lobby.enableDialogText') }
+                    <p className = 'description'>
+                        { t('lobby.enableDialogText') }
+                    </p>
                     <div className = 'control-row'>
                         <label>
                             { t('lobby.toggleLabel') }

react/features/security/components/security-dialog/PasswordSection.js

@@ -170,7 +170,9 @@ function PasswordSection({
 
     return (
         <div className = 'security-dialog password-section'>
-            { t('security.about') }
+            <p className = 'description'>
+                { t('security.about') }
+            </p>
             <div className = 'security-dialog password'>
                 <div
                     className = 'info-dialog info-dialog-column info-dialog-password'