From d9a44d9c0b90b95840afd935a88631509daed8f9 Mon Sep 17 00:00:00 2001 From: virvar Date: Fri, 20 May 2016 10:22:14 +0300 Subject: [PATCH] Profile icon --- src/syng_im/components/chat_icon/screen.cljs | 42 +++++++++++++++++++- src/syng_im/components/chat_icon/styles.cljs | 33 +++++++++++++-- src/syng_im/db.cljs | 1 + src/syng_im/profile/screen.cljs | 31 +++++---------- src/syng_im/profile/styles.cljs | 35 +--------------- 5 files changed, 83 insertions(+), 59 deletions(-) diff --git a/src/syng_im/components/chat_icon/screen.cljs b/src/syng_im/components/chat_icon/screen.cljs index 194c23ca63..028a6cd737 100644 --- a/src/syng_im/components/chat_icon/screen.cljs +++ b/src/syng_im/components/chat_icon/screen.cljs @@ -5,7 +5,8 @@ text image icon]] - [syng-im.components.chat-icon.styles :as st])) + [syng-im.components.chat-icon.styles :as st] + [syng-im.components.styles :refer [color-purple]])) (defn default-chat-icon [name color styles] [view (:default-chat-icon styles) @@ -60,3 +61,42 @@ :chat-icon st/chat-icon-menu-item :default-chat-icon (st/default-chat-icon-menu-item color) :default-chat-icon-text st/default-chat-icon-text}]) + +(defn chat-icon-view-profile [chat-id group-chat name color online] + [chat-icon-view chat-id group-chat name color online + {:container st/container-profile + :online-view st/online-view-profile + :online-dot-left st/online-dot-left-profile + :online-dot-right st/online-dot-right-profile + :chat-icon st/chat-icon-profile + :default-chat-icon (st/default-chat-icon-profile color) + :default-chat-icon-text st/default-chat-icon-text}]) + +(defn profile-icon-view [photo-path name color online] + (let [styles {:container st/container-profile + :online-view st/online-view-profile + :online-dot-left st/online-dot-left-profile + :online-dot-right st/online-dot-right-profile + :chat-icon st/chat-icon-profile + :default-chat-icon (st/default-chat-icon-profile color) + :default-chat-icon-text st/default-chat-icon-text}] + [view (:container styles) + (if photo-path + [chat-icon photo-path styles] + [default-chat-icon name color styles]) + [contact-online online styles]])) + +(defview profile-icon [] + [contact [:contact]] + (let [ ;; TODO stub data + online true + color color-purple] + [profile-icon-view (:photo-path contact) (:name contact) color online])) + +(defview my-profile-icon [] + [name [:get :username] + photo-path [:get :photo-path]] + (let [ ;; TODO stub data + online true + color color-purple] + [profile-icon-view photo-path name color online])) diff --git a/src/syng_im/components/chat_icon/styles.cljs b/src/syng_im/components/chat_icon/styles.cljs index 8b0406080c..3bd91f70b7 100644 --- a/src/syng_im/components/chat_icon/styles.cljs +++ b/src/syng_im/components/chat_icon/styles.cljs @@ -29,6 +29,11 @@ {:width 24 :height 24})) +(defn default-chat-icon-profile [color] + (merge (default-chat-icon color) + {:width 64 + :height 64})) + (def default-chat-icon-text {:marginTop -2 :color color-white @@ -52,6 +57,11 @@ {:width 24 :height 24})) +(def chat-icon-profile + (merge chat-icon + {:width 64 + :height 64})) + (def online-view {:position :absolute :bottom 0 @@ -65,9 +75,14 @@ (def online-view-menu-item (merge online-view - {:width 15 + {:width 15 :height 15})) +(def online-view-profile + (merge online-view + {:width 24 + :height 24})) + (def online-dot {:position :absolute :top 6 @@ -75,7 +90,6 @@ :height 4 :borderRadius 50 :backgroundColor color-white}) - (def online-dot-left (merge online-dot {:left 3})) (def online-dot-right (merge online-dot {:left 9})) @@ -84,12 +98,21 @@ {:top 4 :width 3 :height 3})) - (def online-dot-left-menu-item (merge online-dot-menu-item {:left 1.7})) (def online-dot-right-menu-item (merge online-dot-menu-item {:left 6.3})) +(def online-dot-profile + (merge online-dot + {:top 8 + :width 4 + :height 4})) +(def online-dot-left-profile + (merge online-dot-profile {:left 5})) +(def online-dot-right-profile + (merge online-dot-profile {:left 11})) + (def container {:width 44 :height 44}) @@ -101,3 +124,7 @@ (def container-menu-item {:width 32 :height 32}) + +(def container-profile + {:width 72 + :height 72}) diff --git a/src/syng_im/db.cljs b/src/syng_im/db.cljs index f031922451..436e58a713 100644 --- a/src/syng_im/db.cljs +++ b/src/syng_im/db.cljs @@ -23,6 +23,7 @@ :view-id default-view :navigation-stack (list default-view) ;; TODO fix hardcoded values + :photo-path nil :username "My Name" :phone-number "3147984309" :email "myemail@gmail.com" diff --git a/src/syng_im/profile/screen.cljs b/src/syng_im/profile/screen.cljs index 9d075c4999..946904cb33 100644 --- a/src/syng_im/profile/screen.cljs +++ b/src/syng_im/profile/screen.cljs @@ -1,7 +1,6 @@ (ns syng-im.profile.screen (:require-macros [syng-im.utils.views :refer [defview]]) - (:require [clojure.string :as s] - [re-frame.core :refer [subscribe dispatch]] + (:require [re-frame.core :refer [subscribe dispatch]] [syng-im.components.react :refer [view text image @@ -9,21 +8,10 @@ scroll-view touchable-highlight touchable-opacity]] - [syng-im.resources :as res] + [syng-im.components.chat-icon.screen :refer [profile-icon + my-profile-icon]] [syng-im.profile.styles :as st])) -(defn user-photo [{:keys [photo-path]}] - [image {:source (if (s/blank? photo-path) - res/user-no-photo - {:uri photo-path}) - :style st/user-photo}]) - -(defn user-online [{:keys [online]}] - (when online - [view st/user-online-container - [view st/user-online-dot-left] - [view st/user-online-dot-right]])) - (defn profile-property-view [{:keys [name value]}] [view st/profile-property-view-container [view st/profile-property-view-sub-container @@ -43,8 +31,7 @@ [icon :back st/back-btn-icon]]] [view st/status-block [view st/user-photo-container - [user-photo {}] - [user-online {:online true}]] + [profile-icon]] [text {:style st/user-name} name] [text {:style st/status} "!not implemented"] [view st/btns-container @@ -68,10 +55,11 @@ [text {:style st/report-user-text} "REPORT USER"]]]]]) (defview my-profile [] - [username [:get :username] + [username [:get :username] + photo-path [:get :photo-path] phone-number [:get :phone-number] - email [:get :email] - status [:get :status]] + email [:get :email] + status [:get :status]] [scroll-view {:style st/profile} [touchable-highlight {:style st/back-btn-touchable :on-press #(dispatch [:navigate-back])} @@ -85,8 +73,7 @@ [icon :dots st/actions-btn-icon]]] [view st/status-block [view st/user-photo-container - [user-photo {}] - [user-online {:online true}]] + [my-profile-icon]] [text {:style st/user-name} username] [text {:style st/status} status]] [view st/profile-properties-container diff --git a/src/syng_im/profile/styles.cljs b/src/syng_im/profile/styles.cljs index 545016ca4d..2b8c6aa0c2 100644 --- a/src/syng_im/profile/styles.cljs +++ b/src/syng_im/profile/styles.cljs @@ -11,37 +11,6 @@ text1-color text2-color]])) -(def user-photo - {:borderRadius 50 - :width 64 - :height 64}) - -(def user-online-container - {:position :absolute - :top 44 - :left 44 - :width 24 - :height 24 - :borderRadius 50 - :backgroundColor online-color - :borderWidth 2 - :borderColor color-white}) - -(def user-online-dot - {:position :absolute - :top 8 - :left 5 - :width 4 - :height 4 - :borderRadius 50 - :backgroundColor color-white}) - -(def user-online-dot-left - (assoc user-online-dot :left 5)) - -(def user-online-dot-right - (assoc user-online-dot :left 11)) - (def profile-property-view-container {:height 85 :paddingHorizontal 16}) @@ -101,10 +70,10 @@ :width 249}) (def user-photo-container - {:marginTop 26}) + {:marginTop 22}) (def user-name - {:marginTop 20 + {:marginTop 16 :fontSize 18 :fontFamily font :color text1-color})