You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@daffodil.apache.org by rs...@apache.org on 2023/09/05 21:04:30 UTC
[daffodil-vscode] branch fix-data-editor-edit-instructions updated (1fe37dc -> 1964091)
This is an automated email from the ASF dual-hosted git repository.
rstrickland pushed a change to branch fix-data-editor-edit-instructions
in repository https://gitbox.apache.org/repos/asf/daffodil-vscode.git
discard 1fe37dc Implementing Help Component
new 1964091 Implementing Help Component
This update added new revisions after undoing existing revisions.
That is to say, some revisions that were in the old version of the
branch are not in the new version. This situation occurs
when a user --force pushes a change and generates a repository
containing something like this:
* -- * -- B -- O -- O -- O (1fe37dc)
\
N -- N -- N refs/heads/fix-data-editor-edit-instructions (1964091)
You should already have received notification emails for all of the O
revisions, and so the following emails describe only the N revisions
from the common base, B.
Any revisions marked "omit" are not gone; other references still
refer to them. Any revisions marked "discard" are gone forever.
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
.../DataDisplays/Header/DisplayHeader.svelte | 7 ++---
src/svelte/src/components/layouts/Help.svelte | 30 ++++++++++++++++++++++
src/svelte/src/components/layouts/Help.ts | 8 ++++--
src/svelte/src/stores/index.ts | 1 +
4 files changed, 41 insertions(+), 5 deletions(-)
[daffodil-vscode] 01/01: Implementing Help Component
Posted by rs...@apache.org.
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 1964091e4e6a6de1387e0a48b23c4097a9a6f1b0
Author: Robert Strickland <st...@gmail.com>
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 | 98 ++++++++++++++++++++++
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, 205 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..410b8cc
--- /dev/null
+++ b/src/svelte/src/components/layouts/Help.svelte
@@ -0,0 +1,98 @@
+<!--
+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
+>
+ <div class="header">
+ <h3>{AvailableHelpSections[$currentHelpSectionDisplayed].title}</h3>
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
+ <span
+ class="material-symbols-outlined exit"
+ on:click={()=>{ $currentHelpSectionDisplayed = '' }}
+ >close
+ </span>
+ </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 0 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()