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/01 20:55:04 UTC
[daffodil-vscode] branch fix-data-editor-edit-instructions updated (7b20418 -> ed3c4f5)
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 7b20418 Implementing Help Component
new ed3c4f5 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 (7b20418)
\
N -- N -- N refs/heads/fix-data-editor-edit-instructions (ed3c4f5)
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:
.../{Error/Error.svelte => layouts/Help.svelte} | 40 ++++++++++++++--------
.../colorScheme.ts => components/layouts/Help.ts} | 36 ++++++++-----------
2 files changed, 41 insertions(+), 35 deletions(-)
copy src/svelte/src/components/{Error/Error.svelte => layouts/Help.svelte} (58%)
copy src/svelte/src/{utilities/colorScheme.ts => components/layouts/Help.ts} (58%)
[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 ed3c4f50acd72cb88cf5b9b38067d14f9f236dd3
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 | 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()