diff options
| -rw-r--r-- | app/assets/javascripts/gfm_auto_complete.js | 18 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/markdown_area.scss | 12 |
2 files changed, 27 insertions, 3 deletions
diff --git a/app/assets/javascripts/gfm_auto_complete.js b/app/assets/javascripts/gfm_auto_complete.js index 6f8b73564d0..c14eb936930 100644 --- a/app/assets/javascripts/gfm_auto_complete.js +++ b/app/assets/javascripts/gfm_auto_complete.js @@ -62,9 +62,11 @@ class GfmAutoComplete { skipMarkdownCharacterTest: true, data: GfmAutoComplete.defaultLoadingData, displayTpl(value) { + const cssClasses = []; + if (GfmAutoComplete.isLoading(value)) return GfmAutoComplete.Loading.template; // 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) { tpl += ' <small class="aliases">(or /<%- aliases.join(", /") %>)</small>'; } @@ -72,10 +74,19 @@ class GfmAutoComplete { tpl += ' <small class="params"><%- params.join(" ") %></small>'; } if (value.description !== '') { - tpl += '<small class="description"><i><%- description %></i></small>'; + tpl += '<small class="description"><i><%- description %> <%- warningText %></i></small>'; } 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) { // eslint-disable-next-line no-template-curly-in-string @@ -104,6 +115,7 @@ class GfmAutoComplete { aliases: c.aliases, params: c.params, description: c.description, + warning: c.warning, search, }; }); diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss index 3142f94b192..0f6fb16774c 100644 --- a/app/assets/stylesheets/framework/markdown_area.scss +++ b/app/assets/stylesheets/framework/markdown_area.scss @@ -219,6 +219,13 @@ margin-bottom: 0; } + .has-warning { + .name, + .description { + color: $orange-700; + } + } + .cur { .avatar { @include disableAllAnimation; @@ -246,6 +253,11 @@ small { color: inherit; } + + &.has-warning { + color: $orange-700; + background-color: $orange-100; + } } div.avatar { |