diff --git a/resources/images/icons/edit_connector@2x.png b/resources/images/icons/edit_connector@2x.png new file mode 100644 index 0000000000..58d7e3b1f4 Binary files /dev/null and b/resources/images/icons/edit_connector@2x.png differ diff --git a/resources/images/icons/edit_connector@3x.png b/resources/images/icons/edit_connector@3x.png new file mode 100644 index 0000000000..bb1ab6c365 Binary files /dev/null and b/resources/images/icons/edit_connector@3x.png differ diff --git a/src/status_im/ui/screens/chat/components/edit.cljs b/src/status_im/ui/screens/chat/components/edit.cljs index 921624d996..83f54cb3f9 100644 --- a/src/status_im/ui/screens/chat/components/edit.cljs +++ b/src/status_im/ui/screens/chat/components/edit.cljs @@ -7,12 +7,15 @@ [quo.components.animated.pressable :as pressable] [status-im.ui.components.icons.icons :as icons] [status-im.ui.screens.chat.components.style :as styles] - [re-frame.core :as re-frame])) + [re-frame.core :as re-frame] + [quo2.foundations.colors :as quo2.colors :refer [theme-colors]] + [quo2.components.button :as quo2.button] + [quo2.components.text :as quo2.text])) (defn input-focus [text-input-ref] (some-> ^js (quo.react/current-ref text-input-ref) .focus)) -(defn edit-message [] +(defn edit-message-old [] [rn/view {:style {:flex-direction :row}} [rn/view {} [icons/icon :tiny-icons/tiny-edit {:container-style {:margin-top 5}}]] @@ -26,6 +29,24 @@ [icons/icon :main-icons/close-circle {:container-style (styles/close-button) :color (:icon-02 @quo.colors/theme)}]]]]) +(defn edit-message [] + [rn/view {:style {:flex-direction :row :height 24}} + [rn/view {:style (styles/reply-content)} + [icons/icon :main-icons/edit-connector {:color (theme-colors quo2.colors/neutral-40 quo2.colors/neutral-60) + :container-style {:position :absolute :left 10 :bottom -4 :width 16 :height 16}}] + [rn/view {:style {:position :absolute :left 36 :right 54 :top 3 :flex-direction :row :align-items :center}} + [quo2.text/text {:weight :medium + :size :paragraph-2} + (i18n/label :t/editing-message)]]] + [quo2.button/button {:width 24 + :size 24 + :type :outline + :accessibility-label :reply-cancel-button + :on-press #(re-frame/dispatch [:chat.ui/cancel-message-edit])} + [icons/icon :main-icons/close {:width 16 + :height 16 + :color (theme-colors quo2.colors/black quo2.colors/neutral-40)}]]]) + (defn focus-input-on-edit [edit had-edit text-input-ref] ;;when we show edit we focus input (when-not (= edit @had-edit) @@ -33,6 +54,13 @@ (when edit (js/setTimeout #(input-focus text-input-ref) 250)))) +(defn edit-message-wrapper-old [edit] + [rn/view {:style {:padding-horizontal 15 + :border-top-width 1 + :border-top-color (:ui-01 @quo.colors/theme) + :padding-vertical 8}} + [edit-message-old edit]]) + (defn edit-message-wrapper [edit] [rn/view {:style {:padding-horizontal 15 :border-top-width 1 @@ -40,6 +68,14 @@ :padding-vertical 8}} [edit-message edit]]) +(defn edit-message-auto-focus-wrapper-old [text-input-ref] + (let [had-edit (atom nil)] + (fn [] + (let [edit @(re-frame/subscribe [:chats/edit-message])] + (focus-input-on-edit edit had-edit text-input-ref) + (when edit + [edit-message-wrapper-old]))))) + (defn edit-message-auto-focus-wrapper [text-input-ref] (let [had-edit (atom nil)] (fn [] diff --git a/src/status_im/ui/screens/chat/views.cljs b/src/status_im/ui/screens/chat/views.cljs index 81369ae44f..657c7b36c4 100644 --- a/src/status_im/ui/screens/chat/views.cljs +++ b/src/status_im/ui/screens/chat/views.cljs @@ -587,7 +587,7 @@ :on-close on-close :on-update-inset on-update} [react/view - [edit/edit-message-auto-focus-wrapper text-input-ref] + [edit/edit-message-auto-focus-wrapper-old text-input-ref] [reply/reply-message-auto-focus-wrapper-old text-input-ref] ;; We set the key so we can force a re-render as ;; it does not rely on ratom but just atoms