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

Blue hashtags (#435), other small status-related fixes

This commit is contained in:
Alexander Pantyukhov 2016-11-21 15:45:44 +03:00 committed by Alexander Pantyukhov
parent 4c876587ed
commit deaafded22
19 changed files with 150 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.re-natal
View File

@ -1,7 +1,7 @@
{ {
"name": "StatusIm", "name": "StatusIm",
"interface": "reagent", "interface": "reagent",
"androidHost": "localhost", "androidHost": "10.0.3.2",
"modules": [ "modules": [
"react-native-contacts", "react-native-contacts",
"react-native-invertible-scroll-view", "react-native-invertible-scroll-view",
@ -43,4 +43,4 @@
"dev": "env/dev", "dev": "env/dev",
"prod": "env/prod" "prod": "env/prod"
} }
} }

4
src/status_im/accounts/login/screen.cljs
View File

@ -3,7 +3,6 @@
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[status-im.components.react :refer [view [status-im.components.react :refer [view
text text
text-input
image image
linear-gradient linear-gradient
touchable-highlight touchable-highlight
@ -18,8 +17,7 @@
icon-search icon-search
icon-back icon-back
icon-qr icon-qr
button-input button-input]]
white-form-text-input]]
[status-im.i18n :refer [label]] [status-im.i18n :refer [label]]
[status-im.accounts.login.styles :as st])) [status-im.accounts.login.styles :as st]))

1
src/status_im/accounts/recover/screen.cljs
View File

@ -3,7 +3,6 @@
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[status-im.components.react :refer [view [status-im.components.react :refer [view
text text
text-input
image image
linear-gradient linear-gradient
touchable-highlight]] touchable-highlight]]

2
src/status_im/android/platform.cljs
View File

@ -27,7 +27,7 @@
:margin-top 2 :margin-top 2
:margin-bottom 4 :margin-bottom 4
:margin-right 2 :margin-right 2
:elevation 3} :elevation 2}
:tag {:flex-direction "column" :tag {:flex-direction "column"
:background-color "#7099e619" :background-color "#7099e619"
:border-radius 5 :border-radius 5

1
src/status_im/chat/views/command.cljs
View File

@ -4,7 +4,6 @@
[status-im.components.react :refer [view [status-im.components.react :refer [view
icon icon
text text
text-input
touchable-highlight]] touchable-highlight]]
[status-im.chat.styles.input :as st])) [status-im.chat.styles.input :as st]))

1
src/status_im/chat/views/response.cljs
View File

@ -8,7 +8,6 @@
icon icon
image image
text text
text-input
touchable-highlight touchable-highlight
web-view web-view
scroll-view]] scroll-view]]

26
src/status_im/components/drawer/styles.cljs
View File

