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", "name": "StatusIm",
"interface": "reagent", "interface": "reagent",
"androidHost": "10.0.2.2", "androidHost": "10.0.3.2",
"modules": [ "modules": [
"react-native-contacts", "react-native-contacts",
"react-native-invertible-scroll-view", "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!])) (re-frame.core/dispatch [:load-commands!]))
(figwheel/watch-and-reload (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 :heads-up-display false
:jsload-callback callback) :jsload-callback callback)

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

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

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

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

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

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

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

@ -23,19 +23,6 @@
:additional-height 5} :additional-height 5}
:actions-list-view {:border-bottom-color styles/color-gray3 :actions-list-view {:border-bottom-color styles/color-gray3
:border-bottom-width 0.5} :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 :chat {:new-message {:border-top-color styles/color-gray3
:border-top-width 0.5}} :border-top-width 0.5}}
:discover {:subtitle {:color styles/color-steel :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) (time/time-ago last-online-date)
(label :t/active-unknown)))) (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 [view st/profile-bage
[my-profile-icon {:account contact [my-profile-icon {:account contact
:edit? false}] :edit? false}]
[view st/profile-bage-name-container [view st/profile-badge-name-container
[text {:style st/profile-name-text [text {:style st/profile-name-text
:number-of-lines 1} :number-of-lines 1}
name] name]
@ -192,7 +192,7 @@
[status-bar] [status-bar]
[my-profile-toolbar] [my-profile-toolbar]
[view st/profile-form [view st/profile-form
[profile-bage current-account] [profile-badge current-account]
[profile-status status true]] [profile-status status true]]
[form-spacer] [form-spacer]
[view actions-list [view actions-list
@ -215,7 +215,7 @@
[profile-toolbar contact] [profile-toolbar contact]
[scroll-view [scroll-view
[view st/profile-form [view st/profile-form
[profile-bage contact] [profile-badge contact]
(when (and (not (nil? status)) (not (str/blank? status))) (when (and (not (nil? status)) (not (str/blank? status)))
[profile-status status])] [profile-status status])]
[form-spacer] [form-spacer]

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

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