forked from actualbudget/actual
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update Sidebar - Refactor the Budget Name component (actualbudget#3593)
* Initial Commit Moved Budget Name to its own component for a cleaner Sidebar component. Added pencil icon for editing budget name. Removed Rename Budget from menu. * Create 3593.md * Fixed Menu Dropdown Arrow shrinks with long budget name * Changes recommended by coderabbitai * Fixed Lint issue * Remove Help from Menu * Remove menu from budget name and added Actual logo with menu * Update VRTs * Update VRTs * Fix logo shrinking with long budget name issue * Update 3593.md * Removed Logo and pencil icon * Update VRTs * Removed unused classnames from SideBar and BudgetName component * revert to upstream VRTs
- Loading branch information
Showing
3 changed files
with
153 additions
and
121 deletions.
There are no files selected for viewing
142 changes: 142 additions & 0 deletions
142
packages/desktop-client/src/components/sidebar/BudgetName.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,142 @@ | ||
| import React, { type ReactNode, useRef, useState } from 'react'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import { useDispatch } from 'react-redux'; | ||
|
|
||
| import { closeBudget } from 'loot-core/src/client/actions'; | ||
| import * as Platform from 'loot-core/src/client/platform'; | ||
|
|
||
| import { useMetadataPref } from '../../hooks/useMetadataPref'; | ||
| import { useNavigate } from '../../hooks/useNavigate'; | ||
| import { SvgExpandArrow } from '../../icons/v0'; | ||
| import { theme } from '../../style'; | ||
| import { Button } from '../common/Button2'; | ||
| import { InitialFocus } from '../common/InitialFocus'; | ||
| import { Input } from '../common/Input'; | ||
| import { Menu } from '../common/Menu'; | ||
| import { Popover } from '../common/Popover'; | ||
| import { Text } from '../common/Text'; | ||
| import { View } from '../common/View'; | ||
|
|
||
| type BudgetNameProps = { | ||
| children?: ReactNode; | ||
| }; | ||
|
|
||
| export function BudgetName({ children }: BudgetNameProps) { | ||
| const hasWindowButtons = !Platform.isBrowser && Platform.OS === 'mac'; | ||
|
|
||
| return ( | ||
| <View | ||
| style={{ | ||
| paddingTop: 35, | ||
| height: 30, | ||
| flexDirection: 'row', | ||
| alignItems: 'center', | ||
| margin: '0 8px 23px 20px', | ||
| userSelect: 'none', | ||
| transition: 'padding .4s', | ||
| ...(hasWindowButtons && { | ||
| paddingTop: 20, | ||
| justifyContent: 'flex-start', | ||
| }), | ||
| }} | ||
| > | ||
| <EditableBudgetName /> | ||
|
|
||
| <View style={{ flex: 1, flexDirection: 'row' }} /> | ||
|
|
||
| {children} | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| function EditableBudgetName() { | ||
| const { t } = useTranslation(); | ||
| const [budgetName, setBudgetNamePref] = useMetadataPref('budgetName'); | ||
| const dispatch = useDispatch(); | ||
| const navigate = useNavigate(); | ||
| const [menuOpen, setMenuOpen] = useState(false); | ||
| const triggerRef = useRef<HTMLButtonElement>(null); | ||
| const [editing, setEditing] = useState(false); | ||
|
|
||
| function onMenuSelect(type: string) { | ||
| setMenuOpen(false); | ||
|
|
||
| switch (type) { | ||
| case 'rename': | ||
| setEditing(true); | ||
| break; | ||
| case 'settings': | ||
| navigate('/settings'); | ||
| break; | ||
| case 'close': | ||
| dispatch(closeBudget()); | ||
| break; | ||
| default: | ||
| } | ||
| } | ||
|
|
||
| const items = [ | ||
| { name: 'rename', text: t('Rename budget') }, | ||
| { name: 'settings', text: t('Settings') }, | ||
| { name: 'close', text: t('Close file') }, | ||
| ]; | ||
|
|
||
| if (editing) { | ||
| return ( | ||
| <InitialFocus> | ||
| <Input | ||
| style={{ | ||
| maxWidth: 'calc(100% - 23px)', | ||
| fontSize: 16, | ||
| fontWeight: 500, | ||
| }} | ||
| defaultValue={budgetName} | ||
| onEnter={e => { | ||
| const inputEl = e.target as HTMLInputElement; | ||
| const newBudgetName = inputEl.value; | ||
| if (newBudgetName.trim() !== '') { | ||
| setBudgetNamePref(newBudgetName); | ||
| setEditing(false); | ||
| } | ||
| }} | ||
| onBlur={() => setEditing(false)} | ||
| /> | ||
| </InitialFocus> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <Button | ||
| ref={triggerRef} | ||
| variant="bare" | ||
| style={{ | ||
| color: theme.buttonNormalBorder, | ||
| fontSize: 16, | ||
| fontWeight: 500, | ||
| marginLeft: -5, | ||
| flex: '0 auto', | ||
| }} | ||
| onPress={() => setMenuOpen(true)} | ||
| > | ||
| <Text style={{ whiteSpace: 'nowrap', overflow: 'hidden' }}> | ||
| {budgetName || t('A budget has no name')} | ||
| </Text> | ||
| <SvgExpandArrow | ||
| width={7} | ||
| height={7} | ||
| style={{ flexShrink: 0, marginLeft: 5 }} | ||
| /> | ||
| </Button> | ||
|
|
||
| <Popover | ||
| triggerRef={triggerRef} | ||
| placement="bottom start" | ||
| isOpen={menuOpen} | ||
| onOpenChange={() => setMenuOpen(false)} | ||
| > | ||
| <Menu onMenuSelect={onMenuSelect} items={items} /> | ||
| </Popover> | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| category: Enhancements | ||
| authors: [tlesicka] | ||
| --- | ||
|
|
||
| Refactored Sidebar components. Budget rename input box is now responsive. |