diff --git a/src/syng_im/components/drawer.cljs b/src/syng_im/components/drawer.cljs index b79c55e933..19fc3b2ea7 100644 --- a/src/syng_im/components/drawer.cljs +++ b/src/syng_im/components/drawer.cljs @@ -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] diff --git a/src/syng_im/components/drawer_styles.cljs b/src/syng_im/components/drawer_styles.cljs new file mode 100644 index 0000000000..0896732490 --- /dev/null +++ b/src/syng_im/components/drawer_styles.cljs @@ -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"]]]]) diff --git a/src/syng_im/components/profile.cljs b/src/syng_im/components/profile.cljs index 052cb7b3b0..5711d694e2 100644 --- a/src/syng_im/components/profile.cljs +++ b/src/syng_im/components/profile.cljs @@ -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"]]]]]))) diff --git a/src/syng_im/components/profile_styles.cljs b/src/syng_im/components/profile_styles.cljs new file mode 100644 index 0000000000..11c58ccf04 --- /dev/null +++ b/src/syng_im/components/profile_styles.cljs @@ -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})