status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Custom Emoji Thumbnails for Community Channels (#12594)

This commit is contained in:
Parvesh Monu 2021-10-04 19:08:39 +05:30 committed by GitHub
parent 1bbebc9055
commit eb5711e9bc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 447 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
doc/DEPENDENCIES.md
View File

@ -160,3 +160,7 @@ fixed because even bugfix version upgrade causes runtime errors with current ver
## "web3-utils": "^1.2.1" ## "web3-utils": "^1.2.1"
used for some abi encoding primitives 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

1
package.json
View File

@ -62,6 +62,7 @@
"react-native-svg": "^9.8.4", "react-native-svg": "^9.8.4",
"react-native-touch-id": "^4.4.1", "react-native-touch-id": "^4.4.1",
"react-native-webview": "git+https://github.com/status-im/react-native-webview.git#v11.3.0-status", "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", "tdigest": "^0.1.1",
"web3-utils": "^1.2.1" "web3-utils": "^1.2.1"
}, },

4
src/mocks/js_dependencies.cljs
View File

@ -203,6 +203,9 @@
(def push-notification-ios #js {}) (def push-notification-ios #js {})
(def rn-emoji-keyboard
#js {:EmojiKeyboard #js {}})
;; Update i18n_resources.cljs ;; Update i18n_resources.cljs
(defn mock [module] (defn mock [module]
(case module (case module
@ -235,6 +238,7 @@
"react-native-navigation" react-native-navigation "react-native-navigation" react-native-navigation
"@react-native-community/push-notification-ios" push-notification-ios "@react-native-community/push-notification-ios" push-notification-ios
"react-native-camera-kit" react-native-camera-kit "react-native-camera-kit" react-native-camera-kit
"rn-emoji-keyboard" rn-emoji-keyboard
"./fleets.js" default-fleets "./fleets.js" default-fleets
"./chats.js" default-chats "./chats.js" default-chats
"../translations/ar.json" (js/JSON.parse (slurp "./translations/ar.json")) "../translations/ar.json" (js/JSON.parse (slurp "./translations/ar.json"))

5
src/quo/react_native.cljs
View File

@ -4,7 +4,10 @@
[quo.platform :as platform] [quo.platform :as platform]
["react-native" :as rn] ["react-native" :as rn]
["@react-native-community/hooks" :as hooks] ["@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)) (def app-registry (.-AppRegistry rn))

36
src/status_im/communities/core.cljs
View File

@ -12,7 +12,9 @@
[status-im.utils.universal-links.core :as universal-links] [status-im.utils.universal-links.core :as universal-links]
[status-im.ethereum.json-rpc :as json-rpc] [status-im.ethereum.json-rpc :as json-rpc]
[quo.design-system.colors :as colors] [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) (def crop-size 1000)
@ -259,12 +261,13 @@
{:events [::create-channel-confirmation-pressed]} {:events [::create-channel-confirmation-pressed]}
[{:keys [db] :as cofx}] [{:keys [db] :as cofx}]
(let [community-id (fetch-community-id-input 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" {::json-rpc/call [{:method "wakuext_createCommunityChat"
:params [community-id :params [community-id
{:identity {:display_name name {: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}}] :permissions {:access constants/community-channel-access-no-membership}}]
:js-response true :js-response true
:on-success #(re-frame/dispatch [::community-channel-created %]) :on-success #(re-frame/dispatch [::community-channel-created %])
@ -280,14 +283,14 @@
(fx/defn edit-channel (fx/defn edit-channel
{:events [::edit-channel-confirmation-pressed]} {:events [::edit-channel-confirmation-pressed]}
[{:keys [db] :as cofx}] [{:keys [db] :as cofx}]
(let [{:keys [name description color community-id]} (get db :communities/create-channel) (let [{:keys [name description color community-id emoji edit-channel-id]} (get db :communities/create-channel)]
chat-id (to-community-chat-id (get db :current-chat-id))]
{::json-rpc/call [{:method "wakuext_editCommunityChat" {::json-rpc/call [{:method "wakuext_editCommunityChat"
:params [community-id :params [community-id
chat-id edit-channel-id
{:identity {:display_name name {:identity {:display_name name
:description description :description description
:color color} :color color
:emoji emoji}
:permissions {:access constants/community-channel-access-no-membership}}] :permissions {:access constants/community-channel-access-no-membership}}]
:js-response true :js-response true
:on-success #(re-frame/dispatch [::community-channel-edited %]) :on-success #(re-frame/dispatch [::community-channel-edited %])
@ -330,17 +333,23 @@
(fx/merge cofx (fx/merge cofx
(reset-community-id-input id) (reset-community-id-input id)
(reset-channel-info) (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}))) (navigation/open-modal :create-community-channel {:community-id id})))
(fx/defn edit-channel-pressed (fx/defn edit-channel-pressed
{:events [::edit-channel-pressed]} {:events [::edit-channel-pressed]}
[{:keys [db] :as cofx} community-id chat-name description color] [{: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 (fx/merge cofx
{:db (assoc db :communities/create-channel {:name chat-name {:db (assoc db :communities/create-channel {:name chat-name
:description description :description description
:color color :color color
:community-id community-id})} :community-id community-id
(navigation/open-modal :edit-community-channel nil))) :emoji emoji
:edit-channel-id chat-id})}
(navigation/open-modal :edit-community-channel nil))))
(fx/defn community-created (fx/defn community-created
{:events [::community-created]} {:events [::community-created]}
@ -421,6 +430,11 @@
[{:keys [db]} field value] [{:keys [db]} field value]
{:db (assoc-in db [:communities/create-channel 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 (fx/defn member-banned
{:events [::member-banned]} {:events [::member-banned]}
[cofx response-js] [cofx response-js]

1
src/status_im/data_store/chats.cljs
View File

@ -75,6 +75,7 @@
(-> {:name (.-name chat) (-> {:name (.-name chat)
:description (.-description chat) :description (.-description chat)
:color (.-color chat) :color (.-color chat)
:emoji (.-emoji chat)
:timestamp (.-timestamp chat) :timestamp (.-timestamp chat)
:alias (.-alias chat) :alias (.-alias chat)
:identicon (.-identicon chat) :identicon (.-identicon chat)

2
src/status_im/subs.cljs
View File

@ -958,7 +958,7 @@
:chats/current-chat-chat-view :chats/current-chat-chat-view
:<- [:chats/current-chat] :<- [:chats/current-chat]
(fn [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 (re-frame/reg-sub
:current-chat/metadata :current-chat/metadata

53
src/status_im/ui/components/chat_icon/screen.cljs
View File

@ -37,14 +37,31 @@
(let [photo-path @(re-frame.core/subscribe [:chats/photo-path chat-id])] (let [photo-path @(re-frame.core/subscribe [:chats/photo-path chat-id])]
[photos/photo photo-path styles]))]) [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 (defn chat-icon-view-toolbar
[chat-id group-chat name color] [chat-id group-chat name color emoji]
[chat-icon-view chat-id group-chat name [emoji-chat-icon-view chat-id group-chat name emoji
{:container styles/container-chat-toolbar {:container styles/container-chat-toolbar
:size 36 :size 36
:chat-icon styles/chat-icon-chat-toolbar :chat-icon styles/chat-icon-chat-toolbar
:default-chat-icon (styles/default-chat-icon-chat-toolbar color) :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 (defn chat-icon-view-chat-list
[chat-id group-chat name color] [chat-id group-chat name color]
@ -64,6 +81,17 @@
:default-chat-icon (styles/default-chat-icon-chat-list color) :default-chat-icon (styles/default-chat-icon-chat-list color)
:default-chat-icon-text (styles/default-chat-icon-text 40)}]) :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 (defn custom-icon-view-list
[name color & [size]] [name color & [size]]
[react/view (styles/container-list-size (or size 40)) [react/view (styles/container-list-size (or size 40))
@ -94,16 +122,29 @@
(if-not (string/blank? photo-path) (if-not (string/blank? photo-path)
[photos/photo photo-path styles])))) [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} (let [styles (merge {:container {:width size :height size}
:size size :size size
:chat-icon styles/chat-icon-profile :chat-icon styles/chat-icon-profile
:default-chat-icon (styles/default-chat-icon-profile color size) :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) [react/view (:container styles)
(if (and photo-path (seq photo-path)) (if (and photo-path (seq photo-path))
[photos/photo photo-path styles] [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? (when edit?
[react/view {:style (styles/chat-icon-profile-edit)} [react/view {:style (styles/chat-icon-profile-edit)}
[icons/tiny-icon :tiny-icons/tiny-edit {:color colors/white-persist}]])])) [icons/tiny-icon :tiny-icons/tiny-edit {:color colors/white-persist}]])]))

8
src/status_im/ui/components/chat_icon/styles.cljs
View File

@ -1,5 +1,6 @@
(ns status-im.ui.components.chat-icon.styles (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] (defn default-chat-icon [color]
{:margin 0 {:margin 0
@ -34,6 +35,11 @@
:font-size (/ size 2) :font-size (/ size 2)
:line-height size}) :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 (def chat-icon
{:margin 4 {:margin 4
:border-radius 20 :border-radius 20

49
src/status_im/ui/components/emoji_thumbnail/color_picker.cljs Normal file
View File

@ -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]])

14
src/status_im/ui/components/emoji_thumbnail/preview.cljs Normal file
View File

@ -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]]))

156
src/status_im/ui/components/emoji_thumbnail/styles.cljs Normal file
View File

@ -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"}])

13
src/status_im/ui/components/emoji_thumbnail/utils.cljs Normal file
View File

@ -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))

4
src/status_im/ui/components/profile_header/view.cljs
View File

@ -37,7 +37,7 @@
(when-not minimized (when-not minimized
{:padding-top subtitle-margin}))) {: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}}] :or {bottom-separator true}}]
(fn [{:keys [animation minimized]}] (fn [{:keys [animation minimized]}]
(let [wrapper (if on-press (let [wrapper (if on-press
@ -55,7 +55,7 @@
(into editable (into editable
[[animated/view {:pointer-events :box-none} [[animated/view {:pointer-events :box-none}
[chat-icon.screen/profile-icon-view [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) (if minimized avatar-minimized-size avatar-extended-size)
nil]]]) nil]]])
[animated/view {:style (header-text) [animated/view {:style (header-text)

6
src/status_im/ui/screens/chat/sheets.cljs
View File

@ -77,13 +77,13 @@
:on-press #(re-frame/dispatch [:chat.ui/remove-chat-pressed chat-id])}]])) :on-press #(re-frame/dispatch [:chat.ui/remove-chat-pressed chat-id])}]]))
(defn community-chat-accents [] (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 [react/view
[quo/list-item [quo/list-item
{:theme :accent {:theme :accent
:title chat-name :title chat-name
:icon [chat-icon/chat-icon-view-chat-sheet :icon [chat-icon/emoji-chat-icon-view-chat-sheet
chat-id group-chat chat-name color] chat-id group-chat chat-name color emoji]
:subtitle (i18n/label :t/view-details) :subtitle (i18n/label :t/view-details)
:chevron true :chevron true
:accessibility-label :view-community-channel-details :accessibility-label :view-community-channel-details

11
src/status_im/ui/screens/chat/styles/main.cljs
View File

@ -1,5 +1,6 @@
(ns status-im.ui.screens.chat.styles.main (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 (def toolbar-container
{:flex 1 {:flex 1
@ -65,7 +66,9 @@
:align-items :center :align-items :center
:justify-content :center :justify-content :center
:border-radius (/ diameter 2) :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 (def intro-header-icon-text
{:color colors/white {:color colors/white
@ -74,6 +77,10 @@
:opacity 0.8 :opacity 0.8
:line-height 72}) :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 [] (defn intro-header-chat-name []
{:font-size 22 {:font-size 22
:font-weight "700" :font-weight "700"

4
src/status_im/ui/screens/chat/toolbar_content.cljs
View File

@ -32,12 +32,12 @@
(i18n/label :chat-is-not-a-contact))]])) (i18n/label :chat-is-not-a-contact))]]))
(defn toolbar-content-view-inner [chat-info] (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] chat-info]
[react/view {:style st/toolbar-container} [react/view {:style st/toolbar-container}
[react/view {:margin-right 10} [react/view {:margin-right 10}
[react/touchable-highlight {:on-press #(when-not group-chat (re-frame/dispatch [:chat.ui/show-profile chat-id]))} [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} [react/view {:style st/chat-name-view}
(if group-chat (if group-chat
[react/text {:style st/chat-name-text [react/text {:style st/chat-name-text

16
src/status_im/ui/screens/chat/views.cljs
View File

@ -67,16 +67,19 @@
contact-name contact-name
color color
loading-messages? loading-messages?
no-messages?]}] no-messages?
emoji]}]
[react/view {:style (style/intro-header-container loading-messages? no-messages?) [react/view {:style (style/intro-header-container loading-messages? no-messages?)
:accessibility-label :history-chat} :accessibility-label :history-chat}
;; Icon section ;; Icon section
[react/view {:style {:margin-top 42 [react/view {:style {:margin-top 42
:margin-bottom 24}} :margin-bottom 24}}
[chat-icon.screen/chat-intro-icon-view [chat-icon.screen/emoji-chat-intro-icon-view
chat-name chat-id group-chat chat-name chat-id group-chat emoji
{:default-chat-icon (style/intro-header-icon 120 color) {: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}]] :size 120}]]
;; Chat title section ;; Chat title section
[react/text {:style (style/intro-header-chat-name)} [react/text {:style (style/intro-header-chat-name)}
@ -106,7 +109,7 @@
chat-type chat-type
synced-to synced-to
color chat-id chat-name color chat-id chat-name
public?]} public? emoji]}
no-messages] no-messages]
[react/touchable-without-feedback [react/touchable-without-feedback
{:style {:flex 1 {:style {:flex 1
@ -122,7 +125,8 @@
:public? public? :public? public?
:color color :color color
:loading-messages? (not (pos? synced-to)) :loading-messages? (not (pos? synced-to))
:no-messages? no-messages}] :no-messages? no-messages
:emoji emoji}]
(if group-chat (if group-chat
[chat-intro opts] [chat-intro opts]
[chat-intro-one-to-one opts]))]) [chat-intro-one-to-one opts]))])

7
src/status_im/ui/screens/communities/channel_details.cljs
View File

@ -11,7 +11,7 @@
(let [{:keys [chat-id]} (<sub [:get-screen-params])] (let [{:keys [chat-id]} (<sub [:get-screen-params])]
(fn [] (fn []
(let [current-chat (<sub [:chat-by-id chat-id]) (let [current-chat (<sub [:chat-by-id chat-id])
{:keys [chat-name color description community-id]} current-chat {:keys [chat-name color description community-id emoji]} current-chat
category (<sub [:chats/category-by-chat-id community-id chat-id]) category (<sub [:chats/category-by-chat-id community-id chat-id])
{:keys [admin]} (<sub [:communities/community community-id]) {:keys [admin]} (<sub [:communities/community community-id])
pinned-messages (<sub [:chats/pinned chat-id])] pinned-messages (<sub [:chats/pinned chat-id])]
@ -24,10 +24,13 @@
community-id community-id
chat-name chat-name
description description
color])}]) color
emoji
chat-id])}])
:extended-header (profile-header/extended-header :extended-header (profile-header/extended-header
{:title chat-name {:title chat-name
:color color :color color
:emoji emoji
:subtitle (i18n/label :t/public-channel)}) :subtitle (i18n/label :t/public-channel)})
:use-insets true} :use-insets true}
(when-not (string/blank? description) (when-not (string/blank? description)

4
src/status_im/ui/screens/communities/community.cljs
View File

@ -204,8 +204,8 @@
:header [categories-accordion community-id chats categories edit {:from-chat from-chat}] :header [categories-accordion community-id chats categories edit {:from-chat from-chat}]
:footer [rn/view {:height 68}]}]))) :footer [rn/view {:height 68}]}])))
(defn channel-preview-item [{:keys [id color name]}] (defn channel-preview-item [{:keys [id name]}]
(let [color (or color colors/default-community-color)] (let [color colors/default-community-color]
[quo/list-item [quo/list-item
{:icon [chat-icon.screen/chat-icon-view-chat-list {:icon [chat-icon.screen/chat-icon-view-chat-list
id true name color false false] id true name color false false]

48
src/status_im/ui/screens/communities/community_emoji_thumbnail_picker.cljs Normal file
View File

@ -0,0 +1,48 @@
(ns status-im.ui.screens.communities.community-emoji-thumbnail-picker
(:require [quo.react-native :as rn]
[quo.core :as quo]
[clojure.string :as str]
[status-im.ui.components.react :as react]
[status-im.utils.handlers :refer [>evt <sub]]
[status-im.communities.core :as communities]
[status-im.ui.components.keyboard-avoid-presentation :as kb-presentation]
[status-im.ui.components.emoji-thumbnail.styles :as styles]
[status-im.ui.components.emoji-thumbnail.preview :as emoji-thumbnail-preview]
[status-im.ui.components.emoji-thumbnail.color-picker :as color-picker]))
(defn thumbnail-preview-section []
(let [{:keys [color emoji]} (<sub [:communities/create-channel])
size styles/emoji-thumbnail-preview-size]
[rn/view styles/emoji-thumbnail-preview
[emoji-thumbnail-preview/emoji-thumbnail
emoji color size]]))
(defn color-circle [item]
(let [{:keys [color]} (<sub [:communities/create-channel])
item-color (:color item)
key (:key key)
color-selected? (= (str/lower-case item-color) (str/lower-case color))]
[react/touchable-opacity {:key key
:accessibility-label :color-circle
:on-press #(>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]} (<sub [:dimensions/window])
keyboard_height (if (> 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]]])

23
src/status_im/ui/screens/communities/create_channel.cljs
View File

@ -8,7 +8,9 @@
[status-im.utils.debounce :as debounce] [status-im.utils.debounce :as debounce]
[status-im.utils.handlers :refer [>evt <sub]] [status-im.utils.handlers :refer [>evt <sub]]
[status-im.ui.screens.communities.create :as create] [status-im.ui.screens.communities.create :as create]
[status-im.ui.components.keyboard-avoid-presentation :as kb-presentation])) [status-im.ui.components.keyboard-avoid-presentation :as kb-presentation]
[status-im.ui.components.emoji-thumbnail.styles :as styles]
[status-im.ui.components.emoji-thumbnail.preview :as emoji-thumbnail-preview]))
(defn valid? [channel-name channel-description] (defn valid? [channel-name channel-description]
(and (not (str/blank? channel-name)) (and (not (str/blank? channel-name))
@ -16,19 +18,27 @@
(<= (count channel-name) create/max-name-length) (<= (count channel-name) create/max-name-length)
(<= (count channel-description) create/max-description-length))) (<= (count channel-description) create/max-description-length)))
(defn thumbnail []
(let [{:keys [color emoji]} (<sub [:communities/create-channel])
size styles/emoji-thumbnail-preview-size]
[rn/view styles/emoji-thumbnail-preview
[emoji-thumbnail-preview/emoji-thumbnail-touchable
emoji color size
#(>evt [:open-modal :community-emoji-thumbnail-picker nil])]]))
(defn form [] (defn form []
(let [{:keys [name description]} (<sub [:communities/create-channel])] (let [{:keys [name description]} (<sub [:communities/create-channel])]
[rn/scroll-view {:style {:flex 1} [rn/scroll-view {:style {:flex 1}
:content-container-style {:padding-vertical 16}} :content-container-style {:padding-bottom 16}}
[rn/view {:style {:padding-bottom 16 [:<>
:padding-top 10}} [thumbnail]
[rn/view {:padding-horizontal 16} [rn/view {:padding-horizontal 16}
[quo/text-input [quo/text-input
{:placeholder (i18n/label :t/name-your-channel-placeholder) {:placeholder (i18n/label :t/name-your-channel-placeholder)
:on-change-text #(>evt [::communities/create-channel-field :name %]) :on-change-text #(>evt [::communities/create-channel-field :name %])
:default-value name :default-value name
:auto-focus true}]] :auto-focus false}]]
[quo/separator {:style {:margin-vertical 10}}] [quo/separator {:style {:margin-vertical 16}}]
[rn/view {:padding-horizontal 16} [rn/view {:padding-horizontal 16}
[create/countable-label {:label (i18n/label :t/description) [create/countable-label {:label (i18n/label :t/description)
:text description :text description
@ -42,6 +52,7 @@
(defn view [] (defn view []
(let [{:keys [name description]} (<sub [:communities/create-channel])] (let [{:keys [name description]} (<sub [:communities/create-channel])]
[kb-presentation/keyboard-avoiding-view {:style {:flex 1}} [kb-presentation/keyboard-avoiding-view {:style {:flex 1}}
[quo/separator]
[form] [form]
[toolbar/toolbar [toolbar/toolbar
{:show-border? true {:show-border? true

8
src/status_im/ui/screens/home/views/inner_item.cljs
View File

@ -99,17 +99,19 @@
(first @(re-frame/subscribe [:contacts/contact-two-names-by-identity chat-id])))]) (first @(re-frame/subscribe [:contacts/contact-two-names-by-identity chat-id])))])
(defn home-list-item [home-item opts] (defn home-list-item [home-item opts]
(let [{:keys [chat-id chat-name color group-chat public? timestamp last-message muted]} home-item] (let [{:keys [chat-id chat-name color group-chat public? timestamp last-message muted emoji]} home-item]
[react/touchable-opacity (merge {:style {:height 64}} opts) [react/touchable-opacity (merge {:style {:height 64}} opts)
[:<> [:<>
[chat-item-icon muted (and group-chat (not public?)) (and group-chat public?)] [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 {:container (assoc chat-icon.styles/container-chat-list
:top 12 :left 16 :position :absolute) :top 12 :left 16 :position :absolute)
:size 40 :size 40
:chat-icon chat-icon.styles/chat-icon-chat-list :chat-icon chat-icon.styles/chat-icon-chat-list
:default-chat-icon (chat-icon.styles/default-chat-icon-chat-list color) :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] [chat-item-title chat-id muted group-chat chat-name]
[react/text {:style styles/datetime-text [react/text {:style styles/datetime-text
:number-of-lines 1 :number-of-lines 1

5
src/status_im/ui/screens/screens.cljs
View File

@ -30,6 +30,7 @@
[status-im.ui.screens.communities.profile :as community.profile] [status-im.ui.screens.communities.profile :as community.profile]
[status-im.ui.screens.communities.edit :as community.edit] [status-im.ui.screens.communities.edit :as community.edit]
[status-im.ui.screens.communities.create-channel :as create-channel] [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.membership :as membership]
[status-im.ui.screens.communities.members :as members] [status-im.ui.screens.communities.members :as members]
[status-im.ui.screens.communities.requests-to-join :as requests-to-join] [status-im.ui.screens.communities.requests-to-join :as requests-to-join]
@ -269,6 +270,10 @@
:insets {:bottom true} :insets {:bottom true}
:options {:topBar {:title {:text (i18n/label :t/create-channel-title)}}} :options {:topBar {:title {:text (i18n/label :t/create-channel-title)}}}
:component create-channel/view} :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 {:name :create-community-category
:insets {:bottom true} :insets {:bottom true}
:options {:topBar {:title {:text (i18n/label :t/new-category)}}} :options {:topBar {:title {:text (i18n/label :t/new-category)}}}

6
status-go-version.json
View File

@ -3,7 +3,7 @@
"_comment": "Instead use: scripts/update-status-go.sh <rev>", "_comment": "Instead use: scripts/update-status-go.sh <rev>",
"owner": "status-im", "owner": "status-im",
"repo": "status-go", "repo": "status-go",
"version": "v0.89.4", "version": "v0.89.5",
"commit-sha1": "5e83d8e95e38e99ab76d236a28f959af9e93c27f", "commit-sha1": "c3ced098390f3d4e8d4850d9c0bf6e7dbd627c20",
"src-sha256": "01zqrbqgvsrc55xs3qd8wwcvswqvl7i9xkw5ihkzsp924s326m15" "src-sha256": "10bpf87sshji6azf9vpmx90vbgwf2c8agcrcvc7x5qrqkpnbmd9p"
} }

1
translations/en.json
View File

@ -196,6 +196,7 @@
"create-channel-title": "New channel", "create-channel-title": "New channel",
"edit-channel-title": "Edit channel", "edit-channel-title": "Edit channel",
"community-thumbnail-image": "Thumbnail image", "community-thumbnail-image": "Thumbnail image",
"community-emoji-thumbnail-title": "Thumbnail",
"community-thumbnail-upload": "Upload", "community-thumbnail-upload": "Upload",
"community-image-take": "Take a photo", "community-image-take": "Take a photo",
"community-image-pick": "Pick an image", "community-image-pick": "Pick an image",

4
yarn.lock
View File

@ -7094,6 +7094,10 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
hash-base "^3.0.0" hash-base "^3.0.0"
inherits "^2.0.1" 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": "rn-snoopy@git+https://github.com/status-im/rn-snoopy.git#v2.0.2-status":
version "2.0.2" version "2.0.2"
resolved "git+https://github.com/status-im/rn-snoopy.git#f23dc13469c6c2a694649f658cdc1d1eaf8def64" resolved "git+https://github.com/status-im/rn-snoopy.git#f23dc13469c6c2a694649f658cdc1d1eaf8def64"