From 5f16e52bb77143f9cccab9e683b62fad5410eb87 Mon Sep 17 00:00:00 2001 From: Dominik Zborowski Date: Thu, 7 Nov 2024 01:11:57 +0100 Subject: [PATCH] Grid mobile warning --- components/ModalTemplateDefault.vue | 2 +- domains/grid/components/GridView.vue | 16 ++++++++++++++++ public/images/grid.svg | 6 ++++++ stores/grid.ts | 3 +++ translations/en_US.json | 3 +++ types/modal.ts | 7 +++++++ 6 files changed, 36 insertions(+), 1 deletion(-) create mode 100644 public/images/grid.svg diff --git a/components/ModalTemplateDefault.vue b/components/ModalTemplateDefault.vue index 4bbd301f..cec99da9 100644 --- a/components/ModalTemplateDefault.vue +++ b/components/ModalTemplateDefault.vue @@ -7,7 +7,7 @@ const { modal, closeModal } = useModal()
diff --git a/domains/grid/components/GridView.vue b/domains/grid/components/GridView.vue index a599b6fa..fe4c20f8 100644 --- a/domains/grid/components/GridView.vue +++ b/domains/grid/components/GridView.vue @@ -11,6 +11,7 @@ const { gridRowHeightRatio, selectedGridId, isSavingGrid, + mobileLimitationsDisplayed, } = storeToRefs(useGridStore()) const { saveGrid, @@ -21,6 +22,8 @@ const { getGridById, gridsForTabs, } = useGrid() +const { showModal } = useModal() +const { formatMessage } = useIntl() const gridContainer = ref(null) const { width } = useElementSize(gridContainer) const gridWidgets = ref([]) @@ -161,6 +164,19 @@ watch( } else { hasUnsavedGrid.value = false } + + // show mobile limitations modal (only once) + if (isMobile.value && !mobileLimitationsDisplayed.value) { + showModal({ + data: { + icon: '/images/grid.svg', + title: formatMessage('grid_mobile_limitations_title'), + message: formatMessage('grid_mobile_limitations_message'), + confirmButtonText: formatMessage('grid_mobile_limitations_confirm'), + }, + }) + mobileLimitationsDisplayed.value = true + } } else { gridWidgets.value = getSelectedGridWidgets(updatedViewedGrid) } diff --git a/public/images/grid.svg b/public/images/grid.svg new file mode 100644 index 00000000..98c84b4f --- /dev/null +++ b/public/images/grid.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/stores/grid.ts b/stores/grid.ts index 08bf90b5..41278373 100644 --- a/stores/grid.ts +++ b/stores/grid.ts @@ -11,6 +11,7 @@ export const useGridStore = defineStore( const gridRowHeightRatio = ref(DEFAULT_GRID_ROW_HEIGHT_RATIO) const gridChainId = ref(DEFAULT_NETWORK_CHAIN_ID) const tempGrids = ref>({}) + const mobileLimitationsDisplayed = ref(false) // We use tempGrid as a proxy to the actual grid data stored in tempGrids const tempGrid = computed({ @@ -45,6 +46,7 @@ export const useGridStore = defineStore( selectedGridId, gridRowHeightRatio, gridChainId, + mobileLimitationsDisplayed, } }, { @@ -55,6 +57,7 @@ export const useGridStore = defineStore( 'selectedGridId', 'gridRowHeightRatio', 'gridChainId', + 'mobileLimitationsDisplayed', 'tempGrids', ], key: STORAGE_KEY.GRID_STORE, diff --git a/translations/en_US.json b/translations/en_US.json index 25723c28..601b3bc8 100644 --- a/translations/en_US.json +++ b/translations/en_US.json @@ -19,6 +19,7 @@ "error_rejected_request": "You rejected the request", "dapp_showcase_06_image": "/images/universal-grave-dapp.jpg", "button_create_testnet_profile": "CREATE A TESTNET PROFILE", + "grid_mobile_limitations_title": "Editing on mobile", "modal_switch_network_title": "Change extension network", "hero_title_01": "Discover", "modal_follower_title": "Followers", @@ -61,6 +62,7 @@ "tooltip_text_copy_raw": "Copy raw", "add_widget_section_website": "Website", "data_provider_graph_description": "Load data via the our Envio indexing service. This results in faster loading times and smoother UX, however inappropriate content might be removed.", + "grid_mobile_limitations_confirm": "I understand", "transak_success_message": "Please note that it can take some time for your balance to update.", "missing_asset_label_added": "Added", "error_no_accounts": "Account not found.", @@ -268,6 +270,7 @@ "dapp_showcase_02_url": "https://universalswaps.io/", "token_collection_of": "Owns {count}", "add_widget_images_description": "Allows to embed image files.", + "grid_mobile_limitations_message": "some editing features are not available on mobile right now", "add_widget_text_title_placeholder": "Header text", "data_provider_rpc_description": "Loads data directly from the blockchain using an RPC provider. If a custom RPC provider (This feature will be added later) is used the read data can not be manipulated by us. \n\nWill result in slower loading times during the loading of assets and some app features might be limited.", "move_widget_description": "Please select to which Grid you want to move this widget.", diff --git a/types/modal.ts b/types/modal.ts index 550b11f2..b7896abb 100644 --- a/types/modal.ts +++ b/types/modal.ts @@ -16,3 +16,10 @@ export type ModalQueryParams = { export type ModalData = { [key: string]: any } + +export type DefaultModalData = { + message: string + title?: string + confirmButtonText?: string + icon?: string +}