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

chat elements styles 

Former-commit-id: 7019d7033f
This commit is contained in:
Roman Volosovskyi 2016-05-09 13:59:55 +03:00
parent 48ef39ae33
commit 8d2af93015
10 changed files with 200 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/syng_im/components/chat/chat_message.cljs
View File

@ -1,16 +1,13 @@
(ns syng-im.components.chat.chat-message (ns syng-im.components.chat.chat-message
(:require [clojure.string :as s] (:require [clojure.string :as s]
[re-frame.core :refer [subscribe dispatch dispatch-sync]] [re-frame.core :refer [subscribe dispatch]]
[syng-im.components.react :refer [android? [syng-im.components.react :refer [view
view
text text
image image
touchable-highlight touchable-highlight]]
navigator]]
[syng-im.components.chat.chat-message-styles :as st] [syng-im.components.chat.chat-message-styles :as st]
[syng-im.models.commands :refer [parse-command-msg-content [syng-im.models.commands :refer [parse-command-msg-content
parse-command-request]] parse-command-request]]
[syng-im.navigation :refer [nav-pop]]
[syng-im.resources :as res] [syng-im.resources :as res]
[syng-im.constants :refer [text-content-type [syng-im.constants :refer [text-content-type
content-type-status content-type-status
@ -51,8 +48,7 @@
[view st/track-container [view st/track-container
[view st/track] [view st/track]
[view st/track-mark] [view st/track-mark]
[text {:style st/track-duration-text} [text {:style st/track-duration-text} "03:39"]]])
"03:39"]]])
(defn message-content-command [content] (defn message-content-command [content]
(let [commands-atom (subscribe [:get-commands])] (let [commands-atom (subscribe [:get-commands])]

35
src/syng_im/components/chat/chat_message_new.cljs
View File

@ -1,23 +1,15 @@
(ns syng-im.components.chat.chat-message-new (ns syng-im.components.chat.chat-message-new
(:require (:require
[re-frame.core :refer [subscribe dispatch dispatch-sync]] [re-frame.core :refer [subscribe]]
[syng-im.components.react :refer [android? [syng-im.components.react :refer [view]]
view [syng-im.components.chat.plain-message-input :refer [plain-message-input-view]]
image [syng-im.components.chat.input.simple-command :refer [simple-command-input-view]]
text [syng-im.components.chat.input.phone :refer [phone-input-view]]
text-input]] [syng-im.components.chat.input.password :refer [password-input-view]]
[syng-im.components.styles :refer [color-white]] [syng-im.components.chat.input.confirmation-code :refer [confirmation-code-input-view]]
[syng-im.components.chat.plain-message-input :refer [plain-message-input-view]] [syng-im.components.chat.input.money :refer [money-input-view]]
[syng-im.components.chat.input.simple-command :refer [simple-command-input-view]] [syng-im.components.chat.input.simple-command-staged :refer [simple-command-staged-view]]
[syng-im.components.chat.input.phone :refer [phone-input-view]] [syng-im.components.chat.chat-message-styles :as st]))
[syng-im.components.chat.input.password :refer [password-input-view]]
[syng-im.components.chat.input.confirmation-code :refer [confirmation-code-input-view]]
[syng-im.components.chat.input.money :refer [money-input-view]]
[syng-im.components.chat.input.simple-command-staged :refer [simple-command-staged-view]]
[syng-im.utils.utils :refer [log toast http-post]]
[syng-im.utils.logging :as log]
[syng-im.resources :as res]
[reagent.core :as r]))
(defn staged-command-view [stage-command] (defn staged-command-view [stage-command]
[simple-command-staged-view stage-command]) [simple-command-staged-view stage-command])
@ -40,13 +32,12 @@
[default-command-input-view command])) [default-command-input-view command]))
(defn chat-message-new [] (defn chat-message-new []
(let [command-atom (subscribe [:get-chat-command]) (let [command-atom (subscribe [:get-chat-command])
staged-commands-atom (subscribe [:get-chat-staged-commands])] staged-commands-atom (subscribe [:get-chat-staged-commands])]
(fn [] (fn []
(let [command @command-atom (let [command @command-atom
staged-commands @staged-commands-atom] staged-commands @staged-commands-atom]
[view {:style {:backgroundColor color-white [view st/new-message-container
:elevation 4}}
(when (and staged-commands (pos? (count staged-commands))) (when (and staged-commands (pos? (count staged-commands)))
[staged-commands-view staged-commands]) [staged-commands-view staged-commands])
(if command (if command

20
src/syng_im/components/chat/chat_message_styles.cljs
View File

@ -25,7 +25,6 @@
:lineHeight 14 :lineHeight 14
:height 16}) :height 16})
(defn message-padding-top (defn message-padding-top
[{:keys [new-day same-author same-direction]}] [{:keys [new-day same-author same-direction]}]
(cond (cond
@ -309,3 +308,22 @@
(def message-date-text (def message-date-text
(assoc style-sub-text :textAlign :center)) (assoc style-sub-text :textAlign :center))
(def new-message-container
{:backgroundColor color-white
:elevation 4})
(def participants-container
{:flex 1
:backgroundColor "white"})
(def participants-list
{:backgroundColor "white"})
(def new-participant-image
{:width 20
:height 18})
(def remove-participants-image
{:width 22
:height 30})

44
src/syng_im/components/chat/new_participants.cljs
View File

@ -1,40 +1,34 @@
(ns syng-im.components.chat.new-participants (ns syng-im.components.chat.new-participants
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] (:require [re-frame.core :refer [subscribe dispatch]]
[syng-im.resources :as res] [syng-im.resources :as res]
[syng-im.components.react :refer [view android? text-input text image [syng-im.components.react :refer [view]]
touchable-highlight]]
[syng-im.components.realm :refer [list-view]] [syng-im.components.realm :refer [list-view]]
[syng-im.components.styles :refer [font
title-font
color-white
color-black
color-blue
text1-color
text2-color
toolbar-background1]]
[syng-im.components.toolbar :refer [toolbar]] [syng-im.components.toolbar :refer [toolbar]]
[syng-im.utils.listview :refer [to-realm-datasource]] [syng-im.utils.listview :refer [to-realm-datasource]]
[syng-im.components.chats.new-participant-contact :refer [new-participant-contact]] [syng-im.components.chats.new-participant-contact
:refer [new-participant-contact]]
[reagent.core :as r] [reagent.core :as r]
[syng-im.navigation :refer [nav-pop]])) [syng-im.components.chat.chat-message-styles :as st]))
(defn new-participants-toolbar [navigator] (defn new-participants-toolbar [navigator]
[toolbar {:navigator navigator [toolbar
:title "Add Participants" {:navigator navigator
:action {:image {:source res/v ;; {:uri "icon_search"} :title "Add Participants"
:style {:width 20 :action {:image {:source res/v ;; {:uri "icon_search"}
:height 18}} :style st/new-participant-image}
:handler (fn [] :handler #(dispatch [:add-new-participants navigator])}}])
(dispatch [:add-new-participants navigator]))}}])
(defn new-participants-row [navigator]
(fn [row _ _]
(r/as-element
[new-participant-contact (js->clj row :keywordize-keys true) navigator])))
(defn new-participants [{:keys [navigator]}] (defn new-participants [{:keys [navigator]}]
(let [contacts (subscribe [:all-new-contacts])] (let [contacts (subscribe [:all-new-contacts])]
(fn [] (fn []
(let [contacts-ds (to-realm-datasource @contacts)] (let [contacts-ds (to-realm-datasource @contacts)]
[view {:style {:flex 1 [view st/participants-container
:backgroundColor "white"}}
[new-participants-toolbar navigator] [new-participants-toolbar navigator]
[list-view {:dataSource contacts-ds [list-view {:dataSource contacts-ds
:renderRow (fn [row section-id row-id] :renderRow (new-participants-row navigator)
(r/as-element [new-participant-contact (js->clj row :keywordize-keys true) navigator])) :style st/participants-list}]]))))
:style {:backgroundColor "white"}}]]))))

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

@ -1,16 +1,11 @@
(ns syng-im.components.chat.plain-message-input (ns syng-im.components.chat.plain-message-input
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.components.react :refer [android? [syng-im.components.react :refer [view
view icon
image
touchable-highlight touchable-highlight
text-input]] text-input]]
[syng-im.components.styles :refer [font
text2-color
color-white
color-blue]]
[syng-im.components.chat.suggestions :refer [suggestions-view]] [syng-im.components.chat.suggestions :refer [suggestions-view]]
[syng-im.utils.utils :refer [log toast http-post]])) [syng-im.components.chat.plain-message-input-styles :as st]))
(defn set-input-message [message] (defn set-input-message [message]
(dispatch [:set-chat-input-text message])) (dispatch [:set-chat-input-text message]))
@ -29,48 +24,19 @@
staged-commands-atom (subscribe [:get-chat-staged-commands])] staged-commands-atom (subscribe [:get-chat-staged-commands])]
(fn [] (fn []
(let [input-message @input-message-atom] (let [input-message @input-message-atom]
[view {:style {:flexDirection :column}} [view st/input-container
[suggestions-view] [suggestions-view]
[view {:style {:flexDirection :row [view st/input-view
:height 56 [icon :list st/list-icon]
:backgroundColor color-white}} [text-input {:style st/message-input
[image {:source {:uri :icon_list} :autoFocus (pos? (count @staged-commands-atom))
:style {:marginTop 22 :placeholder "Type"
:marginRight 6 :onChangeText set-input-message
:marginBottom 6 :onSubmitEditing #(send @chat input-message)}
:marginLeft 21
:width 13
:height 12}}]
[text-input {:underlineColorAndroid :transparent
:style {:flex 1
:marginLeft 16
:marginTop -2
:padding 0
:fontSize 14
:fontFamily font
:color text2-color}
:autoFocus (pos? (count @staged-commands-atom))
:placeholder "Type"
:placeholderTextColor text2-color
:onChangeText set-input-message
:onSubmitEditing #(send @chat input-message)}
input-message] input-message]
[image {:source {:uri :icon_smile} [icon :smile st/smile-icon]
:style {:marginTop 18
:marginRight 18
:width 20
:height 20}}]
(when (or (pos? (count input-message)) (when (or (pos? (count input-message))
(pos? (count @staged-commands-atom))) (pos? (count @staged-commands-atom)))
[touchable-highlight {:on-press #(send @chat input-message)} [touchable-highlight {:on-press #(send @chat input-message)}
[view {:style {:marginTop 10 [view st/send-container
:marginRight 10 [icon :send st/send-icon]]])]]))))
:width 36
:height 36
:borderRadius 50
:backgroundColor color-blue}}
[image {:source {:uri :icon_send}
:style {:marginTop 10.5
:marginLeft 12
:width 15
:height 15}}]]])]]))))

50
src/syng_im/components/chat/plain_message_input_styles.cljs Normal file
View File

@ -0,0 +1,50 @@
(ns syng-im.components.chat.plain-message-input-styles
(:require [syng-im.components.styles :refer [font
text2-color
color-white
color-blue]]))
(def input-container
{:flexDirection :column})
(def input-view
{:flexDirection :row
:height 56
:backgroundColor color-white})
(def list-icon
{:marginTop 22
:marginRight 6
:marginBottom 6
:marginLeft 21
:width 13
:height 12})
(def message-input
{:flex 1
:marginLeft 16
:marginTop -2
:padding 0
:fontSize 14
:fontFamily font
:color text2-color})
(def smile-icon
{:marginTop 18
:marginRight 18
:width 20
:height 20})
(def send-icon
{:marginTop 10.5
:marginLeft 12
:width 15
:height 15})
(def send-container
{:marginTop 10
:marginRight 10
:width 36
:height 36
:borderRadius 50
:backgroundColor color-blue})

41
src/syng_im/components/chat/remove_participants.cljs
View File

@ -1,40 +1,35 @@
(ns syng-im.components.chat.remove-participants (ns syng-im.components.chat.remove-participants
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] (:require [re-frame.core :refer [subscribe dispatch]]
[syng-im.resources :as res] [syng-im.resources :as res]
[syng-im.components.react :refer [view text-input text image [syng-im.components.react :refer [view text-input text image
touchable-highlight]] touchable-highlight]]
[syng-im.components.realm :refer [list-view]] [syng-im.components.realm :refer [list-view]]
[syng-im.components.styles :refer [font
title-font
color-white
color-black
color-blue
text1-color
text2-color
toolbar-background1]]
[syng-im.components.toolbar :refer [toolbar]] [syng-im.components.toolbar :refer [toolbar]]
[syng-im.utils.listview :refer [to-realm-datasource]] [syng-im.utils.listview :refer [to-realm-datasource]]
[syng-im.components.chats.new-participant-contact :refer [new-participant-contact]] [syng-im.components.chats.new-participant-contact
:refer [new-participant-contact]]
[reagent.core :as r] [reagent.core :as r]
[syng-im.navigation :refer [nav-pop]])) [syng-im.components.chat.chat-message-styles :as st]))
(defn remove-participants-toolbar [navigator] (defn remove-participants-toolbar [navigator]
[toolbar {:navigator navigator [toolbar
:title "Remove Participants" {:navigator navigator
:action {:image {:source res/trash-icon ;; {:uri "icon_search"} :title "Remove Participants"
:style {:width 22 :action {:handler #(dispatch [:remove-selected-participants navigator])
:height 30}} :image {:source res/trash-icon ;; {:uri "icon_search"}
:handler (fn [] :style st/remove-participants-image}}}])
(dispatch [:remove-selected-participants navigator]))}}])
(defn remove-participants-row [navigator]
(fn [row _ _]
(r/as-element
[new-participant-contact (js->clj row :keywordize-keys true) navigator])))
(defn remove-participants [{:keys [navigator]}] (defn remove-participants [{:keys [navigator]}]
(let [contacts (subscribe [:current-chat-contacts])] (let [contacts (subscribe [:current-chat-contacts])]
(fn [] (fn []
(let [contacts-ds (to-realm-datasource @contacts)] (let [contacts-ds (to-realm-datasource @contacts)]
[view {:style {:flex 1 [view st/participants-container
:backgroundColor "white"}}
[remove-participants-toolbar navigator] [remove-participants-toolbar navigator]
[list-view {:dataSource contacts-ds [list-view {:dataSource contacts-ds
:renderRow (fn [row section-id row-id] :renderRow (remove-participants-row navigator)
(r/as-element [new-participant-contact (js->clj row :keywordize-keys true) navigator])) :style st/participants-list}]]))))
:style {:backgroundColor "white"}}]]))))

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

@ -1,54 +1,29 @@
(ns syng-im.components.chat.suggestions (ns syng-im.components.chat.suggestions
(:require-macros (:require-macros
[natal-shell.core :refer [with-error-view]]) [natal-shell.core :refer [with-error-view]])
(:require [clojure.string :as cstr] (:require [re-frame.core :refer [subscribe dispatch]]
[reagent.core :as r]
[re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.components.react :refer [view [syng-im.components.react :refer [view
image
text text
touchable-highlight touchable-highlight
list-view list-view
list-item]] list-item]]
[syng-im.components.styles :refer [font
color-white]]
[syng-im.utils.listview :refer [to-datasource]] [syng-im.utils.listview :refer [to-datasource]]
[syng-im.utils.utils :refer [log toast http-post]] [syng-im.components.chat.suggestions-styles :as st]))
[syng-im.utils.logging :as log]))
(defn set-command-input [command] (defn set-command-input [command]
(dispatch [:set-chat-command command])) (dispatch [:set-chat-command command]))
(defn suggestion-list-item [suggestion] (defn suggestion-list-item [suggestion]
[touchable-highlight {:onPress #(set-command-input (keyword (:command suggestion)))} [touchable-highlight
[view {:style {:flexDirection "row" {:onPress #(set-command-input (keyword (:command suggestion)))}
:marginVertical 1 [view st/suggestion-item-container
:marginHorizontal 0 [view (st/suggestion-background suggestion)
:height 40 [text {:style st/suggestion-text}
:backgroundColor color-white}}
[view {:style {:flexDirection "column"
:position "absolute"
:top 10
:left 60
:backgroundColor (:color suggestion)
:borderRadius 10}}
[text {:style {:marginTop -2
:marginHorizontal 10
:fontSize 14
:fontFamily font
:color color-white}}
(:text suggestion)]] (:text suggestion)]]
[text {:style {:flex 1 [text {:style st/suggestion-description}
:position "absolute"
:top 7
:left 190
:lineHeight 18
:fontSize 14
:fontFamily font
:color "black"}}
(:description suggestion)]]]) (:description suggestion)]]])
(defn render-row [row section-id row-id] (defn render-row [row _ _]
(list-item [suggestion-list-item (js->clj row :keywordize-keys true)])) (list-item [suggestion-list-item (js->clj row :keywordize-keys true)]))
(defn suggestions-view [] (defn suggestions-view []
@ -56,12 +31,7 @@
(fn [] (fn []
(let [suggestions @suggestions-atom] (let [suggestions @suggestions-atom]
(when (seq suggestions) (when (seq suggestions)
[view {:style {:flexDirection "row" [view (st/suggestions-container suggestions)
:marginVertical 1
:marginHorizontal 0
:height (min 105 (* 42 (count suggestions)))
:backgroundColor color-white
:borderRadius 5}}
[list-view {:dataSource (to-datasource suggestions) [list-view {:dataSource (to-datasource suggestions)
:renderRow render-row :renderRow render-row
:style {}}]]))))) :style {}}]])))))

44
src/syng_im/components/chat/suggestions_styles.cljs Normal file
View File

@ -0,0 +1,44 @@
(ns syng-im.components.chat.suggestions-styles
(:require [syng-im.components.styles :refer [font color-white]]))
(def suggestion-item-container
{:flexDirection "row"
:marginVertical 1
:marginHorizontal 0
:height 40
:backgroundColor color-white})
(defn suggestion-background
[{:keys [color]}]
{:flexDirection "column"
:position "absolute"
:top 10
:left 60
:backgroundColor color
:borderRadius 10})
(def suggestion-text
{:marginTop -2
:marginHorizontal 10
:fontSize 14
:fontFamily font
:color color-white})
(def suggestion-description
{:flex 1
:position "absolute"
:top 7
:left 190
:lineHeight 18
:fontSize 14
:fontFamily font
:color "black"})
(defn suggestions-container
[suggestions]
{:flexDirection "row"
:marginVertical 1
:marginHorizontal 0
:height (min 105 (* 42 (count suggestions)))
:backgroundColor color-white
:borderRadius 5})

11
src/syng_im/components/react.cljs
View File

@ -1,5 +1,6 @@
(ns syng-im.components.react (ns syng-im.components.react
(:require [reagent.core :as r])) (:require [reagent.core :as r]
[syng-im.components.styles :as st]))
(set! js/window.React (js/require "react-native")) (set! js/window.React (js/require "react-native"))
@ -15,7 +16,13 @@
content]) content])
(def toolbar-android (r/adapt-react-class (.-ToolbarAndroid js/React))) (def toolbar-android (r/adapt-react-class (.-ToolbarAndroid js/React)))
(def list-view (r/adapt-react-class (.-ListView js/React))) (def list-view (r/adapt-react-class (.-ListView js/React)))
(def text-input (r/adapt-react-class (.-TextInput js/React))) (def text-input-class (r/adapt-react-class (.-TextInput js/React)))
(defn text-input [props text]
[text-input-class (merge
{:underlineColorAndroid :transparent
:placeholderTextColor st/text2-color}
props)
text])
(defn icon [n style] (defn icon [n style]