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

Suggestions style. Add close commands button.

This commit is contained in:
virvar 2016-05-10 16:12:45 +03:00
parent 6bbd5bf92d
commit 6f5dade40f
16 changed files with 122 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 347 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 274 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 444 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 624 B

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 892 B

10
src/syng_im/components/chat/content_suggestions.cljs
View File

@ -5,7 +5,7 @@
[reagent.core :as r]
[re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.components.react :refer [view
image
icon
text
touchable-highlight
list-view
@ -22,9 +22,7 @@
[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-container
[view st/suggestion-sub-container
[text {:style st/value-text}
(:value suggestion)]
@ -45,8 +43,8 @@
;; TODO hide suggestions?
)
:underlay-color :transparent}
[image {:source {:uri "icon_drag_down"}
:style st/drag-down-icon}]]
[view nil
[icon :drag_down st/drag-down-icon]]]
[view (st/suggestions-container (count suggestions))
[list-view {:dataSource (to-datasource suggestions)
:renderRow render-row}]]])))))

4
src/syng_im/components/chat/content_suggestions_styles.cljs
View File

@ -45,8 +45,8 @@
:borderRadius 5})
(def drag-down-touchable
{:height 22
:alignItems :center
{:height 22
:alignItems :center
:justifyContent :center})
(def drag-down-icon

8
src/syng_im/components/chat/input/input_styles.cljs
View File

@ -7,14 +7,6 @@
chat-background
color-black]]))
(def money-input
{:flex 1
:marginLeft 8
:lineHeight 42
:fontSize 32
:fontFamily font
:color :black})
(def command-input-and-suggestions-container
{:flexDirection :column})

3
src/syng_im/components/chat/input/money.cljs
View File

@ -6,5 +6,4 @@
(defn money-input-view [command]
[simple-command-input-view command
{:keyboardType :numeric
:style st/money-input}])
{:keyboardType :numeric}])

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

@ -1,7 +1,6 @@
(ns syng-im.components.chat.input.simple-command
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.components.react :refer [view
image
icon
text
text-input
@ -47,5 +46,4 @@
[view st/send-container [icon :send st/send-icon]]]
[touchable-highlight {:on-press cancel-command-input}
[view st/cancel-container
[image {:source res/icon-close-gray
:style st/cancel-icon}]]])]]))))
[icon :close-gray st/cancel-icon]]])]]))))

26
src/syng_im/components/chat/plain_message_input.cljs
View File

@ -18,25 +18,39 @@
(dispatch [:send-group-chat-msg chat-id input-message])
(dispatch [:send-chat-msg]))))
(defn message-valid? [staged-commands message]
(or (and (pos? (count message))
(not= "!" message))
(pos? (count staged-commands))))
(defn try-send [chat staged-commands message]
(when (message-valid? staged-commands message)
(send chat message)))
(defn plain-message-input-view []
(let [chat (subscribe [:get-current-chat])
input-message-atom (subscribe [:get-chat-input-text])
staged-commands-atom (subscribe [:get-chat-staged-commands])]
staged-commands-atom (subscribe [:get-chat-staged-commands])
typing-command? (subscribe [:typing-command?])]
(fn []
(let [input-message @input-message-atom]
[view st/input-container
[suggestions-view]
[view st/input-view
[touchable-highlight {:on-press #(dispatch [:switch-command-suggestions])}
[view nil [icon :list st/list-icon]]]
[touchable-highlight {:on-press #(dispatch [:switch-command-suggestions])
:style st/switch-commands-touchable}
[view nil
(if @typing-command?
[icon :close-gray st/close-icon]
[icon :list st/list-icon])]]
[text-input {:style st/message-input
:autoFocus (pos? (count @staged-commands-atom))
:onChangeText set-input-message
:onSubmitEditing #(send @chat input-message)}
:onSubmitEditing #(try-send @chat @staged-commands-atom
input-message)}
input-message]
[icon :smile st/smile-icon]
(when (or (pos? (count input-message))
(pos? (count @staged-commands-atom)))
(when (message-valid? @staged-commands-atom input-message)
[touchable-highlight {:on-press #(send @chat input-message)}
[view st/send-container
[icon :send st/send-icon]]])]]))))

19
src/syng_im/components/chat/plain_message_input_styles.cljs
View File

@ -12,17 +12,22 @@
:height 56
:backgroundColor color-white})
(def switch-commands-touchable
{:width 56
:height 56
:alignItems :center
:justifyContent :center})
(def list-icon
{:marginTop 22
:marginRight 6
:marginBottom 6
:marginLeft 21
:width 13
:height 12})
{:width 13
:height 12})
(def close-icon
{:width 12
:height 12})
(def message-input
{:flex 1
:marginLeft 16
:marginTop -2
:padding 0
:fontSize 14

32
src/syng_im/components/chat/suggestions.cljs
View File

@ -4,6 +4,7 @@
(:require [re-frame.core :refer [subscribe dispatch]]
[syng-im.components.react :refer [view
text
icon
touchable-highlight
list-view
list-item]]
@ -16,12 +17,15 @@
(defn suggestion-list-item [suggestion]
[touchable-highlight
{:onPress #(set-command-input (keyword (:command suggestion)))}
[view st/suggestion-item-container
[view (st/suggestion-background suggestion)
[text {:style st/suggestion-text}
(:text suggestion)]]
[text {:style st/suggestion-description}
(:description suggestion)]]])
[view st/suggestion-container
[view st/suggestion-sub-container
[view (st/suggestion-background suggestion)
[text {:style st/suggestion-text}
(:text suggestion)]]
[text {:style st/value-text}
(:text suggestion)]
[text {:style st/description-text}
(:description suggestion)]]]])
(defn render-row [row _ _]
(list-item [suggestion-list-item (js->clj row :keywordize-keys true)]))
@ -31,8 +35,14 @@
(fn []
(let [suggestions @suggestions-atom]
(when (seq suggestions)
[view (st/suggestions-container suggestions)
[list-view {:dataSource (to-datasource suggestions)
:enableEmptySections true
:renderRow render-row
:style {}}]])))))
[view nil
[touchable-highlight {:style st/drag-down-touchable
:onPress (fn []
;; TODO hide suggestions?
)}
[view nil
[icon :drag_down st/drag-down-icon]]]
[view (st/suggestions-container (count suggestions))
[list-view {:dataSource (to-datasource suggestions)
:enableEmptySections true
:renderRow render-row}]]])))))

