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

Start chat design 

Former-commit-id: 6f95b37db1
This commit is contained in:
virvar 2016-04-14 16:13:01 +03:00
parent 48e67fc0f6
commit 37d7249170
13 changed files with 91 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/icon_back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 225 B

BIN
images/icon_dollar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 314 B

BIN
images/icon_list.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 122 B

BIN
images/icon_lock_gray.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 262 B

BIN
images/icon_lock_white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 209 B

BIN
images/icon_ok_small.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 234 B

BIN
images/icon_smile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 704 B

5
src/syng_im/android/core.cljs
View File

@ -36,7 +36,10 @@
(let [signed-up-atom (subscribe [:signed-up])]
(fn []
(let [signed-up @signed-up-atom]
[navigator {:initial-route (clj->js {:view-id :chat-list})
[navigator {:initial-route (clj->js {:view-id
;:chat-list
:chat
})
:render-scene (fn [route nav]
(log/debug "route" route)
(when true ;; nav/*nav-render*

6
src/syng_im/components/chat.cljs
View File

@ -39,16 +39,16 @@
contacts (:contacts @chat)
contact-by-identity (contacts-by-identity contacts)]
[view {:style {:flex 1
:backgroundColor "#eef2f5"}}
:backgroundColor "#EBF0F4"}}
(when android?
;; TODO add IOS version
[toolbar-android {:logo res/logo-icon
[toolbar-android {:logo res/logo-icon ;; todo contact/chat avatar
:title (or (@chat :name)
"Chat name")
:titleColor "#4A5258"
:subtitle "Last seen just now"
:subtitleColor "#AAB2B2"
:navIcon res/nav-back-icon
:navIcon res/icon-back
:style {:backgroundColor "white"
:height 56
:elevation 2}

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

@ -66,23 +66,26 @@
(defn message-content-command [content]
(let [;; command-msg-atom (subscribe [:parse-command-msg-content content])
commands-atom (subscribe [:get-commands])]
(let [commands-atom (subscribe [:get-commands])]
(fn [content]
(let [;; {:keys [command content]} @command-msg-atom
commands @commands-atom
(let [commands @commands-atom
{:keys [command content]} (parse-command-msg-content commands content)]
[view {:style {:flexDirection "column"}}
[view {:style {:marginTop -5
:marginLeft 0
:backgroundColor (:color command)
:borderRadius 10}}
[text {:style {:marginTop 0
:marginHorizontal 10
:fontSize 14
:fontFamily "Avenir-Roman"
:color "white"}}
(:text command)]]
[view {:style {:flexDirection "row"
:marginRight 32}}
[view {:style {:backgroundColor (:color command)
:height 24
:borderRadius 50
:paddingTop 2
:paddingHorizontal 12}}
[text {:style {:fontSize 12
:fontFamily "Avenir-Roman"
:color "white"}}
(:text command)]]]
[image {:source (:icon command)
:style {:position "absolute"
:top 4
:right 0}}]
[text {:style {:marginTop 5
:marginHorizontal 0
:fontSize 14
@ -97,21 +100,17 @@
(dispatch [:set-response-chat-command msg-id (:command command)]))
(defn message-content-command-request [msg-id content outgoing text-color background-color]
(let [;; command-request-atom (subscribe [:parse-command-request-msg-content content])
commands-atom (subscribe [:get-commands])]
(let [commands-atom (subscribe [:get-commands])]
(fn [msg-id content outgoing text-color background-color]
(let [;; {:keys [command content]} @command-request-atom
commands @commands-atom
(let [commands @commands-atom
{:keys [command content]} (parse-command-request-msg-content commands content)]
[touchable-highlight {:onPress (fn []
(set-chat-command msg-id command))}
[view {}
[view {:style (merge {:marginTop 15
:borderRadius 6
:paddingVertical 12
:paddingHorizontal 16}
[view {:style {:paddingRight 16}}
[view {:style (merge {:borderRadius 7
:padding 12}
(if outgoing
{:backgroundColor "#D3EEEF"}
{:backgroundColor "white"}
{:backgroundColor background-color}))}
[text {:style (merge {:fontSize 14
:fontFamily "Avenir-Roman"}
@ -120,30 +119,30 @@
{:color text-color}))}
content]]
[view {:style {:position "absolute"
:top 0
:left 20
:width 30
:height 30
:top 12
:right 0
:width 32
:height 32
:borderRadius 50
:backgroundColor (:color command)}}
[image {:source res/att
:style {:width 17
:height 14
:position "absolute"
:top 8
:left 6}}]]]]))))
[image {:source (:request-icon command)
:style {:position "absolute"
:top 9
:left 10}}]]
[text {:style {:marginTop 2
:fontFamily "Avenir-Roman"
:fontSize 12
:color "#AAB2B2"
:opacity 0.8 }}
(str (:request-text command))]]]))))
(defn message-content [{:keys [msg-id content-type content outgoing text-color background-color]}]
(if (= content-type content-type-command-request)
[message-content-command-request msg-id content outgoing text-color background-color]
[view {:style (merge {:borderRadius 6}
(if (= content-type text-content-type)
{:paddingVertical 12
:paddingHorizontal 16}
{:paddingVertical 14
:paddingHorizontal 10})
[view {:style (merge {:borderRadius 7
:padding 12}
(if outgoing
{:backgroundColor "#D3EEEF"}
{:backgroundColor "white"}
{:backgroundColor background-color}))}
(cond
(= content-type text-content-type)
@ -168,7 +167,7 @@
:style {:marginTop 6
:opacity 0.6}}]
[text {:style {:fontFamily "Avenir-Roman"
:fontSize 11
:fontSize 12
:color "#AAB2B2"
:opacity 0.8
:marginLeft 5}}
@ -178,31 +177,35 @@
:failed "Failed")]])
(defn message-body [{:keys [msg-id content content-type outgoing delivery-status text-color background-color]}]
[view {:style (merge {:flexDirection "column"
:width 260
:marginVertical 5}
(if outgoing
{:alignSelf "flex-end"
:alignItems "flex-end"}
{:alignSelf "flex-start"
:alignItems "flex-start"}))}
[message-content {:msg-id msg-id
:content-type content-type
:content content
:outgoing outgoing
:text-color text-color
:background-color background-color}]
(when (and outgoing delivery-status)
[message-delivery-status {:delivery-status delivery-status}])])
(let [delivery-status :seen]
[view {:style (merge {:flexDirection "column"
:width 260
:paddingTop 5
:paddingRight 8
:paddingBottom 5
:paddingLeft 8}
(if outgoing
{:alignSelf "flex-end"
:alignItems "flex-end"}
{:alignSelf "flex-start"
:alignItems "flex-start"}))}
[message-content {:msg-id msg-id
:content-type content-type
:content content
:outgoing outgoing
:text-color text-color
:background-color background-color}]
(when (and outgoing delivery-status)
[message-delivery-status {:delivery-status delivery-status}])]))
(defn chat-message [{:keys [msg-id content content-type outgoing delivery-status date new-day text-color background-color] :as msg}]
[view {:paddingHorizontal 15}
[view {}
(when new-day
[message-date {:date date}])
[message-body {:msg-id msg-id
:content content
:content-type content-type
:outgoing outgoing
:text-color text-color
:background-color background-color
:text-color "black" ;text-color
:background-color "white" ;background-color
:delivery-status (keyword delivery-status)}]])

4
src/syng_im/components/chats/chats_list.cljs
View File

@ -30,11 +30,11 @@
(when android?
;; TODO add IOS version
[toolbar-android {:logo res/logo-icon
:title "Your Chats"
:title "Chats"
:titleColor "#4A5258"
:subtitle "List of your recent chats"
:subtitleColor "#AAB2B2"
:navIcon res/nav-back-icon
:navIcon res/icon-list
:style {:backgroundColor "white"
:height 56
:elevation 2}

12
src/syng_im/models/commands.cljs
View File

@ -4,6 +4,7 @@
[cljs.core.async :as async :refer [chan put! <! >!]]
[re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.db :as db]
[syng-im.resources :as res]
[syng-im.models.chat :refer [current-chat-id]]
[syng-im.utils.utils :refer [log toast]]
[syng-im.utils.logging :as log]
@ -14,6 +15,8 @@
:text "!money"
:description "Send money"
:color "#48ba30"
:request-icon res/icon-lock-white
:icon res/icon-lock-gray
:suggestion true}
{:command :location
:text "!location"
@ -28,7 +31,10 @@
{:command :confirmation-code
:text "!confirmationCode"
:description "Send confirmation code"
:color "#019af0"
:request-text "Confirmation code request"
:color "#6581E7"
:request-icon res/icon-lock-white
:icon res/icon-lock-gray
:suggestion true}
{:command :send
:text "!send"
@ -43,7 +49,9 @@
{:command :keypair-password
:text "!keypairPassword"
:description ""
:color "#019af0"
:color "#6581E7"
:request-icon res/icon-lock-white
:icon res/icon-lock-gray
:suggestion false}
{:command :help
:text "!help"

8
src/syng_im/resources.cljs
View File

@ -13,3 +13,11 @@
(def smile (js/require "./images/smile.png"))
(def att (js/require "./images/att.png"))
(def v (js/require "./images/v.png"))
(def icon-back (js/require "./images/icon_back.png"))
(def icon-dollar (js/require "./images/icon_dollar.png"))
(def icon-list (js/require "./images/icon_list.png"))
(def icon-lock-gray (js/require "./images/icon_lock_gray.png"))
(def icon-lock-white (js/require "./images/icon_lock_white.png"))
(def icon-ok-small (js/require "./images/icon_ok_small.png"))
(def icon-smile (js/require "./images/icon_smile.png"))