From 32f7f91e32896992d1cc7b65c332444d68e952ce Mon Sep 17 00:00:00 2001 From: Volodymyr Kozieiev Date: Fri, 3 May 2019 15:52:19 +0300 Subject: [PATCH] Mobile UI on desktop can be enabled in .env file Signed-off-by: Volodymyr Kozieiev --- .env | 1 + clj-rn.conf.edn | 1 + desktop_files/package.json.orig | 5 +- desktop_files/yarn.lock | 156 +++++++++++++++++- .../react_native/js_dependencies.cljs | 2 +- src/status_im/desktop/core.cljs | 43 +++-- .../ui/components/bottom_bar/core.cljs | 42 ++--- .../ui/components/chat_icon/screen.cljs | 7 +- .../ui/components/list_selection.cljs | 15 +- .../ui/components/popup_menu/views.cljs | 7 +- .../ui/components/status_bar/view.cljs | 3 +- .../ui/screens/add_new/new_chat/views.cljs | 18 +- src/status_im/ui/screens/add_new/views.cljs | 36 ++-- .../edit_bootnode/views.cljs | 16 +- src/status_im/ui/screens/chat/actions.cljs | 8 +- .../ui/screens/chat/input/input.cljs | 70 +++++++- .../ui/screens/chat/input/send_button.cljs | 3 +- .../ui/screens/chat/message/message.cljs | 27 +-- .../ui/screens/chat/stickers/views.cljs | 5 +- .../ui/screens/chat/styles/input/input.cljs | 9 +- .../screens/chat/styles/message/message.cljs | 6 +- .../screens/chat/styles/message/options.cljs | 1 + src/status_im/ui/screens/chat/utils.cljs | 8 +- src/status_im/ui/screens/chat/views.cljs | 9 +- src/status_im/ui/screens/group/views.cljs | 3 +- src/status_im/ui/screens/home/styles.cljs | 17 +- .../ui/screens/profile/contact/views.cljs | 14 +- .../ui/screens/profile/user/views.cljs | 12 +- src/status_im/ui/screens/routing/core.cljs | 2 +- src/status_im/ui/screens/views.cljs | 3 +- src/status_im/utils/config.cljs | 1 + src/status_im/utils/navigation.cljs | 12 +- 32 files changed, 413 insertions(+), 149 deletions(-) diff --git a/.env b/.env index b1b911175f..cc98c56ee8 100644 --- a/.env +++ b/.env @@ -20,3 +20,4 @@ RPC_NETWORKS_ONLY=0 STICKERS_ENABLED=1 PARTITIONED_TOPIC=0 CONTRACT_NODES=1 +MOBILE_UI_FOR_DESKTOP=0 diff --git a/clj-rn.conf.edn b/clj-rn.conf.edn index c1d013442a..466dc5dad7 100644 --- a/clj-rn.conf.edn +++ b/clj-rn.conf.edn @@ -83,6 +83,7 @@ "text-encoding" "js-sha3" "web3-utils" + "react-navigation" "hi-base32"] ;; Resoures diff --git a/desktop_files/package.json.orig b/desktop_files/package.json.orig index 2101d81924..68da9b4c68 100644 --- a/desktop_files/package.json.orig +++ b/desktop_files/package.json.orig @@ -68,7 +68,7 @@ "querystring-es3": "0.2.1", "react": "16.6.1", "react-dom": "16.4.2", - "react-native": "git+https://github.com/status-im/react-native-desktop.git#v0.57.8_1", + "react-native": "git+https://github.com/status-im/react-native-desktop.git#v0.57.8_8", "react-native-background-timer": "2.0.0", "react-native-camera": "0.10.0", "react-native-config": "git+https://github.com/status-im/react-native-config.git#v0.11.2-status", @@ -91,7 +91,8 @@ "react-native-tcp": "3.3.0", "react-native-udp": "2.2.1", "react-native-webview-bridge": "git+https://github.com/status-im/react-native-webview-bridge.git#0.33.16-status-rn049-desktop", - "realm": "git+https://github.com/status-im/realm-js.git#heads/v2.20.1", + "react-navigation": "^2.12.1", + "realm": "git+https://github.com/status-im/realm-js.git#v2.20.1", "rn-snoopy": "git+https://github.com/status-im/rn-snoopy.git#v2.0.2-status", "status-conan": "git+https://github.com/status-im/status-conan.git#v1.0.0", "string_decoder": "0.10.31", diff --git a/desktop_files/yarn.lock b/desktop_files/yarn.lock index dc06021f5f..04a3b044e9 100644 --- a/desktop_files/yarn.lock +++ b/desktop_files/yarn.lock @@ -2273,6 +2273,11 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3: inherits "^2.0.1" safe-buffer "^5.0.1" +clamp@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/clamp/-/clamp-1.0.1.tgz#66a0e64011816e37196828fdc8c8c147312c8634" + integrity sha1-ZqDmQBGBbjcZaCj9yMjBRzEshjQ= + class-extend@^0.1.0, class-extend@^0.1.1: version "0.1.2" resolved "https://registry.yarnpkg.com/class-extend/-/class-extend-0.1.2.tgz#8057a82b00f53f82a5d62c50ef8cffdec6fabc34" @@ -2655,6 +2660,14 @@ create-react-class@^15.6.0, create-react-class@^15.6.3: loose-envify "^1.3.1" object-assign "^4.1.1" +create-react-context@0.2.2: + version "0.2.2" + resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.2.tgz#9836542f9aaa22868cd7d4a6f82667df38019dca" + integrity sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A== + dependencies: + fbjs "^0.8.0" + gud "^1.0.0" + cross-spawn-async@^2.1.1, cross-spawn-async@^2.2.2: version "2.2.5" resolved "https://registry.yarnpkg.com/cross-spawn-async/-/cross-spawn-async-2.2.5.tgz#845ff0c0834a3ded9d160daca6d390906bb288cc" @@ -3604,7 +3617,7 @@ fbjs-scripts@^1.0.0: semver "^5.1.0" through2 "^2.0.0" -fbjs@^0.8.16, fbjs@^0.8.9: +fbjs@^0.8.0, fbjs@^0.8.16, fbjs@^0.8.9: version "0.8.17" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd" integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90= @@ -4202,6 +4215,11 @@ gruntfile-editor@^1.0.0: ast-query "^2.0.0" lodash "^4.6.1" +gud@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0" + integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw== + gulp-decompress@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/gulp-decompress/-/gulp-decompress-1.2.0.tgz#8eeb65a5e015f8ed8532cafe28454960626f0dc7" @@ -4369,6 +4387,11 @@ hmac-drbg@^1.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" +hoist-non-react-statics@^2.2.0, hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0: + version "2.5.5" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47" + integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw== + home-or-tmp@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-3.0.0.tgz#57a8fe24cf33cdd524860a15821ddc25c86671fb" @@ -6620,6 +6643,13 @@ path-to-regexp@0.1.7: resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c" integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w= +path-to-regexp@^1.7.0: + version "1.7.0" + resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d" + integrity sha1-Wf3g9DW62suhA6hOnTvGTpa5k30= + dependencies: + isarray "0.0.1" + path-type@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441" @@ -6817,7 +6847,7 @@ prop-types@15.6.0: loose-envify "^1.3.1" object-assign "^4.1.1" -prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2: +prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2: version "15.6.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102" integrity sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ== @@ -6894,6 +6924,14 @@ query-string@^5.0.1: object-assign "^4.1.0" strict-uri-encode "^1.0.0" +query-string@^6.1.0: + version "6.2.0" + resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.2.0.tgz#468edeb542b7e0538f9f9b1aeb26f034f19c86e1" + integrity sha512-5wupExkIt8RYL4h/FE+WTg3JHk62e6fFPWtAZA9J5IWK1PfTfKkMS93HBUHcFpeYi9KsY5pFbh+ldvEyaz5MyA== + dependencies: + decode-uri-component "^0.2.0" + strict-uri-encode "^2.0.0" + querystring-es3@0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73" @@ -6991,6 +7029,16 @@ react-dom@16.4.2: object-assign "^4.1.1" prop-types "^15.6.0" +react-is@^16.5.2: + version "16.8.1" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.1.tgz#a80141e246eb894824fb4f2901c0c50ef31d4cdb" + integrity sha512-ioMCzVDWvCvKD8eeT+iukyWrBGrA3DiFYkXfBsVYIRdaREZuBjENG+KjrikavCLasozqRWTwFUagU/O4vPpRMA== + +react-lifecycles-compat@^3, react-lifecycles-compat@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" + integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== + react-native-background-timer@2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/react-native-background-timer/-/react-native-background-timer-2.0.0.tgz#afdac10b7441952d570acea4a8dbb065107b5461" @@ -7027,6 +7075,25 @@ react-native-dialogs@0.0.20: resolved "https://registry.yarnpkg.com/react-native-dialogs/-/react-native-dialogs-0.0.20.tgz#f3fb48eadba9d83fb9d4e6d7eca573494a8cefaa" integrity sha512-HeoU9d7wWUUAtxjcIJLaeIs/eYS2ZHTNh3kboeCKngLvfvgptd/7vZXwXdQ+xeOEek+cm95kDfMJQd2xnb+4wA== +react-native-dismiss-keyboard@1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/react-native-dismiss-keyboard/-/react-native-dismiss-keyboard-1.0.0.tgz#32886242b3f2317e121f3aeb9b0a585e2b879b49" + integrity sha1-MohiQrPyMX4SHzrrmwpYXiuHm0k= + +react-native-drawer-layout-polyfill@^1.3.2: + version "1.3.2" + resolved "https://registry.yarnpkg.com/react-native-drawer-layout-polyfill/-/react-native-drawer-layout-polyfill-1.3.2.tgz#192c84d7a5a6b8a6d2be2c7daa5e4164518d0cc7" + integrity sha512-XzPhfLDJrYHru+e8+dFwhf0FtTeAp7JXPpFYezYV6P1nTeA1Tia/kDpFT+O2DWTrBKBEI8FGhZnThrroZmHIxg== + dependencies: + react-native-drawer-layout "1.3.2" + +react-native-drawer-layout@1.3.2: + version "1.3.2" + resolved "https://registry.yarnpkg.com/react-native-drawer-layout/-/react-native-drawer-layout-1.3.2.tgz#b9740d7663a1dc4f88a61b9c6d93d2d948ea426e" + integrity sha512-fjO0scqbJUfNu2wuEpvywL7DYLXuCXJ2W/zYhWz986rdLytidbys1QGVvkaszHrb4Y7OqO96mTkgpOcP8KWevw== + dependencies: + react-native-dismiss-keyboard "1.0.0" + react-native-fetch-polyfill@1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/react-native-fetch-polyfill/-/react-native-fetch-polyfill-1.1.2.tgz#256b5a0abd78cc4992f7a7cf82543da2f2124a73" @@ -7093,6 +7160,18 @@ react-native-qrcode@0.2.6: prop-types "^15.5.10" qr.js "0.0.0" +react-native-safe-area-view@0.11.0: + version "0.11.0" + resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.11.0.tgz#4f3dda43c2bace37965e7c6aef5fc83d4f19d174" + integrity sha512-N3nElaahu1Me2ltnfc9acpgt1znm6pi8DSadKy79kvdzKwvVIzw0IXueA/Hjr51eCW1BsfNw7D1SgBT9U6qEkA== + dependencies: + hoist-non-react-statics "^2.3.1" + +react-native-screens@^1.0.0-alpha.11: + version "1.0.0-alpha.22" + resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-1.0.0-alpha.22.tgz#7a120377b52aa9bbb94d0b8541a014026be9289b" + integrity sha512-kSyAt0AeVU6N7ZonfV6dP6iZF8B7Bce+tk3eujXhzBGsLg0VSLnU7uE9VqJF0xdQrHR91ZjGgVMieo/8df9KTA== + react-native-scrollable-mixin@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/react-native-scrollable-mixin/-/react-native-scrollable-mixin-1.0.1.tgz#34a32167b64248594154fd0d6a8b03f22740548e" @@ -7118,6 +7197,20 @@ react-native-svg@6.3.1: lodash "^4.16.6" pegjs "^0.10.0" +react-native-tab-view@^0.0.77: + version "0.0.77" + resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-0.0.77.tgz#11ceb8e7c23100d07e628dc151b57797524d00d4" + integrity sha512-9vjD4Ly1Zlum1Y4g23ODpi/F3gYIUIsKWrsZO/Oh5cuX1eiB1DRVn11nY1z+j/hsQfhfyW6nDlmySyDvYQvYCA== + dependencies: + prop-types "^15.6.0" + +react-native-tab-view@^1.0.0: + version "1.3.2" + resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-1.3.2.tgz#c4e43a538dcacce151938745cea09176beeccbc3" + integrity sha512-2U+HxDQdjzExoC6gZ+wUhC8v8JjntppsFVU4v4pRvC/1dkN7DJv1k8UEy9+p7ucEaNrcAzu/j5N09Jf4qG36vw== + dependencies: + prop-types "^15.6.1" + react-native-tcp@3.3.0: version "3.3.0" resolved "https://registry.yarnpkg.com/react-native-tcp/-/react-native-tcp-3.3.0.tgz#8eea75b7b2c2c6db4b91f38f171fba3b2a1b60ee" @@ -7148,9 +7241,9 @@ react-native-udp@2.2.1: invariant "2.2.0" keymirror "0.1.1" -"react-native@git+https://github.com/status-im/react-native-desktop.git#v0.57.8_1": +"react-native@git+https://github.com/status-im/react-native-desktop.git#v0.57.8_8": version "0.57.8" - resolved "git+https://github.com/status-im/react-native-desktop.git#174fb14b354dbecef31be27d934390da7806ce50" + resolved "git+https://github.com/status-im/react-native-desktop.git#e77167f38aaa9591cda1b2cbeeea08aeb429c996" dependencies: "@babel/runtime" "^7.0.0" absolute-path "^0.0.0" @@ -7207,6 +7300,54 @@ react-native-udp@2.2.1: yeoman-environment "^1.2.7" yeoman-generator "^0.20.3" +react-navigation-deprecated-tab-navigator@1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/react-navigation-deprecated-tab-navigator/-/react-navigation-deprecated-tab-navigator-1.3.0.tgz#015dcae1e977b984ca7e99245261c15439026bb7" + integrity sha512-Cm+qYOPFWbvvcuv0YYX0ioYwLGgw7XAqdhAfpo3sIr3trxRW8871ePmfFOPezjQtz4v6ItjZt6LPgtBAVZoroQ== + dependencies: + react-native-tab-view "^0.0.77" + +react-navigation-drawer@0.5.0: + version "0.5.0" + resolved "https://registry.yarnpkg.com/react-navigation-drawer/-/react-navigation-drawer-0.5.0.tgz#d91b6a6ec65c34ba78c00f814b1e6508922cc9ec" + integrity sha512-F1y593uC6pqBMGH+Omz75oNODEbxB/s0EGO8QtYwu1NmOOEUuuLA+c14zm+pgMsI4HlDabiHxPkWqsgGz25xVQ== + dependencies: + react-native-drawer-layout-polyfill "^1.3.2" + +react-navigation-stack@0.7.0: + version "0.7.0" + resolved "https://registry.yarnpkg.com/react-navigation-stack/-/react-navigation-stack-0.7.0.tgz#0b2f139ee1cba953037ef51353df992ec6c74fa2" + integrity sha512-3Tbb/SsustBrM9R/qaI6XuOfyqYMVbwkeHFC8NbU890vB0aKZvjAtioWLZ18e/4LgbiOCmoTdp37z3gkGDyNDQ== + +react-navigation-tabs@0.8.4: + version "0.8.4" + resolved "https://registry.yarnpkg.com/react-navigation-tabs/-/react-navigation-tabs-0.8.4.tgz#aa767f28b899f13c99f2b034b4a665f8cf0a5737" + integrity sha512-CbS3xIVJVtpu+AYslv0PMLmjddJFVtU3XAhSJ9XnMrKLUJNmnQdW/L0w/Gp5qcBEF9h6bgsY3CoTtp7I6bqyOQ== + dependencies: + hoist-non-react-statics "^2.5.0" + prop-types "^15.6.1" + react-lifecycles-compat "^3.0.4" + react-native-tab-view "^1.0.0" + +react-navigation@^2.12.1: + version "2.18.3" + resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-2.18.3.tgz#de9a24dc37dfc33f3e4779a9f13f45ea97dfe19e" + integrity sha512-/5KGMG1Oj5LN/x/7AKF0MWrpX9Qe29307RxEsMCiRT/A4jCYT0DPY99Bl7ZAGtROxExEy3rwTfTrtvpIT+CU7A== + dependencies: + clamp "^1.0.1" + create-react-context "0.2.2" + hoist-non-react-statics "^2.2.0" + path-to-regexp "^1.7.0" + query-string "^6.1.0" + react-is "^16.5.2" + react-lifecycles-compat "^3" + react-native-safe-area-view "0.11.0" + react-native-screens "^1.0.0-alpha.11" + react-navigation-deprecated-tab-navigator "1.3.0" + react-navigation-drawer "0.5.0" + react-navigation-stack "0.7.0" + react-navigation-tabs "0.8.4" + react-proxy@^1.1.7: version "1.1.8" resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-1.1.8.tgz#9dbfd9d927528c3aa9f444e4558c37830ab8c26a" @@ -7336,7 +7477,7 @@ readline2@^0.1.1: mute-stream "0.0.4" strip-ansi "^2.0.1" -"realm@git+https://github.com/status-im/realm-js.git#heads/v2.20.1": +"realm@git+https://github.com/status-im/realm-js.git#v2.20.1": version "2.20.1" resolved "git+https://github.com/status-im/realm-js.git#433b2d66294fcd3a28e867438b48c9643acdb18a" dependencies: @@ -8110,6 +8251,11 @@ strict-uri-encode@^1.0.0: resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713" integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM= +strict-uri-encode@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546" + integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY= + string-width@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3" diff --git a/react-native/src/desktop/status_im/react_native/js_dependencies.cljs b/react-native/src/desktop/status_im/react_native/js_dependencies.cljs index 0de24609c2..bafeea958f 100644 --- a/react-native/src/desktop/status_im/react_native/js_dependencies.cljs +++ b/react-native/src/desktop/status_im/react_native/js_dependencies.cljs @@ -32,4 +32,4 @@ (def snoopy-bars #js {}) (def snoopy-buffer #js {}) (def background-timer #js {:setTimeout (fn [cb ms] (js/setTimeout cb ms))}) -(def react-navigation #js {:NavigationActions #js {}}) +(def react-navigation (js/require "react-navigation")) diff --git a/src/status_im/desktop/core.cljs b/src/status_im/desktop/core.cljs index 0fa4652522..c5961f4817 100644 --- a/src/status_im/desktop/core.cljs +++ b/src/status_im/desktop/core.cljs @@ -6,20 +6,41 @@ status-im.ui.screens.events status-im.subs status-im.data-store.core - [reagent.impl.component :as reagent.component] - [status-im.ui.components.desktop.shortcuts :as shortcuts] - [status-im.ui.screens.desktop.views :as views] + [status-im.ui.screens.views :as views] + [status-im.ui.components.react :as react] + [status-im.notifications.core :as notifications] [status-im.core :as core] - [status-im.desktop.deep-links :as deep-links])) + [status-im.utils.snoopy :as snoopy] + [status-im.ui.components.desktop.shortcuts :as shortcuts] + [status-im.ui.screens.desktop.views :as desktop-views] + [status-im.desktop.deep-links :as deep-links] + [status-im.utils.config :as config])) + +(defn app-state-change-handler [state] + (re-frame/dispatch [:app-state-change state])) (defn app-root [props] - (reagent/create-class - {:component-did-mount (fn [this] - (re-frame/dispatch [:set-initial-props (reagent/props this)]) - (shortcuts/register-default-shortcuts) - (deep-links/add-event-listener)) - :reagent-render (fn [props] - views/main)})) + (if config/mobile-ui-for-desktop? + (reagent/create-class + {:component-will-mount + (fn [] + (.addEventListener react/app-state "change" app-state-change-handler)) + :component-did-mount + (fn [this] + (re-frame/dispatch [:set-initial-props (reagent/props this)])) + :component-will-unmount + (fn [] + (.stop react/http-bridge) + (.removeEventListener react/app-state "change" app-state-change-handler)) + :display-name "root" + :reagent-render views/main}) + (reagent/create-class + {:component-did-mount (fn [this] + (re-frame/dispatch [:set-initial-props (reagent/props this)]) + (shortcuts/register-default-shortcuts) + (deep-links/add-event-listener)) + :reagent-render (fn [props] + desktop-views/main)}))) (defn init [] (core/init app-root)) diff --git a/src/status_im/ui/components/bottom_bar/core.cljs b/src/status_im/ui/components/bottom_bar/core.cljs index 9cb64f8e19..ac1caba7c4 100644 --- a/src/status_im/ui/components/bottom_bar/core.cljs +++ b/src/status_im/ui/components/bottom_bar/core.cljs @@ -28,25 +28,29 @@ callback)))) (def tabs-list-data - [{:nav-stack :chat-stack - :content {:title (i18n/label :t/chats) - :icon :main-icons/message} - :count-subscription :chats/unread-messages-number - :accessibility-label :home-tab-button} - {:nav-stack :browser-stack - :content {:title (i18n/label :t/dapps) - :icon :main-icons/dapp} - :accessibility-label :dapp-tab-button} - {:nav-stack :wallet-stack - :content {:title (i18n/label :t/wallet) - :icon :main-icons/wallet} - :count-subscription :get-wallet-unread-messages-number - :accessibility-label :wallet-tab-button} - {:nav-stack :profile-stack - :content {:title (i18n/label :t/profile) - :icon :main-icons/user-profile} - :count-subscription :get-profile-unread-messages-number - :accessibility-label :profile-tab-button}]) + (->> + [{:nav-stack :chat-stack + :content {:title (i18n/label :t/chats) + :icon :main-icons/message} + :count-subscription :chats/unread-messages-number + :accessibility-label :home-tab-button} + (when-not platform/desktop? + {:nav-stack :browser-stack + :content {:title (i18n/label :t/dapps) + :icon :main-icons/dapp} + :accessibility-label :dapp-tab-button}) + (when-not platform/desktop? + {:nav-stack :wallet-stack + :content {:title (i18n/label :t/wallet) + :icon :main-icons/wallet} + :count-subscription :get-wallet-unread-messages-number + :accessibility-label :wallet-tab-button}) + {:nav-stack :profile-stack + :content {:title (i18n/label :t/profile) + :icon :main-icons/user-profile} + :count-subscription :get-profile-unread-messages-number + :accessibility-label :profile-tab-button}] + (remove nil?))) (defn new-tab [{:keys [icon label active? nav-stack diff --git a/src/status_im/ui/components/chat_icon/screen.cljs b/src/status_im/ui/components/chat_icon/screen.cljs index c9e2730b86..31a219441a 100644 --- a/src/status_im/ui/components/chat_icon/screen.cljs +++ b/src/status_im/ui/components/chat_icon/screen.cljs @@ -4,7 +4,8 @@ [status-im.ui.components.chat-icon.styles :as styles] [status-im.ui.components.colors :as colors] [status-im.ui.components.react :as react] - [status-im.ui.screens.chat.photos :as photos]) + [status-im.ui.screens.chat.photos :as photos] + [status-im.utils.platform :as platform]) (:require-macros [status-im.utils.views :refer [defview letsubs]])) (defn default-chat-icon [name styles] @@ -138,9 +139,9 @@ :default-chat-icon (styles/default-chat-icon-profile color size) :default-chat-icon-text styles/default-chat-icon-text} override-styles)] [react/view (:container styles) - (when edit? + (when (and edit? (not platform/desktop?)) [react/view (styles/profile-icon-mask size)]) - (when edit? + (when (and edit? (not platform/desktop?)) [react/view (styles/profile-icon-edit-text-containter size) [react/i18n-text {:style styles/profile-icon-edit-text :key :edit}]]) (if (and photo-path (seq photo-path)) diff --git a/src/status_im/ui/components/list_selection.cljs b/src/status_im/ui/components/list_selection.cljs index 50dcd03075..b3911d9d13 100644 --- a/src/status_im/ui/components/list_selection.cljs +++ b/src/status_im/ui/components/list_selection.cljs @@ -5,7 +5,8 @@ [status-im.ui.components.dialog :as dialog] [status-im.ui.components.react :as react] [status-im.utils.platform :as platform] - [status-im.utils.http :as http])) + [status-im.utils.http :as http] + [status-im.ui.components.popup-menu.views :refer [show-desktop-menu]])) (defn open-share [content] (when (or (:message content) @@ -17,13 +18,15 @@ :action #(re-frame/dispatch [:chat.ui/reply-to-message message-id old-message-id])} {:label (i18n/label :t/sharing-copy-to-clipboard) :action #(react/copy-to-clipboard text)} - {:label (i18n/label :t/sharing-share) - :action #(open-share {:message text})}]) + (when-not platform/desktop? + {:label (i18n/label :t/sharing-share) + :action #(open-share {:message text})})]) (defn show [options] - (if platform/ios? - (action-sheet/show options) - (dialog/show options))) + (cond + platform/ios? (action-sheet/show options) + platform/android? (dialog/show options) + platform/desktop? (show-desktop-menu (->> (:options options) (remove nil?))))) (defn chat-message [message-id old-message-id text dialog-title] (show {:title dialog-title diff --git a/src/status_im/ui/components/popup_menu/views.cljs b/src/status_im/ui/components/popup_menu/views.cljs index 9a7e5a215c..6e34bba99c 100644 --- a/src/status_im/ui/components/popup_menu/views.cljs +++ b/src/status_im/ui/components/popup_menu/views.cljs @@ -4,11 +4,14 @@ [status-im.utils.platform :as platform] [status-im.i18n :as i18n] [re-frame.core :as re-frame] - [taoensso.timbre :as log])) + [taoensso.timbre :as log] + [status-im.utils.config :as config])) (defn show-desktop-menu [items] (.show rn-dependencies/desktop-menu - (clj->js (mapv #(hash-map :text (:text %1) :onPress (:on-select %1)) items)))) + (if config/mobile-ui-for-desktop? + (clj->js (mapv #(hash-map :text (:label %1) :onPress (:action %1)) items)) + (clj->js (mapv #(hash-map :text (:text %1) :onPress (:on-select %1)) items))))) (defn get-chat-menu-items [group-chat public? chat-id] (->> [(when (and (not group-chat) (not public?)) diff --git a/src/status_im/ui/components/status_bar/view.cljs b/src/status_im/ui/components/status_bar/view.cljs index a13a473b7d..b030ec34a6 100644 --- a/src/status_im/ui/components/status_bar/view.cljs +++ b/src/status_im/ui/components/status_bar/view.cljs @@ -16,7 +16,8 @@ :wallet styles/view-wallet :wallet-tab styles/view-wallet-tab styles/view-default)] - [react/view {:style (cond-> view-style flat? (assoc :elevation 0))}])) + (when-not platform/desktop? + [react/view {:style (cond-> view-style flat? (assoc :elevation 0))}]))) (defn get-config [view-id] (get diff --git a/src/status_im/ui/screens/add_new/new_chat/views.cljs b/src/status_im/ui/screens/add_new/new_chat/views.cljs index 400d6272f9..85ea9648be 100644 --- a/src/status_im/ui/screens/add_new/new_chat/views.cljs +++ b/src/status_im/ui/screens/add_new/new_chat/views.cljs @@ -10,7 +10,8 @@ [status-im.ui.components.status-bar.view :as status-bar] [status-im.ui.components.toolbar.view :as toolbar.view] [status-im.ui.screens.add-new.styles :as add-new.styles] - [status-im.ui.screens.add-new.new-chat.styles :as styles])) + [status-im.ui.screens.add-new.new-chat.styles :as styles] + [status-im.utils.platform :as platform])) (defn- render-row [row _ _] [contact-view/contact-view {:contact row @@ -32,13 +33,14 @@ :style add-new.styles/input :accessibility-label :enter-contact-code-input :return-key-type :go}]] - [react/touchable-highlight {:on-press #(re-frame/dispatch [:qr-scanner.ui/scan-qr-code-pressed - {:toolbar-title (i18n/label :t/new-contact)} - :contact/qr-code-scanned]) - :style add-new.styles/button-container - :accessibility-label :scan-contact-code-button} - [react/view - [vector-icons/icon :main-icons/qr {:color colors/blue}]]]] + (when-not platform/desktop? + [react/touchable-highlight {:on-press #(re-frame/dispatch [:qr-scanner.ui/scan-qr-code-pressed + {:toolbar-title (i18n/label :t/new-contact)} + :contact/qr-code-scanned]) + :style add-new.styles/button-container + :accessibility-label :scan-contact-code-button} + [react/view + [vector-icons/icon :main-icons/qr {:color colors/blue}]]])] [react/text {:style styles/error-message} error-message] (when (seq contacts) diff --git a/src/status_im/ui/screens/add_new/views.cljs b/src/status_im/ui/screens/add_new/views.cljs index a6b00b0b1d..e6297e3d31 100644 --- a/src/status_im/ui/screens/add_new/views.cljs +++ b/src/status_im/ui/screens/add_new/views.cljs @@ -11,7 +11,8 @@ [status-im.ui.components.styles :as styles] [status-im.ui.components.status-bar.view :as status-bar] [status-im.ui.components.toolbar.view :as toolbar] - [status-im.utils.config :as config])) + [status-im.utils.config :as config] + [status-im.utils.platform :as platform])) (defn- options-list [{:keys [dev-mode?]}] [react/view action-button.styles/actions-list @@ -35,22 +36,23 @@ :icon :main-icons/public-chat :icon-opts {:color colors/blue} :on-press #(re-frame/dispatch [:navigate-to :new-public-chat])}] - [action-button/action-separator] - [action-button/action-button - {:label (i18n/label :t/invite-friends) - :accessibility-label :invite-friends-button - :icon :main-icons/share - :icon-opts {:color colors/blue} - :on-press #(list-selection/open-share {:message (i18n/label :t/get-status-at)})}] - [action-button/action-separator] - [action-button/action-button - {:label (i18n/label :t/scan-qr) - :accessibility-label :scan-qr-code-button - :icon :main-icons/qr - :icon-opts {:color colors/blue} - :on-press #(re-frame/dispatch [:qr-scanner.ui/scan-qr-code-pressed - {:toolbar-title (i18n/label :t/scan-qr)} - :handle-qr-code])}]]) + (when-not platform/desktop? + [action-button/action-separator] + [action-button/action-button + {:label (i18n/label :t/invite-friends) + :accessibility-label :invite-friends-button + :icon :main-icons/share + :icon-opts {:color colors/blue} + :on-press #(list-selection/open-share {:message (i18n/label :t/get-status-at)})}] + [action-button/action-separator] + [action-button/action-button + {:label (i18n/label :t/scan-qr) + :accessibility-label :scan-qr-code-button + :icon :main-icons/qr + :icon-opts {:color colors/blue} + :on-press #(re-frame/dispatch [:qr-scanner.ui/scan-qr-code-pressed + {:toolbar-title (i18n/label :t/scan-qr)} + :handle-qr-code])}])]) (views/defview add-new [] (views/letsubs [account [:account/account] diff --git a/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/views.cljs b/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/views.cljs index c4960e26d4..e6500681b9 100644 --- a/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/views.cljs +++ b/src/status_im/ui/screens/bootnodes_settings/edit_bootnode/views.cljs @@ -13,6 +13,7 @@ [status-im.ui.components.toolbar.view :as toolbar] [status-im.ui.components.text-input.view :as text-input] [status-im.ui.screens.bootnodes-settings.edit-bootnode.styles :as styles] + [status-im.utils.platform :as platform] [status-im.ui.components.tooltip.views :as tooltip] [clojure.string :as string])) @@ -57,13 +58,14 @@ [react/view {:flex 1} [text-input/text-input-with-label - {:label (i18n/label :t/bootnode-address) - :placeholder (i18n/label :t/bootnode-format) - :content qr-code - :style styles/input - :container styles/input-container - :default-value url - :on-change-text #(re-frame/dispatch [:bootnodes.ui/input-changed :url %])}] + (merge + {:label (i18n/label :t/bootnode-address) + :placeholder (i18n/label :t/bootnode-format) + :style styles/input + :container styles/input-container + :default-value url + :on-change-text #(re-frame/dispatch [:bootnodes.ui/input-changed :url %])} + (when-not platform/desktop? {:content qr-code}))] (when (and (not (string/blank? url)) invalid-url?) [tooltip/tooltip (i18n/label :t/invalid-format {:format (i18n/label :t/bootnode-format)}) diff --git a/src/status_im/ui/screens/chat/actions.cljs b/src/status_im/ui/screens/chat/actions.cljs index 109b1b97c4..41e36f1b1c 100644 --- a/src/status_im/ui/screens/chat/actions.cljs +++ b/src/status_im/ui/screens/chat/actions.cljs @@ -2,7 +2,8 @@ (:require [re-frame.core :as re-frame] [status-im.i18n :as i18n] [status-im.ui.components.list-selection :as list-selection] - [status-im.utils.universal-links.core :as universal-links])) + [status-im.utils.universal-links.core :as universal-links] + [status-im.utils.platform :as platform])) (defn view-profile [chat-id] {:label (i18n/label :t/view-profile) @@ -15,8 +16,9 @@ (defn- share-chat [chat-id] (let [link (universal-links/generate-link :public-chat :external chat-id) message (i18n/label :t/share-public-chat-text {:link link})] - {:label (i18n/label :t/share-chat) - :action #(list-selection/open-share {:message message})})) + (when-not platform/desktop? + {:label (i18n/label :t/share-chat) + :action #(list-selection/open-share {:message message})}))) (defn- clear-history [] {:label (i18n/label :t/clear-history) diff --git a/src/status_im/ui/screens/chat/input/input.cljs b/src/status_im/ui/screens/chat/input/input.cljs index b7fe204427..1e7051373d 100644 --- a/src/status_im/ui/screens/chat/input/input.cljs +++ b/src/status_im/ui/screens/chat/input/input.cljs @@ -20,6 +20,7 @@ [status-im.utils.gfycat.core :as gfycat] [status-im.utils.utils :as utils] [status-im.utils.config :as config] + [taoensso.timbre :as log] [status-im.ui.screens.chat.stickers.views :as stickers])) (defview basic-text-input [{:keys [set-container-width-fn height single-line-input?]}] @@ -51,6 +52,40 @@ (when cooldown-enabled? {:placeholder (i18n/label :cooldown/text-input-disabled)}))])) +(defview basic-text-input-desktop [{:keys [set-container-width-fn height single-line-input? set-text state-text]}] + (letsubs [cooldown-enabled? [:chats/cooldown-enabled?]] + [react/text-input + (merge + {:ref #(when % (re-frame/dispatch [:chat.ui/set-chat-ui-props {:input-ref %}])) + :accessibility-label :chat-message-input + :multiline (not single-line-input?) + :default-value @state-text + :editable (not cooldown-enabled?) + :blur-on-submit false + :on-focus #(re-frame/dispatch [:chat.ui/set-chat-ui-props {:input-focused? true + :show-stickers? false + :messages-focused? false}]) + :on-blur #(re-frame/dispatch [:chat.ui/set-chat-ui-props {:input-focused? false}]) + :submit-shortcut {:key "Enter"} + :on-submit-editing #(do + (re-frame/dispatch [:chat.ui/set-chat-input-text @state-text]) + (re-frame/dispatch [:chat.ui/send-current-message]) + (set-text "")) + :on-layout #(set-container-width-fn (.-width (.-layout (.-nativeEvent %)))) + :on-change #(do + (set-text (.-text (.-nativeEvent %)))) + :on-end-editing #(re-frame/dispatch [:chat.ui/set-chat-input-text @state-text]) + :on-selection-change #(let [s (-> (.-nativeEvent %) + (.-selection)) + end (.-end s)] + (re-frame/dispatch [:chat.ui/set-chat-ui-props {:selection end}])) + :style (style/input-view single-line-input?) + :placeholder-text-color colors/gray + :auto-capitalize :sentences} + (when cooldown-enabled? + {:placeholder (i18n/label :cooldown/text-input-disabled)}))])) +;) + (defview invisible-input [{:keys [set-layout-width-fn value]}] (letsubs [{:keys [input-text]} [:chats/current-chat]] [react/text {:style style/invisible-input-text @@ -84,7 +119,7 @@ :number {:keyboard-type "numeric"} nil)) -(defview input-view [{:keys [single-line-input?]}] +(defview input-view [{:keys [single-line-input? set-text state-text]}] (letsubs [command [:chats/selected-chat-command]] (let [component (reagent/current-component) set-layout-width-fn #(reagent/set-state component {:width %}) @@ -93,8 +128,13 @@ [react/view {:style style/input-root} [react/animated-view {:style style/input-animated} [invisible-input {:set-layout-width-fn set-layout-width-fn}] - [basic-text-input {:set-container-width-fn set-container-width-fn - :single-line-input? single-line-input?}] + (if platform/desktop? + [basic-text-input-desktop {:set-container-width-fn set-container-width-fn + :single-line-input? single-line-input? + :set-text set-text + :state-text state-text}] + [basic-text-input {:set-container-width-fn set-container-width-fn + :single-line-input? single-line-input?}]) [input-helper {:width width}]]]))) (defview commands-button [] @@ -134,8 +174,18 @@ (letsubs [margin [:chats/input-margin] {:keys [input-text]} [:chats/current-chat] result-box [:chats/current-chat-ui-prop :result-box] - show-stickers? [:chats/current-chat-ui-prop :show-stickers?]] - (let [single-line-input? (:singleLineInput result-box)] + show-stickers? [:chats/current-chat-ui-prop :show-stickers?] + state-text (reagent/atom "")] + {:component-will-unmount #(when platform/desktop? + (re-frame/dispatch [:chat.ui/set-chat-input-text @state-text])) + + :component-did-mount #(when-not (string/blank? input-text) (reset! state-text input-text))} + (let [single-line-input? (:singleLineInput result-box) + component (reagent/current-component) + set-text #(reset! state-text %) + input-text-empty? (if platform/desktop? + (string/blank? state-text) + (string/blank? input-text))] [react/view {:style (style/root margin) :on-layout #(let [h (-> (.-nativeEvent %) (.-layout) @@ -144,12 +194,14 @@ (re-frame/dispatch [:chat.ui/set-chat-ui-props {:input-height h}])))} [reply-message-view] [react/view {:style style/input-container} - [input-view {:single-line-input? single-line-input?}] - (when (and config/stickers-enabled? (string/blank? input-text)) + [input-view {:single-line-input? single-line-input? :set-text set-text :state-text state-text}] + (when (and config/stickers-enabled? input-text-empty?) [stickers/button show-stickers?]) - (if (string/blank? input-text) + (if input-text-empty? [commands-button] - [send-button/send-button-view])]]))) + (if platform/desktop? + [send-button/send-button-view {:input-text @state-text}] + [send-button/send-button-view {:input-text input-text}]))]]))) (defn container [] [react/view diff --git a/src/status_im/ui/screens/chat/input/send_button.cljs b/src/status_im/ui/screens/chat/input/send_button.cljs index 934322d589..e4167d51fb 100644 --- a/src/status_im/ui/screens/chat/input/send_button.cljs +++ b/src/status_im/ui/screens/chat/input/send_button.cljs @@ -13,9 +13,8 @@ login-processing? disconnected?)))) -(defview send-button-view [] +(defview send-button-view [{:keys [input-text]}] (letsubs [{:keys [command-completion]} [:chats/selected-chat-command] - {:keys [input-text]} [:chats/current-chat] disconnected? [:disconnected?] {:keys [processing]} [:accounts/login]] (when (and (sendable? input-text disconnected? processing) diff --git a/src/status_im/ui/screens/chat/message/message.cljs b/src/status_im/ui/screens/chat/message/message.cljs index a265e5a4a3..fc5a94bbb9 100644 --- a/src/status_im/ui/screens/chat/message/message.cljs +++ b/src/status_im/ui/screens/chat/message/message.cljs @@ -54,8 +54,7 @@ justify-timestamp? outgoing (:rtl? content) - (= content-type constants/content-type-emoji))} - t])) + (= content-type constants/content-type-emoji))} t])) (defn message-view [{:keys [timestamp-str outgoing content content-type] :as message} message-content {:keys [justify-timestamp?]}] @@ -268,16 +267,24 @@ [react/view (style/delivery-status outgoing) [message-delivery-status message]]]) -(defn chat-message [{:keys [message-id old-message-id outgoing group-chat modal? current-public-key content-type content] :as message}] +(defn open-chat-context-menu + [{:keys [message-id old-message-id content] :as message}] + (list-selection/chat-message message-id old-message-id (:text content) (i18n/label :t/message))) + +(defn chat-message [{:keys [outgoing group-chat modal? current-public-key content-type content] :as message}] [react/view - [react/touchable-highlight {:on-press (fn [_] - (when (= content-type constants/content-type-sticker) - (re-frame/dispatch [:stickers/open-sticker-pack (:pack content)])) - (re-frame/dispatch [:chat.ui/set-chat-ui-props {:messages-focused? true - :show-stickers? false}]) - (react/dismiss-keyboard!)) + [react/touchable-highlight {:on-press (fn [arg] + (if (and platform/desktop? (= "right" (.-button (.-nativeEvent arg)))) + (open-chat-context-menu message) + (do + (when (= content-type constants/content-type-sticker) + (re-frame/dispatch [:stickers/open-sticker-pack (:pack content)])) + (re-frame/dispatch [:chat.ui/set-chat-ui-props {:messages-focused? true + :show-stickers? false}]) + (when-not platform/desktop? + (react/dismiss-keyboard!))))) :on-long-press #(when (or (= content-type constants/content-type-text) (= content-type constants/content-type-emoji)) - (list-selection/chat-message message-id old-message-id (:text content) (i18n/label :t/message)))} + (open-chat-context-menu message))} [react/view {:accessibility-label :chat-item} (let [incoming-group (and group-chat (not outgoing))] [message-content message-body (merge message diff --git a/src/status_im/ui/screens/chat/stickers/views.cljs b/src/status_im/ui/screens/chat/stickers/views.cljs index c8bba8cd34..8022172008 100644 --- a/src/status_im/ui/screens/chat/stickers/views.cljs +++ b/src/status_im/ui/screens/chat/stickers/views.cljs @@ -7,7 +7,8 @@ [status-im.i18n :as i18n] [status-im.ui.screens.chat.stickers.styles :as styles] [status-im.ui.components.animation :as anim] - [reagent.core :as reagent])) + [reagent.core :as reagent] + [status-im.utils.platform :as platform])) (def icon-size 28) (def icon-horizontal-margin 8) @@ -20,7 +21,7 @@ [react/touchable-highlight {:on-press (fn [_] (re-frame/dispatch [:chat.ui/set-chat-ui-props {:show-stickers? (not show-stickers?)}]) - (js/setTimeout #(react/dismiss-keyboard!) 100)) + (when-not platform/desktop? (js/setTimeout #(react/dismiss-keyboard!) 100))) :accessibility-label :show-stickers-icon} [vector-icons/icon :main-icons/stickers {:container-style {:margin 14 :margin-right 6} :color (if show-stickers? colors/blue colors/gray)}]]) diff --git a/src/status_im/ui/screens/chat/styles/input/input.cljs b/src/status_im/ui/screens/chat/styles/input/input.cljs index 349fc5cb18..e7c2070e87 100644 --- a/src/status_im/ui/screens/chat/styles/input/input.cljs +++ b/src/status_im/ui/screens/chat/styles/input/input.cljs @@ -108,14 +108,16 @@ :position :absolute :height min-input-height :android {:left (+ 4 left)} - :ios {:left left}}) + :ios {:left left} + :desktop {:left left}}) (defnstyle input-helper-text [left] {:color colors/gray :text-align-vertical :center :flex 1 :android {:top -1} - :ios {:line-height min-input-height}}) + :ios {:line-height min-input-height} + :desktop {:line-height min-input-height}}) (defnstyle seq-input-text [left container-width] {:min-width (- container-width left) @@ -126,6 +128,9 @@ :height (+ 2 min-input-height) :top 0.5} :ios {:line-height min-input-height + :height min-input-height + :left left} + :desktop {:line-height min-input-height :height min-input-height :left left}}) diff --git a/src/status_im/ui/screens/chat/styles/message/message.cljs b/src/status_im/ui/screens/chat/styles/message/message.cljs index 4d0073bf01..c5c022cc8e 100644 --- a/src/status_im/ui/screens/chat/styles/message/message.cljs +++ b/src/status_im/ui/screens/chat/styles/message/message.cljs @@ -78,9 +78,8 @@ (defn group-message-view [outgoing message-type] (let [align (if outgoing :flex-end :flex-start)] - (merge {:flex 1 - :flex-direction :column - :max-width 320 + (merge {:flex-direction :column + :max-width (if platform/desktop? 500 320) :align-items align} (if outgoing {:margin-right 8} @@ -132,6 +131,7 @@ (defnstyle emoji-message [{:keys [incoming-group]}] {:font-size 40 + :desktop {:line-height 46} :margin-top (if incoming-group 4 0)}) (defn message-view diff --git a/src/status_im/ui/screens/chat/styles/message/options.cljs b/src/status_im/ui/screens/chat/styles/message/options.cljs index 89050d5a7b..18b6ad9383 100644 --- a/src/status_im/ui/screens/chat/styles/message/options.cljs +++ b/src/status_im/ui/screens/chat/styles/message/options.cljs @@ -9,6 +9,7 @@ :align-items :center :padding-horizontal 16 :ios {:height 36} + :desktop {:height 36} :android {:height 36}}) (def title diff --git a/src/status_im/ui/screens/chat/utils.cljs b/src/status_im/ui/screens/chat/utils.cljs index 52013a6467..bfd6c91e04 100644 --- a/src/status_im/ui/screens/chat/utils.cljs +++ b/src/status_im/ui/screens/chat/utils.cljs @@ -35,17 +35,13 @@ (def ^:private action->prop-fn {:link (fn [text {:keys [outgoing]}] - {:style {:color (if platform/desktop? - colors/blue - (if outgoing colors/white colors/blue)) + {:style {:color (if outgoing colors/white colors/blue) :text-decoration-line :underline} :on-press (if platform/desktop? #(.openURL react/linking (http/normalize-url text)) #(re-frame/dispatch [:browser.ui/message-link-pressed text]))}) :tag (fn [text {:keys [outgoing]}] - {:style {:color (if platform/desktop? - colors/blue - (if outgoing colors/white colors/blue)) + {:style {:color (if outgoing colors/white colors/blue) :text-decoration-line :underline} :on-press #(re-frame/dispatch [:chat.ui/start-public-chat (subs text 1) {:navigation-reset? true}])})}) diff --git a/src/status_im/ui/screens/chat/views.cljs b/src/status_im/ui/screens/chat/views.cljs index 79a9c36d49..0f22a0d5d9 100644 --- a/src/status_im/ui/screens/chat/views.cljs +++ b/src/status_im/ui/screens/chat/views.cljs @@ -102,9 +102,12 @@ {:on-press (fn [_] (re-frame/dispatch [:chat.ui/set-chat-ui-props {:messages-focused? true :show-stickers? false}]) - (react/dismiss-keyboard!))} - [react/animated-view {:style (style/message-view-animated opacity)} - message-view]]])) + (when-not platform/desktop? + (react/dismiss-keyboard!)))} + (if platform/desktop? + message-view + [react/animated-view {:style (style/message-view-animated opacity)} + message-view])]])) (defn join-chat-button [chat-id] [buttons/secondary-button {:style style/join-button diff --git a/src/status_im/ui/screens/group/views.cljs b/src/status_im/ui/screens/group/views.cljs index d9aea280d0..da9588bc64 100644 --- a/src/status_im/ui/screens/group/views.cljs +++ b/src/status_im/ui/screens/group/views.cljs @@ -106,7 +106,8 @@ [react/text {:style styles/no-contact-text} (i18n/label :t/group-chat-no-contacts)] - [buttons/secondary-button {:on-press handle-invite-friends-pressed} (i18n/label :t/invite-friends)]]) + (when-not platform/desktop? + [buttons/secondary-button {:on-press handle-invite-friends-pressed} (i18n/label :t/invite-friends)])]) (views/defview bottom-container [{:keys [on-press disabled label accessibility-label]}] [react/view {:style main-tabs.styles/tabs-container} diff --git a/src/status_im/ui/screens/home/styles.cljs b/src/status_im/ui/screens/home/styles.cljs index 78a3971e3e..04c894aa8c 100644 --- a/src/status_im/ui/screens/home/styles.cljs +++ b/src/status_im/ui/screens/home/styles.cljs @@ -16,6 +16,7 @@ {:flex-direction :row :android {:height 76} :ios {:height 74} + :desktop {:height 74} :overflow :hidden}) (defstyle chat-icon-container @@ -25,7 +26,8 @@ :padding-right 20 :width 72 :android {:height 76} - :ios {:height 74}}) + :ios {:height 74} + :desktop {:height 74}}) (defstyle chat-info-container {:margin-bottom 13 @@ -33,7 +35,8 @@ :flex 1 :flex-direction :column :android {:margin-top 16} - :ios {:margin-top 14}}) + :ios {:margin-top 14} + :desktop {:margin-top 14}}) (defstyle chat-options-container {:padding-top 10}) @@ -49,7 +52,8 @@ :justify-content :space-between :padding-right 16 :android {:margin-top 4} - :ios {:margin-top 6}}) + :ios {:margin-top 6} + :desktop {:margin-top 6}}) (def message-status-container {:flex-direction :row @@ -65,6 +69,8 @@ :android {:font-size 16 :height 26} :ios {:font-size 17 + :height 26} + :desktop {:font-size 17 :height 26}}) (defstyle private-group-icon-container @@ -82,7 +88,7 @@ (def last-message-text {:color colors/text-gray - :height 24}) + :max-height 24}) (def search-input-height 56) @@ -138,7 +144,8 @@ :color colors/blue :text-align :center :android {:top 2} - :ios {:top 3}}) + :ios {:top 3} + :desktop {:top 3}}) (def group-icon {:margin-top 8 diff --git a/src/status_im/ui/screens/profile/contact/views.cljs b/src/status_im/ui/screens/profile/contact/views.cljs index 015061f682..10e7dd75c6 100644 --- a/src/status_im/ui/screens/profile/contact/views.cljs +++ b/src/status_im/ui/screens/profile/contact/views.cljs @@ -7,7 +7,8 @@ [status-im.ui.components.toolbar.view :as toolbar] [status-im.ui.screens.profile.components.styles :as profile.components.styles] [status-im.ui.screens.profile.components.views :as profile.components] - [status-im.ui.screens.profile.contact.styles :as styles]) + [status-im.ui.screens.profile.contact.styles :as styles] + [status-im.utils.platform :as platform]) (:require-macros [status-im.utils.views :refer [defview letsubs]])) (defn profile-contact-toolbar [] @@ -32,11 +33,12 @@ {:label (i18n/label :t/send-transaction) :icon :main-icons/send :action #(re-frame/dispatch [:profile/send-transaction public-key]) - :accessibility-label :send-transaction-button} - {:label (i18n/label :t/share-profile-link) - :icon :main-icons/share - :action #(re-frame/dispatch [:profile/share-profile-link public-key]) - :accessibility-label :share-profile-link}])) + :accessibility-label :send-transaction-button}] + (when-not platform/desktop? + [{:label (i18n/label :t/share-profile-link) + :icon :main-icons/share + :action #(re-frame/dispatch [:profile/share-profile-link public-key]) + :accessibility-label :share-profile-link}]))) (defn profile-info-item [{:keys [label value options accessibility-label]}] [react/view styles/profile-info-item diff --git a/src/status_im/ui/screens/profile/user/views.cljs b/src/status_im/ui/screens/profile/user/views.cljs index 08e26a58f1..820838f320 100644 --- a/src/status_im/ui/screens/profile/user/views.cljs +++ b/src/status_im/ui/screens/profile/user/views.cljs @@ -87,11 +87,13 @@ [status-bar/status-bar {:type :modal-white}] [qr-viewer-toolbar (:name contact) value] [qr-code-viewer/qr-code-viewer - {:style styles/qr-code - :footer-button qr-code-share-button - :value value - :hint (i18n/label :t/qr-code-public-key-hint) - :legend (str value)}]])) + (merge + {:style styles/qr-code + :value value + :hint (i18n/label :t/qr-code-public-key-hint) + :legend (str value)} + (when-not platform/desktop? + {:footer-button qr-code-share-button}))]])) (defn- show-qr [contact source value] #(re-frame/dispatch [:navigate-to :profile-qr-viewer {:contact contact diff --git a/src/status_im/ui/screens/routing/core.cljs b/src/status_im/ui/screens/routing/core.cljs index 1a9313fc82..2bf1932887 100644 --- a/src/status_im/ui/screens/routing/core.cljs +++ b/src/status_im/ui/screens/routing/core.cljs @@ -107,7 +107,7 @@ routes (cond-> (merge {:headerMode "none" - :cardStyle {:backgroundColor (when platform/ios? :white)} + :cardStyle {:backgroundColor (when (or platform/ios? platform/desktop?) :white)} :onTransitionStart (fn [n] (let [idx (.. n -navigation diff --git a/src/status_im/ui/screens/views.cljs b/src/status_im/ui/screens/views.cljs index 7294ca6882..a31cab1813 100644 --- a/src/status_im/ui/screens/views.cljs +++ b/src/status_im/ui/screens/views.cljs @@ -66,7 +66,8 @@ (if js/goog.DEBUG @initial-view-id @view-id)))) - (react/dismiss-keyboard!)) + (when-not platform/desktop? + (react/dismiss-keyboard!))) :component-did-update (fn [] (log/debug :main-component-did-update @view-id)) diff --git a/src/status_im/utils/config.cljs b/src/status_im/utils/config.cljs index fd3173293e..e2af59e9cc 100644 --- a/src/status_im/utils/config.cljs +++ b/src/status_im/utils/config.cljs @@ -34,6 +34,7 @@ (def tr-to-talk-enabled? (enabled? (get-config :TRIBUTE_TO_TALK 0))) (def max-message-delivery-attempts (js/parseInt (get-config :MAX_MESSAGE_DELIVERY_ATTEMPTS "6"))) (def contract-nodes-enabled? (enabled? (get-config :CONTRACT_NODES "0"))) +(def mobile-ui-for-desktop? (enabled? (get-config :MOBILE_UI_FOR_DESKTOP "0"))) ;; CONFIG VALUES (def log-level diff --git a/src/status_im/utils/navigation.cljs b/src/status_im/utils/navigation.cljs index cee5830b75..3b7a09ec08 100644 --- a/src/status_im/utils/navigation.cljs +++ b/src/status_im/utils/navigation.cljs @@ -3,16 +3,13 @@ [status-im.utils.platform :as platform])) (def navigation-actions - (when (not platform/desktop?) - (.-NavigationActions js-dependencies/react-navigation))) + (.-NavigationActions js-dependencies/react-navigation)) (def navigation-events - (when (not platform/desktop?) - (.-NavigationEvents js-dependencies/react-navigation))) + (.-NavigationEvents js-dependencies/react-navigation)) (def stack-actions - (when (not platform/desktop?) - (.-StackActions js-dependencies/react-navigation))) + (.-StackActions js-dependencies/react-navigation)) (def navigator-ref (atom nil)) @@ -20,8 +17,7 @@ (reset! navigator-ref ref)) (defn can-be-called? [] - (and @navigator-ref - (not platform/desktop?))) + @navigator-ref) (defn navigate-to [route] (when (can-be-called?)