urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-11-28 13:54:20 +03:00
Code Issues Packages Projects Releases Wiki Activity

interface: fix mediaquery watchers on safari

Browse Source
This commit is contained in:
Liam Fitzgerald 2021-07-06 10:15:34 +10:00
parent 6b7030d617
commit 13a9b758ec
No known key found for this signature in database
GPG Key ID: D390E12C61D1CFFB
2 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pkg/interface/src/logic/state/local.tsx
View File

@ -26,6 +26,7 @@ export interface LocalState {
setTutorialRef: (el: HTMLElement | null) => void; setTutorialRef: (el: HTMLElement | null) => void;
dark: boolean; dark: boolean;
mobile: boolean; mobile: boolean;
mdBreak: boolean;
background: BackgroundConfig; background: BackgroundConfig;
omniboxShown: boolean; omniboxShown: boolean;
suspendedFocus?: HTMLElement; suspendedFocus?: HTMLElement;
@ -45,6 +46,7 @@ export const selectLocalState =
const useLocalState = create<LocalStateZus>(persist((set, get) => ({ const useLocalState = create<LocalStateZus>(persist((set, get) => ({
dark: false, dark: false,
mobile: false, mobile: false,
mdBreak: false,
background: undefined, background: undefined,
theme: 'auto', theme: 'auto',
hideAvatars: false, hideAvatars: false,

24
pkg/interface/src/views/App.js
View File

@ -83,15 +83,20 @@ class App extends React.Component {
bootstrapApi(); bootstrapApi();
this.props.getShallowChildren(`~${window.ship}`, 'dm-inbox'); this.props.getShallowChildren(`~${window.ship}`, 'dm-inbox');
const theme = this.getTheme(); const theme = this.getTheme();
this.themeWatcher = window.matchMedia('(prefers-color-scheme: dark)');
this.mobileWatcher = window.matchMedia(`(max-width: ${theme.breakpoints[0]})`);
this.themeWatcher.onchange = this.updateTheme;
this.mobileWatcher.onchange = this.updateMobile;
setTimeout(() => { setTimeout(() => {
// Something about how the store works doesn't like changing it // Something about how the store works doesn't like changing it
// before the app has actually rendered, hence the timeout. // before the app has actually rendered, hence the timeout.
this.themeWatcher = window.matchMedia('(prefers-color-scheme: dark)');
this.mobileWatcher = window.matchMedia(`(max-width: ${theme.breakpoints[0]})`);
this.mediumWatcher = window.matchMedia(`(max-width: ${theme.breakpoints[1]})`);
// TODO: addListener is deprecated, but safari 13 requires it
this.themeWatcher.addListener(this.updateTheme);
this.mobileWatcher.addListener(this.updateMobile);
this.mediumWatcher.addListener(this.updateMedium);
this.updateMobile(this.mobileWatcher); this.updateMobile(this.mobileWatcher);
this.updateTheme(this.themeWatcher); this.updateTheme(this.themeWatcher);
this.updateMedium(this.mediumWatcher);
}, 500); }, 500);
this.props.getBaseHash(); this.props.getBaseHash();
this.props.getRuntimeLag(); // TODO consider polling periodically this.props.getRuntimeLag(); // TODO consider polling periodically
@ -105,8 +110,9 @@ class App extends React.Component {
} }
componentWillUnmount() { componentWillUnmount() {
this.themeWatcher.onchange = undefined; this.themeWatcher.removeListener(this.updateTheme);
this.mobileWatcher.onchange = undefined; this.mobileWatcher.removeListener(this.updateMobile);
this.mediumWatcher.removeListener(this.updateMedium);
} }
updateTheme(e) { updateTheme(e) {
@ -121,6 +127,12 @@ class App extends React.Component {
}); });
} }
updateMedium = (e) => {
this.props.set((state) => {
state.mdBreak = e.matches;
});
}
getTheme() { getTheme() {
const { props } = this; const { props } = this;
return ((props.dark && props?.display?.theme == 'auto') || return ((props.dark && props?.display?.theme == 'auto') ||