enso-org/enso
1
1
Fork 0
mirror of https://github.com/enso-org/enso.git synced 2024-11-05 03:59:38 +03:00
Code Issues Projects Releases Wiki Activity

Make Settings Sidebar a bit dimmer (#10201)

Browse Source 
https://github.com/enso-org/enso/assets/61194245/98eaac8b-2284-4b98-a8f8-a9fe19d3227b


This PR partially depends on https://github.com/enso-org/enso/pull/10199
This commit is contained in:
Sergei Garin 2024-06-07 12:28:36 +03:00 committed by GitHub
parent 0f7bae3177
commit f74c79048e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 28 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
app/ide-desktop/lib/dashboard/src/components/styled/SidebarTabButton.tsx
View File

@ -1,10 +1,8 @@
/** @file A styled button representing a tab on a sidebar. */
import * as React from 'react'
import * as aria from '#/components/aria'
import StatelessSpinner, * as statelessSpinner from '#/components/StatelessSpinner'
import SvgMask from '#/components/SvgMask'
import UnstyledButton from '#/components/UnstyledButton'
import type * as aria from '#/components/aria'
import * as ariaComponent from '#/components/AriaComponents'
// ========================
// === SidebarTabButton ===
@ -20,38 +18,23 @@ export interface SidebarTabButtonProps {
readonly icon: string
readonly label: string
readonly onPress: (event: aria.PressEvent) => void
readonly isPending?: boolean
}
/** A styled button representing a tab on a sidebar. */
export default function SidebarTabButton(props: SidebarTabButtonProps) {
const {
isDisabled = false,
autoFocus = false,
active = false,
icon,
label,
onPress,
isPending = false,
} = props
const { isDisabled = false, active = false, icon, label, onPress } = props
return (
<UnstyledButton
autoFocus={autoFocus}
<ariaComponent.Button
variant="ghost"
size="medium"
onPress={onPress}
isDisabled={isDisabled}
className={`relative rounded-full ${active ? 'focus-default' : ''}`}
icon={icon}
rounded="full"
className={active ? 'bg-white opacity-100' : ''}
>
<div
className={`button icon-with-text h-row px-button-x transition-colors selectable hover:bg-selected-frame ${active ? 'disabled bg-selected-frame active' : ''}`}
>
{active && isPending ? (
<StatelessSpinner state={statelessSpinner.SpinnerState.loadingMedium} size={16} />
) : (
<SvgMask src={icon} />
)}
<aria.Text className="text">{label}</aria.Text>
</div>
</UnstyledButton>
{label}
</ariaComponent.Button>
)
}

30
app/ide-desktop/lib/dashboard/src/layouts/SettingsSidebar.tsx
View File

@ -12,6 +12,7 @@ import * as textProvider from '#/providers/TextProvider'
import SettingsTab from '#/layouts/Settings/SettingsTab'
import * as aria from '#/components/aria'
import * as ariaComponents from '#/components/AriaComponents'
import FocusArea from '#/components/styled/FocusArea'
import SidebarTabButton from '#/components/styled/SidebarTabButton'
@ -133,19 +134,22 @@ export default function SettingsSidebar(props: SettingsSidebarProps) {
>
{section.name}
</aria.Header>
{section.tabs.map(tab => (
<SidebarTabButton
key={tab.settingsTab}
isDisabled={(tab.organizationOnly ?? false) && !isUserInOrganization}
id={tab.settingsTab}
icon={tab.icon}
label={tab.name}
active={tab.settingsTab === settingsTab}
onPress={() => {
setSettingsTab(tab.settingsTab)
}}
/>
))}
<ariaComponents.ButtonGroup gap="xxsmall" direction="column" align="start">
{section.tabs.map(tab => (
<SidebarTabButton
key={tab.settingsTab}
isDisabled={(tab.organizationOnly ?? false) && !isUserInOrganization}
id={tab.settingsTab}
icon={tab.icon}
label={tab.name}
active={tab.settingsTab === settingsTab}
onPress={() => {
setSettingsTab(tab.settingsTab)
}}
/>
))}
</ariaComponents.ButtonGroup>
</div>
))}
</div>