Group settings members

This commit is contained in:
virvar 2016-05-12 15:32:40 +03:00
parent 240569434c
commit 344f64b9f2
4 changed files with 156 additions and 31 deletions

View File

@ -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"]])))

View File

@ -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]]]])

View File

@ -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})

View File

@ -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