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
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}}]])
: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]

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-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}}]])
: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"]]]]])))

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