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

Merge branch 'develop' into feature/#123

This commit is contained in:
Roman Volosovskyi 2016-06-22 10:53:27 +03:00
parent 77a53cf040 5271fa7101
commit bd3eea73fd
37 changed files with 769 additions and 359 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.re-natal
View File

@ -19,7 +19,8 @@
"react-native-android-sms-listener", "react-native-android-sms-listener",
"react-native-status", "react-native-status",
"react-native-camera", "react-native-camera",
"react-native-qrcode" "react-native-qrcode",
"identicon.js"
], ],
"imageDirs": [ "imageDirs": [
"images" "images"

5
android/app/src/main/AndroidManifest.xml
View File

@ -22,6 +22,11 @@
<category android:name="android.intent.category.LAUNCHER" /> <category android:name="android.intent.category.LAUNCHER" />
</intent-filter> </intent-filter>
</activity> </activity>
<service
android:name=".GethService"
android:enabled="true"
android:exported="true"
android:process=":geth_process"/>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" /> <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application> </application>

136
android/app/src/main/java/com/statusim/GethService.java Normal file
View File

@ -0,0 +1,136 @@
package com.statusim;
import android.app.Service;
import android.content.Intent;
import android.os.Handler;
import android.os.AsyncTask;
import android.os.IBinder;
import android.os.Looper;
import android.os.Message;
import android.os.Messenger;
import android.support.annotation.Nullable;
import android.util.Log;
import android.os.Environment;
import java.lang.ref.WeakReference;
import com.github.ethereum.go_ethereum.cmd.Geth;
import java.io.File;
public class GethService extends Service {
private static final String TAG = "GethService";
private static boolean isGethStarted = false;
private static boolean isGethInitialized = false;
private final Handler handler = new Handler();
static class IncomingHandler extends Handler {
private final WeakReference<GethService> service;
IncomingHandler(GethService service) {
this.service = new WeakReference<GethService>(service);
}
@Override
public void handleMessage(Message message) {
GethService service = this.service.get();
if (service != null) {
if (!service.handleMessage(message)) {
super.handleMessage(message);
}
}
}
}
final Messenger serviceMessenger = new Messenger(new IncomingHandler(this));
protected class StartTask extends AsyncTask<Void, Void, Void> {
public StartTask() {
}
protected Void doInBackground(Void... args) {
startGeth();
return null;
}
protected void onPostExecute(Void results) {
onGethStarted();
}
}
protected void onGethStarted() {
Log.d(TAG, "Geth Service started");
isGethStarted = true;
}
protected void startGeth() {
Log.d(TAG, "Starting background Geth Service");
File extStore = Environment.getExternalStorageDirectory();
final String dataFolder = extStore.exists() ?
extStore.getAbsolutePath() :
getApplicationInfo().dataDir;
final Runnable addPeer = new Runnable() {
public void run() {
Log.w("Geth", "adding peer");
Geth.run("--exec admin.addPeer(\"enode://e2f28126720452aa82f7d3083e49e6b3945502cb94d9750a15e27ee310eed6991618199f878e5fbc7dfa0e20f0af9554b41f491dc8f1dbae8f0f2d37a3a613aa@139.162.13.89:55555\") attach http://localhost:8545");
}
};
new Thread(new Runnable() {
public void run() {
Geth.run("--shh --ipcdisable --nodiscover --rpc --rpcapi db,eth,net,web3,shh,admin --fast --datadir=" + dataFolder);
}
}).start();
handler.postDelayed(addPeer, 5000);
}
@Nullable
@Override
public IBinder onBind(Intent intent) {
return serviceMessenger.getBinder();
}
@Override
public void onCreate() {
super.onCreate();
System.loadLibrary("gethraw");
System.loadLibrary("geth");
if (!isGethInitialized) {
isGethInitialized = true;
new StartTask().execute();
}
}
@Override
public void onDestroy() {
super.onDestroy();
//TODO: stop geth
isGethStarted = false;
isGethInitialized = false;
Log.d(TAG, "Geth Service stopped !");
}
@Override
public int onStartCommand(Intent intent, int flags, int startId) {
return Service.START_STICKY;
}
protected boolean handleMessage(Message message) {
return false;
}
public static boolean isRunning() {
return isGethInitialized;
}
}

109
android/app/src/main/java/com/statusim/MainActivity.java
View File

@ -7,17 +7,24 @@ import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage; import com.facebook.react.shell.MainReactPackage;
import com.rt2zz.reactnativecontacts.ReactNativeContacts; import com.rt2zz.reactnativecontacts.ReactNativeContacts;
import android.os.Bundle; import android.os.Bundle;
import android.os.Environment; import android.os.Handler;
import android.os.IBinder;
import android.os.Message;
import android.os.Messenger;
import android.app.AlertDialog; import android.app.AlertDialog;
import android.content.DialogInterface; import android.content.DialogInterface;
import android.content.DialogInterface.OnClickListener; import android.content.DialogInterface.OnClickListener;
import android.content.DialogInterface.OnCancelListener; import android.content.DialogInterface.OnCancelListener;
import com.github.ethereum.go_ethereum.cmd.Geth; import android.content.ComponentName;
import android.content.ServiceConnection;
import android.content.Intent;
import android.content.Context;
import com.bitgo.randombytes.RandomBytesPackage; import com.bitgo.randombytes.RandomBytesPackage;
import com.BV.LinearGradient.LinearGradientPackage; import com.BV.LinearGradient.LinearGradientPackage;
import com.centaurwarchief.smslistener.SmsListener; import com.centaurwarchief.smslistener.SmsListener;
import android.os.Handler;
import android.util.Log; import android.util.Log;
import java.util.Arrays; import java.util.Arrays;
@ -33,45 +40,69 @@ import io.realm.react.RealmReactPackage;
public class MainActivity extends ReactActivity { public class MainActivity extends ReactActivity {
final Handler handler = new Handler(); private static final String TAG = "MainActivity";
/**
* Incoming message handler. Calls to its binder are sequential!
*/
protected final IncomingHandler handler = new IncomingHandler();
/** Flag indicating if the service is bound. */
protected boolean isBound;
/** Sends messages to the service. */
protected Messenger serviceMessenger = null;
/** Receives messages from the service. */
protected Messenger clientMessenger = new Messenger(handler);
class IncomingHandler extends Handler {
@Override
public void handleMessage(Message message) {
boolean isClaimed = false;
Log.d(TAG, "!!!!!!!!!!!!!! Received Service Message !!!!!!!!!!!!!!");
super.handleMessage(message);
}
}
protected ServiceConnection serviceConnection = new ServiceConnection() {
public void onServiceConnected(ComponentName className, IBinder service) {
// This is called when the connection with the service has been
// established, giving us the object we can use to
// interact with the service. We are communicating with the
// service using a Messenger, so here we get a client-side
// representation of that from the raw IBinder object.
serviceMessenger = new Messenger(service);
isBound = true;
onConnected();
}
public void onServiceDisconnected(ComponentName className) {
// This is called when the connection with the service has been
// unexpectedly disconnected -- that is, its process crashed.
serviceMessenger = null;
isBound = false;
Log.d(TAG, "!!!!!!!!!!!!!! Geth Service Disconnected !!!!!!!!!!!!!!");
}
};
protected void onConnected() {
Log.d(TAG, "!!!!!!!!!!!!!! Geth Service Connected !!!!!!!!!!!!!!");
}
protected void startStatus() { protected void startStatus() {
// Required because of crazy APN settings redirecting localhost (found in GB) // Required because of crazy APN settings redirecting localhost (found in GB)
Properties properties = System.getProperties(); Properties properties = System.getProperties();
properties.setProperty("http.nonProxyHosts", "localhost|127.0.0.1"); properties.setProperty("http.nonProxyHosts", "localhost|127.0.0.1");
properties.setProperty("https.nonProxyHosts", "localhost|127.0.0.1"); properties.setProperty("https.nonProxyHosts", "localhost|127.0.0.1");
File extStore = Environment.getExternalStorageDirectory();
final String dataFolder = extStore.exists() ?
extStore.getAbsolutePath() :
getApplicationInfo().dataDir;
// Launch!
final Runnable addPeer = new Runnable() {
public void run() {
Log.w("Geth", "adding peer");
Geth.run("--exec admin.addPeer(\"enode://e2f28126720452aa82f7d3083e49e6b3945502cb94d9750a15e27ee310eed6991618199f878e5fbc7dfa0e20f0af9554b41f491dc8f1dbae8f0f2d37a3a613aa@139.162.13.89:55555\") attach http://localhost:8545");
}
};
new Thread(new Runnable() {
public void run() {
Geth.run("--shh --ipcdisable --nodiscover --rpc --rpcapi db,eth,net,web3,shh,admin --fast --datadir=" + dataFolder);
}
}).start();
handler.postDelayed(addPeer, 5000);
} }
@Override @Override
protected void onCreate(Bundle savedInstanceState) { protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState); super.onCreate(savedInstanceState);
// Required for android-16 (???)
// Crash if put in startStatus() ?
System.loadLibrary("gethraw");
System.loadLibrary("geth");
if(!RootUtil.isDeviceRooted()) { if(!RootUtil.isDeviceRooted()) {
startStatus(); startStatus();
} else { } else {
@ -97,9 +128,27 @@ public class MainActivity extends ReactActivity {
}).create(); }).create();
dialog.show(); dialog.show();
} }
Intent intent = new Intent(this, GethService.class);
if (!GethService.isRunning()) {
startService(intent);
}
if (serviceConnection != null && GethService.isRunning()) {
bindService(intent, serviceConnection, Context.BIND_AUTO_CREATE);
}
} }
@Override
protected void onDestroy() {
super.onDestroy();
try {
unbindService(serviceConnection);
}
catch (Throwable t) {
Log.e(TAG, "Failed to unbind from the geth service", t);
}
}
/** /**
* Returns the name of the main component registered from JavaScript. * Returns the name of the main component registered from JavaScript.
* This is used to schedule rendering of the component. * This is used to schedule rendering of the component.

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
android/app/src/main/res/drawable-mdpi/icon_group_big.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
android/app/src/main/res/drawable-xxxhdpi/icon_group_big.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

2
android/settings.gradle
View File

@ -13,7 +13,7 @@ project(':react-native-vector-icons').projectDir = new File(rootProject.projectD
include ':realm' include ':realm'
project(':realm').projectDir = new File(rootProject.projectDir, '../node_modules/realm/android') project(':realm').projectDir = new File(rootProject.projectDir, '../node_modules/realm/android')
include ':randombytes' include ':randombytes'
project(':randombytes').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-randombytes/app') project(':randombytes').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-randombytes/android')
include ':react-native-linear-gradient' include ':react-native-linear-gradient'
project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android') project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')
include ':ReactNativeAndroidSmsListener' include ':ReactNativeAndroidSmsListener'

5
package.json
View File

@ -7,6 +7,7 @@
}, },
"dependencies": { "dependencies": {
"awesome-phonenumber": "^1.0.13", "awesome-phonenumber": "^1.0.13",
"identicon.js": "github:status-im/identicon.js",
"react": "^0.14.5", "react": "^0.14.5",
"react-native": "^0.24.1", "react-native": "^0.24.1",
"react-native-action-button": "^1.1.4", "react-native-action-button": "^1.1.4",
@ -16,10 +17,10 @@
"react-native-contacts": "^0.2.4", "react-native-contacts": "^0.2.4",
"react-native-i18n": "0.0.8", "react-native-i18n": "0.0.8",
"react-native-invertible-scroll-view": "^1.0.0", "react-native-invertible-scroll-view": "^1.0.0",
"react-native-linear-gradient": "^1.5.7", "react-native-linear-gradient": "1.5.7",
"react-native-loading-spinner-overlay": "0.0.8", "react-native-loading-spinner-overlay": "0.0.8",
"react-native-qrcode": "^0.2.2", "react-native-qrcode": "^0.2.2",
"react-native-randombytes": "^2.0.0", "react-native-randombytes": "^2.1.0",
"react-native-vector-icons": "^1.3.4", "react-native-vector-icons": "^1.3.4",
"realm": "^0.11.1", "realm": "^0.11.1",
"react-native-status": "git+ssh://git@github.com/status-im/react-native-status" "react-native-status": "git+ssh://git@github.com/status-im/react-native-status"

3
src/status_im/android/core.cljs
View File

@ -7,7 +7,7 @@
[status-im.subs] [status-im.subs]
[status-im.components.react :refer [navigator app-registry]] [status-im.components.react :refer [navigator app-registry]]
[status-im.components.main-tabs :refer [main-tabs]] [status-im.components.main-tabs :refer [main-tabs]]
[status-im.contacts.screen :refer [contact-list]] [status-im.contacts.views.contact-list :refer [contact-list] ]
[status-im.contacts.views.new-contact :refer [new-contact]] [status-im.contacts.views.new-contact :refer [new-contact]]
[status-im.qr-scanner.screen :refer [qr-scanner]] [status-im.qr-scanner.screen :refer [qr-scanner]]
[status-im.discovery.screen :refer [discovery]] [status-im.discovery.screen :refer [discovery]]
@ -46,6 +46,7 @@
:new-group [new-group] :new-group [new-group]
:group-settings [group-settings] :group-settings [group-settings]
:contact-list [main-tabs] :contact-list [main-tabs]
:group-contacts [contact-list]
:new-contact [new-contact] :new-contact [new-contact]
:qr-scanner [qr-scanner] :qr-scanner [qr-scanner]
:chat [chat] :chat [chat]

17
src/status_im/chat/views/message_input.cljs
View File

@ -6,8 +6,7 @@
animated-view animated-view
icon icon
touchable-highlight touchable-highlight
text-input text-input]]
dismiss-keyboard!]]
[status-im.components.animation :as anim] [status-im.components.animation :as anim]
[status-im.chat.views.plain-message :as plain-message] [status-im.chat.views.plain-message :as plain-message]
[status-im.chat.views.command :as command] [status-im.chat.views.command :as command]
@ -61,8 +60,7 @@
staged-commands [:get-chat-staged-commands] staged-commands [:get-chat-staged-commands]
typing-command? [:typing-command?] typing-command? [:typing-command?]
commands-input-is-switching? [:animations :commands-input-is-switching?]] commands-input-is-switching? [:animations :commands-input-is-switching?]]
(let [dismiss-keyboard (not (or command typing-command?)) (let [response? (and command to-msg-id)
response? (and command to-msg-id)
message-input? (or (not command) commands-input-is-switching?) message-input? (or (not command) commands-input-is-switching?)
animation? commands-input-is-switching?] animation? commands-input-is-switching?]
[text-input (merge {:style (cond [text-input (merge {:style (cond
@ -72,7 +70,7 @@
:ref (fn [input] :ref (fn [input]
(dispatch [:set-message-input input])) (dispatch [:set-message-input input]))
:autoFocus false :autoFocus false
:blurOnSubmit dismiss-keyboard :blurOnSubmit false
:onChangeText (fn [text] :onChangeText (fn [text]
(when-not animation? (when-not animation?
((if message-input? ((if message-input?
@ -82,8 +80,7 @@
:onSubmitEditing #(when-not animation? :onSubmitEditing #(when-not animation?
(if message-input? (if message-input?
(plain-message/try-send staged-commands (plain-message/try-send staged-commands
input-message input-message)
dismiss-keyboard)
(command/try-send input-command validator)))} (command/try-send input-command validator)))}
(when command (when command
{:accessibility-label :command-input}) {:accessibility-label :command-input})
@ -100,8 +97,7 @@
staged-commands [:get-chat-staged-commands] staged-commands [:get-chat-staged-commands]
typing-command? [:typing-command?] typing-command? [:typing-command?]
commands-input-is-switching? [:animations :commands-input-is-switching?]] commands-input-is-switching? [:animations :commands-input-is-switching?]]
(let [dismiss-keyboard (not (or command typing-command?)) (let [response? (and command to-msg-id)
response? (and command to-msg-id)
message-input? (or (not command) commands-input-is-switching?)] message-input? (or (not command) commands-input-is-switching?)]
[view st/input-container [view st/input-container
[view st/input-view [view st/input-view
@ -117,8 +113,7 @@
(if message-input? (if message-input?
(when (plain-message/message-valid? staged-commands input-message) (when (plain-message/message-valid? staged-commands input-message)
[send-button {:on-press #(plain-message/try-send staged-commands [send-button {:on-press #(plain-message/try-send staged-commands
input-message input-message)
dismiss-keyboard)
:accessibility-label :send-message}]) :accessibility-label :send-message}])
(if (command/valid? input-command validator) (if (command/valid? input-command validator)
[send-button {:on-press command/send-command [send-button {:on-press command/send-command

12
src/status_im/chat/views/plain_message.cljs
View File

@ -5,8 +5,7 @@
[status-im.components.react :refer [view [status-im.components.react :refer [view
animated-view animated-view
icon icon
touchable-highlight touchable-highlight]]
dismiss-keyboard!]]
[status-im.components.animation :as anim] [status-im.components.animation :as anim]
[status-im.chat.styles.plain-message :as st] [status-im.chat.styles.plain-message :as st]
[status-im.constants :refer [response-input-hiding-duration]])) [status-im.constants :refer [response-input-hiding-duration]]))
@ -14,19 +13,14 @@
(defn set-input-message [message] (defn set-input-message [message]
(dispatch [:set-chat-input-text message])) (dispatch [:set-chat-input-text message]))
(defn send [dismiss-keyboard]
(when dismiss-keyboard
(dismiss-keyboard!))
(dispatch [:send-chat-msg]))
(defn message-valid? [staged-commands message] (defn message-valid? [staged-commands message]
(or (and (pos? (count message)) (or (and (pos? (count message))
(not= "!" message)) (not= "!" message))
(pos? (count staged-commands)))) (pos? (count staged-commands))))
(defn try-send [staged-commands message dismiss-keyboard] (defn try-send [staged-commands message]
(when (message-valid? staged-commands message) (when (message-valid? staged-commands message)
(send dismiss-keyboard))) (dispatch [:send-chat-msg])))
(defn prepare-message-input [message-input] (defn prepare-message-input [message-input]
(when message-input (when message-input

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

@ -1,8 +1,10 @@
(ns status-im.chats-list.screen (ns status-im.chats-list.screen
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch]] (:require [re-frame.core :refer [subscribe dispatch]]
[status-im.components.react :refer [list-view [status-im.components.react :refer [list-view
list-item list-item
view view
animated-view
text text
image image
touchable-highlight]] touchable-highlight]]
@ -11,42 +13,68 @@
[status-im.chats-list.views.chat-list-item :refer [chat-list-item]] [status-im.chats-list.views.chat-list-item :refer [chat-list-item]]
[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 [drawer-view 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]] toolbar-background2]]
[status-im.components.toolbar :refer [toolbar]] [status-im.components.toolbar :refer [toolbar]]
[status-im.components.icons.ionicons :refer [icon]] [status-im.components.icons.ionicons :refer [icon]]
[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.tabs.styles :refer [tabs-height]]))
(defn chats-list-toolbar [] (defview chats-list-toolbar []
[chats-scrolled? [:get :chats-scrolled?]]
[toolbar {:nav-action {:image {:source {:uri :icon_hamburger} [toolbar {:nav-action {:image {:source {:uri :icon_hamburger}
:style st/hamburger-icon} :style st/hamburger-icon}
:handler open-drawer} :handler open-drawer}
:title (label :t/chats) :title (label :t/chats)
:background-color toolbar-background2 :background-color (if chats-scrolled?
toolbar-background1
toolbar-background2)
;; TODO implement search ;; TODO implement search
:action {:image {:source {:uri :icon_search} :action {:image {:source {:uri :icon_search}
:style st/search-icon} :style st/search-icon}
:handler (fn [])}}]) :handler (fn [])}}])
(defn chats-list [] (defn chats-list []
(let [chats (subscribe [:get :chats])] (let [chats (subscribe [:get :chats])
chats-scrolled? (subscribe [:get :chats-scrolled?])
animation? (subscribe [:animations :tabs-bar-animation?])
tabs-bar-value (subscribe [:animations :tabs-bar-value])
container-height (r/atom 0)
content-height (r/atom 0)]
(dispatch [:set :chats-scrolled? false])
(fn [] (fn []
[drawer-view [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
:style st/list-container}] ;;; if "maximazing" chat list will make scroll to 0,
;;; then disable maximazing
:onLayout (fn [event]
(when-not @chats-scrolled?
(let [height (.. event -nativeEvent -layout -height)]
(reset! container-height height))))
:onContentSizeChange (fn [width height]
(reset! content-height height))
:onScroll (fn [e]
(let [offset (.. e -nativeEvent -contentOffset -y)
min-content-height (+ @container-height tabs-height)
scrolled? (and (< 0 offset) (< min-content-height @content-height))]
(dispatch [:set :chats-scrolled? scrolled?])
(dispatch [:set-animation :tabs-bar-animation? true])))}]
[animated-view {:style (st/action-buttons-container @animation? (or @tabs-bar-value 0))
:pointerEvents :box-none}
[action-button {:buttonColor color-blue [action-button {:buttonColor color-blue
:offsetY 16 :offsetY 16
:offsetX 16} :offsetX 16}
[action-button-item [action-button-item
{:title (label :t/new-chat) {:title (label :t/new-chat)
:buttonColor :#9b59b6 :buttonColor :#9b59b6
:onPress #(dispatch [:navigate-to :contact-list])} :onPress #(dispatch [:show-group-contacts :people])}
[icon {:name :android-create [icon {:name :android-create
:style st/create-icon}]] :style st/create-icon}]]
[action-button-item [action-button-item

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

@ -6,7 +6,8 @@
online-color 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]]))
(def chat-container (def chat-container
{:flexDirection :row {:flexDirection :row
@ -113,3 +114,11 @@
{:fontSize 20 {:fontSize 20
:height 22 :height 22
:color :white}) :color :white})
(defn action-buttons-container [animation? offset-y]
{:position :absolute
:left 0
:right 0
:top 0
:bottom 0
:transform [{:translateY (if animation? offset-y 1)}]})

26
src/status_im/components/chat_icon/screen.cljs
View File

@ -6,7 +6,7 @@
image image
icon]] icon]]
[status-im.components.chat-icon.styles :as st] [status-im.components.chat-icon.styles :as st]
[status-im.components.styles :refer [color-purple]] [status-im.components.styles :refer [default-chat-color]]
[clojure.string :as s])) [clojure.string :as s]))
(defn default-chat-icon [name styles] (defn default-chat-icon [name styles]
@ -63,6 +63,26 @@
:default-chat-icon (st/default-chat-icon-menu-item color) :default-chat-icon (st/default-chat-icon-menu-item color)
:default-chat-icon-text st/default-chat-icon-text}]) :default-chat-icon-text st/default-chat-icon-text}])
(defn contact-icon-view [contact styles]
(let [photo-path (:photo-path contact)
;; TODO stub data
online true]
[view (:container styles)
(if-not (s/blank? photo-path)
[chat-icon photo-path styles]
[default-chat-icon (:name contact) styles])
[contact-online online styles]]))
(defn contact-icon-contacts-tab [contact]
[contact-icon-view contact
{:container st/container-chat-list
:online-view st/online-view
:online-dot-left st/online-dot-left
:online-dot-right st/online-dot-right
:chat-icon st/chat-icon-chat-list
:default-chat-icon (st/default-chat-icon-chat-list default-chat-color)
:default-chat-icon-text st/default-chat-icon-text}])
(defn profile-icon-view [photo-path name color online] (defn profile-icon-view [photo-path name color online]
(let [styles {:container st/container-profile (let [styles {:container st/container-profile
:online-view st/online-view-profile :online-view st/online-view-profile
@ -81,7 +101,7 @@
[contact [:contact]] [contact [:contact]]
(let [;; TODO stub data (let [;; TODO stub data
online true online true
color color-purple] color default-chat-color]
[profile-icon-view (:photo-path contact) (:name contact) color online])) [profile-icon-view (:photo-path contact) (:name contact) color online]))
(defview my-profile-icon [] (defview my-profile-icon []
@ -89,5 +109,5 @@
photo-path [:get :photo-path]] photo-path [:get :photo-path]]
(let [;; TODO stub data (let [;; TODO stub data
online true online true
color color-purple] color default-chat-color]
[profile-icon-view photo-path name color online])) [profile-icon-view photo-path name color online]))

14
src/status_im/components/main_tabs.cljs
View File

@ -10,6 +10,7 @@
image image
touchable-highlight touchable-highlight
get-dimensions]] get-dimensions]]
[status-im.components.drawer.view :refer [drawer-view]]
[status-im.components.animation :as anim] [status-im.components.animation :as anim]
[status-im.chats-list.screen :refer [chats-list]] [status-im.chats-list.screen :refer [chats-list]]
[status-im.discovery.screen :refer [discovery]] [status-im.discovery.screen :refer [discovery]]
@ -101,9 +102,10 @@
(defview main-tabs [] (defview main-tabs []
[view-id [:get :view-id] [view-id [:get :view-id]
tab-animation? [:get :prev-tab-view-id]] tab-animation? [:get :prev-tab-view-id]]
[view {:style common-st/flex} [drawer-view
[view {:style common-st/flex [view {:style common-st/flex}
:pointerEvents (if tab-animation? :none :auto)} [view {:style common-st/flex
(doall (map #(tab-view %) tab-list))] :pointerEvents (if tab-animation? :none :auto)}
[tabs {:selected-view-id view-id (doall (map #(tab-view %) tab-list))]
:tab-list tab-list}]]) [tabs {:selected-view-id view-id
:tab-list tab-list}]]])

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

@ -10,6 +10,7 @@
(def color-black "#000000de") (def color-black "#000000de")
(def color-purple "#a187d5") (def color-purple "#a187d5")
(def color-gray "#838c93de") (def color-gray "#838c93de")
(def color-gray2 "#8f838c93")
(def color-white :white) (def color-white :white)
(def color-light-blue "#bbc4cb") (def color-light-blue "#bbc4cb")
(def color-light-blue-transparent "#bbc4cb32") (def color-light-blue-transparent "#bbc4cb32")
@ -20,6 +21,7 @@
(def text2-color color-gray) (def text2-color color-gray)
(def text3-color color-blue) (def text3-color color-blue)
(def text4-color color-white) (def text4-color color-white)
(def text5-color "#838c938f")
(def online-color color-blue) (def online-color color-blue)
(def new-messages-count-color color-blue-transparent) (def new-messages-count-color color-blue-transparent)
(def chat-background color-light-gray) (def chat-background color-light-gray)
@ -98,4 +100,4 @@
(def button-input (def button-input
{:flex 1 {:flex 1
:flexDirection :column :flexDirection :column
:height 50}) :height 50})

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

@ -10,21 +10,21 @@
text2-color text2-color
toolbar-background1]])) toolbar-background1]]))
(def tabs-height 59)
(def tab-height 56) (def tab-height 56)
(def tabs (defn tabs-container [hidden? animation? offset-y]
{:flex 1 {:height tabs-height
:position :absolute :backgroundColor color-white
:bottom 0 :marginBottom (if (or hidden? animation?)
:right 0 (- tabs-height) 0)
:left 0 :transform [{:translateY (if animation? offset-y 1)}]})
})
(def top-gradient (def top-gradient
{:flexDirection :row {:flexDirection :row
:height 3}) :height 3})
(def tabs-container (def tabs-inner-container
{:flexDirection :row {:flexDirection :row
:height tab-height :height tab-height
:opacity 1 :opacity 1
@ -55,10 +55,9 @@
:alignItems :center}) :alignItems :center})
(defn tab-view-container [offset-x] (defn tab-view-container [offset-x]
{:flex 1 {:position :absolute
:position :absolute
:top 0 :top 0
:left 0 :left 0
:right 0 :right 0
:bottom tab-height :bottom 0
:transform [{:translateX offset-x}]}) :transform [{:translateX offset-x}]})

51
src/status_im/components/tabs/tabs.cljs
View File

@ -2,6 +2,7 @@
(:require-macros [status-im.utils.views :refer [defview]]) (:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[status-im.components.react :refer [view [status-im.components.react :refer [view
animated-view
text-input text-input
text text
image image
@ -9,7 +10,8 @@
linear-gradient]] linear-gradient]]
[reagent.core :as r] [reagent.core :as r]
[status-im.components.tabs.styles :as st] [status-im.components.tabs.styles :as st]
[status-im.components.tabs.tab :refer [tab]])) [status-im.components.tabs.tab :refer [tab]]
[status-im.components.animation :as anim]))
(defn create-tab [index data selected-view-id] (defn create-tab [index data selected-view-id]
(let [data (merge data {:key index (let [data (merge data {:key index
@ -17,10 +19,43 @@
:selected-view-id selected-view-id})] :selected-view-id selected-view-id})]
[tab data])) [tab data]))
(defview tabs [{:keys [style tab-list selected-view-id]}] (defn animation-logic [{:keys [hidden? val]}]
(let [style (merge st/tabs style)] (let [was-hidden? (atom (not @hidden?))]
[view {:style style} (fn [_]
[linear-gradient {:colors ["rgba(24, 52, 76, 0.01)" "rgba(24, 52, 76, 0.085)" "rgba(24, 52, 76, 0.165)"] (when (not= @was-hidden? @hidden?)
:style st/top-gradient}] (let [to-value (if @hidden? 0 (- st/tabs-height))]
[view st/tabs-container (swap! was-hidden? not)
(doall (map-indexed #(create-tab %1 %2 selected-view-id) tab-list))]])) (anim/start
(anim/timing val {:toValue to-value
:duration 300})
(fn [e]
;; if to-value was changed, then new animation has started
(when (= to-value (if @hidden? 0 (- st/tabs-height)))
(dispatch [:set-animation :tabs-bar-animation? false])))))))))
(defn tabs-container [& children]
(let [chats-scrolled? (subscribe [:get :chats-scrolled?])
animation? (subscribe [:animations :tabs-bar-animation?])
tabs-bar-value (subscribe [:animations :tabs-bar-value])
context {:hidden? chats-scrolled?
:val @tabs-bar-value}
on-update (animation-logic context)]
(anim/set-value @tabs-bar-value 0)
(r/create-class
{:component-did-mount
on-update
:component-did-update
on-update
:reagent-render
(fn [& children]
@chats-scrolled?
(into [animated-view {:style (st/tabs-container @chats-scrolled? @animation? @tabs-bar-value)
:pointerEvents (if @chats-scrolled? :none :auto)}]
children))})))
(defn tabs [{:keys [tab-list selected-view-id]}]
[tabs-container
[linear-gradient {:colors ["rgba(24, 52, 76, 0.01)" "rgba(24, 52, 76, 0.085)" "rgba(24, 52, 76, 0.165)"]
:style st/top-gradient}]
[view st/tabs-inner-container
(doall (map-indexed #(create-tab %1 %2 selected-view-id) tab-list))]])

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

@ -1,17 +1,19 @@
(ns status-im.contacts.screen (ns status-im.contacts.screen
(:require-macros [status-im.utils.views :refer [defview]]) (:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[reagent.core :as r]
[status-im.components.react :refer [view text [status-im.components.react :refer [view text
image image
touchable-highlight touchable-highlight
linear-gradient
scroll-view
list-view list-view
list-item]] list-item] :as react]
[status-im.components.action-button :refer [action-button [status-im.components.action-button :refer [action-button
action-button-item]] action-button-item]]
[status-im.contacts.views.contact :refer [contact-view]] [status-im.contacts.views.contact :refer [contact-extended-view]]
[status-im.components.styles :refer [toolbar-background2]]
[status-im.components.toolbar :refer [toolbar]] [status-im.components.toolbar :refer [toolbar]]
[status-im.components.drawer.view :refer [drawer-view open-drawer]] [status-im.components.drawer.view :refer [open-drawer]]
[status-im.components.icons.ionicons :refer [icon]] [status-im.components.icons.ionicons :refer [icon]]
[status-im.components.styles :refer [color-blue [status-im.components.styles :refer [color-blue
hamburger-icon hamburger-icon
@ -19,41 +21,79 @@
create-icon create-icon
toolbar-background2]] toolbar-background2]]
[status-im.contacts.styles :as st] [status-im.contacts.styles :as st]
[status-im.utils.listview :as lw]
[status-im.i18n :refer [label]])) [status-im.i18n :refer [label]]))
(defn render-row [row _ _]
(list-item [contact-view row]))
(defn contact-list-toolbar [] (defn contact-list-toolbar []
[toolbar {:nav-action {:image {:source {:uri :icon_hamburger} [toolbar {:nav-action {:image {:source {:uri :icon_hamburger}
:style hamburger-icon} :style hamburger-icon}
:handler open-drawer} :handler open-drawer}
:title (label :t/contacts) :title (label :t/contacts)
:background-color toolbar-background2 :background-color toolbar-background2
:style {:elevation 0}
:action {:image {:source {:uri :icon_search} :action {:image {:source {:uri :icon_search}
:style icon-search} :style icon-search}
:handler (fn [])}}]) :handler (fn [])}}])
(defview contact-list [] (def contacts-limit 10)
[contacts [:get-contacts]]
[drawer-view (defn contact-group [contacts contacts-count title group top?]
[view st/contacts-list-container [view st/contact-group
[contact-list-toolbar] [view st/contact-group-header
;; todo what if there is no contacts, should we show some information (when-not top?
;; about this? [linear-gradient {:style st/contact-group-header-gradient-top
(when contacts :colors st/contact-group-header-gradient-top-colors}])
[list-view {:dataSource (lw/to-datasource contacts) [view st/contact-group-header-inner
:enableEmptySections true [text {:style st/contact-group-text} title]
:renderRow render-row [text {:style st/contact-group-size-text} (str contacts-count)]]
:style st/contacts-list}]) [linear-gradient {:style st/contact-group-header-gradient-bottom
[action-button {:buttonColor color-blue :colors st/contact-group-header-gradient-bottom-colors}]]
:offsetY 16 ;; todo what if there is no contacts, should we show some information
:offsetX 16} ;; about this?
[action-button-item [view {:flexDirection :column}
{:title (label :t/new-contact) (for [contact contacts]
:buttonColor :#9b59b6 ;; TODO not imlemented: contact more button handler
:onPress #(dispatch [:navigate-to :new-contact])} ^{:key contact} [contact-extended-view contact nil nil])]
[icon {:name :android-create (when (= contacts-limit (count contacts))
:style create-icon}]] [view st/show-all
]]]) [touchable-highlight {:on-press #(dispatch [:show-group-contacts group])}
[text {:style st/show-all-text} (label :show-all)]]])])
(defn contact-list []
(let [contacts (subscribe [:get-contacts-with-limit contacts-limit])
contcats-count (subscribe [:contacts-count])
show-toolbar-shadow? (r/atom false)]
(fn []
[view st/contacts-list-container
[contact-list-toolbar]
[view {:style st/toolbar-shadow}
(when @show-toolbar-shadow?
[linear-gradient {:style st/contact-group-header-gradient-bottom
:colors st/contact-group-header-gradient-bottom-colors}])]
(if (pos? @contcats-count)
[scroll-view {:style st/contact-groups
:onScroll (fn [e]
(let [offset (.. e -nativeEvent -contentOffset -y)]
(reset! show-toolbar-shadow? (<= st/contact-group-header-height offset))))}
;; TODO not implemented: dapps and persons separation
[contact-group
@contacts
@contcats-count
(label :t/contacs-group-dapps)
:dapps true]
[contact-group
@contacts
@contcats-count
(label :t/contacs-group-people)
:people false]]
[view st/empty-contact-groups
[react/icon :group_big st/empty-contacts-icon]
[text {:style st/empty-contacts-text} (label :t/no-contacts)]])
[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])}
[icon {:name :android-create
:style create-icon}]]]])))

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

@ -1,72 +1,158 @@
(ns status-im.contacts.styles (ns status-im.contacts.styles
(:require [status-im.components.styles :refer [font (:require [status-im.components.styles :refer [font
font-medium
title-font title-font
text1-color text1-color
text2-color
text3-color
text5-color
color-white color-white
toolbar-background2 toolbar-background2
online-color]])) online-color
color-gray2]]))
(def contacts-list-container (def contacts-list-container
{:flex 1 {:flex 1
:backgroundColor :white}) :backgroundColor :white})
(def toolbar-shadow
{:height 2
:backgroundColor toolbar-background2})
(def contact-groups
{:flex 1
:backgroundColor toolbar-background2})
(def empty-contact-groups
(merge contact-groups
{:align-items :center
:padding-top 150}))
(def empty-contacts-icon
{:height 62
:width 62})
(def empty-contacts-text
{:margin-top 12
:font-size 16
:color color-gray2})
(def contacts-list (def contacts-list
{:backgroundColor :white}) {:backgroundColor :white})
(def contact-photo-container (def contact-group
{:borderRadius 50}) {:flexDirection :column})
(def photo-image (def contact-group-header
{:borderRadius 50 {:flexDirection :column
:width 40 :backgroundColor toolbar-background2})
:height 40})
(def online-container (def contact-group-header-inner
{:position :absolute {:flexDirection :row
:top 24 :alignItems :center
:left 24 :height 48
:width 20 :backgroundColor toolbar-background2})
:height 20
:borderRadius 50
:backgroundColor online-color
:borderWidth 2
:borderColor color-white})
(def online-dot (def contact-group-text
{:position :absolute {:flex 1
:top 6 :marginLeft 16
:width 4 :fontSize 14
:height 4 :fontFamily font-medium
:borderRadius 50 :color text5-color})
(def contact-group-size-text
{:marginRight 14
:fontSize 12
:fontFamily font
:color text2-color})
(def contact-group-header-gradient-top
{:flexDirection :row
:height 3
:backgroundColor toolbar-background2})
(def contact-group-header-gradient-top-colors
["rgba(24, 52, 76, 0.165)"
"rgba(24, 52, 76, 0.03)"
"rgba(24, 52, 76, 0.01)"])
(def contact-group-header-gradient-bottom
{:flexDirection :row
:height 2
:backgroundColor toolbar-background2})
(def contact-group-header-gradient-bottom-colors
["rgba(24, 52, 76, 0.01)"
"rgba(24, 52, 76, 0.05)"])
(def contact-group-header-height (+ (:height contact-group-header-inner)
(:height contact-group-header-gradient-bottom)))
(def show-all
{:flexDirection :row
:alignItems :center
:height 56
:backgroundColor color-white}) :backgroundColor color-white})
(def online-dot-left (def show-all-text
(assoc online-dot :left 3)) {:marginLeft 72
:fontSize 14
(def online-dot-right :fontFamily font-medium
(assoc online-dot :left 9)) :color text3-color
;; ios only:
:letterSpacing 0.5})
(def contact-container (def contact-container
{:flexDirection :row {:flexDirection :row
:height 56}) :backgroundColor color-white})
(def photo-container (def letter-container
{:marginTop 8 {:paddingTop 11
:marginLeft 16 :paddingLeft 20
:width 44 :width 56})
:height 44})
(def name-container (def letter-text
{:justifyContent :center}) {:fontSize 24
:fontFamily font
:color text3-color})
(def contact-photo-container
{:marginTop 4
:marginLeft 12})
(def contact-inner-container
{:flex 1
:flexDirection :row
:height 56
:backgroundColor color-white})
(def info-container
{:flex 1
:flexDirection :column
:marginLeft 12
:justifyContent :center})
(def name-text (def name-text
{:marginLeft 16 {:fontSize 16
:fontSize 16
:fontFamily font :fontFamily font
:color text1-color}) :color text1-color})
(def info-text
{:marginTop 1
:fontSize 12
:fontFamily font
:color text2-color})
(def more-btn
{:width 56
:height 56
:alignItems :center
:justifyContent :center})
(def more-btn-icon
{:width 4
:height 16})
; new contact ; new contact
(def contact-form-container (def contact-form-container
@ -82,4 +168,4 @@
(def form-container (def form-container
{:marginLeft 16 {:marginLeft 16
:margin-top 50}) :margin-top 50})

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

@ -1,28 +1,60 @@
(ns status-im.contacts.subs (ns status-im.contacts.subs
(:require-macros [reagent.ratom :refer [reaction]]) (:require-macros [reagent.ratom :refer [reaction]])
(:require [re-frame.core :refer [register-sub]])) (:require [re-frame.core :refer [register-sub subscribe]]))
(register-sub :get-contacts (register-sub :get-contacts
(fn [db _] (fn [db _]
(let [contacts (reaction (:contacts @db))] (let [contacts (reaction (:contacts @db))]
(reaction (vals @contacts))))) (reaction (vals @contacts)))))
(defn sort-contacts [contacts]
(sort-by :name #(compare (clojure.string/lower-case %1)
(clojure.string/lower-case %2)) (vals contacts)))
(register-sub :all-contacts (register-sub :all-contacts
(fn [db _] (fn [db _]
(let [contacts (reaction (:contacts @db))] (let [contacts (reaction (:contacts @db))]
(reaction (sort-by :name (vals @contacts)))))) (reaction (sort-contacts @contacts)))))
(register-sub :get-contacts-with-limit
(fn [_ [_ limit]]
(let [contacts (subscribe [:all-contacts])]
(reaction (take limit @contacts)))))
(register-sub :contacts-count
(fn [_ _]
(let [contacts (subscribe [:all-contacts])]
(reaction (count @contacts)))))
(defn get-contact-letter [contact]
(when-let [letter (first (:name contact))]
(clojure.string/upper-case letter)))
(register-sub :contacts-with-letters
(fn [db _]
(let [contacts (reaction (:contacts @db))]
(reaction
(let [ordered (sort-contacts @contacts)]
(reduce (fn [prev cur]
(let [prev-letter (get-contact-letter (last prev))
cur-letter (get-contact-letter cur)]
(conj prev
(if (not= prev-letter cur-letter)
(assoc cur :letter cur-letter)
cur))))
[] ordered))))))
(defn contacts-by-chat [fn db chat-id] (defn contacts-by-chat [fn db chat-id]
(let [chat (reaction (get-in @db [:chats chat-id])) (let [chat (reaction (get-in @db [:chats chat-id]))
contacts (reaction (:contacts @db))] contacts (reaction (:contacts @db))]
(reaction (reaction
(when @chat (when @chat
(let [current-participants (->> @chat (let [current-participants (->> @chat
:contacts :contacts
(map :identity) (map :identity)
set)] set)]
(fn #(current-participants (:whisper-identity %)) (fn #(current-participants (:whisper-identity %))
(vals @contacts))))))) (vals @contacts)))))))
(defn contacts-by-current-chat [fn db] (defn contacts-by-current-chat [fn db]
(let [current-chat-id (:current-chat-id @db)] (let [current-chat-id (:current-chat-id @db)]
@ -33,6 +65,10 @@
(let [identity (:contact-identity @db)] (let [identity (:contact-identity @db)]
(reaction (get-in @db [:contacts identity]))))) (reaction (get-in @db [:contacts identity])))))
(register-sub :contact-by-identity
(fn [db [_ identity]]
(reaction (get-in @db [:contacts identity]))))
(register-sub :all-new-contacts (register-sub :all-new-contacts
(fn [db _] (fn [db _]
(contacts-by-current-chat remove db))) (contacts-by-current-chat remove db)))
@ -47,8 +83,8 @@
chat (reaction (get-in @db [:chats chat-id])) chat (reaction (get-in @db [:chats chat-id]))
contacts (contacts-by-chat filter db chat-id)] contacts (contacts-by-chat filter db chat-id)]
(reaction (reaction
(when @chat (when @chat
(if (:group-chat @chat) (if (:group-chat @chat)
;; TODO return group chat icon ;; TODO return group chat icon
nil nil
(:photo-path (first @contacts)))))))) (:photo-path (first @contacts))))))))

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

@ -1,16 +1,35 @@
(ns status-im.contacts.views.contact (ns status-im.contacts.views.contact
(:require-macros [status-im.utils.views :refer [defview]]) (:require-macros [status-im.utils.views :refer [defview]])
(:require [status-im.components.react :refer [view touchable-highlight]] (:require [status-im.components.react :refer [view text icon touchable-highlight]]
[re-frame.core :refer [dispatch subscribe]] [re-frame.core :refer [dispatch subscribe]]
[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 [chat whisper-identity] (defn on-press [chat whisper-identity]
(if chat (if chat
#(dispatch [:navigate-to :chat whisper-identity]) #(dispatch [:navigate-to :chat whisper-identity])
#(dispatch [:start-chat whisper-identity]))) #(dispatch [:start-chat whisper-identity])))
(defview contact-view [{:keys [whisper-identity] :as contact}] (defview contact-with-letter-view [{:keys [whisper-identity letter] :as contact}]
[chat [:get-chat whisper-identity]] [chat [:get-chat whisper-identity]]
[touchable-highlight [touchable-highlight
{:onPress (on-press chat whisper-identity)} {:onPress (on-press chat whisper-identity)}
[view {} [contact-inner-view contact]]]) [view st/contact-container
[letter-view letter]
[contact-inner-view contact]]])
(defview contact-extended-view [{:keys [whisper-identity] :as contact} info more-click-handler]
[chat [:get-chat whisper-identity]]
[touchable-highlight
{:onPress (on-press chat whisper-identity)}
[view st/contact-container
[contact-inner-view contact info]
[touchable-highlight
{:on-press more-click-handler}
[view st/more-btn
[icon :more-vertical st/more-btn-icon]]]]])

41
src/status_im/contacts/views/contact_inner.cljs
View File

@ -1,31 +1,26 @@
(ns status-im.contacts.views.contact-inner (ns status-im.contacts.views.contact-inner
(:require [clojure.string :as s] (:require [clojure.string :as s]
[status-im.components.react :refer [view image text]] [status-im.components.react :refer [view image text]]
[status-im.resources :as res] [status-im.components.chat-icon.screen :refer [contact-icon-contacts-tab]]
[status-im.contacts.styles :as st] [status-im.contacts.styles :as st]
[status-im.i18n :refer [label]])) [status-im.i18n :refer [label]]))
(defn contact-photo [{:keys [photo-path]}] (defn contact-photo [contact]
[view st/contact-photo-container [view st/contact-photo-container
[image {:source (if (s/blank? photo-path) [contact-icon-contacts-tab contact]])
res/user-no-photo
{:uri photo-path})
:style st/photo-image}]])
(defn contact-online [{:keys [online]}] (defn contact-inner-view
(when online ([contact]
[view st/online-container (contact-inner-view contact nil))
[view st/online-dot-left] ([{:keys [name] :as contact} info]
[view st/online-dot-right]])) [view st/contact-inner-container
[contact-photo contact]
(defn contact-inner-view [{:keys [name photo-path online]}] [view st/info-container
[view st/contact-container [text {:style st/name-text}
[view st/photo-container (if (pos? (count (:name contact)))
[contact-photo {:photo-path photo-path}] name
[contact-online {:online online}]] ;; todo is this correct behaviour?
[view st/name-container (label :t/no-name))]
[text {:style st/name-text} (when info
(if (pos? (count name)) [text {:style st/info-text}
name info])]]))
;; todo is this correct behaviour?
(label :t/no-name))]]])

46
src/status_im/contacts/views/contact_list.cljs Normal file
View File

@ -0,0 +1,46 @@
(ns status-im.contacts.views.contact-list
(:require-macros [status-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[status-im.components.react :refer [view text
image
touchable-highlight
list-view
list-item]]
[status-im.contacts.views.contact :refer [contact-with-letter-view]]
[status-im.components.toolbar :refer [toolbar]]
[status-im.components.drawer.view :refer [drawer-view open-drawer]]
[status-im.components.icons.ionicons :refer [icon]]
[status-im.components.styles :refer [color-blue
hamburger-icon
icon-search
create-icon
toolbar-background1]]
[status-im.contacts.styles :as st]
[status-im.utils.listview :as lw]
[status-im.i18n :refer [label]]))
(defn render-row [row _ _]
(list-item [contact-with-letter-view row]))
(defview contact-list-toolbar []
[group [:get :contacts-group]]
[toolbar {:title (label (if (= group :dapps)
:t/contacs-group-dapps
:t/contacs-group-people))
:background-color toolbar-background1
:action {:image {:source {:uri :icon_search}
:style icon-search}
:handler (fn [])}}])
(defview contact-list []
[contacts [:contacts-with-letters]]
[drawer-view
[view st/contacts-list-container
[contact-list-toolbar]
;; todo what if there is no contacts, should we show some information
;; about this?
(when contacts
[list-view {:dataSource (lw/to-datasource contacts)
:enableEmptySections true
:renderRow render-row
:style st/contacts-list}])]])

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

@ -7,8 +7,8 @@
image image
linear-gradient linear-gradient
touchable-highlight]] touchable-highlight]]
[status-im.utils.identicon :refer [identicon]]
[status-im.components.toolbar :refer [toolbar]] [status-im.components.toolbar :refer [toolbar]]
[status-im.components.drawer.view :refer [drawer-view open-drawer]]
[status-im.components.styles :refer [color-purple [status-im.components.styles :refer [color-purple
color-white color-white
icon-search icon-search
@ -56,23 +56,21 @@
(defview new-contact [] (defview new-contact []
[{:keys [name whisper-identity phone-number] :as new-contact} [:get :new-contact]] [{:keys [name whisper-identity phone-number] :as new-contact} [:get :new-contact]]
[drawer-view [view st/contact-form-container
[view st/contact-form-container [linear-gradient {:colors ["rgba(182, 116, 241, 1)" "rgba(107, 147, 231, 1)" "rgba(43, 171, 238, 1)"]
[linear-gradient {:colors ["rgba(182, 116, 241, 1)" "rgba(107, 147, 231, 1)" "rgba(43, 171, 238, 1)"] :start [0, 0]
:start [0, 0] :end [0.5, 1]
:end [0.5, 1] :locations [0, 0.8, 1]
:locations [0, 0.8 ,1] :style st/gradient-background}]
:style st/gradient-background}]
[toolbar {:background-color :transparent [toolbar {:background-color :transparent
:nav-action {:image {:source {:uri :icon_back_white} :nav-action {:image {:source {:uri :icon_back_white}
:style icon-back} :style icon-back}
:handler #(dispatch [:navigate-back])} :handler #(dispatch [:navigate-back])}
:custom-content toolbar-title :custom-content toolbar-title
:action {:image {:source {:uri :icon_add} :action {:image {:source {:uri :icon_add}
:style icon-search} :style icon-search}
:handler #(dispatch [:add-new-contact new-contact])}}] :handler #(dispatch [:add-new-contact (merge {:photo-path (identicon whisper-identity)} new-contact)])}}]
[view st/form-container [view st/form-container
[contact-whisper-id-input whisper-identity] [contact-whisper-id-input whisper-identity]
[contact-name-input name] [contact-name-input name]]])
]]])

3
src/status_im/db.cljs
View File

@ -44,7 +44,8 @@
:message-input-buttons-scale 1 :message-input-buttons-scale 1
:messages-offset 0 :messages-offset 0
:commands-input-is-switching? false :commands-input-is-switching? false
:response-resize? false}}) :response-resize? false
:tabs-bar-value (anim/create-value 0)}})
(def protocol-initialized-path [:protocol-initialized]) (def protocol-initialized-path [:protocol-initialized])
(defn chat-input-text-path [chat-id] (defn chat-input-text-path [chat-id]

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

@ -2,6 +2,7 @@
(:require [status-im.components.styles :refer [font (:require [status-im.components.styles :refer [font
title-font title-font
color-white color-white
color-gray2
chat-background chat-background
online-color online-color
selected-message-color selected-message-color
@ -49,7 +50,7 @@
:elevation 0}) :elevation 0})
(def discovery-subtitle (def discovery-subtitle
{:color "#8f838c93" {:color color-gray2
:fontFamily "sans-serif-medium" :fontFamily "sans-serif-medium"
:fontSize 14}) :fontSize 14})

78
src/status_im/group_settings/styles/member.cljs
View File

@ -1,78 +0,0 @@
(ns status-im.group-settings.styles.member
(:require [status-im.components.styles :refer [font
title-font
text1-color
text2-color
color-white
online-color]]))
(def contact-photo-container
{:borderRadius 50})
(def photo-image
{:borderRadius 50
:width 40
:height 40})
(def online-container
{:position :absolute
:top 24
:left 24
:width 20
:height 20
:borderRadius 50
:backgroundColor online-color
:borderWidth 2
:borderColor color-white})
(def online-dot
{:position :absolute
:top 6
:width 4
:height 4
:borderRadius 50
:backgroundColor color-white})
(def online-dot-left
(assoc online-dot :left 3))
(def online-dot-right
(assoc online-dot :left 9))
(def contact-container
{:flexDirection :row
:height 56})
(def photo-container
{:marginTop 8
:marginLeft 16
:width 44
:height 44})
(def info-container
{:flex 1
:flexDirection :column
:marginLeft 16
:justifyContent :center})
(def name-text
{:marginTop -2
:fontSize 16
:fontFamily font
:color text1-color})
(def role-text
{:marginTop 1
:fontSize 12
:fontFamily font
:color text2-color})
(def more-btn
{:width 56
:height 56
:alignItems :center
:justifyContent :center })
(def more-btn-icon
{:width 4
:height 16})

47
src/status_im/group_settings/views/member.cljs
View File

@ -1,44 +1,9 @@
(ns status-im.group-settings.views.member (ns status-im.group-settings.views.member
(:require [clojure.string :as s] (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[re-frame.core :refer [subscribe dispatch dispatch-sync]] [status-im.contacts.views.contact :refer [contact-extended-view]]
[status-im.components.react :refer [view
image
text
icon
touchable-highlight]]
[status-im.resources :as res]
[status-im.group-settings.styles.member :as st]
[status-im.i18n :refer [label]])) [status-im.i18n :refer [label]]))
(defn contact-photo [{:keys [photo-path]}] (defn member-view [{:keys [whisper-identity role] :as contact}]
[view st/contact-photo-container ;; TODO implement :role property for group chat contact
[image {:source (if (s/blank? photo-path) [contact-extended-view contact role
res/user-no-photo #(dispatch [:set :selected-participants #{whisper-identity}])])
{:uri photo-path})
:style st/photo-image}]])
(defn contact-online [{:keys [online]}]
(when online
[view st/online-container
[view st/online-dot-left]
[view st/online-dot-right]]))
(defn member-view [{:keys [whisper-identity name photo-path online role]}]
[view st/contact-container
[view st/photo-container
[contact-photo {:photo-path photo-path}]
[contact-online {:online online}]]
[view st/info-container
[text {:style st/name-text}
(if (pos? (count name))
name
;; todo is this correct behaviour?
(label :t/no-name))]
;; TODO implement :role property for group chat contact
(when role
[text {:style st/role-text}
role])]
[touchable-highlight
{:on-press #(dispatch [:set :selected-participants #{whisper-identity}])}
[view st/more-btn
[icon :more-vertical st/more-btn-icon]]]])

5
src/status_im/models/contacts.cljs
View File

@ -1,5 +1,6 @@
(ns status-im.models.contacts (ns status-im.models.contacts
(:require [status-im.persistence.realm :as r] (:require [status-im.persistence.realm :as r]
[status-im.utils.identicon :refer [identicon]]
[status-im.persistence.realm-queries :refer [include-query [status-im.persistence.realm-queries :refer [include-query
exclude-query]])) exclude-query]]))
@ -8,9 +9,9 @@
(r/sorted :name :asc) (r/sorted :name :asc)
r/collection->map)) r/collection->map))
(defn create-contact [{:keys [name photo-path] :as contact}] (defn create-contact [{:keys [name photo-path whisper-identity] :as contact}]
(->> {:name (or name "") (->> {:name (or name "")
:photo-path (or photo-path "")} :photo-path (or photo-path (identicon whisper-identity))}
(merge contact) (merge contact)
(r/create :contacts))) (r/create :contacts)))

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

@ -66,6 +66,12 @@
(fn [db _] (fn [db _]
(push-view db :contact-list))) (push-view db :contact-list)))
(register-handler :show-group-contacts
(fn [db [_ group]]
(-> db
(assoc :contacts-group group)
(push-view :group-contacts))))
(defn show-profile (defn show-profile
[db [_ identity]] [db [_ identity]]
(-> db (-> db

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

@ -72,6 +72,10 @@
:contacts "Contacts" :contacts "Contacts"
:no-name "Noname" :no-name "Noname"
:new-contact "New Contact" :new-contact "New Contact"
:show-all "SHOW ALL"
:contacs-group-dapps "Dapps"
:contacs-group-people "People"
:no-contacts "No contacts yet"
;group-settings ;group-settings
:remove "Remove" :remove "Remove"
@ -127,6 +131,6 @@
:login "Login" :login "Login"
;users ;users
:add-account "Add account" :add-account "Add account"
}) })

2
src/status_im/utils/crypt.cljs
View File

@ -20,7 +20,7 @@
(byteArrayToHex (.digest sha-256))) (byteArrayToHex (.digest sha-256)))
(defn gen-random-bytes [length cb] (defn gen-random-bytes [length cb]
#_(.randomBytes random-bytes length (fn [& [err buf]] (.randomBytes random-bytes length (fn [& [err buf]]
(if err (if err
(cb {:error err}) (cb {:error err})
(cb {:buffer buf}))))) (cb {:buffer buf})))))

13
src/status_im/utils/identicon.cljs Normal file
View File

@ -0,0 +1,13 @@
(ns status-im.utils.identicon
(:require [clojure.string :as s]
[status-im.utils.utils :as u]))
(def default-size 40)
(def identicon-js (u/require "identicon.js"))
(defn identicon
([hash] (identicon hash default-size))
([hash options]
(str "data:image/png;base64," (.toString (new identicon-js hash options)))))