* Add missing icons to set
* Revert FA5 revert
This reverts commit 42572ff
* use new SVG syntax in locales
* Noscript page changes (remove login button, center "powered by" footer text)
* Cast wider net for SVG icons in settings
- include any _icon setting for SVG registry (offers better support for plugin settings)
- let themes store multiple pipe-delimited icons in a setting
- also replaces broken onebox image icon with SVG reference in cooked post processor
* interpolate icons in locales
* Fix composer whisper icon alignment
* Add support for stacked icons
* SECURITY: enforce hostname to match discourse hostname
This ensures that the hostname rails uses for various helpers always matches
the Discourse hostname
* load SVG sprite with pre-initializers
* FIX: enable caching on SVG sprites
* PERF: use JSONP for SVG sprites so they are served from CDN
This avoids needing to deal with CORS for loading of the SVG
Note, added the svg- prefix to the filename so we can quickly tell in
dev tools what the file is
* Add missing SVG sprite JSONP script to CSP
* Upgrade to FA 5.5.0
* Add support for all FA4.7 icons
- adds complete frontend and backend for renamed FA4.7 icons
- improves performance of SvgSprite.bundle and SvgSprite.all_icons
* Fix group avatar flair preview
- adds an endpoint at /svg-sprites/search/:keyword
- adds frontend ajax call that pulls icon in avatar flair preview even when it is not in subset
* Remove FA 4.7 font files
92 lines
2.4 KiB
JavaScript
92 lines
2.4 KiB
JavaScript
import computed from "ember-addons/ember-computed-decorators";
|
|
import { observes } from "ember-addons/ember-computed-decorators";
|
|
import { escapeExpression } from "discourse/lib/utilities";
|
|
import { convertIconClass } from "discourse-common/lib/icon-library";
|
|
import { ajax } from "discourse/lib/ajax";
|
|
|
|
export default Ember.Component.extend({
|
|
classNames: ["group-flair-inputs"],
|
|
|
|
@computed
|
|
demoAvatarUrl() {
|
|
return Discourse.getURL("/images/avatar.png");
|
|
},
|
|
|
|
@computed("model.flair_url")
|
|
flairPreviewIcon(flairURL) {
|
|
return flairURL && /fa(r|b?)-/.test(flairURL);
|
|
},
|
|
|
|
@computed("model.flair_url", "flairPreviewIcon")
|
|
flairPreviewIconUrl(flairURL, flairPreviewIcon) {
|
|
return flairPreviewIcon ? convertIconClass(flairURL) : "";
|
|
},
|
|
|
|
@observes("model.flair_url")
|
|
_loadSVGIcon() {
|
|
Ember.run.debounce(this, this._loadIcon, 1000);
|
|
},
|
|
|
|
_loadIcon() {
|
|
const icon = convertIconClass(this.get("model.flair_url")),
|
|
c = "#svg-sprites",
|
|
h = "ajax-icon-holder",
|
|
singleIconEl = `${c} .${h}`;
|
|
|
|
if (!icon) return;
|
|
|
|
if (!$(`${c} symbol#${icon}`).length) {
|
|
ajax(`/svg-sprite/search/${icon}`).then(function(data) {
|
|
if ($(singleIconEl).length === 0) $(c).append(`<div class="${h}">`);
|
|
|
|
$(singleIconEl).html(
|
|
`<svg xmlns='http://www.w3.org/2000/svg' style='display: none;'>${data}</svg>`
|
|
);
|
|
});
|
|
}
|
|
},
|
|
|
|
@computed("model.flair_url", "flairPreviewIcon")
|
|
flairPreviewImage(flairURL, flairPreviewIcon) {
|
|
return flairURL && !flairPreviewIcon;
|
|
},
|
|
|
|
@computed(
|
|
"model.flair_url",
|
|
"flairPreviewImage",
|
|
"model.flairBackgroundHexColor",
|
|
"model.flairHexColor"
|
|
)
|
|
flairPreviewStyle(
|
|
flairURL,
|
|
flairPreviewImage,
|
|
flairBackgroundHexColor,
|
|
flairHexColor
|
|
) {
|
|
let style = "";
|
|
|
|
if (flairPreviewImage) {
|
|
style += `background-image: url(${escapeExpression(flairURL)});`;
|
|
}
|
|
|
|
if (flairBackgroundHexColor) {
|
|
style += `background-color: #${flairBackgroundHexColor};`;
|
|
}
|
|
|
|
if (flairHexColor) style += `color: #${flairHexColor};`;
|
|
|
|
return Ember.String.htmlSafe(style);
|
|
},
|
|
|
|
@computed("model.flairBackgroundHexColor")
|
|
flairPreviewClasses(flairBackgroundHexColor) {
|
|
if (flairBackgroundHexColor) return "rounded";
|
|
},
|
|
|
|
@computed("flairPreviewImage")
|
|
flairPreviewLabel(flairPreviewImage) {
|
|
const key = flairPreviewImage ? "image" : "icon";
|
|
return I18n.t(`groups.flair_preview_${key}`);
|
|
}
|
|
});
|