Group settings members
This commit is contained in:
virvar
parent
240569434c
commit
344f64b9f2
|
|
@ -13,8 +13,7 @@
|
|||
text2-color]]
|
||||
[syng-im.components.group-settings-styles :as st]
|
||||
[syng-im.utils.listview :refer [to-realm-datasource]]
|
||||
[syng-im.components.contact-list.contact-inner :refer [contact-inner-view]]
|
||||
[syng-im.components.chats.new-group-contact :refer [new-group-contact]]
|
||||
[syng-im.components.group-settings-member :refer [contact-inner-view]]
|
||||
[reagent.core :as r]))
|
||||
|
||||
(defn set-group-settings-name [chat-name]
|
||||
|
|
@ -26,9 +25,7 @@
|
|||
(defn chat-members [members]
|
||||
[view st/chat-members-container
|
||||
(for [member members]
|
||||
^{:key member} [contact-inner-view member]
|
||||
;; [new-group-contact member nil]
|
||||
)])
|
||||
^{:key member} [contact-inner-view member])])
|
||||
|
||||
(defn action-save []
|
||||
[touchable-highlight
|
||||
|
|
@ -37,7 +34,7 @@
|
|||
[text {:style st/save-btn-text} "S"]]])
|
||||
|
||||
(defn new-group-toolbar []
|
||||
[toolbar {:title "Chat settings"
|
||||
[toolbar {:title "Chat settings"
|
||||
:custom-action [action-save]}])
|
||||
|
||||
(defn group-settings []
|
||||
|
|
@ -46,24 +43,23 @@
|
|||
(fn []
|
||||
[view st/group-settings
|
||||
[new-group-toolbar]
|
||||
[view st/properties-container
|
||||
[text {:style st/chat-name-text}
|
||||
"Chat name"]
|
||||
[text-input {:style st/chat-name-input
|
||||
:underlineColorAndroid color-purple
|
||||
:autoFocus true
|
||||
:placeholderTextColor text2-color
|
||||
:onChangeText set-group-settings-name}
|
||||
@chat-name]
|
||||
[text {:style st/members-text}
|
||||
"Members"]
|
||||
[touchable-highlight {:on-press (fn []
|
||||
;; TODO not implemented
|
||||
)}
|
||||
[view st/add-members-container
|
||||
[icon :add-gray st/add-members-icon]
|
||||
[text {:style st/add-members-text}
|
||||
"Add members"]]]
|
||||
[chat-members (vals (js->clj @members :keywordize-keys true))]
|
||||
[text {:style st/settings-text}
|
||||
"Settings"]]])))
|
||||
[text {:style st/chat-name-text}
|
||||
"Chat name"]
|
||||
[text-input {:style st/chat-name-input
|
||||
:underlineColorAndroid color-purple
|
||||
:autoFocus true
|
||||
:placeholderTextColor text2-color
|
||||
:onChangeText set-group-settings-name}
|
||||
@chat-name]
|
||||
[text {:style st/members-text}
|
||||
"Members"]
|
||||
[touchable-highlight {:on-press (fn []
|
||||
;; TODO not implemented
|
||||
)}
|
||||
[view st/add-members-container
|
||||
[icon :add-gray st/add-members-icon]
|
||||
[text {:style st/add-members-text}
|
||||
"Add members"]]]
|
||||
[chat-members (vals (js->clj @members :keywordize-keys true))]
|
||||
[text {:style st/settings-text}
|
||||
"Settings"]])))
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
(ns syng-im.components.group-settings-member
|
||||
(:require [clojure.string :as s]
|
||||
[syng-im.components.react :refer [view image text icon touchable-highlight]]
|
||||
[syng-im.resources :as res]
|
||||
[syng-im.components.group-settings-member-styles :as st]))
|
||||
|
||||
(defn contact-photo [{:keys [photo-path]}]
|
||||
[view st/contact-photo-container
|
||||
[image {:source (if (s/blank? photo-path)
|
||||
res/user-no-photo
|
||||
{: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 contact-inner-view [{:keys [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?
|
||||
"Noname")]
|
||||
;; TODO implement :role property for group chat contact
|
||||
(when role
|
||||
[text {:style st/role-text}
|
||||
role])]
|
||||
[touchable-highlight {:on-press (fn []
|
||||
;; TODO not implemented
|
||||
)}
|
||||
[view st/more-btn
|
||||
[icon :more-vertical st/more-btn-icon]]]])
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
(ns syng-im.components.group-settings-member-styles
|
||||
(:require [syng-im.components.styles :refer [font
|
||||
title-font
|
||||
text1-color
|
||||
text2-color
|
||||
color-white
|
||||
online-color]]))
|
||||
|
||||
(def search-icon
|
||||
{:width 17
|
||||
:height 17})
|
||||
|
||||
(def contacts-list-container
|
||||
{:flex 1
|
||||
:backgroundColor :white})
|
||||
|
||||
(def contacts-list
|
||||
{:backgroundColor :white})
|
||||
|
||||
(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})
|
||||
|
|
@ -34,11 +34,9 @@
|
|||
:flexDirection :column
|
||||
:backgroundColor color-white})
|
||||
|
||||
(def properties-container
|
||||
{:marginHorizontal 16})
|
||||
|
||||
(def chat-name-text
|
||||
{:marginTop 24
|
||||
:marginLeft 16
|
||||
:marginBottom 16
|
||||
:color text2-color
|
||||
:fontFamily font
|
||||
|
|
@ -46,13 +44,14 @@
|
|||
:lineHeight 20})
|
||||
|
||||
(def chat-name-input
|
||||
{:marginLeft -4
|
||||
{:marginLeft 12
|
||||
:fontSize 14
|
||||
:fontFamily font
|
||||
:color text1-color})
|
||||
|
||||
(def members-text
|
||||
{:marginTop 24
|
||||
:marginLeft 16
|
||||
:marginBottom 16
|
||||
:color text2-color
|
||||
:fontFamily font
|
||||
|
|
@ -61,6 +60,7 @@
|
|||
|
||||
(def add-members-icon
|
||||
{:marginVertical 19
|
||||
:marginLeft 19
|
||||
:marginHorizontal 3
|
||||
:width 17
|
||||
:height 17})
|
||||
|
|
@ -79,6 +79,7 @@
|
|||
|
||||
(def settings-text
|
||||
{:marginTop 24
|
||||
:marginLeft 16
|
||||
:marginBottom 16
|
||||
:color text2-color
|
||||
:fontFamily font
|
||||
|
|
|
|||
Loading…
Reference in New Issue