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

Show suggestions as hint for phone number format 

Former-commit-id: 6eeaab5c28
This commit is contained in:
virvar 2016-05-09 15:29:08 +03:00
parent 65210893fe
commit 59e6126572
11 changed files with 201 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
android/app/src/main/res/drawable-hdpi/icon_drag_down.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 366 B

BIN
android/app/src/main/res/drawable-mdpi/icon_drag_down.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 242 B

BIN
android/app/src/main/res/drawable-xhdpi/icon_drag_down.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 500 B

BIN
android/app/src/main/res/drawable-xxhdpi/icon_drag_down.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 775 B

BIN
android/app/src/main/res/drawable-xxxhdpi/icon_drag_down.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 960 B

52
src/syng_im/components/chat/content_suggestions.cljs Normal file
View File

@ -0,0 +1,52 @@
(ns syng-im.components.chat.content-suggestions
(:require-macros
[natal-shell.core :refer [with-error-view]])
(:require [clojure.string :as cstr]
[reagent.core :as r]
[re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.components.react :refer [view
image
text
touchable-highlight
list-view
list-item]]
[syng-im.components.chat.content-suggestions-styles :as st]
[syng-im.utils.listview :refer [to-datasource]]
[syng-im.utils.utils :refer [log toast http-post]]
[syng-im.utils.logging :as log]))
(defn set-command-content [content]
(dispatch [:set-chat-command-content content]))
(defn suggestion-list-item [suggestion]
[touchable-highlight {:onPress (fn []
(set-command-content (:value suggestion)))
:underlay-color :transparent}
[view (merge st/suggestion-container
(when (= (:description suggestion) "Number format 12")
{:backgroundColor "blue"}))
[view st/suggestion-sub-container
[text {:style st/value-text}
(:value suggestion)]
[text {:style st/description-text}
(:description suggestion)]]]])
(defn render-row [row section-id row-id]
(list-item [suggestion-list-item (js->clj row :keywordize-keys true)]))
(defn content-suggestions-view []
(let [suggestions-atom (subscribe [:get-content-suggestions])]
(fn []
(let [suggestions @suggestions-atom]
(when (seq suggestions)
[view nil
[touchable-highlight {:style st/drag-down-touchable
:onPress (fn []
;; TODO hide suggestions?
)
:underlay-color :transparent}
[image {:source {:uri "icon_drag_down"}
:style st/drag-down-icon}]]
[view (st/suggestions-container (count suggestions))
[list-view {:dataSource (to-datasource suggestions)
:renderRow render-row}]]])))))

54
src/syng_im/components/chat/content_suggestions_styles.cljs Normal file
View File

@ -0,0 +1,54 @@
(ns syng-im.components.chat.content-suggestions-styles
(:require [syng-im.components.styles :refer [font
color-light-blue-transparent
color-white
color-black
color-blue
color-blue-transparent
selected-message-color
online-color
separator-color
text1-color
text2-color
text3-color]]))
(def suggestion-height 56)
(def suggestion-container
{:flexDirection :column
:paddingLeft 16
:backgroundColor color-white})
(def suggestion-sub-container
{:height suggestion-height
:borderBottomWidth 1
:borderBottomColor separator-color})
(def value-text
{:marginTop 9
:fontSize 14
:fontFamily font
:color text1-color})
(def description-text
{:marginTop 1.5
:fontSize 14
:fontFamily font
:color text2-color})
(defn suggestions-container [suggestions-count]
{:flexDirection :row
:marginVertical 1
:marginHorizontal 0
:height (min 150 (* suggestion-height suggestions-count))
:backgroundColor color-white
:borderRadius 5})
(def drag-down-touchable
{:height 22
:alignItems :center
:justifyContent :center})
(def drag-down-icon
{:width 16
:height 16})

127
src/syng_im/components/chat/input/simple_command.cljs
View File