75
src/syng_im/components/chat/suggestions_styles.cljs
View File

@ -1,44 +1,69 @@
(ns syng-im.components.chat.suggestions-styles
(:require [syng-im.components.styles :refer [font color-white]]))
(: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-item-container
{:flexDirection :row
:marginVertical 1
:marginHorizontal 0
:height 40
:backgroundColor color-white})
(def suggestion-height 88)
(def suggestion-container
{:flexDirection :column
:paddingLeft 16
:backgroundColor color-white})
(def suggestion-sub-container
{:height suggestion-height
:borderBottomWidth 1
:borderBottomColor separator-color})
(defn suggestion-background
[{:keys [color]}]
{:flexDirection :column
:position :absolute
:top 10
:left 60
{:alignSelf :flex-start
:marginTop 10
:height 24
:backgroundColor color
:borderRadius 10})
:borderRadius 50})
(def suggestion-text
{:marginTop -2
:marginHorizontal 10
:fontSize 14
{:marginTop 2.5
:marginHorizontal 12
:fontSize 12
:fontFamily font
:color color-white})
(def suggestion-description
{:flex 1
:position :absolute
:top 7
:left 190
:lineHeight 18
(def value-text
{:marginTop 6
:fontSize 14
:fontFamily font
:color :black})
:color text1-color})
(defn suggestions-container
[suggestions]
(def description-text
{:marginTop 2
:fontSize 12
:fontFamily font
:color text2-color})
(defn suggestions-container [suggestions-count]
{:flexDirection :row
:marginVertical 1
:marginHorizontal 0
:height (min 105 (* 42 (count suggestions)))
:height (min 168 (* 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})

7
src/syng_im/handlers/suggestions.cljs
View File

@ -65,6 +65,9 @@
(get-commands db))]
suggestion)))
(defn switch-command-suggestions [db]
(defn typing-command? [db]
(let [text (get-chat-input-text db)]
(set-chat-input-text db (if (suggestion? text) nil "!"))))
(suggestion? text)))
(defn switch-command-suggestions [db]
(set-chat-input-text db (if (typing-command? db) nil "!")))

7
src/syng_im/subs.cljs
View File

@ -18,7 +18,8 @@
get-chat-command-content
get-chat-command-request
parse-command-request]]
[syng-im.handlers.suggestions :refer [get-suggestions]]
[syng-im.handlers.suggestions :refer [get-suggestions
typing-command?]]
[syng-im.handlers.content-suggestions :refer [get-content-suggestions]]))
;; -- Chat --------------------------------------------------------------
@ -40,6 +41,10 @@
(reaction))]
(reaction (get-suggestions @db @input-text)))))
(register-sub :typing-command?
(fn [db _]
(reaction (typing-command? @db))))
(register-sub :get-content-suggestions
(fn [db _]
(let [command (reaction (get-chat-command @db))