Skip to content

Commit

Permalink
add tooltips
Browse files Browse the repository at this point in the history
  • Loading branch information
@magicmatatjahu
magicmatatjahu committed Nov 14, 2022
1 parent ed041a6 commit 9244dc9
Show file tree
Hide file tree
Showing 9 changed files with 181 additions and 79 deletions.
83 changes: 83 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
"@headlessui/react": "1.4.1",
"@hookstate/core": "^3.0.12",
"@monaco-editor/react": "^4.4.5",
"@tippyjs/react": "^4.2.6",
"js-base64": "^3.7.2",
"js-file-download": "^0.4.12",
"js-yaml": "^4.1.0",
Expand Down
110 changes: 45 additions & 65 deletions src/components/Modals/Settings/SettingsModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,40 @@ import state from '../../../state';

import type { SettingsState } from '../../../state/settings';

function saveOptions(settings: Partial<SettingsState> = {}) {
state.settings.merge({
...settings,
});
localStorage.setItem('studio-settings', JSON.stringify(state.settings.get()));
interface ShowGovernanceOptionProps {
label: 'warning' | 'information' | 'hint';
state: boolean;
setState: React.Dispatch<React.SetStateAction<boolean>>;
}

const ShowGovernanceOption: React.FunctionComponent<ShowGovernanceOptionProps> = ({
label,
state,
setState
}) => {
return (
<div>
<div className="flex flex-col mt-4 text-sm">
<div className="flex flex-row content-center justify-between">
<label
htmlFor={`settings-governance-show-${label}`}
className="flex justify-right items-center w-1/2 content-center font-medium text-gray-700"
>
Show&nbsp;<strong>{label}</strong>&nbsp;governance issues
</label>
<Switch
toggle={state}
onChange={setState}
/>
</div>
<div className='text-gray-400 text-xs'>
Show {label} governance issues in the editor&apos;s&nbsp;<strong>Diagnostics</strong>&nbsp;tab.
</div>
</div>
</div>
);
};

export const SettingsModal: React.FunctionComponent = () => {
const settingsState = state.useSettingsState();
const [autoSaving, setAutoSaving] = useState(settingsState.editor.autoSaving.get());
Expand Down Expand Up @@ -59,6 +86,13 @@ export const SettingsModal: React.FunctionComponent = () => {
setConfirmDisabled(isThisSameObjects);
}, [autoSaving, savingDelay, autoRendering, governanceWarnings, governanceInformations, governanceHints]);

const saveOptions = (settings: Partial<SettingsState> = {}) => {
settingsState.merge({
...settings,
});
localStorage.setItem('studio-settings', JSON.stringify(settingsState.get()));
};

const onCancel = () => {
settingsState.merge({
showModal: false,
Expand Down Expand Up @@ -108,7 +142,7 @@ export const SettingsModal: React.FunctionComponent = () => {
htmlFor="settings-auto-saving"
className="flex justify-right items-center w-1/2 content-center font-medium text-gray-700"
>
Auto saving:
Auto saving
</label>
<Switch
toggle={autoSaving}
Expand All @@ -125,7 +159,7 @@ export const SettingsModal: React.FunctionComponent = () => {
htmlFor="settings-template-delay"
className="flex justify-right items-center w-1/2 content-center font-medium text-gray-700"
>
Delay (in miliseconds):
Delay (in miliseconds)
</label>
<select
name="settings-template-delay"
Expand Down Expand Up @@ -154,63 +188,9 @@ export const SettingsModal: React.FunctionComponent = () => {
tab: <span>Governance</span>,
content: (
<>
<div>
<div className="flex flex-col mt-4 text-sm">
<div className="flex flex-row content-center justify-between">
<label
htmlFor="settings-governance-show-warnings"
className="flex justify-right items-center w-1/2 content-center font-medium text-gray-700"
>
Show&nbsp;<strong>warning</strong>&nbsp;governance issues:
</label>
<Switch
toggle={governanceWarnings}
onChange={setGovernanceWarnings}
/>
</div>
<div className='text-gray-400 text-xs'>
Show warning governance issues in the editor&apos;s&nbsp;<strong>Diagnostics</strong>&nbsp;tab.
</div>
</div>
</div>
<div>
<div className="flex flex-col mt-4 text-sm">
<div className="flex flex-row content-center justify-between">
<label
htmlFor="settings-governance-show-informations"
className="flex justify-right items-center w-1/2 content-center font-medium text-gray-700"
>
Show&nbsp;<strong>information</strong>&nbsp;governance issues:
</label>
<Switch
toggle={governanceInformations}
onChange={setGovernanceInformations}
/>
</div>
<div className='text-gray-400 text-xs'>
Show information governance issues in the editor&apos;s&nbsp;<strong>Diagnostics</strong>&nbsp;tab.
</div>
</div>
</div>
<div>
<div className="flex flex-col mt-4 text-sm">
<div className="flex flex-row content-center justify-between">
<label
htmlFor="settings-governance-show-hints"
className="flex justify-right items-center w-1/2 content-center font-medium text-gray-700"
>
Show&nbsp;<strong>hint</strong>&nbsp;governance issues:
</label>
<Switch
toggle={governanceHints}
onChange={setGovernanceHints}
/>
</div>
<div className='text-gray-400 text-xs'>
Show hint governance issues in the editor&apos;s&nbsp;<strong>Diagnostics</strong>&nbsp;tab.
</div>
</div>
</div>
<ShowGovernanceOption label='warning' state={governanceWarnings} setState={setGovernanceWarnings} />
<ShowGovernanceOption label='information' state={governanceInformations} setState={setGovernanceInformations} />
<ShowGovernanceOption label='hint' state={governanceHints} setState={setGovernanceHints} />
</>
),
},
Expand All @@ -225,7 +205,7 @@ export const SettingsModal: React.FunctionComponent = () => {
htmlFor="asyncapi-version"
className="flex justify-right items-center w-1/2 content-center font-medium text-gray-700"
>
Auto rendering:
Auto rendering
</label>
<Switch
toggle={autoRendering}
Expand Down
34 changes: 21 additions & 13 deletions src/components/Sidebar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import { VscListSelection, VscCode, VscOpenPreview, VscGraph, VscNewFile } from 'react-icons/vsc';

import { Tooltip } from './common';
import { SettingsModal } from './Modals/Settings/SettingsModal';

import state from '../state';
Expand Down Expand Up @@ -51,6 +52,7 @@ interface NavItem {
name: string;
state: () => boolean;
icon: React.ReactNode;
tooltip: React.ReactNode;
}

interface SidebarProps {}
Expand All @@ -68,50 +70,56 @@ export const Sidebar: React.FunctionComponent<SidebarProps> = () => {
name: 'navigation',
state: () => sidebarState.panels.navigation.get(),
icon: <VscListSelection className="w-5 h-5" />,
tooltip: 'Navigation',
},
// editor
{
name: 'editor',
state: () => sidebarState.panels.editor.get(),
icon: <VscCode className="w-5 h-5" />,
tooltip: 'Editor',
},
// template
{
name: 'template',
state: () => sidebarState.panels.view.get() && sidebarState.panels.viewType.get() === 'template',
icon: <VscOpenPreview className="w-5 h-5" />,
tooltip: 'HTML preview',
},
// visuliser
{
name: 'visualiser',
state: () => sidebarState.panels.view.get() && sidebarState.panels.viewType.get() === 'visualiser',
icon: <VscGraph className="w-5 h-5" />,
tooltip: 'Blocks visualiser',
},
// newFile
{
name: 'newFile',
state: () => false,
icon: <VscNewFile className="w-5 h-5" />,
tooltip: 'New file',
},
];

return (
<div className="flex flex-col bg-gray-800 shadow-lg border-r border-gray-700 justify-between">
<div className="flex flex-col">
{navigation.map(item => (
<button
key={item.name}
title={(item.name.charAt(0).toUpperCase() + item.name.slice(1))}
onClick={() => setActiveNav(item.name as NavItemType)}
className={`flex text-sm border-l-2 ${
item.state()
? 'text-white hover:text-gray-500 border-white'
: 'text-gray-500 hover:text-white border-gray-800'
} focus:outline-none border-box p-4`}
type="button"
>
{item.icon}
</button>
<Tooltip content={item.tooltip} placement='right' hideOnClick={true} key={item.name}>
<button
title={(item.name.charAt(0).toUpperCase() + item.name.slice(1))}
onClick={() => setActiveNav(item.name as NavItemType)}
className={`flex text-sm border-l-2 ${
item.state()
? 'text-white hover:text-gray-500 border-white'
: 'text-gray-500 hover:text-white border-gray-800'
} focus:outline-none border-box p-4`}
type="button"
>
{item.icon}
</button>
</Tooltip>
))}
</div>
<div className="flex flex-col">
Expand Down
Loading

0 comments on commit 9244dc9

Please sign in to comment.