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

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

This commit is contained in:
Alexander Pantyuhov 2016-10-05 11:56:53 +03:00
parent 2cbad4dc76
commit decc2188e6
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"})