@ -6,6 +6,7 @@
text text
text-input text-input
touchable-highlight]] touchable-highlight]]
[syng-im.components.chat.content-suggestions :refer [content-suggestions-view]]
[syng-im.components.styles :refer [font [syng-im.components.styles :refer [font
color-white color-white
color-blue color-blue
@ -37,65 +38,67 @@
(fn [command input-options & {:keys [validator]}] (fn [command input-options & {:keys [validator]}]
(let [chat-id @chat-id-atom (let [chat-id @chat-id-atom
message @message-atom] message @message-atom]
[view {:style {:flexDirection "row" [view {:style {:flexDirection "column"}}
:height 56 [content-suggestions-view]
:backgroundColor color-white [view {:style {:flexDirection "row"
:elevation 4}} :height 56
[view {:style {:flexDirection "column" :backgroundColor color-white
:marginTop 16 :elevation 4}}
:marginBottom 16 [view {:style {:flexDirection "column"
:marginLeft 16 :marginTop 16
:marginRight 0 :marginBottom 16
:backgroundColor (:color command) :marginLeft 16
:height 24 :marginRight 0
:borderRadius 50}} :backgroundColor (:color command)
[text {:style {:marginTop 3 :height 24
:marginHorizontal 12 :borderRadius 50}}
:fontSize 12 [text {:style {:marginTop 3
:fontFamily font :marginHorizontal 12
:color color-white}} :fontSize 12
(:text command)]] :fontFamily font
[text-input (merge {:underlineColorAndroid "transparent" :color color-white}}
:style {:flex 1 (:text command)]]
:marginLeft 8 [text-input (merge {:underlineColorAndroid "transparent"
:marginTop 7 :style {:flex 1
:fontSize 14 :marginLeft 8
:fontFamily font :marginTop 7
:color text1-color} :fontSize 14
:autoFocus true :fontFamily font
:placeholder "Type" :color text1-color}
:placeholderTextColor text2-color :autoFocus true
:onChangeText (fn [new-text] :placeholder "Type"
(set-input-message new-text)) :placeholderTextColor text2-color
:onSubmitEditing (fn [e] :onChangeText (fn [new-text]
(when (valid? message validator) (set-input-message new-text))
(send-command chat-id command message)))} :onSubmitEditing (fn [e]
input-options) (when (valid? message validator)
message] (send-command chat-id command message)))}
(if (valid? message validator) input-options)
[touchable-highlight {:on-press (fn [] message]
(send-command chat-id command message)) (if (valid? message validator)
:underlay-color :transparent} [touchable-highlight {:on-press (fn []
[view {:style {:marginTop 10 (send-command chat-id command message))
:marginRight 10 :underlay-color :transparent}
:width 36 [view {:style {:marginTop 10
:height 36 :marginRight 10
:borderRadius 50 :width 36
:backgroundColor color-blue}} :height 36
[image {:source {:uri "icon_send"} :borderRadius 50
:style {:marginTop 10.5 :backgroundColor color-blue}}
:marginLeft 12 [image {:source {:uri "icon_send"}
:width 15 :style {:marginTop 10.5
:height 15}}]]] :marginLeft 12
[touchable-highlight {:on-press (fn [] :width 15
(cancel-command-input)) :height 15}}]]]
:underlay-color :transparent} [touchable-highlight {:on-press (fn []
[view {:style {:marginTop 10 (cancel-command-input))
:marginRight 10 :underlay-color :transparent}
:width 36 [view {:style {:marginTop 10
:height 36}} :marginRight 10
[image {:source res/icon-close-gray :width 36
:style {:marginTop 10.5 :height 36}}
:marginLeft 12 [image {:source res/icon-close-gray
:width 12 :style {:marginTop 10.5
:height 12}}]]])])))) :marginLeft 12
:width 12
:height 12}}]]])]]))))

12
src/syng_im/components/drawer_styles.cljs
View File

@ -62,15 +62,3 @@
:fontFamily font :fontFamily font
:lineHeight 21 :lineHeight 21
:color text3-color}) :color text3-color})
(comment drawer-menu [navigator]
[view {:style st/drawer-menu}
[view {:style }
[touchable-opacity {:onPress (fn []
(close-drawer)
;; TODO not implemented
)}
[text {:style }
"Switch users"]]]])

22
src/syng_im/handlers/content_suggestions.cljs Normal file
View File

@ -0,0 +1,22 @@
(ns syng-im.handlers.content-suggestions
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.db :as db]
[syng-im.utils.logging :as log]
[clojure.string :as s]))
(def suggestions
{:phone [{:value "89171111111"
:description "Number format 1"}
{:value "+79171111111"
:description "Number format 2"}
{:value "9171111111"
:description "Number format 3"}]})
(defn get-content-suggestions [db command text]
(or (when command
(when-let [command-suggestions ((:command command) suggestions)]
(filterv (fn [s]
(and (.startsWith (:value s) (or text ""))
(not= (:value s) text)))
command-suggestions)))
[]))

9
src/syng_im/subs.cljs
View File

@ -19,7 +19,8 @@
get-chat-command-request get-chat-command-request
parse-command-msg-content parse-command-msg-content
parse-command-request-msg-content]] parse-command-request-msg-content]]
[syng-im.handlers.suggestions :refer [get-suggestions]])) [syng-im.handlers.suggestions :refer [get-suggestions]]
[syng-im.handlers.content-suggestions :refer [get-content-suggestions]]))
;; -- Chat -------------------------------------------------------------- ;; -- Chat --------------------------------------------------------------
@ -43,6 +44,12 @@
(reaction))] (reaction))]
(reaction (get-suggestions @db @input-text))))) (reaction (get-suggestions @db @input-text)))))
(register-sub :get-content-suggestions
(fn [db _]
(let [command (reaction (get-chat-command @db))
text (reaction (get-chat-command-content @db))]
(reaction (get-content-suggestions @db @command @text)))))
(register-sub :get-commands (register-sub :get-commands
(fn [db _] (fn [db _]
(reaction (get-commands @db)))) (reaction (get-commands @db))))