diff --git a/images/icon_back.png b/images/icon_back.png new file mode 100644 index 0000000000..70e85f3fc4 Binary files /dev/null and b/images/icon_back.png differ diff --git a/images/icon_dollar.png b/images/icon_dollar.png new file mode 100644 index 0000000000..be7735955e Binary files /dev/null and b/images/icon_dollar.png differ diff --git a/images/icon_list.png b/images/icon_list.png new file mode 100644 index 0000000000..37d20bf9c7 Binary files /dev/null and b/images/icon_list.png differ diff --git a/images/icon_lock_gray.png b/images/icon_lock_gray.png new file mode 100644 index 0000000000..dce5f8dff8 Binary files /dev/null and b/images/icon_lock_gray.png differ diff --git a/images/icon_lock_white.png b/images/icon_lock_white.png new file mode 100644 index 0000000000..7da52c18af Binary files /dev/null and b/images/icon_lock_white.png differ diff --git a/images/icon_ok_small.png b/images/icon_ok_small.png new file mode 100644 index 0000000000..86047df5f3 Binary files /dev/null and b/images/icon_ok_small.png differ diff --git a/images/icon_smile.png b/images/icon_smile.png new file mode 100644 index 0000000000..07d91c4588 Binary files /dev/null and b/images/icon_smile.png differ diff --git a/src/syng_im/android/core.cljs b/src/syng_im/android/core.cljs index 40db74fbae..27650ba76b 100644 --- a/src/syng_im/android/core.cljs +++ b/src/syng_im/android/core.cljs @@ -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* diff --git a/src/syng_im/components/chat.cljs b/src/syng_im/components/chat.cljs index 6ae060535a..3dfe8893fc 100644 --- a/src/syng_im/components/chat.cljs +++ b/src/syng_im/components/chat.cljs @@ -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} diff --git a/src/syng_im/components/chat/chat_message.cljs b/src/syng_im/components/chat/chat_message.cljs index 46ab93eb1a..b6a68a6d9b 100644 --- a/src/syng_im/components/chat/chat_message.cljs +++ b/src/syng_im/components/chat/chat_message.cljs @@ -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)}]]) diff --git a/src/syng_im/components/chats/chats_list.cljs b/src/syng_im/components/chats/chats_list.cljs index 6947c87742..86bf7b430c 100644 --- a/src/syng_im/components/chats/chats_list.cljs +++ b/src/syng_im/components/chats/chats_list.cljs @@ -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} diff --git a/src/syng_im/models/commands.cljs b/src/syng_im/models/commands.cljs index 5705401728..259c378cd1 100644 --- a/src/syng_im/models/commands.cljs +++ b/src/syng_im/models/commands.cljs @@ -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" diff --git a/src/syng_im/resources.cljs b/src/syng_im/resources.cljs index 52a956d3f6..9a6b5e274d 100644 --- a/src/syng_im/resources.cljs +++ b/src/syng_im/resources.cljs @@ -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"))