Skip to content
Snippets Groups Projects
Unverified Commit 8e94d177 authored by Jed Fox's avatar Jed Fox Committed by GitHub
Browse files

Improve visual consistency on the settings page (#799) 

This PR improves the consistency of the settings UI by moving everything
(except the budget name field on mobile) into `<Setting>` boxes.
Additionally, it adds a “Settings” option to the file dropdown menu (I
keep expecting it to be there, and I think it’s reasonable to expose it
in both locations so it’s easier to access)
parent 3cb18683
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 156 additions and 138 deletions
packages/desktop-client/src/components/SidebarWithData.js
+ 3
− 2
View file @ 8e94d177
......@@ -51,9 +51,10 @@ function EditableBudgetName({ prefs, savePrefs }) {
}
let items = [
{ name: 'rename', text: 'Rename Budget' },
{ name: 'rename', text: 'Rename budget' },
{ name: 'settings', text: 'Settings' },
...(Platform.isBrowser ? [{ name: 'help', text: 'Help' }] : []),
{ name: 'close', text: 'Close File' },
{ name: 'close', text: 'Close file' },
];
if (editing) {
......
packages/desktop-client/src/components/settings/Experimental.js
+ 4
− 4
View file @ 8e94d177
......@@ -33,7 +33,7 @@ export default function ExperimentalFeatures({ prefs, savePrefs }) {
disabled={disabled}
/>{' '}
<View>
Enable budget mode toggle
Budget mode toggle
{disabled && (
<Text style={{ color: colors.r3, fontWeight: 500 }}>
Switch to a rollover budget before turning off this feature
......@@ -50,7 +50,7 @@ export default function ExperimentalFeatures({ prefs, savePrefs }) {
savePrefs({ 'flags.syncAccount': !flags.syncAccount });
}}
/>{' '}
<View>Enable account syncing</View>
<View>Account syncing via Nordigen</View>
</label>
<label style={{ display: 'flex' }}>
<Checkbox
......@@ -62,7 +62,7 @@ export default function ExperimentalFeatures({ prefs, savePrefs }) {
});
}}
/>{' '}
<View>Enable Goal Templates</View>
<View>Goal templates</View>
</label>
<label style={{ display: 'flex' }}>
<Checkbox
......@@ -74,7 +74,7 @@ export default function ExperimentalFeatures({ prefs, savePrefs }) {
});
}}
/>{' '}
<View>Enable new Autocomplete component</View>
<View>New autocomplete component</View>
</label>
</View>
) : (
......
packages/desktop-client/src/components/settings/FixSplits.js
+ 16
− 20
View file @ 8e94d177
......@@ -83,27 +83,23 @@ export default function FixSplitsTool() {
<strong>Repair split transactions</strong> if you are experiencing bugs
relating to split transactions and the “Reset budget cache” button above
does not help. If you see blank payees on splits or account balances (or
any balances) are incorrect, this tool may fix them.
any balances) are incorrect, this tool may fix them. This tool does two
things:
</Text>
<View style={{ alignItems: 'flex-start' }}>
<P>This tool does two things:</P>
<P>
<ul style={{ margin: 0, paddingLeft: '1.5em' }}>
<li style={{ marginBottom: '1em' }}>
Ensures that deleted split transactions are fully deleted. In
previous versions of the app, certain split transactions may
appear deleted but not all of them are actually deleted. This
causes the transactions list to look correct, but certain balances
may be incorrect when filtering.
</li>
<li>
Sync the payee and cleared flag of a split transaction to the main
or “parent” transaction, if appropriate. The payee will only be
set if it currently doesn’t have one.
</li>
</ul>
</P>
</View>
<ul style={{ margin: 0, paddingLeft: '1.5em' }}>
<li style={{ marginBottom: '0.5em' }}>
Ensures that deleted split transactions are fully deleted. In previous
versions of the app, certain split transactions may appear deleted but
not all of them are actually deleted. This causes the transactions
list to look correct, but certain balances may be incorrect when
filtering.
</li>
<li>
Sync the payee and cleared flag of a split transaction to the main or
“parent” transaction, if appropriate. The payee will only be set if it
currently doesn’t have one.
</li>
</ul>
</Setting>
);
}
packages/desktop-client/src/components/settings/Global.js
+ 32
− 43
View file @ 8e94d177
......@@ -2,8 +2,9 @@ import React, { useState, useEffect, useRef } from 'react';
import { Information } from 'loot-design/src/components/alerts';
import { View, Text, Button } from 'loot-design/src/components/common';
import { colors } from 'loot-design/src/style';
import { Section } from './UI';
import { Setting } from './UI';
export default function GlobalSettings({ globalPrefs, saveGlobalPrefs }) {
let [documentDirChanged, setDirChanged] = useState(false);
......@@ -26,50 +27,38 @@ export default function GlobalSettings({ globalPrefs, saveGlobalPrefs }) {
}
return (
<Section title="General">
<View
<Setting
primaryAction={
<View style={{ flexDirection: 'row' }}>
<Button onClick={onChooseDocumentDir}>Change location</Button>
{documentDirChanged && (
<Information>
A restart is required for this change to take effect
</Information>
)}
</View>
}
>
<Text>
<strong>Actual’s files</strong> are stored in a folder on your computer.
Currently, that’s:
</Text>
<Text
innerRef={dirScrolled}
style={{
flexDirection: 'row',
alignItems: 'center',
overflow: 'hidden',
backgroundColor: colors.n10,
padding: '7px 10px',
borderRadius: 4,
overflow: 'auto',
whiteSpace: 'nowrap',
// TODO: When we update electron, we should be able to
// remove this. In previous versions of Chrome, once the
// scrollbar appears it never goes away
'::-webkit-scrollbar': { display: 'none' },
}}
>
<Text style={{ flexShrink: 0 }}>Store files here: </Text>
<Text
innerRef={dirScrolled}
style={{
backgroundColor: 'white',
padding: '7px 10px',
borderRadius: 4,
marginLeft: 5,
overflow: 'auto',
whiteSpace: 'nowrap',
// TODO: When we update electron, we should be able to
// remove this. In previous versions of Chrome, once the
// scrollbar appears it never goes away
'::-webkit-scrollbar': { display: 'none' },
}}
>
{globalPrefs.documentDir}
</Text>
<Button
primary
onClick={onChooseDocumentDir}
style={{
fontSize: 14,
marginLeft: 5,
flexShrink: 0,
alignSelf: 'flex-start',
}}
>
Change location
</Button>
</View>
{documentDirChanged && (
<Information style={{ marginTop: 10 }}>
A restart is required for this change to take effect
</Information>
)}
</Section>
{globalPrefs.documentDir}
</Text>
</Setting>
);
}
packages/desktop-client/src/components/settings/UI.js
+ 18
− 33
View file @ 8e94d177
......@@ -7,27 +7,10 @@ import { View, Link } from 'loot-design/src/components/common';
import { colors } from 'loot-design/src/style';
import tokens from 'loot-design/src/tokens';
export function Section({ title, children, style, titleProps, ...props }) {
return (
<View style={[{ gap: 20, alignItems: 'flex-start' }, style]} {...props}>
<View
style={[
{ fontSize: 20, fontWeight: 500, flexShrink: 0 },
titleProps && titleProps.style,
]}
{...titleProps}
>
{title}
</View>
{children}
</View>
);
}
export function Setting({ primaryAction, children }) {
export function Setting({ primaryAction, style, children }) {
return (
<View
{...css(
{...css([
{
backgroundColor: colors.n9,
alignSelf: 'flex-start',
......@@ -37,10 +20,8 @@ export function Setting({ primaryAction, children }) {
border: '1px solid ' + colors.n8,
width: '100%',
},
media(`(min-width: ${tokens.breakpoint_medium})`, {
width: 'auto',
}),
)}
style,
])}
>
<View
style={{
......@@ -62,26 +43,30 @@ export function AdvancedToggle({ children }) {
let [expanded, setExpanded] = useState(location.hash === '#advanced');
return expanded ? (
<Section
innerRef={el => {
if (el && location.hash === '#advanced') {
el.scrollIntoView(true);
}
}}
<View
id="advanced"
title="Advanced Settings"
{...css(
style={[
{
gap: 20,
alignItems: 'flex-start',
marginBottom: 25,
width: '100%',
},
media(`(min-width: ${tokens.breakpoint_medium})`, {
width: 'auto',
}),
)}
]}
innerRef={el => {
if (el && location.hash === '#advanced') {
el.scrollIntoView(true);
}
}}
>
<View style={{ fontSize: 20, fontWeight: 500, flexShrink: 0 }}>
Advanced Settings
</View>
{children}
</Section>
</View>
) : (
<Link
id="advanced"
......
packages/desktop-client/src/components/settings/index.js
+ 77
− 36
View file @ 8e94d177
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { css, media } from 'glamor';
import { media } from 'glamor';
import * as actions from 'loot-core/src/client/actions';
import * as Platform from 'loot-core/src/client/platform';
......@@ -24,7 +24,7 @@ import FixSplitsTool from './FixSplits';
import FormatSettings from './Format';
import GlobalSettings from './Global';
import { ResetCache, ResetSync } from './Reset';
import { Section, AdvancedToggle } from './UI';
import { AdvancedToggle, Setting } from './UI';
function About() {
const version = useServerVersion();
......@@ -32,37 +32,81 @@ function About() {
const isOutdated = useIsOutdated();
return (
<Section title="About" style={{ gap: 5 }}>
<Setting>
<Text>
Client version: v{window.Actual.ACTUAL_VERSION} (
<strong>Actual</strong> is a super fast privacy-focused app for managing
your finances.
</Text>
<View
style={[
{ flexDirection: 'column', gap: 10 },
media(`(min-width: ${tokens.breakpoint_medium})`, {
display: 'grid',
gridTemplateRows: '1fr 1fr',
gridTemplateColumns: '50% 50%',
columnGap: '2em',
gridAutoFlow: 'column',
}),
]}
>
<Text>Client version: v{window.Actual.ACTUAL_VERSION}</Text>
<Text>Server version: {version}</Text>
{isOutdated ? (
<a href="https://actualbudget.github.io/docs/Release-Notes">
new version available: {latestVersion}
<a
style={{ color: colors.p4 }}
href="https://actualbudget.github.io/docs/Release-Notes"
>
New version available: {latestVersion}
</a>
) : (
<span>latest</span>
<Text style={{ color: colors.g2, fontWeight: 600 }}>
You’re up to date!
</Text>
)}
)
</Text>
<Text>Server version: {version}</Text>
</Section>
<Text>
<a href="https://actualbudget.github.io/docs/Release-Notes">
Release Notes
</a>
</Text>
</View>
</Setting>
);
}
function IDName({ children }) {
return <Text style={{ fontWeight: 500 }}>{children}</Text>;
}
function AdvancedAbout({ prefs }) {
return (
<>
<Text>Budget ID: {prefs.id}</Text>
<Text style={{ color: colors.n6 }}>
Sync ID: {prefs.groupId || '(none)'}
<Setting>
<Text>
<strong>IDs</strong> are the names Actual uses to identify your budget
internally. There are several different IDs associated with your budget.
The Budget ID is used to identify your budget file. The Sync ID is used
to access the budget on the server.
</Text>
<Text>
<IDName>Budget ID:</IDName> {prefs.id}
</Text>
<Text style={{ color: colors.n5 }}>
<IDName>Sync ID:</IDName> {prefs.groupId || '(none)'}
</Text>
</>
{/* low priority todo: eliminate some or all of these, or decide when/if to show them */}
{/* <Text>
<IDName>Cloud File ID:</IDName> {prefs.cloudFileId || '(none)'}
</Text>
<Text>
<IDName>User ID:</IDName> {prefs.userId || '(none)'}
</Text> */}
</Setting>
);
}
function Settings({
loadPrefs,
savePrefs,
saveGlobalPrefs,
prefs,
globalPrefs,
pushModal,
......@@ -86,32 +130,29 @@ function Settings({
>
<Page title="Settings">
<View style={{ flexShrink: 0, gap: 30 }}>
{/* The only spot to close a budget on mobile */}
<Section
title="Budget"
style={css(
media(`(min-width: ${tokens.breakpoint_medium})`, {
display: 'none',
}),
)}
>
<FormField>
<FormLabel title="Name" />
<Input
value={prefs.budgetName}
disabled
style={{ color: '#999' }}
/>
</FormField>
<Button onClick={closeBudget}>Close Budget</Button>
</Section>
{isMobile() && (
<View
style={{ gap: 10, flexDirection: 'row', alignItems: 'flex-end' }}
>
{/* The only spot to close a budget on mobile */}
<FormField>
<FormLabel title="Budget Name" />
<Input
value={prefs.budgetName}
disabled
style={{ color: '#999' }}
/>
</FormField>
<Button onClick={closeBudget}>Close Budget</Button>
</View>
)}
<About />
{!Platform.isBrowser && (
<GlobalSettings
globalPrefs={globalPrefs}
saveGlobalPrefs={this.props.saveGlobalPrefs}
saveGlobalPrefs={saveGlobalPrefs}
/>
)}
......
upcoming-release-notes/799.md 0 → 100644
+ 6
− 0
View file @ 8e94d177
---
category: Enhancements
authors: [j-f1]
---
Improve visual consistency on the settings page
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment