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

This commit is contained in:
Roman Volosovskyi 2016-05-09 13:59:55 +03:00
parent 060a6d40d1
commit 7019d7033f
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
(:require [clojure.string :as s]
[re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.components.react :refer [android?
view
[re-frame.core :refer [subscribe dispatch]]
[syng-im.components.react :refer [view
text
image
touchable-highlight
navigator]]
touchable-highlight]]
[syng-im.components.chat.chat-message-styles :as st]
[syng-im.models.commands :refer [parse-command-msg-content
parse-command-request]]
[syng-im.navigation :refer [nav-pop]]
[syng-im.resources :as res]
[syng-im.constants :refer [text-content-type
content-type-status
@ -51,8 +48,7 @@
[view st/track-container
[view st/track]
[view st/track-mark]
[text {:style st/track-duration-text}
"03:39"]]])
[text {:style st/track-duration-text} "03:39"]]])
(defn message-content-command [content]
(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
(:require
[re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.components.react :refer [android?
view
image
text
text-input]]
[syng-im.components.styles :refer [color-white]]
[syng-im.components.chat.plain-message-input :refer [plain-message-input-view]]
[syng-im.components.chat.input.simple-command :refer [simple-command-input-view]]
[syng-im.components.chat.input.phone :refer [phone-input-view]]
[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]))
[re-frame.core :refer [subscribe]]
[syng-im.components.react :refer [view]]
[syng-im.components.chat.plain-message-input :refer [plain-message-input-view]]
[syng-im.components.chat.input.simple-command :refer [simple-command-input-view]]
[syng-im.components.chat.input.phone :refer [phone-input-view]]
[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.components.chat.chat-message-styles :as st]))
(defn staged-command-view [stage-command]
[simple-command-staged-view stage-command])
@ -40,13 +32,12 @@
[default-command-input-view command]))
(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])]
(fn []
(let [command @command-atom
(let [command @command-atom
staged-commands @staged-commands-atom]
[view {:style {:backgroundColor color-white
:elevation 4}}
[view st/new-message-container
(when (and staged-commands (pos? (count staged-commands)))
[staged-commands-view staged-commands])
(if command

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

@ -25,7 +25,6 @@
:lineHeight 14
:height 16})
(defn message-padding-top
[{:keys [new-day same-author same-direction]}]
(cond
@ -309,3 +308,22 @@
(def message-date-text
(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
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
(:require [re-frame.core :refer [subscribe dispatch]]
[syng-im.resources :as res]
[syng-im.components.react :refer [view android? text-input text image
touchable-highlight]]
[syng-im.components.react :refer [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.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]
[syng-im.navigation :refer [nav-pop]]))
[syng-im.components.chat.chat-message-styles :as st]))
(defn new-participants-toolbar [navigator]
[toolbar {:navigator navigator
:title "Add Participants"
:action {:image {:source res/v ;; {:uri "icon_search"}
:style {:width 20
:height 18}}
:handler (fn []
(dispatch [:add-new-participants navigator]))}}])
[toolbar
{:navigator navigator
:title "Add Participants"
:action {:image {:source res/v ;; {:uri "icon_search"}
:style st/new-participant-image}
:handler #(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]}]
(let [contacts (subscribe [:all-new-contacts])]
(fn []
(let [contacts-ds (to-realm-datasource @contacts)]
[view {:style {:flex 1
:backgroundColor "white"}}
[view st/participants-container
[new-participants-toolbar navigator]
[list-view {:dataSource contacts-ds
:renderRow (fn [row section-id row-id]
(r/as-element [new-participant-contact (js->clj row :keywordize-keys true) navigator]))
:style {:backgroundColor "white"}}]]))))
:renderRow (new-participants-row navigator)
:style st/participants-list}]]))))

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

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

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

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

@ -1,54 +1,29 @@
(ns syng-im.components.chat.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]]
(:require [re-frame.core :refer [subscribe dispatch]]
[syng-im.components.react :refer [view
image
text
touchable-highlight
list-view
list-item]]
[syng-im.components.styles :refer [font
color-white]]
[syng-im.utils.listview :refer [to-datasource]]
[syng-im.utils.utils :refer [log toast http-post]]
[syng-im.utils.logging :as log]))
[syng-im.components.chat.suggestions-styles :as st]))
(defn set-command-input [command]
(dispatch [:set-chat-command command]))
(defn suggestion-list-item [suggestion]
[touchable-highlight {:onPress #(set-command-input (keyword (:command suggestion)))}
[view {:style {:flexDirection "row"
:marginVertical 1
:marginHorizontal 0
:height 40
: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}}
[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 {:flex 1
:position "absolute"
:top 7
:left 190
:lineHeight 18
:fontSize 14
:fontFamily font
:color "black"}}
[text {:style st/suggestion-description}
(: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)]))
(defn suggestions-view []
@ -56,12 +31,7 @@
(fn []
(let [suggestions @suggestions-atom]
(when (seq suggestions)
[view {:style {:flexDirection "row"
:marginVertical 1
:marginHorizontal 0
:height (min 105 (* 42 (count suggestions)))
:backgroundColor color-white
:borderRadius 5}}
[view (st/suggestions-container suggestions)
[list-view {:dataSource (to-datasource suggestions)
:renderRow render-row
: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
(:require [reagent.core :as r]))
(:require [reagent.core :as r]
[syng-im.components.styles :as st]))
(set! js/window.React (js/require "react-native"))
@ -15,7 +16,13 @@
content])
(def toolbar-android (r/adapt-react-class (.-ToolbarAndroid 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]