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 a0382de0bf7796d5964d62714722b45ccfca61a6 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 | 43 ++++++-- src/svelte/src/components/dataEditor.svelte | 2 + src/svelte/src/components/globalStyles.css | 5 + src/svelte/src/components/layouts/Help.svelte | 110 +++++++++++++++++++++ src/svelte/src/components/layouts/Help.ts | 48 +++++++++ src/svelte/src/components/layouts/Tooltip.svelte | 21 ++-- src/svelte/src/stores/index.ts | 3 + 7 files changed, 217 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..5f7bd18 100644 --- a/src/svelte/src/components/DataDisplays/Header/DisplayHeader.svelte +++ b/src/svelte/src/components/DataDisplays/Header/DisplayHeader.svelte @@ -25,6 +25,8 @@ limitations under the License. selectionSize, bytesPerRow, viewport, + currentHelpSectionDisplayed, + currentHelpSectionEvent, } from '../../../stores' import { EditByteModes, @@ -35,9 +37,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 +120,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)=>{ + $currentHelpSectionEvent = e + $currentHelpSectionDisplayed = 'edit-instructions' + }} + >? + </span> + </Tooltip> + +</div> <div class={$UIThemeCSSClass + ' measure'} style="align-items: center;"> <select class={$UIThemeCSSClass + ' address_type'} @@ -167,14 +184,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 +206,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..10a05c0 --- /dev/null +++ b/src/svelte/src/components/layouts/Help.svelte @@ -0,0 +1,110 @@ +<!-- +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, currentHelpSectionEvent } 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] + } + $: { + let sectionTarget = $currentHelpSectionEvent.target as HTMLElement + if(sectionTarget){ + top = sectionTarget.offsetTop + 352 > document.body.clientHeight + ? (document.body.clientHeight - 352).toString() + 'px' + : (sectionTarget.offsetTop).toString() + 'px' + left = sectionTarget.offsetLeft + 402 > document.body.clientWidth + ? (document.body.clientWidth - 402).toString() + 'px' + : (sectionTarget.offsetLeft).toString() + 'px' + + console.log(top, left, sectionTarget.clientTop, sectionTarget.clientLeft, document.body.clientHeight, document.body.clientWidth) + } + + // 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 +> + <div class="header"> + <!-- svelte-ignore a11y-click-events-have-key-events --> + <span + class="material-symbols-outlined exit" + on:click={()=>{ $currentHelpSectionDisplayed = '' }} + >close + </span> + <h3>Help: {AvailableHelpSections[$currentHelpSectionDisplayed].title}</h3> + </div> + + <hr/> + + {#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); + padding: 0 5px 5px 5px; + } + div.help-container .header { + display: flex; + justify-content: space-between; + align-items: center; + height: 30px; + } + div.help-container hr { + width: 75%; + } + span.exit { + cursor: pointer; + color: grey; + font-size: 20px; + } + span.exit:hover { + color: white; + } +</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..33814d3 --- /dev/null +++ b/src/svelte/src/components/layouts/Help.ts @@ -0,0 +1,48 @@ +/* + * 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 Modes', + sectionId: 'edit-instructions', + descriptionBody: [ + '<h3>Multiple Byte Edits</h3>', + "To edit multiple bytes, highlight, by clicking and dragging over, a selection of bytes in either the physical or logical viewports. This will populate the \ + 'Edit' panel with the data to edit.", + '<h3>Single Byte Edits</h3>', + 'To edit a single byte, simply click any singular byte within either of the viewports. This is replace the content with an input field to perform edits.', + ], +} + +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..c4dbcae 100644 --- a/src/svelte/src/stores/index.ts +++ b/src/svelte/src/stores/index.ts @@ -142,6 +142,9 @@ export const tooltipsEnabled = writable(false) // If byte lengths should be in a human readable format export const sizeHumanReadable = writable(false) +export const currentHelpSectionDisplayed = writable('') +export const currentHelpSectionEvent = writable({} as MouseEvent) + // tracks the start and end offsets of the current selection export const selectionDataStore = new SelectionData()
