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

Style fixes; Emoji in Display name is cut on Chats, View Profile and Contacts (#945)

This commit is contained in:
alwx 2017-04-20 10:38:32 +03:00 committed by Roman Volosovskyi
parent f58e6d427d
commit 9d6f155c38
9 changed files with 93 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.re-natal
View File

@ -1,7 +1,7 @@
{
"name": "StatusIm",
"interface": "reagent",
"androidHost": "10.0.2.2",
"androidHost": "10.0.3.2",
"modules": [
"react-native-contacts",
"react-native-invertible-scroll-view",

2
env/dev/env/android/main.cljs vendored
View File

@ -15,7 +15,7 @@
(re-frame.core/dispatch [:load-commands!]))
(figwheel/watch-and-reload
:websocket-url "ws://10.0.2.2:3449/figwheel-ws"
:websocket-url "ws://10.0.3.2:3449/figwheel-ws"
:heads-up-display false
:jsload-callback callback)

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

@ -24,19 +24,6 @@
:color styles/color-black}}
:sized-text {:margin-top 0
:additional-height 0}
:chat-list {:list-container {:background-color styles/color-light-gray}
:chat-container {:height 76}
:chat-icon-container {:height 76}
:chat-info-container {:margin-top 16}
:chat-options-container {:margin-top 16}
:item-lower-container {:margin-top 4}
:chat-name {:height 24}
:last-message {:font-size 14
:height 24}
:last-message-timestamp {:font-size 14}
:unread-count {:top 2}
:public-group-icon-container {:margin-top 4}
:private-group-icon-container {:margin-top 4}}
:chat {:new-message {:border-top-color styles/color-transparent
:border-top-width 0.5}}
:discover {:subtitle {:color styles/color-gray2

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

@ -1,5 +1,5 @@
(ns status-im.chats-list.styles
(:require-macros [status-im.utils.styles :refer [defnstyle]])
(:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
(:require [status-im.components.styles :refer [color-white
color-light-gray
color-blue
@ -22,40 +22,45 @@
{:border-bottom-width 1
:border-bottom-color color-gray5})
(def chat-container
(merge {:flex-direction :row
:background-color color-white}
(get-in p/platform-specific [:component-styles :chat-list :chat-container])))
(defstyle chat-container
{:flex-direction :row
:background-color color-white
:android {:height 76}
:ios {:height 74}})
(def chat-icon-container
(merge {:padding-top 18
:padding-bottom 18
:padding-left 12
:padding-right 20
:width 72}
(get-in p/platform-specific [:component-styles :chat-list :chat-icon-container])))
(defstyle chat-icon-container
{:padding-top 18
:padding-bottom 18
:padding-left 12
:padding-right 20
:width 72
:android {:height 76}
:ios {:height 74}})
(def chat-info-container
(merge {:margin-bottom 13
:justify-content :space-between
:flex 1
:flex-direction :column}
(get-in p/platform-specific [:component-styles :chat-list :chat-info-container])))
(defstyle chat-info-container
{:margin-bottom 13
:justify-content :space-between
:flex 1
:flex-direction :column
:android {:margin-top 16}
:ios {:margin-top 14}})
(def chat-options-container
(merge {:margin-right 16
:padding-top 10}
(get-in p/platform-specific [:component-styles :chat-list :chat-options-container])))
(defstyle chat-options-container
{:margin-right 16
:padding-top 10
:android {:margin-top 16}
:ios {:margin-top 14}})
(def item-upper-container
{:flex 1
:flex-direction :row})
(def item-lower-container
(merge {:flex 1
:flex-direction :row
:justify-content :space-between}
(get-in p/platform-specific [:component-styles :chat-list :item-lower-container])))
(defstyle item-lower-container
{:flex 1
:flex-direction :row
:justify-content :space-between
:android {:margin-top 4}
:ios {:margin-top 6}})
(def message-status-container
{:flex-direction :row
@ -67,25 +72,26 @@
:margin-right 4})
(def name-text
(merge {:color text1-color
:font-size 16}
(get-in p/platform-specific [:component-styles :chat-list :chat-name])))
{:color text1-color
:font-size 16})
(def private-group-icon-container
(merge {:width 16
:height 12
:margin-right 6}
(get-in p/platform-specific [:component-styles :chat-list :private-group-icon-container])))
(defstyle private-group-icon-container
{:width 16
:height 12
:margin-right 6
:android {:margin-top 4}
:ios {:margin-top 2}})
(def private-group-icon
{:width 16
:height 16})
(def public-group-icon-container
(merge {:width 16
:height 12
:margin-right 6}
(get-in p/platform-specific [:component-styles :chat-list :public-group-icon-container])))
(defstyle public-group-icon-container
{:width 16
:height 12
:margin-right 6
:android {:margin-top 4}
:ios {:margin-top 2}})
(def public-group-icon
{:width 16
@ -94,9 +100,12 @@
(def last-message-container
{:flex-shrink 1})
(def last-message-text
(merge {:color text4-color}
(get-in p/platform-specific [:component-styles :chat-list :last-message])))
(defstyle last-message-text
{:color text4-color
:android {:font-size 14
:height 24}
:ios {:font-size 15
:height 24}})
(def status-container
{:flex-direction :row
@ -109,23 +118,25 @@
:width 16
:height 16})
(def datetime-text
(merge {:color text4-color}
(get-in p/platform-specific [:component-styles :chat-list :last-message-timestamp])))
(defstyle datetime-text
{:color text4-color
:android {:font-size 14}
:ios {:font-size 15}})
(def new-messages-container
{:width 22
:height 22
:margin-left 15
:backgroundColor new-messages-count-color
:borderRadius 50})
{:width 22
:height 22
:margin-left 15
:background-color new-messages-count-color
:border-radius 50})
(def new-messages-text
(merge {:left 0
:fontSize 12
:color color-blue
:textAlign :center}
(get-in p/platform-specific [:component-styles :chat-list :unread-count])))
{:left 0
:fontSize 12
:color color-blue
:text-align :center
:android {:top 2}
:ios {:top 3}})
(def chats-container
{:flex 1})
@ -142,10 +153,10 @@
:padding-right 14})
(def opts-btn
{:width 24
:height 24
:alignItems :center
:justifyContent :center})
{:width 24
:height 24
:align-items :center
:justify-content :center})
(def create-icon
{:fontSize 20

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

@ -4,13 +4,13 @@
[status-im.utils.platform]))
(defstyle contact-inner-container
{:flex 1
:flexDirection :row
:align-items :center
:padding-left 16
:backgroundColor common/color-white
:android {:height 56}
:ios {:height 63}})
{:flex 1
:flex-direction :row
:align-items :center
:padding-left 16
:background-color common/color-white
:android {:height 56}
:ios {:height 63}})
(def info-container
{:flex 1
@ -21,10 +21,8 @@
(defstyle name-text
{:color common/text1-color
:android {:fontSize 16
:line-height 24}
:ios {:fontSize 17
:line-height 20
:android {:font-size 16}
:ios {:font-size 17
:letter-spacing -0.2}})
(def info-text

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

@ -50,10 +50,10 @@
:ios {:height 64}})
(defstyle show-all-text
{:android {:fontSize 14
{:android {:font-size 14
:color common/color-blue
:letter-spacing 0.5}
:ios {:fontSize 16
:ios {:font-size 16
:color common/color-gray4
:letter-spacing -0.2}})

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

@ -23,19 +23,6 @@
:additional-height 5}
:actions-list-view {:border-bottom-color styles/color-gray3
:border-bottom-width 0.5}
:chat-list {:list-container {:background-color styles/color-white}
:chat-container {:height 74}
:chat-icon-container {:height 74}
:chat-info-container {:margin-top 14}
:chat-options-container {:margin-top 14}
:item-lower-container {:margin-top 6}
:chat-name {:height 20}
:last-message {:font-size 15
:height 24}
:last-message-timestamp {:font-size 15}
:unread-count {:top 3}
:public-group-icon-container {:margin-top 2}
:private-group-icon-container {:margin-top 2}}
:chat {:new-message {:border-top-color styles/color-gray3
:border-top-width 0.5}}
:discover {:subtitle {:color styles/color-steel

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

@ -51,11 +51,11 @@
(time/time-ago last-online-date)
(label :t/active-unknown))))
(defn profile-bage [{:keys [name last-online] :as contact}]
(defn profile-badge [{:keys [name last-online] :as contact}]
[view st/profile-bage
[my-profile-icon {:account contact
:edit? false}]
[view st/profile-bage-name-container
[view st/profile-badge-name-container
[text {:style st/profile-name-text
:number-of-lines 1}
name]
@ -192,7 +192,7 @@
[status-bar]
[my-profile-toolbar]
[view st/profile-form
[profile-bage current-account]
[profile-badge current-account]
[profile-status status true]]
[form-spacer]
[view actions-list
@ -215,7 +215,7 @@
[profile-toolbar contact]
[scroll-view
[view st/profile-form
[profile-bage contact]
[profile-badge contact]
(when (and (not (nil? status)) (not (str/blank? status)))
[profile-status status])]
[form-spacer]

12
src/status_im/profile/styles.cljs
View File

@ -70,14 +70,12 @@
:android {:font-size 12}})
(defstyle profile-name-text
{:ios {:font-size 17
:line-height 20
:letter-spacing -0.2}
:android {:color color-black
:font-size 16
:line-height 24}})
{:ios {:font-size 17
:letter-spacing -0.2}
:android {:color color-black
:font-size 16}})
(def profile-bage-name-container
(def profile-badge-name-container
{:flex 1
:justify-content :center
:padding-left 16})