Add my profile view

Former-commit-id: 3dfc461924
2016-05-11 13:05:33 +03:00 · 2016-05-11 13:05:33 +03:00 · 5a63f527d3
parent d4f666eff0
commit 5a63f527d3
12 changed files with 124 additions and 51 deletions
--- a/android/app/src/main/res/drawable-hdpi/icon_dots.png
+++ b/android/app/src/main/res/drawable-hdpi/icon_dots.png
--- a/android/app/src/main/res/drawable-mdpi/icon_dots.png
+++ b/android/app/src/main/res/drawable-mdpi/icon_dots.png
--- a/android/app/src/main/res/drawable-xhdpi/icon_dots.png
+++ b/android/app/src/main/res/drawable-xhdpi/icon_dots.png
--- a/android/app/src/main/res/drawable-xxhdpi/icon_dots.png
+++ b/android/app/src/main/res/drawable-xxhdpi/icon_dots.png
--- a/android/app/src/main/res/drawable-xxxhdpi/icon_dots.png
+++ b/android/app/src/main/res/drawable-xxxhdpi/icon_dots.png
--- a/src/syng_im/android/core.cljs
+++ b/src/syng_im/android/core.cljs
@ -15,7 +15,7 @@
            [syng-im.components.chats.new-group :refer [new-group]]
            [syng-im.components.chat.new-participants :refer [new-participants]]
            [syng-im.components.chat.remove-participants :refer [remove-participants]]
-            [syng-im.components.profile :refer [profile]]
+            [syng-im.components.profile :refer [profile my-profile]]
            [syng-im.utils.logging :as log]
            [syng-im.utils.utils :refer [toast]]
            [syng-im.navigation :as nav]
@ -48,7 +48,8 @@
        :new-group [new-group]
        :contact-list [contact-list]
        :chat [chat]
