From 8b161015eb4c2ac0ccbc6290d6164d3d01a0e047 Mon Sep 17 00:00:00 2001 From: Andrey Shovkoplyas Date: Wed, 7 Feb 2018 22:44:04 +0300 Subject: [PATCH] face lifting, fixed recover --- app/dev/index.html | 11 +- app/prod/index.html | 11 +- src/status_desktop/core.cljs | 8 +- .../override/account.cljs | 4 +- src_front/status_desktop_front/status_go.cljs | 7 +- .../ui/components/tabs.cljs | 8 +- .../ui/screens/accounts/login/views.cljs | 6 +- .../ui/screens/accounts/recover/views.cljs | 26 +- .../ui/screens/accounts/views.cljs | 18 +- .../ui/screens/chat/view.cljs | 280 ------------------ .../ui/screens/events.cljs | 2 +- .../ui/screens/main/add_new/views.cljs | 47 +++ .../ui/screens/main/chat/views.cljs | 174 +++++++++++ .../ui/screens/{chat => main}/events.cljs | 2 +- .../ui/screens/main/tabs/home/views.cljs | 50 ++++ .../{chat => main/tabs}/profile/views.cljs | 79 ++--- .../ui/screens/main/views.cljs | 42 +++ .../ui/screens/views.cljs | 6 +- 18 files changed, 405 insertions(+), 376 deletions(-) delete mode 100644 src_front/status_desktop_front/ui/screens/chat/view.cljs create mode 100644 src_front/status_desktop_front/ui/screens/main/add_new/views.cljs create mode 100644 src_front/status_desktop_front/ui/screens/main/chat/views.cljs rename src_front/status_desktop_front/ui/screens/{chat => main}/events.cljs (97%) create mode 100644 src_front/status_desktop_front/ui/screens/main/tabs/home/views.cljs rename src_front/status_desktop_front/ui/screens/{chat => main/tabs}/profile/views.cljs (55%) create mode 100644 src_front/status_desktop_front/ui/screens/main/views.cljs diff --git a/app/dev/index.html b/app/dev/index.html index 5ed8752..47152b9 100644 --- a/app/dev/index.html +++ b/app/dev/index.html @@ -7,11 +7,18 @@ .app, html, body { height:100%; margin:0; + background-color:#4360df; } .app { display: flex; flex-direction: column; } + .container { + display: flex; + flex: 1; + align-items: center; + justify-content: center; + } input:focus, select:focus, textarea:focus, @@ -21,7 +28,9 @@
-

Loading...

+
+ +
diff --git a/app/prod/index.html b/app/prod/index.html index bb3dc91..c0cbfe9 100644 --- a/app/prod/index.html +++ b/app/prod/index.html @@ -7,11 +7,18 @@ .app, html, body { height:100%; margin:0; + background-color:#4360df; } .app { display: flex; flex-direction: column; } + .container { + display: flex; + flex: 1; + align-items: center; + justify-content: center; + } input:focus, select:focus, textarea:focus, @@ -21,7 +28,9 @@
-

Loading...

+
+ +
diff --git a/src/status_desktop/core.cljs b/src/status_desktop/core.cljs index 9bd127f..3ef1b30 100644 --- a/src/status_desktop/core.cljs +++ b/src/status_desktop/core.cljs @@ -70,5 +70,9 @@ (set! (.-returnValue event) (.Login status-go address password)))) (.on ipcMain "RecoverAccount" - (fn [event passphrase password] - (set! (.-returnValue event) (.RecoverAccount status-go passphrase password)))) \ No newline at end of file + (fn [event password passphrase] + (set! (.-returnValue event) (.RecoverAccount status-go password passphrase)))) + +#_(.on ipcMain "AddPeer" + (fn [event enode] + (set! (.-returnValue event) (.AddPeer status-go enode)))) \ No newline at end of file diff --git a/src_front/status_desktop_front/override/account.cljs b/src_front/status_desktop_front/override/account.cljs index f728f4b..2e47e07 100644 --- a/src_front/status_desktop_front/override/account.cljs +++ b/src_front/status_desktop_front/override/account.cljs @@ -32,5 +32,5 @@ ::recover.events/recover-account-fx (fn [[passphrase password]] (re-frame/dispatch [:account-recovered (status-go/recover-account - (string/trim passphrase) - password)]))) \ No newline at end of file + password + (string/trim passphrase))]))) \ No newline at end of file diff --git a/src_front/status_desktop_front/status_go.cljs b/src_front/status_desktop_front/status_go.cljs index 80bfba0..11fea87 100644 --- a/src_front/status_desktop_front/status_go.cljs +++ b/src_front/status_desktop_front/status_go.cljs @@ -20,5 +20,8 @@ (.log js/console (str "Login result " res)) res)) -(defn recover-account [passphrase password] - (.sendSync ipcRenderer "RecoverAccount" passphrase password)) +(defn recover-account [password passphrase] + (.sendSync ipcRenderer "RecoverAccount" password passphrase)) + +(defn add-peer [enode] + (.sendSync ipcRenderer "AddPeer" enode)) \ No newline at end of file diff --git a/src_front/status_desktop_front/ui/components/tabs.cljs b/src_front/status_desktop_front/ui/components/tabs.cljs index 54eaaf9..95076b5 100644 --- a/src_front/status_desktop_front/ui/components/tabs.cljs +++ b/src_front/status_desktop_front/ui/components/tabs.cljs @@ -12,10 +12,10 @@ :content {:title "Home" :icon-inactive :icons/home :icon-active :icons/home-active}} - {:view-id :wallet - :content {:title "Wallet" - :icon-inactive :icons/wallet - :icon-active :icons/wallet-active}} + #_{:view-id :wallet + :content {:title "Wallet" + :icon-inactive :icons/wallet + :icon-active :icons/wallet-active}} {:view-id :profile :content {:title "Profile" diff --git a/src_front/status_desktop_front/ui/screens/accounts/login/views.cljs b/src_front/status_desktop_front/ui/screens/accounts/login/views.cljs index 27d6a48..a7b4cef 100644 --- a/src_front/status_desktop_front/ui/screens/accounts/login/views.cljs +++ b/src_front/status_desktop_front/ui/screens/accounts/login/views.cljs @@ -20,12 +20,12 @@ [react/view {:style {:margin-vertical 22}} [react/text {:style {:color :white :font-size 18}} name]] - [react/view {:style {:height 52 :width 290 :background-color :white - :opacity 0.2 :border-radius 8 :justify-content :center}} + [react/view {:style {:height 52 :width 290 :background-color "#FFFFFF4D" + :border-radius 8 :justify-content :center}} [react/text-input {:value (or password "") :placeholder "Password" :auto-focus true - :style {:padding-horizontal 17} + :style {:padding-horizontal 17 :color :white} :on-key-press (fn [e] (let [native-event (.-nativeEvent e) key (.-key native-event)] diff --git a/src_front/status_desktop_front/ui/screens/accounts/recover/views.cljs b/src_front/status_desktop_front/ui/screens/accounts/recover/views.cljs index e685172..294b0dd 100644 --- a/src_front/status_desktop_front/ui/screens/accounts/recover/views.cljs +++ b/src_front/status_desktop_front/ui/screens/accounts/recover/views.cljs @@ -10,29 +10,39 @@ [clojure.string :as string])) (defview recover [] - (letsubs [{:keys [passphrase password]} [:get :accounts/recover]] + (letsubs [{:keys [passphrase password]} [:get :accounts/recover] + profile-name [:get-in [:accounts/create :name]]] [react/view {:style (merge ast/accounts-container {:align-items :center :justify-content :center})} [components/back-button #(re-frame/dispatch [:navigate-back])] [react/view {:style {:align-items :center}} [react/view {:style {:margin-vertical 22}} [react/text {:style {:color :white :font-size 18}} "Recover account"]] - [react/view {:style {:height 107 :width 290 :background-color :white - :opacity 0.2 :border-radius 8 :padding-vertical 17}} + [react/view {:style {:height 52 :width 290 :background-color "#FFFFFF4D" + :border-radius 8 :margin-top 22 :justify-content :center}} + [react/text-input {:value (or profile-name "") + :auto-focus true + :style {:padding-horizontal 17 :color :white} + :placeholder "Name" + :on-change (fn [e] + (let [native-event (.-nativeEvent e) + text (.-text native-event)] + (re-frame/dispatch [:set-in [:accounts/create :name] text])))}]] + [react/view {:style {:height 107 :width 290 :background-color "#FFFFFF4D" + :border-radius 8 :padding-vertical 17 :margin-top 8}} [react/text-input {:value (or passphrase "") :placeholder "Passphrase" :multiline true - :auto-focus true - :style {:padding-horizontal 17} + :style {:padding-horizontal 17 :color :white} :on-change (fn [e] (let [native-event (.-nativeEvent e) text (.-text native-event)] (re-frame/dispatch [:set-in [:accounts/recover :passphrase] text])))}]] - [react/view {:style {:height 52 :width 290 :background-color :white :margin-top 8 - :opacity 0.2 :border-radius 8 :justify-content :center}} + [react/view {:style {:height 52 :width 290 :background-color "#FFFFFF4D" :margin-top 8 + :border-radius 8 :justify-content :center}} [react/text-input {:value (or password "") :placeholder "Password" - :style {:padding-horizontal 17} + :style {:padding-horizontal 17 :color :white} :on-key-press (fn [e] (let [native-event (.-nativeEvent e) key (.-key native-event)] diff --git a/src_front/status_desktop_front/ui/screens/accounts/views.cljs b/src_front/status_desktop_front/ui/screens/accounts/views.cljs index af69c03..e0fc100 100644 --- a/src_front/status_desktop_front/ui/screens/accounts/views.cljs +++ b/src_front/status_desktop_front/ui/screens/accounts/views.cljs @@ -56,31 +56,31 @@ [react/text {:style styles/account-title-text} "To create an account set up \na password"]];(i18n/label :t/sign-in-to-status)]] [react/view {:style st/accounts-list-container} - [react/view {:style {:height 52 :width 290 :background-color :white - :opacity 0.2 :border-radius 8 :margin-top 22 :justify-content :center}} + [react/view {:style {:height 52 :width 290 :background-color "#FFFFFF4D" + :border-radius 8 :margin-top 22 :justify-content :center}} [react/text-input {:value (or profile-name "") :auto-focus true - :style {:padding-horizontal 17} + :style {:padding-horizontal 17 :color :white} :placeholder "Name" :on-change (fn [e] (let [native-event (.-nativeEvent e) text (.-text native-event)] (re-frame/dispatch [:set-in [:accounts/create :name] text])))}]] - [react/view {:style {:height 52 :width 290 :background-color :white - :opacity 0.2 :border-radius 8 :margin-top 22 :justify-content :center}} + [react/view {:style {:height 52 :width 290 :background-color "#FFFFFF4D" + :border-radius 8 :margin-top 22 :justify-content :center}} [react/text-input {:value (or password "") - :style {:padding-horizontal 17} + :style {:padding-horizontal 17 :color :white} :placeholder "Password" :secure-text-entry true :on-change (fn [e] (let [native-event (.-nativeEvent e) text (.-text native-event)] (re-frame/dispatch [:set-in [:accounts/create :password] text])))}]] - [react/view {:style {:height 52 :width 290 :background-color :white - :opacity 0.2 :border-radius 8 :margin-top 8 :justify-content :center}} + [react/view {:style {:height 52 :width 290 :background-color "#FFFFFF4D" + :border-radius 8 :margin-top 8 :justify-content :center}} [react/text-input {:value (or password-confirm "") :placeholder "Repeat your password" - :style {:padding-horizontal 17} + :style {:padding-horizontal 17 :color :white} :on-key-press (fn [e] (let [native-event (.-nativeEvent e) key (.-key native-event)] diff --git a/src_front/status_desktop_front/ui/screens/chat/view.cljs b/src_front/status_desktop_front/ui/screens/chat/view.cljs deleted file mode 100644 index f81f4bd..0000000 --- a/src_front/status_desktop_front/ui/screens/chat/view.cljs +++ /dev/null @@ -1,280 +0,0 @@ -(ns status-desktop-front.ui.screens.chat.view - (:require [status-desktop-front.react-native-web :as react] - [status-desktop-front.ui.components.tabs :refer [main-tabs]] - [re-frame.core :as re-frame] - [status-desktop-front.ui.screens.chat.profile.views :as profile.views] - [status-desktop-front.ui.components.icons :as icons] - [status-desktop-front.web3-provider :as protocol] - [clojure.string :as string] - [status-im.chat.views.message.message :as message.views] - [status-im.chat.styles.message.message :as message.style] - [status-im.utils.gfycat.core :as gfycat.core] - [status-im.utils.gfycat.core :as gfycat] - [status-im.ui.screens.chats-list.styles :as chats-list.styles] - [status-im.constants :as constants] - [status-desktop-front.react-native-hyperlink :as rn-hl]) - (:require-macros [status-im.utils.views :as views])) - -(views/defview message-author-name [{:keys [outgoing from] :as message}] - (views/letsubs [current-account [:get-current-account] - incoming-name [:contact-name-by-identity from]] - (if outgoing - [react/text {:style message.style/author} (:name current-account)] - (let [name (or incoming-name (gfycat/generate-gfy from))] - [react/touchable-highlight {:on-press #(re-frame/dispatch [:show-contact-dialog from name (boolean incoming-name)])} - [react/text {:style message.style/author} name]])))) - -(defn message [text me? {:keys [outgoing message-id chat-id message-status user-statuses - from current-public-key content-type group-chat] :as message}] - (when (= content-type constants/text-content-type) - (reagent.core/create-class - {:component-did-mount - #(when (and message-id - chat-id - (not outgoing) - (not= :seen message-status) - (not= :seen (keyword (get-in user-statuses [current-public-key :status])))) - (re-frame/dispatch [:send-seen! {:chat-id chat-id - :from from - :message-id message-id}])) - :reagent-render - (fn [] - [react/view {:style (merge - {:padding-bottom 8} - (if me? - {:align-items :flex-end - :padding-left 90 - :padding-right 60} - {:align-items :flex-start - :padding-left 60 - :padding-right 90}))} - [react/view {:style {:padding 12 :background-color :white :border-radius 8}} - (when group-chat [message-author-name message]) - [rn-hl/hyperlink {:linkStyle {:color "#2980b9"} :on-press #(re-frame/dispatch [:show-link-dialog %1])} - [react/text - text]]]])}))) - -(views/defview messages-view [{:keys [chat-id group-chat]}] - (views/letsubs [chat-id* (atom nil) - scroll-ref (atom nil) - scroll-timer (atom nil) - scroll-height (atom nil)] - (let [_ (when (or (not @chat-id*) (not= @chat-id* chat-id)) - (reset! chat-id* chat-id) - (js/setTimeout #(when scroll-ref (.scrollToEnd @scroll-ref)) 400)) - messages (re-frame/subscribe [:get-chat-messages chat-id]) - current-public-key (re-frame/subscribe [:get-current-public-key])] - [react/view {:style {:flex 1 :background-color "#eef2f5"}} - [react/scroll-view {:scrollEventThrottle 16 - :on-scroll (fn [e] - (let [ne (.-nativeEvent e) - y (.-y (.-contentOffset ne))] - (when (zero? y) - (when @scroll-timer (js/clearTimeout @scroll-timer)) - (reset! scroll-timer (js/setTimeout #(re-frame/dispatch [:load-more-messages]) 300))) - (reset! scroll-height (+ y (.-height (.-layoutMeasurement ne)))))) - :on-content-size-change #(when (or (not @scroll-height) (< (- %2 @scroll-height) 500)) - (.scrollToEnd @scroll-ref)) - :ref #(reset! scroll-ref %)} - [react/view {:style {:padding-vertical 60}} - (for [[index {:keys [from content message-id] :as message-obj}] (map-indexed vector (reverse @messages))] - ^{:key message-id} [message content (= from @current-public-key) (assoc message-obj :group-chat group-chat)])]]]))) - -(views/defview status-view [] - [react/view {:style {:flex 1 :background-color "#eef2f5" :align-items :center :justify-content :center}} - [react/text {:style {:font-size 18 :color "#939ba1"}} - "Status.im"]]) - -(views/defview toolbar-chat-view [] - (views/letsubs [name [:chat :name] - chat-id [:get-current-chat-id] - pending-contact? [:current-contact :pending?] - public-key [:chat :public-key]] - (let [chat-name (if (string/blank? name) - (gfycat.core/generate-gfy public-key) - (or name ;(get-contact-translated chat-id :name name) - "Chat name"))] ;(label :t/chat-name)))] - [react/view {:style {:height 64 :align-items :center :padding-horizontal 11 :justify-content :center}} - [react/text {:style {:font-size 16 :color :black :font-weight "600"}} - chat-name] - (when pending-contact? - [react/touchable-highlight - {:on-press #(re-frame/dispatch [:add-pending-contact chat-id])} - [react/view ;style/add-contact - [react/text {:style {:font-size 14 :color "#939ba1" :margin-top 3}} - "Add to contacts"]]])]))) -;[react/text {:style {:font-size 14 :color "#939ba1" :margin-top 3}} -;"Contact status not implemented"]]))) - -(views/defview chat-text-input [] - (views/letsubs [input-text [:chat :input-text] - inp-ref (atom nil)] - [react/view {:style {:height 90 :margin-horizontal 16 :margin-bottom 16 :background-color :white :border-radius 12 - :box-shadow "0 0.5px 4.5px 0 rgba(0, 0, 0, 0.04)"}} - [react/view {:style {:flex-direction :row :margin-horizontal 16 :margin-top 16 :flex 1 :margin-bottom 16}} - [react/view {:style {:flex 1}} - [react/text-input {:default-value (or input-text "") - :placeholder "Type a message..." - :auto-focus true - :multiline true - :blur-on-submit true - :style {:flex 1} - :ref #(reset! inp-ref %) - :on-key-press (fn [e] - (let [native-event (.-nativeEvent e) - key (.-key native-event)] - (when (= key "Enter") - (js/setTimeout #(do - (.clear @inp-ref) - (.focus @inp-ref)) 200) - (re-frame/dispatch [:send-current-message])))) - :on-change (fn [e] - (let [native-event (.-nativeEvent e) - text (.-text native-event)] - (re-frame/dispatch [:set-chat-input-text text])))}]] - [react/touchable-highlight {:on-press (fn [] - (js/setTimeout #(do (.clear @inp-ref)(.focus @inp-ref)) 200) - (re-frame/dispatch [:send-current-message]))} - [react/view {:style {:margin-left 16 :width 30 :height 30 :border-radius 15 :background-color "#eef2f5" :align-items :center - :justify-content :center}} - [icons/icon :icons/dropdown-up]]]]])) - -(views/defview chat-view [] - (views/letsubs [current-chat [:get-current-chat]] - [react/view {:style {:flex 1 :background-color "#eef2f5"}} - [toolbar-chat-view] - [react/view {:style {:height 1 :background-color "#e8ebec" :margin-horizontal 16}}] - [messages-view current-chat] - [chat-text-input]])) - - -(views/defview new-contact [] - (views/letsubs [new-contact-identity [:get :contacts/new-identity] - topic [:get :public-group-topic]] - [react/view {:style {:flex 1 :background-color "#eef2f5"}} - ^{:key "newcontact"} - [react/view {:style {:height 64 :align-items :center :padding-horizontal 11 :justify-content :center}} - [react/text {:style {:font-size 16 :color :black :font-weight "600"}} - "Add new contact"]] - [react/view {:style {:height 1 :background-color "#e8ebec" :margin-horizontal 16}}] - [react/view {:style {:height 90 :margin-horizontal 16 :margin-bottom 16 :background-color :white :border-radius 12 - :box-shadow "0 0.5px 4.5px 0 rgba(0, 0, 0, 0.04)"}} - [react/view {:style {:flex-direction :row :margin-horizontal 16 :margin-top 16}} - [react/view {:style {:flex 1}} - [react/text-input {:placeholder "Public key" - :on-change (fn [e] - (let [native-event (.-nativeEvent e) - text (.-text native-event)] - (re-frame/dispatch [:set :contacts/new-identity text])))}]] - [react/touchable-highlight {:on-press #(re-frame/dispatch [:add-contact-handler new-contact-identity])} - [react/view {:style {:margin-left 16 :width 30 :height 30 :border-radius 15 :background-color "#eef2f5" :align-items :center - :justify-content :center}} - [icons/icon :icons/ok]]]]] - ^{:key "publicchat"} - [react/view {:style {:height 64 :align-items :center :padding-horizontal 11 :justify-content :center}} - [react/text {:style {:font-size 16 :color :black :font-weight "600"}} - "Join to public chat"]] - [react/view {:style {:height 1 :background-color "#e8ebec" :margin-horizontal 16}}] - [react/view {:style {:height 90 :margin-horizontal 16 :margin-bottom 16 :background-color :white :border-radius 12 - :box-shadow "0 0.5px 4.5px 0 rgba(0, 0, 0, 0.04)"}} - [react/view {:style {:flex-direction :row :margin-horizontal 16 :margin-top 16}} - [react/text "#"] - [react/view {:style {:flex 1}} - [react/text-input {:placeholder "topic" - :on-change (fn [e] - (let [native-event (.-nativeEvent e) - text (.-text native-event)] - (re-frame/dispatch [:set :public-group-topic text])))}]] - [react/touchable-highlight {:on-press #(re-frame/dispatch [:create-new-public-chat topic])} - [react/view {:style {:margin-left 16 :width 30 :height 30 :border-radius 15 :background-color "#eef2f5" :align-items :center - :justify-content :center}} - [icons/icon :icons/ok]]]]]])) - -(defn contact-item [{:keys [whisper-identity name] :as contact}] - [react/touchable-highlight {:on-press #(re-frame/dispatch [:open-chat-with-contact contact])} - [react/view {:style {:padding 12 :background-color :white}} - [react/text - name]]]) - -(views/defview unviewed-indicator [chat-id] - (let [unviewed-messages-count (re-frame/subscribe [:unviewed-messages-count chat-id])] - (when (pos? @unviewed-messages-count) - [react/view {:style (merge chats-list.styles/new-messages-container {:justify-content :center})} - [react/text {:style chats-list.styles/new-messages-text - :font :medium} - @unviewed-messages-count]]))) - -(views/defview chat-list-item-inner-view [{:keys [chat-id name color online - group-chat contacts public? - public-key unremovable?] :as chat}] - (let [name (or name - (gfycat/generate-gfy public-key))] - [react/view {:style {:padding 12 :background-color :white :flex-direction :row :align-items :center}} - [react/text - name] - [react/view {:style {:flex 1}}] - [unviewed-indicator chat-id]])) - -(defn chat-list-item [[chat-id chat]] - [react/touchable-highlight {:on-press #(re-frame/dispatch [:navigate-to-chat chat-id])} - [react/view - [chat-list-item-inner-view (assoc chat :chat-id chat-id)]]]) - -(views/defview chat-list-view [] - (views/letsubs [chats [:filtered-chats]] - [react/view {:style {:flex 1 :background-color :white}} - [react/view {:style {:height 64 :align-items :center :flex-direction :row :padding-horizontal 11}} - [icons/icon :icons/hamburger] - [react/view {:style {:flex 1 :margin-horizontal 11 :height 38 :border-radius 8 :background-color "#edf1f3"}}] - [react/touchable-highlight {:on-press #(re-frame/dispatch [:navigate-to :new-contact])} - [icons/icon :icons/add]]] - [react/view {:style {:height 1 :background-color "#e8ebec" :margin-horizontal 16}}] - [react/scroll-view - [react/view - (for [[index chat] (map-indexed vector chats)] - ^{:key (:chat-id chat)} [chat-list-item chat])]]])) - -(views/defview contacts-list-view [] - (views/letsubs [contacts [:all-added-group-contacts-filtered nil]] - [react/view {:style {:flex 1 :background-color "#eef2f5"}} - [react/view {:style {:height 64 :align-items :center :flex-direction :row :padding-horizontal 11}} - [icons/icon :icons/hamburger] - [react/view {:style {:flex 1 :margin-horizontal 11 :height 38 :border-radius 8 :background-color "#edf1f3"}}] - [react/touchable-highlight {:on-press #(re-frame/dispatch [:navigate-to :new-contact])} - [icons/icon :icons/add]]] - [react/view {:style {:height 1 :background-color "#e8ebec" :margin-horizontal 16}}] - [react/scroll-view - [react/view - (for [[index contact] (map-indexed vector contacts)] - ^{:key index} [contact-item contact])]]])) - - -(views/defview tab-views [] - (views/letsubs [tab [:get :left-view-id]] - (when tab - (let [component (case tab - :profile profile.views/profile - :contact-list contacts-list-view - :chat-list chat-list-view - react/view)] - [react/view {:style {:flex 1}} - [component]])))) - -(views/defview main-views [] - (views/letsubs [view-id [:get :view-id]] - (when view-id - (let [component (case view-id - :chat chat-view - :chat-list status-view - :new-contact new-contact - react/view)] - [react/view {:style {:flex 1}} - [component]])))) - -(views/defview chat [] - [react/view {:style {:flex 1 :flex-direction :row}} - [react/view {:style {:width 340 :background-color :white}} - [react/view {:style {:flex 1}} - [tab-views]] - [main-tabs]] - [main-views]]) diff --git a/src_front/status_desktop_front/ui/screens/events.cljs b/src_front/status_desktop_front/ui/screens/events.cljs index 7a3a923..8f16330 100644 --- a/src_front/status_desktop_front/ui/screens/events.cljs +++ b/src_front/status_desktop_front/ui/screens/events.cljs @@ -9,7 +9,7 @@ status-desktop-front.override.account status-desktop-front.override.contacts status-desktop-front.override.recieve-message - status-desktop-front.ui.screens.chat.events)) + status-desktop-front.ui.screens.main.events)) (handlers/register-handler-fx :create-desktop-account diff --git a/src_front/status_desktop_front/ui/screens/main/add_new/views.cljs b/src_front/status_desktop_front/ui/screens/main/add_new/views.cljs new file mode 100644 index 0000000..de0dab1 --- /dev/null +++ b/src_front/status_desktop_front/ui/screens/main/add_new/views.cljs @@ -0,0 +1,47 @@ +(ns status-desktop-front.ui.screens.main.add-new.views + (:require-macros [status-im.utils.views :as views]) + (:require [status-desktop-front.react-native-web :as react] + [status-desktop-front.ui.components.icons :as icons] + [re-frame.core :as re-frame])) + +(views/defview new-contact [] + (views/letsubs [new-contact-identity [:get :contacts/new-identity] + topic [:get :public-group-topic]] + [react/view {:style {:flex 1 :background-color "#eef2f5"}} + ^{:key "newcontact"} + [react/view {:style {:height 64 :align-items :center :padding-horizontal 11 :justify-content :center}} + [react/text {:style {:font-size 16 :color :black :font-weight "600"}} + "Add new contact"]] + [react/view {:style {:height 1 :background-color "#e8ebec" :margin-horizontal 16}}] + [react/view {:style {:height 90 :margin-horizontal 16 :margin-bottom 16 :background-color :white :border-radius 12 + :box-shadow "0 0.5px 4.5px 0 rgba(0, 0, 0, 0.04)"}} + [react/view {:style {:flex-direction :row :margin-horizontal 16 :margin-top 16}} + [react/view {:style {:flex 1}} + [react/text-input {:placeholder "Contact key" + :on-change (fn [e] + (let [native-event (.-nativeEvent e) + text (.-text native-event)] + (re-frame/dispatch [:set :contacts/new-identity text])))}]] + [react/touchable-highlight {:on-press #(re-frame/dispatch [:add-contact-handler new-contact-identity])} + [react/view {:style {:margin-left 16 :width 30 :height 30 :border-radius 15 :background-color "#eef2f5" :align-items :center + :justify-content :center}} + [icons/icon :icons/ok]]]]] + ^{:key "publicchat"} + [react/view {:style {:height 64 :align-items :center :padding-horizontal 11 :justify-content :center}} + [react/text {:style {:font-size 16 :color :black :font-weight "600"}} + "Join to public chat"]] + [react/view {:style {:height 1 :background-color "#e8ebec" :margin-horizontal 16}}] + [react/view {:style {:height 90 :margin-horizontal 16 :margin-bottom 16 :background-color :white :border-radius 12 + :box-shadow "0 0.5px 4.5px 0 rgba(0, 0, 0, 0.04)"}} + [react/view {:style {:flex-direction :row :margin-horizontal 16 :margin-top 16}} + [react/text "#"] + [react/view {:style {:flex 1}} + [react/text-input {:placeholder "topic" + :on-change (fn [e] + (let [native-event (.-nativeEvent e) + text (.-text native-event)] + (re-frame/dispatch [:set :public-group-topic text])))}]] + [react/touchable-highlight {:on-press #(re-frame/dispatch [:create-new-public-chat topic])} + [react/view {:style {:margin-left 16 :width 30 :height 30 :border-radius 15 :background-color "#eef2f5" :align-items :center + :justify-content :center}} + [icons/icon :icons/ok]]]]]])) \ No newline at end of file diff --git a/src_front/status_desktop_front/ui/screens/main/chat/views.cljs b/src_front/status_desktop_front/ui/screens/main/chat/views.cljs new file mode 100644 index 0000000..540bddc --- /dev/null +++ b/src_front/status_desktop_front/ui/screens/main/chat/views.cljs @@ -0,0 +1,174 @@ +(ns status-desktop-front.ui.screens.main.chat.views + (:require-macros [status-im.utils.views :as views]) + (:require [status-desktop-front.react-native-web :as react] + [re-frame.core :as re-frame] + [status-desktop-front.ui.components.icons :as icons] + [status-desktop-front.web3-provider :as protocol] + [clojure.string :as string] + [status-im.chat.views.message.message :as message.views] + [status-im.chat.styles.message.message :as message.style] + [status-im.utils.gfycat.core :as gfycat.core] + [status-im.utils.gfycat.core :as gfycat] + [status-im.ui.screens.chats-list.styles :as chats-list.styles] + [status-im.constants :as constants] + [status-desktop-front.react-native-hyperlink :as rn-hl] + [status-im.utils.identicon :as identicon] + [status-im.utils.datetime :as time] + [status-im.ui.components.styles :as styles])) + +(views/defview toolbar-chat-view [] + (views/letsubs [{:keys [name public? group-chat]} [:get-current-chat] + chat-id [:get-current-chat-id] + pending-contact? [:current-contact :pending?] + public-key [:chat :public-key]] + (let [chat-name (str + (if public? "#" "") + (if (string/blank? name) + (gfycat.core/generate-gfy public-key) + (or name ;(get-contact-translated chat-id :name name) + "Chat name")))] ;(label :t/chat-name)))] + [react/view {:style {:align-items :center :padding 11 :justify-content :center}} + [react/view {:style {:flex-direction :row}} + (when public? + [icons/icon :icons/public-chat]) + (when (and group-chat (not public?)) + [icons/icon :icons/group-chat]) + [react/text {:style {:font-size 16 :color :black :font-weight "600"}} + chat-name]] + (when pending-contact? + [react/touchable-highlight + {:on-press #(re-frame/dispatch [:add-pending-contact chat-id])} + [react/view {:style {:background-color :white :border-radius 6 :margin-top 3 :padding 4}} ;style/add-contact + [react/text {:style {:font-size 14 :color "#939ba1"}} + "Add to contacts"]]])]))) + +(views/defview message-author-name [{:keys [outgoing from] :as message}] + (views/letsubs [current-account [:get-current-account] + incoming-name [:contact-name-by-identity from]] + (if outgoing + [react/text {:style message.style/author} (:name current-account)] + (let [name (or incoming-name (gfycat/generate-gfy from))] + [react/touchable-highlight {:on-press #(re-frame/dispatch [:show-contact-dialog from name (boolean incoming-name)])} + [react/text {:style message.style/author} name]])))) + +(def photo-style + {:borderRadius 15 + :width 30 + :height 30}) + +(views/defview member-photo [from] + (views/letsubs [photo-path [:photo-path from]] + [react/view + [react/image {:source {:uri (if (string/blank? photo-path) + (identicon/identicon from) + photo-path)} + :style photo-style}]])) + +(views/defview my-photo [from] + (views/letsubs [account [:get-current-account]] + (let [{:keys [photo-path]} account] + [react/view + [react/image {:source {:uri (if (string/blank? photo-path) + (identicon/identicon from) + photo-path)} + :style photo-style}]]))) + +(defn message [text me? {:keys [outgoing message-id chat-id message-status user-statuses timestamp + from current-public-key content-type group-chat type value] :as message}] + (if (= type :datemark) + [react/view {:style {:margin-vertical 20}} + [react/text + (string/capitalize (last (string/split value #"-")))] + [react/view {:style {:height 1 :background-color "#e8ebec"}}]] + (when (= content-type constants/text-content-type) + (reagent.core/create-class + {:component-did-mount + #(when (and message-id + chat-id + (not outgoing) + (not= :seen message-status) + (not= :seen (keyword (get-in user-statuses [current-public-key :status])))) + (re-frame/dispatch [:send-seen! {:chat-id chat-id + :from from + :message-id message-id}])) + :reagent-render + (fn [] + [react/view {:style {:flex-direction :row :flex 1 :margin-vertical 12}} + (if outgoing + [my-photo from] + [member-photo from]) + [react/view {:style {:padding-horizontal 12 :background-color :white :border-radius 8 :flex 1}} + [react/view {:style {:flex-direction :row}} + [message-author-name message] + [react/view {:style {:flex 1}}] + [react/text {:style {:color styles/color-gray4 :font-size 12}} (time/timestamp->time timestamp)]] + [rn-hl/hyperlink {:linkStyle {:color "#2980b9"} :on-press #(re-frame/dispatch [:show-link-dialog %1])} + [react/text + text]]]])})))) + +(views/defview messages-view [{:keys [chat-id group-chat]}] + (views/letsubs [chat-id* (atom nil) + scroll-ref (atom nil) + scroll-timer (atom nil) + scroll-height (atom nil)] + (let [_ (when (or (not @chat-id*) (not= @chat-id* chat-id)) + (reset! chat-id* chat-id) + (js/setTimeout #(when scroll-ref (.scrollToEnd @scroll-ref)) 400)) + messages (re-frame/subscribe [:get-chat-messages chat-id]) + current-public-key (re-frame/subscribe [:get-current-public-key])] + [react/view {:style {:flex 1 :background-color :white :margin-horizontal 16}};"#eef2f5"}} + [react/scroll-view {:scrollEventThrottle 16 + :on-scroll (fn [e] + (let [ne (.-nativeEvent e) + y (.-y (.-contentOffset ne))] + (when (zero? y) + (when @scroll-timer (js/clearTimeout @scroll-timer)) + (reset! scroll-timer (js/setTimeout #(re-frame/dispatch [:load-more-messages]) 300))) + (reset! scroll-height (+ y (.-height (.-layoutMeasurement ne)))))) + :on-content-size-change #(when (or (not @scroll-height) (< (- %2 @scroll-height) 500)) + (.scrollToEnd @scroll-ref)) + :ref #(reset! scroll-ref %)} + [react/view {:style {:padding-vertical 60}} + (for [[index {:keys [from content message-id] :as message-obj}] (map-indexed vector (reverse @messages))] + ^{:key message-id} [message content (= from @current-public-key) (assoc message-obj :group-chat group-chat)])]]]))) + +(views/defview chat-text-input [] + (views/letsubs [input-text [:chat :input-text] + inp-ref (atom nil)] + [react/view {:style {:height 90 :margin-horizontal 16 :background-color :white :border-radius 12}} + [react/view {:style {:flex-direction :row :margin-horizontal 16 :margin-top 16 :flex 1 :margin-bottom 16}} + [react/view {:style {:flex 1}} + [react/text-input {:default-value (or input-text "") + :placeholder "Type a message..." + :auto-focus true + :multiline true + :blur-on-submit true + :style {:flex 1} + :ref #(reset! inp-ref %) + :on-key-press (fn [e] + (let [native-event (.-nativeEvent e) + key (.-key native-event)] + (when (= key "Enter") + (js/setTimeout #(do + (.clear @inp-ref) + (.focus @inp-ref)) 200) + (re-frame/dispatch [:send-current-message])))) + :on-change (fn [e] + (let [native-event (.-nativeEvent e) + text (.-text native-event)] + (re-frame/dispatch [:set-chat-input-text text])))}]] + [react/touchable-highlight {:on-press (fn [] + (js/setTimeout #(do (.clear @inp-ref)(.focus @inp-ref)) 200) + (re-frame/dispatch [:send-current-message]))} + [react/view {:style {:margin-left 16 :width 30 :height 30 :border-radius 15 :background-color "#eef2f5" :align-items :center + :justify-content :center :transform [{ :rotate "90deg"}]}} + [icons/icon :icons/arrow-left]]]]])) + +(views/defview chat-view [] + (views/letsubs [current-chat [:get-current-chat]] + [react/view {:style {:flex 1 :background-color :white}};"#eef2f5"}} + [toolbar-chat-view] + [react/view {:style {:height 1 :background-color "#e8ebec" :margin-horizontal 16}}] + [messages-view current-chat] + [react/view {:style {:height 1 :background-color "#e8ebec" :margin-horizontal 16}}] + [chat-text-input]])) \ No newline at end of file diff --git a/src_front/status_desktop_front/ui/screens/chat/events.cljs b/src_front/status_desktop_front/ui/screens/main/events.cljs similarity index 97% rename from src_front/status_desktop_front/ui/screens/chat/events.cljs rename to src_front/status_desktop_front/ui/screens/main/events.cljs index 371f920..28f0a6a 100644 --- a/src_front/status_desktop_front/ui/screens/chat/events.cljs +++ b/src_front/status_desktop_front/ui/screens/main/events.cljs @@ -1,4 +1,4 @@ -(ns status-desktop-front.ui.screens.chat.events +(ns status-desktop-front.ui.screens.main.events (:require [status-im.utils.handlers :as handlers] [re-frame.core :as re-frame] [cljs.nodejs :as nodejs])) diff --git a/src_front/status_desktop_front/ui/screens/main/tabs/home/views.cljs b/src_front/status_desktop_front/ui/screens/main/tabs/home/views.cljs new file mode 100644 index 0000000..5ff2f49 --- /dev/null +++ b/src_front/status_desktop_front/ui/screens/main/tabs/home/views.cljs @@ -0,0 +1,50 @@ +(ns status-desktop-front.ui.screens.main.tabs.home.views + (:require-macros [status-im.utils.views :as views]) + (:require [status-desktop-front.react-native-web :as react] + [re-frame.core :as re-frame] + [status-im.ui.screens.chats-list.styles :as chats-list.styles] + [status-im.utils.gfycat.core :as gfycat] + [status-desktop-front.ui.components.icons :as icons])) + +(views/defview unviewed-indicator [chat-id] + (let [unviewed-messages-count (re-frame/subscribe [:unviewed-messages-count chat-id])] + (when (pos? @unviewed-messages-count) + [react/view {:style (merge chats-list.styles/new-messages-container {:justify-content :center})} + [react/text {:style chats-list.styles/new-messages-text + :font :medium} + @unviewed-messages-count]]))) + +(views/defview chat-list-item-inner-view [{:keys [chat-id name color online + group-chat contacts public? + public-key unremovable?] :as chat}] + (let [name (str + (if public? "#" "") + (or name + (gfycat/generate-gfy public-key)))] + [react/view {:style {:padding 12 :background-color :white :flex-direction :row :align-items :center}} + (when public? + [icons/icon :icons/public-chat]) + (when (and group-chat (not public?)) + [icons/icon :icons/group-chat]) + [react/text + name] + [react/view {:style {:flex 1}}] + [unviewed-indicator chat-id]])) + +(defn chat-list-item [[chat-id chat]] + [react/touchable-highlight {:on-press #(re-frame/dispatch [:navigate-to-chat chat-id])} + [react/view + [chat-list-item-inner-view (assoc chat :chat-id chat-id)]]]) + +(views/defview chat-list-view [] + (views/letsubs [chats [:filtered-chats]] + [react/view {:style {:flex 1 :background-color :white}} + [react/view {:style {:align-items :center :flex-direction :row :padding 11}} + [react/view {:style {:flex 1}}] + [react/touchable-highlight {:on-press #(re-frame/dispatch [:navigate-to :new-contact])} + [icons/icon :icons/add]]] + [react/view {:style {:height 1 :background-color "#e8ebec" :margin-horizontal 16}}] + [react/scroll-view + [react/view + (for [[index chat] (map-indexed vector chats)] + ^{:key (:chat-id chat)} [chat-list-item chat])]]])) \ No newline at end of file diff --git a/src_front/status_desktop_front/ui/screens/chat/profile/views.cljs b/src_front/status_desktop_front/ui/screens/main/tabs/profile/views.cljs similarity index 55% rename from src_front/status_desktop_front/ui/screens/chat/profile/views.cljs rename to src_front/status_desktop_front/ui/screens/main/tabs/profile/views.cljs index 2fca97a..6292f69 100644 --- a/src_front/status_desktop_front/ui/screens/chat/profile/views.cljs +++ b/src_front/status_desktop_front/ui/screens/main/tabs/profile/views.cljs @@ -1,4 +1,4 @@ -(ns status-desktop-front.ui.screens.chat.profile.views +(ns status-desktop-front.ui.screens.main.tabs.profile.views (:require [status-desktop-front.react-native-web :as react] [status-im.ui.screens.profile.styles :as styles] [status-desktop-front.ui.components.views :as components] @@ -14,69 +14,28 @@ (defn profile-badge [{:keys [name last-online] :as contact}] [react/view {:style styles/profile-badge} - [react/view {:style styles/profile-badge-name-container} [react/text {:style styles/profile-name-text :number-of-lines 1} - name]]]) + name]]) -(defn tag-view [tag] - [react/text {:style {:color "#7099e6"} - :font :medium} - (str tag " ")]) - -(defn colorize-status-hashtags [status] - (for [[i status] (map-indexed vector (string/split status #" "))] - (if (hash-tag? status) - ^{:key (str "item-" i)} - [tag-view status] - ^{:key (str "item-" i)} - (str status " ")))) - -(defn profile-status [status & [edit?]] - [react/view {:style styles/profile-status-container} - (if (or (nil? status) (string/blank? status)) - [react/touchable-highlight ;{:on-press #(dispatch [:my-profile/edit-profile :edit-status])} - [react/view - [react/text {:style styles/add-a-status} - "Add status"]]] - [react/scroll-view - [react/touchable-highlight ;{:on-press (when edit? #(dispatch [:my-profile/edit-profile :edit-status]))} - [react/view - [react/text {:style styles/profile-status-text} - (colorize-status-hashtags status)]]]])]) - - -(defn profile-info-item [{:keys [label value options text-mode empty-value? accessibility-label]}] +(defn profile-info-item [{:keys [label value options]}] [react/touchable-highlight {:on-press #(.writeText clipboard value)} [react/view {:style styles/profile-setting-item} - [react/view {:style (styles/profile-info-text-container options)} - [react/text {:style styles/profile-setting-title} - label] - [react/view {:style styles/profile-setting-spacing}] - [react/text {:style (if empty-value? - styles/profile-setting-text-empty - styles/profile-setting-text) - :number-of-lines 1 - :ellipsizeMode text-mode - :accessibility-label accessibility-label} - value]]]]) - - -(defn profile-info-address-item [{:keys [address] :as contact}] - [profile-info-item - {:label "Address";(label :t/address) - :value address}]) - -(defn profile-info-public-key-item [public-key contact] - [profile-info-item - {:label "Public Key";(label :t/public-key) - :value public-key}]) + [react/view {:style (styles/profile-info-text-container options)} + [react/text {:style styles/profile-setting-title} + label] + [react/view {:style styles/profile-setting-spacing}] + [react/text {:style styles/profile-setting-text + :number-of-lines 1 + :ellipsizeMode :head} + value]]]]) (defn my-profile-info [{:keys [public-key status phone] :as contact}] [react/view - [profile-info-address-item contact] - [profile-info-public-key-item public-key contact]]) + [profile-info-item + {:label "Contact Key (click to copy)" + :value public-key}]]) (views/defview sound-view [sound label sound-name] [react/view {:style (merge styles/profile-setting-item {:height 50})} @@ -92,7 +51,8 @@ sound [:get-in [:desktop :notifications :sound]]] [react/view {:style {:flex 1}} [react/view {:style styles/profile-setting-item} - [react/text {:style styles/profile-setting-text} "Notifications"] + [react/text {:style styles/profile-setting-text} + "Notifications"] [react/view {:style {:flex 1}}] [components/checkbox {:on-value-change #(re-frame/dispatch [:set-in [:desktop :notifications :enabled?] %]) @@ -100,6 +60,7 @@ notifications-enabled?}]] [react/scroll-view [react/view {:style {:flex 1}} + [sound-view sound "No Sound" nil] [sound-view sound "Sound 1" :notif01] [sound-view sound "Sound 2" :notif02] [sound-view sound "Sound 3" :notif03] @@ -114,13 +75,13 @@ [sound-view sound "Sound 12" :notif12] [sound-view sound "Sound 13" :notif13]]]])) - (views/defview profile [] (views/letsubs [{:keys [status public-key] :as current-account} [:get-current-account]] [react/view {:style (merge styles/profile {:background-color :white})} [react/view {:style styles/profile-form} - [profile-badge current-account] - [profile-status status true]] + [profile-badge current-account]] + [react/view {:style {:height 1 :background-color "#e8ebec" :margin-horizontal 16}}] [react/view {:style styles/profile-info-container} [my-profile-info current-account]] + [react/view {:style {:height 1 :background-color "#e8ebec" :margin-horizontal 16}}] [notifications]])) \ No newline at end of file diff --git a/src_front/status_desktop_front/ui/screens/main/views.cljs b/src_front/status_desktop_front/ui/screens/main/views.cljs new file mode 100644 index 0000000..51c80d7 --- /dev/null +++ b/src_front/status_desktop_front/ui/screens/main/views.cljs @@ -0,0 +1,42 @@ +(ns status-desktop-front.ui.screens.main.views + (:require-macros [status-im.utils.views :as views]) + (:require [status-desktop-front.react-native-web :as react] + [status-desktop-front.ui.components.tabs :as tabs] + [status-desktop-front.ui.screens.main.tabs.profile.views :as profile.views] + [status-desktop-front.ui.screens.main.tabs.home.views :as home.views] + [status-desktop-front.ui.screens.main.chat.views :as chat.views] + [status-desktop-front.ui.screens.main.add-new.views :as add-new.views])) + +(views/defview status-view [] + [react/view {:style {:flex 1 :background-color "#eef2f5" :align-items :center :justify-content :center}} + [react/text {:style {:font-size 18 :color "#939ba1"}} + "Status.im"]]) + +(views/defview tab-views [] + (views/letsubs [tab [:get :left-view-id]] + (when tab + (let [component (case tab + :profile profile.views/profile + :chat-list home.views/chat-list-view + react/view)] + [react/view {:style {:flex 1}} + [component]])))) + +(views/defview main-view [] + (views/letsubs [view-id [:get :view-id]] + (when view-id + (let [component (case view-id + :chat chat.views/chat-view + :new-contact add-new.views/new-contact + status-view)] + [react/view {:style {:flex 1}} + [component]])))) + +(views/defview main-views [] + [react/view {:style {:flex 1 :flex-direction :row}} + [react/view {:style {:width 280 :background-color :white}} + [react/view {:style {:flex 1}} + [tab-views]] + [tabs/main-tabs]] + [react/view {:style {:width 1 :background-color "#e8ebec"}}] + [main-view]]) \ No newline at end of file diff --git a/src_front/status_desktop_front/ui/screens/views.cljs b/src_front/status_desktop_front/ui/screens/views.cljs index 62ae76b..9f10b32 100644 --- a/src_front/status_desktop_front/ui/screens/views.cljs +++ b/src_front/status_desktop_front/ui/screens/views.cljs @@ -1,10 +1,10 @@ (ns status-desktop-front.ui.screens.views (:require-macros [status-im.utils.views :as views]) (:require [status-desktop-front.react-native-web :as react] - [status-desktop-front.ui.screens.chat.view :as chat.view] [status-desktop-front.ui.screens.accounts.views :as accounts.views] [status-desktop-front.ui.screens.accounts.recover.views :as recover.views] - [status-desktop-front.ui.screens.accounts.login.views :as login.views])) + [status-desktop-front.ui.screens.accounts.login.views :as login.views] + [status-desktop-front.ui.screens.main.views :as main.views])) (views/defview main [] (views/letsubs [view-id [:get :view-id] @@ -15,7 +15,7 @@ :accounts accounts.views/accounts :recover recover.views/recover :create-account accounts.views/create-account - (:chat-list :new-contact :chat) chat.view/chat + (:new-contact :chat :chat-list) main.views/main-views :login login.views/login)] [react/view {:style {:flex 1}} [react/view {:style {:flex (if logs-visible 3 1)}}