status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #305 from status-im/bug/#274-#275 

Chat list and contact list UI fixes (#291, #274, #275)

Former-commit-id: af1896ce41
This commit is contained in:
Roman Volosovskyi 2016-10-05 16:25:58 +03:00 committed by GitHub
parent 45b11fbd15 d6c4c36f80
commit 43deff4076
59 changed files with 599 additions and 484 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
android/app/src/main/res/drawable-hdpi/icon_add.png Normal file → Executable file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 177 B

After

Width:  |  Height:  |  Size: 153 B

BIN
android/app/src/main/res/drawable-hdpi/icon_add_white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 177 B

BIN
android/app/src/main/res/drawable-xhdpi/icon_add.png Normal file → Executable file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 202 B

After

Width:  |  Height:  |  Size: 228 B

BIN
android/app/src/main/res/drawable-xhdpi/icon_add_white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 202 B

BIN
android/app/src/main/res/drawable-xxhdpi/icon_add.png Normal file → Executable file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 296 B

After

Width:  |  Height:  |  Size: 353 B

BIN
android/app/src/main/res/drawable-xxhdpi/icon_add_white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 296 B

0
android/app/src/main/res/drawable-xxxhdpi/icon_add.png → android/app/src/main/res/drawable-xxxhdpi/icon_add_white.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 362 B

After

Width:  |  Height:  |  Size: 362 B

8
ios/StatusIm.xcodeproj/project.pbxproj
View File

@ -19,7 +19,6 @@
139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 139FDEF41B06529B00C62182 /* libRCTWebSocket.a */; };
13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; };
13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB11A68108700A75B9A /* LaunchScreen.xib */; };
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
146834051AC3E58100842450 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; };
2028DFF91D4275B600227DCD /* SF-UI-Display-Medium.otf in Resources */ = {isa = PBXBuildFile; fileRef = 2028DFF51D4275B600227DCD /* SF-UI-Display-Medium.otf */; };
@ -51,6 +50,7 @@
A6AF670051B842249D520C7B /* Foundation.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 7ED174A34D7D42358313368B /* Foundation.ttf */; };
AD5063BC2B2A4C52ACE0A0B4 /* libUdpSockets.a in Frameworks */ = {isa = PBXBuildFile; fileRef = A96279092BEC4C4B93914F48 /* libUdpSockets.a */; };
AE97D4B08C9F4821B8E9C50B /* Ionicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 359B076A658B4FBAB5128B03 /* Ionicons.ttf */; };
B2F2D1BC1D9D531B00B7B453 /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = B2F2D1BB1D9D531B00B7B453 /* Images.xcassets */; };
B45B40B471414274A7A83185 /* libRCTContacts.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3384AFA9609A409B81928AD5 /* libRCTContacts.a */; };
BA68A2377A20496EA737000D /* libz.tbd in Frameworks */ = {isa = PBXBuildFile; fileRef = 4E586E1B0E544F64AA9F5BD1 /* libz.tbd */; };
C3EE9AEA6F77464588FBAA64 /* FontAwesome.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 7B5870D9ED504F32B6A09C35 /* FontAwesome.ttf */; };
@ -287,7 +287,6 @@
13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = StatusIm/AppDelegate.h; sourceTree = "<group>"; };
13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AppDelegate.m; path = StatusIm/AppDelegate.m; sourceTree = "<group>"; };
13B07FB21A68108700A75B9A /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.xib; name = Base; path = Base.lproj/LaunchScreen.xib; sourceTree = "<group>"; };
13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = StatusIm/Images.xcassets; sourceTree = "<group>"; };
13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = StatusIm/Info.plist; sourceTree = "<group>"; };
13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = StatusIm/main.m; sourceTree = "<group>"; };
146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = "../node_modules/react-native/React/React.xcodeproj"; sourceTree = "<group>"; };
@ -332,6 +331,7 @@
9ED2F4601D9D577B00B36508 /* SF-UI-Text-Bold.otf */ = {isa = PBXFileReference; lastKnownFileType = file; path = "SF-UI-Text-Bold.otf"; sourceTree = "<group>"; };
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 = "<group>"; };
A96279092BEC4C4B93914F48 /* libUdpSockets.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libUdpSockets.a; sourceTree = "<group>"; };
B2F2D1BB1D9D531B00B7B453 /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = StatusIm/Images.xcassets; sourceTree = "<group>"; };
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 = "<group>"; };
C2A4E93F6B154AEFA3485B45 /* libTcpSockets.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libTcpSockets.a; sourceTree = "<group>"; };
CD48A32459B64E96843BB238 /* libRealmReact.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRealmReact.a; sourceTree = "<group>"; };
@ -465,10 +465,10 @@
13B07FAE1A68108700A75B9A /* StatusIm */ = {
isa = PBXGroup;
children = (
B2F2D1BB1D9D531B00B7B453 /* Images.xcassets */,
008F07F21AC5B25A0029DE68 /* main.jsbundle */,
13B07FAF1A68108700A75B9A /* AppDelegate.h */,
13B07FB01A68108700A75B9A /* AppDelegate.m */,
13B07FB51A68108700A75B9A /* Images.xcassets */,
13B07FB61A68108700A75B9A /* Info.plist */,
13B07FB11A68108700A75B9A /* LaunchScreen.xib */,
13B07FB71A68108700A75B9A /* main.m */,
@ -1099,7 +1099,6 @@
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 */,
2028DFF91D4275B600227DCD /* SF-UI-Display-Medium.otf in Resources */,
@ -1109,6 +1108,7 @@
82E689BAF9FB43C8AC6FF1CA /* EvilIcons.ttf in Resources */,
C3EE9AEA6F77464588FBAA64 /* FontAwesome.ttf in Resources */,
A6AF670051B842249D520C7B /* Foundation.ttf in Resources */,
B2F2D1BC1D9D531B00B7B453 /* Images.xcassets in Resources */,
AE97D4B08C9F4821B8E9C50B /* Ionicons.ttf in Resources */,
0F942CF509F74CCDB5CB35B0 /* MaterialIcons.ttf in Resources */,
EF2B5857B4A34E0C9707FB3F /* Octicons.ttf in Resources */,

BIN
ios/StatusIm/Images.xcassets/icon_add.imageset/icon_add.png vendored
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 296 B

After

Width:  |  Height:  |  Size: 353 B

21
ios/StatusIm/Images.xcassets/icon_add_white.imageset/Contents.json vendored Normal file
View File

@ -0,0 +1,21 @@
{
"images" : [
{
"idiom" : "universal",
"filename" : "icon_add.png",
"scale" : "1x"
},
{
"idiom" : "universal",
"scale" : "2x"
},
{
"idiom" : "universal",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}

BIN
ios/StatusIm/Images.xcassets/icon_add_white.imageset/icon_add.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 296 B

12
src/status_im/accounts/login/screen.cljs
View File

@ -9,17 +9,15 @@
touchable-highlight
get-dimensions]]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.toolbar :refer [toolbar]]
[status-im.components.toolbar.view :refer [toolbar]]
[status-im.components.toolbar.styles :refer [toolbar-title-container
toolbar-title-text]]
[status-im.components.text-field.view :refer [text-field]]
[status-im.components.styles :refer [color-purple
color-white
icon-search
icon-back
icon-qr
toolbar-background1
toolbar-title-container
toolbar-title-text
button-input-container
button-input
white-form-text-input]]
[status-im.qr-scanner.views.scan-button :refer [scan-button]]
@ -75,8 +73,8 @@
:style icon-back}
:handler #(dispatch [:navigate-back])}
:custom-content [toolbar-title]
:action {:image {:style icon-search}
:handler #()}}]
:actions [{:image {:style icon-search}
:handler #()}]}]
[view st/form-container
[view st/form-container-inner
[address-input (or address "")]

5
src/status_im/accounts/login/styles.cljs
View File

@ -1,8 +1,5 @@
(ns status-im.accounts.login.styles
(:require [status-im.components.styles :refer [text1-color
color-white
toolbar-background2
online-color]]))
(:require [status-im.components.styles :refer [color-white]]))
(defn screen-container [height]

12
src/status_im/accounts/recover/screen.cljs
View File

@ -8,15 +8,15 @@
linear-gradient
touchable-highlight]]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.toolbar :refer [toolbar]]
[status-im.components.text-field.view :refer [text-field]]
[status-im.components.toolbar.view :refer [toolbar]]
[status-im.components.toolbar.styles :refer [toolbar-gradient
toolbar-title-container
toolbar-title-text]]
[status-im.components.styles :refer [color-purple
color-white
icon-back
icon-search
toolbar-title-container
toolbar-title-text
toolbar-gradient
button-input]]
[status-im.components.react :refer [linear-gradient]]
[status-im.i18n :refer [label]]
@ -83,8 +83,8 @@
:style icon-back}
:handler #(dispatch [:navigate-back])}
:custom-content [toolbar-title]
:action {:image {:style icon-search}
:handler #()}}]
:actions [{:image {:style icon-search}
:handler #()}]}]
[linear-gradient {:locations [0 0.6 1]
:colors gradient-colors
:style toolbar-gradient}]

35
src/status_im/accounts/recover/styles.cljs
View File

@ -1,13 +1,10 @@
(ns status-im.accounts.recover.styles
(:require [status-im.components.styles :refer [text1-color
color-white
toolbar-background2
online-color]]))
(:require [status-im.components.styles :refer [color-white]]))
(def screen-container
{:flex 1
:color :white
{:flex 1
:color :white
:background-color color-white})
(def gradient-background
@ -19,19 +16,19 @@
(def recover-explain-container
{:padding-horizontal 35
:padding-top 20
:justify-content :center})
:padding-top 20
:justify-content :center})
(def recover-explain-text
{:color "#838c93de"
:font-size 16
{:color "#838c93de"
:font-size 16
:line-height 20
:text-align :center})
:text-align :center})
(def form-container
{:flex 1
:flex-direction "row"
:justifyContent "center"})
{:flex 1
:flex-direction "row"
:justifyContent "center"})
(def form-container-inner
{:flex 1
@ -48,10 +45,10 @@
{:flex 1})
(defn recover-button [valid-form?]
{:backgroundColor (if valid-form? "#7099e6" :gray)
:color :white
:flex 1
:alignItems :center
{:backgroundColor (if valid-form? "#7099e6" :gray)
:color :white
:flex 1
:alignItems :center
:paddingVertical 16
:paddingHorizontal 28})
@ -60,7 +57,7 @@
:fontSize 16})
(def input-style
{:color "#323232"
{:color "#323232"
:font-size 12})
(def scan-label

15
src/status_im/accounts/screen.cljs
View File

@ -10,19 +10,16 @@
linear-gradient
touchable-highlight]]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.toolbar :refer [toolbar]]
[status-im.components.toolbar.view :refer [toolbar]]
[status-im.components.styles :refer [color-purple
color-white
icon-search
icon-back
icon-qr
icon-plus
toolbar-background1
toolbar-title-container
toolbar-title-text
button-input-container
button-input
white-form-text-input]]
[status-im.components.toolbar.styles :refer [toolbar-title-container
toolbar-title-text]]
[status-im.utils.listview :as lw]
[status-im.accounts.views.account :refer [account-view]]
[status-im.i18n :refer [label]]
@ -68,8 +65,8 @@
:style icon-back}
:handler (if show-back? #(dispatch [:navigate-back]) nil)}
:custom-content [toolbar-title]
:action {:image {:style icon-search}
:handler #()}}]
:actions [{:image {:style icon-search}
:handler #()}]}]
[list-view {:dataSource (lw/to-datasource accounts)
:enableEmptySections true
:renderRow render-row
@ -86,7 +83,7 @@
[touchable-highlight {:on-press create-account
:accessibility-label :create-account}
[view st/add-account-button
[image {:source {:uri :icon_add}
[image {:source {:uri :icon_add_white}
:style st/icon-plus}]
[text {:style st/add-account-text
:font :default}

21
src/status_im/accounts/styles.cljs
View File

@ -1,8 +1,5 @@
(ns status-im.accounts.styles
(:require [status-im.components.styles :refer [text1-color
color-white
toolbar-background2
online-color]]
(:require [status-im.components.styles :refer [color-white]]
[status-im.components.react :as r]))
@ -82,11 +79,11 @@
:bottom 0})
(def add-account-button-container
{:flex 1
{:flex 1
:paddingVertical 16
:paddingHorizontal 28
:justifyContent :center
:alignItems :center})
:justifyContent :center
:alignItems :center})
(def add-account-button
{:flexDirection :row})
@ -104,15 +101,15 @@
:marginLeft 8})
(def recover-button-container
{:flex 1})
{:flex 1})
(def recover-button
{:flex 1
:alignItems :center
{:flex 1
:alignItems :center
:paddingVertical 16
:paddingHorizontal 28})
(def recover-button-text
{:flex 1
:color color-white
{:flex 1
:color color-white
:fontSize 16})

6
src/status_im/android/platform.cljs
View File

@ -39,4 +39,8 @@
(def platform-specific
{:component-styles component-styles
:fonts fonts
:list-selection-fn show-dialog})
:list-selection-fn show-dialog
:chats {:action-button? true
:new-chat-in-toolbar? false}
:contacts {:action-button? true
:new-contact-in-toolbar? false}})

6
src/status_im/chat/handlers.cljs
View File

@ -248,7 +248,8 @@
[{:keys [loaded-chats] :as db} _]
(let [chats (->> loaded-chats
(map (fn [{:keys [chat-id] :as chat}]
[chat-id chat]))
(let [last-message (messages/get-last-message chat-id)]
[chat-id (assoc chat :last-message last-message)])))
(into {}))
ids (set (keys chats))]
@ -275,7 +276,8 @@
db' (assoc db :current-chat-id chat-id)]
(dispatch [:load-requests! chat-id])
(dispatch [:load-commands! chat-id])
(if (seq messages)
(if (and (seq messages)
(not= (count messages) 1))
db'
(-> db'
load-messages!

3
src/status_im/chat/handlers/receive_message.cljs
View File

@ -38,7 +38,8 @@
message' (assoc (->> message
(cu/check-author-direction previous-message)
(check-preview))
:chat-id chat-id')]
:chat-id chat-id'
:timestamp (.getTime (js/Date.)))]
(store-message message')
(when-not exists?
(dispatch [:add-chat chat-id' (when group-chat? {:group-chat true})]))

4
src/status_im/chat/screen.cljs
View File

@ -17,7 +17,7 @@
[status-im.utils.datetime :as time]
[status-im.utils.platform :refer [platform-specific]]
[status-im.components.invertible-scroll-view :refer [invertible-scroll-view]]
[status-im.components.toolbar :refer [toolbar]]
[status-im.components.toolbar.view :refer [toolbar]]
[status-im.chat.views.message :refer [chat-message]]
[status-im.chat.views.suggestions :refer [suggestion-container]]
[status-im.chat.views.response :refer [response-view]]
@ -107,7 +107,7 @@
[text {:style st/members
:font :medium}
(let [cnt (inc (count @contacts))]
(label-pluralize cnt :t/members))]]
(label-pluralize cnt :t/members-active))]]
[text {:style st/last-activity
:font :default}
(online-text @contact @chat-id)])])))

