Add support for custom highlighting slash commands via warning flags
This commit is contained in:
parent
1fc450d0d1
commit
3b98cb1664
|
@ -62,9 +62,11 @@ class GfmAutoComplete {
|
||||||
skipMarkdownCharacterTest: true,
|
skipMarkdownCharacterTest: true,
|
||||||
data: GfmAutoComplete.defaultLoadingData,
|
data: GfmAutoComplete.defaultLoadingData,
|
||||||
displayTpl(value) {
|
displayTpl(value) {
|
||||||
|
const cssClasses = [];
|
||||||
|
|
||||||
if (GfmAutoComplete.isLoading(value)) return GfmAutoComplete.Loading.template;
|
if (GfmAutoComplete.isLoading(value)) return GfmAutoComplete.Loading.template;
|
||||||
// eslint-disable-next-line no-template-curly-in-string
|
// eslint-disable-next-line no-template-curly-in-string
|
||||||
let tpl = '<li><span class="name">/${name}</span>';
|
let tpl = '<li class="<%- className %>"><span class="name">/${name}</span>';
|
||||||
if (value.aliases.length > 0) {
|
if (value.aliases.length > 0) {
|
||||||
tpl += ' <small class="aliases">(or /<%- aliases.join(", /") %>)</small>';
|
tpl += ' <small class="aliases">(or /<%- aliases.join(", /") %>)</small>';
|
||||||
}
|
}
|
||||||
|
@ -72,10 +74,19 @@ class GfmAutoComplete {
|
||||||
tpl += ' <small class="params"><%- params.join(" ") %></small>';
|
tpl += ' <small class="params"><%- params.join(" ") %></small>';
|
||||||
}
|
}
|
||||||
if (value.description !== '') {
|
if (value.description !== '') {
|
||||||
tpl += '<small class="description"><i><%- description %></i></small>';
|
tpl += '<small class="description"><i><%- description %> <%- warningText %></i></small>';
|
||||||
}
|
}
|
||||||
tpl += '</li>';
|
tpl += '</li>';
|
||||||
return _.template(tpl)(value);
|
|
||||||
|
if (value.warning) {
|
||||||
|
cssClasses.push('has-warning');
|
||||||
|
}
|
||||||
|
|
||||||
|
return _.template(tpl)({
|
||||||
|
...value,
|
||||||
|
className: cssClasses.join(' '),
|
||||||
|
warningText: value.warning ? `(${value.warning})` : '',
|
||||||
|
});
|
||||||
},
|
},
|
||||||
insertTpl(value) {
|
insertTpl(value) {
|
||||||
// eslint-disable-next-line no-template-curly-in-string
|
// eslint-disable-next-line no-template-curly-in-string
|
||||||
|
@ -104,6 +115,7 @@ class GfmAutoComplete {
|
||||||
aliases: c.aliases,
|
aliases: c.aliases,
|
||||||
params: c.params,
|
params: c.params,
|
||||||
description: c.description,
|
description: c.description,
|
||||||
|
warning: c.warning,
|
||||||
search,
|
search,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
|
@ -219,6 +219,13 @@
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.has-warning {
|
||||||
|
.name,
|
||||||
|
.description {
|
||||||
|
color: $orange-700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.cur {
|
.cur {
|
||||||
.avatar {
|
.avatar {
|
||||||
@include disableAllAnimation;
|
@include disableAllAnimation;
|
||||||
|
@ -246,6 +253,11 @@
|
||||||
small {
|
small {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.has-warning {
|
||||||
|
color: $orange-700;
|
||||||
|
background-color: $orange-100;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
div.avatar {
|
div.avatar {
|
||||||
|
|
Loading…
Reference in New Issue