FontAwesome Icons

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## 4.1.0 (unreleased)
 
+* Replaces PNG icons with FontAwesome icon font [#1342](https://github.com/AlchemyCMS/alchemy_cms/pull/1342) by [tvdeyen](https://github.com/tvdeyen)
 * Remove pleaseWait overlay from links with GET requests [#1343](https://github.com/AlchemyCMS/alchemy_cms/pull/1343) by [tvdeyen](https://github.com/tvdeyen)
 * Removed fixed table headers from admin resource tables [#1339](https://github.com/AlchemyCMS/alchemy_cms/pull/1339) by [tvdeyen](https://github.com/tvdeyen)
 * Removed Bourbon Sass library [#1339](https://github.com/AlchemyCMS/alchemy_cms/pull/1339) by [tvdeyen](https://github.com/tvdeyen)

app/assets/javascripts/alchemy/alchemy.base.js.coffee

@@ -62,10 +62,10 @@ $.extend Alchemy,
   removePicture: (selector) ->
     $form_field = $(selector)
     $element = $form_field.closest(".element-editor")
-    if $form_field
+    if $form_field[0]
       $form_field.val ""
       $form_field.prev().remove()
-      $form_field.parent().addClass "missing"
+      $form_field.parent().html '<i class="icon far fa-image fa-fw"/>'
       Alchemy.setElementDirty $element
     false
 

app/assets/javascripts/alchemy/alchemy.dialog.js.coffee

@@ -140,7 +140,7 @@ class window.Alchemy.Dialog
           error_header = "#{xhr.statusText} (#{xhr.status})"
         error_body = "Please check log and try again."
     $errorDiv = $("<div class=\"message #{error_type}\" />")
-    $errorDiv.append "<span class=\"icon #{error_type}\" />"
+    $errorDiv.append Alchemy.messageIcon(error_type)
     $errorDiv.append "<h1>#{error_header}</h1>"
     $errorDiv.append "<p>#{error_body}</p>"
     @dialog_body.html $errorDiv
@@ -171,7 +171,7 @@ class window.Alchemy.Dialog
     @dialog_body = $('<div class="alchemy-dialog-body" />')
     @dialog_header = $('<div class="alchemy-dialog-header" />')
     @dialog_title = $('<div class="alchemy-dialog-title" />')
-    @close_button = $('<a class="alchemy-dialog-close"><span class="icon close small"></span></a>')
+    @close_button = $('<a class="alchemy-dialog-close"><i class="icon fas fa-times fa-fw fa-xs"/></a>')
     @dialog_title.text(@options.title)
     @dialog_header.append(@dialog_title)
     @dialog_header.append(@close_button)
@@ -272,3 +272,13 @@ window.Alchemy.watchForDialogs = (scope = '#alchemy') ->
         @form.submit()
         return
     false
+
+# Returns a FontAwesome icon for given message type
+#
+window.Alchemy.messageIcon = (messageType) ->
+  icon_class = switch messageType
+    when "warning", "warn", "alert" then "exclamation"
+    when "notice" then "check"
+    when "error" then "bug"
+    else messageType
+  "<i class=\"icon fas fa-#{icon_class} fa-fw\" />"

app/assets/javascripts/alchemy/alchemy.dirty.js.coffee

@@ -12,9 +12,6 @@ $.extend Alchemy,
   setElementDirty: (element) ->
     $element = $(element)
     $element.addClass('dirty')
-    $element
-      .find('> .element-header .icon[class*="element_"]')
-      .addClass('element_dirty')
     window.onbeforeunload = @pageUnload
 
   pageUnload: ->
@@ -23,7 +20,6 @@ $.extend Alchemy,
   setElementClean: (element) ->
     $element = $(element)
     $element.removeClass('dirty')
-    $element.find('> .element-header .icon').removeClass('element_dirty')
     $element.find('> .element-content .dirty').removeClass('dirty')
     window.onbeforeunload = undefined
 

app/assets/javascripts/alchemy/alchemy.element_editors.js.coffee

@@ -138,7 +138,7 @@ Alchemy.ElementEditors =
   toggleFold: (id, callback) ->
     spinner = new Alchemy.Spinner('small')
     spinner.spin("#element_#{id} > .element-header .ajax-folder")
-    $("#element_#{id}_folder").hide()
+    $("#element_#{id}_folder .icon").hide()
     $.post Alchemy.routes.fold_admin_element_path(id), =>
       callback.call() if callback?
       return
@@ -194,7 +194,7 @@ Alchemy.ElementEditors =
 
   # Click event handler for element toggle icon.
   onClickToggle: (e) ->
-    id = $(e.target).data('element-toggle')
+    id = $(e.currentTarget).data('element-toggle')
     @toggle(id)
     e.preventDefault()
     e.stopPropagation()

app/assets/javascripts/alchemy/alchemy.elements_window.js.coffee

@@ -12,7 +12,7 @@ Alchemy.ToolbarButton = (options) ->
     e.preventDefault()
     options.onClick(e)
     false
-  $lnk.append "<span class='icon #{options.iconClass}' />"
+  $lnk.append "<i class='icon fas fa-#{options.iconClass} fa-fw' />"
   $btn.append $lnk
   $btn.append "<br><label>#{options.label}</label>"
   $btn

app/assets/javascripts/alchemy/alchemy.file_progress.js.coffee

@@ -9,7 +9,7 @@ Alchemy.FileProgress = (file) ->
     @$fileProgressElement = $('<div class="progress-container"/>')
 
     # Append Cancel Button
-    @$fileProgressCancel = $('<a href="javascript:void(0);" class="progress-cancel"/>')
+    @$fileProgressCancel = $('<a href="javascript:void(0);" class="progress-cancel"><i class="fas fa-times fa-fw"/></a>')
     @$fileProgressElement.append @$fileProgressCancel
 
     # Append Filename

app/assets/javascripts/alchemy/alchemy.growler.js.coffee

@@ -4,8 +4,7 @@ Alchemy.Growler =
 
   build: (message, flash_type) ->
     $flash_container = $("<div class=\"flash #{flash_type}\" />")
-    icon_class = (if flash_type is "notice" then "tick" else flash_type)
-    $flash_container.append "<span class=\"icon #{icon_class}\" />"
+    $flash_container.append Alchemy.messageIcon(flash_type)
     $flash_container.append message
     $("#flash_notices").append $flash_container
     $("#flash_notices").show()

app/assets/javascripts/alchemy/alchemy.image_overlay.coffee

@@ -44,7 +44,7 @@ class window.Alchemy.ImageOverlay extends Alchemy.Dialog
     @dialog = $('<div class="alchemy-image-overlay-dialog" />')
     @dialog_body = $('<div class="alchemy-image-overlay-body" />')
     @close_button = $('<a class="alchemy-image-overlay-close">
-      <span class="icon close small"></span>
+      <i class="icon fas fa-times fa-fw"></i>
     </a>')
     @dialog.append(@close_button)
     @dialog.append(@dialog_body)

app/assets/javascripts/alchemy/alchemy.preview_window.js.coffee

@@ -43,7 +43,7 @@ Alchemy.PreviewWindow =
 
   _hideSpinner: ->
     @spinner.stop()
-    @reload.html('<span class="icon reload"></span>')
+    @reload.html('<i class="icon fas fa-redo fa-fw"></i>')
 
   _bindReloadButton: ->
     $reload = $('#reload_preview_button')

app/assets/stylesheets/alchemy/_defaults.scss

@@ -1,4 +1,3 @@
 @import "alchemy/variables";
 @import "alchemy/mixins";
 @import "alchemy/extends";
-@import "alchemy/icon-font";