add announcement styles

Author: ehzhang

client/app.js

@@ -4,4 +4,5 @@ Settings = new Meteor.Collection("settings");
 
 Meteor.subscribe("userData");
 Meteor.subscribe("activeTickets");
-Meteor.subscribe("allAnnouncements");
+Meteor.subscribe("allAnnouncements");
+Meteor.subscribe("mentorsOnline");

client/components/announcement/announcement.html

@@ -1,7 +1,7 @@
 <template name="announcement">
   {{#if announcement}}
     {{#with announcement}}
-    <div class="ui info message">
+    <div class="ui {{type}} message">
       <div class="header">
         {{header}}
       </div>

client/components/announcementsTable/announcementsTable.html

@@ -1,6 +1,6 @@
 <template name="announcementsTable">
   {{#each announcements}}
-    <div class="ui message">
+    <div class="ui {{type}} message">
       <i class="close red link icon"></i>
       <div class="header">
         {{header}}

client/components/announcer/announcer.html

@@ -10,6 +10,40 @@ <h4 class="ui header">
       <div class="field">
         <textarea id="a-content" name="content" placeholder="Announcement content" required></textarea>
       </div>
+
+      <div class="grouped inline fields">
+        <div class="field">
+          <div class="ui radio checkbox">
+            <input type="radio" value="default" name="type" checked="checked">
+            <label>Default</label>
+          </div>
+        </div>
+        <div class="field">
+          <div class="ui radio checkbox">
+            <input type="radio" value="info" name="type">
+            <label>Information</label>
+          </div>
+        </div>
+        <div class="field">
+          <div class="ui radio checkbox">
+            <input type="radio" value="warning" name="type">
+            <label>Warning</label>
+          </div>
+        </div>
+        <div class="field">
+          <div class="ui radio checkbox">
+            <input type="radio" value="success" name="type">
+            <label>Success</label>
+          </div>
+        </div>
+        <div class="field">
+          <div class="ui radio checkbox">
+            <input type="radio" value="error" name="type">
+            <label>Danger</label>
+          </div>
+        </div>
+      </div>
+
       <div class="field">
         <button class="submit disabled ui blue button">
           Announce

client/components/announcer/announcer.js

@@ -1,3 +1,7 @@
+Template.announcer.rendered = function(){
+  $(this.findAll('.ui.checkbox')).checkbox();
+};
+
 Template.announcer.events({
   'click .submit.button': function(){
     createAnnouncement();
@@ -20,21 +24,27 @@ Template.announcer.events({
 function createAnnouncement(){
   if(isValid()){
     var a = getAnnouncement();
-    Meteor.call("createAnnouncement", a.header, a.content);
+    Meteor.call("createAnnouncement", a.header, a.content, a.type);
     clearFields();
   }
 }
 
 function getAnnouncement(){
+  var form = $('.ui.form input, .ui.form textarea')
+      .serializeArray()
+      .reduce(function(obj, item) {
+        obj[item.name] = item.value;
+        return obj;
+      }, {});
   return {
-    header: $('#a-header').val(),
-    content: $('#a-content').val()
+    header: form.header,
+    content: form.content,
+    type: form.type
   }
 }
 
 function clearFields(){
-  $('#a-header').val("");
-  $('#a-content').val("");
+  $('.ui.form input, .ui.form textarea').val("");
 }
 
 function isValid(){

client/components/login/login.html

@@ -1,4 +1,5 @@
 <template name="login">
+
   {{#if enabled.github}}
   <button id="login-github" class="github push button"> Login with Github </button>
   <br>

client/views/admin/admin.js

@@ -1,4 +1,4 @@
-Session.set('admin', 'announce');
+Session.set('admin', 'settings');
 
 Template.admin.helpers({
   pageIs: function(page){

client/views/settings/settings.html

@@ -1,5 +1,10 @@
 <template name="settings">
-  <div class="ui segment settings">
-    <h2 class="ui dividing header">Settings</h2>
+  <div class="ui top attached tertiary header segment">
+    <strong>
+      Branding
+    </strong>
+  </div>
+  <div class="ui bottom attached segment">
+
   </div>
 </template>