Profile and Drawer styles refactoring

Former-commit-id: 547c9031be

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
+            [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))
 
@@ -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
+          :style  st/user-photo}])
-                    :width        64
-                    :height       64}}]])
 
 (defn menu-item [{:keys [name handler]}]
-  [touchable-opacity {:style {:height      48
+  [touchable-opacity {:style st/menu-item-touchable
-                              :paddingLeft 16
-                              :paddingTop  14}
                       :onPress (fn []
                                  (close-drawer)
                                  (handler))}
-   [text {:style {:fontSize   14
+   [text {:style st/menu-item-text}
-                  :fontFamily font
-                  :lineHeight 21
-                  :color      text1-color}}
     name]])
 
 (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 {}]]
-   [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"]]
-   [view {:style {:flex          1
+   [view {:style st/menu-items-container}
-                  :marginTop     80
-                  :alignItems    :stretch
-                  :flexDirection :column}}
     [menu-item {:name    "Profile"
                 :handler (fn []
                            (dispatch [:show-profile navigator]))}]
@@ -85,16 +59,12 @@
                            )}]
     [menu-item {:name    "FAQ"
                 :handler (fn [])}]]
-   [view {:style {:paddingVertical 36
+   [view {:style st/switch-users-container}
-                  :alignItems :center}}
     [touchable-opacity {:onPress (fn []
                                    (close-drawer)
                                    ;; TODO not implemented
                                    )}
-     [text {:style {:fontSize   14
+     [text {:style st/switch-users-text}
-                    :fontFamily font
-                    :lineHeight 21
-                    :color      text3-color}}
       "Switch users"]]]])
 
 (defn drawer-view [{:keys [navigator]} items]

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

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
+            [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]]))
 
 (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
+          :style  st/user-photo}])
-                    :width        64
-                    :height       64}}]])
 
 (defn user-online [{:keys [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]}]
-  [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]
-    [text {:style {:marginTop  11
+    [text {:style st/profile-property-view-value}
-                   :height     40
-                   :fontSize   16
-                   :fontFamily font
-                   :color      text1-color}}
      value]]])
 
 (defn profile [{:keys [navigator]}]
   (let [contact (subscribe [:contact])]
     (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 []
                                                (nav-pop navigator))
                              :underlay-color :transparent}
-        [view {:width  56
+        [view st/profile-back-button-container
-               :height 56}
          [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-online {:online true}]]
-        [text {:style {:marginTop  20
+        [text {:style st/user-name}
-                       :fontSize   18
-                       :fontFamily font
-                       :color      text1-color}}
          (:name @contact)]
-        [text {:style {:marginTop  10
+        [text {:style st/status}
-                       :fontFamily font
-                       :fontSize   14
-                       :lineHeight 20
-                       :textAlign  :center
-                       :color      text2-color}}
          "!not implemented"]
-        [view {:style {:marginTop      18
+        [view {:style st/btns-container}
-                       :flexDirection  :row}}
          [touchable-highlight {:onPress (fn []
                                           ;; TODO not implemented
                                           )
                                :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"]]]
          [touchable-highlight {:onPress (fn []
                                           ;; TODO not implemented
                                           )
                                :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"}
-                   :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"
                                 :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
+        [view {:style st/report-user-container}
-                       :marginBottom    43
-                       :alignItems :center}}
          [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"]]]]])))

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