4
src/status_im/chat/styles/screen.cljs
View File

@ -6,8 +6,8 @@
selected-message-color
separator-color
text1-color
text2-color
toolbar-background1]]))
text2-color]]
[status-im.components.toolbar.styles :refer [toolbar-background1]]))
(def chat-view
{:flex 1

96
src/status_im/chats_list/screen.cljs
View File

@ -13,55 +13,77 @@
[status-im.components.action-button :refer [action-button
action-button-item]]
[status-im.components.drawer.view :refer [open-drawer]]
[status-im.components.styles :refer [color-blue
toolbar-background1
toolbar-background2]]
[status-im.components.styles :refer [color-blue]]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.toolbar :refer [toolbar]]
[status-im.components.toolbar.view :refer [toolbar]]
[status-im.components.toolbar.styles :refer [toolbar-background1
toolbar-background2]]
[status-im.components.icons.custom-icons :refer [ion-icon]]
[status-im.components.react :refer [linear-gradient]]
[status-im.i18n :refer [label]]
[status-im.chats-list.styles :as st]
[status-im.components.styles :as cst]
[status-im.utils.platform :refer [platform-specific]]
[status-im.components.tabs.bottom-gradient :refer [bottom-gradient]]
[status-im.components.tabs.styles :refer [tabs-height]]))
(defview chats-list-toolbar []
[chats-scrolled? [:get :chats-scrolled?]]
[toolbar {:nav-action {:image {:source {:uri :icon_hamburger}
:style st/hamburger-icon}
:handler open-drawer}
:title (label :t/chats)
:background-color (if chats-scrolled?
toolbar-background1
toolbar-background2)
;; TODO implement search
:action {:image {:source {:uri :icon_search}
:style st/search-icon}
:handler (fn [])}}])
(let [new-chat? (get-in platform-specific [:chats :new-chat-in-toolbar?])
actions (cond->> [{:image {:source {:uri :icon_search}
:style st/toolbar-icon}
:handler (fn [])}]
new-chat?
(into [{:image {:source {:uri :icon_add}
:style st/toolbar-icon}
:handler #(dispatch [:navigate-forget :group-contacts :people])}]))]
[toolbar {:nav-action {:image {:source {:uri :icon_hamburger}
:style st/hamburger-icon}
:handler open-drawer}
:title (label :t/chats)
:style (get-in platform-specific [:component-styles :toolbar])
:background-color (if chats-scrolled?
toolbar-background1
toolbar-background2)
:actions actions}]))
(defn chats-action-button []
[view {:style (st/action-buttons-container false 0)
:pointerEvents :box-none}
[action-button {:buttonColor color-blue
:offsetY 16
:offsetX 16}
[action-button-item
{:title (label :t/new-chat)
:buttonColor :#9b59b6
:onPress #(dispatch [:navigate-forget :group-contacts :people])}
[ion-icon {:name :md-create
:style st/create-icon}]]
[action-button-item
{:title (label :t/new-group-chat)
:buttonColor :#1abc9c
:onPress #(dispatch [:navigate-to :new-group])}
[ion-icon {:name :md-person
:style st/person-stalker-icon}]]]])
(defn chat-shadow-item []
[view {:height 3}
[linear-gradient {:style {:height 3}
:colors st/gradient-top-bottom-shadow}]])
(defview chats-list []
[chats [:get :chats]]
[view st/chats-container
[chats-list-toolbar]
[list-view {:dataSource (to-datasource chats)
:renderRow (fn [row _ _]
(list-item [chat-list-item row]))
:style st/list-container}]
[view {:style (st/action-buttons-container false 0)
:pointerEvents :box-none}
[action-button {:buttonColor color-blue
:offsetY 16
:offsetX 16}
[action-button-item
{:title (label :t/new-chat)
:buttonColor :#9b59b6
:onPress #(dispatch [:navigate-forget :group-contacts :people])}
[ion-icon {:name :md-create
:style st/create-icon}]]
[action-button-item
{:title (label :t/new-group-chat)
:buttonColor :#1abc9c
:onPress #(dispatch [:navigate-to :new-group])}
[ion-icon {:name :md-person
:style st/person-stalker-icon}]]]]
[list-view {:dataSource (to-datasource chats)
:renderRow (fn [row _ _]
(list-item [chat-list-item row]))
:renderFooter #(list-item [chat-shadow-item])
:renderSeparator #(list-item
(when (< %2 (- (count chats) 1))
^{:key (str "separator-" %2)}
[view st/chat-separator-wrapper
[view st/chat-separator-item]]))
:style st/list-container}]
(when (get-in platform-specific [:chats :action-button?])
[chats-action-button])
[bottom-gradient]])

106
src/status_im/chats_list/styles.cljs
View File

@ -1,64 +1,83 @@
(ns status-im.chats-list.styles
(:require [status-im.components.styles :refer [color-white
color-light-gray
color-separator
color-blue
online-color
text1-color
text2-color
new-messages-count-color]]
[status-im.components.tabs.styles :refer [tabs-height]]))
(def gradient-top-bottom-shadow
["rgba(24, 52, 76, 0.165)"
"rgba(24, 52, 76, 0.03)"
"rgba(24, 52, 76, 0.01)"])
(def chat-separator-wrapper
{:background-color color-white
:height 0.5
:padding-left 74})
(def chat-separator-item
{:border-bottom-width 0.5
:border-bottom-color color-separator})
(def chat-container
{:flexDirection :row
:paddingVertical 15
:paddingHorizontal 16
:height 90})
{:flex-direction :row
:background-color color-white
:height 94})
(def chat-icon-container
{:marginTop -2
:marginLeft -4
:width 48
:height 48})
{:margin-top -2
:margin-left -4
:padding 16
:width 48
:height 48})
(def item-container
{:flexDirection :column
:marginLeft 12
:flex 1})
{:flex-direction :column
:margin-left 30
:padding-top 16
:padding-right 16
:flex 1})
(def name-view
{:flexDirection :row})
{:flex-direction :row})
(def name-text
{:marginTop -2.5
:color text1-color
:fontSize 14})
{:color text1-color
:font-size 14})
(def group-icon
{:marginTop 4
:marginLeft 8
:width 14
:height 9})
{:margin-top 5
:margin-left 8
:width 14
:height 9})
(def memebers-text
{:marginTop -0.5
{:marginTop 2
:marginLeft 4
:fontSize 12
:color text2-color})
(def last-message-text
{:marginTop 7
:marginRight 40
:color text1-color
:fontSize 14
:lineHeight 20})
{:margin-top 5
:margin-right 40
:color text1-color
:fontSize 14
:lineHeight 20})
(def last-message-text-no-messages
(merge last-message-text
{:color text2-color}))
(def status-container
{:flexDirection :row
:position :absolute
:top 0
:right 0})
{:flex-direction :row
:top 18
:right 16})
(def status-image
{:marginTop 6
{:marginTop 4
:width 9
:height 7})
@ -69,44 +88,43 @@
(def new-messages-container
{:position :absolute
:top 36
:right 0
:top 54
:right 16
:width 24
:height 24
:backgroundColor new-messages-count-color
:borderRadius 50})
(def new-messages-text
{:top 4
:left 0
:fontSize 10
:color color-blue
:textAlign :center})
{:top 5
:left 0
:fontSize 10
:color color-blue
:textAlign :center})
(def hamburger-icon
{:width 16
:height 12})
(def search-icon
(def toolbar-icon
{:width 17
:height 17})
(def chats-container
{:flex 1
:backgroundColor :white})
{:flex 1})
(def list-container
{:backgroundColor :white})
{:background-color color-light-gray})
(def create-icon
{:fontSize 20
:height 22
:color :white})
:color color-white})
(def person-stalker-icon
{:fontSize 20
:height 22
:color :white})
:color color-white})
(defn action-buttons-container [animation? offset-y]
;; todo fix overlaying of parent view

14
src/status_im/chats_list/views/chat_list_item.cljs
View File

@ -7,10 +7,10 @@
[status-im.chats-list.views.inner-item :refer [chat-list-item-inner-view]]))
(defn chat-list-item [[chat-id chat]]
[touchable-highlight
{:on-press #(dispatch [:navigate-to :chat chat-id])}
[view [chat-list-item-inner-view (merge chat
;; TODO stub data
{:chat-id chat-id
:new-messages-count 3
:online true})]]])
[touchable-highlight {:on-press #(dispatch [:navigate-to :chat chat-id])}
[view
[chat-list-item-inner-view (merge chat
;; TODO stub data
{:chat-id chat-id
:new-messages-count 3
:online true})]]])

84
src/status_im/chats_list/views/inner_item.cljs
View File

@ -4,22 +4,64 @@
[status-im.components.chat-icon.screen :refer [chat-icon-view-chat-list]]
[status-im.chats-list.styles :as st]
[status-im.utils.utils :refer [truncate-str]]
[status-im.i18n :refer [label]]
[status-im.i18n :refer [label label-pluralize]]
[status-im.utils.datetime :as time]
[status-im.constants :refer [console-chat-id]]
[clojure.string :as str]))
(defview chat-list-item-inner-view
[{:keys [chat-id name color new-messages-count
online group-chat contacts] :as chat}]
(defn message-content [{:keys [content] :as message}]
(let [content (if message
(if (string? content)
content
(:content content)))]
(if (str/blank? content)
[text {:style st/last-message-text-no-messages}
(label :t/no-messages)]
[text {:style st/last-message-text
:number-of-lines 2}
content])))
(defview message-status [{:keys [chat-id contacts]}
{:keys [message-id message-status user-statuses message-type outgoing] :as msg}]
[app-db-message-status-value [:get-in [:message-statuses message-id :status]]]
(let [delivery-status (get-in user-statuses [chat-id :status])]
(when (and outgoing
(or (some #(= (keyword %) :seen) [delivery-status
message-status
app-db-message-status-value])
(and (= (keyword message-type) :group-user-message)
(and (= (count user-statuses) (count contacts))
(every? (fn [[_ {:keys [status]}]]
(= (keyword status) :seen)) user-statuses)))
(= chat-id console-chat-id)))
[image {:source {:uri :icon_ok_small}
:style st/status-image}])))
(defn message-timestamp [{:keys [timestamp]}]
(when timestamp
[text {:style st/datetime-text}
(time/to-short-str timestamp)]))
(defview unviewed-indicator [chat-id]
[unviewed-messages [:unviewed-messages-count chat-id]]
(let [last-message (first (:messages chat))
name (or name chat-id)]
(when (pos? unviewed-messages)
[view st/new-messages-container
[text {:style st/new-messages-text
:font :medium}
unviewed-messages]]))
(defn chat-list-item-inner-view [{:keys [chat-id name color last-message
online group-chat contacts] :as chat}]
(let [last-message (or (first (:messages chat))
last-message)
name (or name chat-id)]
[view st/chat-container
[view st/chat-icon-container
[chat-icon-view-chat-list chat-id group-chat name color online]]
[view st/item-container
[view st/name-view
[text {:style st/name-text}
[text {:style st/name-text
:font :medium}
(if (str/blank? name)
(label :t/user-anonymous)
(truncate-str name 30))]
@ -27,29 +69,11 @@
[icon :group st/group-icon])
(when group-chat
[text {:style st/memebers-text}
(if (< 0 (count contacts))
(str (inc (count contacts)) " members")
"1 member")])]
[text {:style st/last-message-text
:numberOfLines 2}
(when last-message
(let [content (:content last-message)]
(if (string? content)
content
(:content content))))]]
(label-pluralize (inc (count contacts)) :t/members)])]
[message-content last-message]]
[view
(when last-message
[view st/status-container
;; TODO currently there is not :delivery-status in last-message
(when (:delivery-status last-message)
[image {:source (if (= (keyword (:delivery-status last-message)) :seen)
{:uri :icon_ok_small}
;; todo change icon
{:uri :icon_ok_small})
:style st/status-image}])
(when (:timestamp last-message)
[text {:style st/datetime-text}
(time/to-short-str (:timestamp last-message))])])
(when (pos? unviewed-messages)
[view st/new-messages-container
[text {:style st/new-messages-text} unviewed-messages]])]]))
[message-status chat last-message]
[message-timestamp last-message]])
[unviewed-indicator chat-id]]]))

