diff --git a/android/app/src/main/res/drawable-hdpi/icon_tab_chats.png b/android/app/src/main/res/drawable-hdpi/icon_tab_chats.png new file mode 100644 index 0000000000..c6792ef46c Binary files /dev/null and b/android/app/src/main/res/drawable-hdpi/icon_tab_chats.png differ diff --git a/android/app/src/main/res/drawable-hdpi/icon_tab_contacts.png b/android/app/src/main/res/drawable-hdpi/icon_tab_contacts.png new file mode 100644 index 0000000000..44ef070f46 Binary files /dev/null and b/android/app/src/main/res/drawable-hdpi/icon_tab_contacts.png differ diff --git a/android/app/src/main/res/drawable-hdpi/icon_tab_discovery.png b/android/app/src/main/res/drawable-hdpi/icon_tab_discovery.png new file mode 100644 index 0000000000..1166cab6f6 Binary files /dev/null and b/android/app/src/main/res/drawable-hdpi/icon_tab_discovery.png differ diff --git a/android/app/src/main/res/drawable-mdpi/icon_tab_chats.png b/android/app/src/main/res/drawable-mdpi/icon_tab_chats.png new file mode 100644 index 0000000000..8d9d11dbb0 Binary files /dev/null and b/android/app/src/main/res/drawable-mdpi/icon_tab_chats.png differ diff --git a/android/app/src/main/res/drawable-mdpi/icon_tab_contacts.png b/android/app/src/main/res/drawable-mdpi/icon_tab_contacts.png new file mode 100644 index 0000000000..ba6be3d17f Binary files /dev/null and b/android/app/src/main/res/drawable-mdpi/icon_tab_contacts.png differ diff --git a/android/app/src/main/res/drawable-mdpi/icon_tab_discovery.png b/android/app/src/main/res/drawable-mdpi/icon_tab_discovery.png new file mode 100644 index 0000000000..6b726371f7 Binary files /dev/null and b/android/app/src/main/res/drawable-mdpi/icon_tab_discovery.png differ diff --git a/android/app/src/main/res/drawable-xhdpi/icon_tab_chats.png b/android/app/src/main/res/drawable-xhdpi/icon_tab_chats.png new file mode 100644 index 0000000000..7c188096ad Binary files /dev/null and b/android/app/src/main/res/drawable-xhdpi/icon_tab_chats.png differ diff --git a/android/app/src/main/res/drawable-xhdpi/icon_tab_contacts.png b/android/app/src/main/res/drawable-xhdpi/icon_tab_contacts.png new file mode 100644 index 0000000000..29bbfd2a16 Binary files /dev/null and b/android/app/src/main/res/drawable-xhdpi/icon_tab_contacts.png differ diff --git a/android/app/src/main/res/drawable-xhdpi/icon_tab_discovery.png b/android/app/src/main/res/drawable-xhdpi/icon_tab_discovery.png new file mode 100644 index 0000000000..f40ba84519 Binary files /dev/null and b/android/app/src/main/res/drawable-xhdpi/icon_tab_discovery.png differ diff --git a/android/app/src/main/res/drawable-xxhdpi/icon_tab_chats.png b/android/app/src/main/res/drawable-xxhdpi/icon_tab_chats.png new file mode 100644 index 0000000000..82dbb8ff90 Binary files /dev/null and b/android/app/src/main/res/drawable-xxhdpi/icon_tab_chats.png differ diff --git a/android/app/src/main/res/drawable-xxhdpi/icon_tab_contacts.png b/android/app/src/main/res/drawable-xxhdpi/icon_tab_contacts.png new file mode 100644 index 0000000000..01e00d5632 Binary files /dev/null and b/android/app/src/main/res/drawable-xxhdpi/icon_tab_contacts.png differ diff --git a/android/app/src/main/res/drawable-xxhdpi/icon_tab_discovery.png b/android/app/src/main/res/drawable-xxhdpi/icon_tab_discovery.png new file mode 100644 index 0000000000..8bc25d2ab3 Binary files /dev/null and b/android/app/src/main/res/drawable-xxhdpi/icon_tab_discovery.png differ diff --git a/android/app/src/main/res/drawable-xxxhdpi/icon_tab_chats.png b/android/app/src/main/res/drawable-xxxhdpi/icon_tab_chats.png new file mode 100644 index 0000000000..c434e66588 Binary files /dev/null and b/android/app/src/main/res/drawable-xxxhdpi/icon_tab_chats.png differ diff --git a/android/app/src/main/res/drawable-xxxhdpi/icon_tab_contacts.png b/android/app/src/main/res/drawable-xxxhdpi/icon_tab_contacts.png new file mode 100644 index 0000000000..faa0af93ce Binary files /dev/null and b/android/app/src/main/res/drawable-xxxhdpi/icon_tab_contacts.png differ diff --git a/android/app/src/main/res/drawable-xxxhdpi/icon_tab_discovery.png b/android/app/src/main/res/drawable-xxxhdpi/icon_tab_discovery.png new file mode 100644 index 0000000000..cfc93ab11a Binary files /dev/null and b/android/app/src/main/res/drawable-xxxhdpi/icon_tab_discovery.png differ diff --git a/src/syng_im/components/chats/chats_list.cljs b/src/syng_im/components/chats/chats_list.cljs index 2b63d8d76f..5206b2f013 100644 --- a/src/syng_im/components/chats/chats_list.cljs +++ b/src/syng_im/components/chats/chats_list.cljs @@ -7,6 +7,7 @@ touchable-highlight navigator]] [syng-im.components.realm :refer [list-view]] + [syng-im.components.main-tabs :refer [main-tabs]] [syng-im.utils.logging :as log] [syng-im.navigation :refer [nav-pop]] [syng-im.resources :as res] @@ -28,13 +29,13 @@ (defn chats-list-toolbar [] [toolbar {:nav-action {:image {:source {:uri "icon_hamburger"} - :style {:width 16 - :height 12}} + :style {:width 16 + :height 12}} :handler open-drawer} :title "Chats" - :action {:image {:source {:uri "icon_search"} - :style {:width 17 - :height 17}} + :action {:image {:source {:uri "icon_search"} + :style {:width 17 + :height 17}} :handler (fn [])}}]) (defn chats-list [{:keys [navigator]}] @@ -48,11 +49,13 @@ :backgroundColor "white"}} [chats-list-toolbar] [list-view {:dataSource datasource - :enableEmptySections true + :enableEmptySections true :renderRow (fn [row section-id row-id] (r/as-element [chat-list-item row navigator])) :style {:backgroundColor "white"}}] - [action-button {:buttonColor color-blue} + [action-button {:buttonColor color-blue + :offsetY 72 + :offsetX 16} [action-button-item {:title "New Chat" :buttonColor "#9b59b6" :onPress #(dispatch [:navigate-to @@ -68,4 +71,5 @@ [icon {:name "person-stalker" :style {:fontSize 20 :height 22 - :color "white"}}]]]]])))) + :color "white"}}]]] + [main-tabs]]])))) diff --git a/src/syng_im/components/contact_list/contact_list.cljs b/src/syng_im/components/contact_list/contact_list.cljs index 70d5145a9e..703614c8ef 100644 --- a/src/syng_im/components/contact_list/contact_list.cljs +++ b/src/syng_im/components/contact_list/contact_list.cljs @@ -7,6 +7,7 @@ navigator list-view list-item]] [syng-im.components.contact-list.contact :refer [contact-view]] + [syng-im.components.main-tabs :refer [main-tabs]] [syng-im.components.styles :refer [font title-font color-white @@ -49,4 +50,5 @@ [list-view {:dataSource contacts-ds :enableEmptySections true :renderRow (partial render-row navigator) - :style {:backgroundColor "white"}}])])))) + :style {:backgroundColor "white"}}]) + [main-tabs]])))) diff --git a/src/syng_im/components/discovery/discovery.cljs b/src/syng_im/components/discovery/discovery.cljs index 7d0732e396..8d6ea4ad4d 100644 --- a/src/syng_im/components/discovery/discovery.cljs +++ b/src/syng_im/components/discovery/discovery.cljs @@ -11,10 +11,10 @@ text-input]] [reagent.core :as r] [syng-im.components.toolbar :refer [toolbar]] + [syng-im.components.main-tabs :refer [main-tabs]] [syng-im.components.discovery.discovery-popular :refer [discovery-popular]] [syng-im.components.discovery.discovery-recent :refer [discovery-recent]] - [syng-im.components.discovery.styles :as st] - [syng-im.persistence.realm :as realm])) + [syng-im.components.discovery.styles :as st])) (def search-input (atom {:search "x"})) @@ -55,11 +55,11 @@ (fn [] [view {:style {:flex 1 :backgroundColor "#eef2f5"}} - [toolbar {:style st/discovery-toolbar - :navigator navigator - :nav-action {:image {:source {:uri "icon_hamburger"} - :style {:width 16 - :height 12}} + [toolbar {:style st/discovery-toolbar + :navigator navigator + :nav-action {:image {:source {:uri "icon_hamburger"} + :style {:width 16 + :height 12}} :handler create-fake-discovery} :title "Add Participants" :custom-content [title-content @showSearch] @@ -76,8 +76,5 @@ [discovery-popular navigator] [view {:style st/section-spacing} [text {:style st/discovery-subtitle} "Recent"]] - [discovery-recent]]]))) - (comment - (def page-width (aget (natal-shell.dimensions/get "window") "width")) - (def page-height (aget (natal-shell.dimensions/get "window") "height")) - ) + [discovery-recent]] + [main-tabs]]))) diff --git a/src/syng_im/components/main-tabs.cljs b/src/syng_im/components/main-tabs.cljs new file mode 100644 index 0000000000..479ba57511 --- /dev/null +++ b/src/syng_im/components/main-tabs.cljs @@ -0,0 +1,30 @@ +(ns syng-im.components.main-tabs + (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] + [syng-im.components.react :refer [view + text-input + text + image + touchable-highlight]] + [syng-im.components.tabs.tabs :refer [tabs]] + [syng-im.utils.logging :as log])) + +(defn main-tabs [] + (let [view-id (subscribe [:view-id])] + (fn [] + [tabs {:selected-index (case @view-id + :chat-list 0 + :discovery 1 + :contact-list 2 + 0) + :tab-list [{:handler #(dispatch [:navigate-to + :chat-list]) + :title "Chats" + :icon "icon_tab_chats"} + {:handler #(dispatch [:navigate-to + :discovery]) + :title "Discover" + :icon "icon_tab_discovery"} + {:handler #(dispatch [:navigate-to + :contact-list]) + :title "Contacts" + :icon "icon_tab_contacts"}]}]))) diff --git a/src/syng_im/components/tabs/styles.cljs b/src/syng_im/components/tabs/styles.cljs new file mode 100644 index 0000000000..aa3db83074 --- /dev/null +++ b/src/syng_im/components/tabs/styles.cljs @@ -0,0 +1,49 @@ +(ns syng-im.components.tabs.styles + (:require [syng-im.components.styles :refer [font + title-font + color-white + chat-background + online-color + selected-message-color + separator-color + text1-color + text2-color + toolbar-background1]])) + +(def tab-height 56) + +(def tabs + {:flexDirection :row + :position :absolute + :bottom 0 + :right 0 + :left 0, + :height tab-height + :opacity 1 + :backgroundColor :white + :justifyContent :center + :alignItems :center + :borderTopColor "#1c18354c" + :borderTopWidth 1}) + +(def tab + {:flex 1 + :height tab-height + :justifyContent :center + :alignItems :center}) + +(def tab-title + {:fontFamily "sans-serif" + :fontSize 14 + :color "#6e93d8"}) + +(def tab-icon + {:width 24 + :height 24 + :marginBottom 2}) + +(def tab-container + {:flex 1 + :height tab-height + :justifyContent :center + :alignItems :center}) \ No newline at end of file diff --git a/src/syng_im/components/tabs/tab.cljs b/src/syng_im/components/tabs/tab.cljs new file mode 100644 index 0000000000..af9aeab37c --- /dev/null +++ b/src/syng_im/components/tabs/tab.cljs @@ -0,0 +1,20 @@ +(ns syng-im.components.tabs.tab + (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] + [syng-im.components.react :refer [view + text-input + text + image + touchable-highlight]] + [reagent.core :as r] + [syng-im.components.tabs.styles :as st])) + +(defn tab [{:keys [handler title icon selected-index index]}] + (fn [{:keys [handler title icon selected-index index]}] + [touchable-highlight {:style st/tab + :onPress #(do (reset! selected-index index) + (handler))} + [view {:style st/tab-container} + [image {:source {:uri icon} + :style st/tab-icon}] + (when (= @selected-index index) + [text {:style st/tab-title} title])]])) diff --git a/src/syng_im/components/tabs/tabs.cljs b/src/syng_im/components/tabs/tabs.cljs new file mode 100644 index 0000000000..d9fd94be55 --- /dev/null +++ b/src/syng_im/components/tabs/tabs.cljs @@ -0,0 +1,23 @@ +(ns syng-im.components.tabs.tabs + (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] + [syng-im.components.react :refer [view + text-input + text + image + touchable-highlight]] + [reagent.core :as r] + [syng-im.components.tabs.styles :as st] + [syng-im.components.tabs.tab :refer [tab]])) + +(defn create-tab [index data selected-index] + (let [data (merge data {:key index + :index index + :selected-index selected-index})] + [tab data])) + +(defn tabs [{:keys [style tab-list selected-index]}] + (let [selected-index (r/atom selected-index)] + (fn [{:keys [style tab-list]}] + (let [style (merge st/tabs style)] + [view {:style style} + (doall (map-indexed #(create-tab %1 %2 selected-index) tab-list))]))))