ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-21 22:17:49 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Tags] Fix jumping of tags on hover (#6358)

Browse Source
This commit is contained in:
Rukmini Bose (Ruki) 2023-02-27 20:02:58 -06:00 committed by GitHub
parent c74ad1279c
commit d49f057698
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 32 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
e2e/tests/functional/plugins/notebook/notebookWithCouchDB.e2e.spec.js
View File

@ -131,13 +131,13 @@ test.describe('Notebook Tests with CouchDB @couchdb', () => {
// This happens for 3 tags so 12 requests // This happens for 3 tags so 12 requests
addingNotebookElementsRequests = []; addingNotebookElementsRequests = [];
await page.hover('[aria-label="Tag"]:has-text("Driving")'); await page.hover('[aria-label="Tag"]:has-text("Driving")');
await page.locator('[aria-label="Tag"]:has-text("Driving") ~ .c-completed-tag-deletion').click(); await page.locator('[aria-label="Remove tag Driving"]').click();
await page.waitForSelector('[aria-label="Tag"]:has-text("Driving")', {state: 'hidden'}); await page.waitForSelector('[aria-label="Tag"]:has-text("Driving")', {state: 'hidden'});
await page.hover('[aria-label="Tag"]:has-text("Drilling")'); await page.hover('[aria-label="Tag"]:has-text("Drilling")');
await page.locator('[aria-label="Tag"]:has-text("Drilling") ~ .c-completed-tag-deletion').click(); await page.locator('[aria-label="Remove tag Drilling"]').click();
await page.waitForSelector('[aria-label="Tag"]:has-text("Drilling")', {state: 'hidden'}); await page.waitForSelector('[aria-label="Tag"]:has-text("Drilling")', {state: 'hidden'});
page.hover('[aria-label="Tag"]:has-text("Science")'); page.hover('[aria-label="Tag"]:has-text("Science")');
await page.locator('[aria-label="Tag"]:has-text("Science") ~ .c-completed-tag-deletion').click(); await page.locator('[aria-label="Remove tag Science"]').click();
await page.waitForSelector('[aria-label="Tag"]:has-text("Science")', {state: 'hidden'}); await page.waitForSelector('[aria-label="Tag"]:has-text("Science")', {state: 'hidden'});
page.waitForLoadState('networkidle'); page.waitForLoadState('networkidle');
expect(filterNonFetchRequests(addingNotebookElementsRequests).length).toBeLessThanOrEqual(12); expect(filterNonFetchRequests(addingNotebookElementsRequests).length).toBeLessThanOrEqual(12);

2
e2e/tests/functional/plugins/notebook/tags.e2e.spec.js
View File

@ -145,7 +145,7 @@ test.describe('Tagging in Notebooks @addInit', () => {
await createNotebookEntryAndTags(page); await createNotebookEntryAndTags(page);
// Delete Driving // Delete Driving
await page.hover('[aria-label="Tag"]:has-text("Driving")'); await page.hover('[aria-label="Tag"]:has-text("Driving")');
await page.locator('[aria-label="Tag"]:has-text("Driving") ~ .c-completed-tag-deletion').click(); await page.locator('[aria-label="Remove tag Driving"]').click();
await expect(page.locator('[aria-label="Tags Inspector"]')).toContainText("Science"); await expect(page.locator('[aria-label="Tags Inspector"]')).toContainText("Science");
await expect(page.locator('[aria-label="Tags Inspector"]')).not.toContainText("Driving"); await expect(page.locator('[aria-label="Tags Inspector"]')).not.toContainText("Driving");

2
src/ui/components/tags/TagEditor.vue
View File

@ -21,7 +21,7 @@
*****************************************************************************/ *****************************************************************************/
<template> <template>
<div class="c-tag-applier has-tag-applier"> <div class="c-tag-applier">
<TagSelection <TagSelection
v-for="(addedTag, index) in addedTags" v-for="(addedTag, index) in addedTags"
:key="index" :key="index"

14
src/ui/components/tags/TagSelection.vue
View File

@ -21,7 +21,7 @@
*****************************************************************************/ *****************************************************************************/
<template> <template>
<div class="w-tag-wrapper"> <div class="w-tag-wrapper has-tag-applier">
<template v-if="newTag"> <template v-if="newTag">
<AutoCompleteField <AutoCompleteField
v-if="newTag" v-if="newTag"
@ -40,15 +40,17 @@
:class="{'c-tag-edit': !readOnly}" :class="{'c-tag-edit': !readOnly}"
:style="{ background: selectedBackgroundColor, color: selectedForegroundColor }" :style="{ background: selectedBackgroundColor, color: selectedForegroundColor }"
> >
<button
v-show="!readOnly"
class="c-completed-tag-deletion c-tag__remove-btn icon-x-in-circle"
:style="{ textShadow: selectedBackgroundColor + ' 0 0 4px' }"
:aria-label="`Remove tag ${selectedTagLabel}`"
@click="removeTag"
></button>
<div <div
class="c-tag__label" class="c-tag__label"
aria-label="Tag" aria-label="Tag"
>{{ selectedTagLabel }} </div> >{{ selectedTagLabel }} </div>
<button
v-show="!readOnly"
class="c-completed-tag-deletion c-tag__remove-btn icon-x-in-circle"
@click="removeTag"
></button>
</div> </div>
</template> </template>
</div> </div>

25
src/ui/components/tags/tags.scss
View File

@ -93,17 +93,30 @@
// Apply this class to all components that should trigger tag removal btn on hover // Apply this class to all components that should trigger tag removal btn on hover
&:hover { &:hover {
.c-tag { .c-tag {
padding-right: 17px !important; @include userSelectNone();
transition: $transOut; transition: $transOut;
} }
.c-tag__label {
opacity: 0.7;
}
.c-tag__remove-btn { .c-tag__remove-btn {
//display: block; width: 1.3em;
//margin-left: $interiorMarginSm;
width: 1em;
opacity: 0.8; opacity: 0.8;
padding: 2px !important;
transition: $transOut; transition: $transOut;
//transition-delay: 250ms; right: 5%;
text-align: center;
z-index: 2;
&:hover {
opacity: 1;
& ~ * {
// This sibling selector further dims the label
// to make the remove button stand out
opacity: 0.4
}
}
} }
} }
} }