10
src/status_im/components/carousel/styles.cljs
View File

@ -1,12 +1,4 @@
(ns status-im.components.carousel.styles
(:require [status-im.components.styles :refer [color-white
chat-background
online-color
selected-message-color
separator-color
text1-color
text2-color
toolbar-background1]]))
(ns status-im.components.carousel.styles)
(def scroll-view-container
{:flex 1})

20
src/status_im/components/chat_icon/styles.cljs
View File

@ -1,20 +1,14 @@
(ns status-im.components.chat-icon.styles
(:require [status-im.components.styles :refer [color-white
chat-background
online-color
selected-message-color
separator-color
text1-color
text2-color
toolbar-background1]]))
online-color]]))
(defn default-chat-icon [color]
{:margin 4
:width 36
:height 36
:width 40
:height 40
:alignItems :center
:justifyContent :center
:borderRadius 18
:borderRadius 20
:backgroundColor color})
(defn default-chat-icon-chat-list [color]
@ -40,9 +34,9 @@
(def chat-icon
{:margin 4
:borderRadius 18
:width 36
:height 36})
:borderRadius 20
:width 40
:height 40})
(def chat-icon-chat-list
(merge chat-icon

27
src/status_im/components/styles.cljs
View File

@ -12,6 +12,7 @@
(def color-light-blue-transparent "#bbc4cb32")
(def color-light-gray "#EEF2F5")
(def color-red "red")
(def color-separator "#D6D6D6")
(def text1-color color-black)
(def text1-disabled-color "#555555")
@ -24,12 +25,8 @@
(def chat-background color-light-gray)
(def selected-message-color "#E4E9ED")
(def separator-color "#0000001f")
(def toolbar-background1 color-white)
(def toolbar-background2 color-light-gray)
(def default-chat-color color-purple)
(def toolbar-height 56)
(def flex
{:flex 1})
@ -71,36 +68,18 @@
:height 18})
(def icon-close
{:width 12
{:width 12
:height 12})
(def form-text-input
{:marginLeft -4
:fontSize 14
:color text1-color})
(def white-form-text-input
{:marginLeft -4
:fontSize 14
:color color-white})
(def toolbar-title-container
{:flex 1
:alignItems :center
:justifyContent :center})
(def toolbar-title-text
{:margin-top -2.5
:color text1-color
:font-size 16})
(def button-input-container
{:flex 1
:flexDirection :row})
(def button-input
{:flex 1
:flexDirection :column})
(def toolbar-gradient
{:height 4})
:flexDirection :column})

