status-im/status-mobile
2
0
Fork 0
mirror of https://github.com/status-im/status-mobile.git synced 2025-01-14 02:35:54 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #137 from status-im/fix/single-drawer

Browse Source 
Single drawer

Former-commit-id: 5271fa71019712574197b682cb6f64769929d37c
This commit is contained in:
Roman Volosovskyi 2016-06-22 10:49:22 +03:00 committed by GitHub
commit 5b02dcc928
4 changed files with 98 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/status_im/chats_list/screen.cljs
View File

@ -13,7 +13,7 @@
[status-im.chats-list.views.chat-list-item :refer [chat-list-item]] [status-im.chats-list.views.chat-list-item :refer [chat-list-item]]
[status-im.components.action-button :refer [action-button [status-im.components.action-button :refer [action-button
action-button-item]] action-button-item]]
[status-im.components.drawer.view :refer [drawer-view open-drawer]] [status-im.components.drawer.view :refer [open-drawer]]
[status-im.components.styles :refer [color-blue [status-im.components.styles :refer [color-blue
toolbar-background1 toolbar-background1
toolbar-background2]] toolbar-background2]]
@ -46,41 +46,40 @@
content-height (r/atom 0)] content-height (r/atom 0)]
(dispatch [:set :chats-scrolled? false]) (dispatch [:set :chats-scrolled? false])
(fn [] (fn []
[drawer-view [view st/chats-container
[view st/chats-container [chats-list-toolbar]
[chats-list-toolbar] [list-view {:dataSource (to-datasource @chats)
[list-view {:dataSource (to-datasource @chats) :renderRow (fn [row _ _]
:renderRow (fn [row _ _] (list-item [chat-list-item row]))
(list-item [chat-list-item row])) :style st/list-container
:style st/list-container ;;; if "maximazing" chat list will make scroll to 0,
;;; if "maximazing" chat list will make scroll to 0, ;;; then disable maximazing
;;; then disable maximazing :onLayout (fn [event]
:onLayout (fn [event] (when-not @chats-scrolled?
(when-not @chats-scrolled? (let [height (.. event -nativeEvent -layout -height)]
(let [height (.. event -nativeEvent -layout -height)] (reset! container-height height))))
(reset! container-height height)))) :onContentSizeChange (fn [width height]
:onContentSizeChange (fn [width height] (reset! content-height height))
(reset! content-height height)) :onScroll (fn [e]
:onScroll (fn [e] (let [offset (.. e -nativeEvent -contentOffset -y)
(let [offset (.. e -nativeEvent -contentOffset -y) min-content-height (+ @container-height tabs-height)
min-content-height (+ @container-height tabs-height) scrolled? (and (< 0 offset) (< min-content-height @content-height))]
scrolled? (and (< 0 offset) (< min-content-height @content-height))] (dispatch [:set :chats-scrolled? scrolled?])
(dispatch [:set :chats-scrolled? scrolled?]) (dispatch [:set-animation :tabs-bar-animation? true])))}]
(dispatch [:set-animation :tabs-bar-animation? true])))}] [animated-view {:style (st/action-buttons-container @animation? (or @tabs-bar-value 0))
[animated-view {:style (st/action-buttons-container @animation? (or @tabs-bar-value 0)) :pointerEvents :box-none}
:pointerEvents :box-none} [action-button {:buttonColor color-blue
[action-button {:buttonColor color-blue :offsetY 16
:offsetY 16 :offsetX 16}
:offsetX 16} [action-button-item
[action-button-item {:title (label :t/new-chat)
{:title (label :t/new-chat) :buttonColor :#9b59b6
:buttonColor :#9b59b6 :onPress #(dispatch [:show-group-contacts :people])}
:onPress #(dispatch [:show-group-contacts :people])} [icon {:name :android-create
[icon {:name :android-create :style st/create-icon}]]
:style st/create-icon}]] [action-button-item
[action-button-item {:title (label :t/new-group-chat)
{:title (label :t/new-group-chat) :buttonColor :#1abc9c
:buttonColor :#1abc9c :onPress #(dispatch [:show-group-new])}
:onPress #(dispatch [:show-group-new])} [icon {:name :person-stalker
[icon {:name :person-stalker :style st/person-stalker-icon}]]]]])))
:style st/person-stalker-icon}]]]]]])))

14
src/status_im/components/main_tabs.cljs
View File

