Added KB icon modifiers to categories and answers in editor mode.

Juliels1986 · Jun 6, 2019 · 97e3d0b · 97e3d0b
1 parent 0244ac9
commit 97e3d0b
Show file tree

Hide file tree

Showing 25 changed files with 235 additions and 77 deletions.
diff --git a/app/assets/javascripts/app/controllers/knowledge_base/search_item.coffee b/app/assets/javascripts/app/controllers/knowledge_base/search_item.coffee
@@ -12,7 +12,8 @@ class App.KnowledgeBaseSearchItem extends App.Controller
 
   data: ->
     output = @details || {}
-    output['url'] = @object?.uiUrl("search-return/#{@pathSuffix}") || '#'
+    output['url']   = @object?.uiUrl("search-return/#{@pathSuffix}") || '#'
+    output['state'] = @object.parent().attributesForRendering(App.KnowledgeBaseLocale.localeFor(@object)).state
     output
 
   render: ->

diff --git a/app/assets/javascripts/app/lib/app_post/utils.coffee b/app/assets/javascripts/app/lib/app_post/utils.coffee
@@ -952,9 +952,9 @@ class App.Utils
     path = if window.svgPolyfill then '' else 'assets/images/icons.svg'
     "<svg class=\"icon icon-#{name} #{className}\"><use xlink:href=\"#{path}#icon-#{name}\" /></svg>"
 
-  @fontIcon: (name, font) ->
+  @fontIcon: (name, font, className = '') ->
     @loadIconFont(font)
-    "<i class=\"icon\" data-font=\"#{font}\">#{String.fromCharCode('0x'+ name)}</i>"
+    "<i class=\"icon #{className}\" data-font=\"#{font}\">#{String.fromCharCode('0x'+ name)}</i>"
 
   @loadIconFont: (font) ->
     el = $("[data-icon-font=\"#{font}\"]")

diff --git a/app/assets/javascripts/app/lib/mixins/knowledge_base_can_be_published.coffee b/app/assets/javascripts/app/lib/mixins/knowledge_base_can_be_published.coffee
@@ -29,13 +29,7 @@ InstanceMethods =
     @["#{state}_at"]
 
   can_be_published_state_css: ->
-    switch @can_be_published_state()
-      when 'archived'
-        'label-danger'
-      when 'published'
-        'label-success'
-      when 'draft'
-        'label-subtle'
+    "state-#{@can_be_published_state()}"
 
   can_be_published_quick_actions: ->
     switch @can_be_published_state()

diff --git a/app/assets/javascripts/app/lib/mixins/knowledge_base_translatable.coffee b/app/assets/javascripts/app/lib/mixins/knowledge_base_translatable.coffee
@@ -40,8 +40,11 @@ InstanceMethods =
       else
         attrs.editorOnly = false
 
+      attrs.state      = @visibilityState(kb_locale)
+
     if @ instanceof App.KnowledgeBaseAnswer
-      attrs.icon = 'knowledge-base-answer'
+      attrs.icon  = 'knowledge-base-answer'
+      attrs.state = @can_be_published_state()
 
       if options.isEditor
         attrs.editorOnly = !@is_internally_published(kb_locale)
@@ -53,9 +56,6 @@ InstanceMethods =
     #                   else if attrs.editorOnly
     #                     'kb-item--invisible'
 
-    attrs.className = if attrs.editorOnly
-                        'kb-item--invisible'
-
     attrs.icons = {}
 
     if attrs.missingTranslation

diff --git a/app/assets/javascripts/app/lib/mixins/view_helpers.coffee b/app/assets/javascripts/app/lib/mixins/view_helpers.coffee
@@ -142,8 +142,8 @@ App.ViewHelpers =
   Icon: (name, className = '') ->
     App.Utils.icon(name, className)
 
-  fontIcon: (name, font) ->
-    App.Utils.fontIcon(name, font)
+  fontIcon: (name, font, className = '') ->
+    App.Utils.fontIcon(name, font, className)
 
   # define richtext helper
   RichText: (string) ->
@@ -199,3 +199,18 @@ App.ViewHelpers =
     return false if _.isEmpty(contentType)
     return true if contentType.match(/image\/(png|jpg|jpeg|gif)/i)
     false