9
src/status_im/components/tabs/styles.cljs
View File

@ -1,12 +1,5 @@
(ns status-im.components.tabs.styles
(:require [status-im.components.styles :refer [color-white
chat-background
online-color
selected-message-color
separator-color
text1-color
text2-color
toolbar-background1]]))
(:require [status-im.components.styles :refer [color-white]]))
(def tabs-height 60)
(def tab-height 56)

61
src/status_im/components/toolbar.cljs
View File

@ -1,61 +0,0 @@
(ns status-im.components.toolbar
(:require [re-frame.core :refer [subscribe dispatch]]
[status-im.components.react :refer [view
text-input
icon
text
image
touchable-highlight]]
[status-im.components.styles :refer [color-white
color-purple
text1-color
text2-color
toolbar-background1
toolbar-title-container
toolbar-title-text
icon-back
toolbar-height]]))
(defn toolbar [{title :title
nav-action :nav-action
hide-nav? :hide-nav?
action :action
custom-action :custom-action
background-color :background-color
custom-content :custom-content
style :style}]
(let [style (merge {:flexDirection :row
:backgroundColor (or background-color toolbar-background1)
:height toolbar-height
:elevation 2} style)]
[view {:style style}
(when (not hide-nav?)
(if nav-action
[touchable-highlight {:on-press (:handler nav-action)}
[view {:width 56
:height 56
:alignItems :center
:justifyContent :center}
[image (:image nav-action)]]]
[touchable-highlight {:on-press #(dispatch [:navigate-back])
:accessibility-label :navigate-back}
[view {:width 56
:height 56
:alignItems :center
:justifyContent :center}
[image {:source {:uri :icon_back}
:style icon-back}]]]))
(or custom-content
[view {:style toolbar-title-container}
[text {:style toolbar-title-text
:font :medium}
title]])
custom-action
(when action
[touchable-highlight {:on-press (:handler action)}
[view {:width 56
:height 56
:alignItems :center
:justifyContent :center}
[image (:image action)]]])]))

