Skip to content

Commit

Permalink
[8069] feature - [Profile] My profile edit and share screens
Browse files Browse the repository at this point in the history
  • Loading branch information
@bitsikka
bitsikka committed Aug 8, 2019
1 parent 2c5e985 commit 8cc882d
Show file tree
Hide file tree
Showing 19 changed files with 4,306 additions and 2,129 deletions.
1 change: 1 addition & 0 deletions deps.edn
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
status-im/timbre {:mvn/version "4.10.0-2-status"}
com.taoensso/encore {:mvn/version "2.94.0"}
hickory {:mvn/version "0.7.1"}
cljs-bean {:mvn/version "1.3.0"}
com.cognitect/transit-cljs {:mvn/version "0.8.248"}
status-im/pluto {:mvn/version "iteration-4-9"}
mvxcvi/alphabase {:mvn/version "1.0.0"}
Expand Down
100 changes: 100 additions & 0 deletions nix/lein/lein-project-deps-maven-inputs.txt
View file

Large diffs are not rendered by default.

5,564 changes: 3,638 additions & 1,926 deletions nix/lein/lein-project-deps.nix
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions project.clj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
[status-im/timbre "4.10.0-2-status"]
[com.taoensso/encore "2.94.0"]
[hickory "0.7.1"]
[cljs-bean "1.3.0"]
[com.cognitect/transit-cljs "0.8.248"]
[status-im/pluto "iteration-4-9"]
[mvxcvi/alphabase "1.0.0"]
Expand Down
6 changes: 4 additions & 2 deletions src/status_im/ens/core.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@
[status-im.ui.screens.navigation :as navigation]
[status-im.utils.fx :as fx]
[status-im.utils.money :as money]
[status-im.signing.core :as signing])
[status-im.signing.core :as signing]
[status-im.ethereum.eip55 :as eip55])
(:refer-clojure :exclude [name]))

(defn fullname [custom-domain? username]
Expand Down Expand Up @@ -47,7 +48,8 @@

(defn- on-resolve [registry custom-domain? username address public-key s]
(cond
(= (ethereum/normalized-address address) (ethereum/normalized-address s))
(= (-> address ethereum/normalized-address eip55/address->checksum)
(-> s ethereum/normalized-address eip55/address->checksum))
(resolver/pubkey registry (fullname custom-domain? username)
#(re-frame/dispatch [:ens/set-state username (if (= % public-key) :connected :owned)]))

Expand Down
8 changes: 7 additions & 1 deletion src/status_im/ui/components/chat_icon/screen.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,5 +169,11 @@
(defn my-profile-icon [{{:keys [photo-path name]} :multiaccount
edit? :edit?}]
(let [color colors/default-chat-color
size 56]
size 64]
[profile-icon-view photo-path name color edit? size {}]))

(defn my-profile-header-icon [{{:keys [photo-path name]} :multiaccount
edit? :edit?}]
(let [color colors/default-chat-color
size 40]
[profile-icon-view photo-path name color edit? size {}]))
1 change: 0 additions & 1 deletion src/status_im/ui/components/status_bar/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@
:show-extension-modal {:type :main}
:wallet {:type :main}
:wallet-stack {:type :main}
:profile-qr-viewer {:type :modal-white}
:recipient-qr-code {:type :transparent}
:wallet-send-assets {:type :wallet}
:wallet-request-assets {:type :wallet}
Expand Down
1 change: 0 additions & 1 deletion src/status_im/ui/screens/chat/styles/photos.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
{:position :absolute
:width size
:height size
:opacity 0.4
:border-color colors/black-transparent
:border-width 1
:border-radius (radius size)})
Expand Down
27 changes: 16 additions & 11 deletions src/status_im/ui/screens/popover/views.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
[status-im.ui.components.react :as react]
[re-frame.core :as re-frame]
[status-im.ui.screens.wallet.signing-phrase.views :as signing-phrase]
[status-im.ui.screens.wallet.request.views :as request]))
[status-im.ui.screens.wallet.request.views :as request]
[status-im.ui.screens.profile.user.views :as profile.user]))

(defn hide-panel-anim
[bottom-anim-value alpha-value window-height]
Expand Down Expand Up @@ -64,15 +65,16 @@
:left 0
:right 0
:transform [{:translateY bottom-anim-value}]}}
[react/touchable-highlight {:style {:flex 1} :on-press #(re-frame/dispatch [:hide-popover])}
[react/view {:flex 1 :align-items :center :justify-content :center}
[react/view {:background-color :white
:border-radius 16
:margin 32
:shadow-offset {:width 0 :height 2}
:shadow-radius 8
:shadow-opacity 1
:shadow-color "rgba(0, 9, 26, 0.12)"}
[react/touchable-highlight {:style {:flex 1 :align-items :center :justify-content :center}
:on-press #(re-frame/dispatch [:hide-popover])}
[react/view {:background-color :white
:border-radius 16
:margin 32
:shadow-offset {:width 0 :height 2}
:shadow-radius 8
:shadow-opacity 1
:shadow-color "rgba(0, 9, 26, 0.12)"}
[react/touchable-opacity {:active-opacity 1}
(cond
(vector? view)
view
Expand All @@ -83,10 +85,13 @@
(= :share-account view)
[request/share-address]

(= :share-chat-key view)
[profile.user/share-chat-key]

:else
[view])]]]]])))})))