@ -43,20 +43,30 @@
:text-align :center}) :text-align :center})
(def status-container (def status-container
{:margin-left 16 {:margin-left 16
:margin-right 16 :margin-right 16
:margin-top (if p/ios? 5 5) :flex-direction "row"
:align-items :center}) :margin-top (if p/ios? 5 5)
:justify-content :center})
(def status-input (def status-view
{:align-self "stretch" {:height 56
:height 56 :width 200
:font-size 14 :font-size 14
:padding-left 4
:text-align :center :text-align :center
:text-align-vertical :top :text-align-vertical :top
:color text2-color}) :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 (def menu-items-container
{:flex 1 {:flex 1
:margin-top 20 :margin-top 20

49
src/status_im/components/drawer/view.cljs
View File

@ -12,10 +12,12 @@
touchable-without-feedback touchable-without-feedback
touchable-opacity]] touchable-opacity]]
[status-im.components.text-field.view :refer [text-field]] [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.components.drawer.styles :as st]
[status-im.profile.validations :as v] [status-im.profile.validations :as v]
[status-im.resources :as res] [status-im.resources :as res]
[status-im.utils.gfycat.core :refer [generate-gfy]] [status-im.utils.gfycat.core :refer [generate-gfy]]
[status-im.utils.utils :refer [clean-text]]
[status-im.i18n :refer [label]] [status-im.i18n :refer [label]]
[status-im.components.react :refer [dismiss-keyboard!]] [status-im.components.react :refer [dismiss-keyboard!]]
[clojure.string :as str] [clojure.string :as str]
@ -39,18 +41,13 @@
:font :default} :font :default}
name]]) name]])
(defn clean-text [s]
(-> s
(str/replace #"\n" " ")
(str/replace #"\r" "")
(str/trim)))
(defn drawer-menu [] (defn drawer-menu []
(let (let
[account (subscribe [:get-current-account]) [account (subscribe [:get-current-account])
profile (subscribe [:get :profile-edit]) profile (subscribe [:get :profile-edit])
keyboard-height (subscribe [:get :keyboard-height]) keyboard-height (subscribe [:get :keyboard-height])
placeholder (generate-gfy)] placeholder (generate-gfy)
status-edit? (r/atom false)]
(fn [] (fn []
(let [{:keys [name photo-path status]} @account (let [{:keys [name photo-path status]} @account
{new-name :name new-status :status} @profile] {new-name :name new-status :status} @profile]
@ -73,19 +70,28 @@
:on-end-editing #(when (and new-name (not (str/blank? new-name))) :on-end-editing #(when (and new-name (not (str/blank? new-name)))
(dispatch [:account-update {:name (clean-text new-name)}]))}]] (dispatch [:account-update {:name (clean-text new-name)}]))}]]
[view st/status-container [view st/status-container
[text-input {:style st/status-input (if @status-edit?
:editable true [text-input {:style st/status-input
:multiline true :editable true
:blur-on-submit true :multiline true
:maxLength 140 :auto-focus true
:accessibility-label :input :blur-on-submit true
:placeholder (label :t/profile-no-status) :focus status-edit?
:on-change-text #(dispatch [:set-in [:profile-edit :status] %]) :maxLength 140
:on-blur (fn [] :accessibility-label :input
(when (and new-status (not (str/blank? new-status))) :placeholder (label :t/profile-no-status)
(dispatch [:check-status-change (clean-text new-status)]) :on-change-text (fn [t]
(dispatch [:account-update {:status (clean-text new-status)}]))) (dispatch [:set-in [:profile-edit :status] (clean-text t)]))
:default-value status}]] :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 [view st/menu-items-container
[menu-item {:name (label :t/profile) [menu-item {:name (label :t/profile)
:handler #(dispatch [:navigate-to :my-profile])}] :handler #(dispatch [:navigate-to :my-profile])}]
@ -96,8 +102,7 @@
[menu-item {:name (label :t/discovery) [menu-item {:name (label :t/discovery)
:handler #(dispatch [:navigate-to :discovery])}] :handler #(dispatch [:navigate-to :discovery])}]
[menu-item {:name (label :t/contacts) [menu-item {:name (label :t/contacts)
:handler #(dispatch [:navigate-to :contact-list])}] :handler #(dispatch [:navigate-to :contact-list])}]]
]
(when (zero? @keyboard-height) (when (zero? @keyboard-height)
[text {:style st/feedback [text {:style st/feedback
:font :default} (label :t/feedback)]) :font :default} (label :t/feedback)])

1
src/status_im/components/main_tabs.cljs
View File

@ -5,7 +5,6 @@
[reagent.core :as r] [reagent.core :as r]
[status-im.components.react :refer [view [status-im.components.react :refer [view
animated-view animated-view
text-input
text text
image image
touchable-highlight touchable-highlight

18
src/status_im/components/react.cljs
View File

@ -67,13 +67,17 @@
(assoc :style (merge style font)))] (assoc :style (merge style font)))]
ts)))))) ts))))))
(defn text-input [props text] (defn text-input [{:keys [font style] :as opts
[text-input-class (merge :or {font :default}} text]
{:underline-color-android :transparent (let [font (get-in platform-specific [:fonts (keyword font)])]
:placeholder-text-color st/text2-color [text-input-class (merge
:placeholder "Type" {:underline-color-android :transparent
:value text} :placeholder-text-color st/text2-color
props)]) :placeholder "Type"
:value text}
(-> opts
(dissoc :font)
(assoc :style (merge style font))))]))
(defn icon (defn icon
([n] (icon n {})) ([n] (icon n {}))

28
src/status_im/components/status_view/view.cljs Normal file
View File

@ -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 " ")))])

1
src/status_im/components/toolbar/view.cljs
View File

@ -1,7 +1,6 @@
(ns status-im.components.toolbar.view (ns status-im.components.toolbar.view
(:require [re-frame.core :refer [subscribe dispatch]] (:require [re-frame.core :refer [subscribe dispatch]]
[status-im.components.react :refer [view [status-im.components.react :refer [view
text-input
icon icon
text text
image image

1
src/status_im/contacts/views/new_contact.cljs
View File

@ -4,7 +4,6 @@
[clojure.string :as str] [clojure.string :as str]
[status-im.components.react :refer [view [status-im.components.react :refer [view
text text
text-input
image image
linear-gradient linear-gradient
touchable-highlight]] touchable-highlight]]

30
src/status_im/discovery/views/discovery_list_item.cljs
View File

@ -2,33 +2,19 @@
(:require-macros [status-im.utils.views :refer [defview]]) (:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch]] (:require [re-frame.core :refer [subscribe dispatch]]
[clojure.string :as str] [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.discovery.styles :as st]
[status-im.components.status-view.view :refer [status-view]]
[status-im.utils.gfycat.core :refer [generate-gfy]] [status-im.utils.gfycat.core :refer [generate-gfy]]
[status-im.utils.identicon :refer [identicon]] [status-im.utils.identicon :refer [identicon]]
[status-im.i18n :refer [label]]
[status-im.components.chat-icon.screen :as ci] [status-im.components.chat-icon.screen :as ci]
[status-im.utils.platform :refer [platform-specific]] [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 " ")))])
(defview discovery-list-item [{{:keys [name (defview discovery-list-item [{{:keys [name
photo-path photo-path
whisper-id] whisper-id
message-id
status]
:as message} :message :as message} :message
show-separator? :show-separator? show-separator? :show-separator?
{account-photo-path :photo-path {account-photo-path :photo-path
@ -49,7 +35,9 @@
(not (str/blank? contact-name)) contact-name (not (str/blank? contact-name)) contact-name
(not (str/blank? name)) name (not (str/blank? name)) name
:else (generate-gfy))] :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 [view (merge st/popular-list-item-avatar-container
(:icon item-style)) (:icon item-style))
[touchable-highlight {:on-press #(dispatch [:start-chat whisper-id])} [touchable-highlight {:on-press #(dispatch [:start-chat whisper-id])}

1
src/status_im/new_group/screen.cljs
View File

@ -3,7 +3,6 @@
(:require [re-frame.core :refer [subscribe dispatch]] (:require [re-frame.core :refer [subscribe dispatch]]
[status-im.resources :as res] [status-im.resources :as res]
[status-im.components.react :refer [view [status-im.components.react :refer [view
text-input
text text
image image
icon icon

1
src/status_im/participants/views/remove.cljs
View File

@ -3,7 +3,6 @@
(:require [re-frame.core :refer [subscribe dispatch]] (:require [re-frame.core :refer [subscribe dispatch]]
[status-im.resources :as res] [status-im.resources :as res]
[status-im.components.react :refer [view [status-im.components.react :refer [view
text-input
text text
image image
touchable-highlight touchable-highlight

54
src/status_im/profile/screen.cljs
View File

@ -21,6 +21,7 @@
[status-im.components.status-bar :refer [status-bar]] [status-im.components.status-bar :refer [status-bar]]
[status-im.components.text-field.view :refer [text-field]] [status-im.components.text-field.view :refer [text-field]]
[status-im.components.selectable-field.view :refer [selectable-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.phone-number :refer [format-phone-number]]
[status-im.utils.image-processing :refer [img->base64]] [status-im.utils.image-processing :refer [img->base64]]
[status-im.utils.platform :refer [platform-specific]] [status-im.utils.platform :refer [platform-specific]]
@ -28,9 +29,9 @@
[status-im.profile.validations :as v] [status-im.profile.validations :as v]
[status-im.profile.styles :as st] [status-im.profile.styles :as st]
[status-im.utils.random :refer [id]] [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.components.image-button.view :refer [show-qr-button]]
[status-im.i18n :refer [label]] [status-im.i18n :refer [label]]))
[taoensso.timbre :as log]))
(defn toolbar [{:keys [account edit?]}] (defn toolbar [{:keys [account edit?]}]
(let [profile-edit-data-valid? (s/valid? ::v/profile account)] (let [profile-edit-data-valid? (s/valid? ::v/profile account)]
@ -56,22 +57,10 @@
:style (st/ok-btn-icon profile-edit-data-valid?)}] :style (st/ok-btn-icon profile-edit-data-valid?)}]
[icon :dots st/edit-btn-icon])]]])) [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 [_] (defn status-image-view [_]
(let [component (r/current-component) (let [component (r/current-component)
just-opened? (r/atom true)
input-ref (r/atom nil)
set-status-height #(let [height (-> (.-nativeEvent %) set-status-height #(let [height (-> (.-nativeEvent %)
(.-contentSize) (.-contentSize)
(.-height))] (.-height))]
@ -102,15 +91,23 @@
:wrapper-style st/username-wrapper :wrapper-style st/username-wrapper
:value name :value name
:on-change-text #(dispatch [:set-in [:profile-edit :name] %])}] :on-change-text #(dispatch [:set-in [:profile-edit :name] %])}]
[text-input {:style (st/status-input (:height (r/state component))) (if (or edit? @just-opened?)
:on-change #(set-status-height %) [text-input {:ref #(reset! input-ref %)
:on-content-size-change #(set-status-height %) :style (st/status-input (:height (r/state component)))
:maxLength 140 :multiline true
:multiline true :editable true
:editable edit? :blur-on-submit true
:placeholder (label :t/profile-no-status) :on-content-size-change #(do (set-status-height %)
:on-change-text #(dispatch [:set-in [:profile-edit :status] %]) (reset! just-opened? false))
:default-value status}]])}))) :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 [] (defview profile []
[{whisper-identity :whisper-identity [{whisper-identity :whisper-identity
@ -189,9 +186,10 @@
changed-account [:get :profile-edit]] changed-account [:get :profile-edit]]
(let [{:keys [phone (let [{:keys [phone
address address
public-key] :as account} (if edit? public-key]
changed-account :as account} (if edit?
current-account)] changed-account
current-account)]
[scroll-view {:style st/profile [scroll-view {:style st/profile
:bounces false} :bounces false}
[status-bar] [status-bar]

28
src/status_im/profile/styles.cljs
View File

@ -72,16 +72,26 @@
:margin-left 55 :margin-left 55
:margin-right 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] (defn status-input [height]
{:align-self "stretch" (merge (status-view height)
:margin-left (if p/ios? 22 16) {:margin-left (if p/ios? 21 16)
:margin-right 16 :margin-right 16
:margin-top (if p/ios? 6 1) :margin-top (if p/ios? 6 1)}))
:font-size 14
:height height (defn status-text [height]
:min-height 30 (merge (status-view (- height (if p/ios? 5 10)))
:text-align "center" {:margin-left 18
:color text2-color}) :margin-right 18
:margin-top 11
:margin-bottom 0}))
(def btns-container (def btns-container
{:margin-top 0 {:margin-top 0

9
src/status_im/utils/utils.cljs
View File

@ -1,6 +1,7 @@
(ns status-im.utils.utils (ns status-im.utils.utils
(:require [status-im.constants :as const] (:require [status-im.constants :as const]
[reagent.core :as r])) [reagent.core :as r]
[clojure.string :as str]))
(defn require [module] (defn require [module]
(if (exists? js/window) (if (exists? js/window)
@ -54,6 +55,12 @@
(str (subs s 0 (- max 3)) "...") (str (subs s 0 (- max 3)) "...")
s)) s))
(defn clean-text [s]
(-> s
(str/replace #"\n" " ")
(str/replace #"\r" "")
(str/trim)))
(defn first-index (defn first-index
[cond coll] [cond coll]
(loop [index 0 (loop [index 0