54
src/status_im/components/toolbar/styles.cljs Normal file
View File

@ -0,0 +1,54 @@
(ns status-im.components.toolbar.styles
(:require [status-im.components.styles :refer [text1-color
color-white
color-light-gray]]))
(def toolbar-background1 color-white)
(def toolbar-background2 color-light-gray)
(def toolbar-height 56)
(def toolbar-icon-width 32)
(def toolbar-icon-spacing 8)
(def toolbar-gradient
{:height 4})
(defn toolbar [background-color]
{:flexDirection :row
:backgroundColor (or background-color toolbar-background1)
:height toolbar-height
:elevation 2})
(defn toolbar-nav-actions-container [actions]
{:width (if (and actions (> (count actions) 0))
(-> (+ toolbar-icon-width toolbar-icon-spacing)
(* (count actions))
(+ toolbar-icon-spacing)))
:flex-direction "row"})
(def toolbar-nav-action
{:width toolbar-height
:height toolbar-height
:align-items :center
:justify-content :center})
(def toolbar-title-container
{:flex 1
:alignItems :center
:justifyContent :center})
(def toolbar-title-text
{:margin-top -2.5
:color text1-color
:font-size 16})
(def toolbar-actions-container
{:flex-direction "row"
:margin-left 8})
(def toolbar-action
{:width toolbar-icon-width
:height toolbar-height
:margin-right toolbar-icon-spacing
:align-items :center
:justify-content :center})

47
src/status_im/components/toolbar/view.cljs Normal file
View File

@ -0,0 +1,47 @@
(ns status-im.components.toolbar.view
(:require [re-frame.core :refer [subscribe dispatch]]
[status-im.components.react :refer [view
text-input
icon
text
image
touchable-highlight]]
[status-im.components.styles :refer [icon-back]]
[status-im.components.toolbar.styles :as st]))
(defn toolbar [{title :title
nav-action :nav-action
hide-nav? :hide-nav?
actions :actions
custom-action :custom-action
background-color :background-color
custom-content :custom-content
style :style}]
(let [style (merge (st/toolbar background-color) style)]
[view {:style style}
[view (st/toolbar-nav-actions-container actions)
(when (not hide-nav?)
(if nav-action
[touchable-highlight {:on-press (:handler nav-action)}
[view st/toolbar-nav-action
[image (:image nav-action)]]]
[touchable-highlight {:on-press #(dispatch [:navigate-back])
:accessibility-label :navigate-back}
[view st/toolbar-nav-action
[image {:source {:uri :icon_back}
:style icon-back}]]]))]
(or custom-content
[view {:style st/toolbar-title-container}
[text {:style st/toolbar-title-text
:font :medium}
title]])
[view st/toolbar-actions-container
(if actions
(for [{action-image :image
action-handler :handler} actions]
^{:key (str "action-" action-image)}
[touchable-highlight {:on-press action-handler}
[view st/toolbar-action
[image action-image]]])
custom-action)]]))

60
src/status_im/contacts/screen.cljs
View File

@ -14,29 +14,35 @@
action-button-item]]
[status-im.contacts.views.contact :refer [contact-extended-view on-press]]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.toolbar :refer [toolbar]]
[status-im.components.toolbar.view :refer [toolbar]]
[status-im.components.toolbar.styles :refer [toolbar-background2]]
[status-im.components.drawer.view :refer [open-drawer]]
[status-im.components.icons.custom-icons :refer [ion-icon]]
[status-im.components.styles :refer [color-blue
hamburger-icon
icon-search
create-icon
toolbar-background2]]
create-icon]]
[status-im.components.tabs.bottom-gradient :refer [bottom-gradient]]
[status-im.contacts.styles :as st]
[status-im.i18n :refer [label]]
[status-im.components.styles :as cst]))
[status-im.utils.platform :refer [platform-specific]]))
(defn contact-list-toolbar []
[toolbar {:nav-action {:image {:source {:uri :icon_hamburger}
:style hamburger-icon}
:handler open-drawer}
:title (label :t/contacts)
:background-color toolbar-background2
:style {:elevation 0}
:action {:image {:source {:uri :icon_search}
:style icon-search}
:handler (fn [])}}])
(let [new-contact? (get-in platform-specific [:contacts :new-contact-in-toolbar?])
actions (cond->> [{:image {:source {:uri :icon_search}
:style icon-search}
:handler (fn [])}]
new-contact?
(into [{:image {:source {:uri :icon_add}
:style icon-search}
:handler #(dispatch [:navigate-to :new-contact])}]))]
[toolbar {:nav-action {:image {:source {:uri :icon_hamburger}
:style hamburger-icon}
:handler open-drawer}
:title (label :t/contacts)
:background-color toolbar-background2
:style {:elevation 0}
:actions actions}]))
(def contacts-limit 10)
@ -68,6 +74,18 @@
[view
[text {:style st/show-all-text} (label :t/show-all)]]]])])
(defn contacts-action-button []
[view st/buttons-container
[action-button {:buttonColor color-blue
:offsetY 16
:offsetX 16}
[action-button-item
{:title (label :t/new-contact)
:buttonColor :#9b59b6
:onPress #(dispatch [:navigate-to :new-contact])}
[ion-icon {:name :md-create
:style create-icon}]]]])
(defn contact-list []
(let [contacts (subscribe [:get-added-contacts-with-limit contacts-limit])
contacts-count (subscribe [:added-contacts-count])
@ -88,26 +106,18 @@
[contact-group
@contacts
@contacts-count
(label :t/contacs-group-dapps)
(label :t/contacts-group-dapps)
:dapps true
@click-handler]
[contact-group
@contacts
@contacts-count
(label :t/contacs-group-people)
(label :t/contacts-group-people)
:people false
@click-handler]]
[view st/empty-contact-groups
[react/icon :group_big st/empty-contacts-icon]
[text {:style st/empty-contacts-text} (label :t/no-contacts)]])
[view st/buttons-container
[action-button {:buttonColor color-blue
:offsetY 16
:offsetX 16}
[action-button-item
{:title (label :t/new-contact)
:buttonColor :#9b59b6
:onPress #(dispatch [:navigate-to :new-contact])}
[ion-icon {:name :md-create
:style create-icon}]]]]
(when (get-in platform-specific [:contacts :action-button?])
[contacts-action-button])
[bottom-gradient]])))

79
src/status_im/contacts/styles.cljs
View File

