Mastodon/hyperspace-desktop-client-windows-linux-macos
1
0
Fork 0
mirror of https://github.com/hyperspacedev/hyperspace synced 2025-02-04 03:08:10 +01:00
Code Issues Releases Wiki Activity

Merge pull request #42 from hyperspacedev/settings-icons

Browse Source 
Add icons to Settings page
This commit is contained in:
Marquis Kurt 2019-05-03 14:31:11 -04:00 committed by GitHub
commit 90e88536c7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 44 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/pages/Settings.tsx
View File

@ -2,6 +2,7 @@ import React, { Component } from 'react';
import { import {
List, List,
ListItem, ListItem,
ListItemAvatar,
ListItemText, ListItemText,
ListSubheader, ListSubheader,
ListItemSecondaryAction, ListItemSecondaryAction,
@ -22,7 +23,6 @@ import {
Theme, Theme,
Typography Typography
} from '@material-ui/core'; } from '@material-ui/core';
import OpenInNewIcon from '@material-ui/icons/OpenInNew';
import {styles} from './PageLayout.styles'; import {styles} from './PageLayout.styles';
import {setUserDefaultBool, getUserDefaultBool, getUserDefaultTheme, setUserDefaultTheme, getUserDefaultVisibility, setUserDefaultVisibility, getConfig} from '../utilities/settings'; import {setUserDefaultBool, getUserDefaultBool, getUserDefaultTheme, setUserDefaultTheme, getUserDefaultVisibility, setUserDefaultVisibility, getConfig} from '../utilities/settings';
import {canSendNotifications, browserSupportsNotificationRequests} from '../utilities/notifications'; import {canSendNotifications, browserSupportsNotificationRequests} from '../utilities/notifications';
@ -32,6 +32,18 @@ import {setHyperspaceTheme, getHyperspaceTheme} from '../utilities/themes';
import { Visibility } from '../types/Visibility'; import { Visibility } from '../types/Visibility';
import {LinkableButton} from '../interfaces/overrides'; import {LinkableButton} from '../interfaces/overrides';
import OpenInNewIcon from '@material-ui/icons/OpenInNew';
import DevicesIcon from '@material-ui/icons/Devices';
import Brightness3Icon from '@material-ui/icons/Brightness3';
import PaletteIcon from '@material-ui/icons/Palette';
import AccountEditIcon from 'mdi-material-ui/AccountEdit';
import MastodonIcon from 'mdi-material-ui/Mastodon';
import VisibilityIcon from '@material-ui/icons/Visibility';
import NotificationsIcon from '@material-ui/icons/Notifications';
import BellAlertIcon from 'mdi-material-ui/BellAlert';
import RefreshIcon from '@material-ui/icons/Refresh';
import UndoIcon from '@material-ui/icons/Undo';
interface ISettingsState { interface ISettingsState {
darkModeEnabled: boolean; darkModeEnabled: boolean;
systemDecidesDarkMode: boolean; systemDecidesDarkMode: boolean;
@ -303,6 +315,9 @@ class SettingsPage extends Component<any, ISettingsState> {
<Paper className={classes.pageListConstraints}> <Paper className={classes.pageListConstraints}>
<List> <List>
<ListItem> <ListItem>
<ListItemAvatar>
<DevicesIcon color="action"/>
</ListItemAvatar>
<ListItemText primary="Match system appearance" secondary="Obey light/dark theme from your system"/> <ListItemText primary="Match system appearance" secondary="Obey light/dark theme from your system"/>
<ListItemSecondaryAction> <ListItemSecondaryAction>
<Switch <Switch
@ -312,6 +327,9 @@ class SettingsPage extends Component<any, ISettingsState> {
</ListItemSecondaryAction> </ListItemSecondaryAction>
</ListItem> </ListItem>
<ListItem> <ListItem>
<ListItemAvatar>
<Brightness3Icon color="action"/>
</ListItemAvatar>
<ListItemText primary="Dark mode" secondary="Toggles light or dark theme"/> <ListItemText primary="Dark mode" secondary="Toggles light or dark theme"/>
<ListItemSecondaryAction> <ListItemSecondaryAction>
<Switch <Switch
@ -322,6 +340,9 @@ class SettingsPage extends Component<any, ISettingsState> {
</ListItemSecondaryAction> </ListItemSecondaryAction>
</ListItem> </ListItem>
<ListItem> <ListItem>
<ListItemAvatar>
<PaletteIcon color="action"/>
</ListItemAvatar>
<ListItemText primary="Interface theme" secondary="The color palette used for the interface"/> <ListItemText primary="Interface theme" secondary="The color palette used for the interface"/>
<ListItemSecondaryAction> <ListItemSecondaryAction>
<Button onClick={this.toggleThemeDialog}> <Button onClick={this.toggleThemeDialog}>
@ -336,12 +357,18 @@ class SettingsPage extends Component<any, ISettingsState> {
<Paper className={classes.pageListConstraints}> <Paper className={classes.pageListConstraints}>
<List> <List>
<ListItem> <ListItem>
<ListItemAvatar>
<AccountEditIcon color="action"/>
</ListItemAvatar>
<ListItemText primary="Edit your profile" secondary="Change your bio, display name, and images"/> <ListItemText primary="Edit your profile" secondary="Change your bio, display name, and images"/>
<ListItemSecondaryAction> <ListItemSecondaryAction>
<LinkableButton to="/you">Edit</LinkableButton> <LinkableButton to="/you">Edit</LinkableButton>
</ListItemSecondaryAction> </ListItemSecondaryAction>
</ListItem> </ListItem>
<ListItem> <ListItem>
<ListItemAvatar>
<MastodonIcon color="action"/>
</ListItemAvatar>
<ListItemText primary="Configure on Mastodon"/> <ListItemText primary="Configure on Mastodon"/>
<ListItemSecondaryAction> <ListItemSecondaryAction>
<IconButton href={(localStorage.getItem("baseurl") as string) + "/settings/preferences"} target="_blank" rel="noreferrer"> <IconButton href={(localStorage.getItem("baseurl") as string) + "/settings/preferences"} target="_blank" rel="noreferrer">
@ -356,6 +383,9 @@ class SettingsPage extends Component<any, ISettingsState> {
<Paper className={classes.pageListConstraints}> <Paper className={classes.pageListConstraints}>
<List> <List>
<ListItem> <ListItem>
<ListItemAvatar>
<VisibilityIcon color="action"/>
</ListItemAvatar>
<ListItemText primary="Default visibility" secondary="New posts in composer will use this visiblity"/> <ListItemText primary="Default visibility" secondary="New posts in composer will use this visiblity"/>
<ListItemSecondaryAction> <ListItemSecondaryAction>
<Button onClick={this.toggleVisibilityDialog}> <Button onClick={this.toggleVisibilityDialog}>
@ -370,6 +400,9 @@ class SettingsPage extends Component<any, ISettingsState> {
<Paper className={classes.pageListConstraints}> <Paper className={classes.pageListConstraints}>
<List> <List>
<ListItem> <ListItem>
<ListItemAvatar>
<NotificationsIcon color="action"/>
</ListItemAvatar>
<ListItemText <ListItemText
primary="Enable push notifications" primary="Enable push notifications"
secondary={ secondary={
@ -389,6 +422,9 @@ class SettingsPage extends Component<any, ISettingsState> {
</ListItemSecondaryAction> </ListItemSecondaryAction>
</ListItem> </ListItem>
<ListItem> <ListItem>
<ListItemAvatar>
<BellAlertIcon color="action"/>
</ListItemAvatar>
<ListItemText <ListItemText
primary="Notification badge counts all notifications" primary="Notification badge counts all notifications"
secondary={ secondary={
@ -409,6 +445,9 @@ class SettingsPage extends Component<any, ISettingsState> {
<Paper className={classes.pageListConstraints}> <Paper className={classes.pageListConstraints}>
<List> <List>
<ListItem> <ListItem>
<ListItemAvatar>
<RefreshIcon color="action"/>
</ListItemAvatar>
<ListItemText primary="Refresh settings" secondary="Reset the settings to defaults."/> <ListItemText primary="Refresh settings" secondary="Reset the settings to defaults."/>
<ListItemSecondaryAction> <ListItemSecondaryAction>
<Button onClick={() => this.toggleResetSettingsDialog()}> <Button onClick={() => this.toggleResetSettingsDialog()}>
@ -417,6 +456,9 @@ class SettingsPage extends Component<any, ISettingsState> {
</ListItemSecondaryAction> </ListItemSecondaryAction>
</ListItem> </ListItem>
<ListItem> <ListItem>
<ListItemAvatar>
<UndoIcon color="action"/>
</ListItemAvatar>
<ListItemText primary={`Reset ${this.state.brandName}`} secondary="Deletes all data and resets the app"/> <ListItemText primary={`Reset ${this.state.brandName}`} secondary="Deletes all data and resets the app"/>
<ListItemSecondaryAction> <ListItemSecondaryAction>
<Button onClick={() => this.toggleResetDialog()}> <Button onClick={() => this.toggleResetDialog()}>