From c389a609c5f0874d1c2b085d5ec2262c4c84afb0 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Sat, 29 Jan 2022 20:37:07 +0100 Subject: [PATCH] fix(annotations): displaying annotation tooltips correctly (#1406) * chore(docs): some typos missed to replace mustache initially and incorrect handlebars two times (both in package name and URL) * Revert "Merge pull request #2 from pattern-lab/dev" This reverts commit 78128780bcffee78c1bc63368b91d429500a928c, reversing changes made to 26db9797d9fb0ddf1530c938a3225ac26b0a5e61. * Revert "Merge pull request #1 from pattern-lab/dev" This reverts commit 26db9797d9fb0ddf1530c938a3225ac26b0a5e61, reversing changes made to fc90750635eac88ece724b97ae74949ebd98aec9. * Revert "chore(docs): some typos" This reverts commit 271dc8d5eeea53b78651333e97ad171c305a2eaa. * chore: some reformatting * chore: formatting * chore: formatting This reverts commit 271dc8d5eeea53b78651333e97ad171c305a2eaa. * chore: formatting * refactor: let's hide elements the modern way with the hidden attribute * refactor: extracting annotations inside modal styles * refactor: we won't need this as a generated CSS file * Revert "Merge branch 'dev' into fix/annotations-tooltip-rendering" This reverts commit 2c715aeb688552e17789ebf6db2b589eb4040006, reversing changes made to 5effb4f543c150a579f76b7cc9ae916d9d8e3d90. * refactor: adding some sample content for the annotations and corrected the current approach to provide annotations JSON * refactor: regenerated those files Co-authored-by: Maximilian --- .../uikit-workshop/src/sass/pattern-lab.scss | 1 + .../_annotations-inside-modal.scss | 75 +++++++++++++++++ .../sass/scss/04-components/_annotations.scss | 80 +------------------ .../scripts/components/modal-styleguide.js | 6 +- 4 files changed, 81 insertions(+), 81 deletions(-) create mode 100644 packages/uikit-workshop/src/sass/scss/04-components/_annotations-inside-modal.scss diff --git a/packages/uikit-workshop/src/sass/pattern-lab.scss b/packages/uikit-workshop/src/sass/pattern-lab.scss index e91e0dfe8..68d715269 100755 --- a/packages/uikit-workshop/src/sass/pattern-lab.scss +++ b/packages/uikit-workshop/src/sass/pattern-lab.scss @@ -46,6 +46,7 @@ @import '../scripts/components/pl-nav/pl-nav.scss'; @import '../scripts/components/pl-search/pl-search.scss'; @import 'scss/04-components/annotations'; +@import 'scss/04-components/annotations-inside-modal'; @import 'scss/04-components/breadcrumbs'; @import 'scss/04-components/pattern-category'; @import 'scss/04-components/pattern-info'; diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_annotations-inside-modal.scss b/packages/uikit-workshop/src/sass/scss/04-components/_annotations-inside-modal.scss new file mode 100644 index 000000000..3acf5dc2e --- /dev/null +++ b/packages/uikit-workshop/src/sass/scss/04-components/_annotations-inside-modal.scss @@ -0,0 +1,75 @@ +@charset "UTF-8"; + +/*------------------------------------*\ + #ANNOTATIONS INSIDE MODAL +\*------------------------------------*/ + +/** + * Annotations area + * 1) Appears inside of modal + */ +.pl-c-annotations { + margin: 1rem 0; +} + +/** + * Annotations Title + * Says the word "Annotations" + */ +.pl-c-annotations__title { + font-size: 1.2rem !important; + margin: 0 0 0.5rem; +} + +/** + * Annotations list + * 1) Ordered list of annotations + * 2) Presented with parent selector to force styles + * over pl-c-text-passage + */ +.pl-c-annotations .pl-c-annotations__list { + counter-reset: the-count; + padding: 0; + margin: 0; + list-style: none; +} + +/** + * Annotations list item + * 1) Displays each item as a number + */ +.pl-c-annotations__item { + position: relative; + padding-left: 1.5rem; + margin-bottom: 1rem; + border-radius: $pl-border-radius-med; + transition: background-color $pl-animate-quick ease; + + &:before { + content: counter(the-count); + counter-increment: the-count; + font-size: 85%; + display: flex; + align-items: center; + justify-content: center; + width: 14px; + height: 14px; + border-radius: 50%; + padding: 2px; + text-align: center; + background-color: $pl-color-gray-50; + color: $pl-color-white; + position: absolute; + top: 4px; + left: 0; + } + + &.pl-is-active { + outline: 1px dotted $pl-color-gray-50; + outline-offset: -1px; + } +} + +.pl-c-annotations .pl-c-annotations__item-title { + margin-bottom: 0; +} diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_annotations.scss b/packages/uikit-workshop/src/sass/scss/04-components/_annotations.scss index 57c32f781..2ff41dda6 100644 --- a/packages/uikit-workshop/src/sass/scss/04-components/_annotations.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_annotations.scss @@ -36,12 +36,10 @@ /** * Annotation tooltip * 1) Appears inside the iframe over any element that has an - * anootation attached to it. - * 2) Annotation tip gets dynamically set to `display: none` via - * JavaScript + * annotation attached to it. */ .pl-c-annotation-tip { - display: flex; /* 2 */ + display: flex; align-items: center; justify-content: center; width: 24px !important; @@ -55,77 +53,3 @@ position: absolute; z-index: 100; } - -/*------------------------------------*\ - #ANNOTATIONS INSIDE MODAL -\*------------------------------------*/ - -/** - * Annotations area - * 1) Appears inside of modal - */ -.pl-c-annotations { - margin: 1rem 0; -} - -/** - * Annotations Title - * Says the word "Annotations" - */ -.pl-c-annotations__title { - font-size: 1.2rem !important; - margin: 0 0 0.5rem; -} - -/** - * Annotations list - * 1) Ordered list of annotations - * 2) Presented with parent selector to force styles - * over pl-c-text-passage - */ -.pl-c-annotations .pl-c-annotations__list { - counter-reset: the-count; - padding: 0; - margin: 0; - list-style: none; -} - -/** - * Annotations list item - * 1) Displays each item as a number - */ -.pl-c-annotations__item { - position: relative; - padding-left: 1.5rem; - margin-bottom: 1rem; - border-radius: $pl-border-radius-med; - transition: background-color $pl-animate-quick ease; - - &:before { - content: counter(the-count); - counter-increment: the-count; - font-size: 85%; - display: flex; - align-items: center; - justify-content: center; - width: 14px; - height: 14px; - border-radius: 50%; - padding: 2px; - text-align: center; - background-color: $pl-color-gray-50; - color: $pl-color-white; - position: absolute; - top: 4px; - left: 0; - } - - &.pl-is-active { - outline: 1px dotted $pl-color-gray-50; - outline-offset: -1px; - } -} - -.pl-c-annotations .pl-c-annotations__item-title { - margin-bottom: 0; -} diff --git a/packages/uikit-workshop/src/scripts/components/modal-styleguide.js b/packages/uikit-workshop/src/scripts/components/modal-styleguide.js index e3e0cdda8..665628c5f 100644 --- a/packages/uikit-workshop/src/scripts/components/modal-styleguide.js +++ b/packages/uikit-workshop/src/scripts/components/modal-styleguide.js @@ -168,7 +168,7 @@ export const modalStyleguide = { patternPartialSelector + '.pl-c-annotation-tip' ); for (let i = 0; i < elsToHide.length; i++) { - elsToHide[i].style.display = 'none'; + elsToHide[i].hidden = true; } }, @@ -242,7 +242,7 @@ export const modalStyleguide = { .getComputedStyle(elsToHighlight[j], null) .getPropertyValue('max-height') === '0px' ) { - span.style.display = 'none'; + span.hidden = true; } const annotationTip = document.querySelector( @@ -254,7 +254,7 @@ export const modalStyleguide = { elsToHighlight[j].firstChild ); } else { - annotationTip.style.display = 'inline-flex'; + annotationTip.hidden = false; } elsToHighlight[j].onclick = (function (el) {