@ -4,13 +4,14 @@
text3-color
text5-color
color-white
toolbar-background2
online-color
color-gray2]]))
color-black
color-light-gray
color-separator
color-gray2]]
[status-im.components.toolbar.styles :refer [toolbar-background2]]))
(def contacts-list-container
{:flex 1
:backgroundColor :white})
{:flex 1})
(def toolbar-shadow
{:height 2
@ -35,7 +36,7 @@
:color color-gray2})
(def contacts-list
{:backgroundColor :white})
{:backgroundColor color-white})
(def contact-group
{:flexDirection :column})
@ -97,8 +98,8 @@
:letterSpacing 0.5})
(def contact-container
{:flexDirection :row
:backgroundColor color-white})
{:flex-direction :row
:background-color color-white})
(def letter-container
{:paddingTop 11
@ -106,13 +107,41 @@
:width 56})
(def letter-text
{:fontSize 24
:color text3-color})
{:fontSize 24
:color text3-color})
(def contact-photo-container
{:marginTop 4
:marginLeft 12})
(def option-inner-container
{:flex 1
:flex-direction :row
:height 56
:background-color color-white
:border-bottom-color color-separator
:border-bottom-width 0.5})
(def option-inner
{:width 48
:height 48
:margin-top 4
:margin-left 12})
(def option-inner-image
{:width 24
:height 18
:top 16
:left 13})
(def spacing-top
{:background-color color-white
:height 8})
(def spacing-bottom
{:background-color color-white
:height 8})
(def contact-inner-container
{:flex 1
:flexDirection :row
@ -126,13 +155,13 @@
:justifyContent :center})
(def name-text
{:fontSize 16
:color text1-color})
{:fontSize 15
:color text1-color})
(def info-text
{:marginTop 1
:fontSize 12
:color text2-color})
{:marginTop 1
:fontSize 12
:color text2-color})
(def more-btn
{:width 56
@ -147,8 +176,8 @@
; new contact
(def contact-form-container
{:flex 1
:color :white
{:flex 1
:color :white
:backgroundColor :white})
(def gradient-background
@ -163,21 +192,21 @@
:margin-top 16})
(def address-explication-container
{:flex 1
:margin-top 30
:paddingLeft 16
{:flex 1
:margin-top 30
:paddingLeft 16
:paddingRight 16})
(def address-explication
{:textAlign :center
:color "#838c93de"})
:color "#838c93de"})
(def buttons-container
{:position :absolute
:bottom 0
:right 0
:width 200
:height 170})
:bottom 0
:right 0
:width 200
:height 170})
(def qr-input
{:margin-right 42})

8
src/status_im/contacts/subs.cljs
View File

@ -9,8 +9,12 @@
(reaction @contacts))))
(defn sort-contacts [contacts]
(sort-by :name #(compare (clojure.string/lower-case %1)
(clojure.string/lower-case %2)) (vals contacts)))
(->> (vals contacts)
(sort (fn [c1 c2]
(let [name1 (or (:name c1) (:address c1) (:whisper-identity c1))
name2 (or (:name c2) (:address c2) (:whisper-identity c2))]
(compare (clojure.string/lower-case name1)
(clojure.string/lower-case name2)))))))
(register-sub :all-added-contacts
(fn [db _]

8
src/status_im/contacts/views/contact.cljs
View File

@ -5,20 +5,14 @@
[status-im.contacts.styles :as st]
[status-im.contacts.views.contact-inner :refer [contact-inner-view]]))
(defn letter-view [letter]
[view st/letter-container
(when letter
[text {:style st/letter-text} letter])])
(defn on-press [whisper-identity]
#(dispatch [:start-chat whisper-identity]))
(defview contact-with-letter-view [{:keys [whisper-identity letter] :as contact}]
(defview contact-view [{:keys [whisper-identity] :as contact}]
[chat [:get-chat whisper-identity]]
[touchable-highlight
{:onPress (on-press whisper-identity)}
[view st/contact-container
[letter-view letter]
[contact-inner-view contact]]])
(defview contact-extended-view [{:keys [whisper-identity] :as contact} info click-handler more-click-handler]

58
src/status_im/contacts/views/contact_list.cljs
View File

@ -6,50 +6,68 @@
touchable-highlight
list-view
list-item]]
[status-im.contacts.views.contact :refer [contact-with-letter-view on-press]]
[status-im.contacts.views.contact :refer [contact-view on-press]]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.toolbar :refer [toolbar]]
[status-im.components.toolbar.view :refer [toolbar]]
[status-im.components.toolbar.styles :refer [toolbar-background1]]
[status-im.components.drawer.view :refer [drawer-view open-drawer]]
[status-im.components.styles :refer [color-blue
hamburger-icon
icon-search
create-icon
toolbar-background1]]
[status-im.components.styles :refer [icon-search]]
[status-im.contacts.styles :as st]
[status-im.utils.listview :as lw]
[status-im.i18n :refer [label]]
[status-im.components.styles :as cst]))
[status-im.utils.platform :refer [platform-specific]]))
(defn new-group-chat-view []
[touchable-highlight
{:on-press #(dispatch [:navigate-to :new-group])}
[view st/contact-container
[view st/option-inner-container
[view st/option-inner
[image {:source {:uri :icon_menu_group}
:style st/option-inner-image}]]
[view st/info-container
[text {:style st/name-text}
(label :t/new-group-chat)]]]]])
(defn render-row [click-handler]
(fn [row _ _]
(list-item [contact-with-letter-view row
(or click-handler
(let [whisper-identity (:whisper-identity row)]
(on-press whisper-identity)))])))
(list-item
[contact-view row
(or click-handler
(let [whisper-identity (:whisper-identity row)]
(on-press whisper-identity)))])))
(defview contact-list-toolbar []
[group [:get :contacts-group]]
[view
[status-bar]
[toolbar {:title (label (if (= group :dapps)
:t/contacs-group-dapps
:t/contacs-group-people))
:t/contacts-group-dapps
:t/contacts-group-new-chat))
:background-color toolbar-background1
:action {:image {:source {:uri :icon_search}
:style icon-search}
:handler (fn [])}}]])
:style (get-in platform-specific [:component-styles :toolbar])
:actions [{:image {:source {:uri :icon_search}
:style icon-search}
:handler (fn [])}]}]])
(defview contact-list []
[contacts [:contacts-with-letters]
group [:get :contacts-group]
click-handler [:get :contacts-click-handler]]
(let [click-handler click-handler]
(let [show-new-group-chat? (and (= group :people)
(get-in platform-specific [:chats :new-chat-in-toolbar?]))]
[drawer-view
[view st/contacts-list-container
[contact-list-toolbar]
;; todo what if there is no contacts, should we show some information
;; about this?
;; todo add stub
(when contacts
[list-view {:dataSource (lw/to-datasource contacts)
:enableEmptySections true
:renderRow (render-row click-handler)
:renderHeader #(list-item
[view
(if show-new-group-chat?
[new-group-chat-view])
[view st/spacing-top]])
:renderFooter #(list-item [view st/spacing-bottom])
:style st/contacts-list}])]]))

31
src/status_im/contacts/views/new_contact.cljs
View File

@ -11,19 +11,14 @@
[status-im.components.text-field.view :refer [text-field]]
[status-im.utils.identicon :refer [identicon]]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.toolbar :refer [toolbar]]
[status-im.components.toolbar.view :refer [toolbar]]
[status-im.components.toolbar.styles :refer [toolbar-title-container
toolbar-title-text]]
[status-im.utils.utils :refer [log http-post]]
[status-im.components.styles :refer [color-purple
color-white
icon-search
[status-im.components.styles :refer [icon-search
icon-back
icon-qr
toolbar-background1
toolbar-title-container
toolbar-title-text
button-input-container
button-input
form-text-input]]
button-input]]
[status-im.qr-scanner.views.scan-button :refer [scan-button]]
[status-im.i18n :refer [label]]
[cljs.spec :as s]
@ -68,14 +63,14 @@
:else error))
(defn toolbar-action [new-contact-identity account error]
(defn toolbar-actions [new-contact-identity account error]
(let [error-message (validation-error-message new-contact-identity account error)]
{:image {:source {:uri (if (str/blank? error-message)
:icon_ok_blue
:icon_ok_disabled)}
:style icon-search}
:handler #(when (str/blank? error-message)
(on-add-contact new-contact-identity))}))
[{:image {:source {:uri (if (str/blank? error-message)
:icon_ok_blue
:icon_ok_disabled)}
:style icon-search}
:handler #(when (str/blank? error-message)
(on-add-contact new-contact-identity))}]))
(defview contact-whisper-id-input [whisper-identity error]
[current-account [:get-current-account]]
@ -108,7 +103,7 @@
:style icon-back}
:handler #(dispatch [:navigate-back])}
:custom-content toolbar-title
:action (toolbar-action new-contact-identity account error)}]]
:actions (toolbar-actions new-contact-identity accounts error)}]]
[view st/form-container
[contact-whisper-id-input new-contact-identity error]]
[view st/address-explication-container

8
src/status_im/discovery/screen.cljs
View File

@ -7,7 +7,7 @@
scroll-view
text
text-input]]
[status-im.components.toolbar :refer [toolbar]]
[status-im.components.toolbar.view :refer [toolbar]]
[status-im.components.drawer.view :refer [open-drawer]]
[status-im.discovery.views.popular :refer [discovery-popular]]
[status-im.discovery.views.recent :refer [discovery-recent]]
@ -45,9 +45,9 @@
:style st/hamburger-icon}
:handler open-drawer}
:custom-content [title-content show-search?]
:action {:image {:source {:uri :icon_search}
:style st/search-icon}
:handler #(toogle-search show-search?)}}])
:actions [{:image {:source {:uri :icon_search}
:style st/search-icon}
:handler #(toogle-search show-search?)}]}])
(defview discovery []
[show-search? [:get ::show-search?]

8
src/status_im/discovery/search_results.cljs
View File

@ -3,7 +3,7 @@
(:require [re-frame.core :refer [subscribe dispatch]]
[status-im.utils.listview :refer [to-datasource]]
[status-im.components.react :refer [view text list-view list-item]]
[status-im.components.toolbar :refer [toolbar]]
[status-im.components.toolbar.view :refer [toolbar]]
[status-im.discovery.views.discovery-list-item :refer [discovery-list-item]]
[status-im.discovery.styles :as st]))
@ -29,9 +29,9 @@
:style st/icon-back}
:handler #(dispatch [:navigate-back])}
:custom-content (title-content tags)
:action {:image {:source {:uri :icon_search}
:style st/icon-search}
:handler (fn [])}}]
:actions [{:image {:source {:uri :icon_search}
:style st/icon-search}
:handler (fn [])}]}]
[list-view {:dataSource datasource
:renderRow (fn [row _ _]

10
src/status_im/discovery/styles.cljs
View File

@ -1,13 +1,5 @@
(ns status-im.discovery.styles
(:require [status-im.components.styles :refer [color-white
color-gray2
chat-background
online-color
selected-message-color
separator-color
text1-color
text2-color
toolbar-background1]]))
(:require [status-im.components.styles :refer [color-gray2]]))
;; common

8
src/status_im/discovery/tag.cljs
View File

@ -3,7 +3,7 @@
(:require [re-frame.core :refer [subscribe dispatch]]
[status-im.utils.listview :refer [to-datasource]]
[status-im.components.react :refer [view text list-view list-item]]
[status-im.components.toolbar :refer [toolbar]]
[status-im.components.toolbar.view :refer [toolbar]]
[status-im.discovery.views.discovery-list-item :refer [discovery-list-item]]
[status-im.discovery.styles :as st]))
@ -25,9 +25,9 @@
:style st/icon-back}
:handler #(dispatch [:navigate-back])}
:custom-content (title-content tag)
:action {:image {:source {:uri :icon_search}
:style st/icon-search}
:handler (fn [])}}]
:actions [{:image {:source {:uri :icon_search}
:style st/icon-search}
:handler (fn [])}]}]
[list-view {:dataSource datasource
:renderRow (fn [row _ _]

2
src/status_im/group_settings/screen.cljs
View File

@ -12,7 +12,7 @@
scroll-view
touchable-highlight]]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.toolbar :refer [toolbar]]
[status-im.components.toolbar.view :refer [toolbar]]
[status-im.components.chat-icon.screen :refer [chat-icon-view-action]]
[status-im.group-settings.styles.group-settings :as st]
[status-im.group-settings.views.member :refer [member-view]]

6
src/status_im/group_settings/styles/group_settings.cljs
View File

@ -1,13 +1,9 @@
(ns status-im.group-settings.styles.group-settings
(:require [status-im.components.styles :refer [color-white
color-purple
chat-background
online-color
selected-message-color
separator-color
text1-color
text2-color
toolbar-background1]]))
text2-color]]))
(def modal-container
{:flex 1

11
src/status_im/ios/platform.cljs
View File

@ -1,6 +1,7 @@
(ns status-im.ios.platform
(:require [status-im.components.styles :as styles]
[status-im.utils.utils :as u]))
[status-im.utils.utils :as u]
[status-im.components.toolbar.styles :refer [toolbar-background2]]))
(def component-styles
{:status-bar {:default {:height 20
@ -8,7 +9,7 @@
:color styles/color-white}
:main {:height 20
:bar-style "default"
:color styles/toolbar-background2}
:color toolbar-background2}
:transparent {:height 20
:bar-style "light-content"
:color styles/color-transparent}}
@ -43,5 +44,9 @@
(def platform-specific
{:component-styles component-styles
:fonts fonts
:list-selection-fn show-action-sheet})
:list-selection-fn show-action-sheet
:chats {:action-button? false
:new-chat-in-toolbar? true}
:contacts {:action-button? false
:new-contact-in-toolbar? true}})

12
src/status_im/new_group/screen.cljs
View File

