This introduces a new way to display "time ago" dates in Tuleap. The proposal is to use a custom element[0] component that will be responsible of the display of relative dates according to user preferences. This way we won't reinvent the wheel in PHP, VueJS, AngularJS, … Usage is available in the TLP documentation, in visual assets category. A first real life example is available in follow-up comments display. There should not be any functional changes. Under IE11 and Edge legacy, some polyfills are loaded (700KiB 🤬). Other browsers are fine and don't need this asset. Implementation notes -------------------- **Note 1:** The strategy is to progressively replace all usages of DateHelper::timeAgoInWords() to DateHelper::relativeDate() and after that remove the legacy way and rename back the method. **Note 2:** The component needs two dates in input: ```html <tlp-relative-date date="2020-05-11T21:31:07+02:00" absolute-date="11/05/2020 21:31" preference="relative" locale="fr_FR" placement="tooltip" ></tlp-relative-date> ``` Initial spike was using only one date (the full one) and was able to compute the absolute and relative alternatives from it. However Intl.DateTimeFormat used to achieve that differs from PHP's date() implementation, leading to inconsistencies in dates displayed. Therefore absolute dates are computed in PHP (the source of truth) and are provided to the component. **Note 3:** Polyfills loads only *en* and *fr* locales. I assume that other locales will fallback on *en* locale. Maybe we could split the polyfills asset in two part, one for each locale so that the size is reduced. **Note 4:** I didn't find a way to properly import es2020.intl.d.ts (see head of src/themes/tlp/src/js/custom-elements/local-time/relative-date-formatter.ts). Feel free to provide advice on the subject. Part of story #14828: display dates with both absolute and relative dates [0] https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements Change-Id: If9c183ccd78eab51fb39731e41302b1c709fe34d

+988 −20

Author

Nicolas Terray (nterray) 2020-07-13 17:01

Committer

Nicolas Terray (nterray) 2020-07-16 10:44

Hash d330bd74720206a81fe6d805ff6ae7963a7e66fc

Parent 193fda3225d5dbbf9d36c098956363ce274c85e6

Reference git #tuleap/stable/d330bd74720206a81fe6d805ff6ae7963a7e66fc