From c4509c98a2b6124713f9787ea8156c4b2da6f7ca Mon Sep 17 00:00:00 2001 From: Michael Chadwick Date: Tue, 7 May 2024 08:33:57 -0700 Subject: [PATCH 01/12] added script for ilios-common/dashboard/navigation component to hold url and instructions variables --- .../addon/components/dashboard/navigation.js | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 packages/ilios-common/addon/components/dashboard/navigation.js diff --git a/packages/ilios-common/addon/components/dashboard/navigation.js b/packages/ilios-common/addon/components/dashboard/navigation.js new file mode 100644 index 0000000000..f3b3521f21 --- /dev/null +++ b/packages/ilios-common/addon/components/dashboard/navigation.js @@ -0,0 +1,27 @@ +import Component from '@glimmer/component'; +import { service } from '@ember/service'; +import { tracked } from '@glimmer/tracking'; +import { dropTask } from 'ember-concurrency'; + +export default class NavigationComponent extends Component { + @service currentUser; + @service iliosConfig; + + @tracked icsFeedUrl; + @tracked icsInstructions; + + constructor() { + super(...arguments); + this.setup.perform(); + } + + setup = dropTask(async () => { + const user = await this.currentUser.getModel(); + const icsFeedKey = user.icsFeedKey; + const apiHost = this.iliosConfig.apiHost; + const loc = window.location.protocol + '//' + window.location.hostname; + const server = apiHost ? apiHost : loc; + this.icsFeedUrl = server + '/ics/' + icsFeedKey; + this.icsInstructions = 'Copy My ICS Link'; + }); +} From 08103cbbac5deeddab7c5c779a1bb6a80939a46b Mon Sep 17 00:00:00 2001 From: Michael Chadwick Date: Tue, 7 May 2024 08:39:39 -0700 Subject: [PATCH 02/12] updated ilios-common/ics-feed component so it uses an ilios-common/ilios-tooltip for success notification --- .../addon/components/ics-feed.hbs | 34 ++++++++++--------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/packages/ilios-common/addon/components/ics-feed.hbs b/packages/ilios-common/addon/components/ics-feed.hbs index 1168833cfc..f796de23c4 100644 --- a/packages/ilios-common/addon/components/ics-feed.hbs +++ b/packages/ilios-common/addon/components/ics-feed.hbs @@ -3,20 +3,22 @@ data-test-ics-feed ...attributes > -

- {{@instructions}} -

-

