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

interface: add all breakpoints to state

Browse Source
This commit is contained in:
Liam Fitzgerald 2021-07-07 10:49:30 +10:00
parent a1b09b6aa4
commit 1c17013e1b
No known key found for this signature in database
GPG Key ID: D390E12C61D1CFFB
2 changed files with 33 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -26,7 +26,11 @@ export interface LocalState {
setTutorialRef: (el: HTMLElement | null) => void;
dark: boolean;
mobile: boolean;
mdBreak: boolean;
breaks: {
sm: boolean;
md: boolean;
lg: boolean;
}
background: BackgroundConfig;
omniboxShown: boolean;
suspendedFocus?: HTMLElement;
@ -46,7 +50,11 @@ export const selectLocalState =
const useLocalState = create<LocalStateZus>(persist((set, get) => ({
dark: false,
mobile: false,
mdBreak: false,
breaks: {
sm: false,
md: false,
lg: false
},
background: undefined,
theme: 'auto',
hideAvatars: false,
@ -126,7 +134,7 @@ const useLocalState = create<LocalStateZus>(persist((set, get) => ({
blacklist: [
'suspendedFocus', 'toggleOmnibox', 'omniboxShown', 'tutorialProgress',
'prevTutStep', 'nextTutStep', 'tutorialRef', 'setTutorialRef', 'subscription',
'errorCount'
'errorCount', 'breaks'
],
name: 'localReducer'
}));

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

@ -88,15 +88,21 @@ class App extends React.Component {
// 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]})`);
this.smallWatcher = window.matchMedia(`(min-width: ${theme.breakpoints[0]})`);
this.mediumWatcher = window.matchMedia(`(min-width: ${theme.breakpoints[1]})`);
this.largeWatcher = window.matchMedia(`(min-width: ${theme.breakpoints[2]})`);
// TODO: addListener is deprecated, but safari 13 requires it
this.themeWatcher.addListener(this.updateTheme);
this.mobileWatcher.addListener(this.updateMobile);
this.smallWatcher.addListener(this.updateSmall);
this.mediumWatcher.addListener(this.updateMedium);
this.largeWatcher.addListener(this.updateLarge);
this.updateMobile(this.mobileWatcher);
this.updateSmall(this.updateSmall);
this.updateTheme(this.themeWatcher);
this.updateMedium(this.mediumWatcher);
this.updateLarge(this.largeWatcher);
}, 500);
this.props.getBaseHash();
this.props.getRuntimeLag(); // TODO consider polling periodically
@ -112,7 +118,9 @@ class App extends React.Component {
componentWillUnmount() {
this.themeWatcher.removeListener(this.updateTheme);
this.mobileWatcher.removeListener(this.updateMobile);
this.smallWatcher.removeListener(this.updateSmall);
this.mediumWatcher.removeListener(this.updateMedium);
this.largeWatcher.removeListener(this.updateLarge);
}
updateTheme(e) {
@ -127,9 +135,21 @@ class App extends React.Component {
});
}
updateSmall = (e) => {
this.props.set((state) => {
state.breaks.sm = e.matches;
});
}
updateMedium = (e) => {
this.props.set((state) => {
state.mdBreak = e.matches;
state.breaks.md = e.matches;
});
}
updateLarge = (e) => {
this.props.set((state) => {
state.breaks.lg = e.matches;
});
}