This is an automated email from the ASF dual-hosted git repository. rstrickland pushed a commit to branch fix-data-editor-edit-instructions in repository https://gitbox.apache.org/repos/asf/daffodil-vscode.git
commit 1fe37dcf120cf009840e48adc2d2db3e16d13237 Author: Robert Strickland <[email protected]> AuthorDate: Fri Sep 1 10:52:35 2023 -1000 Implementing Help Component - Fixed issue where the editor edit instructions were difficult to read on smaller width/height windows. - Implemented new `Help` layout for larger/enhanced `Tooltip` implementations. Closes #823 --- .../DataDisplays/Header/DisplayHeader.svelte | 42 ++++++++++--- src/svelte/src/components/dataEditor.svelte | 2 + src/svelte/src/components/globalStyles.css | 5 ++ src/svelte/src/components/layouts/Help.svelte | 68 ++++++++++++++++++++++ src/svelte/src/components/layouts/Help.ts | 44 ++++++++++++++ src/svelte/src/components/layouts/Tooltip.svelte | 21 +++++-- src/svelte/src/stores/index.ts | 2 + 7 files changed, 169 insertions(+), 15 deletions(-) diff --git a/src/svelte/src/components/DataDisplays/Header/DisplayHeader.svelte b/src/svelte/src/components/DataDisplays/Header/DisplayHeader.svelte index 055cb2d..59aa31f 100644 --- a/src/svelte/src/components/DataDisplays/Header/DisplayHeader.svelte +++ b/src/svelte/src/components/DataDisplays/Header/DisplayHeader.svelte @@ -25,6 +25,7 @@ limitations under the License. selectionSize, bytesPerRow, viewport, + currentHelpSectionDisplayed, } from '../../../stores' import { EditByteModes, @@ -35,9 +36,11 @@ limitations under the License. } from '../../../stores/configuration' import { UIThemeCSSClass } from '../../../utilities/colorScheme' import { createEventDispatcher } from 'svelte' + import Tooltip from '../../layouts/Tooltip.svelte' type ViewportDivSpread = '24px' | '28px' | '68px' + const EditInstructionsPhrase = 'To edit multiple bytes, highlight (by clicking and dragging) a selection of bytes' const eventDispatcher = createEventDispatcher() const bitNumText = '01234567' const physicalOffsetSpreads = { @@ -116,7 +119,20 @@ limitations under the License. <div class={$UIThemeCSSClass + ' hd'}>Address</div> <div class={$UIThemeCSSClass + ' hd'}>Physical</div> <div class={$UIThemeCSSClass + ' hd'}>Logical</div> -<div class={$UIThemeCSSClass + ' hd'}>Edit</div> +<div class={$UIThemeCSSClass + ' hd'} + >Edit + <!-- svelte-ignore a11y-click-events-have-key-events --> + <Tooltip alwaysEnabled={true} description={EditInstructionsPhrase} tooltipSizeExtended={true}> + <span + class="edit-instructions-help-icon" + on:click={(e)=>{ + console.log(e) + }} + >? + </span> + </Tooltip> + +</div> <div class={$UIThemeCSSClass + ' measure'} style="align-items: center;"> <select class={$UIThemeCSSClass + ' address_type'} @@ -167,14 +183,8 @@ limitations under the License. {selectionOffsetText} </div> {:else} - <div> - <sub - ><i - >To edit multiple bytes, highlight (by clicking and dragging) a - selection of bytes</i - ></sub - > - </div> + <div> + </div> {/if} </div> @@ -195,4 +205,18 @@ limitations under the License. div.physical-viewport-header { padding-left: 4px; } + span.edit-instructions-help-icon { + cursor: pointer; + opacity: 0.5; + width: 12px; + border: 1px solid white; + border-radius: 50px; + font-size: 10px; + font-weight: bold; + margin: 0 5px 0 5px; + padding: 0 5px 0 5px; + } + span.edit-instructions-help-icon:hover { + opacity: 1; + } </style> diff --git a/src/svelte/src/components/dataEditor.svelte b/src/svelte/src/components/dataEditor.svelte index 5ed6520..63c77d3 100644 --- a/src/svelte/src/components/dataEditor.svelte +++ b/src/svelte/src/components/dataEditor.svelte @@ -62,6 +62,7 @@ limitations under the License. } from './DataDisplays/CustomByteDisplay/BinaryData' import { byte_count_divisible_offset } from '../utilities/display' import { clearSearchResultsHighlights } from '../utilities/highlights' + import Help from './layouts/Help.svelte' $: $UIThemeCSSClass = $darkUITheme ? CSSThemeClass.Dark : CSSThemeClass.Light @@ -319,6 +320,7 @@ limitations under the License. on:seek={seekEventHandler} /> + <Help /> <hr /> <ServerMetrics /> </body> diff --git a/src/svelte/src/components/globalStyles.css b/src/svelte/src/components/globalStyles.css index 33f6d4c..2e47c3f 100644 --- a/src/svelte/src/components/globalStyles.css +++ b/src/svelte/src/components/globalStyles.css @@ -305,6 +305,11 @@ div.hide-scrollbar::-webkit-scrollbar { text-align: center; font-weight: bold; color: #fffdfa; + height: 25px; + align-content: center; + display: flex; + justify-content: center; + align-items: center; } .dataEditor div.hd.dark { background-color: #2f3e4f; diff --git a/src/svelte/src/components/layouts/Help.svelte b/src/svelte/src/components/layouts/Help.svelte new file mode 100644 index 0000000..b39a38d --- /dev/null +++ b/src/svelte/src/components/layouts/Help.svelte @@ -0,0 +1,68 @@ +<!-- +Licensed to the Apache Software Foundation (ASF) under one or more +contributor license agreements. See the NOTICE file distributed with +this work for additional information regarding copyright ownership. +The ASF licenses this file to You under the Apache License, Version 2.0 +(the "License"); you may not use this file except in compliance with +the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +--> + +<script lang="ts"> + import { onMount } from "svelte" + import { currentHelpSectionDisplayed } from "../../stores" + import { AvailableHelpSections, HelpDialogLeftOffset, HelpDialogTopOffset } from "./Help" + + let displayHelp = false + let top, left: string + + onMount(() => { + top = (document.body.clientHeight - HelpDialogTopOffset).toString() + 'px' + left = (document.body.clientWidth - HelpDialogLeftOffset).toString() + 'px' + }) + + $: { + displayHelp = $currentHelpSectionDisplayed.length > 0 + let sectionInfo = AvailableHelpSections[$currentHelpSectionDisplayed] + } + $: { + top = (document.body.clientHeight - HelpDialogTopOffset).toString() + 'px' + left = (document.body.clientWidth - HelpDialogLeftOffset).toString() + 'px' + } +</script> + +{#if displayHelp} + +<div + class="help-container" + style:top + style:left +> + {#each AvailableHelpSections[$currentHelpSectionDisplayed].descriptionBody as sectional} + <div class="help-section-info"> + {@html sectional} + </div> + {/each} +</div> + +{/if} + +<style lang="scss"> + div.help-container { + position: absolute; + max-height: 350px; + min-height: 200px; + max-width: 400px; + min-width: 250px; + background-color: var(--color-secondary-darkest); + color: var(--color-secondary-lightest); + border: 2px solid var(--color-tertiary-mid); + } +</style> diff --git a/src/svelte/src/components/layouts/Help.ts b/src/svelte/src/components/layouts/Help.ts new file mode 100644 index 0000000..971daff --- /dev/null +++ b/src/svelte/src/components/layouts/Help.ts @@ -0,0 +1,44 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +type DescriptionBody = Array<string> + +type HelpInformation = { + title: string + sectionId: AvailableHelpSections + descriptionBody: DescriptionBody +} + +export const HelpDialogWidth = 300 +export const HelpDialogHeight = 350 +export const HelpDialogBorderWidth = 2 +export const HelpDialogLeftOffset = HelpDialogWidth + HelpDialogBorderWidth +export const HelpDialogTopOffset = HelpDialogHeight + HelpDialogBorderWidth + +const EditInstructionsHelp: HelpInformation = { + title: 'Edit - Help', + sectionId: 'edit-instructions', + descriptionBody: [ + 'To edit multiple bytes, highlight (by clicking and dragging) a selection of bytes', + ], +} + +export const AvailableHelpSections = { + 'edit-instructions': EditInstructionsHelp, +} + +export type AvailableHelpSections = keyof typeof AvailableHelpSections diff --git a/src/svelte/src/components/layouts/Tooltip.svelte b/src/svelte/src/components/layouts/Tooltip.svelte index 29fc0bf..84c2172 100644 --- a/src/svelte/src/components/layouts/Tooltip.svelte +++ b/src/svelte/src/components/layouts/Tooltip.svelte @@ -22,6 +22,7 @@ limitations under the License. const TOOLTIP_MIN_HEIGHT = 25 export let description: string export let alwaysEnabled = false + export let tooltipSizeExtended = false let showTooltip = false let left = 0, top = 0 @@ -68,7 +69,7 @@ limitations under the License. {#if showTooltip} <div - class="tooltip" + class="tooltip {tooltipSizeExtended ? "extended" : "fit-content"}" style:left={left.toString() + 'px'} style:top={top.toString() + 'px'} > @@ -85,17 +86,25 @@ limitations under the License. display: flex; align-content: center; align-items: center; - max-width: 150px; - min-width: 50px; - max-height: 50px; - min-height: 25px; - font-size: 12px; text-align: center; + font-size: 12px; background-color: var(--color-secondary-darkest); color: var(--color-secondary-lightest); border: 2px solid var(--color-tertiary-mid); opacity: 0.85; z-index: 99; + } + .extended { + width: 250px; + height: 300px; + padding: 5px; + } + + .fit-content { + max-width: 150px; + min-width: 50px; + max-height: 50px; + min-height: 25px; padding: 2px; } </style> diff --git a/src/svelte/src/stores/index.ts b/src/svelte/src/stores/index.ts index 185cba1..b151ce6 100644 --- a/src/svelte/src/stores/index.ts +++ b/src/svelte/src/stores/index.ts @@ -142,6 +142,8 @@ export const tooltipsEnabled = writable(false) // If byte lengths should be in a human readable format export const sizeHumanReadable = writable(false) +export const currentHelpSectionDisplayed = writable('') + // tracks the start and end offsets of the current selection export const selectionDataStore = new SelectionData()
