parent
3c788b4d4b
commit
088d20ebf0
Binary file not shown.
After Width: | Height: | Size: 162 B |
Binary file not shown.
After Width: | Height: | Size: 129 B |
Binary file not shown.
After Width: | Height: | Size: 219 B |
Binary file not shown.
After Width: | Height: | Size: 291 B |
Binary file not shown.
After Width: | Height: | Size: 413 B |
|
@ -57,7 +57,14 @@
|
||||||
:new-group (r/as-element [new-group {:navigator nav}])
|
:new-group (r/as-element [new-group {:navigator nav}])
|
||||||
:contact-list (r/as-element [contact-list {:navigator nav}])
|
:contact-list (r/as-element [contact-list {:navigator nav}])
|
||||||
:chat (r/as-element [chat {:navigator nav}])
|
:chat (r/as-element [chat {:navigator nav}])
|
||||||
:profile (r/as-element [profile {:navigator nav}])))
|
;; TODO pass profile
|
||||||
|
:profile (r/as-element [profile {:navigator nav}
|
||||||
|
{:name "Status"
|
||||||
|
:status (str "The brash businessman’s braggadocio "
|
||||||
|
"and public exchange with candidates "
|
||||||
|
"in the US presidential election")
|
||||||
|
:phone-number "+1 548 093 98 66"
|
||||||
|
:email "christonphe_t@gmail.com"}])))
|
||||||
(r/as-element [chat {:navigator nav}]))))}]))))
|
(r/as-element [chat {:navigator nav}]))))}]))))
|
||||||
|
|
||||||
(defn init []
|
(defn init []
|
||||||
|
|
|
@ -26,6 +26,9 @@
|
||||||
(defn open-drawer []
|
(defn open-drawer []
|
||||||
(.openDrawer @drawer-atom))
|
(.openDrawer @drawer-atom))
|
||||||
|
|
||||||
|
(defn close-drawer []
|
||||||
|
(.closeDrawer @drawer-atom))
|
||||||
|
|
||||||
(defn user-photo [{:keys [photo-path]}]
|
(defn user-photo [{:keys [photo-path]}]
|
||||||
[view {:borderRadius 50}
|
[view {:borderRadius 50}
|
||||||
[image {:source (if (s/blank? photo-path)
|
[image {:source (if (s/blank? photo-path)
|
||||||
|
@ -39,7 +42,9 @@
|
||||||
[touchable-opacity {:style {:height 48
|
[touchable-opacity {:style {:height 48
|
||||||
:paddingLeft 16
|
:paddingLeft 16
|
||||||
:paddingTop 14}
|
:paddingTop 14}
|
||||||
:onPress handler}
|
:onPress (fn []
|
||||||
|
(close-drawer)
|
||||||
|
(handler))}
|
||||||
[text {:style {:fontSize 14
|
[text {:style {:fontSize 14
|
||||||
:fontFamily font
|
:fontFamily font
|
||||||
:lineHeight 21
|
:lineHeight 21
|
||||||
|
|
|
@ -6,161 +6,160 @@
|
||||||
text
|
text
|
||||||
text-input
|
text-input
|
||||||
image
|
image
|
||||||
|
scroll-view
|
||||||
navigator
|
navigator
|
||||||
toolbar-android
|
touchable-highlight
|
||||||
touchable-opacity]]
|
touchable-opacity]]
|
||||||
[syng-im.resources :as res]
|
[syng-im.resources :as res]
|
||||||
[syng-im.components.styles :refer [font
|
[syng-im.components.styles :refer [font
|
||||||
title-font
|
title-font
|
||||||
color-white
|
color-white
|
||||||
|
color-blue
|
||||||
|
color-blue-transparent
|
||||||
chat-background
|
chat-background
|
||||||
online-color
|
online-color
|
||||||
selected-message-color
|
selected-message-color
|
||||||
|
separator-color
|
||||||
text1-color
|
text1-color
|
||||||
text2-color
|
text2-color
|
||||||
text3-color]]
|
text3-color]]
|
||||||
[syng-im.components.toolbar :refer [toolbar]]))
|
[syng-im.navigation :refer [nav-pop]]))
|
||||||
|
|
||||||
(defn chat-photo [{:keys [photo-path]}]
|
(defn user-photo [{:keys [photo-path]}]
|
||||||
[view {:borderRadius 50}
|
[view {:borderRadius 50}
|
||||||
[image {:source (if (s/blank? photo-path)
|
[image {:source (if (s/blank? photo-path)
|
||||||
res/user-no-photo
|
res/user-no-photo
|
||||||
{:uri photo-path})
|
{:uri photo-path})
|
||||||
:style {:borderRadius 50
|
:style {:borderRadius 50
|
||||||
:width 66
|
:width 64
|
||||||
:height 66}}]])
|
:height 64}}]])
|
||||||
|
|
||||||
(defn profile [{:keys [navigator]}]
|
(defn user-online [{:keys [online]}]
|
||||||
[view {:style {:flex 1
|
(when online
|
||||||
:backgroundColor "#FFF"
|
[view {:position :absolute
|
||||||
:flexDirection "column"}}
|
:top 44
|
||||||
[toolbar {:navigator navigator
|
:left 44
|
||||||
:title "Profile"}]
|
:width 24
|
||||||
[view {:style {:flex .20
|
:height 24
|
||||||
:alignItems "center"
|
:borderRadius 50
|
||||||
:justifyContent "center"}}
|
:backgroundColor online-color
|
||||||
[chat-photo {}]]
|
:borderWidth 2
|
||||||
[view {:style {:flex .07
|
:borderColor color-white}
|
||||||
:alignItems "center"}}
|
[view {:position :absolute
|
||||||
|
:top 8
|
||||||
|
:left 5
|
||||||
|
:width 4
|
||||||
|
:height 4
|
||||||
|
:borderRadius 50
|
||||||
|
:backgroundColor color-white}]
|
||||||
|
[view {:position :absolute
|
||||||
|
:top 8
|
||||||
|
:left 11
|
||||||
|
:width 4
|
||||||
|
:height 4
|
||||||
|
:borderRadius 50
|
||||||
|
:backgroundColor color-white}]]))
|
||||||
|
|
||||||
|
(defn profile-property-view [{:keys [name value]}]
|
||||||
|
[view {:style {:height 85
|
||||||
|
:paddingHorizontal 16}}
|
||||||
|
[view {:borderBottomWidth 1
|
||||||
|
:borderBottomColor separator-color}
|
||||||
|
[text {:style {:marginTop 16
|
||||||
|
:fontSize 14
|
||||||
|
:fontFamily font
|
||||||
|
:color text2-color}}
|
||||||
|
name]
|
||||||
|
[text {:style {:marginTop 11
|
||||||
|
:height 40
|
||||||
|
:fontSize 16
|
||||||
|
:fontFamily font
|
||||||
|
:color text1-color}}
|
||||||
|
value]]])
|
||||||
|
|
||||||
|
(defn profile [{:keys [navigator]} {:keys [name status phone-number email]}]
|
||||||
|
[scroll-view {:style {:flex 1
|
||||||
|
:backgroundColor color-white
|
||||||
|
:flexDirection :column}}
|
||||||
|
[touchable-highlight {:style {:position :absolute}
|
||||||
|
:on-press (fn []
|
||||||
|
(nav-pop navigator))
|
||||||
|
:underlay-color :transparent}
|
||||||
|
[view {:width 56
|
||||||
|
:height 56}
|
||||||
|
[image {:source {:uri "icon_back"}
|
||||||
|
:style {:marginTop 21
|
||||||
|
:marginLeft 23
|
||||||
|
:width 8
|
||||||
|
:height 14}}]]]
|
||||||
|
|
||||||
|
[view {:style {:alignSelf :center
|
||||||
|
:alignItems :center
|
||||||
|
:width 249}}
|
||||||
|
[view {:marginTop 26}
|
||||||
|
[user-photo {}]
|
||||||
|
[user-online {:online true}]]
|
||||||
|
[text {:style {:marginTop 20
|
||||||
|
:fontSize 18
|
||||||
|
:fontFamily font
|
||||||
|
:color text1-color}}
|
||||||
|
name]
|
||||||
|
[text {:style {:marginTop 10
|
||||||
|
:fontFamily font
|
||||||
|
:fontSize 14
|
||||||
|
:lineHeight 20
|
||||||
|
:textAlign :center
|
||||||
|
:color text2-color}}
|
||||||
|
status]
|
||||||
|
[view {:style {:marginTop 18
|
||||||
|
:flexDirection :row}}
|
||||||
|
[touchable-highlight {:onPress (fn []
|
||||||
|
;; TODO not implemented
|
||||||
|
)
|
||||||
|
:underlay-color :transparent}
|
||||||
|
[view {:style {:height 40
|
||||||
|
:justifyContent :center
|
||||||
|
:backgroundColor color-blue
|
||||||
|
:paddingLeft 25
|
||||||
|
:paddingRight 25
|
||||||
|
:borderRadius 50}}
|
||||||
[text {:style {:marginTop -2.5
|
[text {:style {:marginTop -2.5
|
||||||
:color text1-color
|
:fontSize 14
|
||||||
:fontSize 18}}
|
:fontFamily font
|
||||||
"Status"]]
|
:color color-white}}
|
||||||
[view {:style {:flex .13
|
|
||||||
:alignItems "center"
|
|
||||||
:marginRight 48
|
|
||||||
:marginLeft 48}}
|
|
||||||
[text {:style {:marginTop -2.5
|
|
||||||
:color text1-color
|
|
||||||
:alignItems "center"
|
|
||||||
:textAlign "center"
|
|
||||||
:fontSize 14}}
|
|
||||||
(str "The brash businessman’s braggadocio "
|
|
||||||
"and public exchange with candidates "
|
|
||||||
"in the US presidential election")]]
|
|
||||||
[view {:style {:flex .12
|
|
||||||
:flexDirection "row"
|
|
||||||
:alignItems "center"
|
|
||||||
:justifyContent "center"}}
|
|
||||||
[view {:style {:height 37
|
|
||||||
:justifyContent "center"
|
|
||||||
:backgroundColor "#7099E6"
|
|
||||||
:padding 8
|
|
||||||
:paddingLeft 20
|
|
||||||
:paddingRight 20
|
|
||||||
:marginRight 20
|
|
||||||
:borderRadius 20}}
|
|
||||||
[touchable-opacity
|
|
||||||
[text {:style {:marginTop -2.5
|
|
||||||
:color "white"
|
|
||||||
:fontSize 14}}
|
|
||||||
"Message"]]]
|
"Message"]]]
|
||||||
[view {:style {:width 38
|
[touchable-highlight {:onPress (fn []
|
||||||
:height 37
|
;; TODO not implemented
|
||||||
:alignItems "center"
|
)
|
||||||
:backgroundColor "#E3EBFA"
|
:underlay-color :transparent}
|
||||||
|
[view {:style {:marginLeft 10
|
||||||
|
:width 40
|
||||||
|
:height 40
|
||||||
|
:alignItems :center
|
||||||
|
:justifyContent :center
|
||||||
|
:backgroundColor color-blue-transparent
|
||||||
:padding 8
|
:padding 8
|
||||||
:borderRadius 19}}
|
:borderRadius 50}}
|
||||||
[touchable-opacity
|
[image {:source {:uri "icon_more_vertical_blue"}
|
||||||
[text {:style {:marginTop -2.5
|
:style {:width 4
|
||||||
:color text3-color
|
:height 16}}]]]]]
|
||||||
:fontSize 22}}
|
[view {:style {:marginTop 20
|
||||||
"˅"]]]]
|
:alignItems :stretch
|
||||||
[view {:style {:flex .55
|
:flexDirection :column}}
|
||||||
:alignItems "flex-start"
|
[profile-property-view {:name "Username"
|
||||||
:flexDirection "column"
|
:value name}]
|
||||||
:paddingTop 10}}
|
[profile-property-view {:name "Phone number"
|
||||||
[view {:style {:height 55
|
:value phone-number}]
|
||||||
:justifyContent "center"
|
[profile-property-view {:name "Email"
|
||||||
:marginLeft 20
|
:value email}]
|
||||||
:borderBottomWidth 1
|
[view {:style {:marginTop 50
|
||||||
:borderBottomColor "#ddd"}}
|
:marginBottom 43
|
||||||
[touchable-opacity
|
:alignItems :center}}
|
||||||
[text {:style {:marginTop -2.5
|
[touchable-opacity {}
|
||||||
|
[text {:style {:fontSize 14
|
||||||
|
:fontFamily font
|
||||||
|
:lineHeight 21
|
||||||
:color text2-color
|
:color text2-color
|
||||||
:fontSize 14}}
|
;; IOS:
|
||||||
"Email"]]
|
:letterSpacing 0.5}}
|
||||||
[view {:style {:height 30
|
"REPORT USER"]]]]])
|
||||||
:borderBottomWidth 0
|
|
||||||
:marginLeft -5}}
|
|
||||||
[text-input
|
|
||||||
{:style {:height 40
|
|
||||||
:fontSize 15
|
|
||||||
:paddingBottom 15
|
|
||||||
:paddingLeft 5}
|
|
||||||
:value "christonphe_t@gmail.com"}]]]
|
|
||||||
[view {:style {:height 55
|
|
||||||
:justifyContent "center"
|
|
||||||
:marginLeft 20
|
|
||||||
:borderBottomWidth 1
|
|
||||||
:borderBottomColor "#ddd"
|
|
||||||
:marginTop 5}}
|
|
||||||
[touchable-opacity
|
|
||||||
[text {:style {:marginTop -2.5
|
|
||||||
:color text2-color
|
|
||||||
:fontSize 14}}
|
|
||||||
"Username"]]
|
|
||||||
[view {:style {:height 30
|
|
||||||
:borderBottomWidth 0
|
|
||||||
:marginLeft -5}}
|
|
||||||
[text-input {:style {:height 40
|
|
||||||
:fontSize 15
|
|
||||||
:paddingBottom 15
|
|
||||||
:paddingLeft 5}}
|
|
||||||
"christophe_t"]]]
|
|
||||||
[view {:style {:height 55
|
|
||||||
:justifyContent "center"
|
|
||||||
:marginLeft 20
|
|
||||||
:borderBottomWidth 1
|
|
||||||
:borderBottomColor "#ddd"
|
|
||||||
:marginTop 5}}
|
|
||||||
[touchable-opacity
|
|
||||||
[text {:style {:marginTop -2.5
|
|
||||||
:color text2-color
|
|
||||||
:fontSize 14}}
|
|
||||||
"URL"]]
|
|
||||||
[view {:style {:height 30
|
|
||||||
:borderBottomWidth 0
|
|
||||||
:marginLeft -5}}
|
|
||||||
[text-input {:style {:height 40
|
|
||||||
:fontSize 15
|
|
||||||
:paddingBottom 15
|
|
||||||
:paddingLeft 5}}
|
|
||||||
"http://instagram.com/etherium-wallet"]]]
|
|
||||||
[view {:style {:height 55
|
|
||||||
:justifyContent "center"
|
|
||||||
:marginLeft 20
|
|
||||||
:marginTop 5}}
|
|
||||||
[touchable-opacity
|
|
||||||
[text {:style {:marginTop -2.5
|
|
||||||
:color text2-color
|
|
||||||
:fontSize 14}}
|
|
||||||
"Phone"]]
|
|
||||||
[view {:style {:height 30
|
|
||||||
:borderBottomWidth 0
|
|
||||||
:marginLeft -5}}
|
|
||||||
[text-input {:style {:height 40
|
|
||||||
:fontSize 15
|
|
||||||
:paddingBottom 15
|
|
||||||
:paddingLeft 5}}
|
|
||||||
"+1 548 093 98 66"]]]]])
|
|
||||||
|
|
|
@ -11,6 +11,7 @@
|
||||||
(def touchable-highlight (r/adapt-react-class (.-TouchableHighlight js/React)))
|
(def touchable-highlight (r/adapt-react-class (.-TouchableHighlight js/React)))
|
||||||
(def toolbar-android (r/adapt-react-class (.-ToolbarAndroid js/React)))
|
(def toolbar-android (r/adapt-react-class (.-ToolbarAndroid js/React)))
|
||||||
(def list-view (r/adapt-react-class (.-ListView js/React)))
|
(def list-view (r/adapt-react-class (.-ListView js/React)))
|
||||||
|
(def scroll-view (r/adapt-react-class (.-ScrollView js/React)))
|
||||||
(def text-input (r/adapt-react-class (.-TextInput js/React)))
|
(def text-input (r/adapt-react-class (.-TextInput js/React)))
|
||||||
(def drawer-layout-android (r/adapt-react-class (.-DrawerLayoutAndroid js/React)))
|
(def drawer-layout-android (r/adapt-react-class (.-DrawerLayoutAndroid js/React)))
|
||||||
(def touchable-opacity (r/adapt-react-class (.-TouchableOpacity js/React)))
|
(def touchable-opacity (r/adapt-react-class (.-TouchableOpacity js/React)))
|
||||||
|
|
|
@ -5,6 +5,7 @@
|
||||||
(def title-font "sans-serif-medium")
|
(def title-font "sans-serif-medium")
|
||||||
|
|
||||||
(def color-blue "#7099e6")
|
(def color-blue "#7099e6")
|
||||||
|
(def color-blue-transparent "#7099e632")
|
||||||
(def color-black "#000000de")
|
(def color-black "#000000de")
|
||||||
(def color-purple "#a187d5")
|
(def color-purple "#a187d5")
|
||||||
(def color-gray "#838c93de")
|
(def color-gray "#838c93de")
|
||||||
|
@ -18,7 +19,7 @@
|
||||||
(def text2-color color-gray)
|
(def text2-color color-gray)
|
||||||
(def text3-color color-blue)
|
(def text3-color color-blue)
|
||||||
(def online-color color-blue)
|
(def online-color color-blue)
|
||||||
(def new-messages-count-color "#7099e632")
|
(def new-messages-count-color color-blue-transparent)
|
||||||
(def chat-background color-light-gray)
|
(def chat-background color-light-gray)
|
||||||
(def selected-message-color "#E4E9ED")
|
(def selected-message-color "#E4E9ED")
|
||||||
(def separator-color "#0000001f")
|
(def separator-color "#0000001f")
|
||||||
|
|
Loading…
Reference in New Issue