status-im
/
status-react
mirror of https://github.com/status-im/status-react.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 */; }; 139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 139FDEF41B06529B00C62182 /* libRCTWebSocket.a */; };
13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; }; 13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; };
13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB11A68108700A75B9A /* LaunchScreen.xib */; }; 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 */; }; 13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
146834051AC3E58100842450 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; }; 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 */; }; 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 */; }; A6AF670051B842249D520C7B /* Foundation.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 7ED174A34D7D42358313368B /* Foundation.ttf */; };
AD5063BC2B2A4C52ACE0A0B4 /* libUdpSockets.a in Frameworks */ = {isa = PBXBuildFile; fileRef = A96279092BEC4C4B93914F48 /* libUdpSockets.a */; }; AD5063BC2B2A4C52ACE0A0B4 /* libUdpSockets.a in Frameworks */ = {isa = PBXBuildFile; fileRef = A96279092BEC4C4B93914F48 /* libUdpSockets.a */; };
AE97D4B08C9F4821B8E9C50B /* Ionicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 359B076A658B4FBAB5128B03 /* Ionicons.ttf */; }; 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 */; }; B45B40B471414274A7A83185 /* libRCTContacts.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3384AFA9609A409B81928AD5 /* libRCTContacts.a */; };
BA68A2377A20496EA737000D /* libz.tbd in Frameworks */ = {isa = PBXBuildFile; fileRef = 4E586E1B0E544F64AA9F5BD1 /* libz.tbd */; }; BA68A2377A20496EA737000D /* libz.tbd in Frameworks */ = {isa = PBXBuildFile; fileRef = 4E586E1B0E544F64AA9F5BD1 /* libz.tbd */; };
C3EE9AEA6F77464588FBAA64 /* FontAwesome.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 7B5870D9ED504F32B6A09C35 /* FontAwesome.ttf */; }; 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>"; }; 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>"; }; 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>"; }; 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>"; }; 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>"; }; 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>"; }; 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>"; }; 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>"; }; 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>"; }; 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>"; }; 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>"; }; 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>"; }; 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 */ = { 13B07FAE1A68108700A75B9A /* StatusIm */ = {
isa = PBXGroup; isa = PBXGroup;
children = ( children = (
B2F2D1BB1D9D531B00B7B453 /* Images.xcassets */,
008F07F21AC5B25A0029DE68 /* main.jsbundle */, 008F07F21AC5B25A0029DE68 /* main.jsbundle */,
13B07FAF1A68108700A75B9A /* AppDelegate.h */, 13B07FAF1A68108700A75B9A /* AppDelegate.h */,
13B07FB01A68108700A75B9A /* AppDelegate.m */, 13B07FB01A68108700A75B9A /* AppDelegate.m */,
13B07FB51A68108700A75B9A /* Images.xcassets */,
13B07FB61A68108700A75B9A /* Info.plist */, 13B07FB61A68108700A75B9A /* Info.plist */,
13B07FB11A68108700A75B9A /* LaunchScreen.xib */, 13B07FB11A68108700A75B9A /* LaunchScreen.xib */,
13B07FB71A68108700A75B9A /* main.m */, 13B07FB71A68108700A75B9A /* main.m */,
@ -1099,7 +1099,6 @@
9ED2F4611D9D579900B36508 /* SF-UI-Text-Bold.otf in Resources */, 9ED2F4611D9D579900B36508 /* SF-UI-Text-Bold.otf in Resources */,
9ED2F45E1D9D535A00B36508 /* SF-UI-Text-Regular.otf in Resources */, 9ED2F45E1D9D535A00B36508 /* SF-UI-Text-Regular.otf in Resources */,
9ED2F45F1D9D535A00B36508 /* SF-UI-Text-Medium.otf in Resources */, 9ED2F45F1D9D535A00B36508 /* SF-UI-Text-Medium.otf in Resources */,
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */, 13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
2028DFFA1D4275B600227DCD /* SF-UI-Display-Regular.otf in Resources */, 2028DFFA1D4275B600227DCD /* SF-UI-Display-Regular.otf in Resources */,
2028DFF91D4275B600227DCD /* SF-UI-Display-Medium.otf in Resources */, 2028DFF91D4275B600227DCD /* SF-UI-Display-Medium.otf in Resources */,
@ -1109,6 +1108,7 @@
82E689BAF9FB43C8AC6FF1CA /* EvilIcons.ttf in Resources */, 82E689BAF9FB43C8AC6FF1CA /* EvilIcons.ttf in Resources */,
C3EE9AEA6F77464588FBAA64 /* FontAwesome.ttf in Resources */, C3EE9AEA6F77464588FBAA64 /* FontAwesome.ttf in Resources */,
A6AF670051B842249D520C7B /* Foundation.ttf in Resources */, A6AF670051B842249D520C7B /* Foundation.ttf in Resources */,
B2F2D1BC1D9D531B00B7B453 /* Images.xcassets in Resources */,
AE97D4B08C9F4821B8E9C50B /* Ionicons.ttf in Resources */, AE97D4B08C9F4821B8E9C50B /* Ionicons.ttf in Resources */,
0F942CF509F74CCDB5CB35B0 /* MaterialIcons.ttf in Resources */, 0F942CF509F74CCDB5CB35B0 /* MaterialIcons.ttf in Resources */,
EF2B5857B4A34E0C9707FB3F /* Octicons.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 touchable-highlight
get-dimensions]] get-dimensions]]
[status-im.components.status-bar :refer [status-bar]] [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.text-field.view :refer [text-field]]
[status-im.components.styles :refer [color-purple [status-im.components.styles :refer [color-purple
color-white color-white
icon-search icon-search
icon-back icon-back
icon-qr icon-qr
toolbar-background1
toolbar-title-container
toolbar-title-text
button-input-container
button-input button-input
white-form-text-input]] white-form-text-input]]
[status-im.qr-scanner.views.scan-button :refer [scan-button]] [status-im.qr-scanner.views.scan-button :refer [scan-button]]
@ -75,8 +73,8 @@
:style icon-back} :style icon-back}
:handler #(dispatch [:navigate-back])} :handler #(dispatch [:navigate-back])}
:custom-content [toolbar-title] :custom-content [toolbar-title]
:action {:image {:style icon-search} :actions [{:image {:style icon-search}
:handler #()}}] :handler #()}]}]
[view st/form-container [view st/form-container
[view st/form-container-inner [view st/form-container-inner
[address-input (or address "")] [address-input (or address "")]

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

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

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

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

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

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

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

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

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

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

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

@ -39,4 +39,8 @@
(def platform-specific (def platform-specific
{:component-styles component-styles {:component-styles component-styles
:fonts fonts :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} _] [{:keys [loaded-chats] :as db} _]
(let [chats (->> loaded-chats (let [chats (->> loaded-chats
(map (fn [{:keys [chat-id] :as chat}] (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 {})) (into {}))
ids (set (keys chats))] ids (set (keys chats))]
@ -275,7 +276,8 @@
db' (assoc db :current-chat-id chat-id)] db' (assoc db :current-chat-id chat-id)]
(dispatch [:load-requests! chat-id]) (dispatch [:load-requests! chat-id])
(dispatch [:load-commands! chat-id]) (dispatch [:load-commands! chat-id])
(if (seq messages) (if (and (seq messages)
(not= (count messages) 1))
db' db'
(-> db' (-> db'
load-messages! load-messages!

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

@ -38,7 +38,8 @@
message' (assoc (->> message message' (assoc (->> message
(cu/check-author-direction previous-message) (cu/check-author-direction previous-message)
(check-preview)) (check-preview))
:chat-id chat-id')] :chat-id chat-id'
:timestamp (.getTime (js/Date.)))]
(store-message message') (store-message message')
(when-not exists? (when-not exists?
(dispatch [:add-chat chat-id' (when group-chat? {:group-chat true})])) (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.datetime :as time]
[status-im.utils.platform :refer [platform-specific]] [status-im.utils.platform :refer [platform-specific]]
[status-im.components.invertible-scroll-view :refer [invertible-scroll-view]] [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.message :refer [chat-message]]
[status-im.chat.views.suggestions :refer [suggestion-container]] [status-im.chat.views.suggestions :refer [suggestion-container]]
[status-im.chat.views.response :refer [response-view]] [status-im.chat.views.response :refer [response-view]]
@ -107,7 +107,7 @@
[text {:style st/members [text {:style st/members
:font :medium} :font :medium}
(let [cnt (inc (count @contacts))] (let [cnt (inc (count @contacts))]
(label-pluralize cnt :t/members))]] (label-pluralize cnt :t/members-active))]]
[text {:style st/last-activity [text {:style st/last-activity
:font :default} :font :default}
(online-text @contact @chat-id)])]))) (online-text @contact @chat-id)])])))

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

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

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

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

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

@ -1,64 +1,83 @@
(ns status-im.chats-list.styles (ns status-im.chats-list.styles
(:require [status-im.components.styles :refer [color-white (:require [status-im.components.styles :refer [color-white
color-light-gray
color-separator
color-blue color-blue
online-color
text1-color text1-color
text2-color text2-color
new-messages-count-color]] new-messages-count-color]]
[status-im.components.tabs.styles :refer [tabs-height]])) [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 (def chat-container
{:flexDirection :row {:flex-direction :row
:paddingVertical 15 :background-color color-white
:paddingHorizontal 16 :height 94})
:height 90})
(def chat-icon-container (def chat-icon-container
{:marginTop -2 {:margin-top -2
:marginLeft -4 :margin-left -4
:width 48 :padding 16
:height 48}) :width 48
:height 48})
(def item-container (def item-container
{:flexDirection :column {:flex-direction :column
:marginLeft 12 :margin-left 30
:flex 1}) :padding-top 16
:padding-right 16
:flex 1})
(def name-view (def name-view
{:flexDirection :row}) {:flex-direction :row})
(def name-text (def name-text
{:marginTop -2.5 {:color text1-color
:color text1-color :font-size 14})
:fontSize 14})
(def group-icon (def group-icon
{:marginTop 4 {:margin-top 5
:marginLeft 8 :margin-left 8
:width 14 :width 14
:height 9}) :height 9})
(def memebers-text (def memebers-text
{:marginTop -0.5 {:marginTop 2
:marginLeft 4 :marginLeft 4
:fontSize 12 :fontSize 12
:color text2-color}) :color text2-color})
(def last-message-text (def last-message-text
{:marginTop 7 {:margin-top 5
:marginRight 40 :margin-right 40
:color text1-color :color text1-color
:fontSize 14 :fontSize 14
:lineHeight 20}) :lineHeight 20})
(def last-message-text-no-messages
(merge last-message-text
{:color text2-color}))
(def status-container (def status-container
{:flexDirection :row {:flex-direction :row
:position :absolute :top 18
:top 0 :right 16})
:right 0})
(def status-image (def status-image
{:marginTop 6 {:marginTop 4
:width 9 :width 9
:height 7}) :height 7})
@ -69,44 +88,43 @@
(def new-messages-container (def new-messages-container
{:position :absolute {:position :absolute
:top 36 :top 54
:right 0 :right 16
:width 24 :width 24
:height 24 :height 24
:backgroundColor new-messages-count-color :backgroundColor new-messages-count-color
:borderRadius 50}) :borderRadius 50})
(def new-messages-text (def new-messages-text
{:top 4 {:top 5
:left 0 :left 0
:fontSize 10 :fontSize 10
:color color-blue :color color-blue
:textAlign :center}) :textAlign :center})
(def hamburger-icon (def hamburger-icon
{:width 16 {:width 16
:height 12}) :height 12})
(def search-icon (def toolbar-icon
{:width 17 {:width 17
:height 17}) :height 17})
(def chats-container (def chats-container
{:flex 1 {:flex 1})
:backgroundColor :white})
(def list-container (def list-container
{:backgroundColor :white}) {:background-color color-light-gray})
(def create-icon (def create-icon
{:fontSize 20 {:fontSize 20
:height 22 :height 22
:color :white}) :color color-white})
(def person-stalker-icon (def person-stalker-icon
{:fontSize 20 {:fontSize 20
:height 22 :height 22
:color :white}) :color color-white})
(defn action-buttons-container [animation? offset-y] (defn action-buttons-container [animation? offset-y]
;; todo fix overlaying of parent view ;; 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]])) [status-im.chats-list.views.inner-item :refer [chat-list-item-inner-view]]))
(defn chat-list-item [[chat-id chat]] (defn chat-list-item [[chat-id chat]]
[touchable-highlight [touchable-highlight {:on-press #(dispatch [:navigate-to :chat chat-id])}
{:on-press #(dispatch [:navigate-to :chat chat-id])} [view
[view [chat-list-item-inner-view (merge chat [chat-list-item-inner-view (merge chat
;; TODO stub data ;; TODO stub data
{:chat-id chat-id {:chat-id chat-id
:new-messages-count 3 :new-messages-count 3
:online true})]]]) :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.components.chat-icon.screen :refer [chat-icon-view-chat-list]]
[status-im.chats-list.styles :as st] [status-im.chats-list.styles :as st]
[status-im.utils.utils :refer [truncate-str]] [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.utils.datetime :as time]
[status-im.constants :refer [console-chat-id]]
[clojure.string :as str])) [clojure.string :as str]))
(defview chat-list-item-inner-view (defn message-content [{:keys [content] :as message}]
[{:keys [chat-id name color new-messages-count (let [content (if message
online group-chat contacts] :as chat}] (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]] [unviewed-messages [:unviewed-messages-count chat-id]]
(let [last-message (first (:messages chat)) (when (pos? unviewed-messages)
name (or name chat-id)] [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-container
[view st/chat-icon-container [view st/chat-icon-container
[chat-icon-view-chat-list chat-id group-chat name color online]] [chat-icon-view-chat-list chat-id group-chat name color online]]
[view st/item-container [view st/item-container
[view st/name-view [view st/name-view
[text {:style st/name-text} [text {:style st/name-text
:font :medium}
(if (str/blank? name) (if (str/blank? name)
(label :t/user-anonymous) (label :t/user-anonymous)
(truncate-str name 30))] (truncate-str name 30))]
@ -27,29 +69,11 @@
[icon :group st/group-icon]) [icon :group st/group-icon])
(when group-chat (when group-chat
[text {:style st/memebers-text} [text {:style st/memebers-text}
(if (< 0 (count contacts)) (label-pluralize (inc (count contacts)) :t/members)])]
(str (inc (count contacts)) " members") [message-content last-message]]
"1 member")])]
[text {:style st/last-message-text
:numberOfLines 2}
(when last-message
(let [content (:content last-message)]
(if (string? content)
content
(:content content))))]]
[view [view
(when last-message (when last-message
[view st/status-container [view st/status-container
;; TODO currently there is not :delivery-status in last-message [message-status chat last-message]
(when (:delivery-status last-message) [message-timestamp last-message]])
[image {:source (if (= (keyword (:delivery-status last-message)) :seen) [unviewed-indicator chat-id]]]))
{: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]])]]))

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

@ -1,12 +1,4 @@
(ns status-im.components.carousel.styles (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]]))
(def scroll-view-container (def scroll-view-container
{:flex 1}) {:flex 1})

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

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

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

@ -12,6 +12,7 @@
(def color-light-blue-transparent "#bbc4cb32") (def color-light-blue-transparent "#bbc4cb32")
(def color-light-gray "#EEF2F5") (def color-light-gray "#EEF2F5")
(def color-red "red") (def color-red "red")
(def color-separator "#D6D6D6")
(def text1-color color-black) (def text1-color color-black)
(def text1-disabled-color "#555555") (def text1-disabled-color "#555555")
@ -24,12 +25,8 @@
(def chat-background color-light-gray) (def chat-background color-light-gray)
(def selected-message-color "#E4E9ED") (def selected-message-color "#E4E9ED")
(def separator-color "#0000001f") (def separator-color "#0000001f")
(def toolbar-background1 color-white)
(def toolbar-background2 color-light-gray)
(def default-chat-color color-purple) (def default-chat-color color-purple)
(def toolbar-height 56)
(def flex (def flex
{:flex 1}) {:flex 1})
@ -71,29 +68,14 @@
:height 18}) :height 18})
(def icon-close (def icon-close
{:width 12 {:width 12
:height 12}) :height 12})
(def form-text-input
{:marginLeft -4
:fontSize 14
:color text1-color})
(def white-form-text-input (def white-form-text-input
{:marginLeft -4 {:marginLeft -4
:fontSize 14 :fontSize 14
:color color-white}) :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 (def button-input-container
{:flex 1 {:flex 1
:flexDirection :row}) :flexDirection :row})
@ -101,6 +83,3 @@
(def button-input (def button-input
{:flex 1 {:flex 1
:flexDirection :column}) :flexDirection :column})
(def toolbar-gradient
{:height 4})

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

@ -1,12 +1,5 @@
(ns status-im.components.tabs.styles (ns status-im.components.tabs.styles
(:require [status-im.components.styles :refer [color-white (:require [status-im.components.styles :refer [color-white]]))
chat-background
online-color
selected-message-color
separator-color
text1-color
text2-color
toolbar-background1]]))
(def tabs-height 60) (def tabs-height 60)
(def tab-height 56) (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]] action-button-item]]
[status-im.contacts.views.contact :refer [contact-extended-view on-press]] [status-im.contacts.views.contact :refer [contact-extended-view on-press]]
[status-im.components.status-bar :refer [status-bar]] [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.drawer.view :refer [open-drawer]]
[status-im.components.icons.custom-icons :refer [ion-icon]] [status-im.components.icons.custom-icons :refer [ion-icon]]
[status-im.components.styles :refer [color-blue [status-im.components.styles :refer [color-blue
hamburger-icon hamburger-icon
icon-search icon-search
create-icon create-icon]]
toolbar-background2]]
[status-im.components.tabs.bottom-gradient :refer [bottom-gradient]] [status-im.components.tabs.bottom-gradient :refer [bottom-gradient]]
[status-im.contacts.styles :as st] [status-im.contacts.styles :as st]
[status-im.i18n :refer [label]] [status-im.i18n :refer [label]]
[status-im.components.styles :as cst])) [status-im.utils.platform :refer [platform-specific]]))
(defn contact-list-toolbar [] (defn contact-list-toolbar []
[toolbar {:nav-action {:image {:source {:uri :icon_hamburger} (let [new-contact? (get-in platform-specific [:contacts :new-contact-in-toolbar?])
:style hamburger-icon} actions (cond->> [{:image {:source {:uri :icon_search}
:handler open-drawer} :style icon-search}
:title (label :t/contacts) :handler (fn [])}]
:background-color toolbar-background2 new-contact?
:style {:elevation 0} (into [{:image {:source {:uri :icon_add}
:action {:image {:source {:uri :icon_search} :style icon-search}
:style icon-search} :handler #(dispatch [:navigate-to :new-contact])}]))]
:handler (fn [])}}]) [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) (def contacts-limit 10)
@ -68,6 +74,18 @@
[view [view
[text {:style st/show-all-text} (label :t/show-all)]]]])]) [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 [] (defn contact-list []
(let [contacts (subscribe [:get-added-contacts-with-limit contacts-limit]) (let [contacts (subscribe [:get-added-contacts-with-limit contacts-limit])
contacts-count (subscribe [:added-contacts-count]) contacts-count (subscribe [:added-contacts-count])
@ -88,26 +106,18 @@
[contact-group [contact-group
@contacts @contacts
@contacts-count @contacts-count
(label :t/contacs-group-dapps) (label :t/contacts-group-dapps)
:dapps true :dapps true
@click-handler] @click-handler]
[contact-group [contact-group
@contacts @contacts
@contacts-count @contacts-count
(label :t/contacs-group-people) (label :t/contacts-group-people)
:people false :people false
@click-handler]] @click-handler]]
[view st/empty-contact-groups [view st/empty-contact-groups
[react/icon :group_big st/empty-contacts-icon] [react/icon :group_big st/empty-contacts-icon]
[text {:style st/empty-contacts-text} (label :t/no-contacts)]]) [text {:style st/empty-contacts-text} (label :t/no-contacts)]])
[view st/buttons-container (when (get-in platform-specific [:contacts :action-button?])
[action-button {:buttonColor color-blue [contacts-action-button])
: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}]]]]
[bottom-gradient]]))) [bottom-gradient]])))

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

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

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

@ -9,8 +9,12 @@
(reaction @contacts)))) (reaction @contacts))))
(defn sort-contacts [contacts] (defn sort-contacts [contacts]
(sort-by :name #(compare (clojure.string/lower-case %1) (->> (vals contacts)
(clojure.string/lower-case %2)) (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 (register-sub :all-added-contacts
(fn [db _] (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.styles :as st]
[status-im.contacts.views.contact-inner :refer [contact-inner-view]])) [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] (defn on-press [whisper-identity]
#(dispatch [:start-chat 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]] [chat [:get-chat whisper-identity]]
[touchable-highlight [touchable-highlight
{:onPress (on-press whisper-identity)} {:onPress (on-press whisper-identity)}
[view st/contact-container [view st/contact-container
[letter-view letter]
[contact-inner-view contact]]]) [contact-inner-view contact]]])
(defview contact-extended-view [{:keys [whisper-identity] :as contact} info click-handler more-click-handler] (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 touchable-highlight
list-view list-view
list-item]] 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.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.drawer.view :refer [drawer-view open-drawer]]
[status-im.components.styles :refer [color-blue [status-im.components.styles :refer [icon-search]]
hamburger-icon
icon-search
create-icon
toolbar-background1]]
[status-im.contacts.styles :as st] [status-im.contacts.styles :as st]
[status-im.utils.listview :as lw] [status-im.utils.listview :as lw]
[status-im.i18n :refer [label]] [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] (defn render-row [click-handler]
(fn [row _ _] (fn [row _ _]
(list-item [contact-with-letter-view row (list-item
(or click-handler [contact-view row
(let [whisper-identity (:whisper-identity row)] (or click-handler
(on-press whisper-identity)))]))) (let [whisper-identity (:whisper-identity row)]
(on-press whisper-identity)))])))
(defview contact-list-toolbar [] (defview contact-list-toolbar []
[group [:get :contacts-group]] [group [:get :contacts-group]]
[view [view
[status-bar] [status-bar]
[toolbar {:title (label (if (= group :dapps) [toolbar {:title (label (if (= group :dapps)
:t/contacs-group-dapps :t/contacts-group-dapps
:t/contacs-group-people)) :t/contacts-group-new-chat))
:background-color toolbar-background1 :background-color toolbar-background1
:action {:image {:source {:uri :icon_search} :style (get-in platform-specific [:component-styles :toolbar])
:style icon-search} :actions [{:image {:source {:uri :icon_search}
:handler (fn [])}}]]) :style icon-search}
:handler (fn [])}]}]])
(defview contact-list [] (defview contact-list []
[contacts [:contacts-with-letters] [contacts [:contacts-with-letters]
group [:get :contacts-group]
click-handler [:get :contacts-click-handler]] 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 [drawer-view
[view st/contacts-list-container [view st/contacts-list-container
[contact-list-toolbar] [contact-list-toolbar]
;; todo what if there is no contacts, should we show some information ;; todo add stub
;; about this?
(when contacts (when contacts
[list-view {:dataSource (lw/to-datasource contacts) [list-view {:dataSource (lw/to-datasource contacts)
:enableEmptySections true :enableEmptySections true
:renderRow (render-row click-handler) :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}])]])) :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.components.text-field.view :refer [text-field]]
[status-im.utils.identicon :refer [identicon]] [status-im.utils.identicon :refer [identicon]]
[status-im.components.status-bar :refer [status-bar]] [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.utils.utils :refer [log http-post]]
[status-im.components.styles :refer [color-purple [status-im.components.styles :refer [icon-search
color-white
icon-search
icon-back icon-back
icon-qr
toolbar-background1
toolbar-title-container
toolbar-title-text
button-input-container button-input-container
button-input button-input]]
form-text-input]]
[status-im.qr-scanner.views.scan-button :refer [scan-button]] [status-im.qr-scanner.views.scan-button :refer [scan-button]]
[status-im.i18n :refer [label]] [status-im.i18n :refer [label]]
[cljs.spec :as s] [cljs.spec :as s]
@ -68,14 +63,14 @@
:else error)) :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)] (let [error-message (validation-error-message new-contact-identity account error)]
{:image {:source {:uri (if (str/blank? error-message) [{:image {:source {:uri (if (str/blank? error-message)
:icon_ok_blue :icon_ok_blue
:icon_ok_disabled)} :icon_ok_disabled)}
:style icon-search} :style icon-search}
:handler #(when (str/blank? error-message) :handler #(when (str/blank? error-message)
(on-add-contact new-contact-identity))})) (on-add-contact new-contact-identity))}]))
(defview contact-whisper-id-input [whisper-identity error] (defview contact-whisper-id-input [whisper-identity error]
[current-account [:get-current-account]] [current-account [:get-current-account]]
@ -108,7 +103,7 @@
:style icon-back} :style icon-back}
:handler #(dispatch [:navigate-back])} :handler #(dispatch [:navigate-back])}
:custom-content toolbar-title :custom-content toolbar-title
:action (toolbar-action new-contact-identity account error)}]] :actions (toolbar-actions new-contact-identity accounts error)}]]
[view st/form-container [view st/form-container
[contact-whisper-id-input new-contact-identity error]] [contact-whisper-id-input new-contact-identity error]]
[view st/address-explication-container [view st/address-explication-container

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

@ -7,7 +7,7 @@
scroll-view scroll-view
text text
text-input]] 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.components.drawer.view :refer [open-drawer]]
[status-im.discovery.views.popular :refer [discovery-popular]] [status-im.discovery.views.popular :refer [discovery-popular]]
[status-im.discovery.views.recent :refer [discovery-recent]] [status-im.discovery.views.recent :refer [discovery-recent]]
@ -45,9 +45,9 @@
:style st/hamburger-icon} :style st/hamburger-icon}
:handler open-drawer} :handler open-drawer}
:custom-content [title-content show-search?] :custom-content [title-content show-search?]
:action {:image {:source {:uri :icon_search} :actions [{:image {:source {:uri :icon_search}
:style st/search-icon} :style st/search-icon}
:handler #(toogle-search show-search?)}}]) :handler #(toogle-search show-search?)}]}])
(defview discovery [] (defview discovery []
[show-search? [:get ::show-search?] [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]] (:require [re-frame.core :refer [subscribe dispatch]]
[status-im.utils.listview :refer [to-datasource]] [status-im.utils.listview :refer [to-datasource]]
[status-im.components.react :refer [view text list-view list-item]] [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.views.discovery-list-item :refer [discovery-list-item]]
[status-im.discovery.styles :as st])) [status-im.discovery.styles :as st]))
@ -29,9 +29,9 @@
:style st/icon-back} :style st/icon-back}
:handler #(dispatch [:navigate-back])} :handler #(dispatch [:navigate-back])}
:custom-content (title-content tags) :custom-content (title-content tags)
:action {:image {:source {:uri :icon_search} :actions [{:image {:source {:uri :icon_search}
:style st/icon-search} :style st/icon-search}
:handler (fn [])}}] :handler (fn [])}]}]
[list-view {:dataSource datasource [list-view {:dataSource datasource
:renderRow (fn [row _ _] :renderRow (fn [row _ _]

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

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

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

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

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

@ -12,7 +12,7 @@
scroll-view scroll-view
touchable-highlight]] touchable-highlight]]
[status-im.components.status-bar :refer [status-bar]] [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.components.chat-icon.screen :refer [chat-icon-view-action]]
[status-im.group-settings.styles.group-settings :as st] [status-im.group-settings.styles.group-settings :as st]
[status-im.group-settings.views.member :refer [member-view]] [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 (ns status-im.group-settings.styles.group-settings
(:require [status-im.components.styles :refer [color-white (:require [status-im.components.styles :refer [color-white
color-purple color-purple
chat-background
online-color
selected-message-color
separator-color separator-color
text1-color text1-color
text2-color text2-color]]))
toolbar-background1]]))
(def modal-container (def modal-container
{:flex 1 {:flex 1

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

@ -1,6 +1,7 @@
(ns status-im.ios.platform (ns status-im.ios.platform
(:require [status-im.components.styles :as styles] (: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 (def component-styles
{:status-bar {:default {:height 20 {:status-bar {:default {:height 20
@ -8,7 +9,7 @@
:color styles/color-white} :color styles/color-white}
:main {:height 20 :main {:height 20
:bar-style "default" :bar-style "default"
:color styles/toolbar-background2} :color toolbar-background2}
:transparent {:height 20 :transparent {:height 20
:bar-style "light-content" :bar-style "light-content"
:color styles/color-transparent}} :color styles/color-transparent}}
@ -43,5 +44,9 @@
(def platform-specific (def platform-specific
{:component-styles component-styles {:component-styles component-styles
:fonts fonts :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.text-field.view :refer [text-field]]
[status-im.components.styles :refer [color-purple]] [status-im.components.styles :refer [color-purple]]
[status-im.components.status-bar :refer [status-bar]] [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.utils.listview :refer [to-datasource]]
[status-im.new-group.views.contact :refer [new-group-contact]] [status-im.new-group.views.contact :refer [new-group-contact]]
[status-im.new-group.styles :as st] [status-im.new-group.styles :as st]
@ -27,11 +27,11 @@
[view [view
[status-bar] [status-bar]
[toolbar [toolbar
{:title (label :t/new-group-chat) {:title (label :t/new-group-chat)
:action {:image {:source res/v ;; {:uri "icon_search"} :actions [{:image {:source res/v ;; {:uri "icon_search"}
:style (st/toolbar-icon create-btn-enabled?)} :style (st/toolbar-icon create-btn-enabled?)}
:handler (when create-btn-enabled? :handler (when create-btn-enabled?
#(dispatch [:create-new-group new-chat-name]))}}]])) #(dispatch [:create-new-group new-chat-name]))}]}]]))
(defview group-name-input [] (defview group-name-input []
[new-chat-name [:get :new-chat-name]] [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 (:require [status-im.components.styles :refer [color-white
color-blue color-blue
text1-color text1-color
text2-color text2-color]]))
toolbar-background1]]))
(defn toolbar-icon [enabled?] (defn toolbar-icon [enabled?]
{:width 20 {:width 20

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

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

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

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

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

@ -8,12 +8,11 @@
[status-im.components.camera :refer [camera [status-im.components.camera :refer [camera
aspects aspects
capture-targets]] capture-targets]]
[status-im.components.styles :refer [toolbar-background1 [status-im.components.styles :refer [icon-back]]
icon-search
icon-back]]
[status-im.components.icons.custom-icons :refer [ion-icon]] [status-im.components.icons.custom-icons :refer [ion-icon]]
[status-im.components.status-bar :refer [status-bar]] [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.utils.image-processing :refer [img->base64]]
[status-im.profile.photo-capture.styles :as st] [status-im.profile.photo-capture.styles :as st]
[status-im.i18n :refer [label]] [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)) status-path (if (and group? (not= status :sent))
[:message-user-statuses message-id' from] [:message-user-statuses message-id' from]
[:message-statuses message-id']) [:message-statuses message-id'])
current-status (get-in db status-path)] {current-status :status} (get-in db status-path)]
(if-not (= :seen current-status) (if-not (= :seen current-status)
(assoc-in db status-path {:whisper-identity from (assoc-in db status-path {:whisper-identity from
:status status}) :status status})

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

@ -4,10 +4,10 @@
[status-im.components.react :refer [view [status-im.components.react :refer [view
image]] image]]
[status-im.components.camera :refer [camera]] [status-im.components.camera :refer [camera]]
[status-im.components.styles :refer [toolbar-background1 [status-im.components.styles :refer [icon-search]]
icon-search]]
[status-im.components.status-bar :refer [status-bar]] [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.qr-scanner.styles :as st]
[status-im.utils.types :refer [json->clj]] [status-im.utils.types :refer [json->clj]]
[status-im.components.styles :as cst] [status-im.components.styles :as cst]
@ -18,9 +18,9 @@
[status-bar] [status-bar]
[toolbar {:title title [toolbar {:title title
:background-color toolbar-background1 :background-color toolbar-background1
:action {:image {:source {:uri :icon_lock_white} :actions [{:image {:source {:uri :icon_lock_white}
:style icon-search} :style icon-search}
:handler #()}}]]) :handler #()}]}]])
(defview qr-scanner [] (defview qr-scanner []
[identifier [:get :current-qr-context]] [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 (ns status-im.qr-scanner.styles
(:require [status-im.components.styles :refer [toolbar-height (:require [status-im.components.styles :refer [color-white]]
color-white]])) [status-im.components.toolbar.styles :refer [toolbar-height]]))
(def barcode-scanner-container (def barcode-scanner-container
{:flex 1 {:flex 1

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

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

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

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

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

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

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

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

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

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