@ -10,6 +10,7 @@
image image
touchable-highlight touchable-highlight
get-dimensions]] get-dimensions]]
[status-im.components.drawer.view :refer [drawer-view]]
[status-im.components.animation :as anim] [status-im.components.animation :as anim]
[status-im.chats-list.screen :refer [chats-list]] [status-im.chats-list.screen :refer [chats-list]]
[status-im.discovery.screen :refer [discovery]] [status-im.discovery.screen :refer [discovery]]
@ -101,9 +102,10 @@
(defview main-tabs [] (defview main-tabs []
[view-id [:get :view-id] [view-id [:get :view-id]
tab-animation? [:get :prev-tab-view-id]] tab-animation? [:get :prev-tab-view-id]]
[view {:style common-st/flex} [drawer-view
[view {:style common-st/flex [view {:style common-st/flex}
:pointerEvents (if tab-animation? :none :auto)} [view {:style common-st/flex
(doall (map #(tab-view %) tab-list))] :pointerEvents (if tab-animation? :none :auto)}
[tabs {:selected-view-id view-id (doall (map #(tab-view %) tab-list))]
:tab-list tab-list}]]) [tabs {:selected-view-id view-id
:tab-list tab-list}]]])

71
src/status_im/contacts/screen.cljs
View File

@ -13,7 +13,7 @@
action-button-item]] action-button-item]]
[status-im.contacts.views.contact :refer [contact-extended-view]] [status-im.contacts.views.contact :refer [contact-extended-view]]
[status-im.components.toolbar :refer [toolbar]] [status-im.components.toolbar :refer [toolbar]]
[status-im.components.drawer.view :refer [drawer-view open-drawer]] [status-im.components.drawer.view :refer [open-drawer]]
[status-im.components.icons.ionicons :refer [icon]] [status-im.components.icons.ionicons :refer [icon]]
[status-im.components.styles :refer [color-blue [status-im.components.styles :refer [color-blue
hamburger-icon hamburger-icon
@ -63,38 +63,37 @@
contcats-count (subscribe [:contacts-count]) contcats-count (subscribe [:contacts-count])
show-toolbar-shadow? (r/atom false)] show-toolbar-shadow? (r/atom false)]
(fn [] (fn []
[drawer-view [view st/contacts-list-container
[view st/contacts-list-container [contact-list-toolbar]
[contact-list-toolbar] [view {:style st/toolbar-shadow}
[view {:style st/toolbar-shadow} (when @show-toolbar-shadow?
(when @show-toolbar-shadow? [linear-gradient {:style st/contact-group-header-gradient-bottom
[linear-gradient {:style st/contact-group-header-gradient-bottom :colors st/contact-group-header-gradient-bottom-colors}])]
:colors st/contact-group-header-gradient-bottom-colors}])] (if (pos? @contcats-count)
(if (pos? @contcats-count) [scroll-view {:style st/contact-groups
[scroll-view {:style st/contact-groups :onScroll (fn [e]
:onScroll (fn [e] (let [offset (.. e -nativeEvent -contentOffset -y)]
(let [offset (.. e -nativeEvent -contentOffset -y)] (reset! show-toolbar-shadow? (<= st/contact-group-header-height offset))))}
(reset! show-toolbar-shadow? (<= st/contact-group-header-height offset))))} ;; TODO not implemented: dapps and persons separation
;; TODO not implemented: dapps and persons separation [contact-group
[contact-group @contacts
@contacts @contcats-count
@contcats-count (label :t/contacs-group-dapps)
(label :t/contacs-group-dapps) :dapps true]
:dapps true] [contact-group
[contact-group @contacts
@contacts @contcats-count
@contcats-count (label :t/contacs-group-people)
(label :t/contacs-group-people) :people false]]
:people false]] [view st/empty-contact-groups
[view st/empty-contact-groups [react/icon :group_big st/empty-contacts-icon]
[react/icon :group_big st/empty-contacts-icon] [text {:style st/empty-contacts-text} (label :t/no-contacts)]])
[text {:style st/empty-contacts-text} (label :t/no-contacts)]]) [action-button {:buttonColor color-blue
[action-button {:buttonColor color-blue :offsetY 16
:offsetY 16 :offsetX 16}
:offsetX 16} [action-button-item
[action-button-item {:title (label :t/new-contact)
{:title (label :t/new-contact) :buttonColor :#9b59b6
:buttonColor :#9b59b6 :onPress #(dispatch [:navigate-to :new-contact])}
:onPress #(dispatch [:navigate-to :new-contact])} [icon {:name :android-create
[icon {:name :android-create :style create-icon}]]]])))
:style create-icon}]]]]])))

37
src/status_im/contacts/views/new_contact.cljs
View File

@ -9,7 +9,6 @@
touchable-highlight]] touchable-highlight]]
[status-im.utils.identicon :refer [identicon]] [status-im.utils.identicon :refer [identicon]]
[status-im.components.toolbar :refer [toolbar]] [status-im.components.toolbar :refer [toolbar]]
[status-im.components.drawer.view :refer [drawer-view open-drawer]]
[status-im.components.styles :refer [color-purple [status-im.components.styles :refer [color-purple
color-white color-white
icon-search icon-search
@ -57,23 +56,21 @@
(defview new-contact [] (defview new-contact []
[{:keys [name whisper-identity phone-number] :as new-contact} [:get :new-contact]] [{:keys [name whisper-identity phone-number] :as new-contact} [:get :new-contact]]
[drawer-view [view st/contact-form-container
[view st/contact-form-container [linear-gradient {:colors ["rgba(182, 116, 241, 1)" "rgba(107, 147, 231, 1)" "rgba(43, 171, 238, 1)"]
[linear-gradient {:colors ["rgba(182, 116, 241, 1)" "rgba(107, 147, 231, 1)" "rgba(43, 171, 238, 1)"] :start [0, 0]
:start [0, 0] :end [0.5, 1]
:end [0.5, 1] :locations [0, 0.8, 1]
:locations [0, 0.8 ,1] :style st/gradient-background}]
:style st/gradient-background}]
[toolbar {:background-color :transparent [toolbar {:background-color :transparent
:nav-action {:image {:source {:uri :icon_back_white} :nav-action {:image {:source {:uri :icon_back_white}
:style icon-back} :style icon-back}
:handler #(dispatch [:navigate-back])} :handler #(dispatch [:navigate-back])}
:custom-content toolbar-title :custom-content toolbar-title
:action {:image {:source {:uri :icon_add} :action {:image {:source {:uri :icon_add}
:style icon-search} :style icon-search}
:handler #(dispatch [:add-new-contact (merge {:photo-path (identicon whisper-identity)} new-contact)])}}] :handler #(dispatch [:add-new-contact (merge {:photo-path (identicon whisper-identity)} new-contact)])}}]
[view st/form-container [view st/form-container
[contact-whisper-id-input whisper-identity] [contact-whisper-id-input whisper-identity]
[contact-name-input name] [contact-name-input name]]])
]]])