ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-21 14:07:50 +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
addingNotebookElementsRequests = [];
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.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'});
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'});
page.waitForLoadState('networkidle');
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);
// Delete 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"]')).not.toContainText("Driving");

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

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

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

@ -21,7 +21,7 @@
*****************************************************************************/
<template>
<div class="w-tag-wrapper">
<div class="w-tag-wrapper has-tag-applier">
<template v-if="newTag">
<AutoCompleteField
v-if="newTag"
@ -40,15 +40,17 @@
:class="{'c-tag-edit': !readOnly}"
: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
class="c-tag__label"
aria-label="Tag"
>{{ selectedTagLabel }} </div>
<button
v-show="!readOnly"
class="c-completed-tag-deletion c-tag__remove-btn icon-x-in-circle"
@click="removeTag"
></button>
</div>
</template>
</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
&:hover {
.c-tag {
padding-right: 17px !important;
@include userSelectNone();
transition: $transOut;
}
.c-tag__label {
opacity: 0.7;
}
.c-tag__remove-btn {
//display: block;
//margin-left: $interiorMarginSm;
width: 1em;
width: 1.3em;
opacity: 0.8;
padding: 2px !important;
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
}
}
}
}
}