status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feature #1969 - public chats teaser in discover

This commit is contained in:
Goran Jovic 2017-10-05 10:07:00 +02:00 committed by Roman Volosovskyi
parent 34c3295f84
commit ba5bd2b511
4 changed files with 100 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/status_im/translations/en.cljs
View File

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

6
src/status_im/ui/screens/discover/components/views.cljs
View File

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

61
src/status_im/ui/screens/discover/styles.cljs
View File

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

51
src/status_im/ui/screens/discover/views.cljs
View File

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