Skip to content
Permalink
Browse files

Add vibrancy effects to sidebar on macOS

  • Loading branch information...
alicerunsonfedora committed May 17, 2019
1 parent 5a753d3 commit ddcc204846da43a55b9026581bcf6c45a262847f
Showing with 65 additions and 57 deletions.
  1. +15 −41 package-lock.json
  2. +12 −11 public/electron.js
  3. +5 −2 src/App.styles.tsx
  4. +19 −0 src/App.tsx
  5. +4 −2 src/components/AppLayout/AppLayout.styles.tsx
  6. +10 −1 src/pages/PageLayout.styles.tsx

Some generated files are not rendered by default. Learn more.

@@ -126,6 +126,7 @@ function createWindow() {

// Set some preferences that are specific to macOS.
titleBarStyle: 'hidden',
vibrancy: systemPreferences.isDarkMode()? "dark": "light"
}
);

@@ -197,18 +198,18 @@ function createMenubar() {
submenu: [
{ role: 'reload' },
{ role: 'forcereload' },
{
label: 'Open Dev Tools',
click () {
try {
mainWindow.webContents.openDevTools({mode: 'undocked'});
} catch (err) {
console.error("Couldn't open dev tools: " + err);
}
// {
// label: 'Open Dev Tools',
// click () {
// try {
// mainWindow.webContents.openDevTools({mode: 'undocked'});
// } catch (err) {
// console.error("Couldn't open dev tools: " + err);
// }

},
accelerator: 'Shift+CmdOrCtrl+I'
},
// },
// accelerator: 'Shift+CmdOrCtrl+I'
// },
{ type: 'separator' },
{ role: 'togglefullscreen' }
]
@@ -1,10 +1,13 @@
import { Theme, createStyles } from "@material-ui/core";
import { isDarwinApp } from './utilities/desktop';

export const styles = (theme: Theme) => createStyles({
root: {
width: '100%',
display: 'flex',
height: '100%'
height: '100%',
minHeight: '100vh',
backgroundColor: isDarwinApp()? "transparent": theme.palette.background.default,
},
content: {
marginTop: 72,
@@ -14,5 +17,5 @@ export const styles = (theme: Theme) => createStyles({
marginLeft: 250,
marginTop: 88,
},
}
},
});
@@ -23,6 +23,7 @@ import You from './pages/You';
import {withSnackbar} from 'notistack';
import {PrivateRoute} from './interfaces/overrides';
import { userLoggedIn } from './utilities/accounts';
import { isDarwinApp } from './utilities/desktop';
let theme = setHyperspaceTheme(getUserDefaultTheme());

class App extends Component<any, any> {
@@ -42,8 +43,26 @@ class App extends Component<any, any> {
this.setState({ theme: newTheme });
}

componentDidMount() {
this.removeBodyBackground()
}

componentDidUpdate() {
this.removeBodyBackground()
}

removeBodyBackground() {
if (isDarwinApp()) {
document.body.style.backgroundColor = "transparent";
console.log("Changed!")
console.log(`New color: ${document.body.style.backgroundColor}`)
}
}

render() {
const { classes } = this.props;

this.removeBodyBackground()

return (
<MuiThemeProvider theme={this.state.theme}>
@@ -116,12 +116,14 @@ export const styles = (theme: Theme) => createStyles({
drawerPaperWithAppBar: {
width: 250,
zIndex: -1,
marginTop: 64
marginTop: 64,
backgroundColor: isDarwinApp()? "transparent": theme.palette.background.paper
},
drawerPaperWithTitleAndAppBar: {
width: 250,
zIndex: -1,
marginTop: 88
marginTop: 88,
backgroundColor: isDarwinApp()? "transparent": theme.palette.background.paper
},
drawerDisplayMobile: {
[theme.breakpoints.up('md')]: {

0 comments on commit ddcc204

Please sign in to comment.
You can’t perform that action at this time.