Custom Emoji Thumbnails for Community Channels (#12594)
This commit is contained in:
Parvesh Monu
GitHub
parent
1bbebc9055
commit
eb5711e9bc
|
|
@ -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
|
||||
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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"))
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
|
||||
|
|
|
|||
|
|
@ -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))))
|
||||
(remove-chat-from-category community-id id categoryID))))
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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}]])]))
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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]])
|
||||
|
|
@ -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]]))
|
||||
|
|
@ -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"}])
|
||||
|
|
@ -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))
|
||||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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]))])
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
(let [{:keys [chat-id]} (<sub [:get-screen-params])]
|
||||
(fn []
|
||||
(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])
|
||||
{:keys [admin]} (<sub [:communities/community community-id])
|
||||
pinned-messages (<sub [:chats/pinned chat-id])]
|
||||
|
|
@ -24,10 +24,13 @@
|
|||
community-id
|
||||
chat-name
|
||||
description
|
||||
color])}])
|
||||
color
|
||||
emoji
|
||||
chat-id])}])
|
||||
:extended-header (profile-header/extended-header
|
||||
{:title chat-name
|
||||
:color color
|
||||
:emoji emoji
|
||||
:subtitle (i18n/label :t/public-channel)})
|
||||
:use-insets true}
|
||||
(when-not (string/blank? description)
|
||||
|
|
|
|||
|
|
@ -204,8 +204,8 @@
|
|||
:header [categories-accordion community-id chats categories edit {:from-chat from-chat}]
|
||||
:footer [rn/view {:height 68}]}])))
|
||||
|
||||
(defn channel-preview-item [{:keys [id color name]}]
|
||||
(let [color (or color colors/default-community-color)]
|
||||
(defn channel-preview-item [{:keys [id name]}]
|
||||
(let [color colors/default-community-color]
|
||||
[quo/list-item
|
||||
{:icon [chat-icon.screen/chat-icon-view-chat-list
|
||||
id true name color false false]
|
||||
|
|
|
|||
|
|
@ -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]]])
|
||||
|
||||
|
|
@ -8,7 +8,9 @@
|
|||
[status-im.utils.debounce :as debounce]
|
||||
[status-im.utils.handlers :refer [>evt <sub]]
|
||||
[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]
|
||||
(and (not (str/blank? channel-name))
|
||||
|
|
@ -16,19 +18,27 @@
|
|||
(<= (count channel-name) create/max-name-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 []
|
||||
(let [{:keys [name description]} (<sub [:communities/create-channel])]
|
||||
[rn/scroll-view {:style {:flex 1}
|
||||
:content-container-style {:padding-vertical 16}}
|
||||
[rn/view {:style {:padding-bottom 16
|
||||
:padding-top 10}}
|
||||
:content-container-style {:padding-bottom 16}}
|
||||
[:<>
|
||||
[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]} (<sub [:communities/create-channel])]
|
||||
[kb-presentation/keyboard-avoiding-view {:style {:flex 1}}
|
||||
[quo/separator]
|
||||
[form]
|
||||
[toolbar/toolbar
|
||||
{:show-border? true
|
||||
|
|
|
|||
|
|
@ -99,17 +99,19 @@
|
|||
(first @(re-frame/subscribe [:contacts/contact-two-names-by-identity chat-id])))])
|
||||
|
||||
(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)
|
||||
[:<>
|
||||
[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
|
||||
|
|
|
|||
|
|
@ -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)}}}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
"_comment": "Instead use: scripts/update-status-go.sh <rev>",
|
||||
"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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue