Merge pull request #65 from status-im/my-profile

My profile view

Former-commit-id: 8c386f2175

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

src/syng_im/components/chat.cljs

@@ -7,7 +7,6 @@
                                               icon
                                               navigator
                                               touchable-highlight
-                                              toolbar-android
                                               list-view
                                               list-item
                                               android?]]
@@ -18,6 +17,7 @@
             [syng-im.utils.listview :refer [to-datasource
                                             to-datasource2]]
             [syng-im.components.invertible-scroll-view :refer [invertible-scroll-view]]
+            [syng-im.components.toolbar :refer [toolbar]]
             [syng-im.components.chat.chat-message :refer [chat-message]]
             [syng-im.components.chat.chat-message-new :refer [chat-message-new]]))
 
@@ -81,20 +81,39 @@
     [view nil]]
    items])
 
-(defn action-view [{:keys     [icon-style handler title subtitle]
+(defn action-view [{:keys     [icon-style custom-icon handler title subtitle]
                     icon-name :icon}]
   [touchable-highlight {:on-press (fn []
                                     (dispatch [:set-show-actions false])
-                                    (handler))}
+                                    (when handler
+                                      (handler)))}
    [view st/action-icon-row
     [view st/action-icon-view
-     [icon icon-name icon-style]]
+     (or custom-icon
+         [icon icon-name icon-style])]
     [view st/action-view
      [text {:style st/action-title} title]
      (when-let [subtitle subtitle]
        [text {:style st/action-subtitle}
         subtitle])]]])
 
+(defn menu-item-contact-photo [{:keys [photo-path]}]
+  [image {:source (if (s/blank? photo-path)
+                    res/user-no-photo
+                    {:uri photo-path})
+          :style  st/menu-item-profile-contact-photo}])
+
+(defn menu-item-contact-online [{:keys [online]}]
+  (when online
+    [view st/menu-item-profile-online-view
+     [view st/menu-item-profile-online-dot-left]
+     [view st/menu-item-profile-online-dot-right]]))
+
+(defn menu-item-icon-profile []
+  [view st/icon-view
+   [menu-item-contact-photo {}]
+   [menu-item-contact-online {:online true}]])
+
 (defn actions-list-view []
   (let [{:keys [group-chat chat-id]}
         (subscribe [:chat-properties [:group-chat :chat-id]])]
@@ -125,10 +144,31 @@
                                         :height 13}
                            :handler    (fn [])}]
                          [{:title      "Profile"
+                           :custom-icon [menu-item-icon-profile]
                            :icon       :menu_group
                            :icon-style {:width  25
                                         :height 19}
-                           :handler    #(dispatch [:show-profile @chat-id])}])]
+                           :handler    #(dispatch [:show-profile @chat-id])}
+                          {:title      "Search chat"
+                           :subtitle   "!not implemented"
+                           :icon       :search_gray_copy
+                           :icon-style {:width  17
+                                        :height 17}
+                           :handler    nil #_#(dispatch
+                                               [:show-remove-participants navigator])}
+                          {:title      "Notifications and sounds"
+                           :subtitle   "!not implemented"
+                           :icon       :muted
+                           :icon-style {:width  18
+                                        :height 21}
+                           :handler    nil #_#(dispatch [:leave-group-chat
+                                                         navigator])}
+                          {:title      "Settings"
+                           :subtitle   "!not implemented"
+                           :icon       :settings
+                           :icon-style {:width  20
+                                        :height 13}
+                           :handler    (fn [])}])]
       [view st/actions-wrapper
        [view st/actions-separator]
        [view st/actions-view
@@ -139,16 +179,11 @@
   [overlay {:on-click-outside #(dispatch [:set-show-actions false])}
    [actions-list-view]])
 
-(defn toolbar []
+(defn toolbar-content []
   (let [{:keys [group-chat name contacts]}
         (subscribe [:chat-properties [:group-chat :name :contacts]])
         show-actions (subscribe [:show-actions])]
     (fn []
-      [view st/toolbar-view
-       (when (not @show-actions)
-         [touchable-highlight {:on-press #(dispatch [:navigate-back])}
-          [view st/icon-view
-           [icon :back st/back-icon]]])
       [view (st/chat-name-view @show-actions)
        [text {:style st/chat-name-text}
         (or @name "Chat name")]
@@ -162,7 +197,11 @@
                     " members"
                     " member")
                   ", " cnt " active"))]]
-          [text {:style st/last-activity} "Active a minute ago"])]
+         [text {:style st/last-activity} "Active a minute ago"])])))
+
+(defn toolbar-action []
+  (let [show-actions (subscribe [:show-actions])]
+    (fn []
       (if @show-actions
         [touchable-highlight
          {:on-press #(dispatch [:set-show-actions false])}
@@ -172,7 +211,16 @@
          {:on-press #(dispatch [:set-show-actions true])}
          [view st/icon-view
           [chat-photo {}]
-           [contact-online {:online true}]]])])))
+          [contact-online {:online true}]]]))))
+
+(defn chat-toolbar []
+  (let [{:keys [group-chat name contacts]}
+        (subscribe [:chat-properties [:group-chat :name :contacts]])
+        show-actions (subscribe [:show-actions])]
+    (fn []
+      [toolbar {:hide-nav?      @show-actions
+                :custom-content [toolbar-content]
+                :custom-action  [toolbar-action]}])))
 
 (defn messages-view [group-chat]
   (let [messages (subscribe [:chat :messages])
@@ -191,7 +239,7 @@
         show-actions-atom (subscribe [:show-actions])]
     (fn []
       [view st/chat-view
-       [toolbar]
+       [chat-toolbar]
        [messages-view @group-chat]
        (when @group-chat [typing-all])
        (when is-active [chat-message-new])

src/syng_im/components/chat_styles.cljs

@@ -167,3 +167,34 @@
 
 (def overlay-highlight
   {:flex 1})
+
+;;----- Menu item Profile ----------------
+
+(def menu-item-profile-contact-photo
+  {:marginTop    13
+   :marginLeft   16
+   :borderRadius 50
+   :width        24
+   :height       24})
+
+(def menu-item-profile-online-view
+  {:position        :absolute
+   :top             26
+   :left            29
+   :width           15
+   :height          15
+   :borderRadius    50
+   :backgroundColor online-color
+   :borderWidth     2
+   :borderColor     color-white})
+
+(def menu-item-profile-online-dot
+  {:position        :absolute
+   :top             4
+   :width           3
+   :height          3
+   :borderRadius    50
+   :backgroundColor color-white})
+
+(def menu-item-profile-online-dot-left (merge menu-item-profile-online-dot {:left 1.7}))
+(def menu-item-profile-online-dot-right (merge menu-item-profile-online-dot {:left 6.3}))

src/syng_im/components/discovery/discovery.cljs

@@ -25,6 +25,7 @@
       [])))
 
 (defn title-content [showSearch]
+  [view st/discovery-toolbar-content
    (if showSearch
      [text-input {:underlineColorAndroid "transparent"
                   :style                 st/discovery-search-input
@@ -35,7 +36,7 @@
                                                  hashtags (get-hashtags search)]
                                              (dispatch [:broadcast-status search hashtags])))}]
      [view
-     [text {:style st/discovery-title} "Discover"]]))
+      [text {:style st/discovery-title} "Discover"]])])
 
 (defn create-fake-discovery []
   (let [number (rand-int 999)]
@@ -61,7 +62,7 @@
                                                :height     12}}
                               :handler create-fake-discovery}
                  :title     "Add Participants"
