diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index 1adc7446b..dee2d56c5 100644 --- a/js/views/conversation_view.js +++ b/js/views/conversation_view.js @@ -346,12 +346,12 @@ this.hideConversationRight = () => { this.$('.conversation-content-right').css({ - 'margin-right': '-22vw', + 'margin-inline-end': '-22vw', }); }; this.showConversationRight = () => { this.$('.conversation-content-right').css({ - 'margin-right': '0vw', + 'margin-inline-end': '0vw', }); }; diff --git a/libtextsecure/test/blanket_mocha.js b/libtextsecure/test/blanket_mocha.js index ccab29937..b7040f09d 100644 --- a/libtextsecure/test/blanket_mocha.js +++ b/libtextsecure/test/blanket_mocha.js @@ -4472,7 +4472,7 @@ _blanket.extend({ })(blanket); blanket.defaultReporter = function(coverage){ - var cssSytle = "#blanket-main {margin:2px;background:#EEE;color:#333;clear:both;font-family:'Helvetica Neue Light', 'HelveticaNeue-Light', 'Helvetica Neue', Calibri, Helvetica, Arial, sans-serif; font-size:17px;} #blanket-main a {color:#333;text-decoration:none;} #blanket-main a:hover {text-decoration:underline;} .blanket {margin:0;padding:5px;clear:both;border-bottom: 1px solid #FFFFFF;} .bl-error {color:red;}.bl-success {color:#5E7D00;} .bl-file{width:auto;} .bl-cl{float:left;} .blanket div.rs {margin-left:50px; width:150px; float:right} .bl-nb {padding-right:10px;} #blanket-main a.bl-logo {color: #EB1764;cursor: pointer;font-weight: bold;text-decoration: none} .bl-source{ overflow-x:scroll; background-color: #FFFFFF; border: 1px solid #CBCBCB; color: #363636; margin: 25px 20px; width: 80%;} .bl-source div{white-space: pre;font-family: monospace;} .bl-source > div > span:first-child{background-color: #EAEAEA;color: #949494;display: inline-block;padding: 0 10px;text-align: center;width: 30px;} .bl-source .miss{background-color:#e6c3c7} .bl-source span.branchWarning{color:#000;background-color:yellow;} .bl-source span.branchOkay{color:#000;background-color:transparent;}", + var cssSytle = "#blanket-main {margin:2px;background:#EEE;color:#333;clear:both;font-family:'Helvetica Neue Light', 'HelveticaNeue-Light', 'Helvetica Neue', Calibri, Helvetica, Arial, sans-serif; font-size:17px;} #blanket-main a {color:#333;text-decoration:none;} #blanket-main a:hover {text-decoration:underline;} .blanket {margin:0;padding:5px;clear:both;border-bottom: 1px solid #FFFFFF;} .bl-error {color:red;}.bl-success {color:#5E7D00;} .bl-file{width:auto;} .bl-cl{float:left;} .blanket div.rs {margin-inline-start:50px; width:150px; float:right} .bl-nb {padding-inline-end:10px;} #blanket-main a.bl-logo {color: #EB1764;cursor: pointer;font-weight: bold;text-decoration: none} .bl-source{ overflow-x:scroll; background-color: #FFFFFF; border: 1px solid #CBCBCB; color: #363636; margin: 25px 20px; width: 80%;} .bl-source div{white-space: pre;font-family: monospace;} .bl-source > div > span:first-child{background-color: #EAEAEA;color: #949494;display: inline-block;padding: 0 10px;text-align: center;width: 30px;} .bl-source .miss{background-color:#e6c3c7} .bl-source span.branchWarning{color:#000;background-color:yellow;} .bl-source span.branchOkay{color:#000;background-color:transparent;}", successRate = 60, head = document.head, fileNumber = 0, @@ -5237,73 +5237,73 @@ _blanket.extend({ })(blanket); -(function() { - - if(!mocha) { - throw new Exception("mocha library does not exist in global namespace!"); - } - - - /* - * Mocha Events: - * - * - `start` execution started - * - `end` execution complete - * - `suite` (suite) test suite execution started - * - `suite end` (suite) all tests (and sub-suites) have finished - * - `test` (test) test execution started - * - `test end` (test) test completed - * - `hook` (hook) hook execution started - * - `hook end` (hook) hook complete - * - `pass` (test) test passed - * - `fail` (test, err) test failed - * - */ - - var OriginalReporter = mocha._reporter; - - var BlanketReporter = function(runner) { - runner.on('start', function() { - blanket.setupCoverage(); - }); - - runner.on('end', function() { - blanket.onTestsDone(); - }); - - runner.on('suite', function() { - blanket.onModuleStart(); - }); - - runner.on('test', function() { - blanket.onTestStart(); - }); - - runner.on('test end', function(test) { - blanket.onTestDone(test.parent.tests.length, test.state === 'passed'); - }); - - // NOTE: this is an instance of BlanketReporter - new OriginalReporter(runner); - }; - - BlanketReporter.prototype = OriginalReporter.prototype; - - mocha.reporter(BlanketReporter); - - var oldRun = mocha.run, - oldCallback = null; - - mocha.run = function (finishCallback) { - oldCallback = finishCallback; - console.log("waiting for blanket..."); - }; - blanket.beforeStartTestRunner({ - callback: function(){ - if (!blanket.options("existingRequireJS")){ - oldRun(oldCallback); - } - mocha.run = oldRun; - } - }); -})(); +(function() { + + if(!mocha) { + throw new Exception("mocha library does not exist in global namespace!"); + } + + + /* + * Mocha Events: + * + * - `start` execution started + * - `end` execution complete + * - `suite` (suite) test suite execution started + * - `suite end` (suite) all tests (and sub-suites) have finished + * - `test` (test) test execution started + * - `test end` (test) test completed + * - `hook` (hook) hook execution started + * - `hook end` (hook) hook complete + * - `pass` (test) test passed + * - `fail` (test, err) test failed + * + */ + + var OriginalReporter = mocha._reporter; + + var BlanketReporter = function(runner) { + runner.on('start', function() { + blanket.setupCoverage(); + }); + + runner.on('end', function() { + blanket.onTestsDone(); + }); + + runner.on('suite', function() { + blanket.onModuleStart(); + }); + + runner.on('test', function() { + blanket.onTestStart(); + }); + + runner.on('test end', function(test) { + blanket.onTestDone(test.parent.tests.length, test.state === 'passed'); + }); + + // NOTE: this is an instance of BlanketReporter + new OriginalReporter(runner); + }; + + BlanketReporter.prototype = OriginalReporter.prototype; + + mocha.reporter(BlanketReporter); + + var oldRun = mocha.run, + oldCallback = null; + + mocha.run = function (finishCallback) { + oldCallback = finishCallback; + console.log("waiting for blanket..."); + }; + blanket.beforeStartTestRunner({ + callback: function(){ + if (!blanket.options("existingRequireJS")){ + oldRun(oldCallback); + } + mocha.run = oldRun; + } + }); +})(); diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss index 295d9328c..92a613e45 100644 --- a/stylesheets/_conversation.scss +++ b/stylesheets/_conversation.scss @@ -120,7 +120,7 @@ } .summary { - margin: 30px 0 10px; + margin: 30px 0 10px 0; text-align: center; } @@ -180,13 +180,13 @@ } .loki-message-wrapper { - padding-left: 16px; - padding-right: 16px; + padding-inline-start: 16px; + padding-inline-end: 16px; } .public-chat-message-wrapper { - padding-left: 10px; - padding-right: 10px; + padding-inline-start: 10px; + padding-inline-end: 10px; } .loki-message-wrapper { @@ -252,7 +252,7 @@ background-color: #00f782; color: white; padding: 6px 10px; - margin-left: 6px; + margin-inline-start: 6px; border-radius: 2px; box-shadow: none; user-select: none; @@ -297,14 +297,14 @@ padding: 18px; // This makes sure the message counter is right in the center width: 80px; - margin-right: -80px; + margin-inline-end: -80px; user-select: none; } .cancel-button { padding: 18px; width: 80px; - margin-left: -80px; + margin-inline-start: -80px; user-select: none; } @@ -313,8 +313,8 @@ display: flex; align-items: center; user-select: none; - margin-left: auto; - margin-right: auto; + margin-inline-start: auto; + margin-inline-end: auto; } } @@ -332,8 +332,8 @@ // things in the composition area. A margin on an inner div won't be included in that // height calculation. .bottom-bar .quote-wrapper { - margin-left: 37px; - margin-right: 73px; + margin-inline-start: 37px; + margin-inline-end: 73px; margin-top: 3px; margin-bottom: -5px; } @@ -356,8 +356,8 @@ .bottom-bar .preview-wrapper { margin-top: 3px; - margin-left: 37px; - margin-right: 73px; + margin-inline-start: 37px; + margin-inline-end: 73px; margin-bottom: 2px; } @@ -492,8 +492,8 @@ .module-last-seen-indicator { padding-top: 25px; padding-bottom: 35px; - margin-left: 28px; - margin-right: 28px; + margin-inline-start: 28px; + margin-inline-end: 28px; &__bar { @include themify($themes) { diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss index a77b4992a..9d742c87f 100644 --- a/stylesheets/_global.scss +++ b/stylesheets/_global.scss @@ -264,7 +264,7 @@ $loading-height: 16px; line-height: 36px; padding: 0 20px; background: $blue; - margin-left: 20px; + margin-inline-start: 20px; } .message { @@ -294,13 +294,13 @@ $loading-height: 16px; user-select: none; .content { - margin-left: auto; - margin-right: auto; + margin-inline-start: auto; + margin-inline-end: auto; text-align: center; } .container { - margin-left: auto; - margin-right: auto; + margin-inline-start: auto; + margin-inline-end: auto; width: 78px; height: 22px; } diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss index f738f5e5a..08dd2d873 100644 --- a/stylesheets/_index.scss +++ b/stylesheets/_index.scss @@ -56,7 +56,7 @@ .upload-btn-background { background-color: #ffffff70; align-self: center; - margin-left: -24px; + margin-inline-start: -24px; margin-top: 40px; z-index: 1; border-radius: 8px; @@ -173,7 +173,7 @@ h4.section-toggle, .section-conversations-container { display: flex; flex-direction: row; - margin-right: 3em; + margin-inline-end: 3em; align-items: center; h4 { @@ -187,7 +187,7 @@ h4.section-toggle, background-size: 25px 25px; background-color: #fcd156; padding: 10px; - padding-left: 2 * $button-height; + padding-inline-start: 2 * $button-height; display: none; .network-status-message { @@ -258,14 +258,14 @@ h4.section-toggle, } $search-x-size: 16px; -$search-padding-right: 12px; -$search-padding-left: 30px; +$search-padding-inline-end: 12px; +$search-padding-inline-start: 30px; input.search { border: 1px solid $color-black-02; - padding: 0 $search-padding-right 0 $search-padding-left; - margin-left: 8px; - margin-right: 8px; + padding: 0 $search-padding-inline-end 0 $search-padding-inline-start; + margin-inline-start: 8px; + margin-inline-end: 8px; outline: 0; height: 32px; width: calc(100% - 16px); @@ -287,11 +287,11 @@ input.search { background-size: $search-x-size; &.ltr { - background-position: right $search-padding-right center; + background-position: right $search-padding-inline-end center; } &.rtl { - background-position: left $search-padding-left center; + background-position: left $search-padding-inline-start center; } } @@ -321,7 +321,7 @@ input.search { .contact-details .number { display: block; font-style: italic; - padding-right: 8px; + padding-inline-end: 8px; } &.valid { diff --git a/stylesheets/_mentions.scss b/stylesheets/_mentions.scss index 203f83c2d..04e6d0377 100644 --- a/stylesheets/_mentions.scss +++ b/stylesheets/_mentions.scss @@ -1,5 +1,5 @@ // used for the list after adding a `@` in the compose text input -.friend-selection-list { +.contact-selection-list { max-height: 240px; overflow-y: auto; margin: 4px; @@ -26,7 +26,7 @@ } .dark-theme { - .friend-selection-list { + .contact-selection-list { .check-mark { color: rgb(230, 230, 230); } @@ -60,11 +60,11 @@ .name-part { font-weight: 300; - margin-left: 12px; + margin-inline-start: 12px; } .pubkey-part { - margin-left: 10px; + margin-inline-start: 10px; opacity: 0.6; } } @@ -97,12 +97,12 @@ text-align: center; padding-top: 1px; - padding-left: 3px; - padding-right: 3px; + padding-inline-start: 3px; + padding-inline-end: 3px; position: absolute; left: 50%; - margin-left: 30px; + margin-inline-start: 30px; top: 2px; font-weight: 300; diff --git a/stylesheets/_modal.scss b/stylesheets/_modal.scss index a9814fbef..a0c314bb4 100644 --- a/stylesheets/_modal.scss +++ b/stylesheets/_modal.scss @@ -47,7 +47,7 @@ text-align: center; } - .no-friends { + .no-contacts { text-align: center; } @@ -96,7 +96,7 @@ button { float: right; - margin-left: 10px; + margin-inline-start: 10px; background-color: $color-loki-green; border-radius: 100px; padding: 5px 15px; @@ -285,7 +285,7 @@ display: flex; align-items: center; justify-content: center; - margin-left: $session-margin-lg; + margin-inline-start: $session-margin-lg; p { font-size: $session-font-md; diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index b2dea00f9..d23297cd8 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -67,13 +67,13 @@ // Spec: container < 438px .module-message--incoming { - margin-left: 0; - margin-right: 32px; + margin-inline-start: 0; + margin-inline-end: 32px; } .module-message--outgoing { float: right; - margin-right: 0; - margin-left: 32px; + margin-inline-end: 0; + margin-inline-start: 32px; } .module-message__buttons { @@ -121,10 +121,10 @@ } .module-message__buttons__download--incoming { - margin-left: 12px; + margin-inline-start: 12px; } .module-message__buttons__download--outgoing { - margin-right: 12px; + margin-inline-end: 12px; } .module-message__buttons__reply { @@ -139,10 +139,10 @@ } .module-message__buttons__reply--incoming { - margin-left: 12px; + margin-inline-start: 12px; } .module-message__buttons__reply--outgoing { - margin-right: 12px; + margin-inline-end: 12px; } .module-message__buttons__menu { @@ -157,11 +157,11 @@ } .module-message__buttons__menu--incoming { - margin-left: 12px; + margin-inline-start: 12px; } .module_message__buttons__menu--outgoing { - margin-right: 12px; + margin-inline-end: 12px; } .module-message__error-container { @@ -190,8 +190,8 @@ position: relative; display: inline-block; border-radius: $message-container-border-radius; - padding-right: 12px; - padding-left: 12px; + padding-inline-end: 12px; + padding-inline-start: 12px; padding-top: 10px; padding-bottom: 10px; min-width: 0px; @@ -202,8 +202,8 @@ text-align: center; position: relative; - margin-left: -12px; - margin-right: -12px; + margin-inline-start: -12px; + margin-inline-end: -12px; margin-top: -10px; margin-bottom: -10px; @@ -262,16 +262,16 @@ position: relative; } .module-message__generic-attachment__spinner-container { - padding-left: 4px; - padding-right: 4px; + padding-inline-start: 4px; + padding-inline-end: 4px; } .module-message__generic-attachment__icon { background: url('../images/file-gradient.svg') no-repeat center; height: 44px; width: 56px; - margin-left: -13px; - margin-right: -14px; + margin-inline-start: -13px; + margin-inline-end: -14px; margin-bottom: -4px; // So we can center the extension text inside this icon @@ -309,8 +309,8 @@ // Along with flow layout in parent item, centers text text-align: center; width: 25px; - margin-left: auto; - margin-right: auto; + margin-inline-start: auto; + margin-inline-end: auto; // We don't have much room for text here, cut it off without ellipse overflow-x: hidden; @@ -322,7 +322,7 @@ .module-message__generic-attachment__text { flex-grow: 1; - margin-left: 8px; + margin-inline-start: 8px; // The width of the icon plus our 8px margin max-width: calc(100% - 37px); } @@ -362,8 +362,8 @@ .module-message__link-preview { cursor: pointer; - margin-left: -12px; - margin-right: -12px; + margin-inline-start: -12px; + margin-inline-end: -12px; margin-top: -10px; margin-bottom: 5px; border-top-left-radius: 16px; @@ -396,7 +396,7 @@ .module-message__link-preview__icon_container { margin: -2px; - margin-right: 8px; + margin-inline-end: 8px; display: inline-block; } @@ -488,7 +488,7 @@ width: 100%; // Because this is absolutely positioned, we 100% is too big, take it down by parent // padding sizes. - padding-right: 24px; + padding-inline-end: 24px; } .module-message__metadata__date, @@ -522,9 +522,9 @@ width: 12px; height: 12px; display: inline-block; - margin-left: 6px; + margin-inline-start: 6px; margin-bottom: 2px; - margin-left: 5px; + margin-inline-start: 5px; } .module-message__metadata__status-icon--sending { @@ -572,8 +572,8 @@ margin-top: 8px; margin-bottom: -10px; - margin-left: -12px; - margin-right: -12px; + margin-inline-start: -12px; + margin-inline-end: -12px; text-align: center; padding: 10px; @@ -585,7 +585,7 @@ .module-message__author-avatar { flex-direction: column-reverse; display: inline-flex; - padding-right: 4px; + padding-inline-end: 4px; } .module-message__typing-container { @@ -599,7 +599,7 @@ // Module: Expire Timer .module-expire-timer-margin { - margin-left: 6px; + margin-inline-start: 6px; } .module-expire-timer { @@ -675,13 +675,13 @@ } .module-embedded-contact__spinner-container { - padding-left: 5px; - padding-right: 5px; + padding-inline-start: 5px; + padding-inline-end: 5px; } .module-embedded-contact__text-container { flex-grow: 1; - margin-left: 8px; + margin-inline-start: 8px; max-width: calc(100% - 58px); } @@ -785,8 +785,8 @@ .module-contact-detail { text-align: center; max-width: 300px; - margin-left: auto; - margin-right: auto; + margin-inline-start: auto; + margin-inline-end: auto; } .module-contact-detail__avatar { @@ -831,7 +831,7 @@ height: 17px; width: 18px; display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; @include color-svg('../images/chat-bubble.svg', white); } @@ -899,8 +899,8 @@ .module-safety-number-notification__icon { height: 24px; width: 24px; - margin-left: auto; - margin-right: auto; + margin-inline-start: auto; + margin-inline-end: auto; margin-bottom: 7px; @include color-svg('../images/shield.svg', $color-gray-60); } @@ -947,8 +947,8 @@ .module-verification-notification__icon--mark-verified { height: 24px; width: 24px; - margin-left: auto; - margin-right: auto; + margin-inline-start: auto; + margin-inline-end: auto; margin-bottom: 4px; @include color-svg('../images/verified-check.svg', $color-gray-60); } @@ -956,8 +956,8 @@ .module-verification-notification__icon--mark-not-verified { height: 24px; width: 24px; - margin-left: auto; - margin-right: auto; + margin-inline-start: auto; + margin-inline-end: auto; margin-bottom: 7px; @include color-svg('../images/shield.svg', $color-gray-60); } @@ -974,8 +974,8 @@ } .module-timer-notification__icon-container { - margin-left: auto; - margin-right: auto; + margin-inline-start: auto; + margin-inline-end: auto; display: inline-flex; flex-direction: row; align-items: center; @@ -997,7 +997,7 @@ font-size: 11px; line-height: 16px; letter-spacing: 0.3px; - margin-left: 6px; + margin-inline-start: 6px; text-transform: uppercase; // Didn't seem centered otherwise @@ -1017,8 +1017,8 @@ .module-notification__icon { height: 24px; width: 24px; - margin-left: auto; - margin-right: auto; + margin-inline-start: auto; + margin-inline-end: auto; } // Module: Contact List Item @@ -1038,7 +1038,7 @@ } .module-contact-list-item__text { - margin-left: 8px; + margin-inline-start: 8px; } .module-contact-list-item__text__name { @@ -1077,8 +1077,8 @@ .module-conversation-header__back-icon { @include color-svg('../images/back.svg', $color-gray-90); display: inline-block; - margin-left: -10px; - margin-right: -2px; + margin-inline-start: -10px; + margin-inline-end: -2px; width: 35px; height: 35px; min-width: 35px; @@ -1099,8 +1099,8 @@ } .module-conversation-header__title-flex { - margin-left: auto; - margin-right: auto; + margin-inline-start: auto; + margin-inline-end: auto; display: inline-flex; flex-direction: row; align-items: center; @@ -1115,7 +1115,7 @@ } .module-conversation-header__title { - margin-left: 6px; + margin-inline-start: 6px; min-width: 0; font-size: 16px; @@ -1151,8 +1151,8 @@ display: flex; flex-direction: row; align-items: center; - padding-left: 8px; - padding-right: 8px; + padding-inline-start: 8px; + padding-inline-end: 8px; } .module-conversation-header__expiration__clock-icon { @@ -1163,7 +1163,7 @@ } .module-conversation-header__expiration__setting { - margin-left: 5px; + margin-inline-start: 5px; text-align: center; } @@ -1171,7 +1171,7 @@ @include color-svg('../images/gear.svg', $color-gray-60); height: 20px; width: 20px; - margin-left: 4px; + margin-inline-start: 4px; cursor: pointer; } @@ -1179,8 +1179,8 @@ .module-message-detail { max-width: 650px; - margin-left: auto; - margin-right: auto; + margin-inline-start: auto; + margin-inline-end: auto; padding: 20px; } @@ -1199,7 +1199,7 @@ .module-message-detail__label { font-weight: 300; - padding-right: 5px; + padding-inline-end: 5px; } .module-message-detail__unix-timestamp { @@ -1236,7 +1236,7 @@ } .module-message-detail__contact__text { - margin-left: 10px; + margin-inline-start: 10px; flex-grow: 1; } @@ -1250,7 +1250,7 @@ height: 12px; display: inline-block; margin-bottom: 2px; - margin-left: 5px; + margin-inline-start: 5px; } .module-message-detail__contact__status-icon--sending { @@ -1282,8 +1282,8 @@ } .module-message-detail__contact__unidentified-delivery-icon { - margin-left: 6px; - margin-right: 10px; + margin-inline-start: 6px; + margin-inline-end: 10px; width: 20px; height: 20px; @@ -1306,7 +1306,7 @@ @include button-reset; color: $color-white; background-color: $session-color-danger; - margin-left: 5px; + margin-inline-start: 5px; margin-top: 5px; padding: 4px; border-radius: 4px; @@ -1372,7 +1372,7 @@ // Module: Document List Item .module-document-list-item { - padding-right: 10px; + padding-inline-end: 10px; width: 100%; height: 72px; } @@ -1403,8 +1403,8 @@ flex-direction: column; flex-grow: 1; flex-shrink: 0; - margin-left: 8px; - margin-right: 8px; + margin-inline-start: 8px; + margin-inline-end: 8px; } .module-document-list-item__file-name { @@ -1429,7 +1429,7 @@ width: 94px; cursor: pointer; background-color: $color-light-10; - margin-right: 4px; + margin-inline-end: 4px; margin-bottom: 4px; position: relative; } @@ -1508,8 +1508,8 @@ max-width: 300px; display: flex; flex-direction: row; - padding-right: 16px; - padding-left: 16px; + padding-inline-end: 16px; + padding-inline-start: 16px; align-items: center; cursor: pointer; @@ -1529,8 +1529,8 @@ text-align: center; padding-top: 1px; - padding-left: 3px; - padding-right: 3px; + padding-inline-start: 3px; + padding-inline-end: 3px; position: absolute; right: -6px; @@ -1550,7 +1550,7 @@ .module-conversation-list-item__content { flex-grow: 1; - margin-left: 12px; + margin-inline-start: 12px; display: flex; flex-direction: column; align-items: stretch; @@ -1583,7 +1583,7 @@ .module-conversation-list-item__header__timestamp { flex-shrink: 0; - margin-left: 6px; + margin-inline-start: 6px; font-size: 11px; line-height: 16px; @@ -1637,7 +1637,7 @@ width: 12px; height: 13px; display: inline-block; - margin-left: 6px; + margin-inline-start: 6px; } .module-conversation-list-item__message__status-icon--sending { @@ -1679,7 +1679,7 @@ .module-main-header__title { height: 55px; - padding-left: 16px; + padding-inline-start: 16px; flex: 1; flex-direction: row; display: flex; @@ -1743,7 +1743,7 @@ .module-main-header__contact-name { font-weight: 300; - margin-left: 12px; + margin-inline-start: 12px; color: $color-dark-05; overflow-x: auto; flex: 1; @@ -1763,8 +1763,8 @@ background-color: $color-gray-95; border: 1px solid $color-light-60; padding: 0 26px 0 30px; - margin-left: 8px; - margin-right: 8px; + margin-inline-start: 8px; + margin-inline-end: 8px; outline: 0; height: 32px; width: calc(100% - 16px); @@ -2004,8 +2004,8 @@ height: 8px; width: 38px; - padding-left: 1px; - padding-right: 1px; + padding-inline-start: 1px; + padding-inline-end: 1px; } .module-typing-animation__dot { @@ -2107,8 +2107,8 @@ .module-attachments__rail { margin-top: 12px; - margin-left: 16px; - padding-right: 16px; + margin-inline-start: 16px; + padding-inline-end: 16px; overflow-x: scroll; max-height: 142px; white-space: nowrap; @@ -2147,8 +2147,8 @@ background: url('../images/file-gradient.svg') no-repeat center; height: 44px; width: 56px; - margin-left: 32px; - margin-right: 32px; + margin-inline-start: 32px; + margin-inline-end: 32px; margin-bottom: -4px; // So we can center the extension text inside this icon @@ -2166,8 +2166,8 @@ // Along with flow layout in parent item, centers text text-align: center; width: 25px; - margin-left: auto; - margin-right: auto; + margin-inline-start: auto; + margin-inline-end: auto; // We don't have much room for text here, cut it off without ellipse overflow-x: hidden; @@ -2268,8 +2268,8 @@ flex-direction: row; align-items: middle; - margin-left: auto; - margin-right: auto; + margin-inline-start: auto; + margin-inline-end: auto; } .module-caption-editor__input-container { @@ -2287,8 +2287,8 @@ border-radius: 18px; background-color: $color-black; padding: 9px; - padding-left: 12px; - padding-right: 65px; + padding-inline-start: 12px; + padding-inline-end: 65px; &::placeholder { color: $color-white-07; @@ -2309,8 +2309,8 @@ border-radius: 15px; padding: 5px; - padding-left: 12px; - padding-right: 12px; + padding-inline-start: 12px; + padding-inline-end: 12px; right: 4px; top: 4px; @@ -2370,10 +2370,10 @@ } .module-staged-link-preview__icon-container { - margin-right: 8px; + margin-inline-end: 8px; } .module-staged-link-preview__content { - margin-right: 20px; + margin-inline-end: 20px; } .module-staged-link-preview__title { color: $color-gray-90; @@ -2409,8 +2409,8 @@ // Module: Spinner .module-spinner__container { - margin-left: auto; - margin-right: auto; + margin-inline-start: auto; + margin-inline-end: auto; position: relative; height: 56px; width: 56px; @@ -2513,7 +2513,7 @@ height: 36px; line-height: 36px; - margin-left: 16px; + margin-inline-start: 16px; font-size: 14px; font-weight: 300; @@ -2530,7 +2530,7 @@ height: 36px; line-height: 36px; - margin-left: 16px; + margin-inline-start: 16px; font-size: 14px; font-weight: 300; @@ -2541,7 +2541,7 @@ height: 36px; line-height: 36px; - margin-left: 16px; + margin-inline-start: 16px; font-size: 14px; font-weight: 300; @@ -2552,8 +2552,8 @@ .module-message-search-result { padding: 8px; - padding-left: 16px; - padding-right: 16px; + padding-inline-start: 16px; + padding-inline-end: 16px; min-height: 64px; max-width: 300px; @@ -2573,7 +2573,7 @@ .module-message-search-result__text { flex-grow: 1; - margin-left: 12px; + margin-inline-start: 12px; // parent - 48px (for avatar) - 16px (our right margin) max-width: calc(100% - 64px); @@ -2603,7 +2603,7 @@ .module-message-search-result__header__timestamp { flex-shrink: 0; - margin-left: 6px; + margin-inline-start: 6px; font-size: 11px; line-height: 16px; @@ -2696,7 +2696,7 @@ } .module-left-pane__to-inbox-button { - margin-left: 2px; + margin-inline-start: 2px; width: 35px; height: 35px; @@ -2790,7 +2790,7 @@ .module-start-new-conversation__content { overflow: hidden; - margin-left: 12px; + margin-inline-start: 12px; flex: 1; } @@ -2837,10 +2837,10 @@ line-height: 18px; white-space: nowrap; - padding-left: 16px; + padding-inline-start: 16px; padding-top: 3px; padding-bottom: 2px; - padding-right: 16px; + padding-inline-end: 16px; } .react-contextmenu-item--checked:before { @@ -2857,6 +2857,7 @@ .react-contextmenu-item.react-contextmenu-submenu > .react-contextmenu-item { padding-right: 36px; + // We will probably need to make this padding-inline-end once the whole app is working on rtl } .react-contextmenu-item.react-contextmenu-submenu @@ -2917,12 +2918,12 @@ // Spec: container < 438px .module-message--incoming { - margin-left: 0; - margin-right: auto; + margin-inline-start: 0; + margin-inline-end: auto; } .module-message--outgoing { - margin-right: 0; - margin-left: auto; + margin-inline-end: 0; + margin-inline-start: auto; } // To hide in small breakpoints @@ -2956,12 +2957,12 @@ } .module-message--incoming { - margin-left: 0; - margin-right: auto; + margin-inline-start: 0; + margin-inline-end: auto; } .module-message--outgoing { - margin-right: 0; - margin-left: auto; + margin-inline-end: 0; + margin-inline-start: auto; } // To hide in small breakpoints diff --git a/stylesheets/_quote.scss b/stylesheets/_quote.scss index 92570e022..e94deb026 100644 --- a/stylesheets/_quote.scss +++ b/stylesheets/_quote.scss @@ -136,8 +136,8 @@ } .module-quote-container { - margin-left: -6px; - margin-right: -6px; + margin-inline-start: -6px; + margin-inline-end: -6px; margin-top: -4px; margin-bottom: 5px; } @@ -152,8 +152,8 @@ .module-quote__primary { flex-grow: 1; - padding-left: 8px; - padding-right: 8px; + padding-inline-start: 8px; + padding-inline-end: 8px; padding-top: 7px; padding-bottom: 7px; @@ -302,8 +302,8 @@ background-repeat: no-repeat; height: 28px; width: 36px; - margin-left: -4px; - margin-right: -6px; + margin-inline-start: -4px; + margin-inline-end: -6px; margin-bottom: 5px; } &-file__text { @@ -326,8 +326,8 @@ align-items: center; background-color: $color-white-085; - padding-left: 8px; - padding-right: 8px; + padding-inline-start: 8px; + padding-inline-end: 8px; } &-warning__icon { @@ -337,7 +337,7 @@ } &-warning__text { - margin-left: 6px; + margin-inline-start: 6px; color: $color-gray-90; font-size: 13px; line-height: 18px; diff --git a/stylesheets/_recorder.scss b/stylesheets/_recorder.scss index e490cd292..040fbb9f5 100644 --- a/stylesheets/_recorder.scss +++ b/stylesheets/_recorder.scss @@ -33,7 +33,7 @@ width: 36px; height: 36px; border-radius: 36px; - margin-left: 5px; + margin-inline-start: 5px; opacity: 0.5; text-align: center; padding: 0; @@ -94,7 +94,7 @@ width: 10px; height: 10px; background: #f00; - margin-right: 10px; + margin-inline-end: 10px; opacity: 0; animation: pulse 2s infinite; } diff --git a/stylesheets/_rtl.scss b/stylesheets/_rtl.scss new file mode 100644 index 000000000..9b7cf7187 --- /dev/null +++ b/stylesheets/_rtl.scss @@ -0,0 +1,23 @@ +body.rtl { + input, + textarea, + .module-left-pane, + .module-conversation-list-item, + .group-settings-item, + .contact-selection-list, + .group-member-list__selection, + .react-contextmenu-item, + .session-settings-list { + direction: rtl; + } + + // text inside rtl textarea must be manually right-sided + textarea { + text-align: right; + } + // no matter what, keep left-pane-settings on tlr + // because it breaks the UI (arrow and more), and we don't care for now + .left-pane-setting-content { + direction: ltr; + } +} diff --git a/stylesheets/_session-slider.scss b/stylesheets/_session-slider.scss index 95a38c086..bac8d767c 100644 --- a/stylesheets/_session-slider.scss +++ b/stylesheets/_session-slider.scss @@ -7,7 +7,7 @@ &-info { display: block; - margin-left: 20px; + margin-inline-start: 20px; text-align: center; p { diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 53d5a64e5..2a186d566 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -68,8 +68,8 @@ textarea { .button-group > div { display: inline-flex; - margin-left: 5px; - margin-right: 5px; + margin-inline-start: 5px; + margin-inline-end: 5px; } .session-button { @@ -324,7 +324,7 @@ textarea { position: absolute; font-size: 1.3em; top: -0.5em; - margin-left: -0.125em; + margin-inline-start: -0.125em; } } @@ -399,7 +399,7 @@ $session-element-border-green: 4px solid $session-color-green; .module-message__author-avatar { display: inline-flex; - margin-right: 20px; + margin-inline-end: 20px; padding-top: 5px; } @@ -425,7 +425,7 @@ label { } .search-icon { - margin-right: 10px; + margin-inline-end: 10px; } .session-icon-button { @@ -464,7 +464,7 @@ label { .session-button.default.danger { display: flex; // width: 80px; - margin-right: 0px; + margin-inline-end: 0px; } } .message-selection-overlay div[role='button'] { @@ -510,10 +510,10 @@ label { } .toast-icon { - padding-right: $session-icon-size-md; + padding-inline-end: $session-icon-size-md; } .toast-info { - margin-right: $session-icon-size-sm + $session-icon-size-sm; + margin-inline-end: $session-icon-size-sm + $session-icon-size-sm; width: 350px; &-container { @@ -616,8 +616,8 @@ label { .session-modal__header__icons > div { float: left; - padding-left: 0px; - padding-right: 10px; + padding-inline-start: 0px; + padding-inline-end: 10px; } } @@ -633,7 +633,7 @@ label { } &__icons > div { float: right; - padding-left: 10px; + padding-inline-start: 10px; } } @@ -708,7 +708,7 @@ label { display: flex; flex-direction: column; - .friend-selection-list { + .contact-selection-list { width: unset; } @@ -884,10 +884,10 @@ label { } .session-icon { - margin-left: 6px; + margin-inline-start: 6px; } .item-content { - margin-left: 6px; + margin-inline-start: 6px; } &.active, @@ -1046,7 +1046,7 @@ label { .session-button, .session-icon-button { - margin-right: $session-margin-lg; + margin-inline-end: $session-margin-lg; } } @@ -1067,7 +1067,7 @@ label { } &__info { - padding-right: $session-margin-lg; + padding-inline-end: $session-margin-lg; } &__title { @@ -1247,7 +1247,7 @@ label { .session-radio-group fieldset { border: none; - margin-left: $session-margin-sm; + margin-inline-start: $session-margin-sm; margin-top: $session-margin-sm; .session-radio { @@ -1265,7 +1265,7 @@ label { } label { - margin-right: 1em; + margin-inline-end: 1em; } label:before { @@ -1273,7 +1273,7 @@ label { display: inline-block; width: 0.5em; height: 0.5em; - margin-right: 0.8em; + margin-inline-end: 0.8em; border-radius: 100%; vertical-align: -3px; border: 2px solid rgba($session-color-white, 0.6); @@ -1351,7 +1351,7 @@ input { } } -.friend-selection-list { +.contact-selection-list { width: 20vw; } @@ -1502,10 +1502,10 @@ input { &__name { font-weight: bold; - margin-left: $session-margin-md; + margin-inline-start: $session-margin-md; } &__pubkey { - margin-left: 5px; + margin-inline-start: 5px; opacity: 0.8; } diff --git a/stylesheets/_session_group_panel.scss b/stylesheets/_session_group_panel.scss index fcf8d7abf..5cee99926 100644 --- a/stylesheets/_session_group_panel.scss +++ b/stylesheets/_session_group_panel.scss @@ -1,7 +1,7 @@ .conversation-content-right { transition: $session-transition-duration; width: 22vw; - margin-right: -22vw; + margin-inline-end: -22vw; } .group-settings { diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss index 1a42ef838..790b473f6 100644 --- a/stylesheets/_session_left_pane.scss +++ b/stylesheets/_session_left_pane.scss @@ -2,7 +2,7 @@ $session-compose-margin: 20px; .gutter { width: 380px !important; - padding-right: 5px !important; + padding-inline-end: 5px !important; transition: $session-transition-duration; @include themify($themes) { @@ -82,8 +82,8 @@ $session-compose-margin: 20px; } &__header__name { - flex-grow: 0 !important; - padding-right: 5px !important; + flex-grow: 0; + padding-inline-end: 5px; } &__header__name--with-unread .module-conversation__user__profile-number, @@ -137,11 +137,11 @@ $session-compose-margin: 20px; justify-content: space-between; align-items: center; height: $main-view-header-height; - padding-right: 7px; + padding-inline-end: 7px; transition: $session-transition-duration; .session-button { - margin-left: auto; + margin-inline-start: auto; @include fontAccentBold(); } @@ -158,9 +158,10 @@ $session-compose-margin: 20px; &__title { cursor: pointer; - padding-right: $session-margin-sm; - padding-left: $session-margin-sm; + padding-inline-end: $session-margin-sm; + padding-inline-start: $session-margin-sm; transition: $session-transition-duration; + flex-grow: 1; } &__list { @@ -227,7 +228,7 @@ $session-compose-margin: 20px; .exit { margin-top: 10px; - margin-left: 13px; + margin-inline-start: 13px; align-self: flex-start; } @@ -308,7 +309,7 @@ $session-compose-margin: 20px; .session-search-input { height: $session-search-input-height; width: 100%; - margin-right: 1px; + margin-inline-end: 1px; margin-bottom: 10px; display: inline-flex; flex-shrink: 0; diff --git a/stylesheets/_session_password.scss b/stylesheets/_session_password.scss index 1b1bec800..838ae8ac9 100644 --- a/stylesheets/_session_password.scss +++ b/stylesheets/_session_password.scss @@ -56,7 +56,7 @@ color: $session-color-white; } svg { - margin-right: $session-margin-lg; + margin-inline-end: $session-margin-lg; } } diff --git a/stylesheets/_session_signin.scss b/stylesheets/_session_signin.scss index e4d908a3f..b07c9ddaa 100644 --- a/stylesheets/_session_signin.scss +++ b/stylesheets/_session_signin.scss @@ -16,7 +16,7 @@ &-accent { flex-grow: 1; - padding-left: 20px; + padding-inline-start: 20px; &-text { @include themify($themes) { @@ -33,7 +33,7 @@ } &-registration { - padding-right: 128px; + padding-inline-end: 128px; } &-header { @@ -113,8 +113,8 @@ left: 0; right: 0; - margin-left: auto; - margin-right: auto; + margin-inline-start: auto; + margin-inline-end: auto; @include themify($themes) { background: themed('cellBackground'); } @@ -171,7 +171,7 @@ } &-input-floating-label-show-hide { - padding-right: 30px; + padding-inline-end: 30px; } &-input-with-label-container { @@ -283,7 +283,7 @@ line-height: 20px; ol { - margin-left: 20px; + margin-inline-start: 20px; padding: 0px; text-align: justify; } @@ -295,7 +295,7 @@ justify-content: center; padding: 20px; border-radius: 8px; - border: 2px solid #353535; + border: 1px solid subtle(#353535); margin-bottom: 20px; textarea { diff --git a/stylesheets/_session_theme.scss b/stylesheets/_session_theme.scss index e377b889a..680451a33 100644 --- a/stylesheets/_session_theme.scss +++ b/stylesheets/_session_theme.scss @@ -105,7 +105,7 @@ } &-read-receipt-container { - margin-left: 5px; + margin-inline-start: 5px; .session-icon.check { @include themify($themes) { fill: subtle(themed('sentMessageText')); diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss index 47246ef0c..d957fb58f 100644 --- a/stylesheets/manifest.scss +++ b/stylesheets/manifest.scss @@ -27,6 +27,7 @@ @import 'modules'; @import 'session'; @import 'quote'; +@import 'rtl'; // Separate screens @import 'session_signin'; diff --git a/test/blanket_mocha.js b/test/blanket_mocha.js index f6b2b0ed1..c10e5eb0c 100644 --- a/test/blanket_mocha.js +++ b/test/blanket_mocha.js @@ -5039,7 +5039,7 @@ var parseAndModify = inBrowser ? window.falafel : require('falafel'); blanket.defaultReporter = function(coverage) { var cssSytle = - "#blanket-main {margin:2px;background:#EEE;color:#333;clear:both;font-family:'Helvetica Neue Light', 'HelveticaNeue-Light', 'Helvetica Neue', Calibri, Helvetica, Arial, sans-serif; font-size:17px;} #blanket-main a {color:#333;text-decoration:none;} #blanket-main a:hover {text-decoration:underline;} .blanket {margin:0;padding:5px;clear:both;border-bottom: 1px solid #FFFFFF;} .bl-error {color:red;}.bl-success {color:#5E7D00;} .bl-file{width:auto;} .bl-cl{float:left;} .blanket div.rs {margin-left:50px; width:150px; float:right} .bl-nb {padding-right:10px;} #blanket-main a.bl-logo {color: #EB1764;cursor: pointer;font-weight: bold;text-decoration: none} .bl-source{ overflow-x:scroll; background-color: #FFFFFF; border: 1px solid #CBCBCB; color: #363636; margin: 25px 20px; width: 80%;} .bl-source div{white-space: pre;font-family: monospace;} .bl-source > div > span:first-child{background-color: #EAEAEA;color: #949494;display: inline-block;padding: 0 10px;text-align: center;width: 30px;} .bl-source .miss{background-color:#e6c3c7} .bl-source span.branchWarning{color:#000;background-color:yellow;} .bl-source span.branchOkay{color:#000;background-color:transparent;}", + "#blanket-main {margin:2px;background:#EEE;color:#333;clear:both;font-family:'Helvetica Neue Light', 'HelveticaNeue-Light', 'Helvetica Neue', Calibri, Helvetica, Arial, sans-serif; font-size:17px;} #blanket-main a {color:#333;text-decoration:none;} #blanket-main a:hover {text-decoration:underline;} .blanket {margin:0;padding:5px;clear:both;border-bottom: 1px solid #FFFFFF;} .bl-error {color:red;}.bl-success {color:#5E7D00;} .bl-file{width:auto;} .bl-cl{float:left;} .blanket div.rs {margin-inline-start:50px; width:150px; float:right} .bl-nb {padding-inline-end:10px;} #blanket-main a.bl-logo {color: #EB1764;cursor: pointer;font-weight: bold;text-decoration: none} .bl-source{ overflow-x:scroll; background-color: #FFFFFF; border: 1px solid #CBCBCB; color: #363636; margin: 25px 20px; width: 80%;} .bl-source div{white-space: pre;font-family: monospace;} .bl-source > div > span:first-child{background-color: #EAEAEA;color: #949494;display: inline-block;padding: 0 10px;text-align: center;width: 30px;} .bl-source .miss{background-color:#e6c3c7} .bl-source span.branchWarning{color:#000;background-color:yellow;} .bl-source span.branchOkay{color:#000;background-color:transparent;}", successRate = 60, head = document.head, fileNumber = 0, @@ -5990,20 +5990,20 @@ blanket.defaultReporter = function(coverage) { throw new Exception('mocha library does not exist in global namespace!'); } - /* - * Mocha Events: - * - * - `start` execution started - * - `end` execution complete - * - `suite` (suite) test suite execution started - * - `suite end` (suite) all tests (and sub-suites) have finished - * - `test` (test) test execution started - * - `test end` (test) test completed - * - `hook` (hook) hook execution started - * - `hook end` (hook) hook complete - * - `pass` (test) test passed - * - `fail` (test, err) test failed - * + /* + * Mocha Events: + * + * - `start` execution started + * - `end` execution complete + * - `suite` (suite) test suite execution started + * - `suite end` (suite) all tests (and sub-suites) have finished + * - `test` (test) test execution started + * - `test end` (test) test completed + * - `hook` (hook) hook execution started + * - `hook end` (hook) hook complete + * - `pass` (test) test passed + * - `fail` (test, err) test failed + * */ var OriginalReporter = mocha._reporter;