Customization and previewing of broadcast messages

CHANGELOG

@@ -23,6 +23,7 @@ v 6.4.0
   - API Cross-origin resource sharing
   - Show READMe link at project home page
   - Show repo size for projects in Admin area
+	- Add color custimization and previewing to broadcast messages
 
 v 6.3.0
   - API for adding gitlab-ci service

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')

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;
 

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

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

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

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

db/migrate/20131130165425_add_color_and_font_to_broadcast_messages.rb

@@ -0,0 +1,6 @@
+class AddColorAndFontToBroadcastMessages < ActiveRecord::Migration
+  def change
+    add_column :broadcast_messages, :color, :string
+    add_column :broadcast_messages, :font, :string
+  end
+end

db/schema.rb

@@ -20,6 +20,8 @@ ActiveRecord::Schema.define(version: 20131217102743) do
     t.integer  "alert_type"
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
+    t.string   "color"
+    t.string   "font"
   end
 
   create_table "deploy_keys_projects", force: true do |t|

features/admin/broadcast_messages.feature

@@ -11,3 +11,10 @@ Feature: Admin Broadcast Messages
     When submit form with new broadcast message
     Then I should be redirected to admin messages page
     And I should see newly created broadcast message
+
+  Scenario: Create a customized broadcast message
+    When submit form with new customized broadcast message
+    Then I should be redirected to admin messages page
+    And I should see newly created broadcast message
+    Then I visit dashboard page
+    And I should see a customized broadcast message

features/steps/admin/admin_broadcast_messages.rb

@@ -24,4 +24,18 @@ class Spinach::Features::AdminBroadcastMessages < Spinach::FeatureSteps
   step 'I should see newly created broadcast message' do
     page.should have_content 'Application update from 4:00 CST to 5:00 CST'
   end
+
+  step 'submit form with new customized broadcast message' do
+    fill_in 'broadcast_message_message', with: 'Application update from 4:00 CST to 5:00 CST'
+    click_link "Customize colors"
+    fill_in 'broadcast_message_color', with: '#f2dede'
+    fill_in 'broadcast_message_font', with: '#b94a48'
+    select '2018', from: "broadcast_message_ends_at_1i"
+    click_button "Add broadcast message"
+  end
+
+  step 'I should see a customized broadcast message' do
+    page.should have_content 'Application update from 4:00 CST to 5:00 CST'
+    page.should have_selector %(div[style="background-color:#f2dede;color:#b94a48"])
+  end
 end

spec/factories/broadcast_messages.rb

@@ -9,6 +9,8 @@
 #  alert_type :integer
 #  created_at :datetime         not null
 #  updated_at :datetime         not null
+#  color      :string(255)
+#  font       :string(255)
 #
 
 # Read about factories at https://github.com/thoughtbot/factory_girl
@@ -19,5 +21,7 @@ FactoryGirl.define do
     starts_at "2013-11-12 13:43:25"
     ends_at "2013-11-12 13:43:25"
     alert_type 1
+    color "#555"
+    font "#BBB"
   end
 end

spec/helpers/broadcast_messages_helper_spec.rb

@@ -0,0 +1,21 @@
+require 'spec_helper'
+
+describe BroadcastMessagesHelper do
+  describe 'broadcast_styling' do
+    let(:broadcast_message) { double(color: "", font: "") }
+
+    context "default style" do
+      it "should have no style" do
+        broadcast_styling(broadcast_message).should match('')
+      end
+    end
+
+    context "customiezd style" do
+      before { broadcast_message.stub(color: "#f2dede", font: "#b94a48") }
+
+      it "should have a customized style" do
+        broadcast_styling(broadcast_message).should match('background-color:#f2dede;color:#b94a48')
+      end
+    end
+  end
+end

spec/models/broadcast_message_spec.rb

@@ -9,6 +9,8 @@
 #  alert_type :integer
 #  created_at :datetime         not null
 #  updated_at :datetime         not null
+#  color      :string(255)
+#  font       :string(255)
 #
 
 require 'spec_helper'