-        :profile [profile]))))
+        :profile [profile]
+        :my-profile [my-profile]))))

 (defn init []
  (dispatch-sync [:initialize-db])
--- a/src/syng_im/components/drawer.cljs
+++ b/src/syng_im/components/drawer.cljs
@ -36,42 +36,44 @@
    name]])

 (defn drawer-menu [navigator]
-  [view st/drawer-menu
-   [view st/user-photo-container
-    [user-photo {}]]
-   [view st/name-container
-    [text {:style st/name-text}
-     "Status"]]
-   [view st/menu-items-container
-    [menu-item {:name    "Profile"
-                :handler (fn []
-                           (dispatch [:show-profile navigator]))}]
-    [menu-item {:name    "Settings"
-                :handler (fn []
-                           ;; TODO not implemented
-                           )}]
-    [menu-item {:name    "Discovery"
-                :handler (fn []
-                           (dispatch [:navigate-to :discovery]))}]
-    [menu-item {:name    "Contacts"
-                :handler (fn []
-                           (dispatch [:show-contacts navigator]))}]
-    [menu-item {:name    "Invite friends"
-                :handler (fn []
-                           ;; TODO not implemented
-                           )}]
-    [menu-item {:name    "FAQ"
-                :handler (fn [])}]]
-   [view st/switch-users-container
-    [touchable-opacity {:onPress (fn []
-                                   (close-drawer)
-                                   ;; TODO not implemented
-                                   )}
-     [text {:style st/switch-users-text}
-      "Switch users"]]]])
+  (let [username (subscribe [:username])]
+    (fn [navigator]
+      [view st/drawer-menu
+      [view st/user-photo-container
+       [user-photo {}]]
+      [view st/name-container
+       [text {:style st/name-text}
+        @username]]
+      [view st/menu-items-container
+       [menu-item {:name    "Profile"
+                   :handler (fn []
+                              (dispatch [:show-my-profile]))}]
+       [menu-item {:name    "Settings"
+                   :handler (fn []
+                              ;; TODO not implemented
+                              )}]
+       [menu-item {:name    "Discovery"
+                   :handler (fn []
+                              (dispatch [:navigate-to :discovery]))}]
+       [menu-item {:name    "Contacts"
+                   :handler (fn []
+                              (dispatch [:show-contacts navigator]))}]
+       [menu-item {:name    "Invite friends"
+                   :handler (fn []
+                              ;; TODO not implemented
+                              )}]
+       [menu-item {:name    "FAQ"
+                   :handler (fn [])}]]
+      [view st/switch-users-container
+       [touchable-opacity {:onPress (fn []
+                                      (close-drawer)
+                                      ;; TODO not implemented
+                                      )}
+        [text {:style st/switch-users-text}
+         "Switch users"]]]])))

 (defn drawer-view [{:keys [navigator]} items]
-  [drawer-layout-android {:drawerWidth            300
+  [drawer-layout-android {:drawerWidth            260
                          :drawerPosition         js/React.DrawerLayoutAndroid.positions.Left
                          :render-navigation-view #(r/as-element [drawer-menu navigator])
                          :ref  (fn [drawer]
--- a/src/syng_im/components/profile.cljs
+++ b/src/syng_im/components/profile.cljs
@ -41,10 +41,10 @@
  (let [contact (subscribe [:contact])]
    (fn []
      [scroll-view {:style st/profile}
-       [touchable-highlight {:style    st/profile-back-button-touchable
+       [touchable-highlight {:style    st/back-btn-touchable
                             :on-press #(dispatch [:navigate-back])}
-        [view st/profile-back-button-container
-         [icon :back st/profile-back-button-icon]]]
+        [view st/back-btn-container
+         [icon :back st/back-btn-icon]]]
       [view st/status-block
        [view st/user-photo-container
         [user-photo  {}]
@ -74,3 +74,36 @@
         [touchable-opacity {}
          [text {:style st/report-user-text}
           "REPORT USER"]]]]])))
+
+(defn my-profile []
+  (let [username     (subscribe [:username])
+        phone-number (subscribe [:phone-number])
+        email        (subscribe [:email])
+        status       (subscribe [:status])]
+    (fn []
+      [scroll-view {:style st/profile}
+       [touchable-highlight {:style    st/back-btn-touchable
+                             :on-press #(dispatch [:navigate-back])}
+        [view st/back-btn-container
+         [icon :back st/back-btn-icon]]]
+       [touchable-highlight {:style    st/actions-btn-touchable
+                             :on-press (fn []
+                                         ;; TODO not implemented
+                                         )}
+        [view st/actions-btn-container
+         [icon :dots st/actions-btn-icon]]]
+       [view st/status-block
+        [view st/user-photo-container
+         [user-photo  {}]
+         [user-online {:online true}]]
+        [text {:style st/user-name}
+         @username]
+        [text {:style st/status}
+         @status]]
+       [view st/profile-properties-container
+        [profile-property-view {:name "Username"
+                                :value @username}]
+        [profile-property-view {:name "Phone number"
+                                :value @phone-number}]
+        [profile-property-view {:name "Email"
+                                :value @email}]]])))
--- a/src/syng_im/components/profile_styles.cljs
+++ b/src/syng_im/components/profile_styles.cljs
@ -68,19 +68,33 @@
   :backgroundColor color-white
   :flexDirection   :column})

-(def profile-back-button-touchable
+(def back-btn-touchable
  {:position :absolute})

-(def profile-back-button-container
+(def back-btn-container
  {:width  56
   :height 56})

-(def profile-back-button-icon
+(def back-btn-icon
  {:marginTop  21
   :marginLeft 23
   :width      8
   :height     14})

+(def actions-btn-touchable
+  {:position :absolute
+   :right    0})
+
+(def actions-btn-container
+  {:width          56
+   :height         56
+   :alignItems     :center
+   :justifyContent :center})
+
+(def actions-btn-icon
+  {:width  4
+   :height 16})
+
 (def status-block
  {:alignSelf  :center
   :alignItems :center
--- a/src/syng_im/db.cljs
+++ b/src/syng_im/db.cljs
@ -7,8 +7,7 @@
 (def default-view :chat-list)

 ;; initial state of app-db
-(def app-db {:greeting             "Hello Clojure in iOS and Android!"
-             :identity-password    "replace-me-with-user-entered-password"
+(def app-db {:identity-password    "replace-me-with-user-entered-password"
             :identity             "me"
             :contacts             []
             :current-chat-id      "console"
@ -22,7 +21,11 @@
             :signed-up            false
             :view-id              default-view
             :navigation-stack     (list default-view)
-             :name                 "My Name"
+             ;; TODO fix hardcoded values
+             :username             "My Name"
+             :phone-number         "3147984309"
+             :email                "myemail@gmail.com"
+             :status               "Hi, this is my status"
             :current-tag          nil})

 (def protocol-initialized-path [:protocol-initialized])
--- a/src/syng_im/handlers.cljs
+++ b/src/syng_im/handlers.cljs
@ -457,6 +457,12 @@
      (dispatch [:navigate-to :profile])
      db)))

+(register-handler :show-my-profile
+  (fn [db [action]]
+    (log/debug action)
+    (dispatch [:navigate-to :my-profile])
+    db))
+
 ;; -- Chats --------------------------------------------------------------

 (register-handler :show-chat
--- a/src/syng_im/subs.cljs
+++ b/src/syng_im/subs.cljs
@ -94,14 +94,28 @@

 ;; -- User data --------------------------------------------------------------

-;; (register-sub
-;;   :get-user-phone-number
-;;   (fn [db _]
-;;     (reaction
-;;       (get @db :user-phone-number))))
+(register-sub :username
+  (fn [db _]
+    (reaction
+     (get @db :username))))
+
+(register-sub :phone-number
+  (fn [db _]
+    (reaction
+     (get @db :phone-number))))
+
+(register-sub :email
+  (fn [db _]
+    (reaction
+     (get @db :email))))
+
+(register-sub :status
+  (fn [db _]
+    (reaction
+     (get @db :status))))

 (register-sub
-  :get-user-identity
+ :get-user-identity
  (fn [db _]
    (reaction
      (get @db :user-identity))))