From eb5711e9bce999db19b1a5a8394fa630a498b5bd Mon Sep 17 00:00:00 2001 From: Parvesh Monu Date: Mon, 4 Oct 2021 19:08:39 +0530 Subject: [PATCH] Custom Emoji Thumbnails for Community Channels (#12594) --- doc/DEPENDENCIES.md | 4 + package.json | 1 + src/mocks/js_dependencies.cljs | 4 + src/quo/react_native.cljs | 5 +- src/status_im/communities/core.cljs | 46 ++++-- src/status_im/data_store/chats.cljs | 1 + src/status_im/subs.cljs | 2 +- .../ui/components/chat_icon/screen.cljs | 53 +++++- .../ui/components/chat_icon/styles.cljs | 8 +- .../emoji_thumbnail/color_picker.cljs | 49 ++++++ .../components/emoji_thumbnail/preview.cljs | 14 ++ .../ui/components/emoji_thumbnail/styles.cljs | 156 ++++++++++++++++++ .../ui/components/emoji_thumbnail/utils.cljs | 13 ++ .../ui/components/profile_header/view.cljs | 4 +- src/status_im/ui/screens/chat/sheets.cljs | 6 +- .../ui/screens/chat/styles/main.cljs | 11 +- .../ui/screens/chat/toolbar_content.cljs | 4 +- src/status_im/ui/screens/chat/views.cljs | 16 +- .../screens/communities/channel_details.cljs | 7 +- .../ui/screens/communities/community.cljs | 4 +- .../community_emoji_thumbnail_picker.cljs | 48 ++++++ .../screens/communities/create_channel.cljs | 23 ++- .../ui/screens/home/views/inner_item.cljs | 8 +- src/status_im/ui/screens/screens.cljs | 5 + status-go-version.json | 6 +- translations/en.json | 1 + yarn.lock | 4 + 27 files changed, 447 insertions(+), 56 deletions(-) create mode 100644 src/status_im/ui/components/emoji_thumbnail/color_picker.cljs create mode 100644 src/status_im/ui/components/emoji_thumbnail/preview.cljs create mode 100644 src/status_im/ui/components/emoji_thumbnail/styles.cljs create mode 100644 src/status_im/ui/components/emoji_thumbnail/utils.cljs create mode 100644 src/status_im/ui/screens/communities/community_emoji_thumbnail_picker.cljs diff --git a/doc/DEPENDENCIES.md b/doc/DEPENDENCIES.md index cfc6e46430..663c857ea4 100644 --- a/doc/DEPENDENCIES.md +++ b/doc/DEPENDENCIES.md @@ -160,3 +160,7 @@ fixed because even bugfix version upgrade causes runtime errors with current ver ## "web3-utils": "^1.2.1" used for some abi encoding primitives + +## "rn-emoji-keyboard": "https://github.com/status-im/rn-emoji-keyboard" + +Used for taking emoji input, for custom emoji thumbnails for community channels \ No newline at end of file diff --git a/package.json b/package.json index 442ed3d30e..71e3e9a249 100644 --- a/package.json +++ b/package.json @@ -62,6 +62,7 @@ "react-native-svg": "^9.8.4", "react-native-touch-id": "^4.4.1", "react-native-webview": "git+https://github.com/status-im/react-native-webview.git#v11.3.0-status", + "rn-emoji-keyboard": "git+https://github.com/status-im/rn-emoji-keyboard.git#v0.4.2", "tdigest": "^0.1.1", "web3-utils": "^1.2.1" }, diff --git a/src/mocks/js_dependencies.cljs b/src/mocks/js_dependencies.cljs index 0dc48b62ce..94ff5fc0e5 100644 --- a/src/mocks/js_dependencies.cljs +++ b/src/mocks/js_dependencies.cljs @@ -203,6 +203,9 @@ (def push-notification-ios #js {}) +(def rn-emoji-keyboard + #js {:EmojiKeyboard #js {}}) + ;; Update i18n_resources.cljs (defn mock [module] (case module @@ -235,6 +238,7 @@ "react-native-navigation" react-native-navigation "@react-native-community/push-notification-ios" push-notification-ios "react-native-camera-kit" react-native-camera-kit + "rn-emoji-keyboard" rn-emoji-keyboard "./fleets.js" default-fleets "./chats.js" default-chats "../translations/ar.json" (js/JSON.parse (slurp "./translations/ar.json")) diff --git a/src/quo/react_native.cljs b/src/quo/react_native.cljs index 50b032e237..56396e966e 100644 --- a/src/quo/react_native.cljs +++ b/src/quo/react_native.cljs @@ -4,7 +4,10 @@ [quo.platform :as platform] ["react-native" :as rn] ["@react-native-community/hooks" :as hooks] - ["react-native-navigation" :refer (Navigation)])) + ["react-native-navigation" :refer (Navigation)] + ["rn-emoji-keyboard" :refer (EmojiKeyboard)])) + +(def emoji-keyboard (reagent/adapt-react-class EmojiKeyboard)) (def app-registry (.-AppRegistry rn)) diff --git a/src/status_im/communities/core.cljs b/src/status_im/communities/core.cljs index 771730d2c5..e8517282b1 100644 --- a/src/status_im/communities/core.cljs +++ b/src/status_im/communities/core.cljs @@ -12,7 +12,9 @@ [status-im.utils.universal-links.core :as universal-links] [status-im.ethereum.json-rpc :as json-rpc] [quo.design-system.colors :as colors] - [status-im.navigation :as navigation])) + [status-im.navigation :as navigation] + [status-im.utils.handlers :refer [>evt]] + [status-im.ui.components.emoji-thumbnail.styles :as emoji-thumbnail-styles])) (def crop-size 1000) @@ -259,12 +261,13 @@ {:events [::create-channel-confirmation-pressed]} [{:keys [db] :as cofx}] (let [community-id (fetch-community-id-input cofx) - {:keys [name description]} (get db :communities/create-channel)] + {:keys [name description color emoji]} (get db :communities/create-channel)] {::json-rpc/call [{:method "wakuext_createCommunityChat" :params [community-id {:identity {:display_name name - :color (rand-nth colors/chat-colors) - :description description} + :description description + :color color + :emoji emoji} :permissions {:access constants/community-channel-access-no-membership}}] :js-response true :on-success #(re-frame/dispatch [::community-channel-created %]) @@ -280,14 +283,14 @@ (fx/defn edit-channel {:events [::edit-channel-confirmation-pressed]} [{:keys [db] :as cofx}] - (let [{:keys [name description color community-id]} (get db :communities/create-channel) - chat-id (to-community-chat-id (get db :current-chat-id))] + (let [{:keys [name description color community-id emoji edit-channel-id]} (get db :communities/create-channel)] {::json-rpc/call [{:method "wakuext_editCommunityChat" :params [community-id - chat-id + edit-channel-id {:identity {:display_name name :description description - :color color} + :color color + :emoji emoji} :permissions {:access constants/community-channel-access-no-membership}}] :js-response true :on-success #(re-frame/dispatch [::community-channel-edited %]) @@ -330,17 +333,23 @@ (fx/merge cofx (reset-community-id-input id) (reset-channel-info) + (>evt [::create-channel-fields (rand-nth emoji-thumbnail-styles/emoji-picker-default-thumbnails)]) (navigation/open-modal :create-community-channel {:community-id id}))) (fx/defn edit-channel-pressed {:events [::edit-channel-pressed]} - [{:keys [db] :as cofx} community-id chat-name description color] - (fx/merge cofx - {:db (assoc db :communities/create-channel {:name chat-name - :description description - :color color - :community-id community-id})} - (navigation/open-modal :edit-community-channel nil))) + [{:keys [db] :as cofx} community-id chat-name description color emoji chat-id] + (let [{:keys [color emoji]} (if (string/blank? emoji) + (rand-nth emoji-thumbnail-styles/emoji-picker-default-thumbnails) + {:color color :emoji emoji})] + (fx/merge cofx + {:db (assoc db :communities/create-channel {:name chat-name + :description description + :color color + :community-id community-id + :emoji emoji + :edit-channel-id chat-id})} + (navigation/open-modal :edit-community-channel nil)))) (fx/defn community-created {:events [::community-created]} @@ -421,6 +430,11 @@ [{:keys [db]} field value] {:db (assoc-in db [:communities/create-channel field] value)}) +(fx/defn create-channel-fields + {:events [::create-channel-fields]} + [{:keys [db]} field-values] + {:db (update-in db [:communities/create-channel] merge field-values)}) + (fx/defn member-banned {:events [::member-banned]} [cofx response-js] @@ -567,4 +581,4 @@ :on-error #(log/error "failed to change community category" %)}]} (fx/merge cofx (navigation/navigate-back) - (remove-chat-from-category community-id id categoryID)))) \ No newline at end of file + (remove-chat-from-category community-id id categoryID)))) diff --git a/src/status_im/data_store/chats.cljs b/src/status_im/data_store/chats.cljs index 62e147f544..a51b972adf 100644 --- a/src/status_im/data_store/chats.cljs +++ b/src/status_im/data_store/chats.cljs @@ -75,6 +75,7 @@ (-> {:name (.-name chat) :description (.-description chat) :color (.-color chat) + :emoji (.-emoji chat) :timestamp (.-timestamp chat) :alias (.-alias chat) :identicon (.-identicon chat) diff --git a/src/status_im/subs.cljs b/src/status_im/subs.cljs index 7f877a2545..bdcbd2ec83 100644 --- a/src/status_im/subs.cljs +++ b/src/status_im/subs.cljs @@ -958,7 +958,7 @@ :chats/current-chat-chat-view :<- [:chats/current-chat] (fn [current-chat] - (select-keys current-chat [:chat-id :show-input? :group-chat :admins :invitation-admin :public? :chat-type :color :chat-name :synced-to :synced-from :community-id]))) + (select-keys current-chat [:chat-id :show-input? :group-chat :admins :invitation-admin :public? :chat-type :color :chat-name :synced-to :synced-from :community-id :emoji]))) (re-frame/reg-sub :current-chat/metadata diff --git a/src/status_im/ui/components/chat_icon/screen.cljs b/src/status_im/ui/components/chat_icon/screen.cljs index be3aeefee9..0965f1ffa5 100644 --- a/src/status_im/ui/components/chat_icon/screen.cljs +++ b/src/status_im/ui/components/chat_icon/screen.cljs @@ -37,14 +37,31 @@ (let [photo-path @(re-frame.core/subscribe [:chats/photo-path chat-id])] [photos/photo photo-path styles]))]) +(defn emoji-chat-icon [emoji styles] + (when-not (string/blank? emoji) + [react/view (:default-chat-icon styles) + [react/text {:style (:default-chat-icon-text styles)} emoji]])) + +(defn emoji-chat-icon-view + [chat-id group-chat name emoji styles] + [react/view (:container styles) + (if group-chat + (if (string/blank? emoji) + [default-chat-icon name styles] + [emoji-chat-icon emoji styles]) + (let [photo-path @(re-frame.core/subscribe [:chats/photo-path chat-id])] + [photos/photo photo-path styles]))]) + (defn chat-icon-view-toolbar - [chat-id group-chat name color] - [chat-icon-view chat-id group-chat name + [chat-id group-chat name color emoji] + [emoji-chat-icon-view chat-id group-chat name emoji {:container styles/container-chat-toolbar :size 36 :chat-icon styles/chat-icon-chat-toolbar :default-chat-icon (styles/default-chat-icon-chat-toolbar color) - :default-chat-icon-text (styles/default-chat-icon-text 36)}]) + :default-chat-icon-text (if (string/blank? emoji) + (styles/default-chat-icon-text 36) + (styles/emoji-chat-icon-text 36))}]) (defn chat-icon-view-chat-list [chat-id group-chat name color] @@ -64,6 +81,17 @@ :default-chat-icon (styles/default-chat-icon-chat-list color) :default-chat-icon-text (styles/default-chat-icon-text 40)}]) +(defn emoji-chat-icon-view-chat-sheet + [chat-id group-chat name color emoji] + [emoji-chat-icon-view chat-id group-chat name emoji + {:container styles/container-chat-list + :size 40 + :chat-icon styles/chat-icon-chat-list + :default-chat-icon (styles/default-chat-icon-chat-list color) + :default-chat-icon-text (if (string/blank? emoji) + (styles/default-chat-icon-text 40) + (styles/emoji-chat-icon-text 40))}]) + (defn custom-icon-view-list [name color & [size]] [react/view (styles/container-list-size (or size 40)) @@ -94,16 +122,29 @@ (if-not (string/blank? photo-path) [photos/photo photo-path styles])))) -(defn profile-icon-view [photo-path name color edit? size override-styles] +(defn emoji-chat-intro-icon-view [icon-text chat-id group-chat emoji styles] + (if group-chat + (if (string/blank? emoji) + [default-chat-icon icon-text styles] + [emoji-chat-icon emoji styles]) + (let [photo-path @(re-frame.core/subscribe [:chats/photo-path chat-id])] + (if-not (string/blank? photo-path) + [photos/photo photo-path styles])))) + +(defn profile-icon-view [photo-path name color emoji edit? size override-styles] (let [styles (merge {:container {:width size :height size} :size size :chat-icon styles/chat-icon-profile :default-chat-icon (styles/default-chat-icon-profile color size) - :default-chat-icon-text (styles/default-chat-icon-text size)} override-styles)] + :default-chat-icon-text (if (string/blank? emoji) + (styles/default-chat-icon-text size) + (styles/emoji-chat-icon-text size))} override-styles)] [react/view (:container styles) (if (and photo-path (seq photo-path)) [photos/photo photo-path styles] - [default-chat-icon name styles]) + (if (string/blank? emoji) + [default-chat-icon name styles] + [emoji-chat-icon emoji styles])) (when edit? [react/view {:style (styles/chat-icon-profile-edit)} [icons/tiny-icon :tiny-icons/tiny-edit {:color colors/white-persist}]])])) diff --git a/src/status_im/ui/components/chat_icon/styles.cljs b/src/status_im/ui/components/chat_icon/styles.cljs index ab8bce6fcc..18ead670ea 100644 --- a/src/status_im/ui/components/chat_icon/styles.cljs +++ b/src/status_im/ui/components/chat_icon/styles.cljs @@ -1,5 +1,6 @@ (ns status-im.ui.components.chat-icon.styles - (:require [quo.design-system.colors :as colors])) + (:require [quo.design-system.colors :as colors] + [status-im.ui.components.emoji-thumbnail.utils :as emoji-utils])) (defn default-chat-icon [color] {:margin 0 @@ -34,6 +35,11 @@ :font-size (/ size 2) :line-height size}) +(defn emoji-chat-icon-text [size] + {:font-size (emoji-utils/emoji-font-size size) + :line-height size + :margin-top (emoji-utils/emoji-top-margin-for-vertical-alignment size)}) ;; Required for vertical alignment bug - Check function defination for more info + (def chat-icon {:margin 4 :border-radius 20 diff --git a/src/status_im/ui/components/emoji_thumbnail/color_picker.cljs b/src/status_im/ui/components/emoji_thumbnail/color_picker.cljs new file mode 100644 index 0000000000..aa36508667 --- /dev/null +++ b/src/status_im/ui/components/emoji_thumbnail/color_picker.cljs @@ -0,0 +1,49 @@ +(ns status-im.ui.components.emoji-thumbnail.color-picker + (:require [quo.react-native :as rn] + [status-im.ui.components.emoji-thumbnail.styles :as styles])) + +(def emoji-picker-colors-row1 + [{:name "red" :color "#F5A3A3" :key "1"} + {:name "pink" :color "#F5A3BF" :key "2"} + {:name "magenta" :color "#E9A3F5" :key "3"} + {:name "purple" :color "#C0A3F5" :key "4"} + {:name "indigo" :color "#A3B0F5" :key "5"} + {:name "blue" :color "#A3C2F5" :key "6"} + {:name "cyan" :color "#A3DCF5" :key "7"}]) + +(def emoji-picker-colors-row2 + [{:name "teal" :color "#A3ECF5" :key "8"} + {:name "mint" :color "#A3F5E2" :key "9"} + {:name "green" :color "#A3F5BA" :key "10"} + {:name "moss" :color "#CFF5A3" :key "11"} + {:name "lemon" :color "#EEF5A3" :key "12"} + {:name "yellow" :color "#F5F5A3" :key "13"}]) + +(def emoji-picker-colors-row3 + [{:name "honey" :color "#F5E4A3" :key "14"} + {:name "orange" :color "#F5D7A3" :key "15"} + {:name "peach" :color "#F5B6A3" :key "16"} + {:name "brown" :color "#E0C2B8" :key "17"} + {:name "grey" :color "#CCCCCC" :key "18"} + {:name "dove" :color "#DAE2E7" :key "19"} + {:name "white" :color "#FFFFFF" :key "20"}]) + +(defn colors-row [color-circle container-style colors] + [rn/view {:style container-style :accessibility-label :colors-row} + (for [x colors] + [color-circle x])]) + +(defn color-picker-section [color-circle] + [:<> + [colors-row ;; Row - 1st + color-circle + (merge styles/emoji-picker-color-row-container styles/emoji-picker-row1-style) + emoji-picker-colors-row1] + [colors-row ;; Row - 2nd + color-circle + (merge styles/emoji-picker-color-row-container styles/emoji-picker-row2-style) + emoji-picker-colors-row2] + [colors-row ;; Row - 3rd + color-circle + (merge styles/emoji-picker-color-row-container styles/emoji-picker-row3-style) + emoji-picker-colors-row3]]) diff --git a/src/status_im/ui/components/emoji_thumbnail/preview.cljs b/src/status_im/ui/components/emoji_thumbnail/preview.cljs new file mode 100644 index 0000000000..1a70d8f246 --- /dev/null +++ b/src/status_im/ui/components/emoji_thumbnail/preview.cljs @@ -0,0 +1,14 @@ +(ns status-im.ui.components.emoji-thumbnail.preview + (:require [status-im.ui.components.react :as react] + [status-im.ui.components.emoji-thumbnail.styles :as styles] + [clojure.string :as string])) + +(defn emoji-thumbnail [emoji color size] + (when-not (string/blank? emoji) + [react/view (styles/emoji-thumbnail-icon color size) + [react/text {:style (styles/emoji-thumbnail-icon-text size)} emoji]])) + +(defn emoji-thumbnail-touchable [emoji color size func] + (when-not (string/blank? emoji) + [react/touchable-opacity {:on-press func} + [emoji-thumbnail emoji color size]])) diff --git a/src/status_im/ui/components/emoji_thumbnail/styles.cljs b/src/status_im/ui/components/emoji_thumbnail/styles.cljs new file mode 100644 index 0000000000..cf116c0ab7 --- /dev/null +++ b/src/status_im/ui/components/emoji_thumbnail/styles.cljs @@ -0,0 +1,156 @@ +(ns status-im.ui.components.emoji-thumbnail.styles + (:require [quo.design-system.colors :as colors] + [status-im.ui.components.emoji-thumbnail.utils :as emoji-utils])) + +(defn emoji-thumbnail-icon [color size] + {:width size + :height size + :align-items :center + :justify-content :center + :border-radius (/ size 2) + :background-color color + :border-width 0.5 + :border-color "rgba(0,0,0,0.1)" + :accessibility-label :thumbnail-container-circle}) + +(defn emoji-thumbnail-icon-text [size] + {:font-size (emoji-utils/emoji-font-size size) + :line-height size + :accessibility-label :thumbnail-emoji + :margin-top (emoji-utils/emoji-top-margin-for-vertical-alignment size)}) ;; Required for vertical alignment bug - Check function defination for more info + + +;; Styles Related to Emoji Thumbnail Picker + +(def emoji-thumbnail-preview-size 60) + +(def emoji-picker-upper-components-size 350) + +(defn emoji-picker-gray-color [] + (if (colors/dark?) "#c3c3bc99" "#3C3C4399")) + +(defn emoji-picker-category-container [] + (if (colors/dark?) "#110d0a" "#EEF2F5")) + +(defn emoji-picker-active-category-container [] + (if (colors/dark?) "#87877f33" "#78788033")) + +(defn emoji-picker-active-category-color [] + (if (colors/dark?) "#bbbbbb" "#000000")) + +(def emoji-thumbnail-preview + {:margin-top 16 + :margin-bottom 16 + :align-items :center + :justify-content :center + :accessibility-label :emoji-preview}) + +(defn emoji-picker-keyboard-container [] + {:border-radius 0 + :background-color (colors/get-color :ui-background)}) + +(defn emoji-picker-search-bar [] + {:border-radius 10 + :height 36 + :background-color (:ui-01 @colors/theme)}) + +(defn emoji-picker-search-bar-text [] + {:color (emoji-picker-gray-color)}) + +(defn emoji-picker-header [] + {:font-size 13 + :color (emoji-picker-gray-color) + :font-weight "600" + :margin-top 7 + :margin-bottom 0}) + +(defn emoji-keyboard [func] + {:onEmojiSelected func + :emojiSize 23 + :containerStyles (emoji-picker-keyboard-container) + :categoryPosition "floating" + :categoryContainerColor (emoji-picker-category-container) + :activeCategoryColor (emoji-picker-active-category-color) + :activeCategoryContainerColor (emoji-picker-active-category-container) + :categoryColor (emoji-picker-gray-color) + :enableSearchBar true + :searchBarTextStyles (emoji-picker-search-bar-text) + :searchBarStyles (emoji-picker-search-bar) + :searchBarPlaceholderColor (emoji-picker-gray-color) + :closeSearchColor (emoji-picker-gray-color) + :headerStyles (emoji-picker-header) + :disabledCategory ["symbols"]}) + +(def emoji-picker-color-row-container + {:flex-direction "row" + :justify-content "space-around" + :flex-grow 1}) + +(def emoji-picker-row1-style + {:margin-top 10}) + +(def emoji-picker-row2-style + {:margin-top 10 + :margin-bottom 10 + :margin-left 25 + :margin-right 25}) + +(def emoji-picker-row3-style + {:margin-bottom 10}) + +(defn emoji-picker-color-border [item_color color-selected?] + {:height 44 + :width 44 + :border-radius 22 + :border-width 2 + :border-color (if color-selected? item_color "#00000000") + :align-items :center + :justify-content :center}) + +(defn emoji-picker-color [item_color] + {:height 36 + :width 36 + :border-radius 18 + :border-width 0.5 + :background-color item_color + :border-color "rgba(0,0,0,0.1)"}) + +(def emoji-picker-default-thumbnails + [{:emoji "🐺" :color "#CCCCCC"} + {:emoji "πŸ†" :color "#F5E4A3"} + {:emoji "πŸ¦€" :color "#F5A3A3"} + {:emoji "🍁" :color "#F5D7A3"} + {:emoji "🐳" :color "#A3DCF5"} + {:emoji "πŸ¦•" :color "#CFF5A3"} + {:emoji "πŸ₯" :color "#F5F5A3"} + {:emoji "πŸ‡" :color "#DAE2E7"} + {:emoji "πŸ’" :color "#E0C2B8"} + {:emoji "🦍" :color "#CCCCCC"} + {:emoji "🀠" :color "#E0C2B8"} + {:emoji "πŸ‘Ύ" :color "#F5A3BF"} + {:emoji "πŸ•΄οΈ" :color "#CCCCCC"} + {:emoji "πŸ’ƒ" :color "#F5A3A3"} + {:emoji "🦹" :color "#E9A3F5"} + {:emoji "πŸ•" :color "#F5D7A3"} + {:emoji "πŸ¦‡" :color "#C0A3F5"} + {:emoji "🦜" :color "#F5A3A3"} + {:emoji "🐒" :color "#CFF5A3"} + {:emoji "🦎" :color "#CFF5A3"} + {:emoji "🐊" :color "#CFF5A3"} + {:emoji "πŸ¦‹" :color "#F5B6A3"} + {:emoji "πŸ•ΈοΈ" :color "#CCCCCC"} + {:emoji "🦈" :color "#A3DCF5"} + {:emoji "☘️" :color "#CFF5A3"} + {:emoji "πŸ‡" :color "#E9A3F5"} + {:emoji "🍎" :color "#F5B6A3"} + {:emoji "πŸ₯₯" :color "#E0C2B8"} + {:emoji "πŸ§€" :color "#F5E4A3"} + {:emoji "πŸ₯ͺ" :color "#F5D7A3"} + {:emoji "πŸ₯£" :color "#A3DCF5"} + {:emoji "🍜" :color "#F5B6A3"} + {:emoji "🧁" :color "#A3DCF5"} + {:emoji "β˜•" :color "#DAE2E7"} + {:emoji "🍷" :color "#F5A3A3"} + {:emoji "πŸš†" :color "#A3DCF5"} + {:emoji "πŸ‘“" :color "#CCCCCC"} + {:emoji "🎢" :color "#A3DCF5"}]) diff --git a/src/status_im/ui/components/emoji_thumbnail/utils.cljs b/src/status_im/ui/components/emoji_thumbnail/utils.cljs new file mode 100644 index 0000000000..bf8b97c581 --- /dev/null +++ b/src/status_im/ui/components/emoji_thumbnail/utils.cljs @@ -0,0 +1,13 @@ +(ns status-im.ui.components.emoji-thumbnail.utils + (:require [status-im.utils.platform :as platform])) + +(defn emoji-font-size [container_size] + (int (* (/ container_size 10) 6))) + +;; React Native Bug: Till version 0.65 React Native has a bug. It doesn't center text/emoji +;; inside the container(In Android & Web Only). Even with the textAlign: "center" and other properties. +;; So this top margin is required so that emoji will center in the emoji circle. +;; More Info: https://github.com/facebook/react-native/issues/32198 +;; TODO: Remove this top margin, if future updates of react-native fix this issue. +(defn emoji-top-margin-for-vertical-alignment [container_size] + (if platform/android? (- (int (/ container_size 20))) 0)) diff --git a/src/status_im/ui/components/profile_header/view.cljs b/src/status_im/ui/components/profile_header/view.cljs index 39932dd639..f1fb0cedda 100644 --- a/src/status_im/ui/components/profile_header/view.cljs +++ b/src/status_im/ui/components/profile_header/view.cljs @@ -37,7 +37,7 @@ (when-not minimized {:padding-top subtitle-margin}))) -(defn extended-header [{:keys [title photo color subtitle subtitle-icon on-edit on-press monospace bottom-separator] +(defn extended-header [{:keys [title photo color subtitle subtitle-icon on-edit on-press monospace bottom-separator emoji] :or {bottom-separator true}}] (fn [{:keys [animation minimized]}] (let [wrapper (if on-press @@ -55,7 +55,7 @@ (into editable [[animated/view {:pointer-events :box-none} [chat-icon.screen/profile-icon-view - photo title color (and (not minimized) on-edit) + photo title color emoji (and (not minimized) on-edit) (if minimized avatar-minimized-size avatar-extended-size) nil]]]) [animated/view {:style (header-text) diff --git a/src/status_im/ui/screens/chat/sheets.cljs b/src/status_im/ui/screens/chat/sheets.cljs index 76aee6e095..d57450e49b 100644 --- a/src/status_im/ui/screens/chat/sheets.cljs +++ b/src/status_im/ui/screens/chat/sheets.cljs @@ -77,13 +77,13 @@ :on-press #(re-frame/dispatch [:chat.ui/remove-chat-pressed chat-id])}]])) (defn community-chat-accents [] - (fn [{:keys [chat-id group-chat chat-name color]}] + (fn [{:keys [chat-id group-chat chat-name color emoji]}] [react/view [quo/list-item {:theme :accent :title chat-name - :icon [chat-icon/chat-icon-view-chat-sheet - chat-id group-chat chat-name color] + :icon [chat-icon/emoji-chat-icon-view-chat-sheet + chat-id group-chat chat-name color emoji] :subtitle (i18n/label :t/view-details) :chevron true :accessibility-label :view-community-channel-details diff --git a/src/status_im/ui/screens/chat/styles/main.cljs b/src/status_im/ui/screens/chat/styles/main.cljs index f0be27fcbc..c6f0256996 100644 --- a/src/status_im/ui/screens/chat/styles/main.cljs +++ b/src/status_im/ui/screens/chat/styles/main.cljs @@ -1,5 +1,6 @@ (ns status-im.ui.screens.chat.styles.main - (:require [quo.design-system.colors :as colors])) + (:require [quo.design-system.colors :as colors] + [status-im.ui.components.emoji-thumbnail.utils :as emoji-utils])) (def toolbar-container {:flex 1 @@ -65,7 +66,9 @@ :align-items :center :justify-content :center :border-radius (/ diameter 2) - :background-color color}) + :background-color color + :border-width 0.5 + :border-color "rgba(0,0,0,0.1)"}) (def intro-header-icon-text {:color colors/white @@ -74,6 +77,10 @@ :opacity 0.8 :line-height 72}) +(defn emoji-intro-header-icon-text [size] + {:font-size (emoji-utils/emoji-font-size size) + :margin-top (emoji-utils/emoji-top-margin-for-vertical-alignment size)}) ;; Required for vertical alignment bug - Check function defination for more info + (defn intro-header-chat-name [] {:font-size 22 :font-weight "700" diff --git a/src/status_im/ui/screens/chat/toolbar_content.cljs b/src/status_im/ui/screens/chat/toolbar_content.cljs index 3d5162ac96..70138b06b7 100644 --- a/src/status_im/ui/screens/chat/toolbar_content.cljs +++ b/src/status_im/ui/screens/chat/toolbar_content.cljs @@ -32,12 +32,12 @@ (i18n/label :chat-is-not-a-contact))]])) (defn toolbar-content-view-inner [chat-info] - (let [{:keys [group-chat invitation-admin color chat-id contacts chat-type chat-name public?]} + (let [{:keys [group-chat invitation-admin color chat-id contacts chat-type chat-name public? emoji]} chat-info] [react/view {:style st/toolbar-container} [react/view {:margin-right 10} [react/touchable-highlight {:on-press #(when-not group-chat (re-frame/dispatch [:chat.ui/show-profile chat-id]))} - [chat-icon.screen/chat-icon-view-toolbar chat-id group-chat chat-name color]]] + [chat-icon.screen/chat-icon-view-toolbar chat-id group-chat chat-name color emoji]]] [react/view {:style st/chat-name-view} (if group-chat [react/text {:style st/chat-name-text diff --git a/src/status_im/ui/screens/chat/views.cljs b/src/status_im/ui/screens/chat/views.cljs index 7df05ae998..c3892cf408 100644 --- a/src/status_im/ui/screens/chat/views.cljs +++ b/src/status_im/ui/screens/chat/views.cljs @@ -67,16 +67,19 @@ contact-name color loading-messages? - no-messages?]}] + no-messages? + emoji]}] [react/view {:style (style/intro-header-container loading-messages? no-messages?) :accessibility-label :history-chat} ;; Icon section [react/view {:style {:margin-top 42 :margin-bottom 24}} - [chat-icon.screen/chat-intro-icon-view - chat-name chat-id group-chat + [chat-icon.screen/emoji-chat-intro-icon-view + chat-name chat-id group-chat emoji {:default-chat-icon (style/intro-header-icon 120 color) - :default-chat-icon-text style/intro-header-icon-text + :default-chat-icon-text (if (string/blank? emoji) + style/intro-header-icon-text + (style/emoji-intro-header-icon-text 120)) :size 120}]] ;; Chat title section [react/text {:style (style/intro-header-chat-name)} @@ -106,7 +109,7 @@ chat-type synced-to color chat-id chat-name - public?]} + public? emoji]} no-messages] [react/touchable-without-feedback {:style {:flex 1 @@ -122,7 +125,8 @@ :public? public? :color color :loading-messages? (not (pos? synced-to)) - :no-messages? no-messages}] + :no-messages? no-messages + :emoji emoji}] (if group-chat [chat-intro opts] [chat-intro-one-to-one opts]))]) diff --git a/src/status_im/ui/screens/communities/channel_details.cljs b/src/status_im/ui/screens/communities/channel_details.cljs index d88e456ee9..68165be30c 100644 --- a/src/status_im/ui/screens/communities/channel_details.cljs +++ b/src/status_im/ui/screens/communities/channel_details.cljs @@ -11,7 +11,7 @@ (let [{:keys [chat-id]} (evt evt [::communities/create-channel-field :color item-color])} + [rn/view {:style (styles/emoji-picker-color-border item-color color-selected?)} + [rn/view {:style (styles/emoji-picker-color item-color)}]]])) + +(defn update-emoji [emoji] + (when-not (str/blank? emoji) + (>evt [::communities/create-channel-field :emoji emoji]))) + +(defn emoji-keyboard-section [] + (let [{:keys [width height]} ( width height) 400 (- height styles/emoji-picker-upper-components-size))] + [rn/view {:style {:height keyboard_height} :accessibility-label :emoji-keyboard-container} + [rn/emoji-keyboard (styles/emoji-keyboard #(update-emoji (.-emoji ^js %)))]])) + +(defn view [] + [kb-presentation/keyboard-avoiding-view {:style {:flex 1}} + [rn/scroll-view + [quo/separator] + [thumbnail-preview-section] + [color-picker/color-picker-section color-circle] + [emoji-keyboard-section]]]) + diff --git a/src/status_im/ui/screens/communities/create_channel.cljs b/src/status_im/ui/screens/communities/create_channel.cljs index 13f3c3a8c0..bcb2889d45 100644 --- a/src/status_im/ui/screens/communities/create_channel.cljs +++ b/src/status_im/ui/screens/communities/create_channel.cljs @@ -8,7 +8,9 @@ [status-im.utils.debounce :as debounce] [status-im.utils.handlers :refer [>evt evt [:open-modal :community-emoji-thumbnail-picker nil])]])) + (defn form [] (let [{:keys [name description]} ( + [thumbnail] [rn/view {:padding-horizontal 16} [quo/text-input {:placeholder (i18n/label :t/name-your-channel-placeholder) :on-change-text #(>evt [::communities/create-channel-field :name %]) :default-value name - :auto-focus true}]] - [quo/separator {:style {:margin-vertical 10}}] + :auto-focus false}]] + [quo/separator {:style {:margin-vertical 16}}] [rn/view {:padding-horizontal 16} [create/countable-label {:label (i18n/label :t/description) :text description @@ -42,6 +52,7 @@ (defn view [] (let [{:keys [name description]} ( [chat-item-icon muted (and group-chat (not public?)) (and group-chat public?)] - [chat-icon.screen/chat-icon-view chat-id group-chat chat-name + [chat-icon.screen/emoji-chat-icon-view chat-id group-chat chat-name emoji {:container (assoc chat-icon.styles/container-chat-list :top 12 :left 16 :position :absolute) :size 40 :chat-icon chat-icon.styles/chat-icon-chat-list :default-chat-icon (chat-icon.styles/default-chat-icon-chat-list color) - :default-chat-icon-text (chat-icon.styles/default-chat-icon-text 40)}] + :default-chat-icon-text (if (string/blank? emoji) + (chat-icon.styles/default-chat-icon-text 40) + (chat-icon.styles/emoji-chat-icon-text 40))}] [chat-item-title chat-id muted group-chat chat-name] [react/text {:style styles/datetime-text :number-of-lines 1 diff --git a/src/status_im/ui/screens/screens.cljs b/src/status_im/ui/screens/screens.cljs index 0ff4421039..5bfb1fec94 100644 --- a/src/status_im/ui/screens/screens.cljs +++ b/src/status_im/ui/screens/screens.cljs @@ -30,6 +30,7 @@ [status-im.ui.screens.communities.profile :as community.profile] [status-im.ui.screens.communities.edit :as community.edit] [status-im.ui.screens.communities.create-channel :as create-channel] + [status-im.ui.screens.communities.community-emoji-thumbnail-picker :as community-emoji-thumbnail-picker] [status-im.ui.screens.communities.membership :as membership] [status-im.ui.screens.communities.members :as members] [status-im.ui.screens.communities.requests-to-join :as requests-to-join] @@ -269,6 +270,10 @@ :insets {:bottom true} :options {:topBar {:title {:text (i18n/label :t/create-channel-title)}}} :component create-channel/view} + {:name :community-emoji-thumbnail-picker + :insets {:bottom true} + :options {:topBar {:title {:text (i18n/label :t/community-emoji-thumbnail-title)}}} + :component community-emoji-thumbnail-picker/view} {:name :create-community-category :insets {:bottom true} :options {:topBar {:title {:text (i18n/label :t/new-category)}}} diff --git a/status-go-version.json b/status-go-version.json index 087b077e31..e1a4a89772 100644 --- a/status-go-version.json +++ b/status-go-version.json @@ -3,7 +3,7 @@ "_comment": "Instead use: scripts/update-status-go.sh ", "owner": "status-im", "repo": "status-go", - "version": "v0.89.4", - "commit-sha1": "5e83d8e95e38e99ab76d236a28f959af9e93c27f", - "src-sha256": "01zqrbqgvsrc55xs3qd8wwcvswqvl7i9xkw5ihkzsp924s326m15" + "version": "v0.89.5", + "commit-sha1": "c3ced098390f3d4e8d4850d9c0bf6e7dbd627c20", + "src-sha256": "10bpf87sshji6azf9vpmx90vbgwf2c8agcrcvc7x5qrqkpnbmd9p" } diff --git a/translations/en.json b/translations/en.json index 5e88816d40..12e4fad174 100644 --- a/translations/en.json +++ b/translations/en.json @@ -196,6 +196,7 @@ "create-channel-title": "New channel", "edit-channel-title": "Edit channel", "community-thumbnail-image": "Thumbnail image", + "community-emoji-thumbnail-title": "Thumbnail", "community-thumbnail-upload": "Upload", "community-image-take": "Take a photo", "community-image-pick": "Pick an image", diff --git a/yarn.lock b/yarn.lock index 8ae1dba141..7f99bfe2dd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7094,6 +7094,10 @@ ripemd160@^2.0.0, ripemd160@^2.0.1: hash-base "^3.0.0" inherits "^2.0.1" +"rn-emoji-keyboard@git+https://github.com/status-im/rn-emoji-keyboard.git#v0.4.2": + version "0.4.2" + resolved "git+https://github.com/status-im/rn-emoji-keyboard.git#969814269cc51fae2c1fd0375e8509fa066cdc7f" + "rn-snoopy@git+https://github.com/status-im/rn-snoopy.git#v2.0.2-status": version "2.0.2" resolved "git+https://github.com/status-im/rn-snoopy.git#f23dc13469c6c2a694649f658cdc1d1eaf8def64"