diff --git a/src/syng_im/components/group_settings.cljs b/src/syng_im/components/group_settings.cljs index b1777e659a..2181daa471 100644 --- a/src/syng_im/components/group_settings.cljs +++ b/src/syng_im/components/group_settings.cljs @@ -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"]]))) diff --git a/src/syng_im/components/group_settings_member.cljs b/src/syng_im/components/group_settings_member.cljs new file mode 100644 index 0000000000..892de6c485 --- /dev/null +++ b/src/syng_im/components/group_settings_member.cljs @@ -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]]]]) diff --git a/src/syng_im/components/group_settings_member_styles.cljs b/src/syng_im/components/group_settings_member_styles.cljs new file mode 100644 index 0000000000..122802f4f3 --- /dev/null +++ b/src/syng_im/components/group_settings_member_styles.cljs @@ -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}) diff --git a/src/syng_im/components/group_settings_styles.cljs b/src/syng_im/components/group_settings_styles.cljs index 111a166fe7..498c212ed8 100644 --- a/src/syng_im/components/group_settings_styles.cljs +++ b/src/syng_im/components/group_settings_styles.cljs @@ -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