From 94fde74b881164eb56e652be43a6623aa4757a44 Mon Sep 17 00:00:00 2001 From: Parvesh Monu Date: Fri, 24 Dec 2021 21:04:44 +0530 Subject: [PATCH] Reorder community chats and categories using drag and drop (#12854) --- doc/DEPENDENCIES.md | 6 +- package.json | 1 + resources/images/icons/reorder_handle@2x.png | Bin 0 -> 196 bytes resources/images/icons/reorder_handle@3x.png | Bin 0 -> 250 bytes src/mocks/js_dependencies.cljs | 4 + src/quo/components/list/item.cljs | 8 +- src/quo/react_native.cljs | 33 +++- src/status_im/communities/core.cljs | 29 ++- src/status_im/ethereum/json_rpc.cljs | 1 + src/status_im/subs.cljs | 20 +- .../screens/communities/channel_details.cljs | 4 +- .../ui/screens/communities/community.cljs | 62 +----- .../screens/communities/create_category.cljs | 2 +- .../communities/reorder_categories.cljs | 180 ++++++++++++++---- .../screens/communities/select_category.cljs | 6 +- .../ui/screens/communities/styles.cljs | 30 +-- .../ui/screens/home/views/inner_item.cljs | 31 +-- src/status_im/ui/screens/screens.cljs | 5 - translations/en.json | 4 +- yarn.lock | 5 + 20 files changed, 276 insertions(+), 155 deletions(-) create mode 100644 resources/images/icons/reorder_handle@2x.png create mode 100644 resources/images/icons/reorder_handle@3x.png diff --git a/doc/DEPENDENCIES.md b/doc/DEPENDENCIES.md index 663c857ea4..04a43d6c32 100644 --- a/doc/DEPENDENCIES.md +++ b/doc/DEPENDENCIES.md @@ -163,4 +163,8 @@ used for some abi encoding primitives ## "rn-emoji-keyboard": "https://github.com/status-im/rn-emoji-keyboard" -Used for taking emoji input, for custom emoji thumbnails for community channels \ No newline at end of file +Used for taking emoji input, for custom emoji thumbnails for community channels + +## "react-native-draggable-flatlist": "https://github.com/computerjazz/react-native-draggable-flatlist" + +A drag-and-drop-enabled FlatList component for React Native diff --git a/package.json b/package.json index 6bbf706af9..05a99ccb44 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "react-native-dark-mode": "^0.2.2", "react-native-device-info": "^7.4.0", "react-native-dialogs": "^1.0.4", + "react-native-draggable-flatlist": "^3.0.3", "react-native-fast-image": "8.5.11", "react-native-fetch-polyfill": "^1.1.2", "react-native-fs": "^2.14.1", diff --git a/resources/images/icons/reorder_handle@2x.png b/resources/images/icons/reorder_handle@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..6ea42f4129d267513282a6ffdb94a43eb9ddc716 GIT binary patch literal 196 zcmeAS@N?(olHy`uVBq!ia0vp^3P3Ev!3HGXOtkk0Qk(@Ik;M!QVyYm_=ozH)0Vv2= z9OUlAu$JIQ nI@qt+K4kyF_)5gTe~DWM4f>PkFZ literal 0 HcmV?d00001 diff --git a/resources/images/icons/reorder_handle@3x.png b/resources/images/icons/reorder_handle@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..9dd3e129138c7d9fa4ab8fc6818278a82447f2ee GIT binary patch literal 250 zcmeAS@N?(olHy`uVBq!ia0vp^20$#w!3HF=mdrf}q&N#aB8wRq6fHoQ(RG?(0#J~# zILO_JVcj{Imp~3nx}&cn1H;CC?mvmFKz_fci(^Oyv)*W&mf#)Z zV~*UiSQGh}VyNZroCAD57p*l=$j(_RXe_6IZ^u-E?xh;bfV> o9ht~27$|qcX&QugGdhEDN0Rqh$No1Pflg!aboFyt=akR{01Pf$*#H0l literal 0 HcmV?d00001 diff --git a/src/mocks/js_dependencies.cljs b/src/mocks/js_dependencies.cljs index 94ff5fc0e5..5963f0bdce 100644 --- a/src/mocks/js_dependencies.cljs +++ b/src/mocks/js_dependencies.cljs @@ -206,6 +206,9 @@ (def rn-emoji-keyboard #js {:EmojiKeyboard #js {}}) +(def react-native-draggable-flatlist + #js {:default #js {}}) + ;; Update i18n_resources.cljs (defn mock [module] (case module @@ -239,6 +242,7 @@ "@react-native-community/push-notification-ios" push-notification-ios "react-native-camera-kit" react-native-camera-kit "rn-emoji-keyboard" rn-emoji-keyboard + "react-native-draggable-flatlist" react-native-draggable-flatlist "./fleets.js" default-fleets "./chats.js" default-chats "../translations/ar.json" (js/JSON.parse (slurp "./translations/ar.json")) diff --git a/src/quo/components/list/item.cljs b/src/quo/components/list/item.cljs index 3a525f7c15..b245280ff6 100644 --- a/src/quo/components/list/item.cljs +++ b/src/quo/components/list/item.cljs @@ -55,13 +55,13 @@ :small :base :large)) -(defn container [{:keys [size]} & children] +(defn container [{:keys [size container-style]} & children] (into [rn/view {:style (merge (:tiny spacing/padding-horizontal) {:min-height (size->container-size size) :padding-vertical 8 :flex-direction :row :align-items :center - :justify-content :space-between})}] + :justify-content :space-between} container-style)}] children)) (defn icon-column @@ -197,7 +197,7 @@ left-side-alignment icon-color icon-bg-color title subtitle subtitle-secondary active on-press on-long-press chevron size text-size accessory-text accessibility-label title-accessibility-label accessory-style - haptic-feedback haptic-type error animated animated-accessory? title-text-weight] + haptic-feedback haptic-type error animated animated-accessory? title-text-weight container-style] :or {subtitle-max-lines 1 theme :main haptic-feedback true @@ -233,7 +233,7 @@ {:on-long-press (fn [] (optional-haptic) (on-long-press))})) - [container {:size size} + [container {:size size :container-style container-style} [left-side {:icon-color icon-color :text-color (if on-press text-color diff --git a/src/quo/react_native.cljs b/src/quo/react_native.cljs index 56396e966e..ab87e70d36 100644 --- a/src/quo/react_native.cljs +++ b/src/quo/react_native.cljs @@ -5,7 +5,10 @@ ["react-native" :as rn] ["@react-native-community/hooks" :as hooks] ["react-native-navigation" :refer (Navigation)] - ["rn-emoji-keyboard" :refer (EmojiKeyboard)])) + ["rn-emoji-keyboard" :refer (EmojiKeyboard)] + ["react-native-draggable-flatlist" :default DraggableFlatList])) + +(def rn-draggable-flatlist (reagent/adapt-react-class DraggableFlatList)) (def emoji-keyboard (reagent/adapt-react-class EmojiKeyboard)) @@ -107,7 +110,13 @@ (defn- wrap-render-fn [f render-data] (fn [data] - (reagent/as-element [f (.-item ^js data) (.-index ^js data) (.-separators ^js data) render-data]))) + (reagent/as-element [f (.-item ^js data) (.-index ^js data) + (.-separators ^js data) render-data + (.-isActive ^js data) (.-drag ^js data)]))) + +(defn- wrap-on-drag-end-fn [f] + (fn [data] + (f (.-from ^js data) (.-to ^js data) (.-data ^js data)))) (defn- wrap-key-fn [f] (fn [data index] @@ -115,19 +124,23 @@ (f data index))) (defn base-list-props - [{:keys [key-fn render-fn empty-component header footer separator data render-data] :as props}] + [{:keys [key-fn render-fn empty-component header footer separator data render-data on-drag-end-fn] :as props}] (merge {:data (to-array data)} - (when key-fn {:keyExtractor (wrap-key-fn key-fn)}) - (when render-fn {:renderItem (wrap-render-fn render-fn render-data)}) - (when separator {:ItemSeparatorComponent (fn [] (reagent/as-element separator))}) - (when empty-component {:ListEmptyComponent (fn [] (reagent/as-element empty-component))}) - (when header {:ListHeaderComponent (reagent/as-element header)}) - (when footer {:ListFooterComponent (reagent/as-element footer)}) - (dissoc props :data :header :footer :empty-component :separator :render-fn :key-fn))) + (when key-fn {:keyExtractor (wrap-key-fn key-fn)}) + (when render-fn {:renderItem (wrap-render-fn render-fn render-data)}) + (when separator {:ItemSeparatorComponent (fn [] (reagent/as-element separator))}) + (when empty-component {:ListEmptyComponent (fn [] (reagent/as-element empty-component))}) + (when header {:ListHeaderComponent (reagent/as-element header)}) + (when footer {:ListFooterComponent (reagent/as-element footer)}) + (when on-drag-end-fn {:onDragEnd (wrap-on-drag-end-fn on-drag-end-fn)}) + (dissoc props :data :header :footer :empty-component :separator :render-fn :key-fn :on-drag-end-fn))) (defn flat-list [props] [rn-flat-list (base-list-props props)]) +(defn draggable-flat-list [props] + [rn-draggable-flatlist (base-list-props props)]) + (defn animated-flat-list [props] [animated-flat-list-class (base-list-props props)]) ;; Hooks diff --git a/src/status_im/communities/core.cljs b/src/status_im/communities/core.cljs index 88749167da..dfedadb4fd 100644 --- a/src/status_im/communities/core.cljs +++ b/src/status_im/communities/core.cljs @@ -288,7 +288,7 @@ (fx/defn edit-channel {:events [::edit-channel-confirmation-pressed]} [{:keys [db] :as cofx}] - (let [{:keys [name description color community-id emoji edit-channel-id category-id]} + (let [{:keys [name description color community-id emoji edit-channel-id category-id position]} (get db :communities/create-channel)] {::json-rpc/call [{:method "wakuext_editCommunityChat" :params [community-id @@ -298,6 +298,7 @@ :color color :emoji emoji} :category_id category-id + :position position :permissions {:access constants/community-channel-access-no-membership}}] :js-response true :on-success #(re-frame/dispatch [::community-channel-edited %]) @@ -345,7 +346,7 @@ (fx/defn edit-channel-pressed {:events [::edit-channel-pressed]} - [{:keys [db] :as cofx} community-id chat-name description color emoji chat-id category-id] + [{:keys [db] :as cofx} community-id chat-name description color emoji chat-id category-id position] (let [{:keys [color emoji]} (if (string/blank? emoji) (rand-nth emoji-thumbnail-styles/emoji-picker-default-thumbnails) {:color color :emoji emoji})] @@ -356,7 +357,8 @@ :community-id community-id :emoji emoji :edit-channel-id chat-id - :category-id category-id})} + :category-id category-id + :position position})} (navigation/open-modal :edit-community-channel nil)))) (fx/defn community-created @@ -564,6 +566,15 @@ :on-success #(re-frame/dispatch [:sanitize-messages-and-process-response %]) :on-error #(log/error "failed to remove chat from community" %)}]})) +(fx/defn delete-community-chat + {:events [:delete-community-chat]} + [_ community-id chat-id] + {::json-rpc/call [{:method "wakuext_deleteCommunityChat" + :params [community-id chat-id] + :js-response true + :on-success #(re-frame/dispatch [:sanitize-messages-and-process-response %]) + :on-error #(log/error "failed to delete community chat" %)}]}) + (fx/defn delete-category {:events [:delete-community-category]} [_ community-id category-id] @@ -592,6 +603,18 @@ (navigation/navigate-back) (remove-chat-from-category community-id id categoryID)))) +(fx/defn reorder-category-chat + {:events [::reorder-community-category-chat]} + [_ community-id category-id chat-id new-position] + {::json-rpc/call [{:method "wakuext_reorderCommunityChat" + :params [{:communityId community-id + :categoryId category-id + :chatId chat-id + :position new-position}] + :js-response true + :on-success #(re-frame/dispatch [:sanitize-messages-and-process-response %]) + :on-error #(log/error "failed to reorder community category chat" %)}]}) + (fx/defn reorder-category {:events [::reorder-community-category]} [_ community-id category-id new-position] diff --git a/src/status_im/ethereum/json_rpc.cljs b/src/status_im/ethereum/json_rpc.cljs index 7ea3cff4e3..e43c63d06a 100644 --- a/src/status_im/ethereum/json_rpc.cljs +++ b/src/status_im/ethereum/json_rpc.cljs @@ -165,6 +165,7 @@ "wakuext_reorderCommunityChat" {} "wakuext_editCommunityCategory" {} "wakuext_deleteCommunityCategory" {} + "wakuext_deleteCommunityChat" {} "wakuext_ensVerified" {} "wakuext_dismissActivityCenterNotifications" {} "wakuext_acceptActivityCenterNotifications" {} diff --git a/src/status_im/subs.cljs b/src/status_im/subs.cljs index cfc83ff02e..ebf848bb3c 100644 --- a/src/status_im/subs.cljs +++ b/src/status_im/subs.cljs @@ -876,6 +876,22 @@ (assoc :color colors/blue)) chats))))) +(re-frame/reg-sub + :chats/sorted-categories-by-community-id + (fn [[_ community-id]] + [(re-frame/subscribe [:chats/by-community-id community-id]) + (re-frame/subscribe [:communities/community-chats community-id])]) + (fn [[chats comm-chats] [_ community-id]] + (let [chat-cat (into {} (map (fn [{:keys [id categoryID position]}] + {(str community-id id) {:categoryID categoryID + :position position}}) + (vals comm-chats)))] + (group-by :categoryID (sort-by :position + (map #(cond-> (merge % (chat-cat (:chat-id %))) + (= community-id constants/status-community-id) + (assoc :color colors/blue)) + chats)))))) + (re-frame/reg-sub :chats/category-by-chat-id (fn [[_ community-id _]] @@ -902,7 +918,9 @@ :<- [:communities] (fn [communities [_ id]] (->> (get-in communities [id :categories]) - (sort-by #(:position (get % 1)))))) + (map #(assoc (get % 1) :community-id id)) + (sort-by :position) + (into [])))) (re-frame/reg-sub :chats/current-chat-ui-props diff --git a/src/status_im/ui/screens/communities/channel_details.cljs b/src/status_im/ui/screens/communities/channel_details.cljs index f8f978d480..a81bce4196 100644 --- a/src/status_im/ui/screens/communities/channel_details.cljs +++ b/src/status_im/ui/screens/communities/channel_details.cljs @@ -12,6 +12,7 @@ (fn [] (let [current-chat ( - (for [{:keys [name id state]} (vals categories)] + (for [{:keys [name id state]} categories] ^{:key (str "cat" name id)} [:<> [accordion/section {:on-open #(>evt [::communities/store-category-state community-id id true]) :on-close #(>evt [::communities/store-category-state community-id id false]) :default state - :opened edit - :disabled edit :title [rn/view styles/category-item - (if edit - [rn/touchable-opacity {:on-press #(>evt [:delete-community-category community-id id])} - [icons/icon :main-icons/delete-circle {:no-color true}]] - [icons/icon :main-icons/channel-category {:color colors/gray}]) + [icons/icon :main-icons/channel-category {:color colors/gray}] [rn/text {:style {:font-size 17 :margin-left 10 :color colors/black}} name]] - :content [rn/view + :content [:<> (for [chat (get chats id)] - (if edit - ^{:key (str "chat" chat id)} - [rn/view styles/category-item - [rn/touchable-opacity {:on-press #(>evt [:remove-chat-from-community-category - community-id - (string/replace (:chat-id chat) community-id "") - (:categoryID chat)])} - [icons/icon :main-icons/delete-circle {:no-color true}]] - [rn/view {:flex 1} - [inner-item/home-list-item - (assoc chat :public? true)]]] - ^{:key (str "chat" chat id)} - [community-chat-item chat nil nil data]))]}] + ^{:key (str "chat" chat id)} + [community-chat-item chat nil nil data])]}] [quo/separator]])]) -(defn community-chat-list [community-id categories edit from-chat] - (let [chats ( - [topbar/topbar - {:modal? true - :content [toolbar-content - id - name - color - images - (not= (:access permissions) constants/community-no-membership-access) - (count members)]}] - [community-chat-list id categories true false]])))) - (defn community [] (let [{:keys [community-id from-chat]} (evt evt [::communities/reorder-community-category community-id key new-position]))) +(def collapse-chats? (reagent/atom false)) +(def data (reagent/atom [])) -(defn category-item-button [community-id up? disabled? key position] - (let [[margin-right icon] (if up? - [10 :main-icons/dropdown-up] - [25 :main-icons/dropdown])] - [react/touchable-opacity {:disabled disabled? - :on-press #(category-change-positon - community-id key up? position)} - [rn/view {:style (styles/reorder-categories-button margin-right)} - [icons/icon icon {:color colors/black}]]])) +(defn show-delete-chat-confirmation [community-id chat-id] + (utils/show-confirmation + {:title (i18n/label :t/delete-confirmation) + :content (i18n/label :t/delete-chat-confirmation) + :confirm-button-text (i18n/label :t/delete) + :on-accept #(>evt [:delete-community-chat community-id chat-id])})) -(defn category-item [community-id count {:keys [key name position]}] - (let [up-disabled? (= position 0) - down-disabled? (= position (dec count))] +(defn show-delete-catgory-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 chat-item + [{:keys [id community-id] :as home-item} is-active? drag] + (let [chat-id (string/replace id community-id "") + background-color (if is-active? colors/gray-lighter colors/white) + home-item (clojure.set/rename-keys home-item {:id :chat-id})] + [rn/view {:accessibility-label :chat-item + :style (merge styles/category-item + {:background-color background-color})} + [rn/touchable-opacity + {:accessibility-label :delete-community-chat + :on-press #(show-delete-chat-confirmation community-id chat-id)} + [icons/icon :main-icons/delete-circle {:no-color true}]] + [rn/view {:flex 1} + [inner-item/home-list-item (assoc home-item :edit? true) {:active-opacity 1}]] + [rn/touchable-opacity {:on-long-press drag + :delay-long-press 100 + :accessibility-label :chat-drag-handle + :style {:padding 20}} + [icons/icon :main-icons/reorder-handle {:no-color true :width 18 :height 12}]]])) + +(defn category-item + [{:keys [id name community-id]} is-active? drag] + (let [background-color (if is-active? colors/gray-lighter colors/white) + category-none? (string/blank? id)] [:<> - [rn/view {:style styles/reorder-categories-item} - [icons/icon :main-icons/channel-category {:color colors/gray}] - [rn/text {:style (styles/reorder-categories-text)} name] - [category-item-button community-id true up-disabled? key position] - [category-item-button community-id false down-disabled? key position]] - [quo/separator]])) + [quo/separator] + [rn/view {:accessibility-label :category-item + :style (merge styles/category-item + {:background-color background-color})} + (if category-none? + [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)} + [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?) + [rn/touchable-opacity {:accessibility-label :category-drag-handle + :on-long-press drag + :delay-long-press 100 + :style {:padding 20}} + [icons/icon :main-icons/reorder-handle {:no-color true :width 18 :height 12}]])]])) -(defn categories-view [community-id categories count] - [rn/view {:accessibility-label :reorder-categories-list} - (for [category-vector categories] - (let [category (clojure.set/rename-keys (get category-vector 1) {:id :key})] - [category-item community-id count category]))]) +(defn render-fn + [{:keys [chat-type] :as item} _ _ _ is-active? drag] + (if (= chat-type constants/community-chat-type) + [chat-item item is-active? drag] + [category-item item is-active? drag])) + +(defn calculate-chat-new-position-and-category + [to second-call? old-category going-up?] + (let [{:keys [id chat-type categoryID position]} (get @data to) + [new-category new-position] + (if going-up? + (if (= chat-type constants/community-chat-type) + [categoryID (if second-call? (inc position) position)] + (if second-call? [id 0] + (calculate-chat-new-position-and-category (dec to) true old-category true))) + (if (= chat-type constants/community-chat-type) + (if (= categoryID old-category) + [categoryID position] + [categoryID (inc position)]) [id 0]))] + [new-category new-position])) + +(defn update-local-atom [data-js] + (reset! data data-js) + (reagent/flush)) + +(defn on-drag-end-chat [from to data-js] + (let [{:keys [id community-id categoryID position]} (get @data from) + [new-category new-position] (calculate-chat-new-position-and-category + to false categoryID (> from to)) + chat-id (string/replace id community-id "")] + (when-not (and (= new-position position) (= new-category categoryID)) + (update-local-atom data-js) + (>evt [::communities/reorder-community-category-chat + community-id new-category chat-id new-position])))) + +(defn on-drag-end-category [from to data-js] + (let [{:keys [id community-id position]} (get @data from)] + (when (and (< to (count @data)) (not= position to) (not= id "")) + (update-local-atom data-js) + (>evt [::communities/reorder-community-category community-id id to])))) + +(defn on-drag-end-fn [from to data-js] + (if @collapse-chats? + (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))))) + +(defn draggable-list [] + [rn/draggable-flat-list + {:key-fn :id + :data @data + :render-fn render-fn + :autoscroll-threshold (if platform/android? 150 250) + :autoscroll-speed (if platform/android? 10 150) ;; TODO - Use same speed for both ios and android + :container-style {:margin-bottom 108} ;; after bumping react native version to > 0.64 + :on-drag-end-fn on-drag-end-fn}]) (defn view [] (let [{:keys [community-id]} ( [topbar/topbar {:modal? true :content [community/toolbar-content id name color images (not= (:access permissions) constants/community-no-membership-access) (count members)]}] - (if (empty? categories) - [community/blank-page (i18n/label :t/welcome-community-blank-message-categories)] - [categories-view community-id categories (count categories)])])) + (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]])])) diff --git a/src/status_im/ui/screens/communities/select_category.cljs b/src/status_im/ui/screens/communities/select_category.cljs index a35593b98f..39002e173d 100644 --- a/src/status_im/ui/screens/communities/select_category.cljs +++ b/src/status_im/ui/screens/communities/select_category.cljs @@ -25,6 +25,7 @@ (let [{:keys [community-id chat]} ( @@ -44,7 +45,7 @@ :create-community-category {:community-id community-id}]) :title (i18n/label :t/create-category)}] - :data (conj (vec (vals categories)) {:name (i18n/label :t/none) :id ""}) + :data (conj categories {:name (i18n/label :t/none) :id ""}) :render-fn render-fn}]] [toolbar/toolbar {:show-border? true @@ -54,6 +55,7 @@ [::communities/change-category-confirmation-pressed community-id @selected-item - comm-chat] + (assoc comm-chat :position + (count (get chats @selected-item)))] ;; Add as last item in new category 3000)} (i18n/label :t/done)]}]])))) diff --git a/src/status_im/ui/screens/communities/styles.cljs b/src/status_im/ui/screens/communities/styles.cljs index b894317ec4..2c95901b2a 100644 --- a/src/status_im/ui/screens/communities/styles.cljs +++ b/src/status_im/ui/screens/communities/styles.cljs @@ -1,34 +1,8 @@ -(ns status-im.ui.screens.communities.styles - (:require [quo.design-system.colors :as colors])) +(ns status-im.ui.screens.communities.styles) (def category-item {:flex 1 :flex-direction :row :align-items :center :height 52 - :margin-left 18}) - -(def reorder-categories-item - {:accessibility-label :reorder-categories-item - :flex-direction :row - :height 60 - :align-items :center - :margin-left 18}) - -(defn reorder-categories-text [] - {:font-size 17 - :margin-left 10 - :color (colors/get-color :text-01) - :flex 1}) - -(defn reorder-categories-button [margin-right] - {:accessibility-label :reorder-categories-button - :width 30 - :height 30 - :border-radius 15 - :margin 10 - :margin-right margin-right - :border-width 1 - :justify-content :center - :align-items :center - :border-color colors/black}) + :padding-left 18}) diff --git a/src/status_im/ui/screens/home/views/inner_item.cljs b/src/status_im/ui/screens/home/views/inner_item.cljs index e395beed7e..c816e79b26 100644 --- a/src/status_im/ui/screens/home/views/inner_item.cljs +++ b/src/status_im/ui/screens/home/views/inner_item.cljs @@ -149,13 +149,16 @@ :else [icons/icon :main-icons/tiny-new-contact (icon-style)])) -(defn chat-item-title [chat-id muted group-chat chat-name] +(defn chat-item-title [chat-id muted group-chat chat-name edit?] [quo/text {:weight :medium :color (when muted :secondary) :accessibility-label :chat-name-text :ellipsize-mode :tail :number-of-lines 1 - :style {:position :absolute :left 92 :top 10 :right 90}} + :style {:position :absolute + :left 92 + :top 10 + :right (if edit? 50 90)}} (if group-chat (utils/truncate-str chat-name 30) ;; This looks a bit odd, but I would like only to subscribe @@ -164,7 +167,7 @@ (first @(re-frame/subscribe [:contacts/contact-two-names-by-identity chat-id])))]) (defn home-list-item [home-item opts] - (let [{:keys [chat-id chat-name color group-chat public? timestamp last-message muted emoji highlight]} home-item + (let [{:keys [chat-id chat-name color group-chat public? timestamp last-message muted emoji highlight edit?]} home-item background-color (when highlight (colors/get-color :interactive-02))] [react/touchable-opacity (merge {:style {:height 64 :background-color background-color}} opts) [:<> @@ -178,13 +181,15 @@ :default-chat-icon-text (if (string/blank? emoji) (chat-icon.styles/default-chat-icon-text 40) (chat-icon.styles/emoji-chat-icon-text 40))}] - [chat-item-title chat-id muted group-chat chat-name] - [react/text {:style styles/datetime-text - :number-of-lines 1 - :accessibility-label :last-message-time-text} - ;;TODO (perf) move to event - (memo-timestamp (if (pos? (:whisper-timestamp last-message)) - (:whisper-timestamp last-message) - timestamp))] - [message-content-text (select-keys last-message [:content :content-type :community-id]) true] - [unviewed-indicator home-item]]])) + [chat-item-title chat-id muted group-chat chat-name edit?] + (when-not edit? + [:<> + [react/text {:style styles/datetime-text + :number-of-lines 1 + :accessibility-label :last-message-time-text} + ;;TODO (perf) move to event + (memo-timestamp (if (pos? (:whisper-timestamp last-message)) + (:whisper-timestamp last-message) + timestamp))] + [unviewed-indicator home-item]]) + [message-content-text (select-keys last-message [:content :content-type :community-id]) true]]])) diff --git a/src/status_im/ui/screens/screens.cljs b/src/status_im/ui/screens/screens.cljs index 562e2a1f39..03ac242ece 100644 --- a/src/status_im/ui/screens/screens.cljs +++ b/src/status_im/ui/screens/screens.cljs @@ -288,11 +288,6 @@ ;;TODO custom :options {:topBar {:visible false}} :component select-category/view} - {:name :community-edit-chats - ;;TODO custom - :insets {:bottom true} - :options {:topBar {:visible false}} - :component community/community-edit} {:name :community-reorder-categories :insets {:top false} :options {:topBar {:visible false}} diff --git a/translations/en.json b/translations/en.json index 47c2bbc30d..40652539c5 100644 --- a/translations/en.json +++ b/translations/en.json @@ -184,7 +184,7 @@ "membership-request-pending": "Membership request pending", "create-community": "Create a community", "create-category": "Create category", - "reorder-categories": "Reorder categories", + "rearrange-categories": "Rearrange Categories", "edited": "Edited", "edit-community": "Edit community", "editing-message": "Editing message", @@ -412,6 +412,7 @@ "delete-bootnode-title": "Delete bootnode", "delete-chat": "Delete chat", "delete-chat-confirmation": "Are you sure you want to delete this chat?", + "delete-category-confirmation": "Are you sure you want to delete this category?", "delete-confirmation": "Delete?", "delete-mailserver": "Delete Status node", "delete-mailserver-are-you-sure": "Are you sure you want to delete this Status node?", @@ -1344,7 +1345,6 @@ "welcome-blank-message": "Your chats will appear here. To start new chats press the ⊕ button", "welcome-community-blank-message": "Your channels will appear here. To create a new channel, click on the ⊕ button and select \"Create a channel\"", "welcome-community-blank-message-edit-chats": "Your channels will appear here. To create a new channel, go back to the community screen, click on the ⊕ button and select \"Create a channel\"", - "welcome-community-blank-message-categories": "Your categories will appear here. To create a new category, go back to the community screen, click on the ⊕ button and select \"Create category\"", "welcome-blank-community-message": "Your communities will appear here.", "fetch-community": "Fetch community", "fetching-community": "Fetching community...", diff --git a/yarn.lock b/yarn.lock index ec147d1a34..cd5cd85f0d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6618,6 +6618,11 @@ react-native-dialogs@^1.0.4: resolved "https://registry.yarnpkg.com/react-native-dialogs/-/react-native-dialogs-1.1.0.tgz#8f7ee7f9d96574fc878fb7c1be101611fb4af517" integrity sha512-clnxO0nMyML/6+G5dja3Yt34gPxegLY2OHTwb8BwYTEvQ2UhRKR49Uq91XqU0q6g7Ur9DiYxC0tqV3rcZWUrjQ== +react-native-draggable-flatlist@^3.0.3: + version "3.0.3" + resolved "https://registry.yarnpkg.com/react-native-draggable-flatlist/-/react-native-draggable-flatlist-3.0.3.tgz#e85503585253be01ad251f78d5b341ac22f9d952" + integrity sha512-bDro6aqQMvvTm/CuHre9dAjSBKosAfZRLDx3nmrjOz799kxcn0bq+uCB6yF6m+g1Xd/gVPl7E3Ss4uX+oPUlHg== + react-native-fast-image@8.5.11: version "8.5.11" resolved "https://registry.yarnpkg.com/react-native-fast-image/-/react-native-fast-image-8.5.11.tgz#e3dc969d0e4e8df026646bf18194465aa55cbc2b"