Set horizontal layout direction based on the language

Fixes #122
conversejs · Dec 10, 2024 · 450a2cd · 450a2cd
1 parent 6e77f7b
commit 450a2cd
Show file tree

Hide file tree

Showing 47 changed files with 214 additions and 189 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -2,6 +2,7 @@
 
 ## 11.0.0 (Unreleased)
 
+- #122: Set horizontal layout direction based on the language
 - #698: Add support for MUC private messages
 - #1057: Removed the `mobile` view mode. Instead of setting `view_mode` to `mobile`, set it to `fullscreen`.
 - #1174: Show MUC avatars in the rooms list
@@ -59,6 +60,10 @@
 - `getAssignableRoles` and `getAssignableAffiliations` are no longer on the `_converse` object, but on the Occupant instance.
 - Removed the `chatBoxFocused` and `chatBoxBlurred` events.
 - Changed the signature of the `api.contacts.add` API method.
+- The deprecated API method `api.settings.update` has been removed. Use
+  `api.settings.extend` instead.
+- New config option [rtl_langs](https://conversejs.org/docs/html/configuration.html#rtl-langs) for specifying languages for which
+  Converse's UI should be shown in right-to-left order.
 
 ## 10.1.7 (2024-03-15)
 

diff --git a/dev.html b/dev.html
@@ -26,7 +26,6 @@
     });
 
     converse.initialize({
-        i18n: 'af',
         theme: 'cyberpunk',
         auto_away: 300,
         enable_smacks: true,
@@ -37,7 +36,6 @@
         muc_respect_autojoin: true,
         muc_show_logs_before_join: true,
         notify_all_room_messages: ['discuss@conference.conversejs.org'],
-        // view_mode: 'fullscreen',
         websocket_url: 'wss://conversejs.org/xmpp-websocket',
         // websocket_url: 'ws://chat.example.org:5380/xmpp-websocket',
         whitelisted_plugins: ['converse-debug'],

diff --git a/docs/source/configuration.rst b/docs/source/configuration.rst
@@ -1922,6 +1922,14 @@ If set to ``true``, Converse will show any roster groups you might have configur
     elsewhere.
 
 
+rtl_langs
+---------
+
+* Default: ``["ar", "fa", "he", "ur"]``
+
+A list of languages which are written right-to-left and for which the UI should also be shown right-to-left.
+
+
 send_chat_state_notifications
 -----------------------------
 

diff --git a/src/headless/shared/settings/api.js b/src/headless/shared/settings/api.js
@@ -1,7 +1,6 @@
 /**
  * @typedef {import('@converse/skeletor').Model} Model
  */
-import log from '../../log.js';
 import {
     extendAppSettings,
     getAppSetting,
@@ -29,7 +28,7 @@ export const settings_api = {
      * `converse.initialize`.
      *
      * @method api.settings.extend
-     * @param { object } settings The configuration settings
+     * @param {object} settings The configuration settings
      * @example
      * api.settings.extend({
      *    'enable_foo': true
@@ -45,14 +44,6 @@ export const settings_api = {
         return extendAppSettings(settings);
     },
 
-    update (settings) {
-        log.warn(
-            'The api.settings.update method has been deprecated and will be removed. ' +
-                'Please use api.settings.extend instead.'
-        );
-        return this.extend(settings);
-    },
-
     /**
      * @method _converse.api.settings.get
      * @param {string} [key]

diff --git a/src/headless/shared/settings/constants.js b/src/headless/shared/settings/constants.js
@@ -1,36 +1,36 @@
 /**
- * @typedef { Object } ConfigurationSettings
+ * @typedef {Object } ConfigurationSettings
  * Converse's core configuration values
- * @property { Boolean } [allow_non_roster_messaging=false]
- * @property { Boolean } [allow_url_history_change=true]
- * @property { String } [assets_path='/dist']
- * @property { ('login'|'prebind'|'anonymous'|'external') } [authentication='login']
- * @property { Boolean } [auto_login=false] - Currently only used in connection with anonymous login
- * @property { Boolean } [reuse_scram_keys=true] - Save SCRAM keys after login to allow for future auto login
- * @property { Boolean } [auto_reconnect=true]
- * @property { Array<String>} [blacklisted_plugins]
- * @property { Boolean } [clear_cache_on_logout=false]
- * @property { Object } [connection_options]
- * @property { String } [credentials_url] - URL from where login credentials can be fetched
- * @property { Boolean } [discover_connection_methods=true]
- * @property { RegExp } [geouri_regex]
- * @property { RegExp } [geouri_replacement='https://www.openstreetmap.org/?mlat=$1&mlon=$2#map=18/$1/$2']
- * @property { String } [i18n]
- * @property { String } [jid]
- * @property { Boolean } [keepalive=true]
- * @property { ('debug'|'info'|'eror') } [loglevel='info']
- * @property { Array<String> } [locales]
- * @property { String } [nickname]
- * @property { String } [password]
- * @property { ('IndexedDB'|'localStorage') } [persistent_store='IndexedDB']
- * @property { String } [rid]
- * @property { Element } [root=window.document]
- * @property { String } [sid]
- * @property { Boolean } [singleton=false]
- * @property { Boolean } [strict_plugin_dependencies=false]
- * @property { ('fullscreen'|'embedded'|'overlayed') } [view_mode='fullscreen']
- * @property { String } [websocket_url]
- * @property { Array<String>} [whitelisted_plugins]
+ * @property {Boolean} [allow_non_roster_messaging=false]
+ * @property {Boolean} [allow_url_history_change=true]
+ * @property {String} [assets_path='/dist']
+ * @property {('login'|'prebind'|'anonymous'|'external')} [authentication='login']
+ * @property {Boolean} [auto_login=false] - Currently only used in connection with anonymous login
+ * @property {Boolean} [reuse_scram_keys=true] - Save SCRAM keys after login to allow for future auto login
+ * @property {Boolean} [auto_reconnect=true]
+ * @property {Array<String>} [blacklisted_plugins]
+ * @property {Boolean} [clear_cache_on_logout=false]
+ * @property {Object} [connection_options]
+ * @property {String} [credentials_url] - URL from where login credentials can be fetched
+ * @property {Boolean} [discover_connection_methods=true]
+ * @property {RegExp} [geouri_regex]
+ * @property {RegExp} [geouri_replacement='https://www.openstreetmap.org/?mlat=$1&mlon=$2#map=18/$1/$2']
+ * @property {String} [i18n]
+ * @property {String} [jid]
+ * @property {Boolean} [keepalive=true]
+ * @property {('debug'|'info'|'eror')} [loglevel='info']
+ * @property {Array<String>} [locales]
+ * @property {String} [nickname]
+ * @property {String} [password]
+ * @property {('IndexedDB'|'localStorage')} [persistent_store='IndexedDB']
+ * @property {String} [rid]
+ * @property {Element} [root=window.document]
+ * @property {String} [sid]
+ * @property {Boolean} [singleton=false]
+ * @property {Boolean} [strict_plugin_dependencies=false]
+ * @property {('fullscreen'|'embedded'|'overlayed')} [view_mode='fullscreen']
+ * @property {String} [websocket_url]
+ * @property {Array<String>} [whitelisted_plugins]
  */
 export const DEFAULT_SETTINGS = {
     allow_non_roster_messaging: false,

diff --git a/src/headless/types/shared/settings/api.d.ts b/src/headless/types/shared/settings/api.d.ts
@@ -8,7 +8,7 @@ export namespace settings_api {
      * `converse.initialize`.
      *
      * @method api.settings.extend
-     * @param { object } settings The configuration settings
+     * @param {object} settings The configuration settings
      * @example
      * api.settings.extend({
      *    'enable_foo': true
@@ -21,7 +21,6 @@ export namespace settings_api {
      * });
      */
     function extend(settings: object): void;
-    function update(settings: any): void;
     /**
      * @method _converse.api.settings.get
      * @param {string} [key]

diff --git a/src/plugins/chatview/styles/chat-bottom-panel.scss b/src/plugins/chatview/styles/chat-bottom-panel.scss
@@ -13,9 +13,9 @@
 
             .chat-message-form {
                 border-bottom: 0;
-                border-left: 0;
+                border-inline-start: 0;
                 border-top: 0.25em solid var(--chat-color);
-                border-right: 0.25em solid var(--chat-color);
+                border-inline-end: 0.25em solid var(--chat-color);
                 border-bottom-radius: var(--chatbox-border-radius);
                 background-clip: padding-box;
                 background-color: var(--background-color);

diff --git a/src/plugins/chatview/styles/chat-head.scss b/src/plugins/chatview/styles/chat-head.scss
@@ -15,7 +15,7 @@
             }
 
             .avatar {
-                margin-right: 0.5em;
+                margin-inline-end: 0.5em;
             }
 
             .show-msg-author-modal {

diff --git a/src/plugins/chatview/styles/chatbox.scss b/src/plugins/chatview/styles/chatbox.scss
@@ -10,7 +10,7 @@
 
 .conversejs {
     .chatbox {
-        text-align: left;
+        text-align: start;
 
         @media screen and (max-height: $mobile-landscape-height) {
             margin: 0;
@@ -89,7 +89,7 @@
             text-overflow: ellipsis;
             white-space: nowrap;
             &.groupchat {
-                padding-right: 0;
+                padding-inline-end: 0;
             }
             a {
                 color: var(--chat-color);
@@ -161,7 +161,7 @@
                 }
                 .close-chat-help {
                     float: right;
-                    padding-right: 1em;
+                    padding-inline-end: 1em;
                     cursor: pointer;
                     color: var(--background-color);
                     svg {

diff --git a/src/plugins/chatview/styles/index.scss b/src/plugins/chatview/styles/index.scss
@@ -216,7 +216,7 @@
             .chat-head {
                 converse-controlbox-navback {
                     margin: auto 0;
-                    margin-right: 1em;
+                    margin-inline-end: 1em;
                     display: flex;
                     .fa-arrow-left {
                         svg {

diff --git a/src/plugins/controlbox/styles/_controlbox.scss b/src/plugins/controlbox/styles/_controlbox.scss
@@ -12,7 +12,7 @@
 
         li.room-info {
             display: block;
-            margin-left: 5px;
+            margin-inline-start: 5px;
         }
         p.room-info {
             line-height: var(--line-height);
@@ -52,7 +52,7 @@
 
         .brand-name-wrapper {
             font-size: 200%;
-            padding-right: 0.5em;
+            padding-inline-end: 0.5em;
         }
 
         .brand-name-wrapper--fullscreen {
@@ -73,19 +73,19 @@
 
         form.search-xmpp-contact {
             margin: 0;
-            padding-left: 5px;
+            padding-inline-start: 5px;
             padding: 0 0 5px 5px;
             input {
                 width: 8em;
             }
         }
 
         .msgs-indicator {
-            margin-right: 0.5em;
+            margin-inline-end: 0.5em;
         }
 
         a.subscribe-to-user {
-            padding-left: 2em;
+            padding-inline-start: 2em;
             font-weight: bold;
         }
 
@@ -141,21 +141,19 @@
         }
 
         .controlbox-padded {
-            padding-left: 1em;
-            padding-right: 1em;
             align-items: center;
             line-height: normal;
         }
 
         .controlbox-pane {
-            height: 100%;
-            overflow-y: auto;
             border: 0;
             font-size: var(--font-size);
+            height: 100%;
             left: 0;
-            text-align: left;
             overflow-x: hidden;
-            padding: 0;
+            overflow-y: auto;
+            padding: 0.5em;
+            text-align: start;
 
             .add-converse-contact {
                 margin: 0 0 0.75em 0;
@@ -208,12 +206,11 @@
             }
 
             .brand-heading {
-                padding-left: 1em;
+                padding-inline-start: 1em;
                 width: 100%;
             }
 
             .converse-svg-logo {
-                margin-top: 0.25em;
                 height: 1em;
             }
         }
@@ -222,7 +219,7 @@
         &.converse-fullscreen {
             #controlbox {
                 .flyout {
-                    border-right: 0.2rem solid var(--controlbox-color);
+                    border-inline-end: 0.2rem solid var(--controlbox-color);
                 }
             }
             .toggle-controlbox {
@@ -295,10 +292,10 @@
         &.converse-fullscreen {
             #controlbox {
                 @media screen and (max-width: $mobile-portrait-length) {
-                    margin-left: 0;
+                    margin-inline-start: 0;
                 }
                 @include media-breakpoint-down(sm) {
-                    margin-left: 0;
+                    margin-inline-start: 0;
                 }
                 .box-flyout {
                     @include media-breakpoint-up(md) {
@@ -325,8 +322,8 @@
     .conversejs {
         left: 0;
         right: 0;
-        padding-left: env(safe-area-inset-left);
-        padding-right: env(safe-area-inset-right);
+        padding-inline-start: env(safe-area-inset-left);
+        padding-inline-end: env(safe-area-inset-right);
 
         .converse-chatboxes {
             margin: 0 !important;
@@ -348,7 +345,7 @@
             }
 
             #controlbox {
-                margin-left: 0;
+                margin-inline-start: 0;
                 width: 100vw !important;
                 .box-flyout {
                     width: 100vw !important;

diff --git a/src/plugins/controlbox/styles/loginform.scss b/src/plugins/controlbox/styles/loginform.scss
@@ -27,9 +27,16 @@
     converse-chats {
         &.converse-overlayed {
             #controlbox {
+                converse-login-form {
+                    fieldset {
+                        margin-bottom: 0.5em;
+                    }
+                }
+
                 .login-trusted {
                     white-space: nowrap;
                     font-size: 90%;
+                    margin: 1em 0;
                 }
 
                 #converse-login-panel {
@@ -61,21 +68,18 @@
                 }
 
                 #converse-register, #converse-login {
+                    margin: auto;
                     @include make-col-ready();
                     @include make-col(8);
-                    @include make-col-offset(2);
 
                     @include media-breakpoint-up(sm) {
                         @include make-col(8);
-                        @include make-col-offset(2);
                     }
                     @include media-breakpoint-up(md) {
                         @include make-col(8);
-                        @include make-col-offset(2);
                     }
                     @include media-breakpoint-up(lg) {
                         @include make-col(6);
-                        @include make-col-offset(3);
                     }
                     .title, .instructions {
                         margin: 1em 0;

diff --git a/src/plugins/controlbox/templates/loginform.js b/src/plugins/controlbox/templates/loginform.js
@@ -16,7 +16,7 @@ const trust_checkbox = (checked) => {
     );
     const i18n_trusted = __('This is a trusted device');
     return html`
-        <div class="form-group form-check login-trusted mt-2">
+        <div class="form-group form-check login-trusted">
             <input
                 id="converse-login-trusted"
                 type="checkbox"