From 514208a285025871eec4ecd6aa18f7b514d26827 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Tue, 29 Nov 2022 16:56:36 +0100 Subject: [PATCH] Set horizontal layout direction based on the language Fixes #122 --- CHANGES.md | 5 ++ dev.html | 2 - docs/source/configuration.rst | 8 +++ src/headless/shared/settings/api.js | 11 +--- src/headless/shared/settings/constants.js | 62 +++++++++---------- .../shared/settings/tests/settings.js | 2 +- src/headless/types/shared/settings/api.d.ts | 3 +- .../chatview/styles/chat-bottom-panel.scss | 4 +- src/plugins/chatview/styles/chat-head.scss | 2 +- src/plugins/chatview/styles/chatbox.scss | 6 +- src/plugins/chatview/styles/index.scss | 2 +- .../controlbox/styles/_controlbox.scss | 35 +++++------ src/plugins/controlbox/styles/loginform.scss | 12 ++-- src/plugins/controlbox/templates/loginform.js | 2 +- .../headlines-view/styles/headlines.scss | 2 +- src/plugins/modal/styles/_modal.scss | 9 ++- src/plugins/muc-views/styles/controlbox.scss | 2 +- .../muc-views/styles/muc-bottom-panel.scss | 2 +- .../muc-views/styles/muc-details-modal.scss | 10 +-- src/plugins/muc-views/styles/muc-head.scss | 4 +- .../muc-views/styles/muc-occupant.scss | 6 +- .../muc-views/styles/muc-occupants.scss | 12 ++-- src/plugins/muc-views/styles/muc-sidebar.scss | 4 +- src/plugins/muc-views/styles/muc.scss | 5 +- .../modals/styles/chat-status-modal.scss | 2 +- .../profile/modals/styles/profile.scss | 4 +- src/plugins/profile/styles/profile.scss | 9 ++- src/plugins/profile/templates/profile.js | 6 +- src/plugins/roomslist/styles/roomsgroups.scss | 6 +- src/plugins/rootview/index.js | 3 +- src/plugins/rootview/root.js | 17 ++++- src/plugins/rootview/styles/background.scss | 4 +- src/plugins/rootview/styles/root.scss | 4 +- src/plugins/rosterview/styles/roster.scss | 8 ++- .../autocomplete/styles/_autocomplete.scss | 4 +- src/shared/avatar/avatar.scss | 2 +- src/shared/chat/styles/emoji.scss | 6 +- src/shared/chat/styles/message-actions.scss | 6 +- src/shared/chat/styles/message-body.scss | 2 +- src/shared/components/styles/dropdown.scss | 4 +- src/shared/components/styles/gif.scss | 4 +- src/shared/styles/_core.scss | 23 ++++--- src/shared/styles/buttons.scss | 6 +- src/shared/styles/lists.scss | 7 ++- src/shared/styles/messages.scss | 42 ++++++------- src/shared/styles/status.scss | 6 +- src/shared/styles/themes/cyberpunk.scss | 2 +- src/shared/styles/website.scss | 16 ++--- 48 files changed, 215 insertions(+), 190 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 73b63e64b3..609fac1b84 100644 --- 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 index 816fae682d..ca6be8debc 100644 --- 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 index f26a95e96d..c916d4b091 100644 --- 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 index 8c7cffcbf1..5fce3dc2ae 100644 --- 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 index 99ebfaf772..813d9903e8 100644 --- 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} [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 } [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} [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} [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} [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} [whitelisted_plugins] */ export const DEFAULT_SETTINGS = { allow_non_roster_messaging: false, diff --git a/src/headless/shared/settings/tests/settings.js b/src/headless/shared/settings/tests/settings.js index 18b7c6b777..82bf692097 100644 --- a/src/headless/shared/settings/tests/settings.js +++ b/src/headless/shared/settings/tests/settings.js @@ -7,7 +7,7 @@ describe("The \"settings\" API", function () { const { api } = _converse; - expect(Object.keys(api.settings)).toEqual(["extend", "update", "get", "set", "listen"]); + expect(Object.keys(api.settings)).toEqual(["extend", "get", "set", "listen"]); expect(api.settings.get("play_sounds")).toBe(true); api.settings.set("play_sounds", false); expect(api.settings.get("play_sounds")).toBe(false); diff --git a/src/headless/types/shared/settings/api.d.ts b/src/headless/types/shared/settings/api.d.ts index 28a72fa967..5e3d7f1502 100644 --- 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 index 9d9500bd4d..0e3abdb4a8 100644 --- 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 index 6d562dcf67..d4a3c3c371 100644 --- 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 index f8f87f6b5f..be6148ff50 100644 --- 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 index b3fb1cff49..03d6f253d6 100644 --- 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 index 3011d25cc9..63947bea71 100644 --- 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,7 +73,7 @@ form.search-xmpp-contact { margin: 0; - padding-left: 5px; + padding-inline-start: 5px; padding: 0 0 5px 5px; input { width: 8em; @@ -81,11 +81,11 @@ } .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 index 9c53940632..0e5aedbdd7 100644 --- 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 index 64e1e48703..daa0f3b5ec 100644 --- 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` - ` diff --git a/src/plugins/roomslist/styles/roomsgroups.scss b/src/plugins/roomslist/styles/roomsgroups.scss index b333512a95..ef8e527e3f 100644 --- a/src/plugins/roomslist/styles/roomsgroups.scss +++ b/src/plugins/roomslist/styles/roomsgroups.scss @@ -14,21 +14,19 @@ converse-rooms-list { display: block; - margin-bottom: 0.5em; svg { fill: var(--muc-color); } .list-item { - padding-top: 0; - padding-bottom: 0; - + padding: 0; .open-room { display: flex; flex-direction: row; span { padding-top: 0.5em; + padding-inline-end: 0.5em; } } } diff --git a/src/plugins/rootview/index.js b/src/plugins/rootview/index.js index 1cae810929..5f417c825f 100644 --- a/src/plugins/rootview/index.js +++ b/src/plugins/rootview/index.js @@ -13,9 +13,10 @@ converse.plugins.add('converse-rootview', { // configuration settings. api.settings.extend({ auto_insert: true, - theme: 'classic', dark_theme: 'dracula', + rtl_langs: ["ar", "fa", "he", "ur"], show_background: false, + theme: 'classic', }); api.listen.on('chatBoxesInitialized', ensureElement); diff --git a/src/plugins/rootview/root.js b/src/plugins/rootview/root.js index f837c921ca..eefd05db01 100644 --- a/src/plugins/rootview/root.js +++ b/src/plugins/rootview/root.js @@ -1,11 +1,11 @@ +import { i18n } from 'i18n'; +import { _converse, api } from '@converse/headless'; import tplRoot from "./templates/root.js"; -import { api } from '@converse/headless'; import { CustomElement } from 'shared/components/element.js'; import { getTheme } from './utils.js'; import './styles/root.scss'; - /** * `converse-root` is an optional custom element which can be used to * declaratively insert the Converse UI into the DOM. @@ -15,7 +15,7 @@ import './styles/root.scss'; */ export default class ConverseRoot extends CustomElement { - render () { // eslint-disable-line class-methods-use-this + render () { return tplRoot(); } @@ -39,6 +39,17 @@ export default class ConverseRoot extends CustomElement { this.classList.add(`theme-${theme}`); this.setAttribute('data-bs-theme', theme); this.setAttribute('data-converse-theme', theme); + + const lang = i18n.getLocale(); + this.setAttribute('lang', lang); + + const rtl_langs = api.settings.get('rtl_langs'); + if (rtl_langs.includes(lang)) { + this.setAttribute('dir', 'rtl'); + } else { + this.setAttribute('dir', 'ltr'); + } + this.requestUpdate(); } } diff --git a/src/plugins/rootview/styles/background.scss b/src/plugins/rootview/styles/background.scss index 6302bfd862..9952464637 100644 --- a/src/plugins/rootview/styles/background.scss +++ b/src/plugins/rootview/styles/background.scss @@ -32,14 +32,14 @@ converse-bg { font-weight: normal; text-align: center; font-size: 140%; - margin-left: 0.2em; + margin-inline-start: 0.2em; .byline { margin: 0; font-family: var(--heading-font); font-size: 0.3em; opacity: 0.55; margin-bottom: 2em; - margin-left: -2.7em; + margin-inline-start: -2.7em; word-spacing: 5px; } } diff --git a/src/plugins/rootview/styles/root.scss b/src/plugins/rootview/styles/root.scss index 292aec4aa3..94b89308a9 100644 --- a/src/plugins/rootview/styles/root.scss +++ b/src/plugins/rootview/styles/root.scss @@ -3,8 +3,8 @@ converse-root { &.converse-overlayed { bottom: 0; left: 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); position: fixed; z-index: 1031; // One more than bootstrap navbar } diff --git a/src/plugins/rosterview/styles/roster.scss b/src/plugins/rosterview/styles/roster.scss index 5e90c1b85d..99a6809b2d 100644 --- a/src/plugins/rosterview/styles/roster.scss +++ b/src/plugins/rosterview/styles/roster.scss @@ -11,7 +11,7 @@ .open-contacts-toggle { white-space: nowrap; converse-icon { - margin-left: 0.25em; + margin-inline-start: 0.25em; padding-bottom: 0.1em; } } @@ -19,6 +19,7 @@ } #converse-roster { + text-align: start; width: 100%; margin: 0; padding: 0; @@ -91,6 +92,7 @@ margin: 0; padding: 0; converse-icon.chat-status { + position: relative; border: 2px solid var(--background-color); svg { display: flex; @@ -115,7 +117,7 @@ max-width: 60%; } &.contact-name--offline { - margin-left: 0.25em; + margin-inline-start: 0.25em; } } } @@ -131,7 +133,7 @@ display: inline-block; } .decline-xmpp-request { - margin-left: 1em; + margin-inline-start: 1em; } &:hover { background-color: var(--highlight-color-hover); diff --git a/src/shared/autocomplete/styles/_autocomplete.scss b/src/shared/autocomplete/styles/_autocomplete.scss index 9ce6395485..61f5ac306b 100644 --- a/src/shared/autocomplete/styles/_autocomplete.scss +++ b/src/shared/autocomplete/styles/_autocomplete.scss @@ -33,7 +33,7 @@ padding: .4em; background: var(--background-color); border: inherit; - border-right: 0; + border-inline-end: 0; border-bottom: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); @@ -93,7 +93,7 @@ padding: 0.4em; background: var(--background-color); border: inherit; - border-left: 0; + border-inline-start: 0; border-top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); diff --git a/src/shared/avatar/avatar.scss b/src/shared/avatar/avatar.scss index 96192dba4d..e6cd6d0200 100644 --- a/src/shared/avatar/avatar.scss +++ b/src/shared/avatar/avatar.scss @@ -3,7 +3,7 @@ converse-avatar { background: transparent; &.avatar-muc { - margin-right: 0.5em; + margin-inline-end: 0.5em; } &.modal-avatar { diff --git a/src/shared/chat/styles/emoji.scss b/src/shared/chat/styles/emoji.scss index 7004dd3848..0ff27cfda0 100644 --- a/src/shared/chat/styles/emoji.scss +++ b/src/shared/chat/styles/emoji.scss @@ -77,7 +77,7 @@ display: flex; flex-direction: row; flex-wrap: wrap; - padding-left: 0; + padding-inline-start: 0; li { padding: 0 0.25em; } @@ -94,7 +94,7 @@ height: calc(var(--font-size-huge) * 1.5); width: calc(var(--font-size-huge) * 1.5); overflow: hidden; - margin-left: 0; + margin-inline-start: 0; list-style: none; position: relative; &.insert-emoji { @@ -139,7 +139,7 @@ ul { display: flex; flex-direction: row; - padding-left: 0; + padding-inline-start: 0; .emoji-category { padding: 0.25em 0; diff --git a/src/shared/chat/styles/message-actions.scss b/src/shared/chat/styles/message-actions.scss index 17a94e503c..cfe4048ba6 100644 --- a/src/shared/chat/styles/message-actions.scss +++ b/src/shared/chat/styles/message-actions.scss @@ -1,5 +1,5 @@ converse-message-actions { - margin-left: 0.5em; + margin-inline-start: 0.5em; .chat-msg__actions { .dropdown-menu { @@ -25,11 +25,11 @@ converse-message-actions { .chat-msg__action { width: 100%; padding: 0.5em 1em; - text-align: left; + text-align: start; white-space: nowrap; converse-icon { - margin-right: 0.25em; + margin-inline-end: 0.25em; } &:hover { diff --git a/src/shared/chat/styles/message-body.scss b/src/shared/chat/styles/message-body.scss index 5ff3b152be..3007371df2 100644 --- a/src/shared/chat/styles/message-body.scss +++ b/src/shared/chat/styles/message-body.scss @@ -3,7 +3,7 @@ @import "shared/styles/_mixins.scss"; converse-chat-message-body { - margin-right: 0.5em; + margin-inline-end: 0.5em; overflow-y: hidden; // Hide zalgo text that overflows vertically audio { diff --git a/src/shared/components/styles/dropdown.scss b/src/shared/components/styles/dropdown.scss index b55a9e3a02..72073adb17 100644 --- a/src/shared/components/styles/dropdown.scss +++ b/src/shared/components/styles/dropdown.scss @@ -30,13 +30,15 @@ } .dropdown-item { + text-align: start; color: var(--text-color) !important; font-size: var(--font-size); padding: 0.5rem 1rem; converse-icon { margin-top: -0.1em; width: 1.25em; - margin-right: 0.25rem; + margin-inline-end: 0.25rem; + margin-inline-start: 0.25rem; } &:active, &.selected { background-color: var(--highlight-color); diff --git a/src/shared/components/styles/gif.scss b/src/shared/components/styles/gif.scss index f221363eac..a31743c1a2 100644 --- a/src/shared/components/styles/gif.scss +++ b/src/shared/components/styles/gif.scss @@ -44,8 +44,8 @@ img.gif { &:after { opacity: 0; transition: opacity 0.25s ease-in-out; - border-left: 20px solid #FFF; - border-right: 20px solid #FFF; + border-inline-start: 20px solid #FFF; + border-inline-end: 20px solid #FFF; width: 50px; height: 50px; } diff --git a/src/shared/styles/_core.scss b/src/shared/styles/_core.scss index 16b0681415..be06a175d1 100644 --- a/src/shared/styles/_core.scss +++ b/src/shared/styles/_core.scss @@ -2,7 +2,6 @@ color: var(--text-color); font-family: var(--normal-font); font-size: var(--font-size); - direction: ltr; .flyout { position: absolute; @@ -63,7 +62,7 @@ font-family: var(--heading-font); font-size: 0.3em; margin-bottom: 0.75em; - margin-left: -2.7em; + margin-inline-start: -2.7em; opacity: 0.55; word-spacing: 5px; } @@ -81,7 +80,7 @@ .converse-svg-logo { color: var(--link-color); height: 1.5em; - margin-right: 0.25em; + margin-inline-end: 0.25em; margin-bottom: -0.25em; .cls-1 { isolation: isolate; @@ -109,7 +108,7 @@ font-family: var(--heading-font); font-size: 0.25em; opacity: 0.55; - margin-left: -7em; + margin-inline-start: -7em; word-spacing: 5px; } } @@ -388,7 +387,7 @@ } .locked { - padding-right: 22px; + padding-inline-end: 22px; } @keyframes spin { @@ -437,7 +436,7 @@ } .avatar-autocomplete { - margin-right: 0.5em; + margin-inline-end: 0.5em; vertical-align: middle; } @@ -480,28 +479,28 @@ @media screen and (min-width: 576px) { .conversejs .offset-sm-2 { - margin-left: 16.666667%; + margin-inline-start: 16.666667%; } } @media screen and (min-width: 768px) { .conversejs .offset-md-2 { - margin-left: 16.666667%; + margin-inline-start: 16.666667%; } .conversejs .offset-md-3 { - margin-left: 25%; + margin-inline-start: 25%; } } @media screen and (min-width: 992px) { .conversejs .offset-lg-2 { - margin-left: 16.666667%; + margin-inline-start: 16.666667%; } .conversejs .offset-lg-3 { - margin-left: 25%; + margin-inline-start: 25%; } } @media screen and (min-width: 1200px) { .conversejs .offset-xl-2 { - margin-left: 16.666667%; + margin-inline-start: 16.666667%; } } @media screen and (max-height: 450px) { diff --git a/src/shared/styles/buttons.scss b/src/shared/styles/buttons.scss index 74f344df95..0829200684 100644 --- a/src/shared/styles/buttons.scss +++ b/src/shared/styles/buttons.scss @@ -8,15 +8,15 @@ i { &.fa, &.far, &.fas { color: var(--button-text-color); - margin-right: 0.5em; + margin-inline-end: 0.5em; &.only-icon { - margin-right: 0; + margin-inline-end: 0; } } } converse-icon { display: inline-block; - margin-right: 0; + margin-inline-end: 0; svg { color: var(--button-text-color); } diff --git a/src/shared/styles/lists.scss b/src/shared/styles/lists.scss index f1304ef991..f893511cb5 100644 --- a/src/shared/styles/lists.scss +++ b/src/shared/styles/lists.scss @@ -10,7 +10,7 @@ } .list-container { - text-align: left; + text-align: start; padding: 0.3em 0; .list-toggle { @@ -23,8 +23,9 @@ } .items-list { - padding-left: 0; - text-align: left; + padding-inline-end: 0; + padding-inline-start: 0; + text-align: start; .list-item { border: none; diff --git a/src/shared/styles/messages.scss b/src/shared/styles/messages.scss index ef34f77012..05e8d9d8f1 100644 --- a/src/shared/styles/messages.scss +++ b/src/shared/styles/messages.scss @@ -16,13 +16,13 @@ } blockquote { - margin-left: 0.5em; - margin-bottom: 0.25em; - padding-right: 1em; + border-inline-start: 0.3em solid var(--info-color); color: var(--info-color); - border-left: 0.3em solid var(--info-color); - padding-left: 0.5em; display: inline-block; + margin-bottom: 0.25em; + margin-inline-start: 0; + padding-inline-end: 1em; + padding-inline-start: 0.5em; } code { @@ -100,7 +100,7 @@ font-style: italic; .chat-msg__author { - padding-right: 0.2em; + padding-inline-end: 0.2em; } } @@ -131,10 +131,10 @@ color: var(--background-color); i { color: var(--background-color); - padding-right: 0.5em; + padding-inline-end: 0.5em; } &:before { - padding-right: 0.25em; + padding-inline-end: 0.25em; white-space: nowrap; } } @@ -153,7 +153,7 @@ .chat-msg__content--action { width: 100%; - margin-left: 0; + margin-inline-start: 0; } .chat-msg__message { @@ -201,7 +201,7 @@ .chat-msg__edit-modal { cursor: pointer; - padding-right: 0.5em; + padding-inline-end: 0.5em; } .chat-msg__subject { @@ -242,15 +242,15 @@ .chat-msg__heading { width: 100%; - padding-right: 0.25rem; + padding-inline-end: 0.25rem; .badge { - margin-left: 0.5em; + margin-inline-start: 0.5em; font-family: var(--normal_font); } .chat-msg__time { - padding-left: 0.25em; - padding-right: 0.25em; + padding-inline-start: 0.25em; + padding-inline-end: 0.25em; color: var(--secondary-color); } .fa-lock { @@ -272,14 +272,14 @@ width: auto; .fa { - margin-left: 0.5em; + margin-inline-start: 0.5em; } } .chat-msg__author { font-size: var(--message-font-size); } .chat-msg__time { - margin-left: 0; + margin-inline-start: 0; } } @@ -293,14 +293,14 @@ display: none; } &.chat-msg--with-avatar .chat-msg__content { - margin-left: 2.75rem; + margin-inline-start: 2.75rem; width: 100%; } } .chat-msg__receipt { - margin-left: 0.5em; - margin-right: 0.5em; + margin-inline-start: 0.5em; + margin-inline-end: 0.5em; color: var(--success-color); } } @@ -310,7 +310,7 @@ flex-direction: column; justify-content: space-between; align-items: stretch; - margin-left: 0.5rem; + margin-inline-start: 0.5rem; &:hover { .btn--standalone { opacity: 1; @@ -342,7 +342,7 @@ &.chat-msg { &.chat-msg--followup { .chat-msg__content { - margin-left: 0; + margin-inline-start: 0; } } } diff --git a/src/shared/styles/status.scss b/src/shared/styles/status.scss index d54248536b..259b0ce936 100644 --- a/src/shared/styles/status.scss +++ b/src/shared/styles/status.scss @@ -1,19 +1,19 @@ .conversejs { .chat-status { vertical-align: middle; - margin-right: 0; + margin-inline-end: 0; border-radius: 50%; font-size: 1em; &.chat-status--avatar { font-size: 0.6rem; - margin-left: -0.7em; + margin-inline-start: -0.7em; margin-bottom: -1.9em; border-radius: 50%; } } .chat-status--offline { - margin-right: 0.8em; + margin-inline-end: 0.8em; } .chat-status--online { color: var(--chat-status-online); diff --git a/src/shared/styles/themes/cyberpunk.scss b/src/shared/styles/themes/cyberpunk.scss index 658a04f760..f986ddd855 100644 --- a/src/shared/styles/themes/cyberpunk.scss +++ b/src/shared/styles/themes/cyberpunk.scss @@ -191,7 +191,7 @@ height: 100%; width: 2px; background-color: pink; - margin-left: 4.5%; + margin-inline-start: 4.5%; box-shadow: 0 2px 21px pink; } } diff --git a/src/shared/styles/website.scss b/src/shared/styles/website.scss index 9e9af1b5fb..2892a6f63a 100644 --- a/src/shared/styles/website.scss +++ b/src/shared/styles/website.scss @@ -256,7 +256,7 @@ section { font-size: 20px; opacity: 0.5; margin-bottom: 2em; - margin-left: -75px; + margin-inline-start: -75px; } .subdued { @@ -267,7 +267,7 @@ section { .converse-svg-logo { height: 1.2em; - margin-right: 0.25em; + margin-inline-end: 0.25em; margin-bottom: 0.1em; .cls-1 { isolation: isolate; @@ -454,7 +454,7 @@ ul.contact, ul.integration, ul.screencasts, ul.features { - text-align: left; + text-align: start; font-size: 19px; } .feature-icon { @@ -481,7 +481,7 @@ ul.features { position: absolute; bottom: 0; left: 50%; - margin-left: -0.325em; + margin-inline-start: -0.325em; width: 0.65em; height: 0.65em; display: block; @@ -495,11 +495,11 @@ ul.features { width: 1px; height: 4.35em; background: white; - margin-left: -0.5px; + margin-inline-start: -0.5px; } .row { - margin-left: 0; - margin-right: 0; + margin-inline-start: 0; + margin-inline-end: 0; } .mastodon { @@ -529,6 +529,6 @@ ul.features { list-style: none; } .sponsors-text { - text-align: left; + text-align: start; padding: 0 0 1em 0; }