(views/defview popover []
(views/letsubs [popover [:popover/popover]
{window-height :height} [:dimensions/window]]
[popover-view popover window-height]))
[popover-view popover window-height]))
31 changes: 22 additions & 9 deletions src/status_im/ui/screens/profile/components/styles.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,27 @@
;; profile header elements

(def profile-header-display
{:flex-direction :column
:justify-content :center
{:flex-direction :row
:justify-content :flex-start
:align-items :center})

(def profile-header-edit
{:flex-direction :column
:justify-content :center})

(defstyle profile-name-text
{:padding-vertical 8
:text-align :center
:font-weight "700"})
{:typography :header
:line-height 28
:text-align :left})

(defstyle profile-name-text-with-subtitle
{:margin-vertical 5
:typography :header
:line-height 28
:text-align :left})

(defstyle profile-three-words
{:font-size 12
:text-align :center
:color colors/gray})
{:color colors/gray})

(defstyle profile-name-input-text
{:text-align :center
Expand All @@ -38,7 +42,16 @@

(def profile-header-name-container
{:flex 1
:justify-content :center})
:justify-content :center
:align-items :flex-start
:margin-left 16})

(def profile-header-name-container-with-subtitle
{:flex 1
:justify-content :flex-start
:align-items :flex-start
:align-self :stretch
:margin-left 16})

;; settings items elements

Expand Down
71 changes: 42 additions & 29 deletions src/status_im/ui/screens/profile/components/views.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
[status-im.ui.components.react :as react]
[status-im.utils.gfycat.core :as gfy]
[status-im.ui.components.list-selection :as list-selection]
[status-im.ui.screens.profile.user.sheet.views :as sheets]
[status-im.ui.screens.profile.components.styles :as styles]))

;; profile header elements
Expand All @@ -27,44 +28,56 @@
:accessibility-label :username-input}
props)]])

(defn- show-profile-icon-actions [options]
(when (seq options)
(list-selection/show {:title (i18n/label :t/image-source-title)
:options options})))

(defn- names [{:keys [name public-key] :as contact}]
(let [generated-name (when public-key (gfy/generate-gfy public-key))]
[react/view styles/profile-header-name-container
[react/text {:style styles/profile-name-text
:number-of-lines 1}
(defn- names [{:keys [usernames name public-key] :as contact}]
(let [generated-name (when public-key (gfy/generate-gfy public-key))
with-subtitle? (seq usernames)]
[react/view (if with-subtitle? styles/profile-header-name-container-with-subtitle
styles/profile-header-name-container)
[react/text {:style (if with-subtitle? styles/profile-name-text-with-subtitle
styles/profile-name-text)}
(multiaccounts/displayed-name contact)]
(when generated-name
(when with-subtitle?
[react/text {:style styles/profile-three-words
:number-of-lines 1}
generated-name])]))

(defn- profile-header-display [{:keys [name public-key] :as contact}]
(let [generated-name (when public-key (gfy/generate-gfy public-key))]
[react/view styles/profile-header-display
[chat-icon.screen/my-profile-icon {:multiaccount contact
:edit? false}]
[names contact]]))

(defn- profile-header-edit [{:keys [name group-chat] :as contact}
icon-options on-change-text-event allow-icon-change?]
[react/view styles/profile-header-edit
[react/touchable-highlight {:on-press #(show-profile-icon-actions icon-options)
:accessibility-label :edit-profile-photo-button}
[react/view styles/modal-menu
(defn- profile-header-display [{:keys [name public-key] :as contact} allow-icon-change? include-remove-action?]
[react/view (merge styles/profile-header-display {:padding-horizontal 16
:margin-top 4})
(if allow-icon-change?
[react/touchable-highlight
{:accessibility-label :edit-profile-photo-button
:on-press
#(re-frame/dispatch
[:bottom-sheet/show-sheet
{:content (sheets/profile-icon-actions include-remove-action?)
:content-height (if include-remove-action? 192 128)}])}
[react/view
[chat-icon.screen/my-profile-icon {:multiaccount contact
:edit? false}]
[react/view {:background-color colors/blue
:border-color colors/white
:border-width 3
:border-radius 15
:width 30
:height 30
:justify-content :center
:align-items :center
:position :absolute
:top -5
:right -5
:z-index 1}
[vector-icons/icon :tiny-edit {:color colors/white
:width 16
:height 16}]]]]
;; else
[chat-icon.screen/my-profile-icon {:multiaccount contact
:edit? allow-icon-change?}]]]
:edit? false}])
[names contact]])

(defn profile-header
[{:keys [contact edited-contact editing? allow-icon-change? options on-change-text-event]}]
(if editing?
[profile-header-edit (merge edited-contact contact) options on-change-text-event allow-icon-change?]
[profile-header-display contact]))
[{:keys [contact allow-icon-change? include-remove-action?]}]
[profile-header-display contact allow-icon-change? include-remove-action?])

;; settings items elements

Expand Down
20 changes: 11 additions & 9 deletions src/status_im/ui/screens/profile/models.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,6 @@
(assoc-in [:my-profile/profile :valid-name?] (valid-name? name))
(assoc-in [:my-profile/profile :name] name))})

