@@ -89,11 +102,13 @@
import SettingsLayout from '../../_components/settings/SettingsLayout.html'
import ThemeSettings from '../../_components/settings/instance/ThemeSettings.html'
import { store } from '../../_store/store'
+ import Tooltip from '../../_components/Tooltip.html'
export default {
components: {
SettingsLayout,
- ThemeSettings
+ ThemeSettings,
+ Tooltip
},
methods: {
onChange (event) {
diff --git a/src/routes/_pages/settings/index.html b/src/routes/_pages/settings/index.html
index 45503ed..223abff 100644
--- a/src/routes/_pages/settings/index.html
+++ b/src/routes/_pages/settings/index.html
@@ -8,6 +8,9 @@
+
+
+
diff --git a/src/routes/_pages/settings/wellness.html b/src/routes/_pages/settings/wellness.html
new file mode 100644
index 0000000..077a965
--- /dev/null
+++ b/src/routes/_pages/settings/wellness.html
@@ -0,0 +1,154 @@
+
+ Wellness Settings
+
+
+ Wellness settings are designed to reduce the addictive or anxiety-inducing aspects of social media.
+ Choose any options that work well for you.
+
+
+
+
+ Metrics
+
+
+
+ Notifications
+
+
+
+
+
+ UI
+
+
+
+ These settings are partly based on guidelines from the
+ Center for Humane Technology.
+
+
+
+
diff --git a/src/routes/_static/themes.js b/src/routes/_static/themes.js
index 97ea9c9..3c37cfa 100644
--- a/src/routes/_static/themes.js
+++ b/src/routes/_static/themes.js
@@ -40,6 +40,11 @@ const themes = [
label: 'Gecko',
dark: false,
color: '#4ab92f'
+ },
+ name: 'grayscale',
+ label: 'Grayscale',
+ dark: false,
+ color: '#999999'
},
{
name: 'sam',
@@ -112,6 +117,12 @@ const themes = [
label: 'Pitch Black',
dark: true,
color: '#000'
+ },
+ {
+ name: 'dark-grayscale',
+ label: 'Dark Grayscale',
+ dark: true,
+ color: '#666'
}
]
diff --git a/src/routes/_store/LocalStorageStore.js b/src/routes/_store/LocalStorageStore.js
index 4c1bb8d..edfa019 100644
--- a/src/routes/_store/LocalStorageStore.js
+++ b/src/routes/_store/LocalStorageStore.js
@@ -1,10 +1,7 @@
import { Store } from 'svelte/store'
import { safeLocalStorage as LS } from '../_utils/safeLocalStorage'
import lifecycle from 'page-lifecycle/dist/lifecycle.mjs'
-
-function safeParse (str) {
- return !str ? undefined : (str === 'undefined' ? undefined : JSON.parse(str))
-}
+import { safeParse } from './safeParse'
export class LocalStorageStore extends Store {
constructor (state, keysToWatch) {
diff --git a/src/routes/_store/computations/timelineComputations.js b/src/routes/_store/computations/timelineComputations.js
index 2678519..068b15c 100644
--- a/src/routes/_store/computations/timelineComputations.js
+++ b/src/routes/_store/computations/timelineComputations.js
@@ -143,6 +143,14 @@ export function timelineComputations (store) {
}
)
+ store.compute(
+ 'filteredTimelineItemSummariesToAdd',
+ ['timelineItemSummariesToAdd', 'timelineFilterFunction'],
+ (timelineItemSummariesToAdd, timelineFilterFunction) => {
+ return timelineItemSummariesToAdd && timelineItemSummariesToAdd.filter(timelineFilterFunction)
+ }
+ )
+
store.compute('timelineNotificationItemSummaries',
[`timelineData_timelineItemSummariesToAdd`, 'timelineFilterFunction', 'currentInstance'],
(root, timelineFilterFunction, currentInstance) => (
@@ -159,14 +167,18 @@ export function timelineComputations (store) {
)
store.compute('numberOfNotifications',
- ['filteredTimelineNotificationItemSummaries'],
- (filteredTimelineNotificationItemSummaries) => (
- filteredTimelineNotificationItemSummaries ? filteredTimelineNotificationItemSummaries.length : 0
+ ['filteredTimelineNotificationItemSummaries', 'disableNotificationBadge'],
+ (filteredTimelineNotificationItemSummaries, disableNotificationBadge) => (
+ (!disableNotificationBadge && filteredTimelineNotificationItemSummaries)
+ ? filteredTimelineNotificationItemSummaries.length
+ : 0
)
)
store.compute('hasNotifications',
['numberOfNotifications', 'currentPage'],
- (numberOfNotifications, currentPage) => currentPage !== 'notifications' && !!numberOfNotifications
+ (numberOfNotifications, currentPage) => (
+ currentPage !== 'notifications' && !!numberOfNotifications
+ )
)
}
diff --git a/src/routes/_store/observers/grayscaleObservers.js b/src/routes/_store/observers/grayscaleObservers.js
new file mode 100644
index 0000000..69fe794
--- /dev/null
+++ b/src/routes/_store/observers/grayscaleObservers.js
@@ -0,0 +1,16 @@
+import { switchToTheme } from '../../_utils/themeEngine'
+
+const style = process.browser && document.getElementById('theGrayscaleStyle')
+
+export function grayscaleObservers (store) {
+ if (!process.browser) {
+ return
+ }
+
+ store.observe('enableGrayscale', enableGrayscale => {
+ const { instanceThemes, currentInstance } = store.get()
+ const theme = instanceThemes && instanceThemes[currentInstance]
+ style.setAttribute('media', enableGrayscale ? 'all' : 'only x') // disable or enable the style
+ switchToTheme(theme, enableGrayscale)
+ })
+}
diff --git a/src/routes/_store/observers/observers.js b/src/routes/_store/observers/observers.js
index ff8f6b1..527f644 100644
--- a/src/routes/_store/observers/observers.js
+++ b/src/routes/_store/observers/observers.js
@@ -6,6 +6,7 @@ import { resizeObservers } from './resizeObservers'
import { setupLoggedInObservers } from './setupLoggedInObservers'
import { logOutObservers } from './logOutObservers'
import { touchObservers } from './touchObservers'
+import { grayscaleObservers } from './grayscaleObservers'
export function observers (store) {
onlineObservers(store)
@@ -15,5 +16,6 @@ export function observers (store) {
resizeObservers(store)
touchObservers(store)
logOutObservers(store)
+ grayscaleObservers(store)
setupLoggedInObservers(store)
}
diff --git a/src/routes/_store/observers/onlineObservers.js b/src/routes/_store/observers/onlineObservers.js
index ebe9a15..a0c7308 100644
--- a/src/routes/_store/observers/onlineObservers.js
+++ b/src/routes/_store/observers/onlineObservers.js
@@ -6,8 +6,6 @@ const NOTIFY_OFFLINE_LIMIT = 1
let notifyCount = 0
-let offlineStyle = process.browser && document.getElementById('theOfflineStyle')
-
// debounce to avoid notifying for a short connection issue
const notifyOffline = debounce(() => {
if (process.browser && !navigator.onLine && ++notifyCount <= NOTIFY_OFFLINE_LIMIT) {
@@ -19,20 +17,9 @@ export function onlineObservers (store) {
if (!process.browser) {
return
}
- let meta = document.getElementById('theThemeColor')
- let oldTheme = meta.content
store.observe('online', online => {
- // "only x" ensures the