From 72fa073202a771107c6a3b236ed7340f585b58d6 Mon Sep 17 00:00:00 2001 From: Fatemeh sh Date: Tue, 28 Jan 2025 14:32:02 +0330 Subject: [PATCH 1/5] add `Custom Share` button --- src/Assets/icons/services/custom-share.svg | 1 + src/Data/services.data.ts | 11 ++++++++++- src/Views/Pages/GetButton/index.scss | 7 +++++-- 3 files changed, 16 insertions(+), 3 deletions(-) create mode 100644 src/Assets/icons/services/custom-share.svg diff --git a/src/Assets/icons/services/custom-share.svg b/src/Assets/icons/services/custom-share.svg new file mode 100644 index 0000000..df7d269 --- /dev/null +++ b/src/Assets/icons/services/custom-share.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/Data/services.data.ts b/src/Data/services.data.ts index 5e1930b..f13d23a 100644 --- a/src/Data/services.data.ts +++ b/src/Data/services.data.ts @@ -1,4 +1,6 @@ import X from '@assets/icons/services/x.svg'; +import { ServiceName } from './constants.data'; +import { CONFIG } from '@src/App/Config/constants'; import Email from '@assets/icons/services/email.svg'; import Gmail from '@assets/icons/services/gmail.svg'; import Yahoo from '@assets/icons/services/yahoo.svg'; @@ -11,10 +13,11 @@ import Facebook from '@assets/icons/services/facebook.svg'; import Linkedin from '@assets/icons/services/linkedin.svg'; import Pinterest from '@assets/icons/services/pinterest.svg'; import HackerNews from '@assets/icons/services/hacker-news.svg'; -import { ServiceName } from './constants.data'; +import CustomShare from '@assets/icons/services/custom-share.svg'; export const getServiceURL = (url: string, subject?: string): { [key: string]: string } => { return { + [ServiceName.Custom]: `${CONFIG.FRONT_DOMAIN}/?path=custom_share&link=${url}&subject=${subject}`, [ServiceName.Email]: `mailto:?subject=${subject}&body=${url}`, [ServiceName.Gmail]: `https://mail.google.com/mail/u/0/?ui=2&fs=1&tf=cm&su=${subject}&body=${url}`, [ServiceName.Telegram]: `https://telegram.me/share/url?url=${url}&text=${subject}`, @@ -32,6 +35,12 @@ export const getServiceURL = (url: string, subject?: string): { [key: string]: s }; export const SERVICES = [ + { + title: ServiceName.Custom, + icon: CustomShare, + iconUrl: 'https://github.com/openscilab/mybutton/raw/main/src/Assets/icons/services/custom-share.svg', + bg: '#4b2b79', + }, { title: ServiceName.Email, icon: Email, diff --git a/src/Views/Pages/GetButton/index.scss b/src/Views/Pages/GetButton/index.scss index 814a8ef..6e8e2c0 100644 --- a/src/Views/Pages/GetButton/index.scss +++ b/src/Views/Pages/GetButton/index.scss @@ -159,7 +159,7 @@ @apply overflow-y-auto; .rs-col { - @apply sm:mb-2; + @apply sm:mb-2 p-0; } .service-radio { @@ -196,7 +196,10 @@ } h2 { - @apply ml-1.5 capitalize transition-colors; + @apply ml-1.5 transition-colors; + @include down(md) { + font-size: 0.75rem; + } } } } From 185284faf3f89c006c9bcd28bb200f79a9c1dab6 Mon Sep 17 00:00:00 2001 From: Fatemeh sh Date: Tue, 28 Jan 2025 14:37:55 +0330 Subject: [PATCH 2/5] handle `Custom Share` button clicking action --- src/Tools/Store/slices/LocalCacheSlice.ts | 10 +++++----- src/Views/Layout/Navbar/NavBar.tsx | 4 ++-- src/Views/Layout/ShareModal/index.tsx | 20 +++++++++---------- src/Views/Layout/index.tsx | 12 ++++++------ src/Views/Pages/GetButton/index.tsx | 24 +++++++++++++++++++++-- 5 files changed, 44 insertions(+), 26 deletions(-) diff --git a/src/Tools/Store/slices/LocalCacheSlice.ts b/src/Tools/Store/slices/LocalCacheSlice.ts index dc572d4..b773c42 100644 --- a/src/Tools/Store/slices/LocalCacheSlice.ts +++ b/src/Tools/Store/slices/LocalCacheSlice.ts @@ -1,16 +1,16 @@ import { createSlice } from '@reduxjs/toolkit'; import useStore from '../useStore'; -type InitStateType = { openShareModal: boolean; activePage: string }; +type InitStateType = { shareModal: { open: boolean; url?: string; subject?: string }; activePage: string }; -const initialState: InitStateType = { openShareModal: false, activePage: 'home' }; +const initialState: InitStateType = { shareModal: { open: false }, activePage: 'home' }; const localCacheSlice = createSlice({ name: 'localCache', initialState, reducers: { - setOpenShareModal(state, { payload }) { - state.openShareModal = payload; + setShareModal(state, { payload }) { + state.shareModal = payload; }, setActivePage(state, { payload }) { state.activePage = payload; @@ -23,6 +23,6 @@ export const useLocalCache = () => { return selector(s => s?.localStorage); }; -export const { setOpenShareModal, setActivePage } = localCacheSlice.actions; +export const { setShareModal, setActivePage } = localCacheSlice.actions; export default localCacheSlice; diff --git a/src/Views/Layout/Navbar/NavBar.tsx b/src/Views/Layout/Navbar/NavBar.tsx index 9a8fe9b..afad966 100644 --- a/src/Views/Layout/Navbar/NavBar.tsx +++ b/src/Views/Layout/Navbar/NavBar.tsx @@ -4,7 +4,7 @@ import useStore from '@src/Tools/Store/useStore'; import { classes } from '@src/Tools/Utils/React'; import { useSearchParams } from 'react-router-dom'; import { ReactComponent as Logo } from '@assets/Images/logo-text.svg'; -import { setOpenShareModal, useLocalCache } from '@src/Tools/Store/slices/LocalCacheSlice'; +import { setShareModal, useLocalCache } from '@src/Tools/Store/slices/LocalCacheSlice'; const NavBar = () => { const { activePage } = useLocalCache(); @@ -27,7 +27,7 @@ const NavBar = () => {