diff --git a/Makefile b/Makefile index 066198489c..dff70b6bc7 100644 --- a/Makefile +++ b/Makefile @@ -272,7 +272,7 @@ run-android: export TARGET := android run-android: ##@run Build Android APK and start it on the device npx react-native run-android --appIdSuffix debug -SIMULATOR= +SIMULATOR=iPhone 13 run-ios: export TARGET := ios run-ios: ##@run Build iOS app and start it in a simulator/device ifneq ("$(SIMULATOR)", "") diff --git a/src/quo2/components/list_items/received_contact_request.cljs b/src/quo2/components/list_items/received_contact_request.cljs index 3464013a95..19eecb4ae5 100644 --- a/src/quo2/components/list_items/received_contact_request.cljs +++ b/src/quo2/components/list_items/received_contact_request.cljs @@ -37,7 +37,7 @@ [rn/view {:style {:margin-horizontal 8}} [rn/view {:style {:flex-direction :row}} [rn/text {:style (merge typography/font-semi-bold typography/paragraph-1 - {:color (colors/theme-colors :black :white) + {:color (colors/theme-colors colors/neutral-100 colors/white) :margin-right 8})} display-name] (when no-ens-name [rn/text {:style (merge typography/font-regular typography/label {:color (colors/theme-colors colors/neutral-50 colors/neutral-40) @@ -55,7 +55,7 @@ :border-color (colors/theme-colors colors/neutral-20 colors/neutral-70)}} [rn/text {:style (merge typography/font-regular typography/paragraph-1 - {:color (colors/theme-colors :black :white)})} + {:color (colors/theme-colors colors/neutral-100 colors/white)})} (:text (:content message))]] [rn/view {:style {:margin-top 12 :flex-direction :row}} @@ -69,7 +69,7 @@ :border-radius 8 :padding-vertical 4 :padding-horizontal 8}} - [rn/text {:style (merge typography/font-medium typography/paragraph-2 {:color :white})} (i18n/label :t/decline)]] + [rn/text {:style (merge typography/font-medium typography/paragraph-2 {:color colors/white})} (i18n/label :t/decline)]] [rn/touchable-opacity {:accessibility-label :accept-cr :on-press #(>evt [:contact-requests.ui/accept-request (:message-id message)]) :active-opacity 1 @@ -81,4 +81,4 @@ :padding-vertical 4 :padding-horizontal 8 :margin-left 8}} - [rn/text {:style (merge typography/font-medium typography/paragraph-2 {:color :white})} (i18n/label :t/accept)]]]]])) + [rn/text {:style (merge typography/font-medium typography/paragraph-2 {:color colors/white})} (i18n/label :t/accept)]]]]])) diff --git a/src/status_im/chat/models/pin_message.cljs b/src/status_im/chat/models/pin_message.cljs index e39cf96c8d..4f324cb642 100644 --- a/src/status_im/chat/models/pin_message.cljs +++ b/src/status_im/chat/models/pin_message.cljs @@ -91,7 +91,8 @@ :pinned (pin-message :pinned)}) (when pinned (protocol/send-chat-messages [{:chat-id (pin-message :chat-id) - :content-type constants/content-type-pin + :content-type constants/content-type-system-text + :text "pinned a message" :response-to (pin-message :message-id) :ens-name preferred-name}]))))) @@ -99,3 +100,16 @@ {:events [::load-pin-messages]} [{:keys [db] :as cofx} chat-id] (load-more-pin-messages cofx chat-id true)) + +(fx/defn show-pin-limit-modal + {:events [::show-pin-limit-modal]} + [{:keys [db] :as cofx} chat-id] + (fx/merge + {:db (assoc-in db [:pin-modal chat-id] true)})) + +(fx/defn hide-pin-limit-modal + {:events [::hide-pin-limit-modal]} + [{:keys [db] :as cofx} chat-id] + (fx/merge + {:db (assoc-in db [:pin-modal chat-id] false)})) + diff --git a/src/status_im/constants.cljs b/src/status_im/constants.cljs index a5bd57fa94..8aae033d38 100644 --- a/src/status_im/constants.cljs +++ b/src/status_im/constants.cljs @@ -14,7 +14,6 @@ (def ^:const content-type-community 9) (def ^:const content-type-gap 10) (def ^:const content-type-contact-request 11) ;; TODO: temp, will be removed -(def ^:const content-type-pin 13) (def ^:const contact-request-state-none 0) (def ^:const contact-request-state-mutual 1) diff --git a/src/status_im/multiaccounts/core.cljs b/src/status_im/multiaccounts/core.cljs index 48f86622cf..bd202155d7 100644 --- a/src/status_im/multiaccounts/core.cljs +++ b/src/status_im/multiaccounts/core.cljs @@ -28,7 +28,7 @@ name)] (cond-> {:nickname nickname :three-words-name (or alias (gfycat/generate-gfy public-key))} - ;; Preferred name is our own otherwise we make sure it's verified + ;; Preferred name is our own otherwise we make sure it's verified (or preferred-name (and ens-verified name)) (assoc :ens-name (str "@" (or (stateofus/username ens-name) ens-name)))))) diff --git a/src/status_im/subs/chat/messages.cljs b/src/status_im/subs/chat/messages.cljs index c5d52d6dc4..1bfa22f1a7 100644 --- a/src/status_im/subs/chat/messages.cljs +++ b/src/status_im/subs/chat/messages.cljs @@ -27,6 +27,12 @@ vals (sort-by :pinned-at <)))) +(re-frame/reg-sub + :chats/pin-modal + :<- [:messages/pin-modal] + (fn [pin-modal [_ chat-id]] + (get pin-modal chat-id))) + (re-frame/reg-sub :chats/message-reactions :<- [:multiaccount/public-key] diff --git a/src/status_im/subs/root.cljs b/src/status_im/subs/root.cljs index f8cb68add7..7da6876928 100644 --- a/src/status_im/subs/root.cljs +++ b/src/status_im/subs/root.cljs @@ -112,6 +112,7 @@ (reg-root-key-sub :messages/pagination-info :pagination-info) (reg-root-key-sub :messages/pin-message-lists :pin-message-lists) (reg-root-key-sub :messages/pin-messages :pin-messages) +(reg-root-key-sub :messages/pin-modal :pin-modal) ;;browser (reg-root-key-sub :browsers :browser/browsers) @@ -252,4 +253,4 @@ (reg-root-key-sub :messenger/started? :messenger/started?) -(reg-root-key-sub :information-box-states :information-box-states) \ No newline at end of file +(reg-root-key-sub :information-box-states :information-box-states) diff --git a/src/status_im/ui/screens/chat/components/edit.cljs b/src/status_im/ui/screens/chat/components/edit.cljs index ffabf68cd4..3f1bb4fe95 100644 --- a/src/status_im/ui/screens/chat/components/edit.cljs +++ b/src/status_im/ui/screens/chat/components/edit.cljs @@ -46,4 +46,4 @@ (let [edit @(re-frame/subscribe [:chats/edit-message])] (focus-input-on-edit edit had-edit text-input-ref) (when edit - [edit-message-wrapper]))))) \ No newline at end of file + [edit-message-wrapper]))))) diff --git a/src/status_im/ui/screens/chat/components/style.cljs b/src/status_im/ui/screens/chat/components/style.cljs index 5033d060c0..b07cb83f00 100644 --- a/src/status_im/ui/screens/chat/components/style.cljs +++ b/src/status_im/ui/screens/chat/components/style.cljs @@ -130,4 +130,4 @@ :background-color (colors/get-color :ui-background) :border-top-width 1 :border-top-color (colors/get-color :ui-01) - :z-index 3}) \ No newline at end of file + :z-index 3}) diff --git a/src/status_im/ui/screens/chat/message/message.cljs b/src/status_im/ui/screens/chat/message/message.cljs index af6f30ebaa..d488a737cd 100644 --- a/src/status_im/ui/screens/chat/message/message.cljs +++ b/src/status_im/ui/screens/chat/message/message.cljs @@ -428,9 +428,7 @@ (if (and (not pinned) (> (count pinned-messages) 2)) (do (js/setTimeout (fn [] (re-frame/dispatch [:dismiss-keyboard])) 500) - (re-frame/dispatch [:show-popover {:view :pin-limit - :message message - :prevent-closing? true}])) + (re-frame/dispatch [::models.pin-message/show-pin-limit-modal chat-id])) (re-frame/dispatch [::models.pin-message/send-pin-message (assoc message :pinned (not pinned))])))) (defn on-long-press-fn [on-long-press {:keys [pinned message-pin-enabled outgoing edit-enabled show-input?] :as message} content] @@ -540,12 +538,11 @@ (fn [{:keys [content current-public-key outgoing edit-enabled public? pinned in-popover? message-pin-enabled content-type edited-at] :as message} {:keys [on-long-press modal] :as reaction-picker}] - ;; Makes sure to render a text-messsage and not an emoji-message if it has been edited with text + ;; Makes sure to render a text-message and not an emoji-message if it has been edited with text (if (= content-type constants/content-type-text) [message-content-wrapper message [collapsible-text-message message on-long-press modal] reaction-picker] (let [response-to (:response-to content)] - (println "outgoing" outgoing edit-enabled) [message-content-wrapper message [react/touchable-highlight (when-not modal {:disabled in-popover? diff --git a/src/status_im/ui/screens/chat/styles/message/message.cljs b/src/status_im/ui/screens/chat/styles/message/message.cljs index 4121889166..a6af5d99f1 100644 --- a/src/status_im/ui/screens/chat/styles/message/message.cljs +++ b/src/status_im/ui/screens/chat/styles/message/message.cljs @@ -153,18 +153,9 @@ :flex-direction :row-reverse}) (defn message-view - [{:keys [content-type mentioned]}] + [{:keys [content-type]}] (merge {:border-radius 10} - (cond - (= content-type constants/content-type-system-text) nil - mentioned {:background-color colors/mentioned-background - :border-color colors/mentioned-border - :border-width 1} - (= content-type constants/content-type-audio) {:background-color colors/blue - :padding-horizontal 12 - :padding-top 6}) - (when (= content-type constants/content-type-emoji) {:flex-direction :row}))) diff --git a/src/status_im/ui/screens/chat/utils.cljs b/src/status_im/ui/screens/chat/utils.cljs index e3b45aeeec..b7062b88b6 100644 --- a/src/status_im/ui/screens/chat/utils.cljs +++ b/src/status_im/ui/screens/chat/utils.cljs @@ -32,17 +32,17 @@ first-name])))) (defn format-author - ([contact] (format-author contact nil)) - ([{:keys [names] :as contact} {:keys [modal profile? you?]}] + ([contact] (format-author contact nil nil)) + ([{:keys [names] :as contact} {:keys [modal profile? you?]} max-length] (let [{:keys [nickname ens-name]} names [first-name second-name] (multiaccounts/contact-two-names contact false)] (if (or nickname ens-name) [react/nested-text {:number-of-lines 2 - :style {:color (if modal colors/white-persist colors/black) - :font-size (if profile? 15 13) - :line-height (if profile? 22 18) + :style {:color (if modal colors/white-persist colors/black) + :font-size (if profile? 15 13) + :line-height (if profile? 22 18) :letter-spacing -0.2 - :font-weight "600"}} + :font-weight "600"}} (subs first-name 0 81) (when you? [{:style {:color colors/black-light :font-weight "500" :font-size 13}} @@ -50,12 +50,15 @@ (when nickname [{:style {:color colors/black-light :font-weight "500"}} (str " " (subs second-name 0 81))])] - [react/text {:style {:color (if modal colors/white-persist colors/black) - :font-size (if profile? 15 13) - :line-height (if profile? 22 18) - :font-weight "600" - :letter-spacing -0.2}} - first-name])))) + [react/text {:style {:color (if modal colors/white-persist colors/black) + :font-size (if profile? 15 13) + :line-height (if profile? 22 18) + :font-weight "600" + :letter-spacing -0.2} + :number-of-lines 1} + (if (and max-length (> (count first-name) max-length)) + (str (subs first-name 0 max-length) "...") + first-name)])))) (defn format-reply-author [from username current-public-key style outgoing] (let [contact-name (str reply-symbol username)] @@ -63,7 +66,7 @@ [react/text {:style (style true)} (str reply-symbol (i18n/label :t/You))]) (if (or (= (aget contact-name 0) "@") - ;; in case of replies + ;; in case of replies (= (aget contact-name 1) "@")) (let [trimmed-name (subs contact-name 0 81)] [react/text {:number-of-lines 2 diff --git a/src/status_im/ui2/screens/chat/components/reaction_drawer.cljs b/src/status_im/ui2/screens/chat/components/reaction_drawer.cljs index 203414618b..b38db31de3 100644 --- a/src/status_im/ui2/screens/chat/components/reaction_drawer.cljs +++ b/src/status_im/ui2/screens/chat/components/reaction_drawer.cljs @@ -3,7 +3,7 @@ [re-frame.core :as re-frame] [status-im.constants :as constants] [quo2.components.buttons.button :as quo2.button] - [quo2.foundations.colors :as quo2.colors] + [quo2.foundations.colors :as colors] [quo2.components.list-items.menu-item :as quo2.menu-item] [quo2.components.separator :as quo2.separator])) @@ -12,7 +12,7 @@ (let [main-actions (filter #(= (:type %) :main) actions) danger-actions (filter #(= (:type %) :danger) actions) admin-actions (filter #(= (:type %) :admin) actions)] - [rn/view {:flex 1} + [rn/view [rn/view {:style {:width "100%" :flex-direction :row :justify-content :space-between @@ -34,7 +34,7 @@ :on-press #(do (send-emoji id) (re-frame/dispatch [:bottom-sheet/hide]))} - (when active {:style {:background-color quo2.colors/neutral-10}})) + (when active {:style {:background-color colors/neutral-10}})) icon]))] [rn/view {:style {:padding-horizontal 8}} (for [action main-actions] diff --git a/src/status_im/ui2/screens/chat/components/reply.cljs b/src/status_im/ui2/screens/chat/components/reply.cljs index 499a2d8133..468c6bebb0 100644 --- a/src/status_im/ui2/screens/chat/components/reply.cljs +++ b/src/status_im/ui2/screens/chat/components/reply.cljs @@ -1,5 +1,5 @@ (ns status-im.ui2.screens.chat.components.reply - (:require [quo2.foundations.colors :as quo2.colors] + (:require [quo2.foundations.colors :as colors] [status-im.ui.components.icons.icons :as icons] [quo.react-native :as rn] [status-im.constants :as constants] @@ -54,7 +54,7 @@ [rn/view {:style (styles/reply-content pin?)} (when-not pin? ;;TODO quo2 icon should be used - [icons/icon :main-icons/connector {:color (quo2.colors/theme-colors quo2.colors/neutral-40 quo2.colors/neutral-60) + [icons/icon :main-icons/connector {:color (colors/theme-colors colors/neutral-40 colors/neutral-60) :container-style {:position :absolute :left 10 :bottom -4 :width 16 :height 16}}]) [rn/view {:style (styles/quoted-message pin?)} [photos/member-photo from identicon 16] @@ -73,7 +73,7 @@ (when (or (= constants/content-type-image content-type) (= constants/content-type-sticker content-type) (= constants/content-type-audio content-type)) - {:color (quo2.colors/theme-colors quo2.colors/neutral-50 quo2.colors/neutral-40)}))} + {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}))} (case (or content-type contentType) constants/content-type-image "Image" constants/content-type-sticker "Sticker" @@ -88,4 +88,4 @@ ;;TODO quo2 icon should be used [icons/icon :main-icons/close {:width 16 :height 16 - :color (quo2.colors/theme-colors quo2.colors/neutral-100 quo2.colors/neutral-40)}]])])) + :color (colors/theme-colors colors/neutral-100 colors/neutral-40)}]])])) diff --git a/src/status_im/ui2/screens/chat/composer/input.cljs b/src/status_im/ui2/screens/chat/composer/input.cljs index 463128b2cf..ffce8fceb0 100644 --- a/src/status_im/ui2/screens/chat/composer/input.cljs +++ b/src/status_im/ui2/screens/chat/composer/input.cljs @@ -2,7 +2,7 @@ (:require [quo.react-native :as rn] [status-im.i18n.i18n :as i18n] [status-im.utils.handlers :refer [evt]] - [quo.design-system.colors :as colors] + [quo.design-system.colors :as quo.colors] [status-im.utils.utils :as utils.utils] [status-im.utils.platform :as platform] [clojure.string :as string] @@ -11,7 +11,7 @@ [status-im.ui2.screens.chat.composer.style :as style] [re-frame.core :as re-frame] [status-im.chat.models.mentions :as mentions] - [quo2.foundations.colors :as quo2.colors] + [quo2.foundations.colors :as colors] [quo.react])) (defonce input-texts (atom {})) @@ -156,7 +156,7 @@ :auto-focus false :on-focus #(set-active-panel nil) :max-length chat.constants/max-text-size - :placeholder-text-color (:text-02 @colors/theme) + :placeholder-text-color (:text-02 @quo.colors/theme) :placeholder (if cooldown-enabled? (i18n/label :cooldown/text-input-disabled) (i18n/label :t/type-a-message)) @@ -174,6 +174,6 @@ [idx item]) (evt]] - [status-im.utils.security :as security]) + [status-im.utils.security :as security] + [quo2.components.icon :as icons] + [status-im.utils.datetime :as time]) (:require-macros [status-im.utils.views :refer [defview letsubs]])) -(defn message-timestamp-anim - [anim-opacity show-timestamp?] - (animation/start - (animation/anim-sequence - [(animation/timing - anim-opacity - {:toValue 1 - :duration 100 - :easing (.-ease ^js animation/easing) - :useNativeDriver true}) - (animation/timing - anim-opacity - {:toValue 0 - :delay 2000 - :duration 100 - :easing (.-ease ^js animation/easing) - :useNativeDriver true})]) #(reset! show-timestamp? false))) - (defview mention-element [from] (letsubs [contact-name [:contacts/contact-name-by-identity from]] contact-name)) @@ -82,16 +65,15 @@ :tiny-icons/tiny-pending) {:width 16 :height 12 - :color (if pinned colors/gray colors/white) + :color (if pinned quo.colors/gray quo.colors/white) :accessibility-label (name outgoing-status)}]) (when edited-at [rn/text {:style (style/message-status-text)} edited-at-text])])) (defn message-timestamp - [{:keys [timestamp-str in-popover?]} show-timestamp?] + [{:keys [timestamp-str in-popover?]}] (when-not in-popover? ;; We keep track if showing this message in a list in pin-limit-popover (let [anim-opacity (animation/create-value 0)] [rn/animated-view {:style (style/message-timestamp-wrapper) :opacity anim-opacity} - (when @show-timestamp? (message-timestamp-anim anim-opacity show-timestamp?)) [rn/text {:style (style/message-timestamp-text) :accessibility-label :message-timestamp} @@ -132,7 +114,7 @@ (conj acc [rn/text {:style - {:color colors/blue + {:color quo.colors/blue :text-decoration-line :underline} :on-press #(when (and (security/safe-link? destination) @@ -143,16 +125,16 @@ "mention" (conj acc - [rn/view {:style {:background-color quo2.colors/primary-50-opa-10 :border-radius 6 :padding-horizontal 3}} + [rn/view {:style {:background-color colors/primary-50-opa-10 :border-radius 6 :padding-horizontal 3}} [rn/text - {:style (merge {:color (if (system-text? content-type) colors/black quo2.colors/primary-50)} + {:style (merge {:color (if (system-text? content-type) quo.colors/black colors/primary-50)} (if (system-text? content-type) typography/font-regular typography/font-medium)) :on-press (when-not (system-text? content-type) #(>evt [:chat.ui/show-profile literal]))} [mention-element literal]]]) "status-tag" (conj acc [rn/text - {:style {:color colors/blue + {:style {:color quo.colors/blue :text-decoration-line :underline} :on-press #(re-frame/dispatch @@ -207,14 +189,14 @@ [{:keys [content-type content] :as message}] [rn/view (style/message-view message) [rn/text - {:style {:color colors/white-persist}} + {:style {:color quo.colors/white-persist}} (if (seq (:text content)) (:text content) (str "Unhandled content-type " content-type))]]) (defn message-not-sent-text [chat-id message-id] - [rn/touchable-highlight + [rn/touchable-opacity {:on-press (fn [] (re-frame/dispatch @@ -226,7 +208,7 @@ [rn/text {:style style/not-sent-text} (i18n/label :t/status-not-sent-tap)] [rn/view style/not-sent-icon - [icons/icon :main-icons/warning {:color colors/red}]]]]) + [icons/icon :main-icons2/warning {:color quo.colors/red}]]]]) (defn pin-author-name [pinned-by] (let [user-contact @(re-frame/subscribe [:multiaccount/contact]) @@ -235,14 +217,14 @@ (str " " (if (= pinned-by (user-contact :public-key)) (i18n/label :t/You) (first contact-names))))) (defn pin-icon [color size] - [icons/icon :main-icons/pin16 {:color color - :height size - :width size}]) + [icons/icon :main-icons2/pin {:color color + :height size + :width size}]) (defn pinned-by-indicator [pinned-by] [rn/view {:style (style/pin-indicator) :accessibility-label :pinned-by} - [pin-icon quo2.colors/primary-50 16] + [pin-icon colors/primary-50 16] [quo/text {:size :small :color :main :style (style/pin-author-text)} @@ -254,17 +236,17 @@ (= outgoing-status :not-sent)) [message-not-sent-text chat-id message-id])) -(defview message-author-name [from opts] +(defview message-author-name [from opts max-length] (letsubs [contact-with-names [:contacts/contact-by-identity from]] - (chat.utils/format-author contact-with-names opts))) + (chat.utils/format-author contact-with-names opts max-length))) (defview message-my-name [opts] (letsubs [contact-with-names [:multiaccount/contact]] - (chat.utils/format-author contact-with-names opts))) + (chat.utils/format-author contact-with-names opts nil))) (defview community-content [{:keys [community-id] :as message}] (letsubs [{:keys [name description verified] :as community} [:communities/community community-id] - communities-enabled? [:communities/enabled?]] + communities-enabled? [:communities/enabled?]] (when (and communities-enabled? community) [rn/view {:style (assoc (style/message-wrapper message) :margin-vertical 10 @@ -273,7 +255,7 @@ (when verified [rn/view (style/community-verified) [rn/text {:style {:font-size 13 - :color colors/blue}} (i18n/label :t/communities-verified)]]) + :color quo.colors/blue}} (i18n/label :t/communities-verified)]]) [rn/view (style/community-message verified) [rn/view {:width 62 :padding-left 14} @@ -287,11 +269,11 @@ name] [rn/text description]]] [rn/view (style/community-view-button) - [rn/touchable-highlight {:on-press #(re-frame/dispatch [:navigate-to - :community - {:community-id (:id community)}])} + [rn/touchable-opacity {:on-press #(re-frame/dispatch [:navigate-to + :community + {:community-id (:id community)}])} [rn/text {:style {:text-align :center - :color colors/blue}} (i18n/label :t/view)]]]]))) + :color quo.colors/blue}} (i18n/label :t/view)]]]]))) (defn message-content-wrapper "Author, userpic and delivery wrapper" @@ -315,8 +297,10 @@ :pointer-events :box-none} [rn/view (style/message-author-userpic) (when (or (and (seq response-to) (:quoted-message message)) last-in-group? pinned) - [rn/touchable-highlight {:on-press #(do (when modal (close-modal)) - (re-frame/dispatch [:chat.ui/show-profile from]))} + [rn/touchable-opacity {:active-opacity 1 + :on-press #(do (when modal (close-modal)) + (>evt [:bottom-sheet/hide]) + (re-frame/dispatch [:chat.ui/show-profile from]))} [photos/member-photo from identicon]])] [rn/view {:style (style/message-author-wrapper)} @@ -325,6 +309,7 @@ [rn/touchable-opacity {:style style/message-author-touchable :disabled in-popover? :on-press #(do (when modal (close-modal)) + (>evt [:bottom-sheet/hide]) (re-frame/dispatch [:chat.ui/show-profile from]))} [message-author-name from {:modal modal}]] [rn/text @@ -371,11 +356,11 @@ :visible @visible :on-close #(do (reset! visible false) (reagent/flush))}] - [rn/touchable-highlight {:on-press (fn [] - (reset! visible true) - (rn/dismiss-keyboard!)) - :on-long-press @on-long-press - :disabled in-popover?} + [rn/touchable-opacity {:on-press (fn [] + (reset! visible true) + (rn/dismiss-keyboard!)) + :on-long-press @on-long-press + :disabled in-popover?} [rn/view {:style (style/image-message style-opts) :accessibility-label :image-message} (when (or (:error @dimensions) (not (:loaded @dimensions))) @@ -383,7 +368,7 @@ (merge (dissoc style-opts :opacity) {:flex 1 :align-items :center :justify-content :center :position :absolute}) (if (:error @dimensions) - [icons/icon :main-icons/cancel] + [icons/icon :main-icons2/cancel] [rn/activity-indicator {:animating true}])]) [fast-image/fast-image {:style (dissoc style-opts :outgoing) :on-load (image-set-size dimensions) @@ -401,21 +386,12 @@ [message] [message.gap/gap message]) -(defmethod ->message constants/content-type-system-text [{:keys [content] :as message}] - [rn/view {:accessibility-label :chat-item} - [rn/view (style/system-message-body message) - [rn/view (style/message-view message) - [rn/view (style/message-view-content) - [render-parsed-text message (:parsed-text content)]]]]]) - (defn pin-message [{:keys [chat-id pinned] :as message}] (let [pinned-messages @(re-frame/subscribe [:chats/pinned chat-id])] (if (and (not pinned) (> (count pinned-messages) 2)) (do (js/setTimeout (fn [] (re-frame/dispatch [:dismiss-keyboard])) 500) - (re-frame/dispatch [:show-popover {:view :pin-limit - :message message - :prevent-closing? true}])) + (re-frame/dispatch [::models.pin-message/show-pin-limit-modal chat-id])) (re-frame/dispatch [::models.pin-message/send-pin-message (assoc message :pinned (not pinned))])))) (defn on-long-press-fn [on-long-press {:keys [pinned message-pin-enabled outgoing edit-enabled show-input? community?] :as message} content] @@ -447,15 +423,19 @@ :icon :main-icons2/pin :id (if pinned :unpin :pin)}]) [{:type :danger - :on-press #(re-frame/dispatch - [:chat.ui/delete-message-for-me message - config/delete-message-for-me-undo-time-limit-ms]) + :on-press (fn [] + (when pinned (pin-message message)) + (re-frame/dispatch + [:chat.ui/delete-message-for-me message + config/delete-message-for-me-undo-time-limit-ms])) :label (i18n/label :t/delete-for-me) :icon :main-icons2/delete :id :delete-for-me}] (when (and outgoing config/delete-message-enabled?) [{:type :danger - :on-press #(re-frame/dispatch [:chat.ui/soft-delete-message message]) + :on-press (fn [] + (when pinned (pin-message message)) + (re-frame/dispatch [:chat.ui/soft-delete-message message])) :label (i18n/label :t/delete-for-everyone) :icon :main-icons2/delete :id :delete-for-all}])))) @@ -470,7 +450,7 @@ (js/setTimeout #(on-long-press-fn on-long-press message content) 200)) (on-long-press-fn on-long-press message content)))] (reset! ref on-long-press) - [rn/touchable-highlight + [rn/touchable-opacity (when-not modal {:delay-long-press 100 :on-long-press on-long-press @@ -513,27 +493,27 @@ [{:type :main :on-press #(re-frame/dispatch [:chat.ui/reply-to-message message]) :id :reply - :icon :main-icons/reply-context20 + :icon :main-icons2/reply-context20 :label (i18n/label :t/message-reply)} {:type :main :on-press #(react/copy-to-clipboard (get content :text)) :id :copy - :icon :main-icons/copy-context20 + :icon :main-icons2/copy-context20 :label (i18n/label :t/copy-text)}] (when message-pin-enabled [{:type :main :on-press #(pin-message message) :id :pin - :icon :main-icons/pin-context20 + :icon :main-icons2/pin-context20 :label (if pinned (i18n/label :t/unpin) (i18n/label :t/pin))}]))))] (reset! ref on-long-press) [message-content-wrapper message - [rn/touchable-highlight (when-not modal - {:disabled in-popover? - :on-press (fn [] - (rn/dismiss-keyboard!) - (reset! show-timestamp? true)) - :delay-long-press 100 - :on-long-press on-long-press}) + [rn/touchable-opacity (when-not modal + {:disabled in-popover? + :on-press (fn [] + (rn/dismiss-keyboard!) + (reset! show-timestamp? true)) + :delay-long-press 100 + :on-long-press on-long-press}) [rn/view style/message-view-wrapper [message-timestamp message show-timestamp?] [rn/view (style/message-view message) @@ -554,21 +534,21 @@ (on-long-press (when-not outgoing [{:type :main - :icon :main-icons/stickers-context20 + :icon :main-icons2/stickers-context20 :on-press #(when pack (re-frame/dispatch [:chat.ui/show-profile from])) :label (i18n/label :t/see-sticker-set)}])))] (reset! ref on-long-press) [message-content-wrapper message - [rn/touchable-highlight (when-not modal - {:disabled in-popover? - :accessibility-label :sticker-message - :on-press (fn [_] - (when pack - (re-frame/dispatch [:stickers/open-sticker-pack (str pack)])) - (rn/dismiss-keyboard!)) - :delay-long-press 100 - :on-long-press on-long-press}) + [rn/touchable-opacity (when-not modal + {:disabled in-popover? + :accessibility-label :sticker-message + :on-press (fn [_] + (when pack + (re-frame/dispatch [:stickers/open-sticker-pack (str pack)])) + (rn/dismiss-keyboard!)) + :delay-long-press 100 + :on-long-press on-long-press}) [fast-image/fast-image {:style {:margin 10 :width 140 :height 140} :source {:uri (str (-> content :sticker :url) "&download=true")}}]] reaction-picker])) @@ -582,31 +562,31 @@ (concat [{:type :main :on-press #(re-frame/dispatch [:chat.ui/reply-to-message message]) :id :reply - :icon :main-icons/reply-context20 + :icon :main-icons2/reply-context20 :label (i18n/label :t/message-reply)} {:type :main :on-press #(re-frame/dispatch [:chat.ui/save-image-to-gallery (:image content)]) :id :save - :icon :main-icons/save-context20 + :icon :main-icons2/save-context20 :label (i18n/label :t/save-image-library)} {:type :main :on-press #(images/download-image-http (get-in message [:content :image]) preview/share) :id :share - :icon :main-icons/share-context20 + :icon :main-icons2/share-context20 :label (i18n/label :t/share-image)}] [{:type :danger :on-press #(re-frame/dispatch [:chat.ui/delete-message-for-me message config/delete-message-for-me-undo-time-limit-ms]) :label (i18n/label :t/delete-for-me) - :icon :main-icons/delete-context20 + :icon :main-icons2/delete-context20 :id :delete-for-me}] (when (and outgoing config/delete-message-enabled?) [{:type :danger :on-press #(re-frame/dispatch [:chat.ui/soft-delete-message message]) :label (i18n/label :t/delete-for-everyone) - :icon :main-icons/delete-context20 + :icon :main-icons2/delete-context20 :id :delete}]))))] (reset! ref on-long-press) [message-content-wrapper message @@ -625,29 +605,29 @@ (let [on-long-press (fn [] (on-long-press [{:type :main :on-press #(re-frame/dispatch [:chat.ui/reply-to-message message]) :label (i18n/label :t/message-reply) - :icon :main-icons/reply-context20 + :icon :main-icons2/reply :id :reply} {:type :main :on-press #(pin-message message) :label (i18n/label (if pinned :t/unpin-from-chat :t/pin-to-chat)) - :icon :main-icons/pin-context20 + :icon :main-icons2/pin-context20 :id (if pinned :unpin :pin)} {:type :danger :on-press #(re-frame/dispatch [:chat.ui/delete-message-for-me message config/delete-message-for-me-undo-time-limit-ms]) :label (i18n/label :t/delete-for-me) - :icon :main-icons/delete-context20 + :icon :main-icons2/delete-context20 :id :delete-for-me} (when (and outgoing config/delete-message-enabled?) {:type :danger :on-press #(re-frame/dispatch [:chat.ui/soft-delete-message message]) :label (i18n/label :t/delete-for-everyone) - :icon :main-icons/delete-context20 + :icon :main-icons2/delete-context20 :id :delete})]))] (reset! ref on-long-press) [message-content-wrapper message - [rn/touchable-highlight + [rn/touchable-opacity (when-not modal {:on-long-press on-long-press :on-press (fn [] @@ -667,15 +647,15 @@ (i18n/label :t/contact-request-pending)] [rn/activity-indicator {:animating true :size :small - :color colors/gray}]]) + :color quo.colors/gray}]]) (defn contact-request-status-accepted [] - [quo/text {:style {:color colors/green} + [quo/text {:style {:color quo.colors/green} :weight :medium} (i18n/label :t/contact-request-accepted)]) (defn contact-request-status-declined [] - [quo/text {:style {:color colors/red} + [quo/text {:style {:color quo.colors/red} :weight :medium} (i18n/label :t/contact-request-declined)]) @@ -734,11 +714,12 @@ #(on-emoji-press %))}])) on-long-press (atom nil)] [rn/view - {:style (merge (when (and (not in-pinned-view?) (or mentioned pinned)) {:background-color quo2.colors/primary-50-opa-5 + {:style (merge (when (and (not in-pinned-view?) (or mentioned pinned)) {:background-color colors/primary-50-opa-5 :border-radius 16 :margin-bottom 4}) (when (or mentioned pinned last-in-group?) {:margin-top 8}) {:margin-horizontal 8})} + (when pinned [rn/view {:style (style/pin-indicator-container)} [pinned-by-indicator pinned-by]]) @@ -748,9 +729,9 @@ [reaction-row/message-reactions message reactions nil on-emoji-press on-long-press]])) ;; TODO: pass on-open-drawer function (defn message-render-fn - [{:keys [outgoing] :as message} + [{:keys [outgoing whisper-timestamp] :as message} _ - {:keys [group-chat public? community? current-public-key show-input? message-pin-enabled edit-enabled]}] + {:keys [group-chat public? community? current-public-key show-input? edit-enabled]}] [chat-message (assoc message :incoming-group (and group-chat (not outgoing)) @@ -759,9 +740,10 @@ :community? community? :current-public-key current-public-key :show-input? show-input? - :message-pin-enabled message-pin-enabled + :message-pin-enabled true :in-pinned-view? true :pinned true + :timestamp-str (time/timestamp->time whisper-timestamp) :edit-enabled edit-enabled)]) (def list-key-fn #(or (:message-id %) (:value %))) @@ -770,13 +752,13 @@ (let [pinned-messages (vec (vals ( (count pinned-messages) 0) + [list/flat-list + {:data pinned-messages + :render-fn message-render-fn + :key-fn list-key-fn + :separator [rn/view {:background-color (colors/theme-colors colors/neutral-10 colors/neutral-80) :height 1 :margin-top 8}]}] + [rn/view {:style {:justify-content :center + :align-items :center + :flex 1 + :margin-top 20}} + [rn/view {:style {:width 120 + :height 120 + :justify-content :center + :align-items :center + :border-width 1}} [icons/icon :main-icons2/placeholder]] + [rn/text {:style (merge typography/paragraph-1 typography/font-semi-bold {:margin-top 20})} (i18n/label :t/no-pinned-messages)] + [rn/text {:style (merge typography/paragraph-2 typography/font-regular)} + (i18n/label (if community :t/no-pinned-messages-community-desc :t/no-pinned-messages-desc))]])])) -(defmethod ->message constants/content-type-pin [{:keys [from in-popover? timestamp-str chat-id] :as message} {:keys [modal close-modal]}] +(defn pin-system-message [{:keys [from in-popover? timestamp-str chat-id] :as message} {:keys [modal close-modal]}] (let [response-to (:response-to (:content message))] [rn/touchable-opacity {:on-press (fn [] - (re-frame/dispatch [:bottom-sheet/show-sheet - {:content #(pinned-messages-list chat-id)}])) + (>evt [:bottom-sheet/show-sheet + {:content #(pinned-messages-list chat-id)}])) :active-opacity 1 :style (merge {:flex-direction :row :margin-vertical 8} (style/message-wrapper message))} - [rn/view {:style {:width photos.style/default-size - :height photos.style/default-size - :margin-right 16 - :border-radius photos.style/default-size - :justify-content :center - :align-items :center - :background-color quo2.colors/primary-50-opa-10}} - [pin-icon quo2.colors/primary-50 16]] + [rn/view {:style {:width photos.style/default-size + :height photos.style/default-size + :margin-right 16 + :border-radius photos.style/default-size + :justify-content :center + :align-items :center + :background-color colors/primary-50-opa-10} + :accessibility-label :content-type-pin-icon} + [pin-icon colors/primary-50 16]] [rn/view [rn/view {:style {:flex-direction :row :align-items :center}} [rn/touchable-opacity {:style style/message-author-touchable :disabled in-popover? :on-press #(do (when modal (close-modal)) (re-frame/dispatch [:chat.ui/show-profile from]))} - [message-author-name from {:modal modal}]] - [rn/text {:style {:font-size 13}} (str " " (i18n/label :pinned-a-message))] + [message-author-name from {:modal modal} 20]] + [rn/text {:style {:font-size 13}} (str " " (i18n/label :t/pinned-a-message))] [rn/text {:style (merge {:padding-left 5 @@ -831,33 +827,45 @@ timestamp-str]] [quoted-message response-to (:quoted-message message) true]]])) +(defmethod ->message constants/content-type-system-text [{:keys [content quoted-message] :as message}] + (if quoted-message + [pin-system-message message] + [rn/view {:accessibility-label :chat-item} + [rn/view (style/system-message-body message) + [rn/view (style/message-view message) + [rn/view (style/message-view-content) + [render-parsed-text message (:parsed-text content)]]]]])) + (defn pinned-banner [chat-id] (let [pinned-messages ( pins-count 0) [rn/touchable-opacity - {:style {:height 50 - :background-color quo2.colors/primary-50-opa-20 - :flex-direction :row - :align-items :center - :padding-horizontal 20 - :padding-vertical 10} - :active-opacity 1 - :on-press (fn [] - (re-frame/dispatch [:bottom-sheet/show-sheet - {:content #(pinned-messages-list chat-id)}]))} - [pin-icon (quo2.colors/theme-colors quo2.colors/neutral-100 quo2.colors/white) 20] + {:accessibility-label :pinned-banner + :style {:height 50 + :background-color colors/primary-50-opa-20 + :flex-direction :row + :align-items :center + :padding-horizontal 20 + :padding-vertical 10} + :active-opacity 1 + :on-press (fn [] + (re-frame/dispatch [:bottom-sheet/show-sheet + {:content #(pinned-messages-list chat-id)}]))} + [pin-icon (colors/theme-colors colors/neutral-100 colors/white) 20] [rn/text {:number-of-lines 1 :style (merge typography/paragraph-2 {:margin-left 10 :margin-right 50 - :color (quo2.colors/theme-colors quo2.colors/neutral-100 quo2.colors/white)})} latest-pin-text] - [rn/view {:style {:position :absolute - :right 22 - :height 20 - :width 20 - :border-radius 8 - :justify-content :center - :align-items :center - :background-color quo2.colors/neutral-80-opa-5}} - [rn/text {:style (merge typography/label typography/font-medium {:color (quo2.colors/theme-colors quo2.colors/neutral-100 quo2.colors/white)})} pins-count]]]))) + :color (colors/theme-colors colors/neutral-100 colors/white)})} latest-pin-text] + [rn/view {:accessibility-label :pins-count + :style {:position :absolute + :right 22 + :height 20 + :width 20 + :border-radius 8 + :justify-content :center + :align-items :center + :background-color colors/neutral-80-opa-5}} + [rn/text {:style (merge typography/label typography/font-medium {:color (colors/theme-colors colors/neutral-100 colors/white)})} pins-count]]]))) + diff --git a/src/status_im/ui2/screens/chat/messages/pinned_message.cljs b/src/status_im/ui2/screens/chat/messages/pinned_message.cljs new file mode 100644 index 0000000000..52849dc023 --- /dev/null +++ b/src/status_im/ui2/screens/chat/messages/pinned_message.cljs @@ -0,0 +1,52 @@ +(ns status-im.ui2.screens.chat.messages.pinned-message + (:require [status-im.i18n.i18n :as i18n] + [quo.react :as react] + [quo2.reanimated :as reanimated] + [quo.react-native :as rn] + [quo2.foundations.typography :as typography] + [quo2.foundations.colors :as colors] + [status-im.switcher.constants :as constants] + [status-im.chat.models.pin-message :as models.pin-message] + [status-im.utils.handlers :refer [evt]] + [status-im.ui2.screens.chat.messages.style :as style] + [quo2.components.icon :as icons])) + +(defn pin-limit-popover [chat-id pinned-messages-list] + [:f> + (fn [] + (let [{:keys [width]} (constants/dimensions) + show-pin-limit-modal? (evt [::models.pin-message/hide-pin-limit-modal chat-id]) + (>evt [:bottom-sheet/show-sheet + {:content #(pinned-messages-list chat-id)}])) + :style (style/view-pinned-messages)} + [rn/text {:style (merge typography/paragraph-2 typography/font-medium {:color colors/white})} (i18n/label :t/view-pinned-messages)]]] + [rn/touchable-opacity {:accessibility-label :close-pin-limit-popover + :active-opacity 1 + :on-press #(>evt [::models.pin-message/hide-pin-limit-modal chat-id]) + :style {:position :absolute + :top 16 + :right 16}} + [icons/icon :main-icons2/close {:color (colors/theme-colors colors/white colors/neutral-100) + :height 8 + :width 8}]]]))]) diff --git a/src/status_im/ui2/screens/chat/messages/style.cljs b/src/status_im/ui2/screens/chat/messages/style.cljs new file mode 100644 index 0000000000..392db19695 --- /dev/null +++ b/src/status_im/ui2/screens/chat/messages/style.cljs @@ -0,0 +1,38 @@ +(ns status-im.ui2.screens.chat.messages.style + (:require [quo2.foundations.colors :as colors])) + +(defn pin-popover [width] + {:position :absolute + :width (- width 16) + :left 8 + :background-color (colors/theme-colors colors/neutral-80-opa-90 colors/white-opa-90) + :flex-direction :row + :border-radius 16 + :padding 12}) + +(defn pin-alert-container [] + {:background-color (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40) + :width 36 + :height 36 + :border-radius 18 + :justify-content :center + :align-items :center}) + +(defn pin-alert-circle [] + {:width 18 + :height 18 + :border-radius 9 + :border-color colors/danger-50-opa-40 + :border-width 1 + :justify-content :center + :align-items :center}) + +(defn view-pinned-messages [] + {:background-color colors/primary-60 + :border-radius 8 + :justify-content :center + :align-items :center + :padding-horizontal 8 + :padding-vertical 4 + :align-self :flex-start + :margin-top 10}) diff --git a/src/status_im/ui2/screens/chat/messages/view.cljs b/src/status_im/ui2/screens/chat/messages/view.cljs index 31abe83ad4..c019669c88 100644 --- a/src/status_im/ui2/screens/chat/messages/view.cljs +++ b/src/status_im/ui2/screens/chat/messages/view.cljs @@ -1,7 +1,7 @@ (ns status-im.ui2.screens.chat.messages.view (:require [reagent.core :as reagent] [quo.react-native :as rn] - [quo2.foundations.colors :as quo2.colors] + [quo2.foundations.colors :as colors] [status-im.constants :as constants] [status-im.utils.handlers :refer [evt]] [status-im.ui.components.list.views :as list] @@ -36,10 +36,10 @@ :align-items :center :justify-content :center :border-radius (/ 24 2) - :background-color (quo2.colors/theme-colors quo2.colors/neutral-80-opa-70 quo2.colors/white-opa-70)}} + :background-color (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70)}} ;;TODO icon from quo2 should be used instead! [icons/icon - :main-icons/arrow-down {:color (quo2.colors/theme-colors quo2.colors/white quo2.colors/neutral-100) + :main-icons/arrow-down {:color (colors/theme-colors colors/white colors/neutral-100) :width 12 :height 12}]]]) @@ -188,4 +188,4 @@ :inverted (when platform/ios? true) :style (when platform/android? {:scaleY -1})})] (when @show-floating-scroll-down-button - [floating-scroll-down-button show-input?])])) \ No newline at end of file + [floating-scroll-down-button show-input?])])) diff --git a/src/status_im/ui2/screens/chat/view.cljs b/src/status_im/ui2/screens/chat/view.cljs index a847594ed9..f5cc1ecc59 100644 --- a/src/status_im/ui2/screens/chat/view.cljs +++ b/src/status_im/ui2/screens/chat/view.cljs @@ -6,12 +6,13 @@ [status-im.utils.debounce :as debounce] [quo.react-native :as rn] [quo2.components.buttons.button :as quo2.button] - [quo2.foundations.colors :as quo2.colors] + [quo2.foundations.colors :as colors] [status-im.ui.components.react :as react] [status-im.navigation.state :as navigation.state] [status-im.ui2.screens.chat.messages.view :as messages] [status-im.utils.handlers :refer [evt]] [status-im.ui.components.icons.icons :as icons] + [status-im.ui2.screens.chat.messages.pinned-message :as pinned-message] [re-frame.db] [status-im.ui2.screens.chat.messages.message :as message])) @@ -31,14 +32,14 @@ :width 32 :accessibility-label "back-button" :on-press #(>evt [:navigate-back])} - [icons/icon :main-icons/arrow-left {:color (quo2.colors/theme-colors quo2.colors/neutral-100 quo2.colors/white)}]]) + [icons/icon :main-icons/arrow-left {:color (colors/theme-colors colors/neutral-100 colors/white)}]]) (defn search-button [] [quo2.button/button {:type :grey :size 32 :width 32 :accessibility-label "search-button"} - [icons/icon :main-icons/search {:color (quo2.colors/theme-colors quo2.colors/neutral-100 quo2.colors/white)}]]) + [icons/icon :main-icons/search {:color (colors/theme-colors colors/neutral-100 colors/white)}]]) (defn navigate-back-handler [] (when (and (not @navigation.state/curr-modal) (= (get @re-frame.db/app-db :view-id) :chat)) @@ -68,6 +69,7 @@ (if group-chat [invitation-requests chat-id admins] (when-not mutual-contact-requests-enabled? [add-contact-bar chat-id]))) + [pinned-message/pin-limit-popover chat-id message/pinned-messages-list] [message/pinned-banner chat-id] ;;MESSAGES LIST [messages/messages-view diff --git a/status-go-version.json b/status-go-version.json index 7fe515fbf8..944dbd09d2 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.111.6", - "commit-sha1": "5c3435c12fe430740e2b5d2a05066d423c61acec", - "src-sha256": "0v1scizr5lsbm4w3bysc2cl1v9wsd9b27bzjn80p4rw6gca7s2l1" + "version": "659ab120b66dca9521c93cbd8516582634059074", + "commit-sha1": "659ab120b66dca9521c93cbd8516582634059074", + "src-sha256": "1x5pasyf4ivrw92pil4ljl6cfw3g6wn4drgxxszcdzih0pwzggx4" } diff --git a/translations/en.json b/translations/en.json index 7e26a20f90..d61e3a3798 100644 --- a/translations/en.json +++ b/translations/en.json @@ -1810,6 +1810,9 @@ "pin-to-channel": "Pin to the channel", "unpin-from-chat": "Unpin from the chat", "unpin-from-channel": "Unpin from the channel", + "cannot-pin-title": "You can't pin this message!", + "cannot-pin-desc": "You can only pin a max of 3 messages.\nUnpin at least one to pin a new one.", + "view-pinned-messages": "View pinned messages", "copy-text": "Copy text", "edit-message": "Edit message", "save-image-library": "Save image to library", @@ -1831,5 +1834,7 @@ "share-invite-link": "Share an invite link", "pending-requests": "Pending requests", "received": "Received", - "sent": "Sent" + "sent": "Sent", + "no-pinned-messages-desc": "This chat doesn't have any pinned messages.", + "no-pinned-messages-community-desc": "This channel doesn't have any pinned messages." }