Profile and Drawer styles refactoring
This commit is contained in:
virvar
parent
e4e9bcfc1a
commit
547c9031be
|
|
@ -11,15 +11,7 @@
|
|||
drawer-layout-android
|
||||
touchable-opacity]]
|
||||
[syng-im.resources :as res]
|
||||
[syng-im.components.styles :refer [font
|
||||
title-font
|
||||
color-white
|
||||
chat-background
|
||||
online-color
|
||||
selected-message-color
|
||||
text1-color
|
||||
text2-color
|
||||
text3-color]]))
|
||||
[syng-im.components.drawer-styles :as st]))
|
||||
|
||||
(defonce drawer-atom (atom))
|
||||
|
||||
|
|
@ -30,45 +22,27 @@
|
|||
(.closeDrawer @drawer-atom))
|
||||
|
||||
(defn user-photo [{:keys [photo-path]}]
|
||||
[view {:borderRadius 50}
|
||||
[image {:source (if (s/blank? photo-path)
|
||||
res/user-no-photo
|
||||
{:uri photo-path})
|
||||
:style {:borderRadius 50
|
||||
:width 64
|
||||
:height 64}}]])
|
||||
[image {:source (if (s/blank? photo-path)
|
||||
res/user-no-photo
|
||||
{:uri photo-path})
|
||||
:style st/user-photo}])
|
||||
|
||||
(defn menu-item [{:keys [name handler]}]
|
||||
[touchable-opacity {:style {:height 48
|
||||
:paddingLeft 16
|
||||
:paddingTop 14}
|
||||
[touchable-opacity {:style st/menu-item-touchable
|
||||
:onPress (fn []
|
||||
(close-drawer)
|
||||
(handler))}
|
||||
[text {:style {:fontSize 14
|
||||
:fontFamily font
|
||||
:lineHeight 21
|
||||
:color text1-color}}
|
||||
[text {:style st/menu-item-text}
|
||||
name]])
|
||||
|
||||
(defn drawer-menu [navigator]
|
||||
[view {:style {:flex 1
|
||||
:backgroundColor color-white
|
||||
:flexDirection :column}}
|
||||
[view {:style {:marginTop 40
|
||||
:alignItems :center
|
||||
:justifyContent :center}}
|
||||
[view {:style st/drawer-menu}
|
||||
[view {:style st/user-photo-container}
|
||||
[user-photo {}]]
|
||||
[view {:style {:marginTop 20
|
||||
:alignItems :center}}
|
||||
[text {:style {:marginTop -2.5
|
||||
:color text1-color
|
||||
:fontSize 16}}
|
||||
[view {:style st/name-container}
|
||||
[text {:style st/name-text}
|
||||
"Status"]]
|
||||
[view {:style {:flex 1
|
||||
:marginTop 80
|
||||
:alignItems :stretch
|
||||
:flexDirection :column}}
|
||||
[view {:style st/menu-items-container}
|
||||
[menu-item {:name "Profile"
|
||||
:handler (fn []
|
||||
(dispatch [:show-profile navigator]))}]
|
||||
|
|
@ -85,16 +59,12 @@
|
|||
)}]
|
||||
[menu-item {:name "FAQ"
|
||||
:handler (fn [])}]]
|
||||
[view {:style {:paddingVertical 36
|
||||
:alignItems :center}}
|
||||
[view {:style st/switch-users-container}
|
||||
[touchable-opacity {:onPress (fn []
|
||||
(close-drawer)
|
||||
;; TODO not implemented
|
||||
)}
|
||||
[text {:style {:fontSize 14
|
||||
:fontFamily font
|
||||
:lineHeight 21
|
||||
:color text3-color}}
|
||||
[text {:style st/switch-users-text}
|
||||
"Switch users"]]]])
|
||||
|
||||
(defn drawer-view [{:keys [navigator]} items]
|
||||
|
|
|
|||
|
|
@ -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"]]]])
|
||||
|
|
@ -11,157 +11,71 @@
|
|||
touchable-highlight
|
||||
touchable-opacity]]
|
||||
[syng-im.resources :as res]
|
||||
[syng-im.components.styles :refer [font
|
||||
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.components.profile-styles :as st]
|
||||
[syng-im.navigation :refer [nav-pop]]))
|
||||
|
||||
(defn user-photo [{:keys [photo-path]}]
|
||||
[view {:borderRadius 50}
|
||||
[image {:source (if (s/blank? photo-path)
|
||||
res/user-no-photo
|
||||
{:uri photo-path})
|
||||
:style {:borderRadius 50
|
||||
:width 64
|
||||
:height 64}}]])
|
||||
[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 {:position :absolute
|
||||
:top 44
|
||||
:left 44
|
||||
: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}]]))
|
||||
[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 {:style {:height 85
|
||||
:paddingHorizontal 16}}
|
||||
[view {:borderBottomWidth 1
|
||||
:borderBottomColor separator-color}
|
||||
[text {:style {:marginTop 16
|
||||
:fontSize 14
|
||||
:fontFamily font
|
||||
:color text2-color}}
|
||||
[view {:style st/profile-property-view-container}
|
||||
[view {:style st/profile-property-view-sub-container}
|
||||
[text {:style st/profile-property-view-label}
|
||||
name]
|
||||
[text {:style {:marginTop 11
|
||||
:height 40
|
||||
:fontSize 16
|
||||
:fontFamily font
|
||||
:color text1-color}}
|
||||
[text {:style st/profile-property-view-value}
|
||||
value]]])
|
||||
|
||||
(defn profile [{:keys [navigator]}]
|
||||
(let [contact (subscribe [:contact])]
|
||||
(fn [{:keys [navigator]}]
|
||||
[scroll-view {:style {:flex 1
|
||||
:backgroundColor color-white
|
||||
:flexDirection :column}}
|
||||
[touchable-highlight {:style {:position :absolute}
|
||||
[scroll-view {:style st/profile}
|
||||
[touchable-highlight {:style st/profile-back-button-touchable
|
||||
:on-press (fn []
|
||||
(nav-pop navigator))
|
||||
:underlay-color :transparent}
|
||||
[view {:width 56
|
||||
:height 56}
|
||||
[view st/profile-back-button-container
|
||||
[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}
|
||||
:style st/profile-back-button-icon}]]]
|
||||
[view {:style st/status-block}
|
||||
[view {:style st/user-photo-container}
|
||||
[user-photo {}]
|
||||
[user-online {:online true}]]
|
||||
[text {:style {:marginTop 20
|
||||
:fontSize 18
|
||||
:fontFamily font
|
||||
:color text1-color}}
|
||||
[text {:style st/user-name}
|
||||
(:name @contact)]
|
||||
[text {:style {:marginTop 10
|
||||
:fontFamily font
|
||||
:fontSize 14
|
||||
:lineHeight 20
|
||||
:textAlign :center
|
||||
:color text2-color}}
|
||||
[text {:style st/status}
|
||||
"!not implemented"]
|
||||
[view {:style {:marginTop 18
|
||||
:flexDirection :row}}
|
||||
[view {:style st/btns-container}
|
||||
[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
|
||||
:fontSize 14
|
||||
:fontFamily font
|
||||
:color color-white}}
|
||||
[view {:style st/message-btn}
|
||||
[text {:style st/message-btn-text}
|
||||
"Message"]]]
|
||||
[touchable-highlight {:onPress (fn []
|
||||
;; TODO not implemented
|
||||
)
|
||||
:underlay-color :transparent}
|
||||
[view {:style {:marginLeft 10
|
||||
:width 40
|
||||
:height 40
|
||||
:alignItems :center
|
||||
:justifyContent :center
|
||||
:backgroundColor color-blue-transparent
|
||||
:padding 8
|
||||
:borderRadius 50}}
|
||||
[view {:style st/more-btn}
|
||||
[image {:source {:uri "icon_more_vertical_blue"}
|
||||
:style {:width 4
|
||||
:height 16}}]]]]]
|
||||
[view {:style {:marginTop 20
|
||||
:alignItems :stretch
|
||||
:flexDirection :column}}
|
||||
:style st/more-btn-image}]]]]]
|
||||
[view {:style st/profile-properties-container}
|
||||
[profile-property-view {:name "Username"
|
||||
:value (:name @contact)}]
|
||||
[profile-property-view {:name "Phone number"
|
||||
:value (:phone-number @contact)}]
|
||||
[profile-property-view {:name "Email"
|
||||
:value "!not implemented"}]
|
||||
[view {:style {:marginTop 50
|
||||
:marginBottom 43
|
||||
:alignItems :center}}
|
||||
[view {:style st/report-user-container}
|
||||
[touchable-opacity {}
|
||||
[text {:style {:fontSize 14
|
||||
:fontFamily font
|
||||
:lineHeight 21
|
||||
:color text2-color
|
||||
;; IOS:
|
||||
:letterSpacing 0.5}}
|
||||
[text {:style st/report-user-text}
|
||||
"REPORT USER"]]]]])))
|
||||
|
|
|
|||
|
|
@ -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})
|
||||
Loading…
Reference in New Issue