diff --git a/resources/images/mock2/contact.png b/resources/images/mock2/contact.png new file mode 100644 index 0000000000..48a3d672c5 Binary files /dev/null and b/resources/images/mock2/contact.png differ diff --git a/resources/images/mock2/diamond.png b/resources/images/mock2/diamond.png new file mode 100644 index 0000000000..769597bdf0 Binary files /dev/null and b/resources/images/mock2/diamond.png differ diff --git a/resources/images/mock2/monkey.png b/resources/images/mock2/monkey.png new file mode 100644 index 0000000000..d289db96e7 Binary files /dev/null and b/resources/images/mock2/monkey.png differ diff --git a/resources/images/mock2/pinterest.png b/resources/images/mock2/pinterest.png new file mode 100644 index 0000000000..71de92646b Binary files /dev/null and b/resources/images/mock2/pinterest.png differ diff --git a/resources/images/mock2/verified.png b/resources/images/mock2/verified.png new file mode 100644 index 0000000000..8eb9f0ac72 Binary files /dev/null and b/resources/images/mock2/verified.png differ diff --git a/src/quo2/components/settings/reorder_item/component_spec.cljs b/src/quo2/components/settings/reorder_item/component_spec.cljs new file mode 100644 index 0000000000..2da525ad3b --- /dev/null +++ b/src/quo2/components/settings/reorder_item/component_spec.cljs @@ -0,0 +1,29 @@ +(ns quo2.components.settings.reorder-item.component-spec + (:require [test-helpers.component :as h] + [quo2.core :as quo] + [quo2.components.settings.reorder-item.types :as types])) + +(h/describe + "sortable list items tests" + (h/test "renders item" + (h/render [quo/reorder-item + {:id 1 + :type "item" + :image-size 24 + :title "Item 1"} types/item]) + (h/is-truthy (h/get-by-text "Item 1"))) + + (h/test "renders item placeholder" + (h/render [quo/reorder-item {:label "Item 1"} types/placeholder]) + (h/is-truthy (h/get-by-text "Item 1"))) + + (h/test "renders item skeleton" + (let [component (h/render [quo/reorder-item nil types/skeleton])] + (h/is-truthy component))) + + (h/test "renders item tab" + (h/render [quo/reorder-item + {:data [{:id 1 + :label "Item 1"} + ]} types/tab]) + (h/is-truthy (h/get-by-text "Item 1")))) \ No newline at end of file diff --git a/src/quo2/components/settings/reorder_item/items/item.cljs b/src/quo2/components/settings/reorder_item/items/item.cljs new file mode 100644 index 0000000000..25edec1307 --- /dev/null +++ b/src/quo2/components/settings/reorder_item/items/item.cljs @@ -0,0 +1,47 @@ +(ns quo2.components.settings.reorder-item.items.item + (:require [react-native.core :as rn] + [quo2.components.settings.reorder-item.style :as style] + [quo2.components.markdown.text :as text] + [quo2.components.icon :as icon] + [quo2.foundations.colors :as colors])) + +(defn view + [{:keys + [title + subtitle + image + image-size + right-text + right-icon + on-press]}] + [rn/touchable-opacity + {:on-press on-press + :style (merge (style/item-container) (when subtitle style/item-container-extended))} + [icon/icon :main-icons/drag + {:color (colors/theme-colors + colors/neutral-50 + colors/neutral-40)}] + [rn/view + {:style style/body-container} + [rn/view + {:style style/image-container} + [rn/image + {:source image + :style (style/image image-size)}]] + [rn/view + {:style style/text-container} + [rn/view + [text/text + {:style style/item-text + :weight :medium} + title] + (when subtitle + [text/text + {:style style/item-subtitle + :weight :regular} + subtitle])] + (when right-text + [text/text {:style style/right-text} right-text]) + (when right-icon + [rn/view {:style style/right-icon-container} [icon/icon right-icon (style/right-icon)]])]] + [icon/icon :tiny-icons/chevron-right (style/chevron)]]) diff --git a/src/quo2/components/settings/reorder_item/items/item_placeholder.cljs b/src/quo2/components/settings/reorder_item/items/item_placeholder.cljs new file mode 100644 index 0000000000..1526b3117b --- /dev/null +++ b/src/quo2/components/settings/reorder_item/items/item_placeholder.cljs @@ -0,0 +1,15 @@ +(ns quo2.components.settings.reorder-item.items.item-placeholder + (:require [react-native.core :as rn] + [quo2.components.markdown.text :as text] + [quo2.components.settings.reorder-item.style :as style])) + +(defn view + [item] + (let [label (:label item)] + [rn/view + {:accessibility-label :reorder-placerholder-drag-handle + :style (style/placeholder-container)} + [text/text + {:style (style/placeholder-text) + :weight :regular} + label]])) diff --git a/src/quo2/components/settings/reorder_item/items/item_skeleton.cljs b/src/quo2/components/settings/reorder_item/items/item_skeleton.cljs new file mode 100644 index 0000000000..2a8fe73826 --- /dev/null +++ b/src/quo2/components/settings/reorder_item/items/item_skeleton.cljs @@ -0,0 +1,8 @@ +(ns quo2.components.settings.reorder-item.items.item-skeleton + (:require [quo.react-native :as rn] + [quo2.components.settings.reorder-item.style :as style])) + +(defn view + [] + [rn/view + {:style (style/skeleton-container)}]) diff --git a/src/quo2/components/settings/reorder_item/items/item_tabs.cljs b/src/quo2/components/settings/reorder_item/items/item_tabs.cljs new file mode 100644 index 0000000000..7a668b5150 --- /dev/null +++ b/src/quo2/components/settings/reorder_item/items/item_tabs.cljs @@ -0,0 +1,40 @@ +(ns quo2.components.settings.reorder-item.items.item-tabs + (:require [quo2.components.tabs.segmented-tab :as quo2] + [quo.react-native :as rn] + [quo.components.text :as text] + [quo2.components.settings.reorder-item.style :as style] + [quo2.components.icon :as quo2-icons])) + +(defn render-tab-item + [item] + (let [tab-image (cond + (item :image) [rn/image + {:source (:image item) + :style style/tab-item-image}] + (item :icon) [rn/view {:style style/tab-item-image} + (quo2-icons/icon (:icon item) (style/tab-icon))])] + [rn/view + {:style style/tab-item-container} + tab-image + [text/text + {:style style/tab-item-label + :width :medium} + (:label item)]])) + +(defn transform-data + [data] + (map #(hash-map :id (:id %) :label (render-tab-item %)) data)) + +(defn view + [{:keys [data default-active on-change] + :or {default-active 1 + on-change (constantly nil)}}] + [quo2/segmented-control + {:default-active default-active + :size 32 + :blur? false + :container-style (style/tab-container) + :item-container-style (style/segmented-tab-item-container) + :active-item-container-style (style/active-segmented-tab-item-container) + :data (transform-data data) + :on-change on-change}]) diff --git a/src/quo2/components/settings/reorder_item/style.cljs b/src/quo2/components/settings/reorder_item/style.cljs new file mode 100644 index 0000000000..79074fdb73 --- /dev/null +++ b/src/quo2/components/settings/reorder_item/style.cljs @@ -0,0 +1,145 @@ +(ns quo2.components.settings.reorder-item.style + (:require [quo2.foundations.colors :as colors])) + +(defn item-container + [] + {:flex-direction :row + :align-items :center + :padding-horizontal 10 + :border-radius 14 + :margin-bottom 23 + :height 45 + :background-color (colors/theme-colors + colors/white + colors/neutral-90)}) + +(def item-container-extended + {:height 52}) + +(def body-container + {:flex 1 + :margin-left 12 + :flex-direction :row + :align-items :center + :margin-right -6}) + +(def image-container + {:margin-right 8}) + +(defn image + [size] + {:width size + :height size}) + +(def item-text + {:font-size 14}) + +(defn chevron + [] + {:color (colors/theme-colors + colors/neutral-50 + colors/neutral-40) + :height 14 + :width 14}) + +(def item-subtitle + {:color colors/neutral-50 + :font-size 13}) + +(def right-text + {:font-size 15 + :color colors/neutral-40}) + +(def text-container + {:flex 1 + :flex-direction :row + :justify-content :space-between + :margin-right 8}) + +(defn right-icon + [] + {:height 20 + :width 20 + :color (colors/theme-colors + colors/neutral-40 + colors/neutral-40)}) + +(def right-icon-container + {:justify-content :center}) + +(defn placeholder-container + [] + {:background-color :transparent + :border-width 1 + :border-color (colors/theme-colors + colors/neutral-30 + colors/neutral-80) + :padding 12 + :justify-content :center + :align-items :center + :border-radius 16 + :margin-bottom 24 + :border-style :dashed}) + +(defn placeholder-text + [] + {:color (colors/theme-colors + colors/neutral-40 + colors/neutral-50) + :font-size 13}) + +(defn skeleton-container + [] + {:background-color (colors/theme-colors + colors/neutral-5 + colors/neutral-95) + :border-radius 16 + :margin-bottom 24 + :height 48}) + +(defn tab-container + [] + {:background-color (colors/theme-colors + colors/neutral-5 + colors/neutral-95) + :padding-horizontal 4 + :padding-vertical 6 + :margin-bottom 24}) + +(defn segmented-tab-item-container + [] + {:height 40 + :border-width 1 + :border-style :dashed + :margin-horizontal 2 + :border-color (colors/theme-colors + colors/neutral-30 + colors/neutral-60)}) + +(defn active-segmented-tab-item-container + [] + {:height 40 + :background-color (colors/theme-colors + colors/neutral-30 + colors/neutral-90)}) + +(def tab-item-container + {:flex-direction :row + :justify-content :center + :align-items :center}) + +(def tab-item-image + {:height 19 + :width 19 + :margin-right 3}) + +(def tab-item-label + {:font-size 14}) + +(defn tab-icon + [] + {:height 16 + :width 16 + :color (colors/theme-colors + colors/neutral-40 + colors/neutral-40)}) diff --git a/src/quo2/components/settings/reorder_item/types.cljs b/src/quo2/components/settings/reorder_item/types.cljs new file mode 100644 index 0000000000..4563557981 --- /dev/null +++ b/src/quo2/components/settings/reorder_item/types.cljs @@ -0,0 +1,6 @@ +(ns quo2.components.settings.reorder-item.types) + +(def ^:const item 0) +(def ^:const placeholder 1) +(def ^:const skeleton 2) +(def ^:const tab 3) diff --git a/src/quo2/components/settings/reorder_item/view.cljs b/src/quo2/components/settings/reorder_item/view.cljs new file mode 100644 index 0000000000..b48ad8f145 --- /dev/null +++ b/src/quo2/components/settings/reorder_item/view.cljs @@ -0,0 +1,16 @@ +(ns quo2.components.settings.reorder-item.view + (:require + [quo2.components.settings.reorder-item.items.item :as item] + [quo2.components.settings.reorder-item.items.item-placeholder :as placeholder] + [quo2.components.settings.reorder-item.items.item-skeleton :as skeleton] + [quo2.components.settings.reorder-item.items.item-tabs :as tab] + [quo2.components.settings.reorder-item.types :as types])) + +(defn reorder-item + [item type] + (case type + types/item [item/view item] + types/placeholder [placeholder/view item] + types/skeleton [skeleton/view] + types/tab [tab/view item] + nil)) diff --git a/src/quo2/components/tabs/segmented_tab.cljs b/src/quo2/components/tabs/segmented_tab.cljs index 207150d3df..dc8f85b3eb 100644 --- a/src/quo2/components/tabs/segmented_tab.cljs +++ b/src/quo2/components/tabs/segmented_tab.cljs @@ -16,32 +16,37 @@ (defn segmented-control [{:keys [default-active on-change]}] (let [active-tab-id (reagent/atom default-active)] - (fn [{:keys [data size override-theme blur?]}] + (fn [{:keys [data size override-theme blur? container-style item-container-style + active-item-container-style]}] (let [active-id @active-tab-id] [rn/view - {:flex-direction :row - :background-color (get-in (if blur? themes-for-blur themes) - [(or override-theme (theme/get-theme)) :background-color]) - :border-radius (case size - 32 10 - 28 8 - 24 8 - 20 6) - :padding 2} + (merge + {:flex-direction :row + :background-color (get-in (if blur? themes-for-blur themes) + [(or override-theme (theme/get-theme)) :background-color]) + :border-radius (case size + 32 10 + 28 8 + 24 8 + 20 6) + :padding 2} + container-style) (for [[indx {:keys [label id]}] (map-indexed vector data)] ^{:key id} [rn/view {:margin-left (if (= 0 indx) 0 2) :flex 1} [tab/view - {:id id - :segmented? true - :size size - :override-theme override-theme - :blur? blur? - :active (= id active-id) - :on-press (fn [tab-id] - (reset! active-tab-id tab-id) - (when on-change - (on-change tab-id)))} + {:id id + :active-item-container-style active-item-container-style + :item-container-style item-container-style + :segmented? true + :size size + :override-theme override-theme + :blur? blur? + :active (= id active-id) + :on-press (fn [tab-id] + (reset! active-tab-id tab-id) + (when on-change + (on-change tab-id)))} label]])])))) diff --git a/src/quo2/components/tabs/tab/view.cljs b/src/quo2/components/tabs/tab/view.cljs index a726fbe894..7d3467132d 100644 --- a/src/quo2/components/tabs/tab/view.cljs +++ b/src/quo2/components/tabs/tab/view.cljs @@ -50,6 +50,8 @@ [{:keys [accessibility-label active before + item-container-style + active-item-container-style blur? disabled id @@ -79,12 +81,16 @@ [notification-dot/notification-dot {:style style/notification-dot}]) [rn/view - {:style (style/tab - {:size size - :disabled disabled - :segmented? segmented? - :background-color (if (and segmented? (not active)) :transparent background-color) - :show-notification-dot? show-notification-dot?})} + {:style (merge + (style/tab + {:size size + :background-color (if (and segmented? (not active)) + :transparent + background-color) + :disabled disabled + :segmented? segmented? + :show-notification-dot? show-notification-dot?}) + (if active active-item-container-style item-container-style))} (when before [rn/view [icons/icon before {:color icon-color}]]) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index e5092ee9d0..cfcc304a6d 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -87,7 +87,8 @@ quo2.components.tags.tags quo2.components.tags.token-tag quo2.components.text-combinations.title.view - quo2.components.settings.settings-list.view)) + quo2.components.settings.settings-list.view + quo2.components.settings.reorder-item.view)) (def text quo2.components.markdown.text/text) (def icon quo2.components.icon/icon) @@ -210,6 +211,7 @@ (def privacy-option quo2.components.settings.privacy-option/card) (def account quo2.components.settings.accounts.view/account) (def settings-list quo2.components.settings.settings-list.view/settings-list) +(def reorder-item quo2.components.settings.reorder-item.view/reorder-item) ;;;; SHARE (def qr-code quo2.components.share.qr-code.view/qr-code) diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index 8abc127984..2b11830769 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -34,4 +34,5 @@ [quo2.components.selectors.selectors.component-spec] [quo2.components.settings.settings-list.component-spec] [quo2.components.share.share-qr-code.component-spec] - [quo2.components.tags.--tests--.status-tags-component-spec])) + [quo2.components.tags.--tests--.status-tags-component-spec] + [quo2.components.settings.reorder-item.component-spec])) diff --git a/src/status_im2/common/resources.cljs b/src/status_im2/common/resources.cljs index 698fa1daeb..58c05ccac7 100644 --- a/src/status_im2/common/resources.cljs +++ b/src/status_im2/common/resources.cljs @@ -44,16 +44,20 @@ :no-notifications-dark (js/require "../resources/images/ui2/no-notifications-dark.png")}) (def mock-images - {:coinbase (js/require "../resources/images/mock2/coinbase.png") + {:diamond (js/require "../resources/images/mock2/diamond.png") + :coinbase (js/require "../resources/images/mock2/coinbase.png") :collectible (js/require "../resources/images/mock2/collectible.png") + :contact (js/require "../resources/images/mock2/contact.png") :community-banner (js/require "../resources/images/mock2/community-banner.png") :community-logo (js/require "../resources/images/mock2/community-logo.png") :community-cover (js/require "../resources/images/mock2/community-cover.png") :decentraland (js/require "../resources/images/mock2/decentraland.png") :gif (js/require "../resources/images/mock2/gif.png") + :monkey (js/require "../resources/images/mock2/monkey.png") :photo1 (js/require "../resources/images/mock2/photo1.png") :photo2 (js/require "../resources/images/mock2/photo2.png") :photo3 (js/require "../resources/images/mock2/photo3.png") + :pinterest (js/require "../resources/images/mock2/pinterest.png") :qr-code (js/require "../resources/images/mock2/qr-code.png") :rarible (js/require "../resources/images/mock2/rarible.png") :small-opt-card-icon (js/require "../resources/images/mock2/small_opt_card_icon.png") @@ -61,6 +65,7 @@ :status-logo (js/require "../resources/images/mock2/status-logo.png") :sticker (js/require "../resources/images/mock2/sticker.png") :ring (js/require "../resources/images/mock2/ring.png") + :verified (js/require "../resources/images/mock2/verified.png") :user-picture-female2 (js/require "../resources/images/mock2/user_picture_female2.png") :user-picture-male4 (js/require "../resources/images/mock2/user_picture_male4.png") :user-picture-male5 (js/require "../resources/images/mock2/user_picture_male5.png")}) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 32d9618cb0..0bd6b7d061 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -78,6 +78,7 @@ [status-im2.contexts.quo-preview.settings.accounts :as accounts] [status-im2.contexts.quo-preview.settings.settings-list :as settings-list] [status-im2.contexts.quo-preview.settings.privacy-option :as privacy-option] + [status-im2.contexts.quo-preview.settings.reorder-item :as reorder-item] [status-im2.contexts.quo-preview.share.qr-code :as qr-code] [status-im2.contexts.quo-preview.share.share-qr-code :as share-qr-code] [status-im2.contexts.quo-preview.switcher.switcher-cards :as switcher-cards] @@ -317,7 +318,10 @@ :component accounts/preview-accounts} {:name :settings-list :options {:topBar {:visible true}} - :component settings-list/preview-settings-list}] + :component settings-list/preview-settings-list} + {:name :reorder-item + :options {:topBar {:visible true}} + :component reorder-item/preview-reorder-item}] :share [{:name :qr-code :options {:topBar {:visible true}} :component qr-code/preview-qr-code} diff --git a/src/status_im2/contexts/quo_preview/settings/reorder_item.cljs b/src/status_im2/contexts/quo_preview/settings/reorder_item.cljs new file mode 100644 index 0000000000..801c91ef41 --- /dev/null +++ b/src/status_im2/contexts/quo_preview/settings/reorder_item.cljs @@ -0,0 +1,94 @@ +(ns status-im2.contexts.quo-preview.settings.reorder-item + (:require + [quo2.core :as quo] + [react-native.core :as rn] + [status-im2.common.resources :as resources] + [quo2.foundations.colors :as colors] + [quo2.components.settings.reorder-item.types :as types])) + +(def mock-data + [{:id 1 + :type types/item + :data {:on-press (println "pressed") + :image (resources/get-mock-image :diamond) + :image-size 21 + :right-icon :i/world + :title "Trip to Bahamas"}} + {:id 2 + :type types/item + :data {:image (resources/get-mock-image :status-logo) + :image-size 21 + :right-icon :i/world + :title "Status"}} + {:id 3 + :type types/item + :data {:image (resources/tokens :eth) + :image-size 21 + :right-icon :i/world + :title "Ethereum"}} + {:id 4 + :type types/item + :data {:image (resources/get-mock-image :monkey) + :image-size 30 + :right-icon :i/world + :title "3045" + :subtitle "Bored Ape Yatch Club"}} + {:id 5 + :type types/item + :data {:image (resources/get-mock-image :pinterest) + :image-size 21 + :right-text "@sheralito" + :title "Pinterest"}} + {:id 6 + :type types/placeholder + :data {:label "Label"}} + {:id 7 + :type types/placeholder + :data {:label "Label"}} + {:id 8 + :type types/skeleton} + {:id 9 + :type types/skeleton} + {:id 10 + :type types/tab + :data {:data [{:id 1 + :label "Everyone" + :icon :i/world} + {:id 2 + :label "Contacts" + :image (resources/get-mock-image :contact)} + {:id 3 + :label "Verified" + :image (resources/get-mock-image :verified)}] + :on-change (fn [tab-id] (println tab-id)) + :default-active 2}} + {:id 11 + :type types/tab + :data {:data [{:id 1 + :label "Everyone" + :icon :i/world} + {:id 2 + :label "Contacts" + :image (resources/get-mock-image :contact)} + {:id 3 + :label "Verified" + :image (resources/get-mock-image :verified)}] + :on-change (fn [tab-id] (println tab-id)) + :default-active 1}}]) + + +(defn container + [] + {:padding-horizontal 38 + :padding-vertical 20 + :background-color (colors/theme-colors + colors/neutral-10 + colors/neutral-100) + :flex 1}) + +(defn preview-reorder-item + [] + [rn/scroll-view + {:style (container)} + (for [item mock-data] + [quo/reorder-item (item :data) (item :type)])])