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

command suggestions design

This commit is contained in:
Roman Volosovskyi 2016-06-29 16:30:59 +03:00
parent 58675d5509
commit a1556ee335
5 changed files with 48 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/status_im/chat/handlers.cljs
View File

@ -113,7 +113,6 @@
content)
command-info {:command command :content content'}]
(-> db
;(assoc-in [:chats current-chat-id :command-input :command] nil)
(commands/stage-command command-info)
(assoc :staged-command command-info)))))
@ -138,7 +137,6 @@
(defn update-text
[{:keys [current-chat-id] :as db} [_ text]]
(let [suggestions (get-in db [:command-suggestions current-chat-id])]
(println :hui (count suggestions) text :bla)
(if-not (= 1 (count suggestions))
(update-input-text db text)
db)))

9
src/status_im/chat/handlers/animation.cljs
View File

@ -30,8 +30,10 @@
(fn [{:keys [current-chat-id] :as db} _]
(let [suggestions? (seq (get-in db [:command-suggestions current-chat-id]))
current (get-in db [:animations :command-suggestions-height])
height (if suggestions? middle-height 0.1)
changed? (if (and suggestions? (not= 0.1 current))
height (if suggestions? middle-height 10)
changed? (if (and suggestions?
(not (nil? current))
(not= 10 current))
identity inc)]
(-> db
(update :animations assoc :command-suggestions-height height)
@ -43,7 +45,7 @@
type (get-in db path)]
(if (= :response type)
minimum-suggestion-height
0.1)))
10)))
(register-handler :animate-show-response
[(after #(dispatch [:command-edit-mode]))]
@ -52,7 +54,6 @@
height (if suggestions?
middle-height
(get-minimum-height db))]
(println "hei" suggestions? )
(assoc-in db [:animations :to-response-height] height))))
(defn fix-height

16
src/status_im/chat/styles/suggestions.cljs
View File

@ -12,22 +12,23 @@
text2-color
text3-color]]))
(def suggestion-height 88)
(def suggestion-height 60)
(def suggestion-highlight
{:margin-left 57})
(def suggestion-container
{:flexDirection :column
:paddingLeft 16
:backgroundColor color-white})
{:backgroundColor color-white})
(def suggestion-sub-container
{:height suggestion-height
:borderBottomWidth 1
:borderBottomColor separator-color})
:borderBottomColor separator-color
:flex-direction :row})
(defn suggestion-background
[{:keys [color]}]
{:alignSelf :flex-start
:marginTop 10
{:marginTop 10
:height 24
:backgroundColor color
:borderRadius 50})
@ -55,6 +56,7 @@
{:flexDirection :row
:marginVertical 1
:marginHorizontal 0
:flex 1
:height (min 168 (* suggestion-height suggestions-count))
:backgroundColor color-white
:borderRadius 5})

49
src/status_im/chat/views/suggestions.cljs
View File

@ -2,6 +2,7 @@
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch]]
[status-im.components.react :refer [view
scroll-view
text
icon
touchable-highlight
@ -15,7 +16,8 @@
[status-im.components.animation :as anim]
[status-im.components.drag-drop :as drag]
[status-im.components.react :as react]
[status-im.chat.suggestions-responder :as resp]))
[status-im.chat.suggestions-responder :as resp]
[status-im.chat.constants :as c]))
(defn set-command-input [command]
(dispatch [:set-chat-command command]))
@ -26,29 +28,39 @@
:as suggestion}]]
(let [label (str "!" name)]
[touchable-highlight
{:onPress #(set-command-input command)}
{:onPress #(set-command-input command)
:style st/suggestion-highlight}
[view st/suggestion-container
[view st/suggestion-sub-container
[view (st/suggestion-background suggestion)
[text {:style st/suggestion-text} label]]
[view {:flex 0.6}
[text {:style st/value-text} label]
[text {:style st/description-text} description]]]]))
[text {:style st/description-text} description]]
[view {:flex 0.4
:flex-direction :column
:align-items :flex-end
:margin-right 16}
[view (st/suggestion-background suggestion)
[text {:style st/suggestion-text} label]]]]]]))
(defn render-row [row _ _]
(list-item [suggestion-list-item row]))
(defn title [s]
[view {:margin-left 57
:margin-bottom 16}
[text {:style {:font-size 13
:color :#8f838c93}} s]])
(defn suggestions-view []
(let
[suggestions (subscribe [:get-suggestions])]
(r/create-class
{:reagent-render
(fn []
[view (st/suggestions-container (count @suggestions))
[list-view {:dataSource (to-datasource @suggestions)
:enableEmptySections true
(defview suggestions-view []
[suggestions [:get-suggestions]
requests [:get :chat-requests]]
[scroll-view
(when requests [title "Requests"])
[title "Commands"]
[view (st/suggestions-container (count suggestions))
[list-view {:dataSource (to-datasource suggestions)
:keyboardShouldPersistTaps true
:renderRow render-row}]])})))
:renderRow render-row}]]])
(defn header [h]
(let [orientation (subscribe [:get :orientation])
@ -64,7 +76,7 @@
[icon :drag_down ddst/drag-down-icon]])))
(defn container-animation-logic [{:keys [to-value val]}]
(let [to-value @to-value]
(when-let [to-value @to-value]
(anim/start (anim/spring val {:toValue to-value}))))
(defn container [h & elements]
@ -86,7 +98,8 @@
(into [animated-view {:style (st/container h)}] elements))})))
(defn suggestion-container []
(let [h (anim/create-value 0)]
(let [h (anim/create-value 10)]
[container h
[header h]
[suggestions-view]]))
[suggestions-view]
[view {:height c/input-height}]]))

2
src/status_im/utils/handlers.cljs
View File

@ -11,4 +11,4 @@
(defn register-handler
([name handler] (register-handler name nil handler))
([name middleware handler]
(re-core/register-handler name [#_debug middleware] handler)))
(re-core/register-handler name [debug middleware] handler)))