From deaafded22a86e58b1a9b7c5ef9bcec8225df09d Mon Sep 17 00:00:00 2001 From: Alexander Pantyukhov Date: Mon, 21 Nov 2016 15:45:44 +0300 Subject: [PATCH] Blue hashtags (#435), other small status-related fixes --- .re-natal | 4 +- src/status_im/accounts/login/screen.cljs | 4 +- src/status_im/accounts/recover/screen.cljs | 1 - src/status_im/android/platform.cljs | 2 +- src/status_im/chat/views/command.cljs | 1 - src/status_im/chat/views/response.cljs | 1 - src/status_im/components/drawer/styles.cljs | 26 ++++++--- src/status_im/components/drawer/view.cljs | 49 +++++++++-------- src/status_im/components/main_tabs.cljs | 1 - src/status_im/components/react.cljs | 18 ++++--- .../components/status_view/view.cljs | 28 ++++++++++ src/status_im/components/toolbar/view.cljs | 1 - src/status_im/contacts/views/new_contact.cljs | 1 - .../discovery/views/discovery_list_item.cljs | 30 ++++------- src/status_im/new_group/screen.cljs | 1 - src/status_im/participants/views/remove.cljs | 1 - src/status_im/profile/screen.cljs | 54 +++++++++---------- src/status_im/profile/styles.cljs | 28 ++++++---- src/status_im/utils/utils.cljs | 9 +++- 19 files changed, 150 insertions(+), 110 deletions(-) create mode 100644 src/status_im/components/status_view/view.cljs diff --git a/.re-natal b/.re-natal index 3285a3516c..824fe96059 100644 --- a/.re-natal +++ b/.re-natal @@ -1,7 +1,7 @@ { "name": "StatusIm", "interface": "reagent", - "androidHost": "localhost", + "androidHost": "10.0.3.2", "modules": [ "react-native-contacts", "react-native-invertible-scroll-view", @@ -43,4 +43,4 @@ "dev": "env/dev", "prod": "env/prod" } -} +} \ No newline at end of file diff --git a/src/status_im/accounts/login/screen.cljs b/src/status_im/accounts/login/screen.cljs index 1e500fb54c..de4182ed49 100644 --- a/src/status_im/accounts/login/screen.cljs +++ b/src/status_im/accounts/login/screen.cljs @@ -3,7 +3,6 @@ (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] [status-im.components.react :refer [view text - text-input image linear-gradient touchable-highlight @@ -18,8 +17,7 @@ icon-search icon-back icon-qr - button-input - white-form-text-input]] + button-input]] [status-im.i18n :refer [label]] [status-im.accounts.login.styles :as st])) diff --git a/src/status_im/accounts/recover/screen.cljs b/src/status_im/accounts/recover/screen.cljs index 98979e36ab..da17d95995 100644 --- a/src/status_im/accounts/recover/screen.cljs +++ b/src/status_im/accounts/recover/screen.cljs @@ -3,7 +3,6 @@ (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] [status-im.components.react :refer [view text - text-input image linear-gradient touchable-highlight]] diff --git a/src/status_im/android/platform.cljs b/src/status_im/android/platform.cljs index f27e6d0c6f..65a6b61dd8 100644 --- a/src/status_im/android/platform.cljs +++ b/src/status_im/android/platform.cljs @@ -27,7 +27,7 @@ :margin-top 2 :margin-bottom 4 :margin-right 2 - :elevation 3} + :elevation 2} :tag {:flex-direction "column" :background-color "#7099e619" :border-radius 5 diff --git a/src/status_im/chat/views/command.cljs b/src/status_im/chat/views/command.cljs index af813a6d9d..550325970e 100644 --- a/src/status_im/chat/views/command.cljs +++ b/src/status_im/chat/views/command.cljs @@ -4,7 +4,6 @@ [status-im.components.react :refer [view icon text - text-input touchable-highlight]] [status-im.chat.styles.input :as st])) diff --git a/src/status_im/chat/views/response.cljs b/src/status_im/chat/views/response.cljs index abf858b3cd..8e1c054457 100644 --- a/src/status_im/chat/views/response.cljs +++ b/src/status_im/chat/views/response.cljs @@ -8,7 +8,6 @@ icon image text - text-input touchable-highlight web-view scroll-view]] diff --git a/src/status_im/components/drawer/styles.cljs b/src/status_im/components/drawer/styles.cljs index f9c63d4c5f..8444378205 100644 --- a/src/status_im/components/drawer/styles.cljs +++ b/src/status_im/components/drawer/styles.cljs @@ -43,20 +43,30 @@ :text-align :center}) (def status-container - {:margin-left 16 - :margin-right 16 - :margin-top (if p/ios? 5 5) - :align-items :center}) + {:margin-left 16 + :margin-right 16 + :flex-direction "row" + :margin-top (if p/ios? 5 5) + :justify-content :center}) -(def status-input - {:align-self "stretch" - :height 56 +(def status-view + {:height 56 + :width 200 :font-size 14 - :padding-left 4 :text-align :center :text-align-vertical :top :color text2-color}) +(def status-input + (merge status-view + {:padding-left 4 + :padding-top (if p/ios? 0 5)})) + +(def status-text + (merge status-view + {:padding-left 0 + :padding-top 5})) + (def menu-items-container {:flex 1 :margin-top 20 diff --git a/src/status_im/components/drawer/view.cljs b/src/status_im/components/drawer/view.cljs index ec244765fa..8ea9b4ffb5 100644 --- a/src/status_im/components/drawer/view.cljs +++ b/src/status_im/components/drawer/view.cljs @@ -12,10 +12,12 @@ touchable-without-feedback touchable-opacity]] [status-im.components.text-field.view :refer [text-field]] + [status-im.components.status-view.view :refer [status-view]] [status-im.components.drawer.styles :as st] [status-im.profile.validations :as v] [status-im.resources :as res] [status-im.utils.gfycat.core :refer [generate-gfy]] + [status-im.utils.utils :refer [clean-text]] [status-im.i18n :refer [label]] [status-im.components.react :refer [dismiss-keyboard!]] [clojure.string :as str] @@ -39,18 +41,13 @@ :font :default} name]]) -(defn clean-text [s] - (-> s - (str/replace #"\n" " ") - (str/replace #"\r" "") - (str/trim))) - (defn drawer-menu [] (let [account (subscribe [:get-current-account]) profile (subscribe [:get :profile-edit]) keyboard-height (subscribe [:get :keyboard-height]) - placeholder (generate-gfy)] + placeholder (generate-gfy) + status-edit? (r/atom false)] (fn [] (let [{:keys [name photo-path status]} @account {new-name :name new-status :status} @profile] @@ -73,19 +70,28 @@ :on-end-editing #(when (and new-name (not (str/blank? new-name))) (dispatch [:account-update {:name (clean-text new-name)}]))}]] [view st/status-container - [text-input {:style st/status-input - :editable true - :multiline true - :blur-on-submit true - :maxLength 140 - :accessibility-label :input - :placeholder (label :t/profile-no-status) - :on-change-text #(dispatch [:set-in [:profile-edit :status] %]) - :on-blur (fn [] - (when (and new-status (not (str/blank? new-status))) - (dispatch [:check-status-change (clean-text new-status)]) - (dispatch [:account-update {:status (clean-text new-status)}]))) - :default-value status}]] + (if @status-edit? + [text-input {:style st/status-input + :editable true + :multiline true + :auto-focus true + :blur-on-submit true + :focus status-edit? + :maxLength 140 + :accessibility-label :input + :placeholder (label :t/profile-no-status) + :on-change-text (fn [t] + (dispatch [:set-in [:profile-edit :status] (clean-text t)])) + :on-submit-editing (fn [] + (reset! status-edit? false) + (when (and new-status (not (str/blank? new-status))) + (dispatch [:check-status-change (clean-text new-status)]) + (dispatch [:account-update {:status (clean-text new-status)}]))) + :default-value status}] + [status-view {:style st/status-text + :on-press #(reset! status-edit? true) + :number-of-lines 3 + :status status}])] [view st/menu-items-container [menu-item {:name (label :t/profile) :handler #(dispatch [:navigate-to :my-profile])}] @@ -96,8 +102,7 @@ [menu-item {:name (label :t/discovery) :handler #(dispatch [:navigate-to :discovery])}] [menu-item {:name (label :t/contacts) - :handler #(dispatch [:navigate-to :contact-list])}] - ] + :handler #(dispatch [:navigate-to :contact-list])}]] (when (zero? @keyboard-height) [text {:style st/feedback :font :default} (label :t/feedback)]) diff --git a/src/status_im/components/main_tabs.cljs b/src/status_im/components/main_tabs.cljs index 2749c6d52a..e087ad391a 100644 --- a/src/status_im/components/main_tabs.cljs +++ b/src/status_im/components/main_tabs.cljs @@ -5,7 +5,6 @@ [reagent.core :as r] [status-im.components.react :refer [view animated-view - text-input text image touchable-highlight diff --git a/src/status_im/components/react.cljs b/src/status_im/components/react.cljs index a3b4940ca3..ac82e60b3e 100644 --- a/src/status_im/components/react.cljs +++ b/src/status_im/components/react.cljs @@ -67,13 +67,17 @@ (assoc :style (merge style font)))] ts)))))) -(defn text-input [props text] - [text-input-class (merge - {:underline-color-android :transparent - :placeholder-text-color st/text2-color - :placeholder "Type" - :value text} - props)]) +(defn text-input [{:keys [font style] :as opts + :or {font :default}} text] + (let [font (get-in platform-specific [:fonts (keyword font)])] + [text-input-class (merge + {:underline-color-android :transparent + :placeholder-text-color st/text2-color + :placeholder "Type" + :value text} + (-> opts + (dissoc :font) + (assoc :style (merge style font))))])) (defn icon ([n] (icon n {})) diff --git a/src/status_im/components/status_view/view.cljs b/src/status_im/components/status_view/view.cljs new file mode 100644 index 0000000000..7fb752da85 --- /dev/null +++ b/src/status_im/components/status_view/view.cljs @@ -0,0 +1,28 @@ +(ns status-im.components.status-view.view + (:require-macros [status-im.utils.views :refer [defview]]) + (:require [re-frame.core :refer [subscribe dispatch]] + [clojure.string :as str] + [status-im.components.react :refer [view text]] + [status-im.utils.platform :refer [platform-specific]])) + +(defn tag-view [tag] + [text {:style {:color "#7099e6"} + :font :medium} + (str tag " ")]) + +(defn status-view [{:keys [style + message-id + status + on-press + number-of-lines] + :or {message-id "msg"}}] + [text {:style style + :on-press on-press + :number-of-lines number-of-lines + :font :default} + (for [[i status] (map-indexed vector (str/split status #" "))] + (if (.startsWith status "#") + ^{:key (str "item-" message-id "-" i)} + [tag-view status] + ^{:key (str "item-" message-id "-" i)} + (str status " ")))]) \ No newline at end of file diff --git a/src/status_im/components/toolbar/view.cljs b/src/status_im/components/toolbar/view.cljs index 5136dd4b00..5917f16844 100644 --- a/src/status_im/components/toolbar/view.cljs +++ b/src/status_im/components/toolbar/view.cljs @@ -1,7 +1,6 @@ (ns status-im.components.toolbar.view (:require [re-frame.core :refer [subscribe dispatch]] [status-im.components.react :refer [view - text-input icon text image diff --git a/src/status_im/contacts/views/new_contact.cljs b/src/status_im/contacts/views/new_contact.cljs index 9891097bdb..38418fcbf7 100644 --- a/src/status_im/contacts/views/new_contact.cljs +++ b/src/status_im/contacts/views/new_contact.cljs @@ -4,7 +4,6 @@ [clojure.string :as str] [status-im.components.react :refer [view text - text-input image linear-gradient touchable-highlight]] diff --git a/src/status_im/discovery/views/discovery_list_item.cljs b/src/status_im/discovery/views/discovery_list_item.cljs index f55ec28d6c..cbb2dc3ec1 100644 --- a/src/status_im/discovery/views/discovery_list_item.cljs +++ b/src/status_im/discovery/views/discovery_list_item.cljs @@ -2,33 +2,19 @@ (:require-macros [status-im.utils.views :refer [defview]]) (:require [re-frame.core :refer [subscribe dispatch]] [clojure.string :as str] - [status-im.components.react :refer [view text image touchable-highlight]] + [status-im.components.react :refer [view text touchable-highlight]] [status-im.discovery.styles :as st] + [status-im.components.status-view.view :refer [status-view]] [status-im.utils.gfycat.core :refer [generate-gfy]] [status-im.utils.identicon :refer [identicon]] - [status-im.i18n :refer [label]] [status-im.components.chat-icon.screen :as ci] - [status-im.utils.platform :refer [platform-specific]] - [taoensso.timbre :as log])) - -(defn tag-view [tag] - [text {:style {:color "#7099e6"} - :font :medium} - (str tag " ")]) - -(defn status-view [item-style {:keys [message-id status]}] - [text {:style (:status-text item-style) - :font :default} - (for [[i status] (map-indexed vector (str/split status #" "))] - (if (.startsWith status "#") - ^{:key (str "item-" message-id "-" i)} - [tag-view status] - ^{:key (str "item-" message-id "-" i)} - (str status " ")))]) + [status-im.utils.platform :refer [platform-specific]])) (defview discovery-list-item [{{:keys [name photo-path - whisper-id] + whisper-id + message-id + status] :as message} :message show-separator? :show-separator? {account-photo-path :photo-path @@ -49,7 +35,9 @@ (not (str/blank? contact-name)) contact-name (not (str/blank? name)) name :else (generate-gfy))] - [status-view item-style message]] + [status-view {:id message-id + :style (:status-text item-style) + :status status}]] [view (merge st/popular-list-item-avatar-container (:icon item-style)) [touchable-highlight {:on-press #(dispatch [:start-chat whisper-id])} diff --git a/src/status_im/new_group/screen.cljs b/src/status_im/new_group/screen.cljs index 127b595e05..29a537df75 100644 --- a/src/status_im/new_group/screen.cljs +++ b/src/status_im/new_group/screen.cljs @@ -3,7 +3,6 @@ (:require [re-frame.core :refer [subscribe dispatch]] [status-im.resources :as res] [status-im.components.react :refer [view - text-input text image icon diff --git a/src/status_im/participants/views/remove.cljs b/src/status_im/participants/views/remove.cljs index 730cd84b51..cd03d93715 100644 --- a/src/status_im/participants/views/remove.cljs +++ b/src/status_im/participants/views/remove.cljs @@ -3,7 +3,6 @@ (:require [re-frame.core :refer [subscribe dispatch]] [status-im.resources :as res] [status-im.components.react :refer [view - text-input text image touchable-highlight diff --git a/src/status_im/profile/screen.cljs b/src/status_im/profile/screen.cljs index 68fb386de0..1fe617d592 100644 --- a/src/status_im/profile/screen.cljs +++ b/src/status_im/profile/screen.cljs @@ -21,6 +21,7 @@ [status-im.components.status-bar :refer [status-bar]] [status-im.components.text-field.view :refer [text-field]] [status-im.components.selectable-field.view :refer [selectable-field]] + [status-im.components.status-view.view :refer [status-view]] [status-im.utils.phone-number :refer [format-phone-number]] [status-im.utils.image-processing :refer [img->base64]] [status-im.utils.platform :refer [platform-specific]] @@ -28,9 +29,9 @@ [status-im.profile.validations :as v] [status-im.profile.styles :as st] [status-im.utils.random :refer [id]] + [status-im.utils.utils :refer [clean-text]] [status-im.components.image-button.view :refer [show-qr-button]] - [status-im.i18n :refer [label]] - [taoensso.timbre :as log])) + [status-im.i18n :refer [label]])) (defn toolbar [{:keys [account edit?]}] (let [profile-edit-data-valid? (s/valid? ::v/profile account)] @@ -56,22 +57,10 @@ :style (st/ok-btn-icon profile-edit-data-valid?)}] [icon :dots st/edit-btn-icon])]]])) -(defn- get-text - [word] - (let [props (merge {:key (id)} - (if (str/starts-with? word "#") - {:style st/hashtag} - {}))] - [text props (str word " ")])) - -(defn- highlight-tags - [status] - (->> - (str/split status #" ") - (map get-text))) - (defn status-image-view [_] (let [component (r/current-component) + just-opened? (r/atom true) + input-ref (r/atom nil) set-status-height #(let [height (-> (.-nativeEvent %) (.-contentSize) (.-height))] @@ -102,15 +91,23 @@ :wrapper-style st/username-wrapper :value name :on-change-text #(dispatch [:set-in [:profile-edit :name] %])}] - [text-input {:style (st/status-input (:height (r/state component))) - :on-change #(set-status-height %) - :on-content-size-change #(set-status-height %) - :maxLength 140 - :multiline true - :editable edit? - :placeholder (label :t/profile-no-status) - :on-change-text #(dispatch [:set-in [:profile-edit :status] %]) - :default-value status}]])}))) + (if (or edit? @just-opened?) + [text-input {:ref #(reset! input-ref %) + :style (st/status-input (:height (r/state component))) + :multiline true + :editable true + :blur-on-submit true + :on-content-size-change #(do (set-status-height %) + (reset! just-opened? false)) + :max-length 140 + :placeholder (label :t/profile-no-status) + :on-change-text (fn [t] + (dispatch [:set-in [:profile-edit :status] (clean-text t)])) + :on-submit-editing (fn [] + (.blur @input-ref)) + :default-value status}] + [status-view {:style (st/status-text (:height (r/state component))) + :status status}])])}))) (defview profile [] [{whisper-identity :whisper-identity @@ -189,9 +186,10 @@ changed-account [:get :profile-edit]] (let [{:keys [phone address - public-key] :as account} (if edit? - changed-account - current-account)] + public-key] + :as account} (if edit? + changed-account + current-account)] [scroll-view {:style st/profile :bounces false} [status-bar] diff --git a/src/status_im/profile/styles.cljs b/src/status_im/profile/styles.cljs index 9454eaf784..ad439bfb50 100644 --- a/src/status_im/profile/styles.cljs +++ b/src/status_im/profile/styles.cljs @@ -72,16 +72,26 @@ :margin-left 55 :margin-right 55}) +(defn status-view [height] + {:align-self "stretch" + :font-size 14 + :height height + :min-height 30 + :text-align "center" + :color text2-color}) + (defn status-input [height] - {:align-self "stretch" - :margin-left (if p/ios? 22 16) - :margin-right 16 - :margin-top (if p/ios? 6 1) - :font-size 14 - :height height - :min-height 30 - :text-align "center" - :color text2-color}) + (merge (status-view height) + {:margin-left (if p/ios? 21 16) + :margin-right 16 + :margin-top (if p/ios? 6 1)})) + +(defn status-text [height] + (merge (status-view (- height (if p/ios? 5 10))) + {:margin-left 18 + :margin-right 18 + :margin-top 11 + :margin-bottom 0})) (def btns-container {:margin-top 0 diff --git a/src/status_im/utils/utils.cljs b/src/status_im/utils/utils.cljs index 9ecea0ac75..f79fd0b08e 100644 --- a/src/status_im/utils/utils.cljs +++ b/src/status_im/utils/utils.cljs @@ -1,6 +1,7 @@ (ns status-im.utils.utils (:require [status-im.constants :as const] - [reagent.core :as r])) + [reagent.core :as r] + [clojure.string :as str])) (defn require [module] (if (exists? js/window) @@ -54,6 +55,12 @@ (str (subs s 0 (- max 3)) "...") s)) +(defn clean-text [s] + (-> s + (str/replace #"\n" " ") + (str/replace #"\r" "") + (str/trim))) + (defn first-index [cond coll] (loop [index 0