- - - - {{t "general.copyIcsFeedUrl"}} - - {{#if this.textCopied.isRunning}} - - {{t "general.copiedSuccessfully"}} - - {{/if}} - -

+ + + + {{#if (and this.copyButton this.textCopied.isRunning)}} + + {{t "general.copiedSuccessfully"}} + + {{/if}} From 2018e65ffd0ba6bd736ceb0f9294aa0fe15b806d Mon Sep 17 00:00:00 2001 From: Michael Chadwick Date: Tue, 7 May 2024 08:40:52 -0700 Subject: [PATCH 03/12] added ilios-common/ics-feed to main navigation --- .../ilios-common/addon/components/dashboard/navigation.hbs | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/ilios-common/addon/components/dashboard/navigation.hbs b/packages/ilios-common/addon/components/dashboard/navigation.hbs index 5a89ffe0d6..04e2b44a2c 100644 --- a/packages/ilios-common/addon/components/dashboard/navigation.hbs +++ b/packages/ilios-common/addon/components/dashboard/navigation.hbs @@ -35,5 +35,11 @@ {{t "general.calendar"}} +
  • + +
    • From 841294bce14b6e17237c478033e28b281d4ae415 Mon Sep 17 00:00:00 2001 From: Michael Chadwick Date: Tue, 7 May 2024 08:43:05 -0700 Subject: [PATCH 04/12] updated look of ics-feed component so it sits nicely in navigation --- .../components/dashboard/navigation.scss | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/packages/ilios-common/app/styles/ilios-common/components/dashboard/navigation.scss b/packages/ilios-common/app/styles/ilios-common/components/dashboard/navigation.scss index e41891a9f5..367e2a6556 100644 --- a/packages/ilios-common/app/styles/ilios-common/components/dashboard/navigation.scss +++ b/packages/ilios-common/app/styles/ilios-common/components/dashboard/navigation.scss @@ -15,6 +15,19 @@ li { margin: 0; + + .ilios-calendar-ics-feed { + display: flex; + margin: 0.175em auto 0; + padding: 0; + text-align: center; + width: 90%; + + .highlight { + color: c.$orange; + @include m.font-size("large"); + } + } } @include m.for-tablet-and-up { @@ -22,6 +35,10 @@ li { margin-right: 3em; + + &:nth-of-type(3) { + margin-right: 0.5em; + } } } } @@ -42,3 +59,11 @@ } } } + +// tooltips are outside the document flow so have to be styled outside the component +.ics-feed-display-success-message-tooltip { + padding: 0; + &.ilios-tooltip .content { + max-width: 100%; + } +} From ee4492764288c15735001f4fa7ae56de809f6394 Mon Sep 17 00:00:00 2001 From: Michael Chadwick Date: Tue, 7 May 2024 08:43:43 -0700 Subject: [PATCH 05/12] removed ics-feed component from ilios-calendar --- .../addon/components/ilios-calendar.hbs | 17 -------------- .../addon/components/ilios-calendar.js | 3 --- .../components/ilios-calendar.scss | 23 ------------------- 3 files changed, 43 deletions(-) diff --git a/packages/ilios-common/addon/components/ilios-calendar.hbs b/packages/ilios-common/addon/components/ilios-calendar.hbs index 08984c9922..ddedbf527f 100644 --- a/packages/ilios-common/addon/components/ilios-calendar.hbs +++ b/packages/ilios-common/addon/components/ilios-calendar.hbs @@ -1,16 +1,5 @@
      -
    • - -
      • {{#each (array "day" "week" "month") as |viewType|}}
    • {{#if (eq @selectedView viewType)}} @@ -39,12 +28,6 @@
    - {{#if this.showIcsFeed}} - - {{/if}} Date: Tue, 7 May 2024 09:35:28 -0700 Subject: [PATCH 06/12] ics-feed button now shrinks on small screens like the other nav buttons --- .../styles/ilios-common/components/dashboard/navigation.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/ilios-common/app/styles/ilios-common/components/dashboard/navigation.scss b/packages/ilios-common/app/styles/ilios-common/components/dashboard/navigation.scss index 367e2a6556..d76f3e2876 100644 --- a/packages/ilios-common/app/styles/ilios-common/components/dashboard/navigation.scss +++ b/packages/ilios-common/app/styles/ilios-common/components/dashboard/navigation.scss @@ -24,6 +24,10 @@ width: 90%; .highlight { + @include m.for-phone-only { + /* stylelint-disable property-disallowed-list */ + width: 3vw; + } color: c.$orange; @include m.font-size("large"); } From 4a7278847d708b06206b0e6918d867142f3875d4 Mon Sep 17 00:00:00 2001 From: Michael Chadwick Date: Tue, 7 May 2024 09:44:46 -0700 Subject: [PATCH 07/12] ics-feed button is now displayed with flex and vertically-aligned better --- .../styles/ilios-common/components/dashboard/navigation.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/ilios-common/app/styles/ilios-common/components/dashboard/navigation.scss b/packages/ilios-common/app/styles/ilios-common/components/dashboard/navigation.scss index d76f3e2876..d63a0ae5e4 100644 --- a/packages/ilios-common/app/styles/ilios-common/components/dashboard/navigation.scss +++ b/packages/ilios-common/app/styles/ilios-common/components/dashboard/navigation.scss @@ -7,6 +7,7 @@ margin: 0.5rem 0 0 0.5rem; ul { + align-items: center; display: flex; justify-content: space-around; list-style-type: none; @@ -17,8 +18,6 @@ margin: 0; .ilios-calendar-ics-feed { - display: flex; - margin: 0.175em auto 0; padding: 0; text-align: center; width: 90%; @@ -28,6 +27,8 @@ /* stylelint-disable property-disallowed-list */ width: 3vw; } + align-items: center; + display: flex; color: c.$orange; @include m.font-size("large"); } From 5237a0bb8684752fbfa61d138cd4d7b346b4d49f Mon Sep 17 00:00:00 2001 From: Michael Chadwick Date: Tue, 7 May 2024 15:54:19 -0700 Subject: [PATCH 08/12] removed ilios-calendar ics-feed test; removed instructions display test as it's contained in tooltip now --- .../integration/components/ics-feed-test.js | 11 +------- .../components/ilios-calendar-test.js | 27 ------------------- 2 files changed, 1 insertion(+), 37 deletions(-) diff --git a/packages/test-app/tests/integration/components/ics-feed-test.js b/packages/test-app/tests/integration/components/ics-feed-test.js index 67f36ebc96..d9816e2057 100644 --- a/packages/test-app/tests/integration/components/ics-feed-test.js +++ b/packages/test-app/tests/integration/components/ics-feed-test.js @@ -7,14 +7,6 @@ import { component } from 'ilios-common/page-objects/components/ics-feed'; module('Integration | Component | ics feed', function (hooks) { setupRenderingTest(hooks); - test('it show instructions', async function (assert) { - const instructions = 'SOME TEST INS'; - this.set('instructions', instructions); - await render(hbs` -`); - assert.strictEqual(component.instructions, instructions); - }); - test('copy', async function (assert) { //skip this test if we can't access the clipboard if (!navigator.clipboard) { @@ -31,8 +23,7 @@ module('Integration | Component | ics feed', function (hooks) { }; this.set('url', url); this.set('instructions', instructions); - await render(hbs` -`); + await render(hbs``); await component.copy.click(); // undo writeText overwrite. navigator.clipboard.writeText = writeText; diff --git a/packages/test-app/tests/integration/components/ilios-calendar-test.js b/packages/test-app/tests/integration/components/ilios-calendar-test.js index 74065ff22c..efd3c135b2 100644 --- a/packages/test-app/tests/integration/components/ilios-calendar-test.js +++ b/packages/test-app/tests/integration/components/ilios-calendar-test.js @@ -106,31 +106,4 @@ module('Integration | Component | ilios calendar', function (hooks) { assert.strictEqual(component.goBack.linksTo, '/dashboard/calendar?date=2015-08-30'); assert.strictEqual(component.goForward.linksTo, '/dashboard/calendar?date=2015-10-30'); }); - - test('toggle ics feed visibility', async function (assert) { - const date = DateTime.fromObject({ - year: 2015, - month: 9, - day: 30, - hour: 12, - minute: 0, - second: 0, - }); - this.set('date', date.toJSDate()); - - await render(hbs` -`); - assert.notOk(component.icsFeed.isVisible); - await component.icsFeedToggle.click(); - assert.ok(component.icsFeed.isVisible); - await component.icsFeedToggle.click(); - assert.notOk(component.icsFeed.isVisible); - }); }); From 43e6af4caf720fc8524f387190e2359846ba6309 Mon Sep 17 00:00:00 2001 From: Michael Chadwick Date: Thu, 9 May 2024 15:27:32 -0700 Subject: [PATCH 09/12] added new copiedIcsFeedUrl translation --- packages/ilios-common/translations/en-us.yaml | 1 + packages/ilios-common/translations/es.yaml | 1 + packages/ilios-common/translations/fr.yaml | 1 + 3 files changed, 3 insertions(+) diff --git a/packages/ilios-common/translations/en-us.yaml b/packages/ilios-common/translations/en-us.yaml index 71bdfcc64f..f7db6e3222 100644 --- a/packages/ilios-common/translations/en-us.yaml +++ b/packages/ilios-common/translations/en-us.yaml @@ -58,6 +58,7 @@ general: confirmRemove: "Are you sure you want to delete this offering with {learnerGroupCount} learner groups? This action cannot be undone." confirmSessionRemoval: Are you sure you want to delete this session? contentAuthor: Content Author + copiedIcsFeedUrl: Copied My ICS Link successfully copiedSuccessfully: Copied Successfully copyIcsFeedUrl: Copy My ICS Link copyLink: Copy link diff --git a/packages/ilios-common/translations/es.yaml b/packages/ilios-common/translations/es.yaml index 85a0a5fe46..dc9b5e106f 100644 --- a/packages/ilios-common/translations/es.yaml +++ b/packages/ilios-common/translations/es.yaml @@ -58,6 +58,7 @@ general: confirmRemove: "¿Estás seguro que quieres borrar este ofrecimiento con {learnerGroupCount} grupos de aprendedores? Esta acción no se puede deshacer." confirmSessionRemoval: ¿Está seguro que desea eliminar este sessión? contentAuthor: Autor del Contenido + copiedIcsFeedUrl: Copiado Mi Enlace ICS con Éxito copiedSuccessfully: Copiado con Éxito copyIcsFeedUrl: Copiar Mi Enlace ICS copyLink: Copiar el enlace diff --git a/packages/ilios-common/translations/fr.yaml b/packages/ilios-common/translations/fr.yaml index c92cee2347..f0b4dcf479 100644 --- a/packages/ilios-common/translations/fr.yaml +++ b/packages/ilios-common/translations/fr.yaml @@ -58,6 +58,7 @@ general: confirmRemove: "Êtes-vous sûr vous voulez supprimer cette offre avec {learnerGroupCount} groupes d'apprenants? Ça action ne peut pas être défait." confirmSessionRemoval: Êtes vous sûr de vouloir supprimer cette séance? contentAuthor: Auteur + copiedIcsFeedUrl: Copié mon lien ICS avec succès copiedSuccessfully: Copié avec succès copyIcsFeedUrl: Copier mon lien ICS copyLink: Copier le lien From 62386cb58a07f47a948a6b7ab8ba2c750bc0cc91 Mon Sep 17 00:00:00 2001 From: Michael Chadwick Date: Thu, 9 May 2024 15:30:51 -0700 Subject: [PATCH 10/12] ics feed now uses tooltip on mouse hover and flash message for click success --- packages/ilios-common/addon/components/ics-feed.hbs | 12 +++++------- packages/ilios-common/addon/components/ics-feed.js | 7 +++++-- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/ilios-common/addon/components/ics-feed.hbs b/packages/ilios-common/addon/components/ics-feed.hbs index f796de23c4..48c1dfa03b 100644 --- a/packages/ilios-common/addon/components/ics-feed.hbs +++ b/packages/ilios-common/addon/components/ics-feed.hbs @@ -8,17 +8,15 @@ @success={{perform this.textCopied}} {{!-- template-lint-disable no-at-ember-render-modifiers --}} {{did-insert (set this.copyButton)}} - title={{if @instructions @instructions 'Copy My ICS Link'}} + aria-label={{if @instructions @instructions (t "general.copyIcsFeedUrl")}} class="link-button highlight" + {{mouse-hover-toggle (set this.showTooltip)}} > - {{#if (and this.copyButton this.textCopied.isRunning)}} - - {{t "general.copiedSuccessfully"}} + {{#if (and this.copyButton this.showTooltip)}} + + {{t "general.copyIcsFeedUrl"}} {{/if}}
    diff --git a/packages/ilios-common/addon/components/ics-feed.js b/packages/ilios-common/addon/components/ics-feed.js index 3402a2cb99..abd5f3855a 100644 --- a/packages/ilios-common/addon/components/ics-feed.js +++ b/packages/ilios-common/addon/components/ics-feed.js @@ -1,8 +1,11 @@ import Component from '@glimmer/component'; -import { restartableTask, timeout } from 'ember-concurrency'; +import { restartableTask } from 'ember-concurrency'; +import { service } from '@ember/service'; export default class IcsFeedComponent extends Component { + @service flashMessages; + textCopied = restartableTask(async () => { - await timeout(3000); + this.flashMessages.success('general.copiedIcsFeedUrl'); }); } From e875602f5fb340f2180a194cc7d0141734c81528 Mon Sep 17 00:00:00 2001 From: Michael Chadwick Date: Wed, 12 Jun 2024 15:07:06 -0700 Subject: [PATCH 11/12] tooltip now displays to the right with bottom as a fallback --- packages/ilios-common/addon/components/ics-feed.hbs | 6 +++++- packages/ilios-common/addon/components/ics-feed.js | 12 ++++++++++++ .../components/dashboard/navigation.scss | 8 -------- .../ilios-common/components/ilios-tooltip.scss | 10 ++++++++++ 4 files changed, 27 insertions(+), 9 deletions(-) diff --git a/packages/ilios-common/addon/components/ics-feed.hbs b/packages/ilios-common/addon/components/ics-feed.hbs index 48c1dfa03b..243cea3f62 100644 --- a/packages/ilios-common/addon/components/ics-feed.hbs +++ b/packages/ilios-common/addon/components/ics-feed.hbs @@ -15,7 +15,11 @@ {{#if (and this.copyButton this.showTooltip)}} - + {{t "general.copyIcsFeedUrl"}} {{/if}} diff --git a/packages/ilios-common/addon/components/ics-feed.js b/packages/ilios-common/addon/components/ics-feed.js index abd5f3855a..65eacf3a9a 100644 --- a/packages/ilios-common/addon/components/ics-feed.js +++ b/packages/ilios-common/addon/components/ics-feed.js @@ -8,4 +8,16 @@ export default class IcsFeedComponent extends Component { textCopied = restartableTask(async () => { this.flashMessages.success('general.copiedIcsFeedUrl'); }); + + popperOptions = { + placement: 'right', + modifiers: [ + { + name: 'flip', + options: { + fallbackPlacements: ['bottom'], + }, + }, + ], + }; } diff --git a/packages/ilios-common/app/styles/ilios-common/components/dashboard/navigation.scss b/packages/ilios-common/app/styles/ilios-common/components/dashboard/navigation.scss index d63a0ae5e4..ba8c2cfb83 100644 --- a/packages/ilios-common/app/styles/ilios-common/components/dashboard/navigation.scss +++ b/packages/ilios-common/app/styles/ilios-common/components/dashboard/navigation.scss @@ -64,11 +64,3 @@ } } } - -// tooltips are outside the document flow so have to be styled outside the component -.ics-feed-display-success-message-tooltip { - padding: 0; - &.ilios-tooltip .content { - max-width: 100%; - } -} diff --git a/packages/ilios-common/app/styles/ilios-common/components/ilios-tooltip.scss b/packages/ilios-common/app/styles/ilios-common/components/ilios-tooltip.scss index d3f560d150..d8dcf3f9b1 100644 --- a/packages/ilios-common/app/styles/ilios-common/components/ilios-tooltip.scss +++ b/packages/ilios-common/app/styles/ilios-common/components/ilios-tooltip.scss @@ -38,7 +38,17 @@ right: -4px; } + &[data-popper-placement^="right"] { + padding-left: 0; + padding-right: 0; + } + &[data-popper-placement^="right"] .arrow { left: -4px; } } + +// tooltips are outside the document flow so have to be styled outside the component +.ilios-tooltip.ics-feed-tooltip .content { + max-width: 100%; +} From 8b7e10fd01d5cb63e3bcb52ca9c6b82f7aff28b9 Mon Sep 17 00:00:00 2001 From: Michael Chadwick Date: Wed, 12 Jun 2024 15:13:21 -0700 Subject: [PATCH 12/12] made copy button scale better < 380px --- .../styles/ilios-common/components/dashboard/navigation.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ilios-common/app/styles/ilios-common/components/dashboard/navigation.scss b/packages/ilios-common/app/styles/ilios-common/components/dashboard/navigation.scss index ba8c2cfb83..a7b84a0f25 100644 --- a/packages/ilios-common/app/styles/ilios-common/components/dashboard/navigation.scss +++ b/packages/ilios-common/app/styles/ilios-common/components/dashboard/navigation.scss @@ -25,7 +25,7 @@ .highlight { @include m.for-phone-only { /* stylelint-disable property-disallowed-list */ - width: 3vw; + width: 7vw; } align-items: center; display: flex;