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 ed3c4f50acd72cb88cf5b9b38067d14f9f236dd3 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 | 34 +++++++++++---- src/svelte/src/components/dataEditor.svelte | 2 + src/svelte/src/components/globalStyles.css | 5 +++ src/svelte/src/components/layouts/Help.svelte | 50 ++++++++++++++++++++++ src/svelte/src/components/layouts/Help.ts | 38 ++++++++++++++++ src/svelte/src/stores/index.ts | 2 + 6 files changed, 122 insertions(+), 9 deletions(-) diff --git a/src/svelte/src/components/DataDisplays/Header/DisplayHeader.svelte b/src/svelte/src/components/DataDisplays/Header/DisplayHeader.svelte index 055cb2d..f1dcdcf 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,15 @@ 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 --> + <span + class="edit-instructions-help-icon" + on:click={()=>{$currentHelpSectionDisplayed = 'edit-instructions'}} + >? + </span> +</div> <div class={$UIThemeCSSClass + ' measure'} style="align-items: center;"> <select class={$UIThemeCSSClass + ' address_type'} @@ -167,14 +178,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 +200,15 @@ limitations under the License. div.physical-viewport-header { padding-left: 4px; } + span.edit-instructions-help-icon { + cursor: pointer; + opacity: 0.5; + width: 15px; + border: 2px solid white; + border-radius: 22px; + margin: 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..b1a07f0 --- /dev/null +++ b/src/svelte/src/components/layouts/Help.svelte @@ -0,0 +1,50 @@ +<!-- +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 { currentHelpSectionDisplayed } from "../../stores" + import { AvailableHelpSections } from "./Help" + + let displayHelp = false + const top = document.body.clientHeight + const left = document.body.clientWidth + + $: displayHelp = $currentHelpSectionDisplayed.length > 0 + +</script> + +{#if displayHelp} + +<div + class="help-container" + style:top + style:left +> + <div {...AvailableHelpSections[$currentHelpSectionDisplayed]}> + </div> +</div> + +{/if} + +<style lang="scss"> + div.help-container { + position: absolute; + max-height: 350px; + max-width: 400px; + border: 2px solid 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..d7babd9 --- /dev/null +++ b/src/svelte/src/components/layouts/Help.ts @@ -0,0 +1,38 @@ +/* + * 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: string // TODO: Create type of available 'sections' to display help for + descriptionBody: DescriptionBody +} + +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/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()
