feat: edit message redesign
Signed-off-by: Brian Sztamfater <brian@status.im>
This commit is contained in:
parent
24ef84b890
commit
51ab735e57
Binary file not shown.
After Width: | Height: | Size: 525 B |
Binary file not shown.
After Width: | Height: | Size: 759 B |
|
@ -7,12 +7,15 @@
|
||||||
[quo.components.animated.pressable :as pressable]
|
[quo.components.animated.pressable :as pressable]
|
||||||
[status-im.ui.components.icons.icons :as icons]
|
[status-im.ui.components.icons.icons :as icons]
|
||||||
[status-im.ui.screens.chat.components.style :as styles]
|
[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]
|
(defn input-focus [text-input-ref]
|
||||||
(some-> ^js (quo.react/current-ref text-input-ref) .focus))
|
(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 {:style {:flex-direction :row}}
|
||||||
[rn/view {}
|
[rn/view {}
|
||||||
[icons/icon :tiny-icons/tiny-edit {:container-style {:margin-top 5}}]]
|
[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)
|
[icons/icon :main-icons/close-circle {:container-style (styles/close-button)
|
||||||
:color (:icon-02 @quo.colors/theme)}]]]])
|
: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]
|
(defn focus-input-on-edit [edit had-edit text-input-ref]
|
||||||
;;when we show edit we focus input
|
;;when we show edit we focus input
|
||||||
(when-not (= edit @had-edit)
|
(when-not (= edit @had-edit)
|
||||||
|
@ -33,6 +54,13 @@
|
||||||
(when edit
|
(when edit
|
||||||
(js/setTimeout #(input-focus text-input-ref) 250))))
|
(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]
|
(defn edit-message-wrapper [edit]
|
||||||
[rn/view {:style {:padding-horizontal 15
|
[rn/view {:style {:padding-horizontal 15
|
||||||
:border-top-width 1
|
:border-top-width 1
|
||||||
|
@ -40,6 +68,14 @@
|
||||||
:padding-vertical 8}}
|
:padding-vertical 8}}
|
||||||
[edit-message edit]])
|
[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]
|
(defn edit-message-auto-focus-wrapper [text-input-ref]
|
||||||
(let [had-edit (atom nil)]
|
(let [had-edit (atom nil)]
|
||||||
(fn []
|
(fn []
|
||||||
|
|
|
@ -587,7 +587,7 @@
|
||||||
:on-close on-close
|
:on-close on-close
|
||||||
:on-update-inset on-update}
|
:on-update-inset on-update}
|
||||||
[react/view
|
[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]
|
[reply/reply-message-auto-focus-wrapper-old text-input-ref]
|
||||||
;; We set the key so we can force a re-render as
|
;; We set the key so we can force a re-render as
|
||||||
;; it does not rely on ratom but just atoms
|
;; it does not rely on ratom but just atoms
|
||||||
|
|
Loading…
Reference in New Issue