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

feat: edit message redesign 

Signed-off-by: Brian Sztamfater <brian@status.im>
This commit is contained in:
Brian Sztamfater 2022-08-04 13:15:58 -03:00
parent 24ef84b890
commit 51ab735e57
No known key found for this signature in database
GPG Key ID: 59EB921E0706B48F
4 changed files with 39 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/images/icons/edit_connector@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 525 B

BIN
resources/images/icons/edit_connector@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 759 B

40
src/status_im/ui/screens/chat/components/edit.cljs
View File

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

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

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