Customization and previewing of broadcast messages

6 files changed, 49 insertions, 3 deletions

diff --git a/app/assets/javascripts/admin.js.coffee b/app/assets/javascripts/admin.js.coffee
index 6230fe7f93f..6634bb6cc34 100644
--- a/app/assets/javascripts/admin.js.coffee
+++ b/app/assets/javascripts/admin.js.coffee
@@ -8,6 +8,23 @@ class Admin
       else
         elems.removeAttr 'disabled'
 
+    $('body').on 'click', '.js-toggle-colors-link', (e) ->
+      e.preventDefault()
+      $('.js-toggle-colors-link').hide()
+      $('.js-toggle-colors-container').show()
+
+    $('input#broadcast_message_color').on 'input', ->
+      previewColor = $('input#broadcast_message_color').val()
+      $('div.broadcast-message-preview').css('background-color', previewColor)
+
+    $('input#broadcast_message_font').on 'input', ->
+      previewColor = $('input#broadcast_message_font').val()
+      $('div.broadcast-message-preview').css('color', previewColor)
+
+    $('textarea#broadcast_message_message').on 'input', ->
+      previewMessage = $('textarea#broadcast_message_message').val()
+      $('div.broadcast-message-preview span').text(previewMessage)
+
     $('.log-tabs a').click (e) ->
       e.preventDefault()
       $(this).tab('show')
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 1615cd79259..1cfcbcedc60 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -361,6 +361,11 @@ table {
   color: #BBB;
 }
 
+.broadcast-message-preview {
+  @extend .broadcast-message;
+  margin-bottom: 20px;
+}
+
 .ajax-users-select {
   width: 400px;
 
diff --git a/app/helpers/broadcast_messages_helper.rb b/app/helpers/broadcast_messages_helper.rb
new file mode 100644
index 00000000000..29ff47663da
--- /dev/null
+++ b/app/helpers/broadcast_messages_helper.rb
@@ -0,0 +1,9 @@
+module BroadcastMessagesHelper
+  def broadcast_styling(broadcast_message)
+    if(broadcast_message.color || broadcast_message.font)
+      "background-color:#{broadcast_message.color};color:#{broadcast_message.font}"
+    else
+      ""
+    end
+  end
+end
diff --git a/app/models/broadcast_message.rb b/app/models/broadcast_message.rb
index a8b1db9c24e..05b4dfc366e 100644
--- a/app/models/broadcast_message.rb
+++ b/app/models/broadcast_message.rb
@@ -9,10 +9,12 @@
 #  alert_type :integer
 #  created_at :datetime         not null
 #  updated_at :datetime         not null
+#  color      :string(255)
+#  font       :string(255)
 #
 
 class BroadcastMessage < ActiveRecord::Base
-  attr_accessible :alert_type, :ends_at, :message, :starts_at
+  attr_accessible :alert_type, :color, :ends_at, :font, :message, :starts_at
 
   validates :message, presence: true
   validates :starts_at, presence: true
diff --git a/app/views/admin/broadcast_messages/index.html.haml b/app/views/admin/broadcast_messages/index.html.haml
index b16d82f4abf..8a0d5e4d760 100644
--- a/app/views/admin/broadcast_messages/index.html.haml
+++ b/app/views/admin/broadcast_messages/index.html.haml
@@ -2,7 +2,9 @@
   Broadcast Messages
 %p.light
   Broadcast messages are displayed for every user and can be used to notify users about scheduled maintenance, recent upgrades and more.
-%hr
+.broadcast-message-preview
+  %i.icon-bullhorn
+  %span Your message here
 
 = form_for [:admin, @broadcast_message] do |f|
   -if @broadcast_message.errors.any?
@@ -13,6 +15,17 @@
     = f.label :message
     .controls
       = f.text_area :message, class: "input-xxlarge", rows: 2, required: true
+      %div
+        = link_to '#', class: 'js-toggle-colors-link' do
+          Customize colors
+  .control-group.js-toggle-colors-container.hide
+    = f.label :color, "Background Color"
+    .controls
+      = f.text_field :color
+  .control-group.js-toggle-colors-container.hide
+    = f.label :font, "Font Color"
+    .controls
+      = f.text_field :font
   .control-group
     = f.label :starts_at
     .controls.datetime-controls
diff --git a/app/views/layouts/_broadcast.html.haml b/app/views/layouts/_broadcast.html.haml
index 4c4de743fdf..5794e3de338 100644
--- a/app/views/layouts/_broadcast.html.haml
+++ b/app/views/layouts/_broadcast.html.haml
@@ -1,4 +1,4 @@
 - if broadcast_message.present?
-  .broadcast-message
+  .broadcast-message{ style: broadcast_styling(broadcast_message) }
     %i.icon-bullhorn
     = broadcast_message.message