change announcement class to question

fix style
hidden add topic with student

Author: ngovanhuy

webapp/project/public/images/images.svg …ic/images/images-assignment-question.svgwebapp/project/public/images/images.svg renamed to webapp/project/public/images/images-assignment-question.svg webapp/project/public/images/images.svg renamed to webapp/project/public/images/images-assignment-question.svg

@@ -9,6 +9,9 @@ $screen-lg-min: 1200px;
 .announcements-left-menu {
   .title {
     font-size: 20px;
+    a{
+      color: #333;
+    }
   }
   .announcements-headline{
     margin: 5px 0;

webapp/project/src/components/announcement/announcement.css

@@ -4,6 +4,7 @@ import {Link} from 'react-router-dom'
 import ClassAddTopicModal from "./ClassAddTopicModal";
 import {classActions} from "../../../actions";
 import {classService} from "../../../services";
+import {userUtils} from "../../../utils";
 
 class ClassTopics extends Component {
     constructor() {
@@ -53,7 +54,8 @@ class ClassTopics extends Component {
     }
 
     render() {
-        const {topics, classId, currentTopic} = this.props
+        const {topics, classId, currentTopic, currentUser} = this.props
+        const isTeacher = userUtils.checkIsTeacher(currentUser)
         return (
             <div className="class-topics has-border-radius clearfix">
                 <h3>Topics</h3>
@@ -62,15 +64,18 @@ class ClassTopics extends Component {
                     topics.map((topic, index) =>
                         this.renderTopic(topic, index, classId, currentTopic))
                 }
-                <div className="class-add-topic clearfix">
-                    <button className="btn btn-white pull-right" onClick={this.openModalAddTopic}>
-                        Add topic
-                    </button>
-                    <ClassAddTopicModal classId={classId}
-                                        modalIsOpen={this.state.modalAddTopic}
-                                        closeModal={this.closeModalAddTopic}
-                                        onSubmit={this.handleAddTopic}/>
-                </div>
+                {
+                    isTeacher &&
+                    <div className="class-add-topic clearfix">
+                        <button className="btn btn-white pull-right" onClick={this.openModalAddTopic}>
+                            Add topic
+                        </button>
+                        <ClassAddTopicModal classId={classId}
+                                            modalIsOpen={this.state.modalAddTopic}
+                                            closeModal={this.closeModalAddTopic}
+                                            onSubmit={this.handleAddTopic}/>
+                    </div>
+                }
             </div>
         )
     }

webapp/project/src/components/announcement/announcement.css.map

@@ -62,10 +62,14 @@ class Post extends Component {
                 <div className="post-context clearfix">
                     <div className="post-context-left">
                         {
-                            post.isAssigmentPost &&
+                            post.isAssigmentPost ?
                                 <div className="post-is-assignment">
                                     <div className="post-assignment-image"></div>
                                 </div>
+                                :
+                                <div className="post-is-question">
+                                    <div className="post-question-image"></div>
+                                </div>
                         }
                         <img className="post-user-profile-picture img-circle"
                              src={(post && post.userCreate) && fileUtils.renderFileSource(post.userCreate.profileImageID, userUtils.renderSourceProfilePictureDefault(post.userCreate.gender))}></img>

webapp/project/src/components/announcement/announcement.scss

@@ -205,6 +205,37 @@ ul.nav {
     .post-context-left {
       float: left;
       display: flex;
+      .post-is-question {
+        -webkit-align-items: center;
+        align-items: center;
+        display: -webkit-box;
+        display: -moz-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-shrink: 0;
+        flex-shrink: 0;
+        -webkit-justify-content: center;
+        justify-content: center;
+        background-color: $main-color;
+        height: 5rem;
+        width: 5rem;
+        margin-right: 15px;
+        @media (max-width: $screen-xs-max) {
+          height: 3rem;
+          width: 3rem;
+          margin-right: 5px;
+        }
+        .post-question-image {
+          background-position: -7.5rem -119rem;
+          background-image: url('/images/images-assignment-question.svg');
+          background-repeat: no-repeat;
+          background-size: 10.5rem, 121.4rem;
+          flex-shrink: 0;
+          height: 2.4rem;
+          width: 2.4rem;
+        }
+      }
       .post-is-assignment {
         -webkit-align-items: center;
         align-items: center;
@@ -228,7 +259,7 @@ ul.nav {
         }
         .post-assignment-image {
           background-position: -7.5rem -88.1rem;
-          background-image: url('/images/images.svg');
+          background-image: url('/images/images-assignment-question.svg');
           background-repeat: no-repeat;
           background-size: 10.5rem, 121.4rem;
           flex-shrink: 0;
@@ -359,9 +390,7 @@ ul.nav {
       }
       .form-control {
         height: 35px;
-        @media (max-width: $screen-md-max) {
-          width: 100%;
-        }
+        width: 100%;
       }
       .fa {
         font-size: 16px;

webapp/project/src/components/class/views/ClassTopics.js

@@ -59,7 +59,7 @@ class NewPost extends Component {
                             <Tab>
                                 <div className="new-post-headline-content">
                                     <i className="fa fa-edit"></i>
-                                    <span>Announcement</span>
+                                    <span>Question</span>
                                 </div>
                             </Tab>
                             {