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

Profile icon

This commit is contained in:
virvar 2016-05-20 10:22:14 +03:00
parent 4ce65b37f9
commit d9a44d9c0b
5 changed files with 83 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/syng_im/components/chat_icon/screen.cljs
View File

@ -5,7 +5,8 @@
text text
image image
icon]] 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] (defn default-chat-icon [name color styles]
[view (:default-chat-icon styles) [view (:default-chat-icon styles)
@ -60,3 +61,42 @@
:chat-icon st/chat-icon-menu-item :chat-icon st/chat-icon-menu-item
:default-chat-icon (st/default-chat-icon-menu-item color) :default-chat-icon (st/default-chat-icon-menu-item color)
:default-chat-icon-text st/default-chat-icon-text}]) :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]))

31
src/syng_im/components/chat_icon/styles.cljs
View File

@ -29,6 +29,11 @@
{:width 24 {:width 24
:height 24})) :height 24}))
(defn default-chat-icon-profile [color]
(merge (default-chat-icon color)
{:width 64
:height 64}))
(def default-chat-icon-text (def default-chat-icon-text
{:marginTop -2 {:marginTop -2
:color color-white :color color-white
@ -52,6 +57,11 @@
{:width 24 {:width 24
:height 24})) :height 24}))
(def chat-icon-profile
(merge chat-icon
{:width 64
:height 64}))
(def online-view (def online-view
{:position :absolute {:position :absolute
:bottom 0 :bottom 0
@ -68,6 +78,11 @@
{:width 15 {:width 15
:height 15})) :height 15}))
(def online-view-profile
(merge online-view
{:width 24
:height 24}))
(def online-dot (def online-dot
{:position :absolute {:position :absolute
:top 6 :top 6
@ -75,7 +90,6 @@
:height 4 :height 4
:borderRadius 50 :borderRadius 50
:backgroundColor color-white}) :backgroundColor color-white})
(def online-dot-left (merge online-dot {:left 3})) (def online-dot-left (merge online-dot {:left 3}))
(def online-dot-right (merge online-dot {:left 9})) (def online-dot-right (merge online-dot {:left 9}))
@ -84,12 +98,21 @@
{:top 4 {:top 4
:width 3 :width 3
:height 3})) :height 3}))
(def online-dot-left-menu-item (def online-dot-left-menu-item
(merge online-dot-menu-item {:left 1.7})) (merge online-dot-menu-item {:left 1.7}))
(def online-dot-right-menu-item (def online-dot-right-menu-item
(merge online-dot-menu-item {:left 6.3})) (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 (def container
{:width 44 {:width 44
:height 44}) :height 44})
@ -101,3 +124,7 @@
(def container-menu-item (def container-menu-item
{:width 32 {:width 32
:height 32}) :height 32})
(def container-profile
{:width 72
:height 72})

1
src/syng_im/db.cljs
View File

@ -23,6 +23,7 @@
:view-id default-view :view-id default-view
:navigation-stack (list default-view) :navigation-stack (list default-view)
;; TODO fix hardcoded values ;; TODO fix hardcoded values
:photo-path nil
:username "My Name" :username "My Name"
:phone-number "3147984309" :phone-number "3147984309"
:email "myemail@gmail.com" :email "myemail@gmail.com"

25
src/syng_im/profile/screen.cljs
View File

@ -1,7 +1,6 @@
(ns syng-im.profile.screen (ns syng-im.profile.screen
(:require-macros [syng-im.utils.views :refer [defview]]) (:require-macros [syng-im.utils.views :refer [defview]])
(:require [clojure.string :as s] (:require [re-frame.core :refer [subscribe dispatch]]
[re-frame.core :refer [subscribe dispatch]]
[syng-im.components.react :refer [view [syng-im.components.react :refer [view
text text
image image
@ -9,21 +8,10 @@
scroll-view scroll-view
touchable-highlight touchable-highlight
touchable-opacity]] 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])) [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]}] (defn profile-property-view [{:keys [name value]}]
[view st/profile-property-view-container [view st/profile-property-view-container
[view st/profile-property-view-sub-container [view st/profile-property-view-sub-container
@ -43,8 +31,7 @@
[icon :back st/back-btn-icon]]] [icon :back st/back-btn-icon]]]
[view st/status-block [view st/status-block
[view st/user-photo-container [view st/user-photo-container
[user-photo {}] [profile-icon]]
[user-online {:online true}]]
[text {:style st/user-name} name] [text {:style st/user-name} name]
[text {:style st/status} "!not implemented"] [text {:style st/status} "!not implemented"]
[view st/btns-container [view st/btns-container
@ -69,6 +56,7 @@
(defview my-profile [] (defview my-profile []
[username [:get :username] [username [:get :username]
photo-path [:get :photo-path]
phone-number [:get :phone-number] phone-number [:get :phone-number]
email [:get :email] email [:get :email]
status [:get :status]] status [:get :status]]
@ -85,8 +73,7 @@
[icon :dots st/actions-btn-icon]]] [icon :dots st/actions-btn-icon]]]
[view st/status-block [view st/status-block
[view st/user-photo-container [view st/user-photo-container
[user-photo {}] [my-profile-icon]]
[user-online {:online true}]]
[text {:style st/user-name} username] [text {:style st/user-name} username]
[text {:style st/status} status]] [text {:style st/status} status]]
[view st/profile-properties-container [view st/profile-properties-container

35
src/syng_im/profile/styles.cljs
View File

@ -11,37 +11,6 @@
text1-color text1-color
text2-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 (def profile-property-view-container
{:height 85 {:height 85
:paddingHorizontal 16}) :paddingHorizontal 16})
@ -101,10 +70,10 @@
:width 249}) :width 249})
(def user-photo-container (def user-photo-container
{:marginTop 26}) {:marginTop 22})
(def user-name (def user-name
{:marginTop 20 {:marginTop 16
:fontSize 18 :fontSize 18
:fontFamily font :fontFamily font
:color text1-color}) :color text1-color})