Chat name edit form. Fix styles.
This commit is contained in:
parent
6b54767b98
commit
bf6c419c5d
|
@ -16,6 +16,7 @@
|
|||
[syng-im.components.chat.new-participants :refer [new-participants]]
|
||||
[syng-im.components.chat.remove-participants :refer [remove-participants]]
|
||||
[syng-im.group-settings.group-settings :refer [group-settings]]
|
||||
[syng-im.group-settings.views.chat-name-edit :refer [chat-name-edit]]
|
||||
[syng-im.components.profile :refer [profile my-profile]]
|
||||
[syng-im.utils.logging :as log]
|
||||
[syng-im.utils.utils :refer [toast]]
|
||||
|
@ -48,6 +49,7 @@
|
|||
:chat-list [chats-list]
|
||||
:new-group [new-group]
|
||||
:group-settings [group-settings]
|
||||
:chat-name-edit [chat-name-edit]
|
||||
:contact-list [contact-list]
|
||||
:chat [chat]
|
||||
:profile [profile]
|
||||
|
|
|
@ -2,7 +2,8 @@
|
|||
|
||||
(def font "sans-serif")
|
||||
;; (def font "Avenir-Roman")
|
||||
(def title-font "sans-serif-medium")
|
||||
(def font-medium "sans-serif-medium")
|
||||
(def title-font font-medium)
|
||||
|
||||
(def color-blue "#7099e6")
|
||||
(def color-blue-transparent "#7099e632")
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
text2-color]]
|
||||
[syng-im.group-settings.styles.group-settings :as st]
|
||||
[syng-im.utils.listview :refer [to-realm-datasource]]
|
||||
[syng-im.group-settings.views.member :refer [contact-inner-view]]
|
||||
[syng-im.group-settings.views.member :refer [member-view]]
|
||||
[reagent.core :as r]))
|
||||
|
||||
(defn remove-member [{:keys [whisper-identity]}]
|
||||
|
@ -36,13 +36,13 @@
|
|||
[text {:style st/modal-remove-text}
|
||||
"Remove"]]]]])
|
||||
|
||||
(defn set-group-chat-name [chat-name]
|
||||
(dispatch [:set-group-chat-name chat-name]))
|
||||
|
||||
(defn chat-members [members]
|
||||
[view st/chat-members-container
|
||||
(for [member members]
|
||||
^{:key member} [contact-inner-view member])])
|
||||
^{:key member} [member-view member])])
|
||||
|
||||
(defn show-chat-name-edit []
|
||||
(dispatch [:navigate-to :chat-name-edit]))
|
||||
|
||||
(defn chat-icon []
|
||||
(let [chat-name (subscribe [:get-current-chat-name])]
|
||||
|
@ -63,12 +63,13 @@
|
|||
[new-group-toolbar]
|
||||
[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-chat-name}
|
||||
[view st/chat-name-value-container
|
||||
[text {:style st/chat-name-value}
|
||||
@chat-name]
|
||||
[touchable-highlight {:style st/chat-name-btn-edit-container
|
||||
:on-press show-chat-name-edit}
|
||||
[text {:style st/chat-name-btn-edit-text}
|
||||
"Edit"]]]
|
||||
[text {:style st/members-text}
|
||||
"Members"]
|
||||
[touchable-highlight {:on-press (fn []
|
||||
|
|
|
@ -0,0 +1,19 @@
|
|||
(ns syng-im.group-settings.styles.chat-name-edit
|
||||
(:require [syng-im.components.styles :refer [font
|
||||
color-white
|
||||
text1-color]]))
|
||||
|
||||
(def save-action-icon
|
||||
{:width 18
|
||||
:height 14})
|
||||
|
||||
(def chat-name-container
|
||||
{:flex 1
|
||||
:flexDirection :column
|
||||
:backgroundColor color-white})
|
||||
|
||||
(def chat-name-input
|
||||
{:marginLeft 12
|
||||
:fontSize 14
|
||||
:fontFamily font
|
||||
:color text1-color})
|
|
@ -1,5 +1,6 @@
|
|||
(ns syng-im.group-settings.styles.group-settings
|
||||
(:require [syng-im.components.styles :refer [font
|
||||
font-medium
|
||||
title-font
|
||||
color-white
|
||||
color-purple
|
||||
|
@ -63,22 +64,42 @@
|
|||
:marginLeft 16
|
||||
:marginBottom 16
|
||||
:color text2-color
|
||||
:fontFamily font
|
||||
:fontFamily font-medium
|
||||
:fontSize 14
|
||||
:lineHeight 20})
|
||||
|
||||
(def chat-name-input
|
||||
{:marginLeft 12
|
||||
:fontSize 14
|
||||
(def chat-name-value-container
|
||||
{:flexDirection :row
|
||||
:marginLeft 16
|
||||
:height 56
|
||||
:alignItems :center
|
||||
:justifyContent :center
|
||||
:borderBottomWidth 1
|
||||
:borderBottomColor separator-color})
|
||||
|
||||
(def chat-name-value
|
||||
{:flex 1
|
||||
:fontSize 16
|
||||
:fontFamily font
|
||||
:color text1-color})
|
||||
|
||||
(def chat-name-btn-edit-container
|
||||
{:padding 16
|
||||
:justifyContent :center})
|
||||
|
||||
(def chat-name-btn-edit-text
|
||||
{:marginTop -1
|
||||
:color text2-color
|
||||
:fontFamily font
|
||||
:fontSize 16
|
||||
:lineHeight 20})
|
||||
|
||||
(def members-text
|
||||
{:marginTop 24
|
||||
:marginLeft 16
|
||||
:marginBottom 16
|
||||
:color text2-color
|
||||
:fontFamily font
|
||||
:fontFamily font-medium
|
||||
:fontSize 14
|
||||
:lineHeight 20})
|
||||
|
||||
|
@ -90,15 +111,14 @@
|
|||
:height 17})
|
||||
|
||||
(def add-members-container
|
||||
{:flexDirection :row
|
||||
:marginBottom 16})
|
||||
{:flexDirection :row})
|
||||
|
||||
(def add-members-text
|
||||
{:marginTop 18
|
||||
:marginLeft 32
|
||||
:color text2-color
|
||||
:fontFamily font
|
||||
:fontSize 14
|
||||
:fontSize 16
|
||||
:lineHeight 20})
|
||||
|
||||
(def settings-text
|
||||
|
@ -106,6 +126,6 @@
|
|||
:marginLeft 16
|
||||
:marginBottom 16
|
||||
:color text2-color
|
||||
:fontFamily font
|
||||
:fontFamily font-medium
|
||||
:fontSize 14
|
||||
:lineHeight 20})
|
||||
|
|
|
@ -0,0 +1,33 @@
|
|||
(ns syng-im.group-settings.views.chat-name-edit
|
||||
(:require [reagent.core :as r]
|
||||
[re-frame.core :refer [subscribe dispatch dispatch-sync]]
|
||||
[syng-im.components.react :refer [view text-input]]
|
||||
[syng-im.components.toolbar :refer [toolbar]]
|
||||
[syng-im.group-settings.styles.chat-name-edit :as st]
|
||||
[syng-im.components.styles :refer [toolbar-background2
|
||||
text2-color]]))
|
||||
|
||||
(defn save-group-chat-name [chat-name]
|
||||
(dispatch [:set-group-chat-name chat-name])
|
||||
(dispatch [:navigate-back]))
|
||||
|
||||
(defn chat-name-edit-toolbar [chat-name]
|
||||
[toolbar {:background-color toolbar-background2
|
||||
:title "Edit chat name"
|
||||
;; TODO change to dark 'ok' icon
|
||||
:action {:image {:source {:uri :icon_ok}
|
||||
:style st/save-action-icon}
|
||||
:handler #(save-group-chat-name chat-name)}}])
|
||||
|
||||
(defn chat-name-edit []
|
||||
(let [current-chat-name (subscribe [:get-current-chat-name])
|
||||
chat-name (r/atom @current-chat-name)]
|
||||
(fn []
|
||||
[view st/chat-name-container
|
||||
[chat-name-edit-toolbar @chat-name]
|
||||
[text-input {:style st/chat-name-input
|
||||
:autoFocus true
|
||||
:placeholderTextColor text2-color
|
||||
:onChangeText (fn [text]
|
||||
(reset! chat-name text))}
|
||||
@chat-name]])))
|
|
@ -22,7 +22,7 @@
|
|||
[view st/online-dot-left]
|
||||
[view st/online-dot-right]]))
|
||||
|
||||
(defn contact-inner-view [{:keys [whisper-identity name photo-path online role]}]
|
||||
(defn member-view [{:keys [whisper-identity name photo-path online role]}]
|
||||
[view st/contact-container
|
||||
[view st/photo-container
|
||||
[contact-photo {:photo-path photo-path}]
|
||||
|
|
|
@ -94,7 +94,7 @@
|
|||
(register-sub :get-current-chat-name
|
||||
(fn [db _]
|
||||
(let [current-chat-id (current-chat-id @db)]
|
||||
(reaction (get-in @db (db/chat-name-path current-chat-id :name))))))
|
||||
(reaction (get-in @db (db/chat-name-path current-chat-id))))))
|
||||
|
||||
|
||||
;; -- User data --------------------------------------------------------------
|
||||
|
|
Loading…
Reference in New Issue