From 87f30244421040a121e04d4ba041ecf3c9c4e0be Mon Sep 17 00:00:00 2001 From: alexsparkes Date: Tue, 21 May 2024 23:31:38 +0100 Subject: [PATCH] temp: debug statements for testing Co-authored-by: Isaac Co-authored-by: David Ralph --- .github/ISSUE_TEMPLATE/feature-request.md | 4 +- .../Elements/MainModal/scss/index.scss | 6 + .../MainModal/scss/marketplace/_main.scss | 9 +- .../scss/marketplace/modules/_buttons.scss | 3 +- .../scss/marketplace/modules/_item.scss | 2 +- .../scss/modules/_modalTabContent.scss | 15 +- .../scss/settings/modules/tabs/_about.scss | 2 +- .../scss/settings/modules/tabs/_stats.scss | 3 + .../Elements/ShareModal/sharemodal.scss | 1 + src/components/Elements/Tooltip/tooltip.scss | 8 +- .../Elements/Carousel/carousel.scss | 1 - .../marketplace/components/Items/Items.jsx | 3 +- src/features/marketplace/views/Browse.jsx | 2 +- src/features/navbar/options/AppsOptions.jsx | 166 ++++++++++++++++++ src/features/navbar/options/NavbarOptions.jsx | 155 +--------------- src/features/navbar/scss/index.scss | 8 + src/features/quote/quote.scss | 7 +- src/features/search/options/SearchOptions.jsx | 2 +- src/features/time/Clock.jsx | 4 +- src/features/time/clock.scss | 3 +- src/features/time/components/AnalogClock.jsx | 2 + .../time/components/VerticalClock.jsx | 7 +- src/features/time/options/TimeOptions.jsx | 31 ++++ src/features/weather/weather.scss | 2 +- src/i18n/locales/en_GB.json | 7 +- src/scss/_variables.scss | 2 +- src/scss/index.scss | 13 +- ....timestamp-1716327320812-afa5a5ba1661a.mjs | 140 +++++++++++++++ 28 files changed, 419 insertions(+), 189 deletions(-) create mode 100644 src/features/navbar/options/AppsOptions.jsx create mode 100644 vite.config.mjs.timestamp-1716327320812-afa5a5ba1661a.mjs diff --git a/.github/ISSUE_TEMPLATE/feature-request.md b/.github/ISSUE_TEMPLATE/feature-request.md index d7f9cba3..e9db71f5 100644 --- a/.github/ISSUE_TEMPLATE/feature-request.md +++ b/.github/ISSUE_TEMPLATE/feature-request.md @@ -1,6 +1,6 @@ --- -name: Feature Request -about: Request things to be added to mue +name: Request a feature +about: Request something to be implemented in the extension title: "[Feature Request]" labels: enhancement assignees: '' diff --git a/src/components/Elements/MainModal/scss/index.scss b/src/components/Elements/MainModal/scss/index.scss index 3c1746ef..26c367ed 100644 --- a/src/components/Elements/MainModal/scss/index.scss +++ b/src/components/Elements/MainModal/scss/index.scss @@ -162,6 +162,12 @@ h5 { gap: 15px; align-items: center; } + + .MuiOutlinedInput-notchedOutline { + @include themed { + border-color: t($modal-sidebarActive) !important; + } + } } .headerActions { diff --git a/src/components/Elements/MainModal/scss/marketplace/_main.scss b/src/components/Elements/MainModal/scss/marketplace/_main.scss index 37d83f30..450cfae7 100644 --- a/src/components/Elements/MainModal/scss/marketplace/_main.scss +++ b/src/components/Elements/MainModal/scss/marketplace/_main.scss @@ -8,15 +8,18 @@ .item { flex-flow: row !important; } + .item-back { margin: 0 !important; filter: blur(40px) saturate(180%) brightness(90%) !important; height: 15px !important; width: 200px !important; } + .item-icon { margin: 0 !important; } + .card-details { margin: 0 !important; text-align: left; @@ -169,7 +172,7 @@ width: 100%; box-sizing: border-box !important; border-radius: 12px 12px 0 0; - -webkit-backdrop-filter: blur(40px) saturate(150%) brightness(75%); + backdrop-filter: blur(40px) saturate(150%) brightness(75%); backdrop-filter: blur(40px) saturate(150%) brightness(75%); @include themed { @@ -249,7 +252,7 @@ flex-flow: column; text-align: center; align-items: center; - -webkit-user-select: none; + user-select: none; user-select: none; img { @@ -363,7 +366,7 @@ p.author { .nice-tag { border-radius: 150px; padding: 1px 12px; - -webkit-backdrop-filter: blur(16px) saturate(180%); + backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); background-color: rgb(255 255 255 / 10%); border: 1px solid rgb(209 213 219 / 30%); diff --git a/src/components/Elements/MainModal/scss/marketplace/modules/_buttons.scss b/src/components/Elements/MainModal/scss/marketplace/modules/_buttons.scss index e89f0794..c9d30f38 100644 --- a/src/components/Elements/MainModal/scss/marketplace/modules/_buttons.scss +++ b/src/components/Elements/MainModal/scss/marketplace/modules/_buttons.scss @@ -70,7 +70,7 @@ .btn-collection { padding: 1px 12px; - -webkit-backdrop-filter: blur(16px) saturate(180%); + backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); background-color: rgb(255 255 255 / 10%); border: 1px solid rgb(209 213 219 / 30%); @@ -132,5 +132,6 @@ a.btn-collection { height: 40px; display: grid; place-content: center; + @include modal-button(standard); } diff --git a/src/components/Elements/MainModal/scss/marketplace/modules/_item.scss b/src/components/Elements/MainModal/scss/marketplace/modules/_item.scss index e92693d7..d8113c4f 100644 --- a/src/components/Elements/MainModal/scss/marketplace/modules/_item.scss +++ b/src/components/Elements/MainModal/scss/marketplace/modules/_item.scss @@ -161,7 +161,7 @@ p.description { gap: 15px; .subtitle { - -webkit-user-select: text !important; + user-select: text !important; user-select: text !important; } } diff --git a/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss b/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss index dbd7a8a9..29907010 100644 --- a/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss +++ b/src/components/Elements/MainModal/scss/modules/_modalTabContent.scss @@ -77,7 +77,8 @@ button { @include modal-button(standard); - padding: 5px 10px 5px 10px; + + padding: 5px 10px; } } @@ -206,38 +207,40 @@ table { flex-flow: row !important; gap: 5px !important; text-align: center !important; - @include themed() { + + @include themed { background: t($modal-sidebar); box-shadow: t($boxShadow); color: t($color) !important; } + hr { height: 100%; margin-right: 5px; + @include themed { border-color: t($modal-secondaryColour); } } - text-align: center; + border-radius: 12px; height: 40px; font-size: 1rem; - display: flex; align-items: center; - flex-flow: row; justify-content: center; - gap: 20px; transition: 0.5s; cursor: pointer; border: 0; padding-left: 10px; padding-right: 5px; + input[type='tel'] { background: none; outline: none; border: none; max-width: 20px; text-align: center; + @include themed { color: t($color) !important; } diff --git a/src/components/Elements/MainModal/scss/settings/modules/tabs/_about.scss b/src/components/Elements/MainModal/scss/settings/modules/tabs/_about.scss index 5cde6088..5c8c8028 100644 --- a/src/components/Elements/MainModal/scss/settings/modules/tabs/_about.scss +++ b/src/components/Elements/MainModal/scss/settings/modules/tabs/_about.scss @@ -7,7 +7,7 @@ .aboutLogo { height: 100px; width: auto; - margin: calc(1rem - 15px) 0 1rem 0; + margin: calc(1rem - 15px) 0 1rem; align-self: center; } diff --git a/src/components/Elements/MainModal/scss/settings/modules/tabs/_stats.scss b/src/components/Elements/MainModal/scss/settings/modules/tabs/_stats.scss index 282ecb08..91f43f03 100644 --- a/src/components/Elements/MainModal/scss/settings/modules/tabs/_stats.scss +++ b/src/components/Elements/MainModal/scss/settings/modules/tabs/_stats.scss @@ -63,6 +63,7 @@ align-items: center; gap: 5px; font-size: 12px; + @include themed { color: t($subColor); } @@ -75,6 +76,7 @@ svg.trophy { font-size: 20px !important; + @include themed { background-image: t($slightGradient); box-shadow: t($boxShadow); @@ -86,6 +88,7 @@ svg.trophyLocked { font-size: 20px !important; + @include themed { background-image: t($modal-sidebarActive); box-shadow: t($boxShadow); diff --git a/src/components/Elements/ShareModal/sharemodal.scss b/src/components/Elements/ShareModal/sharemodal.scss index 6815cef3..29d53e69 100644 --- a/src/components/Elements/ShareModal/sharemodal.scss +++ b/src/components/Elements/ShareModal/sharemodal.scss @@ -38,6 +38,7 @@ justify-content: space-between; display: flex; gap: 15px; + button { width: 40px; } diff --git a/src/components/Elements/Tooltip/tooltip.scss b/src/components/Elements/Tooltip/tooltip.scss index 03db880d..c49eeaa0 100644 --- a/src/components/Elements/Tooltip/tooltip.scss +++ b/src/components/Elements/Tooltip/tooltip.scss @@ -31,7 +31,7 @@ margin-top: 15px; margin-left: -30px; */ cursor: initial; - -webkit-user-select: none; + user-select: none; user-select: none; opacity: 1; animation-name: floating; @@ -101,26 +101,32 @@ #floating { transition-property: opacity, transform; } + #floating[data-status='open'], #floating[data-status='close'] { transition-duration: 250ms; } + #floating[data-status='initial'], #floating[data-status='close'] { opacity: 0; } + #floating[data-status='initial'][data-placement^='top'], #floating[data-status='close'][data-placement^='top'] { transform: translateY(5px); } + #floating[data-status='initial'][data-placement^='bottom'], #floating[data-status='close'][data-placement^='bottom'] { transform: translateY(-5px); } + #floating[data-status='initial'][data-placement^='left'], #floating[data-status='close'][data-placement^='left'] { transform: translateX(5px); } + #floating[data-status='initial'][data-placement^='right'], #floating[data-status='close'][data-placement^='right'] { transform: translateX(-5px); diff --git a/src/features/marketplace/components/Elements/Carousel/carousel.scss b/src/features/marketplace/components/Elements/Carousel/carousel.scss index a001a451..46edb938 100644 --- a/src/features/marketplace/components/Elements/Carousel/carousel.scss +++ b/src/features/marketplace/components/Elements/Carousel/carousel.scss @@ -23,7 +23,6 @@ display: flex; -webkit-touch-callout: none; user-select: none; - user-select: none; -webkit-tap-highlight-color: transparent; margin-left: -10px; } diff --git a/src/features/marketplace/components/Items/Items.jsx b/src/features/marketplace/components/Items/Items.jsx index 2b781184..678f4ce7 100644 --- a/src/features/marketplace/components/Items/Items.jsx +++ b/src/features/marketplace/components/Items/Items.jsx @@ -116,13 +116,14 @@ function Items({
{items ?.filter((item) => filterItems(item, filter)) - .map((item) => ( + .map((item, index) => ( ))}
diff --git a/src/features/marketplace/views/Browse.jsx b/src/features/marketplace/views/Browse.jsx index d57185c8..8fe756e2 100644 --- a/src/features/marketplace/views/Browse.jsx +++ b/src/features/marketplace/views/Browse.jsx @@ -215,7 +215,7 @@ class Marketplace extends PureComponent { } sortMarketplace(data, sendEvent) { - const value = localStorage.getItem('sortMarketplace'); + const value = localStorage.getItem('sortMarketplace') || 'a-z'; let items = data || this.state.items; if (!items) { return; diff --git a/src/features/navbar/options/AppsOptions.jsx b/src/features/navbar/options/AppsOptions.jsx new file mode 100644 index 00000000..bfa84a7e --- /dev/null +++ b/src/features/navbar/options/AppsOptions.jsx @@ -0,0 +1,166 @@ +import variables from 'config/variables'; + +import { useState, memo } from 'react'; + +import Modal from 'react-modal'; +import { + MdAddLink, +} from 'react-icons/md'; + +import { AddModal } from 'components/Elements/AddModal'; +import { Button } from 'components/Elements'; + +import { Row, Content, Action } from 'components/Layout/Settings/Item'; + +import { getTitleFromUrl, isValidUrl } from 'utils/links'; +import { QuickLinks } from 'features/quicklinks'; + +function AppsOptions(appsEnabled) { + const [appsModalInfo, setAppsModalInfo] = useState({ + newLink: false, + edit: false, + items: JSON.parse(localStorage.getItem('applinks')), + urlError: '', + iconError: '', + editData: null, + }); + + const addLink = async (name, url, icon) => { + const data = JSON.parse(localStorage.getItem('applinks')); + + if (!url.startsWith('http://') && !url.startsWith('https://')) { + url = 'https://' + url; + } + + if (url.length <= 0 || isValidUrl(url) === false) { + return setAppsModalInfo((oldState) => ({ + ...oldState, + urlError: variables.getMessage('widgets.quicklinks.url_error'), + })); + } + + if (icon.length > 0 && isValidUrl(icon) === false) { + return setAppsModalInfo((oldState) => ({ + ...oldState, + iconError: variables.getMessage('widgets.quicklinks.icon_error'), + })); + } + + data.push({ + name: name || (await getTitleFromUrl(url)), + url, + icon: icon || '', + key: Math.random().toString(36).substring(7) + 1, + }); + + localStorage.setItem('applinks', JSON.stringify(data)); + + setAppsModalInfo({ + newLink: false, + edit: false, + items: data, + urlError: '', + iconError: '', + }); + + variables.stats.postEvent('feature', 'App link add'); + }; + + const startEditLink = (data) => { + setAppsModalInfo((oldState) => ({ + ...oldState, + edit: true, + editData: data, + })); + }; + + const editLink = async (og, name, url, icon) => { + const data = JSON.parse(localStorage.getItem('applinks')); + const dataobj = data.find((i) => i.key === og.key); + dataobj.name = name || (await getTitleFromUrl(url)); + dataobj.url = url; + dataobj.icon = icon || ''; + + localStorage.setItem('applinks', JSON.stringify(data)); + + setAppsModalInfo((oldState) => ({ + ...oldState, + items: data, + edit: false, + newLink: false, + })); + }; + + const deleteLink = (key, event) => { + event.preventDefault(); + + // remove link from array + const data = JSON.parse(localStorage.getItem('applinks')).filter((i) => i.key !== key); + + localStorage.setItem('applinks', JSON.stringify(data)); + + setAppsModalInfo((oldState) => ({ + ...oldState, + items: data, + })); + + variables.stats.postEvent('feature', 'App link delete'); + }; + + return ( + <> + + + +