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 icon component 

Former-commit-id: 4ce65b37f9
This commit is contained in:
virvar 2016-05-19 15:45:16 +03:00
parent c015d260e8
commit ee28404ef6
8 changed files with 217 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/syng_im/chat/screen.cljs
View File

@ -1,7 +1,6 @@
(ns syng-im.chat.screen
(:require-macros [syng-im.utils.views :refer [defview]])
(:require [clojure.string :as s]
[re-frame.core :refer [subscribe dispatch]]
(:require [re-frame.core :refer [subscribe dispatch]]
[syng-im.components.react :refer [view
text
image
@ -9,8 +8,9 @@
touchable-highlight
list-view
list-item]]
[syng-im.components.chat-icon.screen :refer [chat-icon-view-action
chat-icon-view-menu-item]]
[syng-im.chat.styles.screen :as st]
[syng-im.resources :as res]
[syng-im.utils.listview :refer [to-datasource]]
[syng-im.components.invertible-scroll-view :refer [invertible-scroll-view]]
[syng-im.components.toolbar :refer [toolbar]]
@ -32,25 +32,13 @@
(assoc msg :text-color text-color
:background-color background-color))))
(defview default-chat-icon []
[name [:chat :name]
color [:chat :color]]
[view (st/default-chat-icon color)
[text {:style st/default-chat-icon-text} (nth name 0)]])
(defview chat-photo []
[photo-path [:chat-photo]]
(if photo-path
[view st/contact-photo-container
[image {:source {:uri photo-path}
:style st/chat-photo}]]
[default-chat-icon]))
(defn contact-online [{:keys [online]}]
(when online
[view st/online-view
[view st/online-dot-left]
[view st/online-dot-right]]))
(defview chat-icon []
[chat-id [:chat :chat-id]
group-chat [:chat :group-chat]
name [:chat :name]
color [:chat :color]]
;; TODO stub data ('online' property)
[chat-icon-view-action chat-id group-chat name color true])
(defn typing [member]
[view st/typing-view
@ -100,22 +88,13 @@
[text {:style st/action-subtitle}
subtitle])]]])
(defn menu-item-contact-photo [{:keys [photo-path]}]
[image {:source (if (s/blank? photo-path)
res/user-no-photo
{:uri photo-path})
:style st/menu-item-profile-contact-photo}])
(defn menu-item-contact-online [{:keys [online]}]
(when online
[view st/menu-item-profile-online-view
[view st/menu-item-profile-online-dot-left]
[view st/menu-item-profile-online-dot-right]]))
(defn menu-item-icon-profile []
[view st/icon-view
[menu-item-contact-photo {}]
[menu-item-contact-online {:online true}]])
(defview menu-item-icon-profile []
[chat-id [:chat :chat-id]
group-chat [:chat :group-chat]
name [:chat :name]
color [:chat :color]]
;; TODO stub data ('online' property)
[chat-icon-view-menu-item chat-id group-chat name color true])
(defn actions-list-view []
(let [{:keys [group-chat chat-id]}
@ -202,13 +181,12 @@
(if @show-actions
[touchable-highlight
{:on-press #(dispatch [:set-show-actions false])}
[view st/icon-view
[view st/action
[icon :up st/up-icon]]]
[touchable-highlight
{:on-press #(dispatch [:set-show-actions true])}
[view st/icon-view
[chat-photo {}]
[contact-online {:online true}]]]))))
[view st/action
[chat-icon]]]))))
(defn chat-toolbar []
(let [{:keys [group-chat name contacts]}

94
src/syng_im/chat/styles/screen.cljs
View File

@ -20,11 +20,15 @@
:backgroundColor toolbar-background1
:elevation 2})
(def action
{:width 56
:height 56
:alignItems :center
:justifyContent :center})
(def icon-view
{:width 56
:height 56
:paddingTop 10
:paddingLeft 10})
{:width 56
:height 56})
(def back-icon
{:marginTop 21
@ -50,10 +54,8 @@
:height 9})
(def up-icon
{:marginTop 23
:marginLeft 21
:width 14
:height 8})
{:width 14
:height 8})
(def members
{:marginTop -0.5
@ -110,28 +112,6 @@
:fontSize 12
:fontFamily font})
(def online-view
{:position :absolute
:top 30
:left 30
: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 (merge online-dot {:left 3}))
(def online-dot-right (merge online-dot {:left 9}))
(def typing-all
{:marginBottom 20})
@ -155,29 +135,6 @@
:fontFamily font
:color text2-color})
(defn default-chat-icon [color]
{:width 36
:height 36
:alignItems :center
:justifyContent :center
:borderRadius 50
:backgroundColor color})
(def default-chat-icon-text
{:marginTop -2
:color color-white
:fontFamily font
:fontSize 16
:lineHeight 20})
(def contact-photo-container
{:borderRadius 50})
(def chat-photo
{:borderRadius 50
:width 36
:height 36})
(def actions-overlay
{:position :absolute
:top 0
@ -187,34 +144,3 @@
(def overlay-highlight
{:flex 1})
;;----- Menu item Profile ----------------
(def menu-item-profile-contact-photo
{:marginTop 13
:marginLeft 16
:borderRadius 50
:width 24
:height 24})
(def menu-item-profile-online-view
{:position :absolute
:top 26
:left 29
:width 15
:height 15
:borderRadius 50
:backgroundColor online-color
:borderWidth 2
:borderColor color-white})
(def menu-item-profile-online-dot
{:position :absolute
:top 4
:width 3
:height 3
:borderRadius 50
:backgroundColor color-white})
(def menu-item-profile-online-dot-left (merge menu-item-profile-online-dot {:left 1.7}))
(def menu-item-profile-online-dot-right (merge menu-item-profile-online-dot {:left 6.3}))

57
src/syng_im/chats_list/styles.cljs
View File

@ -8,64 +8,17 @@
text2-color
new-messages-count-color]]))
(defn default-chat-icon [color]
{:width 40
:height 40
:alignItems :center
:justifyContent :center
:borderRadius 50
:backgroundColor color})
(def default-chat-icon-text
{:marginTop -2
:color color-white
:fontFamily font
:fontSize 16
:lineHeight 20})
(def contact-photo-container
{:borderRadius 50})
(def contact-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 chat-container
{:flexDirection :row
:paddingVertical 15
:paddingHorizontal 16
:height 90})
(def photo-container
{:marginTop 2
:width 44
:height 44})
(def chat-icon-container
{:marginTop -2
:marginLeft -4
:width 48
:height 48})
(def item-container
{:flexDirection :column

28
src/syng_im/chats_list/views/inner_item.cljs
View File

@ -1,33 +1,15 @@
(ns syng-im.chats-list.views.inner-item
(:require-macros [syng-im.utils.views :refer [defview]])
(:require [syng-im.components.react :refer [view image icon text]]
[syng-im.components.chat-icon.screen :refer [chat-icon-view-chat-list]]
[syng-im.chats-list.styles :as st]))
(defn default-chat-icon [{:keys [name color]}]
[view (st/default-chat-icon color)
[text {:style st/default-chat-icon-text} (nth name 0)]])
(defview contact-photo [chat]
[photo-path [:chat-photo (:chat-id chat)]]
(if photo-path
[view st/contact-photo-container
[image {:source {:uri photo-path}
:style st/contact-photo-image}]]
[default-chat-icon chat]))
(defn contact-online [online]
(when online
[view st/online-container
[view st/online-dot-left]
[view st/online-dot-right]]))
(defn chat-list-item-inner-view
[{:keys [chat-id name photo-path delivery-status timestamp new-messages-count online
group-chat contacts] :as chat}]
[{:keys [chat-id name color photo-path delivery-status timestamp new-messages-count
online group-chat contacts] :as chat}]
[view st/chat-container
[view st/photo-container
[contact-photo chat]
[contact-online online]]
[view st/chat-icon-container
[chat-icon-view-chat-list chat-id group-chat name color online]]
[view st/item-container
[view st/name-view
[text {:style st/name-text} name]

62
src/syng_im/components/chat_icon/screen.cljs Normal file
View File

@ -0,0 +1,62 @@
(ns syng-im.components.chat-icon.screen
(:require-macros [syng-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch]]
[syng-im.components.react :refer [view
text
image
icon]]
[syng-im.components.chat-icon.styles :as st]))
(defn default-chat-icon [name color styles]
[view (:default-chat-icon styles)
[text {:style (:default-chat-icon-text styles)}
(nth name 0)]])
(defn chat-icon [photo-path styles]
[image {:source {:uri photo-path}
:style (:chat-icon styles)}])
(defn contact-online [online styles]
(when online
[view (:online-view styles)
[view (:online-dot-left styles)]
[view (:online-dot-right styles)]]))
(defview chat-icon-view [chat-id group-chat name color online styles]
[photo-path [:chat-photo chat-id]]
[view (:container styles)
(if photo-path
[chat-icon photo-path styles]
[default-chat-icon name color styles])
(when (not group-chat)
[contact-online online styles])])
(defn chat-icon-view-chat-list [chat-id group-chat name color online]
[chat-icon-view chat-id group-chat name color online
{: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 color)
:default-chat-icon-text st/default-chat-icon-text}])
(defn chat-icon-view-action [chat-id group-chat name color online]
[chat-icon-view chat-id group-chat name color online
{:container st/container
:online-view st/online-view
:online-dot-left st/online-dot-left
:online-dot-right st/online-dot-right
:chat-icon st/chat-icon
:default-chat-icon (st/default-chat-icon color)
:default-chat-icon-text st/default-chat-icon-text}])
(defn chat-icon-view-menu-item [chat-id group-chat name color online]
[chat-icon-view chat-id group-chat name color online
{:container st/container-menu-item
:online-view st/online-view-menu-item
:online-dot-left st/online-dot-left-menu-item
:online-dot-right st/online-dot-right-menu-item
:chat-icon st/chat-icon-menu-item
:default-chat-icon (st/default-chat-icon-menu-item color)
:default-chat-icon-text st/default-chat-icon-text}])

103
src/syng_im/components/chat_icon/styles.cljs Normal file
View File

@ -0,0 +1,103 @@
(ns syng-im.components.chat-icon.styles
(:require [syng-im.components.styles :refer [font
title-font
color-white
chat-background
online-color
selected-message-color
separator-color
text1-color
text2-color
toolbar-background1]]))
(defn default-chat-icon [color]
{:margin 4
:width 36
:height 36
:alignItems :center
:justifyContent :center
:borderRadius 50
:backgroundColor color})
(defn default-chat-icon-chat-list [color]
(merge (default-chat-icon color)
{:width 40
:height 40}))
(defn default-chat-icon-menu-item [color]
(merge (default-chat-icon color)
{:width 24
:height 24}))
(def default-chat-icon-text
{:marginTop -2
:color color-white
:fontFamily font
:fontSize 16
:lineHeight 20})
(def chat-icon
{:margin 4
:borderRadius 50
:width 36
:height 36})
(def chat-icon-chat-list
(merge chat-icon
{:width 40
:height 40}))
(def chat-icon-menu-item
(merge chat-icon
{:width 24
:height 24}))
(def online-view
{:position :absolute
:bottom 0
:right 0
:width 20
:height 20
:borderRadius 50
:backgroundColor online-color
:borderWidth 2
:borderColor color-white})
(def online-view-menu-item
(merge online-view
{:width 15
:height 15}))
(def online-dot
{:position :absolute
:top 6
:width 4
:height 4
:borderRadius 50
:backgroundColor color-white})
(def online-dot-left (merge online-dot {:left 3}))
(def online-dot-right (merge online-dot {:left 9}))
(def online-dot-menu-item
(merge online-dot
{:top 4
:width 3
:height 3}))
(def online-dot-left-menu-item
(merge online-dot-menu-item {:left 1.7}))
(def online-dot-right-menu-item
(merge online-dot-menu-item {:left 6.3}))
(def container
{:width 44
:height 44})
(def container-chat-list
{:width 48
:height 48})
(def container-menu-item
{:width 32
:height 32})

12
src/syng_im/group_settings/screen.cljs
View File

@ -1,7 +1,6 @@
(ns syng-im.group-settings.screen
(:require-macros [syng-im.utils.views :refer [defview]])
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.resources :as res]
[syng-im.components.react :refer [view
text-input
text
@ -13,6 +12,7 @@
scroll-view
touchable-highlight]]
[syng-im.components.toolbar :refer [toolbar]]
[syng-im.components.chat-icon.screen :refer [chat-icon-view-action]]
[syng-im.components.realm :refer [list-view]]
[syng-im.components.styles :refer [color-purple
text2-color]]
@ -125,10 +125,12 @@
^{:key setting} [setting-view setting])]))
(defview chat-icon []
[name [:chat :name]
color [:chat :color]]
[view (st/chat-icon color)
[text {:style st/chat-icon-text} (nth name 0)]])
[chat-id [:chat :chat-id]
group-chat [:chat :group-chat]
name [:chat :name]
color [:chat :color]]
[view st/action
[chat-icon-view-action chat-id group-chat name color false]])
(defn new-group-toolbar []
[toolbar {:title "Chat settings"

20
src/syng_im/group_settings/styles/group_settings.cljs
View File

@ -52,21 +52,11 @@
(def chat-members-container
{:marginBottom 10})
(defn chat-icon [color]
{:margin 10
:width 36
:height 36
:alignItems :center
:justifyContent :center
:borderRadius 50
:backgroundColor color})
(def chat-icon-text
{:marginTop -2
:color color-white
:fontFamily font
:fontSize 16
:lineHeight 20})
(def action
{:width 56
:height 56
:alignItems :center
:justifyContent :center})
(def group-settings
{:flex 1