From 3f2416fafd9971c161cb03997fb88bf6237a3f43 Mon Sep 17 00:00:00 2001 From: Eric Dvorsak Date: Mon, 25 Sep 2017 12:46:31 +0200 Subject: [PATCH] refactor chat actions view --- src/status_im/chat/views/actions.cljs | 115 +++++++++++++------------- 1 file changed, 56 insertions(+), 59 deletions(-) diff --git a/src/status_im/chat/views/actions.cljs b/src/status_im/chat/views/actions.cljs index 39f4b702b5..143a184ab1 100644 --- a/src/status_im/chat/views/actions.cljs +++ b/src/status_im/chat/views/actions.cljs @@ -1,16 +1,12 @@ (ns status-im.chat.views.actions - (:require-macros [status-im.utils.views :refer [defview letsubs]]) - (:require [re-frame.core :refer [subscribe dispatch]] - [clojure.string :as s] - [status-im.components.react :refer [view - animated-view - text - icon - touchable-highlight]] - [status-im.components.chat-icon.screen :refer [chat-icon-view-menu-item]] - [status-im.chat.styles.screen :as st] - [status-im.i18n :refer [label label-pluralize]] - [status-im.utils.platform :refer [platform-specific]])) + (:require [clojure.string :as string] + [re-frame.core :as re-frame] + [status-im.chat.styles.screen :as styles] + [status-im.components.chat-icon.screen :as chat-icon.screen] + [status-im.components.react :as react] + [status-im.i18n :as i18n] + [status-im.utils.platform :as platform]) + (:require-macros [status-im.utils.views :refer [defview letsubs]])) (defview menu-item-icon-profile [] [chat-id [:chat :chat-id] @@ -18,15 +14,15 @@ name [:chat :name] color [:chat :color]] ;; TODO stub data ('online' property) - [chat-icon-view-menu-item chat-id group-chat name color true]) + [chat-icon.screen/chat-icon-view-menu-item chat-id group-chat name color true]) (defn- members-text [members] - (str (s/join ", " (map :name members)) + (str (string/join ", " (map :name members)) " " - (label :t/and-you))) + (i18n/label :t/and-you))) (defn item-members [members] - {:title (label :t/members-title) + {:title (i18n/label :t/members-title) :subtitle (members-text members) :icon :menu_group :icon-opts {:width 25 @@ -35,16 +31,16 @@ :handler nil}) (defn item-user [chat-id] - {:title (label :t/profile) + {:title (i18n/label :t/profile) :custom-icon [menu-item-icon-profile] :icon :menu_group :icon-style {:width 25 :height 19} - :handler #(dispatch [:show-profile chat-id])}) + :handler #(re-frame/dispatch [:show-profile chat-id])}) (def item-search - {:title (label :t/search-chat) - :subtitle (label :t/not-implemented) + {:title (i18n/label :t/search-chat) + :subtitle (i18n/label :t/not-implemented) :icon :search_gray_copy :icon-style {:width 17 :height 17} @@ -52,8 +48,8 @@ :handler nil}) (def item-notifications - {:title (label :t/notifications-title) - :subtitle (label :t/not-implemented) + {:title (i18n/label :t/notifications-title) + :subtitle (i18n/label :t/not-implemented) ;;:subtitle "Chat muted" :icon :muted :icon-style {:width 18 @@ -62,11 +58,12 @@ :handler nil}) (def item-settings - {:title (label :t/settings) - :icon :settings - :icon-style {:width 20 - :height 13} - :handler #(dispatch [:show-group-chat-settings])}) + {:title (i18n/label :t/settings) + :icon :settings + :icon-style {:width 20 + :height 13} + :accessibility-label :settings + :handler #(re-frame/dispatch [:show-group-chat-settings])}) (defn group-chat-items [members public?] (into (if public? [] [(item-members members)]) @@ -80,58 +77,58 @@ item-notifications]) (defn overlay [{:keys [on-click-outside]} items] - [view st/actions-overlay - [touchable-highlight {:on-press on-click-outside - :style st/overlay-highlight} - [view nil]] + [react/view styles/actions-overlay + [react/touchable-highlight {:on-press on-click-outside + :style styles/overlay-highlight} + [react/view nil]] items]) -(defn action-view [{:keys [icon-style +(defn action-view [{:keys [react/icon-style + icon custom-icon handler title subtitle accessibility-label] - :or {accessibility-label :action} - icon-name :icon}] - [touchable-highlight {:on-press (fn [] - (dispatch [:set-chat-ui-props {:show-actions? false}]) - (when handler - (handler)))} - [view {:accessibility-label accessibility-label - :style st/action-icon-row} - [view st/action-icon-view + :or {accessibility-label :action}}] + [react/touchable-highlight {:on-press (fn [] + (re-frame/dispatch [:set-chat-ui-props {:show-actions? false}]) + (when handler + (handler)))} + [react/view {:accessibility-label accessibility-label + :style styles/action-icon-row} + [react/view styles/action-icon-view (or custom-icon - [icon icon-name icon-style]) - [view st/action-view - [text {:style st/action-title - :number-of-lines 1 - :font :medium} - title] - (when-let [subtitle subtitle] - [text {:style st/action-subtitle - :number-of-lines 1 - :font :default} - subtitle])]]]]) + [react/icon icon icon-style])] + [react/view styles/action-view + [react/text {:style styles/action-title + :number-of-lines 1 + :font :medium} + title] + (when-let [subtitle subtitle] + [react/text {:style styles/action-subtitle + :number-of-lines 1 + :font :default} + subtitle])]]]) (defview actions-list-view [] (letsubs [group-chat [:chat :group-chat] chat-id [:chat :chat-id] public? [:chat :public?] members [:current-chat-contacts] - status-bar-height (get-in platform-specific [:component-styles :status-bar :default :height])] + status-bar-height (get-in platform/platform-specific [:component-styles :status-bar :default :height])] (when-let [actions (if group-chat (group-chat-items members public?) (user-chat-items chat-id))] - [view (merge - (st/actions-wrapper status-bar-height) - (get-in platform-specific [:component-styles :actions-list-view])) - [view st/actions-separator] - [view st/actions-view + [react/view (merge + (styles/actions-wrapper status-bar-height) + (get-in platform/platform-specific [:component-styles :actions-list-view])) + [react/view styles/actions-separator] + [react/view styles/actions-view (for [action actions] (if action ^{:key action} [action-view action]))]]))) (defn actions-view [] - [overlay {:on-click-outside #(dispatch [:set-chat-ui-props {:show-actions? false}])} + [overlay {:on-click-outside #(re-frame/dispatch [:set-chat-ui-props {:show-actions? false}])} [actions-list-view]])