-                 :content   (title-content @showSearch)
+                 :custom-content [title-content @showSearch]
                  :action    {:image {:source {:uri "icon_search"}
                                      :style  {:width  17
                                               :height 17}}

src/syng_im/components/discovery/styles.cljs

@@ -24,6 +24,11 @@
 
 ;; discovery.cljs
 
+(def discovery-toolbar-content
+  {:flex           1
+   :alignItems     :center
+   :justifyContent :center})
+
 (def discovery-search-input
   {:flex       1
    :marginLeft 18

src/syng_im/components/drawer.cljs

@@ -36,16 +36,18 @@
     name]])
 
 (defn drawer-menu [navigator]
+  (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}
-     "Status"]]
+        @username]]
       [view st/menu-items-container
        [menu-item {:name    "Profile"
                    :handler (fn []
-                           (dispatch [:show-profile navigator]))}]
+                              (dispatch [:show-my-profile]))}]
        [menu-item {:name    "Settings"
                    :handler (fn []
                               ;; TODO not implemented
@@ -68,10 +70,10 @@
                                       ;; TODO not implemented
                                       )}
         [text {:style st/switch-users-text}
-      "Switch users"]]]])
+         "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]

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
+        [view st/back-btn-container
-         [icon :back st/profile-back-button-icon]]]
+         [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}]]])))

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

src/syng_im/components/toolbar.cljs

@@ -17,12 +17,14 @@
             [syng-im.utils.listview :refer [to-realm-datasource]]
             [reagent.core :as r]))
 
-(defn toolbar [{:keys [navigator title nav-action action background-color content style]}]
+(defn toolbar [{:keys [navigator title nav-action hide-nav? action custom-action
+                       background-color custom-content style]}]
   (let [style (merge {:flexDirection   "row"
                       :backgroundColor (or background-color toolbar-background1)
                       :height          56
                       :elevation       2} style)]
     [view {:style style}
+     (when (not hide-nav?)
        (if nav-action
          [touchable-highlight {:on-press (:handler nav-action)}
           [view {:width          56
@@ -37,12 +39,8 @@
                    :style  {:marginTop  21
                             :marginLeft 23
                             :width      8
-                          :height     14}}]]])
+                            :height     14}}]]]))
-     (if content
+     (or custom-content
-       [view {:style {:flex 1
-                      :alignItems "center"
-                      :justifyContent "center"}}
-        content]
          [view {:style {:flex           1
                         :alignItems     "center"
                         :justifyContent "center"}}
@@ -51,10 +49,12 @@
                          :fontSize   16
                          :fontFamily font}}
            title]])
+     custom-action
+     (when action
        [touchable-highlight {:on-press (:handler action)}
         [view {:width          56
                :height         56
                :alignItems     "center"
                :justifyContent "center"}
-       [image (:image action)]]]]))
+         [image (:image action)]]])]))
 

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!"
+(def app-db {:identity-password    "replace-me-with-user-entered-password"
-             :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])

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

src/syng_im/subs.cljs

@@ -94,11 +94,25 @@
 
 ;; -- User data --------------------------------------------------------------
 
-;; (register-sub
+(register-sub :username
-;;   :get-user-phone-number
+  (fn [db _]
-;;   (fn [db _]
+    (reaction
-;;     (reaction
+     (get @db :username))))
-;;       (get @db :user-phone-number))))
+
+(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