mirror of
https://github.com/hyperspacedev/hyperspace
synced 2025-02-07 12:53:31 +01:00
Merge pull request #55 from hyperspacedev/darwin-themes
macOS themes for desktop app
This commit is contained in:
Marquis Kurt
GitHub
commit
d9b4265308
@ -45,6 +45,8 @@ Before testing Hyperspace, make the following change in `config.json`, located i
|
||||
|
||||
This is necessary to test Hyperspace locally and will need to be reverted after testing or before releasing to `master`.
|
||||
|
||||
> Note: if you are testing the **desktop** version of Hyperspace, replace `https://localhost:3000` with `desktop`.
|
||||
|
||||
To run a development version of Hyperspace, either run the `start` task from VS Code or run the following in the terminal:
|
||||
|
||||
```npm
|
||||
@ -53,6 +55,8 @@ npm start
|
||||
|
||||
The site will be hosted at `https://localhost:3000`, where you can sign in and test Hyperspace using your Mastodon account. If you have signed in before, you will be automatically logged in.
|
||||
|
||||
Alternatively, if you are testing the desktop version of Hyperspace, run `npm run electrify` (or `npm run electrify`, if you don't want to make another production build). Hyperspace will open in a window where you can sign in and test Hyperspace with your Mastodon account. You'll be logged in automatically if you've signed in before.
|
||||
|
||||
### Building a release
|
||||
|
||||
To build a release, run the following command:
|
||||
|
||||
56
package-lock.json
generated
56
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "hyperspace",
|
||||
"version": "1.0.0",
|
||||
"version": "1.0.0-beta4",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
@ -2159,7 +2159,6 @@
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
|
||||
"integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"sprintf-js": "~1.0.2"
|
||||
}
|
||||
@ -3094,14 +3093,12 @@
|
||||
"bluebird": {
|
||||
"version": "3.5.4",
|
||||
"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.4.tgz",
|
||||
"integrity": "sha512-FG+nFEZChJrbQ9tIccIfZJBz3J7mLrAhxakAbnrJWn8d7aKOC+LWifa0G+p4ZqKp4y13T7juYvdhq9NzKdsrjw==",
|
||||
"dev": true
|
||||
"integrity": "sha512-FG+nFEZChJrbQ9tIccIfZJBz3J7mLrAhxakAbnrJWn8d7aKOC+LWifa0G+p4ZqKp4y13T7juYvdhq9NzKdsrjw=="
|
||||
},
|
||||
"bluebird-lst": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/bluebird-lst/-/bluebird-lst-1.0.7.tgz",
|
||||
"integrity": "sha512-5ix04IbXVIZ6nSRM4aZnwQfk40Td0D57WAl8LfhnICF6XwT4efCZYh0veOHvfDmgpbqE4ju5L5XEAMIcAe13Kw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"bluebird": "^3.5.3"
|
||||
}
|
||||
@ -3390,8 +3387,7 @@
|
||||
"buffer-from": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
|
||||
"integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
|
||||
"dev": true
|
||||
"integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
|
||||
},
|
||||
"buffer-indexof": {
|
||||
"version": "1.1.1",
|
||||
@ -6422,7 +6418,6 @@
|
||||
"version": "4.0.6",
|
||||
"resolved": "https://registry.npmjs.org/electron-updater/-/electron-updater-4.0.6.tgz",
|
||||
"integrity": "sha512-JPGLME6fxJcHG8hX7HWFl6Aew6iVm0DkcrENreKa5SUJCHG+uUaAhxDGDt+YGcNkyx1uJ6eBGMvFxDTLUv67pg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"bluebird-lst": "^1.0.6",
|
||||
"builder-util-runtime": "~8.1.0",
|
||||
@ -6439,7 +6434,6 @@
|
||||
"version": "8.1.1",
|
||||
"resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-8.1.1.tgz",
|
||||
"integrity": "sha512-+ieS4PMB33vVE2S3ZNWBEQJ1zKmAs/agrBdh7XadE1lKLjrH4aXYuOh9OOGdxqIRldhlhNBaF+yKMMEFOdNVig==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"bluebird-lst": "^1.0.6",
|
||||
"debug": "^4.1.1",
|
||||
@ -6451,7 +6445,6 @@
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
|
||||
"integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ms": "^2.1.1"
|
||||
}
|
||||
@ -6459,14 +6452,12 @@
|
||||
"source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"dev": true
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
|
||||
},
|
||||
"source-map-support": {
|
||||
"version": "0.5.12",
|
||||
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.12.tgz",
|
||||
"integrity": "sha512-4h2Pbvyy15EE02G+JOZpUCmqWJuqrs+sEkzewTm++BPi7Hvn/HwcqLAcNxYAyI0x13CpPPn+kMjl+hplXMHITQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"buffer-from": "^1.0.0",
|
||||
"source-map": "^0.6.0"
|
||||
@ -6478,7 +6469,6 @@
|
||||
"version": "5.0.3",
|
||||
"resolved": "https://registry.npmjs.org/electron-window-state/-/electron-window-state-5.0.3.tgz",
|
||||
"integrity": "sha512-1mNTwCfkolXl3kMf50yW3vE2lZj0y92P/HYWFBrb+v2S/pCka5mdwN3cagKm458A7NjndSwijynXgcLWRodsVg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"jsonfile": "^4.0.0",
|
||||
"mkdirp": "^0.5.1"
|
||||
@ -7024,8 +7014,7 @@
|
||||
"esprima": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
|
||||
"integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
|
||||
"dev": true
|
||||
"integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
|
||||
},
|
||||
"esquery": {
|
||||
"version": "1.0.1",
|
||||
@ -8332,7 +8321,6 @@
|
||||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
|
||||
"integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"graceful-fs": "^4.1.2",
|
||||
"jsonfile": "^4.0.0",
|
||||
@ -8343,7 +8331,6 @@
|
||||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmjs.org/fs-extra-p/-/fs-extra-p-7.0.1.tgz",
|
||||
"integrity": "sha512-yhd2OV0HnHt2oitlp+X9hl2ReX4X/7kQeL7/72qzPHTZj5eUPGzAKOvEglU02Fa1OeG2rSy/aKB4WGVaLiF8tw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"bluebird-lst": "^1.0.7",
|
||||
"fs-extra": "^7.0.1"
|
||||
@ -9131,8 +9118,7 @@
|
||||
"graceful-fs": {
|
||||
"version": "4.1.15",
|
||||
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.15.tgz",
|
||||
"integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==",
|
||||
"dev": true
|
||||
"integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA=="
|
||||
},
|
||||
"growly": {
|
||||
"version": "1.3.0",
|
||||
@ -11247,7 +11233,6 @@
|
||||
"version": "3.13.1",
|
||||
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
|
||||
"integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"argparse": "^1.0.7",
|
||||
"esprima": "^4.0.0"
|
||||
@ -11371,7 +11356,6 @@
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
|
||||
"integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"graceful-fs": "^4.1.6"
|
||||
}
|
||||
@ -11536,8 +11520,7 @@
|
||||
"lazy-val": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/lazy-val/-/lazy-val-1.0.4.tgz",
|
||||
"integrity": "sha512-u93kb2fPbIrfzBuLjZE+w+fJbUUMhNDXxNmMfaqNgpfQf1CO5ZSe2LfsnBqVAk7i/2NF48OSoRj+Xe2VT+lE8Q==",
|
||||
"dev": true
|
||||
"integrity": "sha512-u93kb2fPbIrfzBuLjZE+w+fJbUUMhNDXxNmMfaqNgpfQf1CO5ZSe2LfsnBqVAk7i/2NF48OSoRj+Xe2VT+lE8Q=="
|
||||
},
|
||||
"lcid": {
|
||||
"version": "1.0.0",
|
||||
@ -11704,8 +11687,7 @@
|
||||
"lodash.isequal": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
|
||||
"integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=",
|
||||
"dev": true
|
||||
"integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
|
||||
},
|
||||
"lodash.memoize": {
|
||||
"version": "4.1.2",
|
||||
@ -12229,7 +12211,6 @@
|
||||
"version": "0.5.1",
|
||||
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
|
||||
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
},
|
||||
@ -12237,8 +12218,7 @@
|
||||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
|
||||
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
|
||||
"dev": true
|
||||
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -12265,8 +12245,7 @@
|
||||
"ms": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
|
||||
"integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
|
||||
"dev": true
|
||||
"integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
|
||||
},
|
||||
"multicast-dns": {
|
||||
"version": "6.2.3",
|
||||
@ -12933,8 +12912,7 @@
|
||||
"pako": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/pako/-/pako-1.0.10.tgz",
|
||||
"integrity": "sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw==",
|
||||
"dev": true
|
||||
"integrity": "sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw=="
|
||||
},
|
||||
"parallel-transform": {
|
||||
"version": "1.1.0",
|
||||
@ -17888,8 +17866,7 @@
|
||||
"sax": {
|
||||
"version": "1.2.4",
|
||||
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
|
||||
"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
|
||||
"dev": true
|
||||
"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
|
||||
},
|
||||
"scheduler": {
|
||||
"version": "0.13.6",
|
||||
@ -17930,8 +17907,7 @@
|
||||
"semver": {
|
||||
"version": "5.7.0",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz",
|
||||
"integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==",
|
||||
"dev": true
|
||||
"integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA=="
|
||||
},
|
||||
"semver-diff": {
|
||||
"version": "2.1.0",
|
||||
@ -18529,8 +18505,7 @@
|
||||
"sprintf-js": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
|
||||
"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
|
||||
"dev": true
|
||||
"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
|
||||
},
|
||||
"sshpk": {
|
||||
"version": "1.16.1",
|
||||
@ -19595,8 +19570,7 @@
|
||||
"universalify": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
|
||||
"integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
|
||||
"dev": true
|
||||
"integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
|
||||
},
|
||||
"unpipe": {
|
||||
"version": "1.0.0",
|
||||
|
||||
@ -76,7 +76,8 @@
|
||||
"target": [
|
||||
"dmg",
|
||||
"mas"
|
||||
]
|
||||
],
|
||||
"darkModeSupport": true
|
||||
},
|
||||
"mas": {
|
||||
"entitlements": "desktop/entitlements.mas.plist",
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
// Electron script to run Hyperspace as an app
|
||||
// © 2018 Hyperspace developers. Licensed under Apache 2.0.
|
||||
|
||||
const { app, Menu, protocol, BrowserWindow, shell } = require('electron');
|
||||
const { app, Menu, protocol, BrowserWindow, shell, systemPreferences } = require('electron');
|
||||
const windowStateKeeper = require('electron-window-state');
|
||||
const { autoUpdater } = require('electron-updater');
|
||||
const path = require('path');
|
||||
@ -21,6 +21,13 @@ protocol.registerSchemesAsPrivileged([
|
||||
{ scheme: 'hyperspace', privileges: { standard: true, secure: true } }
|
||||
])
|
||||
|
||||
/**
|
||||
* Determine whether the desktop app is on macOS
|
||||
*/
|
||||
function darwin() {
|
||||
return process.platform === "darwin";
|
||||
}
|
||||
|
||||
/**
|
||||
* Register the protocol for Hyperspace
|
||||
*/
|
||||
@ -126,6 +133,9 @@ function createWindow() {
|
||||
|
||||
// Set some preferences that are specific to macOS.
|
||||
titleBarStyle: 'hidden',
|
||||
vibrancy: systemPreferences.isDarkMode()? "ultra-dark": "light",
|
||||
transparent: darwin(),
|
||||
backgroundColor: darwin()? "#80FFFFFF": "#FFF"
|
||||
}
|
||||
);
|
||||
|
||||
@ -135,6 +145,14 @@ function createWindow() {
|
||||
// Load the main app and open the index page.
|
||||
mainWindow.loadURL("hyperspace://hyperspace/app/");
|
||||
|
||||
// Watch for a change in macOS's dark mode and reload the window to apply changes
|
||||
systemPreferences.subscribeNotification('AppleInterfaceThemeChangedNotification', () => {
|
||||
if (mainWindow != null) {
|
||||
mainWindow.setVibrancy(systemPreferences.isDarkMode()? "ultra-dark": "light");
|
||||
mainWindow.webContents.reload();
|
||||
}
|
||||
})
|
||||
|
||||
// Delete the window when closed
|
||||
mainWindow.on('closed', () => {
|
||||
mainWindow = null
|
||||
@ -278,7 +296,7 @@ app.on('ready', () => {
|
||||
|
||||
// Standard quit behavior changes for macOS
|
||||
app.on('window-all-closed', () => {
|
||||
if (process.platform !== 'darwin') {
|
||||
if (!darwin()) {
|
||||
app.quit()
|
||||
}
|
||||
});
|
||||
|
||||
BIN
screenshot.png
BIN
screenshot.png
Binary file not shown.
|
Before Width: | Height: | Size: 247 KiB After Width: | Height: | Size: 276 KiB |
@ -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,
|
||||
},
|
||||
}
|
||||
},
|
||||
});
|
||||
19
src/App.tsx
19
src/App.tsx
@ -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}>
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import { Theme, createStyles } from "@material-ui/core";
|
||||
import { darken } from "@material-ui/core/styles/colorManipulator";
|
||||
import { isDarwinApp } from '../../utilities/desktop';
|
||||
|
||||
import { fade } from "@material-ui/core/styles/colorManipulator";
|
||||
|
||||
@ -19,7 +21,7 @@ export const styles = (theme: Theme) => createStyles({
|
||||
left: 0,
|
||||
height: 24,
|
||||
width: '100%',
|
||||
backgroundColor: theme.palette.primary.dark,
|
||||
backgroundColor: isDarwinApp()? theme.palette.primary.main: theme.palette.primary.dark,
|
||||
textAlign: 'center',
|
||||
zIndex: 1000,
|
||||
verticalAlign: 'middle',
|
||||
@ -34,6 +36,12 @@ export const styles = (theme: Theme) => createStyles({
|
||||
},
|
||||
appBar: {
|
||||
zIndex: 1000,
|
||||
backgroundImage: isDarwinApp()? `linear-gradient(${theme.palette.primary.main}, ${theme.palette.primary.dark})`: undefined,
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
borderBottomColor: darken(theme.palette.primary.dark, 0.2),
|
||||
borderBottomWidth: 1,
|
||||
borderBottomStyle: isDarwinApp()? "solid": "none",
|
||||
boxShadow: isDarwinApp()? "none": "inherit"
|
||||
},
|
||||
appBarMenuButton: {
|
||||
marginLeft: -12,
|
||||
@ -56,7 +64,7 @@ export const styles = (theme: Theme) => createStyles({
|
||||
backgroundColor: fade(theme.palette.common.white, 0.25)
|
||||
},
|
||||
width: '100%',
|
||||
marginLeft: theme.spacing.unit,
|
||||
marginLeft: 0,
|
||||
marginRight: theme.spacing.unit,
|
||||
[theme.breakpoints.up('md')]: {
|
||||
marginLeft: theme.spacing.unit * 6,
|
||||
@ -112,13 +120,15 @@ export const styles = (theme: Theme) => createStyles({
|
||||
},
|
||||
drawerPaperWithAppBar: {
|
||||
width: 250,
|
||||
zIndex: 0,
|
||||
marginTop: 64
|
||||
zIndex: -1,
|
||||
marginTop: 64,
|
||||
backgroundColor: isDarwinApp()? "transparent": theme.palette.background.paper
|
||||
},
|
||||
drawerPaperWithTitleAndAppBar: {
|
||||
width: 250,
|
||||
zIndex: 0,
|
||||
marginTop: 88
|
||||
zIndex: -1,
|
||||
marginTop: 88,
|
||||
backgroundColor: isDarwinApp()? "transparent": theme.palette.background.paper
|
||||
},
|
||||
drawerDisplayMobile: {
|
||||
[theme.breakpoints.up('md')]: {
|
||||
|
||||
@ -21,6 +21,7 @@ import { Notification } from '../../types/Notification';
|
||||
import {sendNotificationRequest} from '../../utilities/notifications';
|
||||
import {withSnackbar} from 'notistack';
|
||||
import { getConfig, getUserDefaultBool } from '../../utilities/settings';
|
||||
import { isDarwinApp } from '../../utilities/desktop';
|
||||
import { Config } from '../../types/Config';
|
||||
|
||||
interface IAppLayoutState {
|
||||
@ -175,7 +176,7 @@ export class AppLayout extends Component<any, IAppLayoutState> {
|
||||
|
||||
titlebar() {
|
||||
const { classes } = this.props;
|
||||
if ((navigator.userAgent.includes(this.state.brandName || "Hyperspace") || navigator.userAgent.includes("Electron")) && navigator.userAgent.includes("Macintosh")) {
|
||||
if (isDarwinApp()) {
|
||||
return (
|
||||
<div className={classes.titleBarRoot}>
|
||||
<Typography className={classes.titleBarText}>{this.state.brandName? this.state.brandName: "Hyperspace"} {this.state.developerMode? "(beta)": null}</Typography>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { Theme, createStyles } from "@material-ui/core";
|
||||
import { isDarwinApp } from "../utilities/desktop";
|
||||
|
||||
export const styles = (theme: Theme) => createStyles({
|
||||
root: {
|
||||
@ -18,6 +19,8 @@ export const styles = (theme: Theme) => createStyles({
|
||||
paddingLeft: theme.spacing.unit * 24,
|
||||
paddingRight: theme.spacing.unit * 24
|
||||
},
|
||||
backgroundColor: theme.palette.background.default,
|
||||
minHeight: isDarwinApp()? "100vh": 'auto',
|
||||
},
|
||||
pageLayoutMaxConstraints: {
|
||||
marginTop: 72,
|
||||
@ -45,12 +48,16 @@ export const styles = (theme: Theme) => createStyles({
|
||||
paddingLeft: theme.spacing.unit * 40,
|
||||
paddingRight: theme.spacing.unit * 40,
|
||||
},
|
||||
backgroundColor: theme.palette.background.default,
|
||||
minHeight: isDarwinApp()? "100vh": 'auto',
|
||||
},
|
||||
pageLayoutMinimalConstraints: {
|
||||
flexGrow: 1,
|
||||
[theme.breakpoints.up('md')]: {
|
||||
marginLeft: 250,
|
||||
},
|
||||
backgroundColor: theme.palette.background.default,
|
||||
minHeight: isDarwinApp()? "100vh": 'auto',
|
||||
},
|
||||
pageLayoutEmptyTextConstraints: {
|
||||
paddingLeft: theme.spacing.unit * 2,
|
||||
@ -100,7 +107,8 @@ export const styles = (theme: Theme) => createStyles({
|
||||
[theme.breakpoints.up('sm')]: {
|
||||
paddingLeft: theme.spacing.unit * 2,
|
||||
paddingRight: theme.spacing.unit * 2
|
||||
}
|
||||
},
|
||||
//backgroundColor: theme.palette.background.default
|
||||
},
|
||||
pageProfileAvatar: {
|
||||
width: 128,
|
||||
@ -137,6 +145,7 @@ export const styles = (theme: Theme) => createStyles({
|
||||
paddingLeft: theme.spacing.unit * 32,
|
||||
paddingRight: theme.spacing.unit * 32
|
||||
},
|
||||
//backgroundColor: theme.palette.background.default,
|
||||
},
|
||||
errorCard: {
|
||||
padding: theme.spacing.unit * 4,
|
||||
|
||||
@ -28,7 +28,7 @@ import {setUserDefaultBool, getUserDefaultBool, getUserDefaultTheme, setUserDefa
|
||||
import {canSendNotifications, browserSupportsNotificationRequests} from '../utilities/notifications';
|
||||
import {themes, defaultTheme} from '../types/HyperspaceTheme';
|
||||
import ThemePreview from '../components/ThemePreview';
|
||||
import {setHyperspaceTheme, getHyperspaceTheme} from '../utilities/themes';
|
||||
import {setHyperspaceTheme, getHyperspaceTheme, getDarkModeFromSystem} from '../utilities/themes';
|
||||
import { Visibility } from '../types/Visibility';
|
||||
import {LinkableButton} from '../interfaces/overrides';
|
||||
|
||||
@ -102,6 +102,7 @@ class SettingsPage extends Component<any, ISettingsState> {
|
||||
console.error(err.message);
|
||||
});
|
||||
this.getFederatedStatus();
|
||||
console.log(getDarkModeFromSystem());
|
||||
}
|
||||
|
||||
getFederatedStatus() {
|
||||
|
||||
@ -6,6 +6,7 @@ import {SaveClientSession} from '../types/SessionData';
|
||||
import { createHyperspaceApp, getRedirectAddress } from '../utilities/login';
|
||||
import {parseUrl} from 'query-string';
|
||||
import { getConfig } from '../utilities/settings';
|
||||
import { isDarwinApp } from '../utilities/desktop';
|
||||
import axios from 'axios';
|
||||
import {withSnackbar, withSnackbarProps} from 'notistack';
|
||||
import { Config } from '../types/Config';
|
||||
@ -63,7 +64,7 @@ class WelcomePage extends Component<IWelcomeProps, IWelcomeState> {
|
||||
if (result !== undefined) {
|
||||
let config: Config = result;
|
||||
if (result.location === "dynamic") {
|
||||
console.warn("Recirect URI is set to dyanmic, which may affect how sign-in works for some users. Careful!");
|
||||
console.warn("Recirect URI is set to dynamic, which may affect how sign-in works for some users. Careful!");
|
||||
}
|
||||
this.setState({
|
||||
logoUrl: config.branding? result.branding.logo: "logo.png",
|
||||
@ -312,7 +313,7 @@ class WelcomePage extends Component<IWelcomeProps, IWelcomeState> {
|
||||
|
||||
titlebar() {
|
||||
const { classes } = this.props;
|
||||
if ((navigator.userAgent.includes(this.state.brandName || "Hyperspace") || navigator.userAgent.includes("Electron")) && navigator.userAgent.includes("Macintosh")) {
|
||||
if (isDarwinApp()) {
|
||||
return (
|
||||
<div className={classes.titleBarRoot}>
|
||||
<Typography className={classes.titleBarText}>{this.state.brandName? this.state.brandName: "Hyperspace"}</Typography>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import {Color} from '@material-ui/core';
|
||||
import { deepPurple, red, lightGreen, yellow, purple, deepOrange, indigo, lightBlue, orange, blue, amber, pink, brown, blueGrey } from '@material-ui/core/colors';
|
||||
import { isDarwinApp } from '../utilities/desktop';
|
||||
|
||||
/**
|
||||
* Basic theme colors for Hyperspace.
|
||||
|
||||
31
src/utilities/desktop.tsx
Normal file
31
src/utilities/desktop.tsx
Normal file
@ -0,0 +1,31 @@
|
||||
/**
|
||||
* A Window interface with extra properties for Electron
|
||||
*/
|
||||
interface ElectronWindow extends Window {
|
||||
require?: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* Determines whether the app is running from a website or an app.
|
||||
* @returns Boolean of whether it is in desktop mode or not
|
||||
*/
|
||||
export function isDesktopApp(): boolean {
|
||||
return navigator.userAgent.includes("Hyperspace" || "Electron");
|
||||
}
|
||||
|
||||
/**
|
||||
* Determines whether the app is the macOS application
|
||||
*/
|
||||
export function isDarwinApp(): boolean {
|
||||
return isDesktopApp() && navigator.userAgent.includes("Macintosh")
|
||||
}
|
||||
|
||||
/**
|
||||
* Determine whether the system is in dark mode or not (macOS)
|
||||
*/
|
||||
export function isDarkMode() {
|
||||
// Lift window to an ElectronWindow and add use require()
|
||||
const eWin = window as ElectronWindow;
|
||||
const {remote} = eWin.require('electron');
|
||||
return remote.systemPreferences.isDarkMode()
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
import { createMuiTheme, Theme } from '@material-ui/core';
|
||||
import { HyperspaceTheme, themes, defaultTheme } from '../types/HyperspaceTheme';
|
||||
import { getUserDefaultBool } from './settings';
|
||||
import { isDarwinApp, isDarkMode } from './desktop';
|
||||
|
||||
/**
|
||||
* Locates a Hyperspace theme from the themes catalog
|
||||
@ -53,7 +54,11 @@ export function getDarkModeFromSystem(): string {
|
||||
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
||||
return "dark";
|
||||
} else {
|
||||
return "light";
|
||||
if (isDarwinApp()) {
|
||||
return isDarkMode()? "dark": "light";
|
||||
} else {
|
||||
return "light";
|
||||
}
|
||||
}
|
||||
} else {
|
||||
return "light";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user