diff --git a/src/status_im/ui/screens/desktop/main/add_new/styles.cljs b/src/status_im/ui/screens/desktop/main/add_new/styles.cljs index bde4bd29ff..2145ccf826 100644 --- a/src/status_im/ui/screens/desktop/main/add_new/styles.cljs +++ b/src/status_im/ui/screens/desktop/main/add_new/styles.cljs @@ -37,6 +37,9 @@ :margin-right 12 :border-radius 8}) +(def add-pub-chat-input + (assoc add-contact-input :padding-left 10)) + (defn add-contact-button [error?] {:width 140 :height 45 @@ -72,3 +75,12 @@ (def suggested-topic-text {:font-size 25.6 :color colors/white}) + +(def topic-placeholder + {:flex 0 + :top -63 + :left 5 + :font-size 14 + :width 5 + :height 16 + :margin-bottom -16}) diff --git a/src/status_im/ui/screens/desktop/main/add_new/views.cljs b/src/status_im/ui/screens/desktop/main/add_new/views.cljs index db2ae152d6..2ee2996754 100644 --- a/src/status_im/ui/screens/desktop/main/add_new/views.cljs +++ b/src/status_im/ui/screens/desktop/main/add_new/views.cljs @@ -27,14 +27,19 @@ {:style (styles/add-contact-button-text nil)} (i18n/label :start-chat)]]]]) +(defn topic-input-placeholder [] + [react/text {:style styles/topic-placeholder} "#"]) + +(defn on-topic-change [e] + (let [text (.. e -nativeEvent -text)] + (re-frame/dispatch [:set :public-group-topic text]))) + (views/defview new-contact [] (views/letsubs [new-contact-identity [:get :contacts/new-identity] contacts [:all-added-people-contacts] chat-error [:new-identity-error] topic [:get :public-group-topic] - topic-error [:new-topic-error-message] - account [:get-current-account] - topic-input-ref (atom nil)] + topic-error [:new-topic-error-message]] [react/scroll-view [react/view {:style styles/new-contact-view} ^{:key "newcontact"} @@ -83,20 +88,13 @@ [react/text {:style styles/new-contact-subtitle} (i18n/label :public-group-topic)] [react/view {:style styles/new-contact-separator}] [react/view {:style styles/add-contact-edit-view} - [react/view {:style {:flex 1}} - [react/text-input {:flex 1 - :ref #(when (and (nil? @topic-input-ref) %) - (.setNativeProps % (js-obj "text" "#")) - (reset! topic-input-ref %)) - :style styles/add-contact-input - :font :default - :selection-color colors/hawkes-blue - :on-change (fn [e] - (let [native-event (.-nativeEvent e) - text (.-text native-event) - [_ before after] (first (re-seq #"(.*)\#(.*)" text))] - (.setNativeProps @topic-input-ref (js-obj "text" (str "#" before after))) - (re-frame/dispatch [:set :public-group-topic (subs text 1)])))}]] + [react/view {:flex 1 + :style styles/add-pub-chat-input} + [react/text-input {:flex 1 + :font :default + :selection-color colors/hawkes-blue + :placeholder "" + :on-change on-topic-change}]] [react/touchable-highlight {:disabled topic-error :on-press #(when-not topic-error (do @@ -105,6 +103,7 @@ [react/view {:style (styles/add-contact-button topic-error)} [react/text {:style (styles/add-contact-button-text topic-error)} (i18n/label :new-public-group-chat)]]]] + [topic-input-placeholder] [react/text {:style styles/new-contact-subtitle} (i18n/label :selected-for-you)] [react/view {:style styles/suggested-contacts} (doall