diff --git a/android/app/src/main/res/drawable-hdpi/console.png b/android/app/src/main/res/drawable-hdpi/console.png new file mode 100644 index 0000000000..4dc664c678 Binary files /dev/null and b/android/app/src/main/res/drawable-hdpi/console.png differ diff --git a/android/app/src/main/res/drawable-hdpi/icon_close_small_gray.png b/android/app/src/main/res/drawable-hdpi/icon_close_small_gray.png new file mode 100755 index 0000000000..2fb7bd1b7f Binary files /dev/null and b/android/app/src/main/res/drawable-hdpi/icon_close_small_gray.png differ diff --git a/android/app/src/main/res/drawable-mdpi/console.png b/android/app/src/main/res/drawable-mdpi/console.png new file mode 100644 index 0000000000..2ef4eeac8f Binary files /dev/null and b/android/app/src/main/res/drawable-mdpi/console.png differ diff --git a/android/app/src/main/res/drawable-mdpi/icon_close_small_gray.png b/android/app/src/main/res/drawable-mdpi/icon_close_small_gray.png new file mode 100755 index 0000000000..a53e5eab90 Binary files /dev/null and b/android/app/src/main/res/drawable-mdpi/icon_close_small_gray.png differ diff --git a/android/app/src/main/res/drawable-xhdpi/console.png b/android/app/src/main/res/drawable-xhdpi/console.png new file mode 100644 index 0000000000..70d539f951 Binary files /dev/null and b/android/app/src/main/res/drawable-xhdpi/console.png differ diff --git a/android/app/src/main/res/drawable-xhdpi/icon_close_small_gray.png b/android/app/src/main/res/drawable-xhdpi/icon_close_small_gray.png new file mode 100755 index 0000000000..3b641a8b92 Binary files /dev/null and b/android/app/src/main/res/drawable-xhdpi/icon_close_small_gray.png differ diff --git a/android/app/src/main/res/drawable-xxhdpi/console.png b/android/app/src/main/res/drawable-xxhdpi/console.png new file mode 100644 index 0000000000..c1f41d6edd Binary files /dev/null and b/android/app/src/main/res/drawable-xxhdpi/console.png differ diff --git a/android/app/src/main/res/drawable-xxhdpi/icon_close_small_gray.png b/android/app/src/main/res/drawable-xxhdpi/icon_close_small_gray.png new file mode 100755 index 0000000000..15c440e082 Binary files /dev/null and b/android/app/src/main/res/drawable-xxhdpi/icon_close_small_gray.png differ diff --git a/android/app/src/main/res/drawable-xxxhdpi/console.png b/android/app/src/main/res/drawable-xxxhdpi/console.png new file mode 100644 index 0000000000..19a59f96ea Binary files /dev/null and b/android/app/src/main/res/drawable-xxxhdpi/console.png differ diff --git a/android/app/src/main/res/drawable-xxxhdpi/icon_close_small_gray.png b/android/app/src/main/res/drawable-xxxhdpi/icon_close_small_gray.png new file mode 100755 index 0000000000..98884bb94e Binary files /dev/null and b/android/app/src/main/res/drawable-xxxhdpi/icon_close_small_gray.png differ diff --git a/ios/SF-UI-Text-Bold.otf b/ios/SF-UI-Text-Bold.otf new file mode 100644 index 0000000000..4e9fc0492a Binary files /dev/null and b/ios/SF-UI-Text-Bold.otf differ diff --git a/ios/SF-UI-Text-Medium.otf b/ios/SF-UI-Text-Medium.otf new file mode 100644 index 0000000000..a638385309 Binary files /dev/null and b/ios/SF-UI-Text-Medium.otf differ diff --git a/ios/SF-UI-Text-Regular.otf b/ios/SF-UI-Text-Regular.otf new file mode 100644 index 0000000000..a36c8f62b0 Binary files /dev/null and b/ios/SF-UI-Text-Regular.otf differ diff --git a/ios/StatusIm.xcodeproj/project.pbxproj b/ios/StatusIm.xcodeproj/project.pbxproj index e7132c9c6f..2d2fa4155b 100644 --- a/ios/StatusIm.xcodeproj/project.pbxproj +++ b/ios/StatusIm.xcodeproj/project.pbxproj @@ -44,6 +44,9 @@ 82E689BAF9FB43C8AC6FF1CA /* EvilIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = CEB0E2659D1A4F5FA842057A /* EvilIcons.ttf */; }; 832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; }; 9E3AB6D01D87DB2B008846B4 /* libReact-Native-Webview-Bridge.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 9E3AB6C61D87DA2B008846B4 /* libReact-Native-Webview-Bridge.a */; }; + 9ED2F45E1D9D535A00B36508 /* SF-UI-Text-Regular.otf in Resources */ = {isa = PBXBuildFile; fileRef = 9ED2F45D1D9D52DD00B36508 /* SF-UI-Text-Regular.otf */; }; + 9ED2F45F1D9D535A00B36508 /* SF-UI-Text-Medium.otf in Resources */ = {isa = PBXBuildFile; fileRef = 9ED2F45C1D9D52C100B36508 /* SF-UI-Text-Medium.otf */; }; + 9ED2F4611D9D579900B36508 /* SF-UI-Text-Bold.otf in Resources */ = {isa = PBXBuildFile; fileRef = 9ED2F4601D9D577B00B36508 /* SF-UI-Text-Bold.otf */; }; A39C8FE8BF9E45CF896017A7 /* libRCTCamera.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 0A50F58D6FC94DE696FC3EB5 /* libRCTCamera.a */; }; A6AF670051B842249D520C7B /* Foundation.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 7ED174A34D7D42358313368B /* Foundation.ttf */; }; AD5063BC2B2A4C52ACE0A0B4 /* libUdpSockets.a in Frameworks */ = {isa = PBXBuildFile; fileRef = A96279092BEC4C4B93914F48 /* libUdpSockets.a */; }; @@ -324,6 +327,9 @@ 8AE71EE8751F4652B13BFE83 /* RNVectorIcons.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RNVectorIcons.xcodeproj; path = "../node_modules/react-native-vector-icons/RNVectorIcons.xcodeproj"; sourceTree = ""; }; 8B9A886A2CB448B1ABA0EB62 /* libc++.tbd */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "sourcecode.text-based-dylib-definition"; name = "libc++.tbd"; path = "usr/lib/libc++.tbd"; sourceTree = SDKROOT; }; 9E3AB6B21D87DA2A008846B4 /* React-Native-Webview-Bridge.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = "React-Native-Webview-Bridge.xcodeproj"; path = "../node_modules/react-native-webview-bridge/ios/React-Native-Webview-Bridge.xcodeproj"; sourceTree = ""; }; + 9ED2F45C1D9D52C100B36508 /* SF-UI-Text-Medium.otf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "SF-UI-Text-Medium.otf"; sourceTree = ""; }; + 9ED2F45D1D9D52DD00B36508 /* SF-UI-Text-Regular.otf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "SF-UI-Text-Regular.otf"; sourceTree = ""; }; + 9ED2F4601D9D577B00B36508 /* SF-UI-Text-Bold.otf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "SF-UI-Text-Bold.otf"; sourceTree = ""; }; 9F1854E6D9654226B1FC8308 /* RCTCamera.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RCTCamera.xcodeproj; path = "../node_modules/react-native-camera/ios/RCTCamera.xcodeproj"; sourceTree = ""; }; A96279092BEC4C4B93914F48 /* libUdpSockets.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libUdpSockets.a; sourceTree = ""; }; B3B19223008342D096AA356E /* Octicons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Octicons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Octicons.ttf"; sourceTree = ""; }; @@ -521,6 +527,9 @@ 2028E0111D4275BD00227DCD /* SF */ = { isa = PBXGroup; children = ( + 9ED2F4601D9D577B00B36508 /* SF-UI-Text-Bold.otf */, + 9ED2F45D1D9D52DD00B36508 /* SF-UI-Text-Regular.otf */, + 9ED2F45C1D9D52C100B36508 /* SF-UI-Text-Medium.otf */, 2028DFF51D4275B600227DCD /* SF-UI-Display-Medium.otf */, 2028DFF61D4275B600227DCD /* SF-UI-Display-Regular.otf */, 2028DFF71D4275B600227DCD /* SF-UI-Display-Semibold.otf */, @@ -1087,6 +1096,9 @@ isa = PBXResourcesBuildPhase; buildActionMask = 2147483647; files = ( + 9ED2F4611D9D579900B36508 /* SF-UI-Text-Bold.otf in Resources */, + 9ED2F45E1D9D535A00B36508 /* SF-UI-Text-Regular.otf in Resources */, + 9ED2F45F1D9D535A00B36508 /* SF-UI-Text-Medium.otf in Resources */, 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */, 13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */, 2028DFFA1D4275B600227DCD /* SF-UI-Display-Regular.otf in Resources */, diff --git a/ios/StatusIm/Images.xcassets/console.imageset/Contents.json b/ios/StatusIm/Images.xcassets/console.imageset/Contents.json new file mode 100644 index 0000000000..d70f121274 --- /dev/null +++ b/ios/StatusIm/Images.xcassets/console.imageset/Contents.json @@ -0,0 +1,23 @@ +{ + "images" : [ + { + "idiom" : "universal", + "filename" : "console.png", + "scale" : "1x" + }, + { + "idiom" : "universal", + "filename" : "console-1.png", + "scale" : "2x" + }, + { + "idiom" : "universal", + "filename" : "console-2.png", + "scale" : "3x" + } + ], + "info" : { + "version" : 1, + "author" : "xcode" + } +} \ No newline at end of file diff --git a/ios/StatusIm/Images.xcassets/console.imageset/console-1.png b/ios/StatusIm/Images.xcassets/console.imageset/console-1.png new file mode 100644 index 0000000000..70d539f951 Binary files /dev/null and b/ios/StatusIm/Images.xcassets/console.imageset/console-1.png differ diff --git a/ios/StatusIm/Images.xcassets/console.imageset/console-2.png b/ios/StatusIm/Images.xcassets/console.imageset/console-2.png new file mode 100644 index 0000000000..c1f41d6edd Binary files /dev/null and b/ios/StatusIm/Images.xcassets/console.imageset/console-2.png differ diff --git a/ios/StatusIm/Images.xcassets/console.imageset/console.png b/ios/StatusIm/Images.xcassets/console.imageset/console.png new file mode 100644 index 0000000000..2ef4eeac8f Binary files /dev/null and b/ios/StatusIm/Images.xcassets/console.imageset/console.png differ diff --git a/ios/StatusIm/Images.xcassets/icon_close_small_gray.imageset/Contents.json b/ios/StatusIm/Images.xcassets/icon_close_small_gray.imageset/Contents.json new file mode 100644 index 0000000000..4596ecf424 --- /dev/null +++ b/ios/StatusIm/Images.xcassets/icon_close_small_gray.imageset/Contents.json @@ -0,0 +1,23 @@ +{ + "images" : [ + { + "idiom" : "universal", + "filename" : "ic_close_small_gray.png", + "scale" : "1x" + }, + { + "idiom" : "universal", + "filename" : "ic_close_small_gray-1.png", + "scale" : "2x" + }, + { + "idiom" : "universal", + "filename" : "ic_close_small_gray-2.png", + "scale" : "3x" + } + ], + "info" : { + "version" : 1, + "author" : "xcode" + } +} \ No newline at end of file diff --git a/ios/StatusIm/Images.xcassets/icon_close_small_gray.imageset/ic_close_small_gray-1.png b/ios/StatusIm/Images.xcassets/icon_close_small_gray.imageset/ic_close_small_gray-1.png new file mode 100644 index 0000000000..3b641a8b92 Binary files /dev/null and b/ios/StatusIm/Images.xcassets/icon_close_small_gray.imageset/ic_close_small_gray-1.png differ diff --git a/ios/StatusIm/Images.xcassets/icon_close_small_gray.imageset/ic_close_small_gray-2.png b/ios/StatusIm/Images.xcassets/icon_close_small_gray.imageset/ic_close_small_gray-2.png new file mode 100644 index 0000000000..15c440e082 Binary files /dev/null and b/ios/StatusIm/Images.xcassets/icon_close_small_gray.imageset/ic_close_small_gray-2.png differ diff --git a/ios/StatusIm/Images.xcassets/icon_close_small_gray.imageset/ic_close_small_gray.png b/ios/StatusIm/Images.xcassets/icon_close_small_gray.imageset/ic_close_small_gray.png new file mode 100644 index 0000000000..a53e5eab90 Binary files /dev/null and b/ios/StatusIm/Images.xcassets/icon_close_small_gray.imageset/ic_close_small_gray.png differ diff --git a/ios/StatusIm/Info.plist b/ios/StatusIm/Info.plist index 921348bc4a..14960f6551 100644 --- a/ios/StatusIm/Info.plist +++ b/ios/StatusIm/Info.plist @@ -62,6 +62,9 @@ UIAppFonts + SF-UI-Text-Bold.otf + SF-UI-Text-Regular.otf + SF-UI-Text-Medium.otf SF-UI-Display-Medium.otf SF-UI-Display-Regular.otf SF-UI-Display-Semibold.otf diff --git a/resources/console.js b/resources/console.js index eeaae40b28..7662184748 100644 --- a/resources/console.js +++ b/resources/console.js @@ -171,13 +171,14 @@ status.response({ }); status.response({ - name: "keypair", + name: "password", color: "#7099e6", - description: "Keypair password", + description: "Password Request", icon: "icon_lock_white", params: [{ name: "password", - type: status.types.PASSWORD + type: status.types.PASSWORD, + placeholder: "Type your password" }], handler: function (params) { return { @@ -198,15 +199,20 @@ status.response({ } }, preview: function (params) { - return status.components.text( - { - style: { - marginTop: 5, - marginHorizontal: 0, - fontSize: 14, - fontFamily: "font", - color: "black" - } - }, "*****"); + var style = { + marginTop: 5, + marginHorizontal: 0, + fontSize: 14, + color: "black" + }; + + if(params.platform == "ios"){ + style.fontSize = 8; + style.marginTop = 10; + style.marginBottom = 2; + style.letterSpacing = 1; + } + + return status.components.text({style: style}, "●●●●●●●●●●"); } }); diff --git a/src/status_im/chat/constants.cljs b/src/status_im/chat/constants.cljs index 737c8b9306..ee4fff2019 100644 --- a/src/status_im/chat/constants.cljs +++ b/src/status_im/chat/constants.cljs @@ -1,6 +1,6 @@ (ns status-im.chat.constants) -(def input-height 54) +(def input-height 56) (def max-input-height 66) (def min-input-height 22) (def input-spacing-top 16) diff --git a/src/status_im/chat/handlers.cljs b/src/status_im/chat/handlers.cljs index 19881a45a6..7fccafdda1 100644 --- a/src/status_im/chat/handlers.cljs +++ b/src/status_im/chat/handlers.cljs @@ -7,6 +7,7 @@ [status-im.chat.suggestions :as suggestions] [status-im.protocol.core :as protocol] [status-im.models.chats :as chats] + [status-im.models.contacts :as contacts] [status-im.models.messages :as messages] [status-im.models.pending-messages :as pending-messages] [status-im.constants :refer [text-content-type @@ -178,7 +179,8 @@ db (do (chats/create-chat new-chat) - (sign-up-service/intro existing-account?) + (contacts/save-contacts [sign-up-service/console-contact]) + (sign-up-service/intro) (when existing-account? (sign-up-service/start-signup)) (-> db @@ -192,8 +194,8 @@ (init-console-chat db false))) (register-handler :save-password - (fn [db [_ password mnemonic]] - (sign-up-service/save-password password mnemonic) + (fn [db [_ _ mnemonic]] + (sign-up-service/passpharse-messages mnemonic) (assoc db :password-saved true))) (register-handler :sign-up diff --git a/src/status_im/chat/handlers/commands.cljs b/src/status_im/chat/handlers/commands.cljs index 2990467f61..b7c4d14480 100644 --- a/src/status_im/chat/handlers/commands.cljs +++ b/src/status_im/chat/handlers/commands.cljs @@ -2,14 +2,14 @@ (:require [re-frame.core :refer [enrich after dispatch]] [status-im.utils.handlers :refer [register-handler] :as u] [status-im.components.status :as status] - [status-im.components.react :as r] [status-im.models.commands :as commands] [clojure.string :as str] [status-im.commands.utils :as cu] [status-im.utils.phone-number :as pn] [status-im.i18n :as i18n] [status-im.utils.datetime :as time] - [status-im.utils.random :as random])) + [status-im.utils.random :as random] + [status-im.utils.platform :as platform])) (def command-prefix "c ") @@ -68,7 +68,8 @@ path [(if (= :command type) :commands :responses) name :preview] - params {:value content}] + params {:value content + :platform platform/platform}] (status/call-jail chat-id path params diff --git a/src/status_im/chat/screen.cljs b/src/status_im/chat/screen.cljs index dcf27392e9..56c2d36cab 100644 --- a/src/status_im/chat/screen.cljs +++ b/src/status_im/chat/screen.cljs @@ -75,7 +75,11 @@ (list-item [chat-message message])))) (defn online-text [contact chat-id] - (if contact + (cond + (= chat-id console-chat-id) + (label :t/available) + + contact (let [last-online (get contact :last-online) last-online-date (time/to-date last-online) now-date (t/now)] @@ -83,9 +87,8 @@ (<= last-online-date now-date)) (time/time-ago last-online-date) (label :t/active-unknown))) - (if (= chat-id console-chat-id) - (label :t/active-online) - (label :t/active-unknown)))) + + :else (label :t/active-unknown))) (defn toolbar-content [] (let [{:keys [group-chat name contacts chat-id]} (subscribe [:chat-properties [:group-chat :name :contacts :chat-id]]) @@ -94,8 +97,7 @@ (fn [] [view (st/chat-name-view @show-actions) [text {:style st/chat-name-text - :number-of-lines 1 - :font :medium} + :number-of-lines 1} (if (str/blank? @name) (label :t/user-anonymous) (or @name (label :t/chat-name)))] diff --git a/src/status_im/chat/sign_up.cljs b/src/status_im/chat/sign_up.cljs index 3416c8567c..e127d36c44 100644 --- a/src/status_im/chat/sign_up.cljs +++ b/src/status_im/chat/sign_up.cljs @@ -11,7 +11,8 @@ content-type-command content-type-command-request content-type-status]] - [status-im.i18n :refer [label]])) + [status-im.i18n :refer [label]] + [clojure.string :as s])) (defn send-console-message [text] {:message-id (random/id) @@ -100,24 +101,7 @@ :to "me"}]))) ;; -- Saving password ---------------------------------------- -(defn save-password [password mnemonic] - ;; TODO validate and save password - (dispatch [:received-message - {:message-id (random/id) - :content (label :t/password-saved) - :content-type text-content-type - :outgoing false - :from console-chat-id - :to "me" - :new? false}]) - (dispatch [:received-message - {:message-id (random/id) - :content (label :t/generate-passphrase) - :content-type text-content-type - :outgoing false - :from console-chat-id - :to "me" - :new? false}]) +(defn passpharse-messages [mnemonic] (dispatch [:received-message {:message-id (random/id) :content (label :t/here-is-your-passphrase) @@ -134,59 +118,35 @@ :from console-chat-id :to "me" :new? false}]) - (dispatch [:received-message - {:message-id "8" - :content (label :t/written-down) - :content-type text-content-type - :outgoing false - :from console-chat-id - :to "me" - :new? false}]) ;; TODO highlight '!phone' (start-signup)) (def intro-status - {:message-id "intro-status" - :content (label :t/intro-status) - :from console-chat-id - :chat-id console-chat-id - :content-type content-type-status - :outgoing false - :to "me"}) + {:message-id "intro-status" + :content (label :t/intro-status) + :from console-chat-id + :chat-id console-chat-id + :content-type content-type-status + :outgoing false + :to "me"}) -(defn intro [logged-in?] +(defn intro [] (dispatch [:received-message intro-status]) (dispatch [:received-message {:message-id "intro-message1" - :content (label :t/intro-message1) - :content-type text-content-type + :content (command-content + :password + (label :t/intro-message1)) + :content-type content-type-command-request :outgoing false :from console-chat-id - :to "me"}]) - (when-not logged-in? - (dispatch [:received-message - {:message-id "intro-message2" - :content (label :t/intro-message2) - :content-type text-content-type - :outgoing false - :from console-chat-id - :to "me"}]) - - (dispatch [:received-message - {:message-id "intro-message3" - :content (command-content - :keypair - (label :t/keypair-generated)) - :content-type content-type-command-request - :outgoing false - :from console-chat-id - :to "me"}]))) + :to "me"}])) (def console-chat {:chat-id console-chat-id - :name console-chat-id + :name (s/capitalize console-chat-id) ; todo remove/change dapp config fot console :dapp-url "http://localhost:8185/resources" :dapp-hash 858845357 @@ -194,6 +154,13 @@ :group-chat false :is-active true :timestamp (.getTime (js/Date.)) + :photo-path console-chat-id :contacts [{:identity console-chat-id :text-color "#FFFFFF" :background-color "#AB7967"}]}) + +(def console-contact + {:whisper-identity console-chat-id + :name (s/capitalize console-chat-id) + :photo-path console-chat-id + :dapp? true}) diff --git a/src/status_im/chat/styles/command_pill.cljs b/src/status_im/chat/styles/command_pill.cljs new file mode 100644 index 0000000000..ac95cf8ce4 --- /dev/null +++ b/src/status_im/chat/styles/command_pill.cljs @@ -0,0 +1,16 @@ +(ns status-im.chat.styles.command-pill + (:require [status-im.utils.platform :as p] + [status-im.components.styles :refer [color-white]])) + +(defn pill [command] + {:backgroundColor (:color command) + :height 24 + :min-width 120 + :borderRadius 50 + :padding-top (if p/ios? 4 3) + :paddingHorizontal 12 + :text-align :left}) + +(def pill-text + {:fontSize 12 + :color color-white}) diff --git a/src/status_im/chat/styles/input.cljs b/src/status_im/chat/styles/input.cljs index 7b2d254d6e..cf8e6137b6 100644 --- a/src/status_im/chat/styles/input.cljs +++ b/src/status_im/chat/styles/input.cljs @@ -16,9 +16,9 @@ :elevation 4}) (def command-container - {:left 0 + {:left 0 :backgroundColor :white - :position :absolute}) + :position :absolute}) (defn command-text-container [{:keys [color]}] @@ -80,34 +80,23 @@ (def staged-command-background {:flexDirection :column :margin 16 - :padding 12 + :padding-bottom 12 + :padding-left 12 :backgroundColor chat-background :borderRadius 14}) (def staged-command-info-container - {:flexDirection :row}) - -(defn staged-command-text-container - [{:keys [color]}] - {:backgroundColor color - :height 24 - :borderRadius 50 - :marginRight 32 - :paddingTop 3 - :paddingHorizontal 12}) - -(def staged-command-text - {:fontSize 12 - :color color-white}) + {:flexDirection :row + :margin-top 12}) (def staged-command-cancel - {:position :absolute - :top 7 - :right 4}) + {:padding-left 12 + :padding-top 16 + :padding-right 12}) (def staged-command-cancel-icon - {:width 10 - :height 10}) + {:width 16 + :height 16}) (def staged-command-content {:marginTop 5 diff --git a/src/status_im/chat/styles/message.cljs b/src/status_im/chat/styles/message.cljs index 81e7e0deef..9073224169 100644 --- a/src/status_im/chat/styles/message.cljs +++ b/src/status_im/chat/styles/message.cljs @@ -7,6 +7,7 @@ online-color text1-color text2-color]] + [status-im.utils.platform :as p] [status-im.constants :refer [text-content-type content-type-command]])) @@ -175,17 +176,6 @@ {:flexDirection :row :marginRight 32}) -(defn command-view [command] - {:backgroundColor (:color command) - :height 24 - :borderRadius 50 - :paddingTop 3 - :paddingHorizontal 12}) - -(def command-name - {:fontSize 12 - :color color-white}) - (def command-image {:margin-top 5 :width 12 @@ -293,9 +283,9 @@ {:borderRadius 32}) (def contact-photo - {:borderRadius 32 - :width 64 - :height 64}) + {:border-radius 32 + :width 64 + :height 64}) (def message-date-container {:backgroundColor color-light-blue-transparent diff --git a/src/status_im/chat/styles/message_input.cljs b/src/status_im/chat/styles/message_input.cljs index daa7f830e0..0e840690d0 100644 --- a/src/status_im/chat/styles/message_input.cljs +++ b/src/status_im/chat/styles/message_input.cljs @@ -4,27 +4,26 @@ [status-im.chat.constants :refer [max-input-height min-input-height input-spacing-top - input-spacing-bottom]])) + input-spacing-bottom]] + [status-im.utils.platform :as p])) (def input-container {:flex-direction :column}) -(defn input-view [content-height] +(def input-view {:flex-direction :row :align-items :center :justify-content :center - :height (+ (min (max min-input-height content-height) max-input-height) - input-spacing-top - input-spacing-bottom) + :height 56 :background-color color-white}) -(defn message-input-container [content-height] - {:height (min (max min-input-height content-height) max-input-height) - :margin-top input-spacing-top - :margin-bottom input-spacing-bottom - :flex 1 - :flex-direction "column" - :margin-right 0}) +(def message-input-container + {:height 16.5 + :margin-top 20 + :margin-bottom 19.5 + :flex 1 + :flex-direction :column + :margin-right 0}) (def send-wrapper {:margin-bottom 8 @@ -45,4 +44,4 @@ {:margin-top 10.5 :margin-left 12 :width 15 - :height 15}) \ No newline at end of file + :height 15}) diff --git a/src/status_im/chat/styles/plain_message.cljs b/src/status_im/chat/styles/plain_message.cljs index a76ea56700..bd80860850 100644 --- a/src/status_im/chat/styles/plain_message.cljs +++ b/src/status_im/chat/styles/plain_message.cljs @@ -1,34 +1,45 @@ (ns status-im.chat.styles.plain-message (:require [status-im.components.styles :refer [text1-color]] [status-im.chat.constants :refer [max-input-height - min-input-height]])) + min-input-height]] + [status-im.utils.platform :as p])) (defn message-input-button-touchable [width content-height] - {:width width - :flex 1 - :margin-bottom 14 - :align-items :center - :justify-content :flex-end}) + {:width width + :flex 1}) -(defn message-input-button [scale] - {:transform [{:scale scale}] - :width 24 - :height 24 - :align-items :center - :justify-content :center}) +(defn message-input-button [scale margin-top] + {:transform [{:scale scale}] + :width 24 + :height 24 + :margin-top margin-top + :margin-left 16 + :align-items :center + :justify-content :center}) (def list-icon - {:width 20 - :height 16}) + {:margin-left 4 + :margin-top 5.5 + :margin-bottom 5.5 + :margin-right 4 + :width 16 + :height 13}) + +(def requests-icon-container + {:width 12 + :height 12 + :border-radius 12 + :left -1 + :top -1 + :background-color :white + :position :absolute}) (def requests-icon {:background-color :#7099e6 + :margin 2 :width 8 :height 8 - :border-radius 8 - :left 0 - :top 0 - :position :absolute}) + :border-radius 8}) (def close-icon {:width 12 @@ -39,7 +50,8 @@ :padding 0 :font-size 14 :line-height 20 - :color text1-color}) + :color text1-color + :padding-top (when p/ios? -6)}) (def smile-icon {:width 20 diff --git a/src/status_im/chat/styles/response.cljs b/src/status_im/chat/styles/response.cljs index a5bc065733..fbc29b247b 100644 --- a/src/status_im/chat/styles/response.cljs +++ b/src/status_im/chat/styles/response.cljs @@ -85,7 +85,6 @@ {:flex 1 :marginRight 16 :margin-left (- ml 5) - :margin-top 4 :padding 0 :fontSize 14 :color (if disable? color-white text1-color)}) diff --git a/src/status_im/chat/views/message.cljs b/src/status_im/chat/views/message.cljs index 8f469be81a..3cdca5cfe6 100644 --- a/src/status_im/chat/views/message.cljs +++ b/src/status_im/chat/views/message.cljs @@ -12,6 +12,7 @@ [status-im.components.animation :as anim] [status-im.chat.views.request-message :refer [message-content-command-request]] [status-im.chat.styles.message :as st] + [status-im.chat.styles.command-pill :as pill-st] [status-im.models.chats :refer [chat-by-id]] [status-im.models.commands :refer [parse-command-message-content parse-command-request]] @@ -31,7 +32,7 @@ :font :default} (time/to-short-str timestamp)]]]) -(defn contact-photo [{:keys [photo-path]}] +(defn contact-photo [photo-path] [view st/contact-photo-container [image {:source (if (s/blank? photo-path) res/user-no-photo @@ -44,14 +45,17 @@ [view st/online-dot-left] [view st/online-dot-right]])) -(defn message-content-status [{:keys [from content]}] +(defview message-content-status + [{:keys [from content]}] + [{chat-name :name} [:get-chat-by-id from] + photo-path [:chat-photo from]] [view st/status-container [view st/status-image-view - [contact-photo {}] + [contact-photo photo-path] [contact-online {:online true}]] [text {:style st/status-from :font :default} - from] + (or chat-name from)] [text {:style st/status-text :font :default} content]]) @@ -74,10 +78,10 @@ {:keys [name icon type]} command] [view st/content-command-view [view st/command-container - [view (st/command-view command) - [text {:style st/command-name + [view (pill-st/pill command) + [text {:style pill-st/pill-text :font :default} - (str (if (= :command type) "!" "") name)]]] + (str (if (= :command type) "!" "?") name)]]] (when icon [view st/command-image-view [image {:source {:uri icon} @@ -106,12 +110,31 @@ [wrapper message] [wrapper message [message-content-command-request message]]) +;; todo rewrite this, naive implementation +(defn- parse-text [string] + (if (string? string) + (let [regx #"\*[^*]+\*" + general-text (s/split string regx) + bold-text (vec (map-indexed + (fn [idx string] + [text + {:key (str idx "_" string) + :style {:font-weight :bold}} + (subs string 1 (- (count string) 1))]) + (re-seq regx string))) + bold-text' (if (> (count general-text) + (count bold-text)) + (conj bold-text nil) + bold-text)] + (mapcat vector general-text bold-text')) + (str string))) + (defn text-message [{:keys [content] :as message}] [message-view message [text {:style (st/text-message message) :font :default} - (str content)]]) + (parse-text content)]]) (defmethod message-content text-content-type [wrapper message] @@ -241,12 +264,12 @@ (defn message-container [message & children] (if (:new? message) (let [layout-height (r/atom 0) - anim-value (anim/create-value 1) + anim-value (anim/create-value 1) anim-callback #(dispatch [:set-message-shown message]) - context {:to-value layout-height - :val anim-value - :callback anim-callback} - on-update (message-container-animation-logic context)] + context {:to-value layout-height + :val anim-value + :callback anim-callback} + on-update (message-container-animation-logic context)] (r/create-class {:component-did-update on-update diff --git a/src/status_im/chat/views/message_input.cljs b/src/status_im/chat/views/message_input.cljs index 0169faa1c2..299fd6e516 100644 --- a/src/status_im/chat/views/message_input.cljs +++ b/src/status_im/chat/views/message_input.cljs @@ -44,18 +44,19 @@ disable? [:get :disable-input]] [text-input (merge (plain-input-options disable?) - {:auto-focus false - :blur-on-submit true - :multiline true - :on-change #(let [size (-> (.-nativeEvent %) - (.-contentSize) - (.-height))] - (set-layout-size size)) - :accessibility-label :input - :on-focus #(dispatch [:set :focused true]) - :on-blur #(do (dispatch [:set :focused false]) - (set-layout-size 0)) - :default-value (or input-message "")} + {:placeholder-text-color :#c0c5c9 + :auto-focus false + :blur-on-submit true + :multiline true + :on-change #(let [size (-> (.-nativeEvent %) + (.-contentSize) + (.-height))] + (set-layout-size size)) + :accessibility-label :input + :on-focus #(dispatch [:set :focused true]) + :on-blur #(do (dispatch [:set :focused false]) + (set-layout-size 0)) + :default-value (or input-message "")} input-options)]) (defview command-input [input-options command] @@ -93,9 +94,9 @@ (fn [{:keys [input-options]}] (let [{:keys [height]} (r/state component)] [view st/input-container - [view (st/input-view height) + [view st/input-view [plain-message/commands-button height #(set-layout-size 0)] - [view (st/message-input-container height) + [view st/message-input-container (if @command? [command-input input-options @command] [message-input input-options set-layout-size])] diff --git a/src/status_im/chat/views/plain_message.cljs b/src/status_im/chat/views/plain_message.cljs index 23c5419f39..a8a3b770dc 100644 --- a/src/status_im/chat/views/plain_message.cljs +++ b/src/status_im/chat/views/plain_message.cljs @@ -31,43 +31,46 @@ (defn list-container [min] (fn [{:keys [command? width]}] (let [n-width (if @command? min 56) - delay (if @command? 100 0)] + delay (if @command? 100 0)] (anim/start (anim/timing width {:toValue n-width :duration response-input-hiding-duration :delay delay}) #(dispatch [:set :disable-input false]))))) (defn commands-button [height on-press] - (let [command? (subscribe [:command?]) - requests (subscribe [:get-requests]) - suggestions (subscribe [:get-suggestions]) - buttons-scale (anim/create-value (if @command? 1 0)) + (let [command? (subscribe [:command?]) + requests (subscribe [:get-requests]) + suggestions (subscribe [:get-suggestions]) + buttons-scale (anim/create-value (if @command? 1 0)) container-width (anim/create-value (if @command? 20 56)) - context {:command? command? - :val buttons-scale - :width container-width} - on-update (fn [_] - ((button-animation-logic context)) - ((list-container 20) context))] + context {:command? command? + :val buttons-scale + :width container-width} + on-update (fn [_] + ((button-animation-logic context)) + ((list-container 20) context))] (r/create-class {:component-did-mount on-update :component-did-update on-update :reagent-render - (fn [on-press] + (fn [height on-press] [touchable-highlight {:on-press #(do (dispatch [:switch-command-suggestions!]) (on-press)) :disabled @command?} [animated-view {:style (st/message-input-button-touchable container-width height)} (when-not @command? - [animated-view {:style (st/message-input-button buttons-scale)} + [animated-view {:style (st/message-input-button + buttons-scale + (if (seq @suggestions) 16 17))} (if (seq @suggestions) [icon :close_gray st/close-icon] [icon :input_list st/list-icon]) (when (and (seq @requests) (not (seq @suggestions))) - [view st/requests-icon])])]])}))) + [view st/requests-icon-container + [view st/requests-icon]])])]])}))) (defn smile-animation-logic [{:keys [command? val width]}] (fn [_] @@ -80,13 +83,13 @@ (anim/set-value width 0.1))))))) (defn smile-button [height] - (let [command? (subscribe [:command?]) - buttons-scale (anim/create-value (if @command? 1 0)) + (let [command? (subscribe [:command?]) + buttons-scale (anim/create-value (if @command? 1 0)) container-width (anim/create-value (if @command? 0.1 56)) - context {:command? command? - :val buttons-scale - :width container-width} - on-update (smile-animation-logic context)] + context {:command? command? + :val buttons-scale + :width container-width} + on-update (smile-animation-logic context)] (r/create-class {:component-did-mount on-update @@ -99,5 +102,5 @@ ) :disabled @command?} [animated-view {:style (st/message-input-button-touchable container-width height)} - [animated-view {:style (st/message-input-button buttons-scale)} + [animated-view {:style (st/message-input-button buttons-scale 15)} [icon :smile st/smile-icon]]]])}))) diff --git a/src/status_im/chat/views/staged_command.cljs b/src/status_im/chat/views/staged_command.cljs index 4930192bce..a32476926d 100644 --- a/src/status_im/chat/views/staged_command.cljs +++ b/src/status_im/chat/views/staged_command.cljs @@ -2,10 +2,12 @@ (:require [re-frame.core :refer [subscribe dispatch]] [status-im.components.react :refer [view image + icon text touchable-highlight]] [status-im.resources :as res] - [status-im.chat.styles.input :as st])) + [status-im.chat.styles.input :as st] + [status-im.chat.styles.command-pill :as pill-st])) (defn cancel-command-input [staged-command] (dispatch [:unstage-command staged-command])) @@ -14,16 +16,17 @@ (let [{:keys [type name] :as command} (:command staged-command)] [view st/staged-command-container [view st/staged-command-background - [view st/staged-command-info-container - [view (st/staged-command-text-container command) - [text {:style st/staged-command-text} - (if (= :command type) - (str "!" name) - name)]] + [view {:flex-direction :row} + [view st/staged-command-info-container + [view (pill-st/pill command) + [text {:style pill-st/pill-text} + (str + (if (= :command type) "!" "?") + name)]]] [touchable-highlight {:style st/staged-command-cancel :onPress #(cancel-command-input staged-command)} - [image {:source res/icon-close-gray - :style st/staged-command-cancel-icon}]]] + [view [icon :close_small_gray + st/staged-command-cancel-icon]]]] (if-let [preview (:preview staged-command)] preview [text {:style st/staged-command-content} diff --git a/src/status_im/components/chat_icon/screen.cljs b/src/status_im/components/chat_icon/screen.cljs index 58ed8afe71..069e9b641c 100644 --- a/src/status_im/components/chat_icon/screen.cljs +++ b/src/status_im/components/chat_icon/screen.cljs @@ -20,6 +20,12 @@ [image {:source {:uri photo-path} :style (:chat-icon styles)}]) +(defn dapp-badge [styles] + [view (:online-view styles) + [view + [view (:online-dot-left styles)] + [view (:online-dot-right styles)]]]) + (defn contact-badge [type styles] (when (= type :edit) [view (:online-view styles) @@ -32,13 +38,14 @@ :style st/photo-pencil}]])])) (defview chat-icon-view [chat-id group-chat name online styles] - [photo-path [:chat-photo chat-id]] + [photo-path [:chat-photo chat-id] + dapp-url [:chat :dapp-url]] [view (:container styles) - (if-not (or (s/blank? photo-path) (= chat-id console-chat-id)) + (if-not (s/blank? photo-path) [chat-icon photo-path styles] [default-chat-icon name styles]) - (when-not group-chat - [contact-badge (if online :online :blank) styles])]) + (when dapp-url + [dapp-badge styles])]) (defn chat-icon-view-chat-list [chat-id group-chat name color online] [chat-icon-view chat-id group-chat name online diff --git a/src/status_im/components/react.cljs b/src/status_im/components/react.cljs index 2588b22044..30a84f5e55 100644 --- a/src/status_im/components/react.cljs +++ b/src/status_im/components/react.cljs @@ -66,14 +66,15 @@ ([t] (r/as-element [text-class t])) ([{:keys [style font] :as opts - :or {font :default}} t] + :or {font :default}} t & other] (r/as-element (let [font (get-in platform-specific [:fonts font])] - [text-class - (-> opts - (dissoc :font) - (assoc :style (merge style font))) - t])))) + (vec (concat + [text-class + (-> opts + (dissoc :font) + (assoc :style (merge style font)))] + (conj other t))))))) (defn text-input [props text] [text-input-class (merge diff --git a/src/status_im/contacts/subs.cljs b/src/status_im/contacts/subs.cljs index 9705216f62..9dad03f958 100644 --- a/src/status_im/contacts/subs.cljs +++ b/src/status_im/contacts/subs.cljs @@ -90,6 +90,12 @@ (if (:group-chat @chat) ;; TODO return group chat icon nil - (if (pos? (count @contacts)) + (cond + (:photo-path @chat) + (:photo-path @chat) + + (pos? (count @contacts)) (:photo-path (first @contacts)) + + :else (identicon chat-id)))))))) diff --git a/src/status_im/ios/platform.cljs b/src/status_im/ios/platform.cljs index 718e8eac74..fff7bd6f9d 100644 --- a/src/status_im/ios/platform.cljs +++ b/src/status_im/ios/platform.cljs @@ -23,9 +23,9 @@ :input-error-text {:margin-left 0}}) (def fonts - {:default {:font-family "SFUIDisplay-Regular"} - :medium {:font-family "SFUIDisplay-Medium"}}) - + {:default {:font-family "SFUIText-Regular"} + :medium {:font-family "SFUIText-Medium"} + :bold {:font-family "SFUIText-Bold"}}) ;; Dialogs diff --git a/src/status_im/models/chats.cljs b/src/status_im/models/chats.cljs index 50d059d929..898f02d171 100644 --- a/src/status_im/models/chats.cljs +++ b/src/status_im/models/chats.cljs @@ -26,18 +26,6 @@ (defn chat-exists? [chat-id] (r/exists? :account :chat {:chat-id chat-id})) -(defn add-status-message [chat-id] - ;; TODO Get real status - (save-message chat-id - {:from "Status" - :to nil - :message-id (random/id) - :content (str "The brash businessman’s braggadocio " - "and public exchange with candidates " - "in the US presidential election") - :content-type content-type-status - :outgoing false})) - (defn chat-contacts [chat-id] (-> (r/get-by-field :account :chat :chat-id chat-id) (r/single) diff --git a/src/status_im/persistence/realm/schemas.cljs b/src/status_im/persistence/realm/schemas.cljs index a0ee8eefc2..bdfc1730bd 100644 --- a/src/status_im/persistence/realm/schemas.cljs +++ b/src/status_im/persistence/realm/schemas.cljs @@ -35,7 +35,9 @@ :public-key {:type :string :optional true} :private-key {:type :string - :optional true}}} + :optional true} + :dapp? {:type :bool + :default false}}} {:name :request :properties {:message-id :string :chat-id :string diff --git a/src/status_im/translations/en.cljs b/src/status_im/translations/en.cljs index bbe45b68c0..c811e34545 100644 --- a/src/status_im/translations/en.cljs +++ b/src/status_im/translations/en.cljs @@ -22,6 +22,7 @@ :zero "no members"} :active-online "online" :active-unknown "unknown" + :available "available" ;messages :status-sending "Sending" @@ -75,19 +76,11 @@ "it's me the Console nice to meet you!") :generate-passphrase (str "I'll generate a passphrase for you so you can restore your " "access or log in from another device") - :here-is-your-passphrase "Here's your passphrase:" + :here-is-your-passphrase "Here is your passphrase, *write this down and keep this safe!* You will need it to recover your account." :written-down "Make sure you had securely written it down" - :phone-number-required (str "Your phone number is also required to use the app. Type the " - "exclamation mark or hit the icon to open the command list " - "and choose the !phone command") - :intro-status (str "The brash businessman’s braggadocio " - "and public exchange with candidates " - "in the US presidential election") - :intro-message1 "Hello there! It's Status a Dapp browser in your phone." - :intro-message2 (str "Status uses a highly secure key-pair authentication type " - "to provide you a reliable way to access your account") - :keypair-generated (str "A key pair has been generated and saved to your device. " - "Create a password to secure your key") + :phone-number-required "Tap here to enter your phone number & I'll find your friends" + :intro-status "Chat with me to setup your account and change your settings!" + :intro-message1 "Welcome to Status\nTap this message to set your password & get started!" ;chats :chats "Chats"