(defn update-picture [this-event base64-image {:keys [db]}]
(if base64-image
{:db (-> db
(assoc-in [:my-profile/profile :photo-path]
(str "data:image/jpeg;base64," base64-image))
(assoc :my-profile/editing? true))}
{:open-image-picker this-event}))

(defn- clean-name [db edit-view]
(let [name (get-in db [edit-view :name])]
(if (valid-name? name)
Expand All @@ -60,7 +52,7 @@
:my-profile/editing? true
:my-profile/profile profile)}))

(defn save [{:keys [db now] :as cofx}]
(fx/defn save [{:keys [db now] :as cofx}]
(let [{:keys [photo-path]} (:my-profile/profile db)
cleaned-name (clean-name db :my-profile/profile)
cleaned-edit (merge {:name cleaned-name
Expand All @@ -71,6 +63,16 @@
(clear-profile)
(multiaccounts.update/multiaccount-update cleaned-edit {}))))

(defn update-picture [this-event base64-image {:keys [db] :as cofx}]
(if base64-image
(fx/merge cofx
{:db (-> db
(assoc-in [:my-profile/profile :photo-path]
(str "data:image/jpeg;base64," base64-image))
(assoc :my-profile/editing? true))}
save)
{:open-image-picker this-event}))

(defn start-editing-group-chat-profile [{:keys [db]}]
(let [current-chat-name (get-in db [:chats (:current-chat-id db) :name])]
{:db (-> db
Expand Down
8 changes: 0 additions & 8 deletions src/status_im/ui/screens/profile/navigation.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,6 @@
(ns status-im.ui.screens.profile.navigation
(:require [status-im.ui.screens.navigation :as navigation]))

;;TODO(goranjovic) - replace this with an atomic navigation event that calls functions, not dispatch
;; possibly use the generic event, see https://github.com/status-im/status-react/issues/2987
(defmethod navigation/preload-data! :profile-qr-viewer
[db [_ _ {:keys [contact source value]}]]
(update db :qr-modal #(merge % {:contact (or contact (get db :multiaccount))
:source source
:value value})))

(defmethod navigation/unload-data! :my-profile
[db]
(dissoc db :my-profile/editing?))
49 changes: 49 additions & 0 deletions src/status_im/ui/screens/profile/user/sheet/views.cljs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
(ns status-im.ui.screens.profile.user.sheet.views
(:require [re-frame.core :as re-frame]
[status-im.i18n :as i18n]
[status-im.ui.components.action-button.action-button :as action-button]
[status-im.ui.components.action-button.styles :as action-button.styles]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.react :as react]
[status-im.utils.utils :as utils]))

(defn hide-sheet-and-dispatch [event]
(re-frame/dispatch [:bottom-sheet/hide-sheet])
(re-frame/dispatch event))

(defn profile-icon-actions [include-remove-action?]
(fn []
[react/view {:flex 1 :flex-direction :row}
[react/view action-button.styles/actions-list
[action-button/action-button
{:label (i18n/label :t/image-source-gallery)
:accessibility-label :group-info-button
:icon :main-icons/photo
:icon-opts {:color colors/blue}
:on-press #(hide-sheet-and-dispatch [:my-profile/update-picture])}]
[action-button/action-button
{:label (i18n/label :t/image-source-make-photo)
:accessibility-label :delete-and-leave-group-button
:icon :main-icons/camera
:icon-opts {:color colors/blue}
:on-press (fn []
(hide-sheet-and-dispatch
[:request-permissions
{:permissions [:camera :write-external-storage]
:on-allowed #(re-frame/dispatch
[:navigate-to :profile-photo-capture])
:on-denied
(fn []
(utils/set-timeout
#(utils/show-popup (i18n/label :t/error)
(i18n/label :t/camera-access-error))
50))}]))}]
(when include-remove-action?
[action-button/action-button
{:label (i18n/label :t/image-remove-current)
:label-style {:color colors/red}
:accessibility-label :group-info-button
:icon :main-icons/delete
:icon-opts {:color colors/red}
:cyrcle-color colors/red-light
:on-press #(hide-sheet-and-dispatch [:my-profile/remove-current-photo])}])]]))
4 changes: 2 additions & 2 deletions src/status_im/ui/screens/profile/user/styles.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@
:flex-direction :column})

(def share-link-button
{:margin-top 12
:margin-bottom 16})
{:margin-vertical 20
:margin-horizontal 16})

(defstyle my-profile-info-container {})

Expand Down

0 comments on commit 8cc882d

Please sign in to comment.