From ba5bd2b51171e4d29441d86e9d214b6b07e0cc35 Mon Sep 17 00:00:00 2001 From: Goran Jovic Date: Thu, 5 Oct 2017 10:07:00 +0200 Subject: [PATCH] feature #1969 - public chats teaser in discover --- src/status_im/translations/en.cljs | 3 + .../ui/screens/discover/components/views.cljs | 6 +- src/status_im/ui/screens/discover/styles.cljs | 61 +++++++++++++++---- src/status_im/ui/screens/discover/views.cljs | 51 +++++++++++++--- 4 files changed, 100 insertions(+), 21 deletions(-) diff --git a/src/status_im/translations/en.cljs b/src/status_im/translations/en.cljs index 03f493c69e..2d9a91ccb5 100644 --- a/src/status_im/translations/en.cljs +++ b/src/status_im/translations/en.cljs @@ -165,6 +165,9 @@ :no-statuses-found "No statuses found" :chat "Chat" :all "All" + :public-chats "Public chats" + :soon "Soon" + :public-chat-user-count "{{count}} people" ;;settings :settings "Settings" diff --git a/src/status_im/ui/screens/discover/components/views.cljs b/src/status_im/ui/screens/discover/components/views.cljs index ed4f580a05..14a4f84fa1 100644 --- a/src/status_im/ui/screens/discover/components/views.cljs +++ b/src/status_im/ui/screens/discover/components/views.cljs @@ -12,14 +12,16 @@ [status-im.components.icons.vector-icons :as vi] [status-im.i18n :as i18n])) -(defn title [label-kw action-kw action-fn] +(defn title [label-kw action-kw action-fn active?] [react/view st/title [react/text {:style (get-in platform/platform-specific [:component-styles :discover :subtitle]) :uppercase? (get-in platform/platform-specific [:discover :uppercase-subtitles?]) :font :medium} (i18n/label label-kw)] [react/touchable-highlight {:on-press action-fn} - [react/view {} [react/text {:style st/title-action-text} (i18n/label action-kw)]]]]) + [react/view {} + [react/text {:style (st/title-action-text active?)} + (i18n/label action-kw)]]]]) (defn tags-menu [tags] [react/view st/tag-title-container diff --git a/src/status_im/ui/screens/discover/styles.cljs b/src/status_im/ui/screens/discover/styles.cljs index 32de598b94..92cf997610 100644 --- a/src/status_im/ui/screens/discover/styles.cljs +++ b/src/status_im/ui/screens/discover/styles.cljs @@ -1,8 +1,6 @@ (ns status-im.ui.screens.discover.styles (:require-macros [status-im.utils.styles :refer [defnstyle]]) - (:require [status-im.components.styles :refer [color-white - color-light-gray - color-blue]] + (:require [status-im.components.styles :as styles] [status-im.components.toolbar.styles :refer [toolbar-background2]] [status-im.components.tabs.styles :as tabs-st] [status-im.utils.platform :as p])) @@ -22,7 +20,7 @@ (def empty-view {:flex 1 - :background-color color-white + :background-color styles/color-white :align-items :center :justify-content :center}) @@ -40,7 +38,7 @@ {}) (def tag-button - {:color color-blue + {:color styles/color-blue :font-size 14 :padding-right 5 :padding-bottom 2 @@ -48,7 +46,7 @@ :justify-content :center}) (def tag-name - {:color color-blue + {:color styles/color-blue :background-color :white :font-size 14 :align-items :center @@ -137,7 +135,7 @@ (def discover-tag-container {:flex 1 - :backgroundColor color-light-gray}) + :backgroundColor styles/color-light-gray}) (def tag-title-scroll {:flex 1 @@ -151,7 +149,7 @@ :flex-direction "row"}) (def tag-title - {:color color-blue + {:color styles/color-blue :font-size 14 :padding-right 5 :padding-bottom 2}) @@ -166,7 +164,7 @@ (def discover-container {:flex 1 - :backgroundColor color-white}) + :backgroundColor styles/color-white}) (def list-container {:flex 1}) @@ -175,8 +173,10 @@ {:width 17 :height 17}) -(def title-action-text - {:color "rgb(110, 0, 228)"}) +(defn title-action-text [active?] + {:color (if active? + styles/color-blue + styles/color-gray-transparent)}) (def recent-statuses-preview-container {:background-color toolbar-background2}) @@ -188,4 +188,41 @@ :margin-top 2 :margin-bottom 4 :margin-right 2 - :background-color :white}) \ No newline at end of file + :background-color :white}) + +(def public-chats-item-container + {:flex-direction :row + :padding 3}) + +(def public-chats-icon-width-ratio + 0.15) + +(def public-chats-icon-container + {:flex public-chats-icon-width-ratio}) + +(defn public-chats-icon [color] + {:width 50 + :height 50 + :border-radius 25 + :background-color color + :flex-direction :row + :justify-content :center + :align-items :center}) + +(def public-chats-icon-text + {:font-size 25 + :color styles/color-gray-transparent-light}) + +(def public-chats-item-inner + {:flex (- 1 public-chats-icon-width-ratio) + :margin-left 10 + :flex-direction :column}) + +(def public-chats-item-name-container + {:flex-direction :row}) + +(def public-chats-item-name-text + {:color styles/color-gray-transparent + :font-weight :bold + :font-size 16 + :margin-left 5}) \ No newline at end of file diff --git a/src/status_im/ui/screens/discover/views.cljs b/src/status_im/ui/screens/discover/views.cljs index 83ead15de8..a2e083f760 100644 --- a/src/status_im/ui/screens/discover/views.cljs +++ b/src/status_im/ui/screens/discover/views.cljs @@ -13,7 +13,8 @@ [status-im.utils.platform :as platform] [status-im.i18n :as i18n] [status-im.ui.screens.discover.styles :as styles] - [status-im.ui.screens.contacts.styles :as contacts-st])) + [status-im.ui.screens.contacts.styles :as contacts-st] + [status-im.components.list.views :as components.list])) (defn get-hashtags [status] (let [hashtags (map #(str/lower-case (str/replace % #"#" "")) (re-seq #"[^ !?,;:.]+" status))] @@ -30,7 +31,7 @@ :on-search-submit (fn [text] (when-not (str/blank? text) (let [hashtags (get-hashtags text)] - ;TODO (goranjovic) - refactor double dispatch to a single call + ;; TODO (goranjovic) - refactor double dispatch to a single call (re-frame/dispatch [:set :discover-search-tags hashtags]) (re-frame/dispatch [:navigate-to :discover-search-results]))))}]) @@ -41,7 +42,7 @@ (get-in platform/platform-specific [:component-styles :discover :popular])) [react/view styles/row [react/view {} - ;TODO (goranjovic) - refactor double dispatch to a single call + ;; TODO (goranjovic) - refactor double dispatch to a single call [react/touchable-highlight {:on-press #(do (re-frame/dispatch [:set :discover-search-tags [tag]]) (re-frame/dispatch [:navigate-to :discover-search-results]))} [react/view {} @@ -59,9 +60,9 @@ (defview popular-hashtags-preview [{:keys [contacts current-account]}] (letsubs [popular-tags [:get-popular-tags 10]] [react/view styles/popular-container - ;TODO (goranjovic) - refactor double dispatch to a single call + ;; TODO (goranjovic) - refactor double dispatch to a single call [components/title :t/popular-tags :t/all #(do (re-frame/dispatch [:set :discover-search-tags (map :name popular-tags)]) - (re-frame/dispatch [:navigate-to :discover-all-hashtags]))] + (re-frame/dispatch [:navigate-to :discover-all-hashtags])) true] (if (seq popular-tags) [carousel/carousel {:pageStyle styles/carousel-page-style :gap 8 @@ -83,7 +84,7 @@ (defn recent-statuses-preview [current-account discoveries] [react/view styles/recent-statuses-preview-container - [components/title :t/recent :t/all #(re-frame/dispatch [:navigate-to :discover-all-recent])] + [components/title :t/recent :t/all #(re-frame/dispatch [:navigate-to :discover-all-recent]) true] (if (seq discoveries) [carousel/carousel {:pageStyle styles/carousel-page-style :gap 8 @@ -96,6 +97,41 @@ :current-account current-account}]])] [react/text (i18n/label :t/none)])]) +(def public-chats-mock-data + [{:name "Status team" + :count 25 + :color "#B2F3E3"} + {:name "ETH news" + :count 12 + :color "#F7A7E8"} + {:name "All about Ethereum" + :count 32 + :color "#C1B8F0"}]) + +(defn render-public-chats-item [item] + [react/view styles/public-chats-item-container + [react/view styles/public-chats-icon-container + [react/view (styles/public-chats-icon (:color item)) + [react/text {:style styles/public-chats-icon-text} + (-> item :name first str)]]] + [react/view styles/public-chats-item-inner + [react/view styles/public-chats-item-name-container + ;; TODO(goranjovic) lightgray intentionally hardcoded while only a teaser + ;; will be removed and properly styled when enabled + [vi/icon :icons/public {:color "lightgray"}] + [react/text {:font :medium + :style styles/public-chats-item-name-text} + (:name item)]] + [react/view {} + [react/text {:style {:color :lightgray}} + (i18n/label :t/public-chat-user-count {:count (:count item)})]]]]) + +(defn public-chats-teaser [] + [react/view {} + [components/title :t/public-chats :t/soon #() false] + [components.list/flat-list {:data public-chats-mock-data + :render-fn render-public-chats-item}]]) + (defview discover [current-view?] (letsubs [show-search [:get-in [:toolbar-search :show]] search-text [:get-in [:toolbar-search :text]] @@ -109,5 +145,6 @@ [react/scroll-view styles/list-container [recent-statuses-preview current-account discoveries] [popular-hashtags-preview {:contacts contacts - :current-account current-account}]] + :current-account current-account}] + [public-chats-teaser]] [empty-discoveries])]))