Profile and Drawer styles refactoring

Former-commit-id: 547c9031be
This commit is contained in:
virvar 2016-05-09 09:53:02 +03:00
parent 34bd8bebe7
commit 52ff320c23
4 changed files with 272 additions and 158 deletions

View File

@ -11,15 +11,7 @@
drawer-layout-android drawer-layout-android
touchable-opacity]] touchable-opacity]]
[syng-im.resources :as res] [syng-im.resources :as res]
[syng-im.components.styles :refer [font [syng-im.components.drawer-styles :as st]))
title-font
color-white
chat-background
online-color
selected-message-color
text1-color
text2-color
text3-color]]))
(defonce drawer-atom (atom)) (defonce drawer-atom (atom))
@ -30,45 +22,27 @@
(.closeDrawer @drawer-atom)) (.closeDrawer @drawer-atom))
(defn user-photo [{:keys [photo-path]}] (defn user-photo [{:keys [photo-path]}]
[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 st/user-photo}])
:width 64
:height 64}}]])
(defn menu-item [{:keys [name handler]}] (defn menu-item [{:keys [name handler]}]
[touchable-opacity {:style {:height 48 [touchable-opacity {:style st/menu-item-touchable
:paddingLeft 16
:paddingTop 14}
:onPress (fn [] :onPress (fn []
(close-drawer) (close-drawer)
(handler))} (handler))}
[text {:style {:fontSize 14 [text {:style st/menu-item-text}
:fontFamily font
:lineHeight 21
:color text1-color}}
name]]) name]])
(defn drawer-menu [navigator] (defn drawer-menu [navigator]
[view {:style {:flex 1 [view {:style st/drawer-menu}
:backgroundColor color-white [view {:style st/user-photo-container}
:flexDirection :column}}
[view {:style {:marginTop 40
:alignItems :center
:justifyContent :center}}
[user-photo {}]] [user-photo {}]]
[view {:style {:marginTop 20 [view {:style st/name-container}
:alignItems :center}} [text {:style st/name-text}
[text {:style {:marginTop -2.5
:color text1-color
:fontSize 16}}
"Status"]] "Status"]]
[view {:style {:flex 1 [view {:style st/menu-items-container}
:marginTop 80
:alignItems :stretch
:flexDirection :column}}
[menu-item {:name "Profile" [menu-item {:name "Profile"
:handler (fn [] :handler (fn []
(dispatch [:show-profile navigator]))}] (dispatch [:show-profile navigator]))}]
@ -85,16 +59,12 @@
)}] )}]
[menu-item {:name "FAQ" [menu-item {:name "FAQ"
:handler (fn [])}]] :handler (fn [])}]]
[view {:style {:paddingVertical 36 [view {:style st/switch-users-container}
:alignItems :center}}
[touchable-opacity {:onPress (fn [] [touchable-opacity {:onPress (fn []
(close-drawer) (close-drawer)
;; TODO not implemented ;; TODO not implemented
)} )}
[text {:style {:fontSize 14 [text {:style st/switch-users-text}
:fontFamily font
:lineHeight 21
:color text3-color}}
"Switch users"]]]]) "Switch users"]]]])
(defn drawer-view [{:keys [navigator]} items] (defn drawer-view [{:keys [navigator]} items]

View File

@ -0,0 +1,76 @@
(ns syng-im.components.drawer-styles
(:require [syng-im.components.styles :refer [font
color-light-blue-transparent
color-white
color-black
color-blue
color-blue-transparent
selected-message-color
online-color
separator-color
text1-color
text2-color
text3-color]]))
(def user-photo
{:borderRadius 50
:width 64
:height 64})
(def menu-item-touchable
{:height 48
:paddingLeft 16
:paddingTop 14})
(def menu-item-text
{:fontSize 14
:fontFamily font
:lineHeight 21
:color text1-color})
(def drawer-menu
{:flex 1
:backgroundColor color-white
:flexDirection :column})
(def user-photo-container
{:marginTop 40
:alignItems :center
:justifyContent :center})
(def name-container
{:marginTop 20
:alignItems :center})
(def name-text
{:marginTop -2.5
:color text1-color
:fontSize 16})
(def menu-items-container
{:flex 1
:marginTop 80
:alignItems :stretch
:flexDirection :column})
(def switch-users-container
{:paddingVertical 36
:alignItems :center})
(def switch-users-text
{:fontSize 14
:fontFamily font
:lineHeight 21
:color text3-color})
(comment drawer-menu [navigator]
[view {:style st/drawer-menu}
[view {:style }
[touchable-opacity {:onPress (fn []
(close-drawer)
;; TODO not implemented
)}
[text {:style }
"Switch users"]]]])

View File

@ -11,157 +11,71 @@
touchable-highlight 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.profile-styles :as st]
title-font
color-white
color-blue
color-blue-transparent
chat-background
online-color
selected-message-color
separator-color
text1-color
text2-color
text3-color]]
[syng-im.navigation :refer [nav-pop]])) [syng-im.navigation :refer [nav-pop]]))
(defn user-photo [{:keys [photo-path]}] (defn user-photo [{:keys [photo-path]}]
[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 st/user-photo}])
:width 64
:height 64}}]])
(defn user-online [{:keys [online]}] (defn user-online [{:keys [online]}]
(when online (when online
[view {:position :absolute [view st/user-online-container
:top 44 [view st/user-online-dot-left]
:left 44 [view st/user-online-dot-right]]))
:width 24
:height 24
:borderRadius 50
:backgroundColor online-color
:borderWidth 2
:borderColor color-white}
[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]}] (defn profile-property-view [{:keys [name value]}]
[view {:style {:height 85 [view {:style st/profile-property-view-container}
:paddingHorizontal 16}} [view {:style st/profile-property-view-sub-container}
[view {:borderBottomWidth 1 [text {:style st/profile-property-view-label}
:borderBottomColor separator-color}
[text {:style {:marginTop 16
:fontSize 14
:fontFamily font
:color text2-color}}
name] name]
[text {:style {:marginTop 11 [text {:style st/profile-property-view-value}
:height 40
:fontSize 16
:fontFamily font
:color text1-color}}
value]]]) value]]])
(defn profile [{:keys [navigator]}] (defn profile [{:keys [navigator]}]
(let [contact (subscribe [:contact])] (let [contact (subscribe [:contact])]
(fn [{:keys [navigator]}] (fn [{:keys [navigator]}]
[scroll-view {:style {:flex 1 [scroll-view {:style st/profile}
:backgroundColor color-white [touchable-highlight {:style st/profile-back-button-touchable
:flexDirection :column}}
[touchable-highlight {:style {:position :absolute}
:on-press (fn [] :on-press (fn []
(nav-pop navigator)) (nav-pop navigator))
:underlay-color :transparent} :underlay-color :transparent}
[view {:width 56 [view st/profile-back-button-container
:height 56}
[image {:source {:uri "icon_back"} [image {:source {:uri "icon_back"}
:style {:marginTop 21 :style st/profile-back-button-icon}]]]
:marginLeft 23 [view {:style st/status-block}
:width 8 [view {:style st/user-photo-container}
:height 14}}]]]
[view {:style {:alignSelf :center
:alignItems :center
:width 249}}
[view {:marginTop 26}
[user-photo {}] [user-photo {}]
[user-online {:online true}]] [user-online {:online true}]]
[text {:style {:marginTop 20 [text {:style st/user-name}
:fontSize 18
:fontFamily font
:color text1-color}}
(:name @contact)] (:name @contact)]
[text {:style {:marginTop 10 [text {:style st/status}
:fontFamily font
:fontSize 14
:lineHeight 20
:textAlign :center
:color text2-color}}
"!not implemented"] "!not implemented"]
[view {:style {:marginTop 18 [view {:style st/btns-container}
:flexDirection :row}}
[touchable-highlight {:onPress (fn [] [touchable-highlight {:onPress (fn []
;; TODO not implemented ;; TODO not implemented
) )
:underlay-color :transparent} :underlay-color :transparent}
[view {:style {:height 40 [view {:style st/message-btn}
:justifyContent :center [text {:style st/message-btn-text}
:backgroundColor color-blue
:paddingLeft 25
:paddingRight 25
:borderRadius 50}}
[text {:style {:marginTop -2.5
:fontSize 14
:fontFamily font
:color color-white}}
"Message"]]] "Message"]]]
[touchable-highlight {:onPress (fn [] [touchable-highlight {:onPress (fn []
;; TODO not implemented ;; TODO not implemented
) )
:underlay-color :transparent} :underlay-color :transparent}
[view {:style {:marginLeft 10 [view {:style st/more-btn}
:width 40
:height 40
:alignItems :center
:justifyContent :center
:backgroundColor color-blue-transparent
:padding 8
:borderRadius 50}}
[image {:source {:uri "icon_more_vertical_blue"} [image {:source {:uri "icon_more_vertical_blue"}
:style {:width 4 :style st/more-btn-image}]]]]]
:height 16}}]]]]] [view {:style st/profile-properties-container}
[view {:style {:marginTop 20
:alignItems :stretch
:flexDirection :column}}
[profile-property-view {:name "Username" [profile-property-view {:name "Username"
:value (:name @contact)}] :value (:name @contact)}]
[profile-property-view {:name "Phone number" [profile-property-view {:name "Phone number"
:value (:phone-number @contact)}] :value (:phone-number @contact)}]
[profile-property-view {:name "Email" [profile-property-view {:name "Email"
:value "!not implemented"}] :value "!not implemented"}]
[view {:style {:marginTop 50 [view {:style st/report-user-container}
:marginBottom 43
:alignItems :center}}
[touchable-opacity {} [touchable-opacity {}
[text {:style {:fontSize 14 [text {:style st/report-user-text}
:fontFamily font
:lineHeight 21
:color text2-color
;; IOS:
:letterSpacing 0.5}}
"REPORT USER"]]]]]))) "REPORT USER"]]]]])))

