Chat icon component
This commit is contained in:
virvar
parent
a5350f9b9b
commit
4ce65b37f9
|
|
@ -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]}
|
||||
|
|
|
|||
|
|
@ -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}))
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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}])
|
||||
|
|
@ -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})
|
||||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue