Skip to content
Permalink
Browse files

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

  • Loading branch information...
Mantas Masalskis authored and znuny-robo committed Jun 6, 2019
1 parent 0244ac9 commit 97e3d0b4f09225b7923131a72c66608d9f02d304
Showing with 235 additions and 77 deletions.
  1. +2 −1 app/assets/javascripts/app/controllers/knowledge_base/search_item.coffee
  2. +2 −2 app/assets/javascripts/app/lib/app_post/utils.coffee
  3. +1 −7 app/assets/javascripts/app/lib/mixins/knowledge_base_can_be_published.coffee
  4. +4 −4 app/assets/javascripts/app/lib/mixins/knowledge_base_translatable.coffee
  5. +17 −2 app/assets/javascripts/app/lib/mixins/view_helpers.coffee
  6. +8 −0 app/assets/javascripts/app/models/knowledge_base_category.coffee
  7. +8 −0 app/assets/javascripts/app/views/knowledge_base/_icon_with_modifier.jst.eco
  8. +2 −6 app/assets/javascripts/app/views/knowledge_base/_reader_list_item.jst.eco
  9. +3 −3 app/assets/javascripts/app/views/knowledge_base/content_can_be_published_header_suffix.jst.eco
  10. +2 −6 app/assets/javascripts/app/views/knowledge_base/navigation.jst.eco
  11. +2 −6 app/assets/javascripts/app/views/knowledge_base/search_item.jst.eco
  12. +1 −0 app/assets/javascripts/app/views/knowledge_base/sidebar/generic_list.jst.eco
  13. +1 −1 app/assets/javascripts/knowledge_base_public/search.js
  14. +5 −0 app/assets/stylesheets/knowledge_base.scss
  15. +3 −0 app/assets/stylesheets/svg-dimensions.css
  16. +108 −27 app/assets/stylesheets/zammad.scss
  17. +8 −8 app/controllers/knowledge_base/search_controller.rb
  18. +1 −1 app/helpers/knowledge_base_helper.rb
  19. +1 −1 app/views/knowledge_base/public/answers/show.html.erb
  20. +1 −1 app/views/knowledge_base/public/categories/index.html.erb
  21. BIN contrib/icon-sprite.sketch
  22. +25 −1 public/assets/images/icons.svg
  23. +10 −0 public/assets/images/icons/archived-modifier.svg
  24. +10 −0 public/assets/images/icons/draft-modifier.svg
  25. +10 −0 public/assets/images/icons/internal-modifier.svg
@@ -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: ->
@@ -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}\"]")
@@ -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()
@@ -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
@@ -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
)
@@ -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)
@@ -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>
@@ -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>
@@ -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>
@@ -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 %>
@@ -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>
@@ -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: %>
@@ -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) {
@@ -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;
@@ -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; }

0 comments on commit 97e3d0b

Please sign in to comment.
You can’t perform that action at this time.