View File

@ -0,0 +1,154 @@
(ns syng-im.components.profile-styles
(:require [syng-im.components.styles :refer [font
color-light-blue-transparent
color-white
color-black
color-blue
color-blue-transparent
selected-message-color
online-color
separator-color
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})
(def profile-property-view-sub-container
{:borderBottomWidth 1
:borderBottomColor separator-color})
(def profile-property-view-label
{:marginTop 16
:fontSize 14
:fontFamily font
:color text2-color})
(def profile-property-view-value
{:marginTop 11
:height 40
:fontSize 16
:fontFamily font
:color text1-color})
(def profile
{:flex 1
:backgroundColor color-white
:flexDirection :column})
(def profile-back-button-touchable
{:position :absolute})
(def profile-back-button-container
{:width 56
:height 56})
(def profile-back-button-icon
{:marginTop 21
:marginLeft 23
:width 8
:height 14})
(def status-block
{:alignSelf :center
:alignItems :center
:width 249})
(def user-photo-container
{:marginTop 26})
(def user-name
{:marginTop 20
:fontSize 18
:fontFamily font
:color text1-color})
(def status
{:marginTop 10
:fontFamily font
:fontSize 14
:lineHeight 20
:textAlign :center
:color text2-color})
(def btns-container
{:marginTop 18
:flexDirection :row})
(def message-btn
{:height 40
:justifyContent :center
:backgroundColor color-blue
:paddingLeft 25
:paddingRight 25
:borderRadius 50})
(def message-btn-text
{:marginTop -2.5
:fontSize 14
:fontFamily font
:color color-white})
(def more-btn
{:marginLeft 10
:width 40
:height 40
:alignItems :center
:justifyContent :center
:backgroundColor color-blue-transparent
:padding 8
:borderRadius 50})
(def more-btn-image
{:width 4
:height 16})
(def profile-properties-container
{:marginTop 20
:alignItems :stretch
:flexDirection :column})
(def report-user-container
{:marginTop 50
:marginBottom 43
:alignItems :center})
(def report-user-text
{:fontSize 14
:fontFamily font
:lineHeight 21
:color text2-color
;; IOS:
:letterSpacing 0.5})