From 407454859b0bccf6e43fa7189ea47f66566f319d Mon Sep 17 00:00:00 2001 From: jo-mut Date: Sat, 12 Mar 2022 01:05:22 +0300 Subject: [PATCH] Refactored: edit community chats different screen segments --- src/status_im/ui/components/tabs.cljs | 13 +++- .../communities/reorder_categories.cljs | 69 +++++++++++-------- translations/en.json | 1 + 3 files changed, 52 insertions(+), 31 deletions(-) diff --git a/src/status_im/ui/components/tabs.cljs b/src/status_im/ui/components/tabs.cljs index e2df9a9177..e8a54421c0 100644 --- a/src/status_im/ui/components/tabs.cljs +++ b/src/status_im/ui/components/tabs.cljs @@ -12,4 +12,15 @@ [react/text {:style {:font-weight "500" :color (if active? colors/blue colors/gray) :line-height 22}} label]]] (when active? - [react/view {:width 24 :height 3 :border-radius 4 :background-color colors/blue}])]) \ No newline at end of file + [react/view {:width 24 :height 3 :border-radius 4 :background-color colors/blue}])]) + +(defn tab-button [state key label active?] + [react/view {:flex 1 :align-items :center :border-radius 8 + :background-color (if active? colors/blue colors/blue-light)} + [react/touchable-highlight {:on-press #(swap! state assoc :tab key) + :accessibility-label (str label "-item-button") + :style {:border-radius 8} + :flex 1} + [react/view {:padding-horizontal 12 :padding-vertical 8} + [react/text {:style {:font-weight "500" :color (if active? colors/white colors/blue) :line-height 22}} + label]]]]) \ No newline at end of file diff --git a/src/status_im/ui/screens/communities/reorder_categories.cljs b/src/status_im/ui/screens/communities/reorder_categories.cljs index d6cdb8b5c8..9ea5063fea 100644 --- a/src/status_im/ui/screens/communities/reorder_categories.cljs +++ b/src/status_im/ui/screens/communities/reorder_categories.cljs @@ -10,16 +10,18 @@ [status-im.constants :as constants] [quo.design-system.colors :as colors] [status-im.utils.platform :as platform] - [status-im.ui.components.topbar :as topbar] [status-im.communities.core :as communities] [status-im.utils.handlers :refer [>evt evt [:delete-community-chat community-id chat-id])})) -(defn show-delete-catgory-confirmation [community-id category-id] +(defn show-delete-category-confirmation [community-id category-id] (utils/show-confirmation {:title (i18n/label :t/delete-confirmation) :content (i18n/label :t/delete-category-confirmation) :confirm-button-text (i18n/label :t/delete) :on-accept #(>evt [:delete-community-category community-id category-id])})) +(defn categories-tab? [] + (let [{:keys [tab]} @state] + (= tab :categories))) + (defn chat-item [{:keys [id community-id] :as home-item} is-active? drag] (let [chat-id (string/replace id community-id "") @@ -64,15 +70,15 @@ [rn/view {:accessibility-label :category-item :style (merge styles/category-item {:background-color background-color})} - (if category-none? + (if-not (categories-tab?) [icons/icon :main-icons/channel-category {:color colors/gray}] [rn/touchable-opacity {:accessibility-label :delete-category-button - :on-press #(show-delete-catgory-confirmation community-id id)} + :on-press #(show-delete-category-confirmation community-id id)} [icons/icon :main-icons/delete-circle {:no-color true}]]) [rn/view {:flex 1} [rn/text {:style {:font-size 17 :margin-left 10 :color colors/black}} name]] - (when (and (not category-none?) @collapse-chats?) + (when (and (not category-none?) (categories-tab?)) [rn/touchable-opacity {:accessibility-label :category-drag-handle :on-long-press drag :delay-long-press 100 @@ -121,18 +127,19 @@ (>evt [::communities/reorder-community-category community-id id to])))) (defn on-drag-end-fn [from to data-js] - (if @collapse-chats? + (if (categories-tab?) (on-drag-end-category from to data-js) (when-not (= to 0) (on-drag-end-chat from to data-js)))) (defn reset-data [categories chats] - (reset! data (if @collapse-chats? categories ;; If chats are collapsed then only show categories - (walk/postwalk-replace ;; else, categories and chats - {:chat-id :id} - (reduce (fn [acc category] - (-> acc - (conj category) - (into (get chats (:id category))))) [] categories))))) + (reset! data (if (categories-tab?) + categories + (walk/postwalk-replace + {:chat-id :id} + (reduce (fn [acc category] + (-> acc + (conj category) + (into (get chats (:id category))))) [] categories))))) (defn draggable-list [] [rn/draggable-flat-list @@ -144,33 +151,35 @@ :container-style {:margin-bottom 108} ;; after bumping react native version to > 0.64 :on-drag-end-fn on-drag-end-fn}]) +(defn chats_and_categories [] + (let [{:keys [tab]} @state] + [:<> + [react/view {:flex-direction :row :margin-horizontal 16 :margin-vertical 8 + :border-radius 8 :background-color colors/blue-light} + [tabs/tab-button state :chats (i18n/label :t/edit-chats) (= tab :chats)] + [tabs/tab-button state :categories (i18n/label :t/edit-categories) (= tab :categories)]]])) + (defn view [] (let [{:keys [community-id]} ( [topbar/topbar - {:modal? true - :content [community/toolbar-content id name color images + {:content [community/toolbar-content id name color images (not= (:access permissions) constants/community-no-membership-access) (count members)]}] (if (and (empty? sorted-categories) (empty? chats)) [community/blank-page (i18n/label :t/welcome-community-blank-message-edit-chats)] [:<> - [quo/list-item {:size :small - :title (i18n/label :t/rearrange-categories) - :active @collapse-chats? - :accessory :switch - :container-style {:padding-left 10} - :on-press #(reset! collapse-chats? (not @collapse-chats?))}] - [quo/separator] - [draggable-list]])])) + [chats_and_categories] + [draggable-list]])])) \ No newline at end of file diff --git a/translations/en.json b/translations/en.json index 292d4c6b03..417c651f69 100644 --- a/translations/en.json +++ b/translations/en.json @@ -1691,6 +1691,7 @@ "include": "Include", "category": "Category", "edit-chats": "Edit chats", + "edit-categories": "Edit Categories", "hide": "Hide", "account-is-used": "The account is being used with Dapps in the browser.", "normal": "Normal",