@ -13,7 +13,7 @@
[status-im.components.text-field.view :refer [text-field]]
[status-im.components.styles :refer [color-purple]]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.toolbar :refer [toolbar]]
[status-im.components.toolbar.view :refer [toolbar]]
[status-im.utils.listview :refer [to-datasource]]
[status-im.new-group.views.contact :refer [new-group-contact]]
[status-im.new-group.styles :as st]
@ -27,11 +27,11 @@
[view
[status-bar]
[toolbar
{:title (label :t/new-group-chat)
:action {:image {:source res/v ;; {:uri "icon_search"}
:style (st/toolbar-icon create-btn-enabled?)}
:handler (when create-btn-enabled?
#(dispatch [:create-new-group new-chat-name]))}}]]))
{:title (label :t/new-group-chat)
:actions [{:image {:source res/v ;; {:uri "icon_search"}
:style (st/toolbar-icon create-btn-enabled?)}
:handler (when create-btn-enabled?
#(dispatch [:create-new-group new-chat-name]))}]}]]))
(defview group-name-input []
[new-chat-name [:get :new-chat-name]]

3
src/status_im/new_group/styles.cljs
View File

@ -2,8 +2,7 @@
(:require [status-im.components.styles :refer [color-white
color-blue
text1-color
text2-color
toolbar-background1]]))
text2-color]]))
(defn toolbar-icon [enabled?]
{:width 20

12
src/status_im/participants/views/add.cljs
View File

@ -4,7 +4,7 @@
[status-im.resources :as res]
[status-im.components.react :refer [view list-view list-item]]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.toolbar :refer [toolbar]]
[status-im.components.toolbar.view :refer [toolbar]]
[status-im.utils.listview :refer [to-datasource]]
[status-im.participants.views.contact :refer [participant-contact]]
[reagent.core :as r]
@ -16,11 +16,11 @@
[view
[status-bar]
[toolbar
{:title (label :t/add-participants)
:action {:image {:source res/v ;; {:uri "icon_search"}
:style st/new-participant-image}
:handler #(do (dispatch [:add-new-participants])
(dispatch [:navigate-back]))}}]])
{:title (label :t/add-participants)
:actions [{:image {:source res/v ;; {:uri "icon_search"}
:style st/new-participant-image}
:handler #(do (dispatch [:add-new-participants])
(dispatch [:navigate-back]))}]}]])
(defn new-participants-row
[row _ _]

12
src/status_im/participants/views/remove.cljs
View File

@ -10,7 +10,7 @@
list-view
list-item]]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.toolbar :refer [toolbar]]
[status-im.components.toolbar.view :refer [toolbar]]
[status-im.utils.listview :refer [to-datasource]]
[status-im.participants.views.contact
:refer [participant-contact]]
@ -23,11 +23,11 @@
[view
[status-bar]
[toolbar
{:title (label :t/remove-participants)
:action {:handler #(do (dispatch [:remove-participants])
(dispatch [:navigate-back]))
:image {:source res/trash-icon ;; {:uri "icon_search"}
:style st/remove-participants-image}}}]])
{:title (label :t/remove-participants)
:actions [{:handler #(do (dispatch [:remove-participants])
(dispatch [:navigate-back]))
:image {:source res/trash-icon ;; {:uri "icon_search"}
:style st/remove-participants-image}}]}]])
(defn remove-participants-row
[row _ _]

7
src/status_im/profile/photo_capture/screen.cljs
View File

@ -8,12 +8,11 @@
[status-im.components.camera :refer [camera
aspects
capture-targets]]
[status-im.components.styles :refer [toolbar-background1
icon-search
icon-back]]
[status-im.components.styles :refer [icon-back]]
[status-im.components.icons.custom-icons :refer [ion-icon]]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.toolbar :refer [toolbar]]
[status-im.components.toolbar.view :refer [toolbar]]
[status-im.components.toolbar.styles :refer [toolbar-background1]]
[status-im.utils.image-processing :refer [img->base64]]
[status-im.profile.photo-capture.styles :as st]
[status-im.i18n :refer [label]]

2
src/status_im/protocol/handlers.cljs
View File

@ -210,7 +210,7 @@
status-path (if (and group? (not= status :sent))
[:message-user-statuses message-id' from]
[:message-statuses message-id'])
current-status (get-in db status-path)]
{current-status :status} (get-in db status-path)]
(if-not (= :seen current-status)
(assoc-in db status-path {:whisper-identity from
:status status})

12
src/status_im/qr_scanner/screen.cljs
View File

@ -4,10 +4,10 @@
[status-im.components.react :refer [view
image]]
[status-im.components.camera :refer [camera]]
[status-im.components.styles :refer [toolbar-background1
icon-search]]
[status-im.components.styles :refer [icon-search]]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.toolbar :refer [toolbar]]
[status-im.components.toolbar.view :refer [toolbar]]
[status-im.components.toolbar.styles :refer [toolbar-background1]]
[status-im.qr-scanner.styles :as st]
[status-im.utils.types :refer [json->clj]]
[status-im.components.styles :as cst]
@ -18,9 +18,9 @@
[status-bar]
[toolbar {:title title
:background-color toolbar-background1
:action {:image {:source {:uri :icon_lock_white}
:style icon-search}
:handler #()}}]])
:actions [{:image {:source {:uri :icon_lock_white}
:style icon-search}
:handler #()}]}]])
(defview qr-scanner []
[identifier [:get :current-qr-context]]

4
src/status_im/qr_scanner/styles.cljs
View File

@ -1,6 +1,6 @@
(ns status-im.qr-scanner.styles
(:require [status-im.components.styles :refer [toolbar-height
color-white]]))
(:require [status-im.components.styles :refer [color-white]]
[status-im.components.toolbar.styles :refer [toolbar-height]]))
(def barcode-scanner-container
{:flex 1

1
src/status_im/qr_scanner/views/import_button.cljs
View File

@ -5,7 +5,6 @@
text
image
touchable-highlight]]
[status-im.components.toolbar :refer [toolbar]]
[status-im.components.styles :refer [icon-qr]]
[status-im.i18n :refer [label]]
[status-im.qr-scanner.styles :as st]))

1
src/status_im/qr_scanner/views/scan_button.cljs
View File

@ -5,7 +5,6 @@
text
image
touchable-highlight]]
[status-im.components.toolbar :refer [toolbar]]
[status-im.components.styles :refer [icon-scan]]
[status-im.i18n :refer [label]]
[status-im.qr-scanner.styles :as st]))

16
src/status_im/transactions/screen.cljs
View File

@ -9,10 +9,10 @@
touchable-highlight
touchable-opacity]]
[status-im.components.styles :refer [icon-ok
icon-close
toolbar-title-container]]
icon-close]]
[status-im.components.carousel.carousel :refer [carousel]]
[status-im.components.toolbar :refer [toolbar]]
[status-im.components.toolbar.view :refer [toolbar]]
[status-im.components.toolbar.styles :refer [toolbar-title-container]]
[status-im.components.text-field.view :refer [text-field]]
[status-im.transactions.views.transaction-page :refer [transaction-page]]
[status-im.transactions.styles :as st]
@ -33,11 +33,11 @@
:custom-content [view {:style toolbar-title-container}
[text {:style st/toolbar-title-text}
(label-pluralize (count transactions) :t/confirm-transactions)]]
:action {:image {:source {:uri (if-not (s/blank? password)
:icon_ok
:icon_ok_disabled_inversed)}
:style icon-ok}
:handler #(dispatch [:accept-transactions password])}}]
:actions [{:image {:source {:uri (if-not (s/blank? password)
:icon_ok
:icon_ok_disabled_inversed)}
:style icon-ok}
:handler #(dispatch [:accept-transactions password])}]}]
[view st/carousel-container
[carousel {:pageStyle st/carousel-page-style
:gap 16

5
src/status_im/transactions/styles.cljs
View File

@ -1,7 +1,4 @@
(ns status-im.transactions.styles
(:require [status-im.components.styles :refer [toolbar-height
color-white]]))
(ns status-im.transactions.styles)
(def transactions-screen
{:flex 1

19
src/status_im/translations/en.cljs
View File

@ -17,12 +17,16 @@
:is-typing "is typing"
:and-you "and you"
:search-chat "Search chat"
:members {:one "1 member, 1 active"
:members {:one "1 member"
:other "{{count}} members"
:zero "no members"}
:members-active {:one "1 member, 1 active"
:other "{{count}} members, {{count}} active"
:zero "no members"}
:active-online "online"
:active-unknown "unknown"
:available "available"
:no-messages "No messages"
;messages
:status-sending "Sending"
@ -84,8 +88,8 @@
;chats
:chats "Chats"
:new-chat "New Chat"
:new-group-chat "New Group Chat"
:new-chat "New chat"
:new-group-chat "New group chat"
;discover
:discovery "Discovery"
@ -101,8 +105,9 @@
:contacts "Contacts"
:new-contact "New Contact"
:show-all "SHOW ALL"
:contacs-group-dapps "Dapps"
:contacs-group-people "People"
:contacts-group-dapps "Dapps"
:contacts-group-people "People"
:contacts-group-new-chat "Start new chat"
:no-contacts "No contacts yet"
;group-settings
@ -194,6 +199,4 @@
:recipient "Recipient"
:one-more-item "One more item"
:fee "Fee"
:value "Value"
})
:value "Value"})