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
The following commit(s) were added to
refs/heads/fix-data-editor-edit-instructions by this push:
new 7b20418 Implementing Help Component
7b20418 is described below
commit 7b20418dbc31f6d9cda051fb0ae4225afc5d2ac7
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/stores/index.ts | 2 ++
4 files changed, 34 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/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()