+
+  # icon with modifier based on visibility state
+  # params: className, iconset, addStateClass
+  iconWithModifier: (item, params) ->
+    if !params.className
+      params.className = ''
+
+    if params.addStateClass
+      params.className += " state-#{item.state}"
+
+    App.view('knowledge_base/_icon_with_modifier')(
+      item:      item
+      className: params.className
+      iconset:   params.iconset
+    )
diff --git a/app/assets/javascripts/app/models/knowledge_base_category.coffee b/app/assets/javascripts/app/models/knowledge_base_category.coffee
@@ -141,6 +141,14 @@ class App.KnowledgeBaseCategory extends App.Model
       record.findDeepAnswer(callback)
     )
 
+  visibilityState: (kb_locale) ->
+    if @visiblePublicly(kb_locale)
+      'published'
+    else if @visibleInternally(kb_locale)
+      'internal'
+    else
+      'draft'
+
   visibleInternally: (kb_locale) =>
     @findDeepAnswer( (record) ->
       record.is_internally_published(kb_locale)

diff --git a/app/assets/javascripts/app/views/knowledge_base/_icon_with_modifier.jst.eco b/app/assets/javascripts/app/views/knowledge_base/_icon_with_modifier.jst.eco
@@ -0,0 +1,8 @@
+<span class="modified-icon <%= @className %>">
+  <% if @item.iconFont: %>
+    <%- @fontIcon(@item.icon, @iconset, 'section-inner-icon') %>
+  <% else: %>
+    <%- @Icon(@item.icon, 'section-inner-icon') %>
+  <% end %>
+  <%- @Icon("#{@item.state}-modifier", 'modified-icon-modifier') %>
+</span>
diff --git a/app/assets/javascripts/app/views/knowledge_base/_reader_list_item.jst.eco b/app/assets/javascripts/app/views/knowledge_base/_reader_list_item.jst.eco
@@ -1,10 +1,6 @@
 <a href="<%- @item.url %>">
   <span class="section-inner">
-  	<% if @item.iconFont: %>
-    <%- @fontIcon(@item.icon, @iconset) %>
-  	<% else: %>
-  	<%- @Icon(@item.icon) %>
-    <% end %>
-    <span><%= @item.title  %></span>
+    <%- @iconWithModifier(@item, className: 'section-inner-icon-holder', iconset: @iconset, addStateClass: true) %>
+    <span><%= @item.title %></span>
   </span>
 </a>
diff --git a/...ssets/javascripts/app/views/knowledge_base/content_can_be_published_header_suffix.jst.eco b/...ssets/javascripts/app/views/knowledge_base/content_can_be_published_header_suffix.jst.eco
@@ -2,14 +2,14 @@
   <span class="<%= @object.can_be_published_state_css() %>"><span class="label-text"><%- @T(@object.can_be_published_state()) %></span></span>
 
   <% if @object.can_be_published_internal_in_future(): %>
-    <span class="label-warning"><span class="label-text"><%- @T('Will be internal') %> <%= @humanTime @object.internal_at %></span></span>
+    <span class="label-warning"><span class="label-text"><%- @T('Will be internal') %> <%- @humanTime(@object.internal_at) %></span></span>
   <% end %>
 
   <% if @object.can_be_published_publish_in_future(): %>
-    <span class="label-warning"><span class="label-text"><%- @T('Will be published') %> <%= @humanTime @object.published_at %></span></span>
+    <span class="label-warning"><span class="label-text"><%- @T('Will be published') %> <%- @humanTime(@object.published_at) %></span></span>
   <% end %>
 
   <% if @object.can_be_published_archive_in_future(): %>
-    <span class="label-warning"><span class="label-text"><%- @T('Will be archived') %> <%- @humanTime @object.archived_at %></span></span>
+    <span class="label-warning"><span class="label-text"><%- @T('Will be archived') %> <%- @humanTime(@object.archived_at) %></span></span>
   <% end %>
 </span>
diff --git a/app/assets/javascripts/app/views/knowledge_base/navigation.jst.eco b/app/assets/javascripts/app/views/knowledge_base/navigation.jst.eco
@@ -1,12 +1,8 @@
 <nav class="breadcrumbs">
   <% for item in @crumbs: %>
     <a class="breadcrumb" <% if item.url: %>href="<%= item.url %><% end %>">
-      <% if icon = item.icon: %>
-        <% if item.iconFont: %>
-          <%- @fontIcon(icon, @iconset) %>
-        <% else: %>
-          <%- @Icon(icon) %>
-        <% end %>
+      <% if item.icon: %>
+        <%- @iconWithModifier(item, iconset: @iconset) %>
       <% end %>
 
       <%= item.title %>

diff --git a/app/assets/javascripts/app/views/knowledge_base/search_item.jst.eco b/app/assets/javascripts/app/views/knowledge_base/search_item.jst.eco
@@ -1,14 +1,10 @@
 <a href="<%= @data.url %>">
   <span class="section-inner">
-    <% if @data.fontName: %>
-      <%- @fontIcon(@data.iconName, @data.fontName) %>
-    <% else: %>
-      <%- @Icon(@data.iconName) %>
-    <% end %>
+    <%- @iconWithModifier(@data, className: 'section-inner-icon-holder', iconset: @iconset, addStateClass: true) %>
     <span class="section-inner-text">
       <span class="section-inner-title"><%- @data.title %></span>
       <span class="section-inner-detail">
-        <span class="section-inner-date"><%- @humanTime(@data.date) %></span> <%- @data.body %>
+        <span class="section-inner-date"><%- @humanTime(@data.date) %></span> <% if @data.body: %><span class="section-inner-body"><%- @data.body %></span><% end %>
       </span>
     </span>
   </span>

diff --git a/app/assets/javascripts/app/views/knowledge_base/sidebar/generic_list.jst.eco b/app/assets/javascripts/app/views/knowledge_base/sidebar/generic_list.jst.eco
@@ -16,6 +16,7 @@
     <% for elem in @items: %>
       <li>
         <a href="<%= elem.url %>" class="<%= elem.className %>">
+          <%- @iconWithModifier(elem, className: 'section-inner-icon-holder', iconset: @iconset, addStateClass: true) %>
           <span class="u-textTruncate"><%= elem.title %></span>
 
           <% if elem.icons: %>

diff --git a/app/assets/javascripts/knowledge_base_public/search.js b/app/assets/javascripts/knowledge_base_public/search.js
@@ -78,7 +78,7 @@
       this.setSubtitle(data.subtitle)
       this.setPreview(data.body)
       this.setURL(data.url)
-      this.setIcon(data.iconName, data.type)
+      this.setIcon(data.icon, data.type)
     }
 
     this.setTitle = function(text) {

diff --git a/app/assets/stylesheets/knowledge_base.scss b/app/assets/stylesheets/knowledge_base.scss
@@ -163,6 +163,11 @@ ol {
     background: hsl(19,90%,51%);
   }
 
+  &[data-color="grey"] {
+    color: hsl(45,98%,17%);
+    background: hsl(0,0%,80%);
+  }
+
   &-tag {
     font-weight: bold;
     margin-right: 17px;

diff --git a/app/assets/stylesheets/svg-dimensions.css b/app/assets/stylesheets/svg-dimensions.css
@@ -1,3 +1,4 @@
+.icon-archived-modifier { width: 9px; height: 9px; }
 .icon-arrow-down { width: 13px; height: 7px; }
 .icon-arrow-left { width: 7px; height: 13px; }
 .icon-arrow-right { width: 7px; height: 13px; }
@@ -19,6 +20,7 @@
 .icon-diagonal-cross { width: 13px; height: 13px; }
 .icon-document { width: 16px; height: 16px; }
 .icon-download { width: 14px; height: 13px; }
+.icon-draft-modifier { width: 9px; height: 9px; }
 .icon-draggable { width: 16px; height: 16px; }
 .icon-dropdown-list { width: 19px; height: 14px; }
 .icon-email-button { width: 29px; height: 24px; }
@@ -51,6 +53,7 @@
 .icon-inactive-organization { width: 16px; height: 16px; }
 .icon-inactive-user { width: 16px; height: 16px; }
 .icon-info { width: 5px; height: 11px; }
+.icon-internal-modifier { width: 9px; height: 9px; }
 .icon-italic { width: 12px; height: 12px; }
 .icon-knowledge-base-answer { width: 16px; height: 16px; }
 .icon-knowledge-base { width: 24px; height: 24px; }