Commit Graph

1217 Commits

Author SHA1 Message Date
Kris a356e2fe30
UX: update and consolodate published page styles (#18792) 2022-11-01 14:31:39 -04:00
Blake Erickson f7a4fd1f49
FIX: Follow up fixes for password-reset error page (#18794)
* FIX: Follow up fixes for password-reset error page

Pass in `base_url` to the template
Use `.html_safe` since the message now contains html

Follow up to: 9b1536fb83

* Update specs to pass in the base_url
2022-10-28 15:41:26 -06:00
Blake Erickson f70d71c5e3
UX: Change emoji graphic on invite error page (#18790)
Switch to using the sweat-smile emoji instead of the cry emoji on the
error page when you have already redeemed your invite.
2022-10-28 11:34:38 -06:00
Osama Sayegh 787d512c03
FIX: Add theme-color `<meta>` tag when a dark scheme is selected (#18747)
Meta topic: https://meta.discourse.org/t/meta-theme-color-is-not-respecting-current-color-scheme/239815/7?u=osama.

This commit renders an additional `theme-color` `<meta>` tag for the dark scheme if the current user/request has a scheme selected for dark mode. We currently only render one `theme-color` tag which is always based on the user's selected scheme for light mode, but if the user also selects a scheme for dark mode and uses a device that's configured to use/prefer dark mode, the Discourse UI will be in dark mode, but any parts of the browser/OS UI that's colored based on the `theme-color` tag, would use a color from the user's selected light scheme and look inconsistent with the Discourse UI because the `theme-color` tag is based on the user's selected light scheme.

The additional `theme-color` tag has `media="(prefers-color-scheme: dark)"` and is based on the user's selected dark scheme which means any browser UI that's colored based on `theme-color` tags should be able to pick the right tag based on the user's preference for light/dark mode.
2022-10-26 07:18:05 +03:00
Rafael dos Santos Silva 6888eb5c2d
Revert "Revert "FEATURE: Preload resources via link header (#18475)" (#18511)" (#18531)
* Revert "Revert "FEATURE: Preload resources via link header (#18475)" (#18511)"

This reverts commit 95a57f7e0c.

* put behind feature flag

* env -> global setting

* declare global setting

* forgot one spot
2022-10-11 20:11:44 -03:00
Rafael dos Santos Silva 95a57f7e0c
Revert "FEATURE: Preload resources via link header (#18475)" (#18511)
This reverts commit 2d1dbc6f96.

We need to increase nginx proxy buffer to land this.
2022-10-07 15:08:40 -03:00
Rafael dos Santos Silva 2d1dbc6f96
FEATURE: Preload resources via link header (#18475)
Experiment moving from preload tags in the document head to preload information the the response headers.

While this is a minor improvement in most browsers (headers are parsed before the response body), this allows smart proxies like Cloudflare to "learn" from those headers and build HTTP 103 Early Hints for subsequent requests to the same URI, which will allow the user agent to download and parse our JS/CSS while we are waiting for the server to generate and stream the HTML response.

Co-authored-by: Penar Musaraj <pmusaraj@gmail.com>
2022-10-07 13:19:50 -03:00
Kris a5fbdba9d4
UX: add max-width to digest email, format erb (#18445) 2022-10-03 11:55:50 -04:00
David Taylor e06b9d4a52
DEV: Remove support for legacy plugin JS compilation pipeline (#18293)
This became the default in b1755137
2022-09-21 12:38:02 +01:00
Kris b0ac98b465
DEV: remove H1 from crawler view header (#18201) 2022-09-12 10:46:00 -04:00
David Taylor 0f8e4d7acc
DEV: Compile splash screen JS with ember-cli before inlining (#18150)
This lets us use all our normal JS tooling like prettier, esline and babel on the splash screen JS. At runtime the JS file is read and inlined into the HTML. This commit also switches us to use a CSP hash rather than a nonce for the splash screen.
2022-09-01 09:58:48 +01:00
Kris 000c4e1084
UX: fix styles for the wizard congrats step (#18105) 2022-08-26 12:29:40 -04:00
David Taylor 33a2624f09
DEV: Introduce flag for compiling Plugin JS with Ember CLI (#17965)
When `EMBER_CLI_PLUGIN_ASSETS=1`, plugin application JS will be compiled via Ember CLI. In this mode, the existing `register_asset` API will cause any registered JS files to be made available in `/plugins/{plugin-name}_extra.js`. These 'extra' files will be loaded immediately after the plugin app JS file, so this should not affect functionality.

Plugin compilation in Ember CLI is implemented as an addon, similar to the existing 'admin' addon. We bypass the normal Ember CLI compilation process (which would add the JS to the main app bundle), and reroute the addon Broccoli tree into a separate JS file per-plugin. Previously, Sprockets would add compiled templates directly to `Ember.TEMPLATES`. Under Ember CLI, they are compiled into es6 modules. Some new logic in `discourse-boot.js` takes care of remapping the new module names into the old-style `Ember.TEMPLATES`.

This change has been designed to be a like-for-like replacement of the old plugin compilation system, so we do not expect any breakage. Even so, the environment variable flag will allow us to test this in a range of environments before enabling it by default.

A manual silence implementation is added for the build-time `ember-glimmer.link-to.positional-arguments` deprecation while we work on a better story for plugins.
2022-08-22 09:56:39 +01:00
David Taylor 3ffc213fa9
FEATURE: Add safe-mode toggle to `/u/admin-login` (#17930)
Previously, this would require manually adding `?safe_mode=...` multiple times during the email-based login flow. `/u/admin-login` is often used when debugging a site, so it makes sense for this to be easier.

This commit introduces a new checkbox on the `/u/admin-login` screen. When checked, it'll set the safe_mode parameter on the `/email-login` link, and then pass it all the way through to the homepage redirect.
2022-08-15 15:30:07 +01:00
David Taylor 64a66cf82b
UX: Improve safe-mode usability (#17929)
- `no_custom` -> `no_themes` (history: before themes existed, we had a similar tool called 'customizations')
- `only_official` -> `no_unofficial_plugins` (matches format of `no_themes` and `no_plugins`, and makes it clear that this doesn't affect themes)
- `?safe_mode=no_themes%2C%no_plugins` -> `?safe_mode=no_themes,no_plugins` (the query portion of a URL does not require commas to be encoded. This is much nicer to read)
- If `no_plugins` is chosen from `/safe-mode` the URL generated will omit the superfluous `no_unofficial_plugins` flag
- Some tweaks to copy on `/safe-mode`
2022-08-15 15:15:15 +01:00
Kris fc421ca41e
UX: update register admin wizard page styles (#17785) 2022-08-03 21:49:21 -04:00
Meghna b5ea6e746c
UX: updated account activation page design (#17730) 2022-07-29 22:33:11 +05:30
Arpit Jalan 10f200a5d3
FEATURE: revamped wizard (#17477)
* FEATURE: revamped wizard

* UX: Wizard redesign (#17381)

* UX: Step 1-2

* swap out images

* UX: Finalize all steps

* UX: mobile

* UX: Fix test

* more test

* DEV: remove unneeded wizard components

* DEV: fix wizard tests

* DEV: update rails tests for new wizard

* Remove empty hbs files that were created because of rebase

* Fixes for rebase

* Fix wizard image link

* More rebase fixes

* Fix rails tests

* FIX: Update preview for new color schemes: (#17481)

* UX: make layout more responsive, update images

* fix typo

* DEV: move discourse logo svg to template only component

* DEV: formatting improvements

* Remove unneeded files

* Add tests for privacy step

* Fix banner image height for step "ready"

Co-authored-by: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com>
Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
2022-07-27 06:53:01 +05:30
Joe 3c558d2eb6
UX: Prevent color flicker on dark themes (#17620)
Follow up to: #17619
Context: https://meta.discourse.org/t/introducing-discourse-splash-a-visual-preloader-displayed-while-site-assets-load/232003/17

We previously relied on the user's browser when deciding when to show the splash in light/dark mode. This worked well but can fail if the user manually selects a theme with a default "dark" scheme.

This PR will now factor that in. If the user selects a theme with a default dark scheme, use that. If a user selects a theme with a "light" default scheme and also picks a secondary "dark" scheme, use the media detection we had before.

This PR also removes the dark mode theme-color that was added in the previous PR. That will now go in a separate PR
2022-07-25 18:02:21 +08:00
Joe 3d9464b7da
UX: Set theme color on splash a bit earlier (#17619)
Context: https://meta.discourse.org/t/introducing-discourse-splash-a-visual-preloader-displayed-while-site-assets-load/232003/17

We currently set the theme secondary color as the background for the splash, and this works and respects light/dark modes.

The issue is that we set it on the #d-splash div. That div doesn't have a specified height and only gets its height when the splash image loads.

This can cause a flicker effect where the <HTML> background shows for a fraction of a second while the splash image loads.

This PR sets the theme color on the <HTML> tag to alleviate this. This allows us to set the theme color a little bit sooner and should hopefully prevent the flicker effect from happening.

This PR also adds the theme-color <meta> tag for dark mode. Browsers that don't support multiple theme-color tags will ignore the second tag and fall back to the first one.
2022-07-23 17:53:42 +08:00
Martin Brennan 098ab29d41
FEATURE: Add plugin API to register About stat group (#17442)
This commit introduces a new plugin API to register
a group of stats that will be included in about.json
and also conditionally in the site about UI at /about.

The usage is like this:

```ruby
register_about_stat_group("chat_messages", show_in_ui: true) do
  {
    last_day: 1,
    "7_days" => 10,
    "30_days" => 100,
    count: 1000,
    previous_30_days: 120
  }
end
```

In reality the stats will be generated any way the implementer
chooses within the plugin. The `last_day`, `7_days`, `30_days,` and `count`
keys must be present but apart from that additional stats may be added.
Only those core 4 stat keys will be shown in the UI, but everything will be shown
in about.json.

The stat group name is used to prefix the stats in about.json like so:

```json
"chat_messages_last_day": 2322,
"chat_messages_7_days": 2322,
"chat_messages_30_days": 2322,
"chat_messages_count": 2322,
```

The `show_in_ui` option (default false) is used to determine whether the
group of stats is shown on the site About page in the Site Statistics
table. Some stats may be needed purely for reporting purposes and thus
do not need to be shown in the UI to admins/users. An extension to the Site
serializer, `displayed_about_plugin_stat_groups`, has been added so this
can be inspected on the client-side.
2022-07-15 13:16:00 +10:00
Jarek Radosz 5b70b67e78
FIX: Just inline the QUnit CSS in theme-test html (#17415)
Side-steps sassc compilation issues.
2022-07-11 12:01:47 +02:00
Jarek Radosz 8bf11ae0ce
DEV: Move scripts into theme.html body (#17409)
They were incorrectly placed after the body
2022-07-10 10:52:29 +02:00
David Taylor 4f18f3ac20
FIX: Ensure splash screen logic is iOS12 compatible (#17401)
The `?.` safe navigation operator is not supported, and inline scripts are not run through babel.
2022-07-09 11:38:31 +01:00
Joe 2750049333
UX: Makes splash dots use theme colors (#17388)
The dots in the splash were previously hard-coded (v1). This PR makes progress towards making them be based on current theme colors.

Note that this is an improvement and not the "final" version. We're going to dynamically generate the splash file and the base64 URL later on.
2022-07-08 22:30:59 +08:00
Joe 02286186c3
UX: Splash should always stick to top left corner of the viewport (#17348)
No visual changes.

This commit only fixes some display issues on some browsers that don't respect the defaults.
2022-07-06 06:33:09 +08:00
Joe fbc1bc4255
UX: Prevent overlap between splash loader and splash text on some browsers take 2 (#17341)
Same as #17340

context: https://meta.discourse.org/t/show-a-loader-starting-page-for-slow-connections/42981/23?u=johani

No visual changes, just a fix for more situations where the overlap happens.
2022-07-06 00:35:55 +08:00
Joe 4acf2394e6
UX: Prevent overlap between splash loader and splash text on some browsers (#17340)
Context: https://meta.discourse.org/t/show-a-loader-starting-page-for-slow-connections/42981/23?u=johani

Not all browsers respect padding on absolute elements.

There are no visual/function changes. This PR just changes the implementation to prevent the overlap on some browsers.
2022-07-05 22:41:43 +08:00
Joe cfde4419f5
DEV: Preload CSS in the `<head>` (#17322)
This commit adds preload links for core/plugin/theme CSS stylesheets in the head.

Preload links are non-blocking and run in parallel. This means that they should have already been downloaded by the time we use the actual stylesheets (in the <body> tag).

Google is currently complaining about this here and this PR will address that warning.

This commit will also fix an issue in the splash screen where it sometimes doesn't respect the theme colors - causing a slightly jarring experience on dark themes.

Note that I opted not to add new specs because the underlying work required already has a lot of coverage. The new methods only change the output HTML so we can chuck that in the document <head>

This change also means that we can make all the stylesheets non-render blocking, but that will follow in a separate commit.
2022-07-05 00:23:09 +08:00
Joe adb7fa5e2f
UX: Use discourse-ready as a baseline for removing the splash (#17297)
We previously used the window load event as a target to remove the splash. The issue with that is that it means we wait for images to download before we remove the splash.

Ember has a better method that we can use ready(). This PR triggers a custom discourse-ready when that happens and uses that as the baseline for removing the splash.

This PR also adds three new performance marks. discourse-ready, discourse-splash-visible, and discourse-splash-removed

These will help us keep track of performance.

Internal topic /t/65378/81
2022-07-01 21:54:38 +08:00
Joe 49905a4e6c
DEV: Use performance timings to as a baseline for the splash take 2 (#17284)
We previously relied on CSS animation-delay for the splash. This means that we can get inconsistent results based on device/network conditions.

This PR moves us to a more consistent timing based on {request time + 2 seconds}

Internal topic: /t/65378/65
2022-06-30 21:22:00 +08:00
Joe c86c709998
UX: Reduces splash animation delay (#17282)
This PR cuts down the delay before the splash screen is visible.
2022-06-30 17:19:39 +08:00
Joffrey JAFFEUX 657256a099
Revert "DEV: Use `performance.timing` as a baseline for the splash (#17275)" (#17276)
This reverts commit 6146da5eb7.
2022-06-29 18:34:37 +08:00
Joe 6146da5eb7
DEV: Use `performance.timing` as a baseline for the splash (#17275)
* update styles

* remove unused code

* use request time as a baseline
2022-06-29 20:01:46 +10:00
Joe 526115f11a
FIX: Defer removing the splash screen until the window load event fires take 3 (#17238)
We currently remove the splash screen once Discourse starts booting.

This can be an issue on very slow devices, which can take up to 6 seconds. This PR ensures that we don't remove the splash until the browser has finished parsing all of the site's assets. It won't impact fast devices.

Internal topic /t/65378/60
2022-06-25 12:59:16 +08:00
Joe e993a23a54
FIX: Remove splash screen in no-js view take 2 (#17229)
We use javascript to remove the splash screen when the site boots up. If the user has js disabled, they get stuck on the splash screen.

If the user has js disabled. We don't show the splash screen at all.
2022-06-24 17:38:42 +08:00
Joe 07cb8e5300
FIX: Reverts #17225 & #17223 (#17228)
* Revert "FIX: Defer removing the splash screen until the window load event fires (#17225)"

This reverts commit 6a61e855b3.

* Revert "FIX: Remove splash screen in no-js view (#17223)"

This reverts commit 5257cae1b8.
2022-06-24 15:59:27 +10:00
Joe 5257cae1b8
FIX: Remove splash screen in no-js view (#17223)
We use javascript to remove the splash screen when the site boots up. If the user has js disabled, they get stuck on the splash screen.

If the user has js disabled. We don't show the splash screen at all.
2022-06-24 09:25:10 +08:00
Joe 293323af38
UX: Splash screen v1 improvements (#17214)
This commit does six things

* changes the animation for the splash screen. To a more subtle animation.
* defers displaying the splash by 1.5 seconds
* defers displaying the splash "loading" text by 2.5 seconds
* defers removing the splash until all Discourse initializers have run
* fixes a display issue in Firefox
* Inlines the SVG as a base64 and inlines the required CSS.

The encoded SVG is hard coded for now, but we will use a helper to generate that based on the file after some testing.
2022-06-23 14:07:04 +08:00
Joe e82a2ce9ae
UX: Introduces a splash screen behind a hidden site setting (#17094)
This PR introduces a new hidden site setting that allows admins to display a splash screen while site assets load.

The splash screen can be enabled via the `splash_screen` hidden site setting.

This is what the splash screen currently looks like

5ceb72f085.mp4

Once site assets load, the splash screen is automatically removed.

To control the loading text that shows in the splash screen, you can change the preloader_text translation string in admin > customize > text
2022-06-22 04:35:46 +08:00
Roman Rizzi e0ba35350e
FEATURE: Custom unsubscribe options (#17090)
With this change, plugins can create custom unsubscribe keys, extend the unsubscribe view with custom preferences, and decide how they are updated.
2022-06-21 15:49:47 -03:00
David Taylor fdb289164f
FIX: Remove leftover uses of ember_jquery (#17178)
On the password_reset error screen, it was totally unused

On the show_confirm_new_email screen, we can load the `vendor` bundle instead. Eventually we should move all this logic into the Ember app
2022-06-21 14:26:52 +01:00
David Taylor 47a7b4cad0
DEV: Use path instead of absolute URL for theme test links (#17172)
In development, this avoids the surprising switch from ember-cli to rails
2022-06-21 11:32:46 +01:00
Joe 03ffb0bf27
FIX: Defer scripts on theme-tests route (#17171)
Small follow-up to #17063. That PR broke the theme tests route locally.

This PR fixes that.
2022-06-21 12:44:31 +08:00
Jarek Radosz 2c1fc28d00
DEV: Remove ember-cli flags from the backend (#17147)
…and other auxiliary code

* Restore `QUNIT_EMBER_CLI` flag warning
* Add `ALLOW_EMBER_CLI_PROXY_BYPASS`
2022-06-20 16:33:05 +02:00
Joe 93b8811f08
DEV: Moves SVG sprite to `<discourse-assets>` element (#17148)
Similar to #17145

This commit moves the SVG sprite container to the <discourse-assets> element.

There is 0 visual or functional changes in this PR. It just tidies up the element view in devTools.
2022-06-20 20:58:50 +08:00
Joe b2bf1db36f
DEV: Move preloaded `json` into `<discourse-assets>` element (#17145)
This PR introduces 0 visual or functional changes. The only thing that it changes is that it moves the data-preloaded div (which has the app boot json into the <discourse-assets> element.

See #17078 for a bit more context.

The reason behind this change is that it makes devTools element view a little bit less cluttered.
2022-06-20 16:39:11 +08:00
Joe 2f66eb59c2
DEV: Slightly defer loading Discourse stylesheets (#17078)
This is related to #17063 and is also a pre-request for the splash screen work.

This PR introduces 0 visual or functional changes. It just relocates the stylesheets in the load order.
`.css` stylesheets block the browser render. We need to move those out of the <head> tag.

However, they still need to be loaded before core/plugin/theme rendered HTML to avoid FOUC.
2022-06-20 10:37:28 +08:00
Joe 804b8fd9f9
DEV: Defer loading core/plugin/theme JS files (#17063)
This is pre-request work to introduce a splash screen while site assets load.

The only change this commit introduces is that it ensures we add the defer attribute to core/plugin/theme .JS files. This will allow us to insert markup before the browser starts evaluating those scripts later on. It has no visual or functional impact on core.

This will not have any impact on how themes and plugins work. The only exception is themes loading external scripts in the </head> theme field directly via script tags. Everything will work the same but those would need to add the defer attribute if they want to keep the benefits introduced in this PR.
2022-06-20 09:47:37 +08:00
Jarek Radosz fcb4e5a1a1
DEV: Make wizard an ember addon (#17027)
Co-authored-by: David Taylor <david@taylorhq.com>
2022-06-17 14:50:21 +02:00