From 07eb19b98a8d38d5167f75fad809f0a9a5f53733 Mon Sep 17 00:00:00 2001 From: Calinteodor Date: Tue, 11 May 2021 11:01:45 +0300 Subject: [PATCH] feat(rn,ui) introduce react-native-paper --- babel.config.js | 9 + package-lock.json | 449 +++++++++++++----- package.json | 7 +- react/features/app/components/App.native.js | 11 +- react/features/base/ui/Tokens.js | 13 +- .../base/ui/components/BaseTheme.native.js | 13 + .../components/JitsiThemeProvider.native.js | 24 + react/features/base/ui/functions.native.js | 24 + .../ui/{functions.js => functions.web.js} | 14 +- react/features/base/ui/utils.js | 15 + .../components/native/FormSectionAccordion.js | 87 ++++ .../components/native/FormSectionHeader.js | 60 --- .../components/native/SettingsView.js | 240 +++++----- .../settings/components/native/styles.js | 57 ++- webpack.config.js | 3 + 15 files changed, 685 insertions(+), 341 deletions(-) create mode 100644 babel.config.js create mode 100644 react/features/base/ui/components/BaseTheme.native.js create mode 100644 react/features/base/ui/components/JitsiThemeProvider.native.js create mode 100644 react/features/base/ui/functions.native.js rename react/features/base/ui/{functions.js => functions.web.js} (54%) create mode 100644 react/features/base/ui/utils.js create mode 100644 react/features/settings/components/native/FormSectionAccordion.js delete mode 100644 react/features/settings/components/native/FormSectionHeader.js diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 000000000..543e93d1e --- /dev/null +++ b/babel.config.js @@ -0,0 +1,9 @@ +module.exports = { + presets: [ 'module:metro-react-native-babel-preset' ], + env: { + production: { + plugins: [ 'react-native-paper/babel' ] + } + }, + plugins: [ 'optional-require' ] +}; diff --git a/package-lock.json b/package-lock.json index 3a23ab4b4..ef7ac4781 100644 --- a/package-lock.json +++ b/package-lock.json @@ -450,20 +450,22 @@ } }, "@babel/core": { - "version": "7.5.5", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.5.5.tgz", - "integrity": "sha512-i4qoSr2KTtce0DmkuuQBV4AuQgGPUcPXMr9L5MyYAtk06z068lQ10a4O009fe5OB/DfNV+h+qqT7ddNV8UnRjg==", + "version": "7.9.0", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.9.0.tgz", + "integrity": "sha512-kWc7L0fw1xwvI0zi8OKVBuxRVefwGOrKSQMvrQ3dW+bIIavBY3/NpXmpjMy7bQnLgwgzWQZ8TlM57YHpHNHz4w==", "requires": { - "@babel/code-frame": "^7.5.5", - "@babel/generator": "^7.5.5", - "@babel/helpers": "^7.5.5", - "@babel/parser": "^7.5.5", - "@babel/template": "^7.4.4", - "@babel/traverse": "^7.5.5", - "@babel/types": "^7.5.5", - "convert-source-map": "^1.1.0", + "@babel/code-frame": "^7.8.3", + "@babel/generator": "^7.9.0", + "@babel/helper-module-transforms": "^7.9.0", + "@babel/helpers": "^7.9.0", + "@babel/parser": "^7.9.0", + "@babel/template": "^7.8.6", + "@babel/traverse": "^7.9.0", + "@babel/types": "^7.9.0", + "convert-source-map": "^1.7.0", "debug": "^4.1.0", - "json5": "^2.1.0", + "gensync": "^1.0.0-beta.1", + "json5": "^2.1.2", "lodash": "^4.17.13", "resolve": "^1.3.2", "semver": "^5.4.1", @@ -471,88 +473,188 @@ }, "dependencies": { "@babel/code-frame": { - "version": "7.5.5", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.5.5.tgz", - "integrity": "sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==", + "version": "7.12.13", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz", + "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==", "requires": { - "@babel/highlight": "^7.0.0" + "@babel/highlight": "^7.12.13" } }, "@babel/generator": { - "version": "7.5.5", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.5.5.tgz", - "integrity": "sha512-ETI/4vyTSxTzGnU2c49XHv2zhExkv9JHLTwDAFz85kmcwuShvYG2H08FwgIguQf4JC75CBnXAUM5PqeF4fj0nQ==", + "version": "7.14.1", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.1.tgz", + "integrity": "sha512-TMGhsXMXCP/O1WtQmZjpEYDhCYC9vFhayWZPJSZCGkPJgUqX0rF0wwtrYvnzVxIjcF80tkUertXVk5cwqi5cAQ==", "requires": { - "@babel/types": "^7.5.5", + "@babel/types": "^7.14.1", "jsesc": "^2.5.1", - "lodash": "^4.17.13", - "source-map": "^0.5.0", - "trim-right": "^1.0.1" + "source-map": "^0.5.0" + } + }, + "@babel/helper-function-name": { + "version": "7.12.13", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz", + "integrity": "sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==", + "requires": { + "@babel/helper-get-function-arity": "^7.12.13", + "@babel/template": "^7.12.13", + "@babel/types": "^7.12.13" + } + }, + "@babel/helper-get-function-arity": { + "version": "7.12.13", + "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz", + "integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==", + "requires": { + "@babel/types": "^7.12.13" + } + }, + "@babel/helper-member-expression-to-functions": { + "version": "7.13.12", + "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.13.12.tgz", + "integrity": "sha512-48ql1CLL59aKbU94Y88Xgb2VFy7a95ykGRbJJaaVv+LX5U8wFpLfiGXJJGUozsmA1oEh/o5Bp60Voq7ACyA/Sw==", + "requires": { + "@babel/types": "^7.13.12" + } + }, + "@babel/helper-module-imports": { + "version": "7.13.12", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.13.12.tgz", + "integrity": "sha512-4cVvR2/1B693IuOvSI20xqqa/+bl7lqAMR59R4iu39R9aOX8/JoYY1sFaNvUMyMBGnHdwvJgUrzNLoUZxXypxA==", + "requires": { + "@babel/types": "^7.13.12" + } + }, + "@babel/helper-module-transforms": { + "version": "7.14.0", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.0.tgz", + "integrity": "sha512-L40t9bxIuGOfpIGA3HNkJhU9qYrf4y5A5LUSw7rGMSn+pcG8dfJ0g6Zval6YJGd2nEjI7oP00fRdnhLKndx6bw==", + "requires": { + "@babel/helper-module-imports": "^7.13.12", + "@babel/helper-replace-supers": "^7.13.12", + "@babel/helper-simple-access": "^7.13.12", + "@babel/helper-split-export-declaration": "^7.12.13", + "@babel/helper-validator-identifier": "^7.14.0", + "@babel/template": "^7.12.13", + "@babel/traverse": "^7.14.0", + "@babel/types": "^7.14.0" + } + }, + "@babel/helper-optimise-call-expression": { + "version": "7.12.13", + "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.13.tgz", + "integrity": "sha512-BdWQhoVJkp6nVjB7nkFWcn43dkprYauqtk++Py2eaf/GRDFm5BxRqEIZCiHlZUGAVmtwKcsVL1dC68WmzeFmiA==", + "requires": { + "@babel/types": "^7.12.13" + } + }, + "@babel/helper-replace-supers": { + "version": "7.13.12", + "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.13.12.tgz", + "integrity": "sha512-Gz1eiX+4yDO8mT+heB94aLVNCL+rbuT2xy4YfyNqu8F+OI6vMvJK891qGBTqL9Uc8wxEvRW92Id6G7sDen3fFw==", + "requires": { + "@babel/helper-member-expression-to-functions": "^7.13.12", + "@babel/helper-optimise-call-expression": "^7.12.13", + "@babel/traverse": "^7.13.0", + "@babel/types": "^7.13.12" + } + }, + "@babel/helper-simple-access": { + "version": "7.13.12", + "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.13.12.tgz", + "integrity": "sha512-7FEjbrx5SL9cWvXioDbnlYTppcZGuCY6ow3/D5vMggb2Ywgu4dMrpTJX0JdQAIcRRUElOIxF3yEooa9gUb9ZbA==", + "requires": { + "@babel/types": "^7.13.12" } }, "@babel/helper-split-export-declaration": { - "version": "7.4.4", - "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz", - "integrity": "sha512-Ro/XkzLf3JFITkW6b+hNxzZ1n5OQ80NvIUdmHspih1XAhtN3vPTuUFT4eQnela+2MaZ5ulH+iyP513KJrxbN7Q==", + "version": "7.12.13", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz", + "integrity": "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==", "requires": { - "@babel/types": "^7.4.4" + "@babel/types": "^7.12.13" + } + }, + "@babel/helper-validator-identifier": { + "version": "7.14.0", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz", + "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==" + }, + "@babel/highlight": { + "version": "7.14.0", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.0.tgz", + "integrity": "sha512-YSCOwxvTYEIMSGaBQb5kDDsCopDdiUGsqpatp3fOlI4+2HQSkTmEVWnVuySdAC5EWCqSWWTv0ib63RjR7dTBdg==", + "requires": { + "@babel/helper-validator-identifier": "^7.14.0", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" } }, "@babel/parser": { - "version": "7.5.5", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.5.5.tgz", - "integrity": "sha512-E5BN68cqR7dhKan1SfqgPGhQ178bkVKpXTPEXnFJBrEt8/DKRZlybmy+IgYLTeN7tp1R5Ccmbm2rBk17sHYU3g==" + "version": "7.14.1", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.1.tgz", + "integrity": "sha512-muUGEKu8E/ftMTPlNp+mc6zL3E9zKWmF5sDHZ5MSsoTP9Wyz64AhEf9kD08xYJ7w6Hdcu8H550ircnPyWSIF0Q==" }, "@babel/template": { - "version": "7.4.4", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.4.4.tgz", - "integrity": "sha512-CiGzLN9KgAvgZsnivND7rkA+AeJ9JB0ciPOD4U59GKbQP2iQl+olF1l76kJOupqidozfZ32ghwBEJDhnk9MEcw==", + "version": "7.12.13", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz", + "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==", "requires": { - "@babel/code-frame": "^7.0.0", - "@babel/parser": "^7.4.4", - "@babel/types": "^7.4.4" + "@babel/code-frame": "^7.12.13", + "@babel/parser": "^7.12.13", + "@babel/types": "^7.12.13" } }, "@babel/traverse": { - "version": "7.5.5", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.5.5.tgz", - "integrity": "sha512-MqB0782whsfffYfSjH4TM+LMjrJnhCNEDMDIjeTpl+ASaUvxcjoiVCo/sM1GhS1pHOXYfWVCYneLjMckuUxDaQ==", + "version": "7.14.0", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.0.tgz", + "integrity": "sha512-dZ/a371EE5XNhTHomvtuLTUyx6UEoJmYX+DT5zBCQN3McHemsuIaKKYqsc/fs26BEkHs/lBZy0J571LP5z9kQA==", "requires": { - "@babel/code-frame": "^7.5.5", - "@babel/generator": "^7.5.5", - "@babel/helper-function-name": "^7.1.0", - "@babel/helper-split-export-declaration": "^7.4.4", - "@babel/parser": "^7.5.5", - "@babel/types": "^7.5.5", + "@babel/code-frame": "^7.12.13", + "@babel/generator": "^7.14.0", + "@babel/helper-function-name": "^7.12.13", + "@babel/helper-split-export-declaration": "^7.12.13", + "@babel/parser": "^7.14.0", + "@babel/types": "^7.14.0", "debug": "^4.1.0", - "globals": "^11.1.0", - "lodash": "^4.17.13" + "globals": "^11.1.0" } }, "@babel/types": { - "version": "7.5.5", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.5.5.tgz", - "integrity": "sha512-s63F9nJioLqOlW3UkyMd+BYhXt44YuaFm/VV0VwuteqjYwRrObkU7ra9pY4wAJR3oXi8hJrMcrcJdO/HH33vtw==", + "version": "7.14.1", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.1.tgz", + "integrity": "sha512-S13Qe85fzLs3gYRUnrpyeIrBJIMYv33qSTg1qoBwiG6nPKwUWAD9odSzWhEedpwOIzSEI6gbdQIWEMiCI42iBA==", "requires": { - "esutils": "^2.0.2", - "lodash": "^4.17.13", + "@babel/helper-validator-identifier": "^7.14.0", "to-fast-properties": "^2.0.0" } }, - "debug": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", - "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", + "convert-source-map": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz", + "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==", "requires": { - "ms": "^2.1.1" + "safe-buffer": "~5.1.1" } }, - "json5": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.0.tgz", - "integrity": "sha512-8Mh9h6xViijj36g7Dxi+Y4S6hNGV96vcJZr/SrlHh1LR/pEn/8j/+qIBbs44YKl69Lrfctp4QD+AdWLTMqEZAQ==", + "debug": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz", + "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==", "requires": { - "minimist": "^1.2.0" + "ms": "2.1.2" + } + }, + "js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + }, + "json5": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz", + "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==", + "requires": { + "minimist": "^1.2.5" } }, "ms": { @@ -901,94 +1003,126 @@ } }, "@babel/helpers": { - "version": "7.5.5", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.5.5.tgz", - "integrity": "sha512-nRq2BUhxZFnfEn/ciJuhklHvFOqjJUD5wpx+1bxUF2axL9C+v4DE/dmp5sT2dKnpOs4orZWzpAZqlCy8QqE/7g==", + "version": "7.14.0", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.0.tgz", + "integrity": "sha512-+ufuXprtQ1D1iZTO/K9+EBRn+qPWMJjZSw/S0KlFrxCw4tkrzv9grgpDHkY9MeQTjTY8i2sp7Jep8DfU6tN9Mg==", "requires": { - "@babel/template": "^7.4.4", - "@babel/traverse": "^7.5.5", - "@babel/types": "^7.5.5" + "@babel/template": "^7.12.13", + "@babel/traverse": "^7.14.0", + "@babel/types": "^7.14.0" }, "dependencies": { - "@babel/generator": { - "version": "7.5.5", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.5.5.tgz", - "integrity": "sha512-ETI/4vyTSxTzGnU2c49XHv2zhExkv9JHLTwDAFz85kmcwuShvYG2H08FwgIguQf4JC75CBnXAUM5PqeF4fj0nQ==", + "@babel/code-frame": { + "version": "7.12.13", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz", + "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==", "requires": { - "@babel/types": "^7.5.5", + "@babel/highlight": "^7.12.13" + } + }, + "@babel/generator": { + "version": "7.14.1", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.1.tgz", + "integrity": "sha512-TMGhsXMXCP/O1WtQmZjpEYDhCYC9vFhayWZPJSZCGkPJgUqX0rF0wwtrYvnzVxIjcF80tkUertXVk5cwqi5cAQ==", + "requires": { + "@babel/types": "^7.14.1", "jsesc": "^2.5.1", - "lodash": "^4.17.13", - "source-map": "^0.5.0", - "trim-right": "^1.0.1" + "source-map": "^0.5.0" + } + }, + "@babel/helper-function-name": { + "version": "7.12.13", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz", + "integrity": "sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==", + "requires": { + "@babel/helper-get-function-arity": "^7.12.13", + "@babel/template": "^7.12.13", + "@babel/types": "^7.12.13" + } + }, + "@babel/helper-get-function-arity": { + "version": "7.12.13", + "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz", + "integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==", + "requires": { + "@babel/types": "^7.12.13" } }, "@babel/helper-split-export-declaration": { - "version": "7.4.4", - "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz", - "integrity": "sha512-Ro/XkzLf3JFITkW6b+hNxzZ1n5OQ80NvIUdmHspih1XAhtN3vPTuUFT4eQnela+2MaZ5ulH+iyP513KJrxbN7Q==", + "version": "7.12.13", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz", + "integrity": "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==", "requires": { - "@babel/types": "^7.4.4" + "@babel/types": "^7.12.13" + } + }, + "@babel/helper-validator-identifier": { + "version": "7.14.0", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz", + "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==" + }, + "@babel/highlight": { + "version": "7.14.0", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.0.tgz", + "integrity": "sha512-YSCOwxvTYEIMSGaBQb5kDDsCopDdiUGsqpatp3fOlI4+2HQSkTmEVWnVuySdAC5EWCqSWWTv0ib63RjR7dTBdg==", + "requires": { + "@babel/helper-validator-identifier": "^7.14.0", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" } }, "@babel/parser": { - "version": "7.5.5", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.5.5.tgz", - "integrity": "sha512-E5BN68cqR7dhKan1SfqgPGhQ178bkVKpXTPEXnFJBrEt8/DKRZlybmy+IgYLTeN7tp1R5Ccmbm2rBk17sHYU3g==" + "version": "7.14.1", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.1.tgz", + "integrity": "sha512-muUGEKu8E/ftMTPlNp+mc6zL3E9zKWmF5sDHZ5MSsoTP9Wyz64AhEf9kD08xYJ7w6Hdcu8H550ircnPyWSIF0Q==" }, "@babel/template": { - "version": "7.4.4", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.4.4.tgz", - "integrity": "sha512-CiGzLN9KgAvgZsnivND7rkA+AeJ9JB0ciPOD4U59GKbQP2iQl+olF1l76kJOupqidozfZ32ghwBEJDhnk9MEcw==", + "version": "7.12.13", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz", + "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==", "requires": { - "@babel/code-frame": "^7.0.0", - "@babel/parser": "^7.4.4", - "@babel/types": "^7.4.4" + "@babel/code-frame": "^7.12.13", + "@babel/parser": "^7.12.13", + "@babel/types": "^7.12.13" } }, "@babel/traverse": { - "version": "7.5.5", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.5.5.tgz", - "integrity": "sha512-MqB0782whsfffYfSjH4TM+LMjrJnhCNEDMDIjeTpl+ASaUvxcjoiVCo/sM1GhS1pHOXYfWVCYneLjMckuUxDaQ==", + "version": "7.14.0", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.0.tgz", + "integrity": "sha512-dZ/a371EE5XNhTHomvtuLTUyx6UEoJmYX+DT5zBCQN3McHemsuIaKKYqsc/fs26BEkHs/lBZy0J571LP5z9kQA==", "requires": { - "@babel/code-frame": "^7.5.5", - "@babel/generator": "^7.5.5", - "@babel/helper-function-name": "^7.1.0", - "@babel/helper-split-export-declaration": "^7.4.4", - "@babel/parser": "^7.5.5", - "@babel/types": "^7.5.5", + "@babel/code-frame": "^7.12.13", + "@babel/generator": "^7.14.0", + "@babel/helper-function-name": "^7.12.13", + "@babel/helper-split-export-declaration": "^7.12.13", + "@babel/parser": "^7.14.0", + "@babel/types": "^7.14.0", "debug": "^4.1.0", - "globals": "^11.1.0", - "lodash": "^4.17.13" - }, - "dependencies": { - "@babel/code-frame": { - "version": "7.5.5", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.5.5.tgz", - "integrity": "sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==", - "requires": { - "@babel/highlight": "^7.0.0" - } - } + "globals": "^11.1.0" } }, "@babel/types": { - "version": "7.5.5", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.5.5.tgz", - "integrity": "sha512-s63F9nJioLqOlW3UkyMd+BYhXt44YuaFm/VV0VwuteqjYwRrObkU7ra9pY4wAJR3oXi8hJrMcrcJdO/HH33vtw==", + "version": "7.14.1", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.1.tgz", + "integrity": "sha512-S13Qe85fzLs3gYRUnrpyeIrBJIMYv33qSTg1qoBwiG6nPKwUWAD9odSzWhEedpwOIzSEI6gbdQIWEMiCI42iBA==", "requires": { - "esutils": "^2.0.2", - "lodash": "^4.17.13", + "@babel/helper-validator-identifier": "^7.14.0", "to-fast-properties": "^2.0.0" } }, "debug": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", - "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz", + "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==", "requires": { - "ms": "^2.1.1" + "ms": "2.1.2" } }, + "js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + }, "ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -1851,18 +1985,11 @@ } }, "@babel/runtime": { - "version": "7.5.5", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.5.tgz", - "integrity": "sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==", + "version": "7.9.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.0.tgz", + "integrity": "sha512-cTIudHnzuWLS56ik4DnRnqqNf8MkdUzV4iFFI1h7Jo9xvrpQROYaAnaSd2mHLQAzzZAPfATynX5ord6YlNYNMA==", "requires": { - "regenerator-runtime": "^0.13.2" - }, - "dependencies": { - "regenerator-runtime": { - "version": "0.13.3", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz", - "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==" - } + "regenerator-runtime": "^0.13.4" } }, "@babel/template": { @@ -1938,6 +2065,15 @@ } } }, + "@callstack/react-theme-provider": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/@callstack/react-theme-provider/-/react-theme-provider-3.0.6.tgz", + "integrity": "sha512-wwKMXfmklfogpalNZT0W+jh76BIquiYUiQHOaPmt/PCyCEP/E6rP+e7Uie6mBZrfkea9WJYJ+mus6r+45JAEhg==", + "requires": { + "deepmerge": "^3.2.0", + "hoist-non-react-statics": "^3.3.0" + } + }, "@cnakazawa/watch": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz", @@ -5277,6 +5413,39 @@ } } }, + "babel-plugin-optional-require": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/babel-plugin-optional-require/-/babel-plugin-optional-require-0.3.1.tgz", + "integrity": "sha512-qL9pdz6fgMjO3NZ1igO8BEJrWooLgkuhJ2yc4ligr3lMvEq7tzFZuz3JWSa6P05khrvTz1USf0POkxAjlFnkLw==", + "dev": true, + "requires": { + "is-builtin-module": "^2.0.0", + "resolve-from": "^4.0.0" + }, + "dependencies": { + "builtin-modules": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-2.0.0.tgz", + "integrity": "sha512-3U5kUA5VPsRUA3nofm/BXX7GVHKfxz0hOBAPxXrIvHzlDRkQVqEn6yi8QJegxl4LzOHLdvb7XF5dVawa/VVYBg==", + "dev": true + }, + "is-builtin-module": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-2.0.0.tgz", + "integrity": "sha512-G2jLHphOywpgrL/AaJKWDXpdpGR9X4V1PCkB+EwG5Z28z8EukgdWnAUFAS2wdBtIpwHhHBIiq0NBOWEbSXN0Rg==", + "dev": true, + "requires": { + "builtin-modules": "^2.0.0" + } + }, + "resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "dev": true + } + } + }, "babel-plugin-syntax-jsx": { "version": "6.18.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", @@ -12803,6 +12972,11 @@ "is-wsl": "^1.1.0" } }, + "optional-require": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/optional-require/-/optional-require-1.0.3.tgz", + "integrity": "sha512-RV2Zp2MY2aeYK5G+B/Sps8lW5NHAzE5QClbFP15j+PWmP+T9PxlJXBOOLoSAdgwFvS4t0aMR4vpedMkbHfh0nA==" + }, "optionator": { "version": "0.8.2", "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz", @@ -14789,11 +14963,26 @@ "resolved": "https://registry.npmjs.org/react-native-immersive/-/react-native-immersive-2.0.0.tgz", "integrity": "sha512-9TL05nTHN/x9sN1wbUlBoGyzH4NCuZ/7WEEUp5CvOoKuUABvdYosov0O0SAMbm/5J913RRoy98VB6tGNi9lRSw==" }, + "react-native-iphone-x-helper": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz", + "integrity": "sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==" + }, "react-native-keep-awake": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/react-native-keep-awake/-/react-native-keep-awake-4.0.0.tgz", "integrity": "sha512-0Fotox+eLXQooeibVs3P60yASYUWjtRw9MZNmbuHt5UZQrgUrAKsE4jm7gTr4tPU1m1RkwGzcgUFpcOkh/ec7g==" }, + "react-native-paper": { + "version": "4.8.1", + "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-4.8.1.tgz", + "integrity": "sha512-WgmqrDdcrr0ZbuiLCwMpmOMhl1n8uIvNulxsl2oCGtD8oeMkPJKHf4G/ONR+iNrSXcFbJek+uDRSmcGA5kDfUA==", + "requires": { + "@callstack/react-theme-provider": "^3.0.5", + "color": "^3.1.2", + "react-native-iphone-x-helper": "^1.3.1" + } + }, "react-native-sound": { "version": "github:jitsi/react-native-sound#3fe5480fce935e888d5089d94a191c7c7e3aa190", "from": "github:jitsi/react-native-sound#3fe5480fce935e888d5089d94a191c7c7e3aa190" diff --git a/package.json b/package.json index 7346d480d..682b768f9 100644 --- a/package.json +++ b/package.json @@ -60,6 +60,7 @@ "moment": "2.29.1", "moment-duration-format": "2.2.2", "olm": "https://packages.matrix.org/npm/olm/olm-3.2.1.tgz", + "optional-require": "1.0.3", "pixelmatch": "5.1.0", "promise.allsettled": "1.0.4", "punycode": "2.1.1", @@ -77,6 +78,7 @@ "react-native-device-info": "8.0.0", "react-native-immersive": "2.0.0", "react-native-keep-awake": "4.0.0", + "react-native-paper": "4.8.1", "react-native-sound": "github:jitsi/react-native-sound#3fe5480fce935e888d5089d94a191c7c7e3aa190", "react-native-splash-screen": "3.2.0", "react-native-svg": "12.1.0", @@ -102,7 +104,7 @@ "zxcvbn": "4.4.2" }, "devDependencies": { - "@babel/core": "7.5.5", + "@babel/core": "7.9.0", "@babel/plugin-proposal-class-properties": "7.1.0", "@babel/plugin-proposal-export-default-from": "7.0.0", "@babel/plugin-proposal-export-namespace-from": "7.0.0", @@ -112,9 +114,10 @@ "@babel/preset-env": "7.1.0", "@babel/preset-flow": "7.0.0", "@babel/preset-react": "7.0.0", - "@babel/runtime": "7.5.5", + "@babel/runtime": "7.9.0", "babel-eslint": "10.0.1", "babel-loader": "8.0.4", + "babel-plugin-optional-require": "0.3.1", "circular-dependency-plugin": "5.2.0", "clean-css-cli": "4.3.0", "css-loader": "3.6.0", diff --git a/react/features/app/components/App.native.js b/react/features/app/components/App.native.js index 0c4f689c7..70e6a1aa7 100644 --- a/react/features/app/components/App.native.js +++ b/react/features/app/components/App.native.js @@ -11,6 +11,7 @@ import { getFeatureFlag } from '../../base/flags/functions'; import { Platform } from '../../base/react'; import { DimensionsDetector, clientResized } from '../../base/responsive-ui'; import { updateSettings } from '../../base/settings'; +import JitsiThemePaperProvider from '../../base/ui/components/JitsiThemeProvider.native'; import logger from '../logger'; import { AbstractApp } from './AbstractApp'; @@ -127,10 +128,12 @@ export class App extends AbstractApp { */ _createMainElement(component, props) { return ( - - { super._createMainElement(component, props) } - + + + { super._createMainElement(component, props) } + + ); } diff --git a/react/features/base/ui/Tokens.js b/react/features/base/ui/Tokens.js index 04ee329ca..e5a0544f8 100644 --- a/react/features/base/ui/Tokens.js +++ b/react/features/base/ui/Tokens.js @@ -1,6 +1,6 @@ // @flow -// Default color pallete +// Default color palette export const colors = { error03: '#7A141F', error04: '#A21B29', @@ -157,6 +157,15 @@ export const colorMap = { // Disabled background for high-contrast input fields field02Disabled: 'surface06', + // Background for section header + section01: 'surface10', + + // Active color for section header + section01Active: 'primary04', + + // Inactive color for section header + section01Inactive: 'surface01', + // Borders // Border for the input fields in hover state border01: 'surface08', @@ -184,7 +193,7 @@ export const colorMap = { // Color for positive messages applied to icons & borders success01: 'success05', - // Color for positive messages applied tobackgrounds + // Color for positive messages applied to backgrounds success02: 'success05', // Color for warning messages applied to icons, borders & backgrounds diff --git a/react/features/base/ui/components/BaseTheme.native.js b/react/features/base/ui/components/BaseTheme.native.js new file mode 100644 index 000000000..cd55a3675 --- /dev/null +++ b/react/features/base/ui/components/BaseTheme.native.js @@ -0,0 +1,13 @@ +// @flow + +import { font, colors, colorMap, spacing, shape, typography } from '../Tokens'; +import { createNativeTheme } from '../functions.native'; + +export default createNativeTheme({ + font, + colors, + colorMap, + spacing, + shape, + typography +}); diff --git a/react/features/base/ui/components/JitsiThemeProvider.native.js b/react/features/base/ui/components/JitsiThemeProvider.native.js new file mode 100644 index 000000000..e22550d22 --- /dev/null +++ b/react/features/base/ui/components/JitsiThemeProvider.native.js @@ -0,0 +1,24 @@ +// @flow + +import * as React from 'react'; +import { Provider as PaperProvider } from 'react-native-paper'; + +import BaseTheme from './BaseTheme.native'; + +type Props = { + + /** + * The children of the component. + */ + children: React.ChildrenArray +} + +/** + * The theme provider for the mobile app. + * + * @param {Object} props - The props of the component. + * @returns {React.ReactNode} + */ +export default function JitsiThemePaperProvider(props: Props) { + return { props.children }; +} diff --git a/react/features/base/ui/functions.native.js b/react/features/base/ui/functions.native.js new file mode 100644 index 000000000..794f6af33 --- /dev/null +++ b/react/features/base/ui/functions.native.js @@ -0,0 +1,24 @@ +// @flow + +import { DefaultTheme } from 'react-native-paper'; + +import { createColorTokens } from './utils'; + +/** + * Creates a React Native Paper theme based on local UI tokens. + * + * @param {Object} arg - The ui tokens. + * @returns {Object} + */ +export function createNativeTheme({ font, colors, colorMap, shape, spacing, typography }: Object) { + return { + ...DefaultTheme, + palette: createColorTokens(colorMap, colors), + shape, + spacing, + typography: { + font, + ...typography + } + }; +} diff --git a/react/features/base/ui/functions.js b/react/features/base/ui/functions.web.js similarity index 54% rename from react/features/base/ui/functions.js rename to react/features/base/ui/functions.web.js index 952f4bb38..713ad0faf 100644 --- a/react/features/base/ui/functions.js +++ b/react/features/base/ui/functions.web.js @@ -2,19 +2,7 @@ import { createMuiTheme } from '@material-ui/core/styles'; -/** - * Creates the color tokens based on the color theme and the association map. - * If a key is not fonund in the association map it defaults to the current value. - * - * @param {Object} colorMap - A map between the token name and the actual color value. - * @param {Object} colors - An object containing all the theme colors. - * @returns {Object} - */ -function createColorTokens(colorMap: Object, colors: Object): Object { - return Object.entries(colorMap) - .reduce((result, [ token, value ]) => - Object.assign(result, { [token]: colors[value] || value }), {}); -} +import { createColorTokens } from './utils'; /** * Creates a MUI theme based on local UI tokens. diff --git a/react/features/base/ui/utils.js b/react/features/base/ui/utils.js new file mode 100644 index 000000000..717a0d317 --- /dev/null +++ b/react/features/base/ui/utils.js @@ -0,0 +1,15 @@ +// @flow + +/** + * Creates the color tokens based on the color theme and the association map. + * If a key is not found in the association map it defaults to the current value. + * + * @param {Object} colorMap - A map between the token name and the actual color value. + * @param {Object} colors - An object containing all the theme colors. + * @returns {Object} + */ +export function createColorTokens(colorMap: Object, colors: Object): Object { + return Object.entries(colorMap) + .reduce((result, [ token, value ]) => + Object.assign(result, { [token]: colors[value] || value }), {}); +} diff --git a/react/features/settings/components/native/FormSectionAccordion.js b/react/features/settings/components/native/FormSectionAccordion.js new file mode 100644 index 000000000..0fc2d7e4a --- /dev/null +++ b/react/features/settings/components/native/FormSectionAccordion.js @@ -0,0 +1,87 @@ +// @flow + +import React, { useState } from 'react'; +import { List } from 'react-native-paper'; + +import { translate } from '../../../base/i18n'; +import { Icon, IconArrowDown, IconArrowUp } from '../../../base/icons'; + +import styles from './styles'; + +/** + * The type of the React {@code Component} props of {@link FormSectionAccordion} + */ +type Props = { + + /** + * Is the section an accordion or not. + */ + accordion: boolean, + + /** + * The children to be displayed within this Link. + */ + children: React$Node, + + /** + * Whether the accordion is expandable. + */ + expandable: boolean, + + /** + * The i18n key of the text label of the section. + */ + label: string, + + /** + * An external style object passed to the component. + */ + style: Object, + + /** + * Invoked to obtain translated strings. + */ + t: Function +} + +/** + * Section accordion on settings form. + * + * @returns {React$Element} + */ +function FormSectionAccordion({ accordion, children, expandable, label, style, t }: Props) { + const [ expandSection, setExpandSection ] = useState(false); + + /** + * Press handler for expanding form section. + * + * @returns {void} + */ + function onPress() { + setExpandSection(!expandSection); + } + + return ( + + accordion && } + style = { [ + styles.formSectionTitle, + style + ] } + title = { t(label) } + titleStyle = { + expandSection || !expandable + ? styles.formSectionTitleActive : styles.formSectionTitleInActive }> + { children } + + ); +} + +export default translate(FormSectionAccordion); diff --git a/react/features/settings/components/native/FormSectionHeader.js b/react/features/settings/components/native/FormSectionHeader.js deleted file mode 100644 index 7497ef871..000000000 --- a/react/features/settings/components/native/FormSectionHeader.js +++ /dev/null @@ -1,60 +0,0 @@ -// @flow - -import React, { Component } from 'react'; -import { Text, View } from 'react-native'; - -import { translate } from '../../../base/i18n'; - -import styles from './styles'; - -/** - * The type of the React {@code Component} props of {@link FormSectionHeader} - */ -type Props = { - - /** - * The i18n key of the text label of the section. - */ - label: string, - - /** - * An external style object passed to the component. - */ - style: Object, - - /** - * Invoked to obtain translated strings. - */ - t: Function -} - -/** - * Implements a React {@code Component} which renders a section header on a - * form. - */ -class FormSectionHeader extends Component { - /** - * Implements React's {@link Component#render()}. - * - * @inheritdoc - * @override - * @returns {ReactElement} - */ - render() { - const { label, style, t } = this.props; - - return ( - - - { t(label) } - - - ); - } -} - -export default translate(FormSectionHeader); diff --git a/react/features/settings/components/native/SettingsView.js b/react/features/settings/components/native/SettingsView.js index 2a7a6d50a..89901a373 100644 --- a/react/features/settings/components/native/SettingsView.js +++ b/react/features/settings/components/native/SettingsView.js @@ -1,7 +1,8 @@ // @flow import React from 'react'; -import { Alert, NativeModules, ScrollView, Switch, Text, TextInput } from 'react-native'; +import { Alert, NativeModules, ScrollView, Text } from 'react-native'; +import { Divider, Switch, TextInput, withTheme } from 'react-native-paper'; import { translate } from '../../../base/i18n'; import { JitsiModal } from '../../../base/modal'; @@ -15,7 +16,8 @@ import { } from '../AbstractSettingsView'; import FormRow from './FormRow'; -import FormSectionHeader from './FormSectionHeader'; +import FormSectionAccordion from './FormSectionAccordion'; +import styles, { THUMB_COLOR } from './styles'; /** * Application information module. @@ -54,11 +56,6 @@ type State = { */ serverURL: string, - /** - * Whether to show advanced settings or not. - */ - showAdvanced: boolean, - /** * State variable for the start with audio muted switch. */ @@ -67,7 +64,7 @@ type State = { /** * State variable for the start with video muted switch. */ - startWithVideoMuted: boolean, + startWithVideoMuted: boolean } /** @@ -81,7 +78,12 @@ type Props = AbstractProps & { * * @protected */ - _serverURLChangeEnabled: boolean + _serverURLChangeEnabled: boolean, + + /** + * Theme used for styles. + */ + theme: Object } /** @@ -117,7 +119,6 @@ class SettingsView extends AbstractSettingsView { displayName, email, serverURL, - showAdvanced: false, startWithAudioMuted, startWithVideoMuted }; @@ -128,7 +129,6 @@ class SettingsView extends AbstractSettingsView { this._onDisableCallIntegration = this._onDisableCallIntegration.bind(this); this._onDisableCrashReporting = this._onDisableCrashReporting.bind(this); this._onDisableP2P = this._onDisableP2P.bind(this); - this._onShowAdvanced = this._onShowAdvanced.bind(this); this._setURLFieldReference = this._setURLFieldReference.bind(this); this._showURLAlert = this._showURLAlert.bind(this); } @@ -140,7 +140,17 @@ class SettingsView extends AbstractSettingsView { * @returns {ReactElement} */ render() { - const { displayName, email, serverURL, startWithAudioMuted, startWithVideoMuted } = this.state; + const { + disableCallIntegration, + disableCrashReporting, + disableP2P, + displayName, + email, + serverURL, + startWithAudioMuted, + startWithVideoMuted + } = this.state; + const { palette } = this.props.theme; return ( { modalId = { SETTINGS_VIEW_ID } onClose = { this._onClose }> - - + - - + - - - + + - - - - - - - - - - - {`${AppInfo.version} build ${AppInfo.buildNumber}`} - - - - {this._renderAdvancedSettings()} + + + + + + + + + + + + + {`${AppInfo.version} build ${AppInfo.buildNumber}`} + + + + + + + + + + + + + {AppInfo.GOOGLE_SERVICES_ENABLED && ( + + + + )} + ); @@ -337,22 +406,9 @@ class SettingsView extends AbstractSettingsView { * @returns {boolean} - True if the modal can be closed. */ _onClose() { - this.setState({ showAdvanced: false }); - return this._processServerURL(true /* hideOnSuccess */); } - _onShowAdvanced: () => void; - - /** - * Handles the advanced settings button. - * - * @returns {void} - */ - _onShowAdvanced() { - this.setState({ showAdvanced: !this.state.showAdvanced }); - } - /** * Callback to update the start with audio muted value. * @@ -403,56 +459,6 @@ class SettingsView extends AbstractSettingsView { return hideOnSuccess; } - /** - * Renders the advanced settings options. - * - * @private - * @returns {React$Element} - */ - _renderAdvancedSettings() { - const { disableCallIntegration, disableP2P, disableCrashReporting, showAdvanced } = this.state; - - if (!showAdvanced) { - return ( - - - - ); - } - - return ( - <> - - - - - - - {AppInfo.GOOGLE_SERVICES_ENABLED && ( - - - - )} - - ); - } - _setURLFieldReference: (React$ElementRef<*> | null) => void; /** @@ -538,4 +544,4 @@ function _mapStateToProps(state) { }; } -export default translate(connect(_mapStateToProps)(SettingsView)); +export default translate(connect(_mapStateToProps)(withTheme(SettingsView))); diff --git a/react/features/settings/components/native/styles.js b/react/features/settings/components/native/styles.js index 9706306e9..3086aa0ef 100644 --- a/react/features/settings/components/native/styles.js +++ b/react/features/settings/components/native/styles.js @@ -1,9 +1,9 @@ -import { ColorPalette } from '../../../base/styles'; - +import BaseTheme from '../../../base/ui/components/BaseTheme.native'; export const ANDROID_UNDERLINE_COLOR = 'transparent'; -export const PLACEHOLDER_COLOR = ColorPalette.lightGrey; +export const PLACEHOLDER_COLOR = BaseTheme.palette.action02Focus; +export const THUMB_COLOR = BaseTheme.palette.field02; -const TEXT_SIZE = 17; +const TEXT_SIZE = 14; /** * The styles of the native components of the feature {@code settings}. @@ -15,7 +15,7 @@ export default { fieldContainer: { alignItems: 'center', flexDirection: 'row', - minHeight: 65, + minHeight: 56, paddingHorizontal: 8 }, @@ -24,8 +24,7 @@ export default { */ fieldContainerColumn: { alignItems: 'flex-start', - flexDirection: 'column', - paddingVertical: 3 + flexDirection: 'column' }, /** @@ -34,7 +33,7 @@ export default { fieldLabelContainer: { alignItems: 'center', flexDirection: 'row', - marginRight: 5 + paddingLeft: 8 }, /** @@ -67,29 +66,61 @@ export default { alignItems: 'center', flex: 1, flexDirection: 'row', - justifyContent: 'flex-end' + justifyContent: 'flex-end', + paddingRight: 8 }, /** * Style for the form section separator titles. */ formSectionTitle: { - backgroundColor: 'rgba(0, 0, 0, 0.1)', - padding: 5 + backgroundColor: BaseTheme.palette.section01, + paddingBottom: 0, + paddingTop: 0 + }, + + formSectionTitleActive: { + color: BaseTheme.palette.section01Active + }, + + formSectionTitleInActive: { + color: BaseTheme.palette.section01Inactive + }, + + sectionClose: { + color: BaseTheme.palette.section01Inactive, + fontSize: 14 + }, + + sectionOpen: { + color: BaseTheme.palette.section01Active, + fontSize: 14 }, /** * Global {@code Text} color for the components. */ text: { - color: ColorPalette.black + color: BaseTheme.palette.field01 + }, + + /** + * Text input container style. + */ + textInputContainer: { + flex: 1, + height: 40, + paddingBottom: 8, + paddingTop: 2, + paddingLeft: 16, + paddingRight: 16 }, /** * Standard text input field style. */ textInputField: { - color: ColorPalette.black, + color: BaseTheme.palette.field01, flex: 1, fontSize: TEXT_SIZE, textAlign: 'right' diff --git a/webpack.config.js b/webpack.config.js index 2bfbf020f..46a421c77 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -77,6 +77,9 @@ const config = { ], loader: 'babel-loader', options: { + // Avoid loading babel.config.js, since we only use it for React Native. + configFile: false, + // XXX The require.resolve bellow solves failures to locate the // presets when lib-jitsi-meet, for example, is npm linked in // jitsi-meet.