Profile icon
This commit is contained in:
virvar
parent
4ce65b37f9
commit
d9a44d9c0b
|
|
@ -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]))
|
||||
|
|
|
|||
|
|
@ -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})
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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})
|
||||
|
|
|
|||
Loading…
Reference in New Issue