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/06 22:31:54 UTC
[daffodil-vscode] branch fix-data-editor-edit-instructions updated (a0382de -> 30f0b91)
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 a0382de Implementing Help Component
new 30f0b91 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 (a0382de)
\
N -- N -- N refs/heads/fix-data-editor-edit-instructions (30f0b91)
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 | 31 ++--------------
src/svelte/src/components/layouts/Help.svelte | 31 ++++++----------
src/svelte/src/components/layouts/Help.ts | 4 ++-
.../{FlexContainer.svelte => HelpIcon.svelte} | 42 +++++++++++++++-------
src/svelte/src/stores/index.ts | 3 +-
5 files changed, 47 insertions(+), 64 deletions(-)
copy src/svelte/src/components/layouts/{FlexContainer.svelte => HelpIcon.svelte} (53%)
[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 30f0b911dd62159a76d9d5eb4bb8dd82493e45bd
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 | 16 ++--
src/svelte/src/components/dataEditor.svelte | 2 +
src/svelte/src/components/globalStyles.css | 5 ++
src/svelte/src/components/layouts/Help.svelte | 99 ++++++++++++++++++++++
src/svelte/src/components/layouts/Help.ts | 50 +++++++++++
src/svelte/src/components/layouts/HelpIcon.svelte | 54 ++++++++++++
src/svelte/src/components/layouts/Tooltip.svelte | 21 +++--
src/svelte/src/stores/index.ts | 4 +
8 files changed, 236 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..aadf9dc 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 HelpIcon from '../../layouts/HelpIcon.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,7 @@ 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 <HelpIcon helpSectionId={'edit-instructions'} /></div>
<div class={$UIThemeCSSClass + ' measure'} style="align-items: center;">
<select
class={$UIThemeCSSClass + ' address_type'}
@@ -167,14 +171,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>
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..7328504
--- /dev/null
+++ b/src/svelte/src/components/layouts/Help.svelte
@@ -0,0 +1,99 @@
+<!--
+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;
+ }
+ 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..506a595
--- /dev/null
+++ b/src/svelte/src/components/layouts/Help.ts
@@ -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.
+ */
+
+import { currentHelpSectionDisplayed } from '../../stores'
+
+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..dabfc95
--- /dev/null
+++ b/src/svelte/src/components/layouts/HelpIcon.svelte
@@ -0,0 +1,54 @@
+<!--
+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..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..a77b98a 100644
--- a/src/svelte/src/stores/index.ts
+++ b/src/svelte/src/stores/index.ts
@@ -42,6 +42,7 @@ import {
type BytesPerRow,
EditActionRestrictions,
} from './configuration'
+import type { AvailableHelpSections } from '../components/layouts/Help'
export class SelectionData_t {
startOffset = -1
@@ -142,6 +143,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()