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

Fix profile styles 

Former-commit-id: 7ddd90e2dc
This commit is contained in:
virvar 2016-05-06 14:25:29 +03:00
parent 3c788b4d4b
commit 088d20ebf0
10 changed files with 155 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
android/app/src/main/res/drawable-hdpi/icon_more_vertical_blue.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 162 B

BIN
android/app/src/main/res/drawable-mdpi/icon_more_vertical_blue.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 129 B

BIN
android/app/src/main/res/drawable-xhdpi/icon_more_vertical_blue.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 219 B

BIN
android/app/src/main/res/drawable-xxhdpi/icon_more_vertical_blue.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 291 B

BIN
android/app/src/main/res/drawable-xxxhdpi/icon_more_vertical_blue.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 413 B

9
src/syng_im/android/core.cljs
View File

@ -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 []

7
src/syng_im/components/drawer.cljs
View File

@ -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

277
src/syng_im/components/profile.cljs
View File

@ -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
[text {:style {:marginTop -2.5 :top 8
:color text1-color :left 5
:fontSize 18}} :width 4
"Status"]] :height 4
[view {:style {:flex .13 :borderRadius 50
:alignItems "center" :backgroundColor color-white}]
:marginRight 48 [view {:position :absolute
:marginLeft 48}} :top 8
[text {:style {:marginTop -2.5 :left 11
:color text1-color :width 4
:alignItems "center" :height 4
:textAlign "center" :borderRadius 50
:fontSize 14}} :backgroundColor color-white}]]))
(str "The brash businessman’s braggadocio "
"and public exchange with candidates " (defn profile-property-view [{:keys [name value]}]
"in the US presidential election")]] [view {:style {:height 85
[view {:style {:flex .12 :paddingHorizontal 16}}
:flexDirection "row" [view {:borderBottomWidth 1
:alignItems "center" :borderBottomColor separator-color}
:justifyContent "center"}} [text {:style {:marginTop 16
[view {:style {:height 37 :fontSize 14
:justifyContent "center" :fontFamily font
:backgroundColor "#7099E6" :color text2-color}}
:padding 8 name]
:paddingLeft 20 [text {:style {:marginTop 11
:paddingRight 20 :height 40
:marginRight 20 :fontSize 16
:borderRadius 20}} :fontFamily font
[touchable-opacity :color text1-color}}
[text {:style {:marginTop -2.5 value]]])
:color "white"
:fontSize 14}} (defn profile [{:keys [navigator]} {:keys [name status phone-number email]}]
"Message"]]] [scroll-view {:style {:flex 1
[view {:style {:width 38 :backgroundColor color-white
:height 37 :flexDirection :column}}
:alignItems "center" [touchable-highlight {:style {:position :absolute}
:backgroundColor "#E3EBFA" :on-press (fn []
:padding 8 (nav-pop navigator))
:borderRadius 19}} :underlay-color :transparent}
[touchable-opacity [view {:width 56
[text {:style {:marginTop -2.5 :height 56}
:color text3-color [image {:source {:uri "icon_back"}
:fontSize 22}} :style {:marginTop 21
"˅"]]]] :marginLeft 23
[view {:style {:flex .55 :width 8
:alignItems "flex-start" :height 14}}]]]
:flexDirection "column"
:paddingTop 10}} [view {:style {:alignSelf :center
[view {:style {:height 55 :alignItems :center
:justifyContent "center" :width 249}}
:marginLeft 20 [view {:marginTop 26}
:borderBottomWidth 1 [user-photo {}]
:borderBottomColor "#ddd"}} [user-online {:online true}]]
[touchable-opacity [text {:style {:marginTop 20
[text {:style {:marginTop -2.5 :fontSize 18
:color text2-color :fontFamily font
:fontSize 14}} :color text1-color}}
"Email"]] name]
[view {:style {:height 30 [text {:style {:marginTop 10
:borderBottomWidth 0 :fontFamily font
:marginLeft -5}} :fontSize 14
[text-input :lineHeight 20
{:style {:height 40 :textAlign :center
:fontSize 15 :color text2-color}}
:paddingBottom 15 status]
:paddingLeft 5} [view {:style {:marginTop 18
:value "christonphe_t@gmail.com"}]]] :flexDirection :row}}
[view {:style {:height 55 [touchable-highlight {:onPress (fn []
:justifyContent "center" ;; TODO not implemented
:marginLeft 20 )
:borderBottomWidth 1 :underlay-color :transparent}
:borderBottomColor "#ddd" [view {:style {:height 40
:marginTop 5}} :justifyContent :center
[touchable-opacity :backgroundColor color-blue
[text {:style {:marginTop -2.5 :paddingLeft 25
:color text2-color :paddingRight 25
:fontSize 14}} :borderRadius 50}}
"Username"]] [text {:style {:marginTop -2.5
[view {:style {:height 30 :fontSize 14
:borderBottomWidth 0 :fontFamily font
:marginLeft -5}} :color color-white}}
[text-input {:style {:height 40 "Message"]]]
:fontSize 15 [touchable-highlight {:onPress (fn []
:paddingBottom 15 ;; TODO not implemented
:paddingLeft 5}} )
"christophe_t"]]] :underlay-color :transparent}
[view {:style {:height 55 [view {:style {:marginLeft 10
:justifyContent "center" :width 40
:marginLeft 20 :height 40
:borderBottomWidth 1 :alignItems :center
:borderBottomColor "#ddd" :justifyContent :center
:marginTop 5}} :backgroundColor color-blue-transparent
[touchable-opacity :padding 8
[text {:style {:marginTop -2.5 :borderRadius 50}}
:color text2-color [image {:source {:uri "icon_more_vertical_blue"}
:fontSize 14}} :style {:width 4
"URL"]] :height 16}}]]]]]
[view {:style {:height 30 [view {:style {:marginTop 20
:borderBottomWidth 0 :alignItems :stretch
:marginLeft -5}} :flexDirection :column}}
[text-input {:style {:height 40 [profile-property-view {:name "Username"
:fontSize 15 :value name}]
:paddingBottom 15 [profile-property-view {:name "Phone number"
:paddingLeft 5}} :value phone-number}]
"http://instagram.com/etherium-wallet"]]] [profile-property-view {:name "Email"
[view {:style {:height 55 :value email}]
:justifyContent "center" [view {:style {:marginTop 50
:marginLeft 20 :marginBottom 43
:marginTop 5}} :alignItems :center}}
[touchable-opacity [touchable-opacity {}
[text {:style {:marginTop -2.5 [text {:style {:fontSize 14
:color text2-color :fontFamily font
:fontSize 14}} :lineHeight 21
"Phone"]] :color text2-color
[view {:style {:height 30 ;; IOS:
:borderBottomWidth 0 :letterSpacing 0.5}}
:marginLeft -5}} "REPORT USER"]]]]])
[text-input {:style {:height 40
:fontSize 15
:paddingBottom 15
:paddingLeft 5}}
"+1 548 093 98 66"]]]]])

1
src/syng_im/components/react.cljs
View File

@ -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)))

3
src/syng_im/components/styles.cljs
View File

@ -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")