Forker/fluxscape
1
0
Fork 0
mirror of https://github.com/fluxscape/fluxscape.git synced 2026-01-11 14:52:54 +01:00
Code Issues Actions Packages Projects Releases 1 Wiki Activity

feat: Add tooltip to cloud service "Open Dashboard" button (#27)

Browse Source
This commit is contained in:
Eric Tuvesson
2024-05-29 10:05:38 +02:00
committed by GitHub
parent cdeb4b1c15
commit 8e16d5f9d4
3 changed files with 22 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/noodl-editor/src/editor/src/constants/Keybindings.ts
View File

@@ -2,6 +2,11 @@ import { Keybinding } from '@noodl-utils/keyboard/Keybinding';
import { KeyCode, KeyMod } from '@noodl-utils/keyboard/KeyCode';
export namespace Keybindings {
export const SEARCH = new Keybinding(KeyMod.CtrlCmd, KeyCode.KEY_F);
export const CLOUD_SERVICE_OPEN_DASHBOARD = new Keybinding(KeyMod.CtrlCmd, KeyMod.Shift, KeyCode.KEY_P);
export const CLOUD_SERVICE_OPEN_DASHBOARD_BROWSER = new Keybinding(KeyMod.CtrlCmd, KeyCode.KEY_P);
export const REFRESH_PREVIEW = new Keybinding(KeyMod.CtrlCmd, KeyCode.KEY_R);
export const OPEN_DEVTOOLS = new Keybinding(KeyMod.CtrlCmd, KeyCode.KEY_D);
export const OPEN_CLOUD_DEVTOOLS = new Keybinding(KeyMod.CtrlCmd, KeyMod.Shift, KeyCode.KEY_R);

5
packages/noodl-editor/src/editor/src/router.setup.ts
View File

@@ -1,7 +1,6 @@
import { AppRegistry } from '@noodl-models/app_registry';
import { SidebarModel } from '@noodl-models/sidebar';
import { Keybinding } from '@noodl-utils/keyboard/Keybinding';
import { KeyCode, KeyMod } from '@noodl-utils/keyboard/KeyCode';
import { Keybindings } from '@noodl-constants/Keybindings';
import { IconName } from '@noodl-core-ui/components/common/Icon';
@@ -69,7 +68,7 @@ export function installSidePanel({ isLesson }: SetupEditorOptions) {
SidebarModel.instance.register({
id: 'search',
name: 'Search',
fineType: new Keybinding(KeyMod.CtrlCmd, KeyCode.KEY_F).label,
fineType: Keybindings.SEARCH.label,
order: 2,
icon: IconName.Search,
panel: SearchPanel

21
packages/noodl-editor/src/editor/src/views/panels/CloudServicePanel/CloudServiceCard/CloudServiceCard.tsx
View File

@@ -1,13 +1,16 @@
import classNames from 'classnames';
import React, { useEffect, useRef, useState } from 'react';
import { Keybindings } from '@noodl-constants/Keybindings';
import { Environment } from '@noodl-models/CloudServices';
import ParseDashboardServer from '@noodl-utils/parsedashboardserver';
import { Icon, IconName, IconSize } from '@noodl-core-ui/components/common/Icon';
import { IconButton, IconButtonState, IconButtonVariant } from '@noodl-core-ui/components/inputs/IconButton';
import { PrimaryButton, PrimaryButtonSize, PrimaryButtonVariant } from '@noodl-core-ui/components/inputs/PrimaryButton';
import { DialogRenderDirection } from '@noodl-core-ui/components/layout/BaseDialog';
import { Collapsible } from '@noodl-core-ui/components/layout/Collapsible';
import { Tooltip } from '@noodl-core-ui/components/popups/Tooltip';
import { Label, LabelSpacingSize } from '@noodl-core-ui/components/typography/Label';
import { Text, TextType } from '@noodl-core-ui/components/typography/Text';
@@ -118,12 +121,18 @@ export function CloudServiceCard({
</div>
{isEditorEnvironment && (
<PrimaryButton
label="Open dashboard"
size={PrimaryButtonSize.Small}
onClick={onDashboardClicked}
isGrowing
/>
<Tooltip
content="Open the Parse Dashboard"
fineType={`${Keybindings.CLOUD_SERVICE_OPEN_DASHBOARD.label} in window or ${Keybindings.CLOUD_SERVICE_OPEN_DASHBOARD_BROWSER.label} to open in browsers`}
renderDirection={DialogRenderDirection.Below}
>
<PrimaryButton
label="Open dashboard"
size={PrimaryButtonSize.Small}
onClick={onDashboardClicked}
isGrowing
/>
</Tooltip>
)}
</div>
</div>