Customization and previewing of broadcast messages

Andrew Tomaka
1 parent 566b4962
Showing 14 changed files with 106 additions and 3 deletions Show diff stats
CHANGELOG
app/assets/javascripts/admin.js.coffee
app/assets/stylesheets/common.scss
app/helpers/broadcast_messages_helper.rb
app/models/broadcast_message.rb
app/views/admin/broadcast_messages/index.html.haml
app/views/layouts/_broadcast.html.haml
db/migrate/20131130165425_add_color_and_font_to_broadcast_messages.rb
db/schema.rb
features/admin/broadcast_messages.feature
features/steps/admin/admin_broadcast_messages.rb
spec/factories/broadcast_messages.rb
spec/helpers/broadcast_messages_helper_spec.rb
spec/models/broadcast_message_spec.rb
@@ -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
@@ -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')
@@ -361,6 +361,11 @@ table {
   color: #BBB;
 }
+.broadcast-message-preview {
+  @extend .broadcast-message;
+  margin-bottom: 20px;
+}
+
 .ajax-users-select {
   width: 400px;
@@ -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
@@ -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
@@ -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
 - if broadcast_message.present?
-  .broadcast-message
+  .broadcast-message{ style: broadcast_styling(broadcast_message) }
     %i.icon-bullhorn
     = broadcast_message.message
@@ -0,0 +1,6 @@
+class AddColorAndFontToBroadcastMessages < ActiveRecord::Migration
+  def change
+    add_column :broadcast_messages, :color, :string
+    add_column :broadcast_messages, :font, :string
+  end
+end
@@ -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|
@@ -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
@@ -24,4 +24,18 @@ class Spinach::Features::AdminBroadcastMessages &lt; 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
@@ -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
@@ -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
@@ -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'
	@@ -23,6 +23,7 @@ v 6.4.0		@@ -23,6 +23,7 @@ v 6.4.0
23	- API Cross-origin resource sharing	23	- API Cross-origin resource sharing
24	- Show READMe link at project home page	24	- Show READMe link at project home page
25	- Show repo size for projects in Admin area	25	- Show repo size for projects in Admin area
		26	+ - Add color custimization and previewing to broadcast messages
26		27
27	v 6.3.0	28	v 6.3.0
28	- API for adding gitlab-ci service	29	- API for adding gitlab-ci service
	@@ -8,6 +8,23 @@ class Admin		@@ -8,6 +8,23 @@ class Admin
8	else	8	else
9	elems.removeAttr 'disabled'	9	elems.removeAttr 'disabled'
10		10
		11	+ $('body').on 'click', '.js-toggle-colors-link', (e) ->
		12	+ e.preventDefault()
		13	+ $('.js-toggle-colors-link').hide()
		14	+ $('.js-toggle-colors-container').show()
		15	+
		16	+ $('input#broadcast_message_color').on 'input', ->
		17	+ previewColor = $('input#broadcast_message_color').val()
		18	+ $('div.broadcast-message-preview').css('background-color', previewColor)
		19	+
		20	+ $('input#broadcast_message_font').on 'input', ->
		21	+ previewColor = $('input#broadcast_message_font').val()
		22	+ $('div.broadcast-message-preview').css('color', previewColor)
		23	+
		24	+ $('textarea#broadcast_message_message').on 'input', ->
		25	+ previewMessage = $('textarea#broadcast_message_message').val()
		26	+ $('div.broadcast-message-preview span').text(previewMessage)
		27	+
11	$('.log-tabs a').click (e) ->	28	$('.log-tabs a').click (e) ->
12	e.preventDefault()	29	e.preventDefault()
13	$(this).tab('show')	30	$(this).tab('show')
@@ -0,0 +1,9 @@		@@ -0,0 +1,9 @@
	1	+module BroadcastMessagesHelper
	2	+ def broadcast_styling(broadcast_message)
	3	+ if(broadcast_message.color \|\| broadcast_message.font)
	4	+ "background-color:#{broadcast_message.color};color:#{broadcast_message.font}"
	5	+ else
	6	+ ""
	7	+ end
	8	+ end
	9	+end
	@@ -2,7 +2,9 @@		@@ -2,7 +2,9 @@
2	Broadcast Messages	2	Broadcast Messages
3	%p.light	3	%p.light
4	Broadcast messages are displayed for every user and can be used to notify users about scheduled maintenance, recent upgrades and more.	4	Broadcast messages are displayed for every user and can be used to notify users about scheduled maintenance, recent upgrades and more.
5	-%hr	5	+.broadcast-message-preview
		6	+ %i.icon-bullhorn
		7	+ %span Your message here
6		8
7	= form_for [:admin, @broadcast_message] do \|f\|	9	= form_for [:admin, @broadcast_message] do \|f\|
8	-if @broadcast_message.errors.any?	10	-if @broadcast_message.errors.any?
	@@ -13,6 +15,17 @@		@@ -13,6 +15,17 @@
13	= f.label :message	15	= f.label :message
14	.controls	16	.controls
15	= f.text_area :message, class: "input-xxlarge", rows: 2, required: true	17	= f.text_area :message, class: "input-xxlarge", rows: 2, required: true
		18	+ %div
		19	+ = link_to '#', class: 'js-toggle-colors-link' do
		20	+ Customize colors
		21	+ .control-group.js-toggle-colors-container.hide
		22	+ = f.label :color, "Background Color"
		23	+ .controls
		24	+ = f.text_field :color
		25	+ .control-group.js-toggle-colors-container.hide
		26	+ = f.label :font, "Font Color"
		27	+ .controls
		28	+ = f.text_field :font
16	.control-group	29	.control-group
17	= f.label :starts_at	30	= f.label :starts_at
18	.controls.datetime-controls	31	.controls.datetime-controls
1	- if broadcast_message.present?	1	- if broadcast_message.present?
2	- .broadcast-message	2	+ .broadcast-message{ style: broadcast_styling(broadcast_message) }
3	%i.icon-bullhorn	3	%i.icon-bullhorn
4	= broadcast_message.message	4	= broadcast_message.message
@@ -0,0 +1,6 @@		@@ -0,0 +1,6 @@
	1	+class AddColorAndFontToBroadcastMessages < ActiveRecord::Migration
	2	+ def change
	3	+ add_column :broadcast_messages, :color, :string
	4	+ add_column :broadcast_messages, :font, :string
	5	+ end
	6	+end
	@@ -11,3 +11,10 @@ Feature: Admin Broadcast Messages		@@ -11,3 +11,10 @@ Feature: Admin Broadcast Messages
11	When submit form with new broadcast message	11	When submit form with new broadcast message
12	Then I should be redirected to admin messages page	12	Then I should be redirected to admin messages page
13	And I should see newly created broadcast message	13	And I should see newly created broadcast message
		14	+
		15	+ Scenario: Create a customized broadcast message
		16	+ When submit form with new customized broadcast message
		17	+ Then I should be redirected to admin messages page
		18	+ And I should see newly created broadcast message
		19	+ Then I visit dashboard page
		20	+ And I should see a customized broadcast message
	@@ -24,4 +24,18 @@ class Spinach::Features::AdminBroadcastMessages < Spinach::FeatureSteps		@@ -24,4 +24,18 @@ class Spinach::Features::AdminBroadcastMessages < Spinach::FeatureSteps
24	step 'I should see newly created broadcast message' do	24	step 'I should see newly created broadcast message' do
25	page.should have_content 'Application update from 4:00 CST to 5:00 CST'	25	page.should have_content 'Application update from 4:00 CST to 5:00 CST'
26	end	26	end
		27	+
		28	+ step 'submit form with new customized broadcast message' do
		29	+ fill_in 'broadcast_message_message', with: 'Application update from 4:00 CST to 5:00 CST'
		30	+ click_link "Customize colors"
		31	+ fill_in 'broadcast_message_color', with: '#f2dede'
		32	+ fill_in 'broadcast_message_font', with: '#b94a48'
		33	+ select '2018', from: "broadcast_message_ends_at_1i"
		34	+ click_button "Add broadcast message"
		35	+ end
		36	+
		37	+ step 'I should see a customized broadcast message' do
		38	+ page.should have_content 'Application update from 4:00 CST to 5:00 CST'
		39	+ page.should have_selector %(div[style="background-color:#f2dede;color:#b94a48"])
		40	+ end
27	end	41	end
@@ -0,0 +1,21 @@		@@ -0,0 +1,21 @@
	1	+require 'spec_helper'
	2	+
	3	+describe BroadcastMessagesHelper do
	4	+ describe 'broadcast_styling' do
	5	+ let(:broadcast_message) { double(color: "", font: "") }
	6	+
	7	+ context "default style" do
	8	+ it "should have no style" do
	9	+ broadcast_styling(broadcast_message).should match('')
	10	+ end
	11	+ end
	12	+
	13	+ context "customiezd style" do
	14	+ before { broadcast_message.stub(color: "#f2dede", font: "#b94a48") }
	15	+
	16	+ it "should have a customized style" do
	17	+ broadcast_styling(broadcast_message).should match('background-color:#f2dede;color:#b94a48')
	18	+ end
	19	+ end
	20	+ end
	21	+end