This is an automated email from the ASF dual-hosted git repository.
rstrickland pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/daffodil-vscode.git
The following commit(s) were added to refs/heads/main by this push:
new 0a1a6c6 Implementing Help Component
0a1a6c6 is described below
commit 0a1a6c6db6fefddccc24591a4624031c5c030e05
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 | 2 -
.../src/components/Editors/DataEditor.svelte | 10 +-
src/svelte/src/components/dataEditor.svelte | 2 +
src/svelte/src/components/globalStyles.css | 5 +
src/svelte/src/components/layouts/Help.svelte | 101 +++++++++++++++++++++
src/svelte/src/components/layouts/Help.ts | 48 ++++++++++
src/svelte/src/components/layouts/HelpIcon.svelte | 56 ++++++++++++
src/svelte/src/components/layouts/Tooltip.svelte | 21 +++--
src/svelte/src/stores/index.ts | 4 +
9 files changed, 233 insertions(+), 16 deletions(-)
diff --git a/src/svelte/src/components/DataDisplays/Header/DisplayHeader.svelte
b/src/svelte/src/components/DataDisplays/Header/DisplayHeader.svelte
index e51495f..4628e78 100644
--- a/src/svelte/src/components/DataDisplays/Header/DisplayHeader.svelte
+++ b/src/svelte/src/components/DataDisplays/Header/DisplayHeader.svelte
@@ -37,8 +37,6 @@ limitations under the License.
import { createEventDispatcher } from 'svelte'
import { OffsetSearchType } from '../../Header/fieldsets/SearchReplace'
import { byteDivWidthFromRadix } from '../../../utilities/display'
-
- const eventDispatcher = createEventDispatcher()
let bitIndexStr = '01234567'
let selectionOffsetText: string
let offsetLine: string[] = []
diff --git a/src/svelte/src/components/Editors/DataEditor.svelte
b/src/svelte/src/components/Editors/DataEditor.svelte
index b80784f..fec9427 100644
--- a/src/svelte/src/components/Editors/DataEditor.svelte
+++ b/src/svelte/src/components/Editors/DataEditor.svelte
@@ -30,6 +30,7 @@ limitations under the License.
import ContentControls from
'../DataDisplays/Fieldsets/ContentControls.svelte'
import FlexContainer from '../layouts/FlexContainer.svelte'
import DataView from '../DataDisplays/Fieldsets/DataView.svelte'
+ import HelpIcon from '../layouts/HelpIcon.svelte'
const eventDispatcher = createEventDispatcher()
let selectionOffsetText: string
@@ -86,7 +87,7 @@ limitations under the License.
style:justify-content={displayTextEditorArea ? 'flex-end' : 'flex-start'}
>
<div class="hdr editor-header" >
- <div class={$UIThemeCSSClass + ' hd'}>Editor</div>
+ <div class={$UIThemeCSSClass + ' hd'}>Editor <HelpIcon
helpSectionId={'edit-instructions'}/></div>
<div class={$UIThemeCSSClass + " measure selection-content"}>
{#if $selectionDataStore.active && $editMode !== EditByteModes.Single}
<!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -101,13 +102,6 @@ limitations under the License.
<div>
{selectionOffsetText}
</div>
- {:else}
- <sub
- ><i
- >To edit multiple bytes, highlight (by clicking and dragging) a
- selection of bytes</i
- ></sub
- >
{/if}
</div>
</div>
diff --git a/src/svelte/src/components/dataEditor.svelte
b/src/svelte/src/components/dataEditor.svelte
index 2387bbd..32b5285 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
@@ -317,6 +318,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 0a52458..916f9b3 100644
--- a/src/svelte/src/components/globalStyles.css
+++ b/src/svelte/src/components/globalStyles.css
@@ -300,6 +300,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..2031140
--- /dev/null
+++ b/src/svelte/src/components/layouts/Help.svelte
@@ -0,0 +1,101 @@
+<!--
+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,
+ currentHelpSectionEvent,
+ } from '../../stores'
+ import { AvailableHelpSections } from './Help'
+
+ let displayHelp = false
+ let top, left: string
+
+ $: displayHelp = $currentHelpSectionDisplayed.length > 0
+ $: {
+ 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'
+ }
+ }
+</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>
+
+ {#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;
+ overflow-y: scroll;
+ }
+ div.help-container .header {
+ display: flex;
+ align-items: center;
+ height: 30px;
+ border-width: 0 0 2px 0;
+ border-color: grey;
+ border-style: solid;
+ }
+ div.help-container h3 {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ width: 100%;
+ }
+ 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..128712e
--- /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/HelpIcon.svelte
b/src/svelte/src/components/layouts/HelpIcon.svelte
new file mode 100644
index 0000000..3925b98
--- /dev/null
+++ b/src/svelte/src/components/layouts/HelpIcon.svelte
@@ -0,0 +1,56 @@
+<!--
+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,
+ currentHelpSectionEvent,
+ } from '../../stores'
+ import type { AvailableHelpSections } from './Help'
+
+ export let helpSectionId: AvailableHelpSections
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<span
+ class="help-icon"
+ on:click={(e) => {
+ $currentHelpSectionEvent = e
+ $currentHelpSectionDisplayed = helpSectionId
+ }}
+ >?
+</span>
+
+<style lang="scss">
+ span.help-icon {
+ cursor: pointer;
+ opacity: 0.5;
+ width: 5px;
+ border: 1px solid white;
+ border-radius: 50px;
+ font-size: 11px;
+ font-weight: bold;
+ margin: 0 5px 0 5px;
+ padding: 0 5px 0 5px;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ }
+ span.help-icon:hover {
+ opacity: 1;
+ }
+</style>
diff --git a/src/svelte/src/components/layouts/Tooltip.svelte
b/src/svelte/src/components/layouts/Tooltip.svelte
index 29fc0bf..f04abff 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 6c1cca9..66b3c8e 100644
--- a/src/svelte/src/stores/index.ts
+++ b/src/svelte/src/stores/index.ts
@@ -45,6 +45,7 @@ import {
EditActionRestrictions,
VIEWPORT_CAPACITY_MAX,
} from './configuration'
+import type { AvailableHelpSections } from '../components/layouts/Help'
export class SelectionData_t {
startOffset = -1
@@ -144,6 +145,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('' as
AvailableHelpSections)
+export const currentHelpSectionEvent = writable({} as MouseEvent)
+
// tracks the start and end offsets of the current selection
export const selectionDataStore = new SelectionData()
