update by joshua for css

app/assets/stylesheets/tickets/_common.scss

@@ -1,9 +1,16 @@
 @charset "utf-8";
 @import 'ticket_variables';
+
 #filter {
   display: none;
 }
 
+.ticket-container {
+  max-width: $main-width;
+  width: 96%;
+  margin: auto;
+}
+
 .img-avatar {
   width: 50px;
   height: 50px;
@@ -59,9 +66,19 @@
   font-weight: 100;
   display: inline-block;
 }
+
 .label-primary {
   background-color: $primary;
 }
+
+.label-second {
+  background-color: $second;
+}
+
+.label-info {
+  background-color: $green;
+}
+
 .label-open {
   background-color: $green;
 }
@@ -69,6 +86,93 @@
 .label-commenced {
   background-color: $purple;
 }
+
 .label-danger {
   background-color: $red;
 }
+
+.btn {
+  padding: 6px 1rem;
+  font-family: $main-font;
+  font-size: 0.8125rem;
+  text-shadow: none;
+  letter-spacing: 0;
+  border: 0;
+  border-radius: $t-round;
+  background-color: $primary;
+  background-image: none;
+  &.btn-primary {
+    background-color: $second;
+    &:hover {
+      background-color: darken($second, 5%);
+    }
+  }
+  &.btn-normal {
+    color: $white;
+    background-color: lighten($gray, 8%);
+    &:hover {
+      background-color: $second;
+    }
+  }
+}
+
+
+
+// Tool Tip
+.tool-tip-parent {
+    position: relative;
+
+    &:hover {
+        .tool-tip {
+            display: block;
+        }
+    }
+}
+
+.tool-tip {
+    padding: 6px 0.75rem;
+    border-radius: $t-round;
+    color: $white;
+    background: $black;
+    position: absolute;
+    left: 0;
+    bottom: 120%;
+    z-index: 150;
+    display: none;
+    white-space: nowrap;
+
+    &:after {
+        border: 5px solid transparent;
+        border-top-color: $black;
+        content: "";
+        position: absolute;
+        left: 10px;
+        bottom: -8px;
+    }
+
+    &.right {
+        left: auto;
+        right: 0;
+
+        &:after {
+            left: auto;
+            right: 10px;
+        }
+    }
+
+    &.bottom {
+        top: 100%;
+        bottom: auto;
+
+        &:after {
+            top: -10px;
+            bottom: auto;
+            border-top-color: transparent;
+            border-bottom-color: rgba(0, 0, 0, 0.85);
+        }
+    }
+
+    &.nowrap {
+        white-space: nowrap;
+    }
+}

app/assets/stylesheets/tickets/_ticket_variables.scss

@@ -23,6 +23,8 @@ $light-gray: #edf0f1;
 $white: #fff;
 $black: #000;
 
+$subtle-black: #5a5a5a;
+
 // units
 $main-width: 1000px;
 $t-round: 0.125rem;

app/assets/stylesheets/tickets/ticket_index.scss

@@ -1,7 +1,8 @@
 @charset "utf-8";
-@import 'ticket_variables';
+
-@import 'common';
+@import "ticket_variables";
-@import 'classes';
+@import "common";
+@import "classes";
 
 body {
   background-color: $subtle-gray;
@@ -10,29 +11,32 @@ body {
 .ticket-container {
   a {
     color: $primary;
+
     &:hover {
       color: lighten($primary, 10%);
     }
   }
 }
 
-.ticket-container,
-.ticket-search-wrap {
-    max-width: $main-width;
-    width: 96%;
-    margin: auto;
-}
 
 .ticket-search-wrap {
   font-family: $main-font;
   color: $gray;
+
   .ticket-search-option {
+    outline: none;
     width: 15%;
+    padding-left: 20px;
     height: 50px;
     border: none;
     border-radius: $t-round;
     font-size: 18px;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    background: $white url(/assets/tickets/ticket-select-arrow.png) 90% 50% no-repeat;
   }
+
   .ticket-search-field {
     color: $gray;
     font-size: 18px;
@@ -44,6 +48,10 @@ body {
     box-shadow: none;
     border: none;
     border-radius: $t-round;
+    &:focus {
+        box-shadow: none;
+        border: 0;
+    }
   }
 }
 
@@ -57,9 +65,11 @@ body {
   padding: 16px 14px;
   margin-bottom: 0;
   font-family: $main-font;
+
   &.type--ugrent {
     background-color: $red;
   }
+
   &.type--normal {
     background-color: $second;
   }
@@ -91,9 +101,11 @@ body {
   padding: 16px 20px;
   border-bottom: 1px solid $light-gray;
   font-family: $main-font;
+
   &:hover {
     background-color: $light-blue;
   }
+
   .ticket-site-link {
     margin-left: 8px;
     padding: 2px 4px;
@@ -101,6 +113,7 @@ body {
     color: $white;
     background-color: $second;
     border-radius: $t-strong-round;
+
     &:hover {
       color: $white;
       text-decoration: none;
@@ -121,17 +134,20 @@ body {
   position: absolute;
   right: 2rem;
   top: 20px;
+
   &:hover {
     .ticket-section-view-all-icon {
       top: 0;
     }
   }
+
   .ticket-section-view-all-btn {
     overflow: hidden;
     display: block;
     font-size: 12px;
     color: $gray;
     font-family: $main-font;
+
     &:hover {
       text-decoration: none;
     }
@@ -146,14 +162,21 @@ body {
   transition: $t-fast all;
 }
 
-
 // Search result
 .ticket-search-result {
   background-color: $second;
   padding: 16px 14px;
   color: $white;
   font-size: 24px;
+
   a {
     color: $white;
+    &:hover  {
+      color: $white;
+      text-decoration: none;
+    }
+    &:active {
+      text-decoration: none;
+    }
   }
 }

app/assets/stylesheets/tickets/ticket_show.scss

@@ -1,7 +1,7 @@
 @charset "utf-8";
-@import 'ticket_variables';
+@import "ticket_variables";
-@import 'common';
+@import "common";
-@import 'classes';
+@import "classes";
 #main-wrap .wrap-inner {
   padding-top: 20px !important;
 }
@@ -43,6 +43,15 @@
   margin: 0 0;
 }
 
+.ticket-home-btn-wrap {
+  margin-bottom: 10px;
+}
+
+.ticket-home-btn-icon,
+.ticket-external-link-icon {
+  margin-right: 8px;
+}
+
 .ticket-refresh-btn,
 .ticket-create-btn {
   margin-top: -14px;
@@ -180,7 +189,7 @@
   font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
   -webkit-transition: .15s all ease-in-out;
   transition: .15s all ease-in-out;
-    -webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .1);
+  -webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
   margin: 0;
 }
 
@@ -188,8 +197,8 @@
   left: 100px;
   padding: 20px 2rem;
   color: $white;
-    background-color: rgba($black, .85);
+  background-color: rgba($black, 0.85);
-    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .1);
+  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
   &.in {
     top: 60px;
   }
@@ -238,6 +247,8 @@
   -moz-border-radius-topright: 4px;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
+  -webkit-transition: $t-normal all;
+  transition: $t-normal all;
   &.active {
     background-color: $red;
   }
@@ -251,6 +262,16 @@
   }
 }
 
+.ticket-heading-avatar {
+  line-height: 1.3;
+  display: inline-block;
+}
+
+.ticket-heading-avatar-name {
+  font-size: 12px;
+  font-family: $main-font;
+}
+
 .ticket-meta-wrap {
   background-color: $second;
   padding: 12px 1rem;
@@ -258,14 +279,15 @@
     color: #EDF0F1;
     float: left;
     font-size: 0.8125rem;
-        @media screen and(max-width: 39.375rem) {
+    // 700px
+    @media screen and (max-width: 43.75rem) {
       margin-bottom: 10px;
     }
   }
   .ticket-state {
     float: right;
     > * {
-            // vertical-align: top;
+      vertical-align: top;
     }
   }
   .ticket-urgent-btn {
@@ -277,14 +299,18 @@
       color: $white;
     }
   }
-    // 630px
+  // 700px
-    @media screen and (max-width: 39.375rem) {
+  @media screen and (max-width: 43.75rem) {
     > div[class^="ticket-"] {
       float: none;
     }
   }
 }
 
+.ticket-internal-wrap {
+    text-align: right;
+}
+
 .onoffswitch {
   position: relative;
   width: 70px;
@@ -292,6 +318,24 @@
   -moz-user-select: none;
   -ms-user-select: none;
   display: inline-block;
+  &:hover {
+    .ticket-tooltip-wrap {
+      display: block;
+    }
+  }
+}
+
+.ticket-tooltip-wrap {
+  display: none;
+  position: absolute;
+  left: 0;
+  top: -130%;
+  background-color: rgba($black, 0.8);
+  color: $white;
+  z-index: 1000;
+  padding: 6px 0.625rem;
+  white-space: nowrap;
+  font-family: $main-font;
 }
 
 .onoffswitch-checkbox {
@@ -302,7 +346,7 @@
   display: block;
   overflow: hidden;
   cursor: pointer;
-    border-radius: 20px;
+  border-radius: 0.125rem;
   margin-bottom: 0;
 }
 
@@ -318,9 +362,9 @@
   display: block;
   float: left;
   width: 50%;
-    height: 30px;
+  height: 28px;
   padding: 0;
-    line-height: 30px;
+  line-height: 28px;
   font-size: 12px;
   color: white;
   font-family: $main-font;
@@ -337,7 +381,7 @@
 .onoffswitch-inner:after {
   content: "OFF";
   padding-right: 10px;
-    background-color: $gray;
+  background-color: $subtle-black;
   color: $white;
   text-align: right;
 }
@@ -346,20 +390,22 @@
   display: block;
   width: 18px;
   height: 18px;
-    margin: 6px;
+  margin: 5px 6px;
   background: $white;
   position: absolute;
   top: 0;
   bottom: 0;
   right: 40px;
-    border-radius: 50%;
+  border-radius: 0.125rem;
   transition: all .15s ease-in 0s;
 }
 
+.onoffswitch-checkbox.active + .onoffswitch-label .onoffswitch-inner,
 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
   margin-left: 0;
 }
 
+.onoffswitch-checkbox.active + .onoffswitch-label .onoffswitch-switch,
 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
   right: 0px;
 }
@@ -389,6 +435,7 @@
     }
     li {
       > a {
+        font-family: $main-font;
         &:hover {
           background-color: $second;
           background-image: none;
@@ -411,12 +458,12 @@
 }
 
 .ticket-dropdown-icon {
-    color: rgba($white, .5);
+  color: rgba($white, 0.5);
   font-size: 1.2rem;
   text-align: center;
   padding: 2px 0.3125rem;
   border-radius: 0.25rem;
-    border: 3px solid rgba($white, .5);
+  border: 3px solid rgba($white, 0.5);
   transition: .2s all;
   &:hover {
     color: $white;
@@ -433,6 +480,7 @@
   text-transform: uppercase;
   color: $white;
   &:hover {
+    text-decoration: none;
     color: $white;
   }
 }
@@ -478,8 +526,8 @@
 }
 
 .ticket-query-wrap {
-    -webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .1);
+  -webkit-box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
-    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .1);
+  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
   background-color: $white;
   padding: 10px 1.875rem 30px 1.875rem;
   margin-bottom: 30px;
@@ -517,7 +565,7 @@
   color: $white;
   font-size: 0.9375rem;
   margin: 0 0 20px;
-    cursor: pointer;
+  // cursor: pointer;
   -webkit-transition: .15s all;
   transition: .15s all;
   &.collapsed {
@@ -578,6 +626,19 @@
   border-bottom: 1px dotted darken($light-gray, 5%);
 }
 
+.ticket-response-delete-wrap {
+  float: right;
+}
+
+.ticket-response-delete {
+  font-family: $main-font;
+  color: $gray;
+  &:hover {
+    text-decoration: none;
+    color: $second;
+  }
+}
+
 .ticket-response-content {
   border: 1px solid lighten($gray, 40%);
   padding: 15px 1.5rem;
@@ -585,6 +646,32 @@
   font-size: 0.9375rem;
   line-height: 1.6;
   overflow: auto;
+  &.in-house {
+    background-color: lighten($light-gray, 3%);
+  }
+}
+
+.ticket-internal-response-wrap {
+  margin-top: 20px;
+}
+
+.ticket-internal-response {
+  display: inline-block;
+  vertical-align: top;
+  margin: 0 5px 10px 0;
+  height: 44px;
+  line-height: 44px;
+  background: $gray;
+  color: $white;
+  padding: 0 0.625rem;
+  font-family: $main-font;
+  font-size: 14px;
+  border-radius: $t-round;
+}
+
+.ticket-tag-member {
+  display: inline-block;
+  vertical-align: top;
 }
 
 .ticket-inhouse-heading {
@@ -597,39 +684,23 @@
   .select2-container-multi {
     margin-right: 0.9375rem;
     min-width: 200px;
-
     .select2-choices {
-            padding: 0;
       border-radius: $t-round;
-
+      background-image: none;
       .select2-search-field {
         input {
           padding: 10px 5px;
         }
       }
     }
-
     .select2-search-choice {
       padding: 10px 1.75rem 10px 0.7rem;
       border-color: lighten($gray, 20%);
       background: $white;
-
-            > div {
-                &:before {
-                    content: "\F007";
-                    font-family: FontAwesome;
-                    display: inline-block;
-                    font-size: 0.9375rem;
-                    color: $second;
-                    margin: 0 0.5rem 0 0;
     }
-            }
-        }
-
     .select2-search-choice-close {
       right: 15px;
       left: auto;
-
       &:before {
         content: "\f057";
         font-family: FontAwesome;
@@ -640,7 +711,6 @@
         font-size: 0.9375rem;
         color: $gray;
       }
-
       &:hover {
         &:before {
           color: $red;
@@ -656,7 +726,6 @@
   }
 }
 
-
 .fileupload {
   .thumbnail {
     max-width: 60%;
@@ -669,6 +738,12 @@
   padding: 10px 1.8rem 20px;
 }
 
+.ticket-submit-btn {
+  font-size: 14px;
+  padding: 8px 1rem;
+  font-family: FontAwesome, Roboto;
+}
+
 // Go back top
 .go-back-top {
   background: $gray;
@@ -712,7 +787,23 @@
 }
 
 .scroll-element {
-    border: 5px solid #489ad8;
+  border: 20px solid #fff36f;
-    -webkit-transition: border-color 1s linear;
+  padding: 0.625rem;
-    transition: border-color 1s linear;
+  border-radius: 0.25rem;
+  -webkit-transition: border-color $t-normal linear;
+  transition: border-color $t-normal linear;
+}
+
+// harry css starts here
+.t-avatar {
+  -webkit-filter: grayscale(100%);
+  filter: grayscale(100%);
+  opacity: 0.6;
+  -webkit-transition: all 1s linear;
+  transition: all 1s linear;
+  &.read {
+    -webkit-filter: grayscale(0);
+    filter: grayscale(0);
+    opacity: 1;
+  }
 }

app/controllers/admin/tickets_controller.rb

@@ -197,6 +197,18 @@ class Admin::TicketsController < OrbitAdminController
     end
   end
 
+  def mark_response_read
+    response = TicketQueryResponse.find(params[:response_id]) rescue nil
+    if !response.nil?
+      response.read_by << current_user.id.to_s if !response.read_by.include?(current_user.id.to_s)
+      response.save
+      data = {"success" => true, "user_id" => current_user.id.to_s}
+    else
+      data = {"success" => false}
+    end
+    render :json => data.to_json
+  end
+
   def tickets_by_category
     @table_fields  = [:ticket_number, :site_name, :subject, :created_at, :tags, :status, :taken_by, :urgent]
     statuses = params["type"] == "history" ? ["closed"] : ["open","commenced"]

app/models/ticket_query_response.rb

@@ -6,6 +6,7 @@ class TicketQueryResponse
 	field :internal_response, type: Boolean, :default => false
 	field :response_by, type: BSON::ObjectId
 	field :user_tags, type: Array, default: []
+	field :read_by, type: Array, default: []
 
 	scope :for_clients, ->{ where(:internal_response.in => [nil, false]) }
 

app/views/admin/tickets/_query.html.erb

@@ -14,11 +14,14 @@
           <div id="form_container" class="ticket-editor">
             <form method="post" action="/admin/ticket/submit_response" id="reopen-form" for="query-response">
               <textarea class="ckeditor" name="ticket_query_response" data-fv-validation="required;" data-fv-messages="Cannot be empty;"></textarea>
+              <div class="ticket-internal-response-wrap">
+                <div class="ticket-internal-response">
                   <input type="hidden" name="ticket_query_id" value="<%= query.id.to_s %>" />
                   <input type="checkbox" name="internal_response" value="1">
                   <span class="ticket-internal-response">Internal Response</span>
+                </div>
                 <div class="ticket-tag-member">
-                <h4 class="ticket-tag-mebmer-heading">Tag member</h4>
+                  <!-- <h4 class="ticket-tag-mebmer-heading">Tag member</h4> -->
                   <select class="member_tags" multiple="multiple" name="user_tags[]">
                       <% @members.each do |member| %>
                       <%
@@ -31,8 +34,10 @@
                       <% end %>
                   </select>
                 </div>
+              </div>
+
             </form>
-            <input type="submit" id="reopen-form-submit" class="btn btn-primary" value="Submit" />
+            <input type="submit" id="reopen-form-submit" class="ticket-submit-btn btn btn-primary" value="&#xf1d8;  Submit" />
           </div>
           <div id="ticket_loader" style="display:none;">
             <%= image_tag("preloader.gif", size: "50")  %>

app/views/admin/tickets/_response.html.erb

@@ -14,10 +14,15 @@
     <div class="ticket-response-created-date">
       <% dt = DateTime.parse(response.created_at.to_s) %> <%= dt.strftime("%d %B %Y - %H:%M") %>
     </div>
-    <h4 class="ticket-inhouse-heading">
+    <div class="ticket-response-delete-wrap">
-      <%= response.internal_response ? "Inhouse" : "" %>
+      <a class="ticket-response-delete" href="#">
-    </h4>
+        <i class="ticket-response-delete-icon fa fa-trash"></i>
-    <div class="ticket-inhouse-wrap">
+        Delete
+      </a>
+    </div>
+
+    <div class="ticket-internal-comment-wrap">
+      <div class="ticket-internal-wrap">
         <% response.user_tags.each do |u| 
           user = User.find(u) rescue nil
           if !user.nil?
@@ -27,11 +32,15 @@
               avatar = user.member_profile.avatar.thumb.url
             end
           end %>
-        <img class="t-avatar" src="<%= avatar %>">
+          <div class="ticket-tag-member tool-tip-parent">
+            <img class="t-avatar <%= response.read_by.include?(user.id.to_s) ? "read" : "" %>" src="<%= avatar %>" data-avatar-id="<%= user.id.to_s %>">
+            <span class="ticket-tag-member-name tool-tip right"><%= user.name %></span>
+          </div>
         <% end %>
       </div>
     </div>
-  <div class="ticket-response-content">
+  </div>
+  <div class="ticket-response-content <%= response.internal_response ? "in-house" : "" %>">
     <%= response.response.html_safe %>
   </div>
 </div>

app/views/admin/tickets/_search_form.html.erb

@@ -1,5 +1,4 @@
-<div class="search-wrap ticket-search-wrap">
+<div class="search-wrap ticket-search-wrap ticket-container">
-  <!-- <a href="#" id="serach-btn"><i class="icons-search"></i></a> -->
   <h3 class="ticket-search-heading">
     <i class="ticket-search-icon fa fa-search"></i>
     Search tickets

app/views/admin/tickets/_ticket.html.erb

@@ -19,7 +19,10 @@
   </a>
 	<div class="ticket-label pull-right">
   <% if ticket.is_urgent? %>
-    <span class="label label-danger">Urgent</span>
+    <span class="label label-danger">
+      <i class="fa fa-fire"></i>
+      Urgent
+    </span>
   <% end %>
 	 <span class="label <%= badge_class %>">
     <i class="fa fa-eye"></i>

app/views/admin/tickets/index.html.erb

@@ -11,7 +11,7 @@
       Urgent Tickets
     </h3>
     <% @categories.each do |category| %>
-      <% if !@urgent_tickets[category].nil? %>
+      <% if !@urgent_tickets[category].blank? %>
       <div class="ticket-section-container t-strong-round">
         <h4 class="ticket-category-title">
           <i class="ticket-category-title-icon fa fa-tags"></i>

app/views/admin/tickets/search.html.erb

@@ -8,6 +8,7 @@
 <% @categories.each do |category| %>
 	<div class="ticket-section-container">
 		<h4 class="ticket-category-title">
+            <i class="ticket-category-title-icon fa fa-tags"></i>
             <%= category.title %>
         </h4>
    	 	<%= render :partial => "ticket", :collection => @tickets[category] %>

app/views/admin/tickets/show.html.erb

@@ -18,17 +18,32 @@
     badge_class = "t-status-processing"
   end
 %>
-  <ul class="ticket-breadcrumb breadcrumb">
+  <div class="ticket-home-btn-wrap ticket-container">
-    <li class="ticket-breadcrumb-item"><a href="/admin/tickets"><i class="icons-arrow-left"></i> Dashboard</a> <span class="divider">/</span></li>
+    <a class="btn btn-normal" href="/admin/tickets">
-    <li class="ticket-breadcrumb-itme ticket-breadcrumb-active active"><%= @ticket.subject %></li>
+      <i class="ticket-home-btn-icon fa fa-home"></i>
-  </ul>
+      Back to Dashboard
+    </a>
+    <a href="http://<%= @ticket.registered_site.site_domain %>" target="_blank" class="btn btn-normal">
+      <i class="ticket-external-link-icon fa fa-external-link"></i>
+        <%= @ticket.registered_site.title %>
+    </a>
+  </div>
   <div class="ticket-wrap">
     <div class="ticket-header">
      <div id="ticket-urgent-marker" class="ticket-heading-wrap <%= "active" if @ticket.is_urgent? %>" >
        <h3 class="ticket-heading">#<%= @ticket.uid %> - <%= @ticket.subject[0..50] %>
        <% if !@ticket.taken_by.nil? %>
         <% user = User.find(@ticket.taken_by) %>
-        <img src="<%= user.member_profile.avatar.thumb.url if !user.member_profile.avatar.nil? %>" style="border-radius: 50%;height: 30px;margin-right: 0.3125rem;width: 30px;" />
+          <% if user.member_profile.avatar.nil? || user.member_profile.avatar.thumb.url == "thumb_person.png"
+            avatar = "/assets/thumb_person.png"
+          else
+            avatar = user.member_profile.avatar.thumb.url
+          end
+        %>
+        <div class="ticket-heading-avatar tool-tip-parent">
+          <img class="t-avatar" src="<%= avatar %>">
+          <span class="ticket-heading-avatar-name tool-tip"><%= user.name %></span>
+        </div>
         <% end %>
        </h3>
        <div class="ticket-action">
@@ -79,7 +94,7 @@
                <% end %>
              <% end %>
              <li>
-                <a class="ticket-close t-item" data-method="delete" data-confirm="Are you sure?" href="/admin/tickets/<%= @ticket.id.to_s %>" data-ticket-id="<%= @ticket.id.to_s %>">
+                <a class="ticket-delete t-item" data-method="delete" data-confirm="Are you sure?" href="/admin/tickets/<%= @ticket.id.to_s %>" data-ticket-id="<%= @ticket.id.to_s %>">
                      <i class="fa fa-trash-o"></i>
                    Delete
                 </a>
@@ -101,17 +116,18 @@
            </div>
            <div class="ticket-state">
             <% if @ticket.status != "closed" %>
-             <a href="/admin/tickets/<%= @ticket.id.to_s %>/toggleurgent" class="ticket-urgent-btn t-btn t-btn-danger t-uppercase <%= "active" if @ticket.is_urgent? %>" id="toggle-urgent">
+             <!-- <a href="/admin/tickets/<%= @ticket.id.to_s %>/toggleurgent" class="ticket-urgent-btn t-btn t-btn-danger t-uppercase <%= "active" if @ticket.is_urgent? %>" id="toggle-urgent"> -->
-              <i class="fa fa-fire"></i>
+              <!-- <i class="fa fa-fire"></i>
-              Urgent
+              Urgent -->
-<!--               <div class="onoffswitch">
+              <div class="onoffswitch ticket-toggle-urgent" title="">
-                  <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
+                  <span class="ticket-tooltip-wrap"></span>
+                  <input type="checkbox" name="onoffswitch"  class="onoffswitch-checkbox <%= "active" if @ticket.is_urgent? %>" id="myonoffswitch" data-url="/admin/tickets/<%= @ticket.id.to_s %>/toggleurgent">
                   <label class="onoffswitch-label" for="myonoffswitch">
                       <span class="onoffswitch-inner"></span>
                       <span class="onoffswitch-switch"></span>
                   </label>
               </div>
- -->            </a>
+             <!-- </a> -->
             <% end %>
              <span class="ticket-status t-status <%= badge_class %>">
                <i class="fa fa-eye"></i>
@@ -205,8 +221,18 @@ $(document).ready(function(){
         el = $("div[data-scroll-id=" + item + "]");
       $('html, body').scrollTop(el.offset().top - 100);
       el.addClass("scroll-element");
+      $.ajax({
+          url : "/admin/comments/read",
+          dataType : "json",
+          type : "post",
+          data : {"response_id" : item.split("_")[1]}
+      }).done(function(data){
+        if(data.success){
+          el.find("img[data-avatar-id="+ data.user_id +"]").addClass("read");
+        }
+      })
       el.one("mouseover",function(){
-        el.css( "border-color", "rgba(0,0,0,0)");
+        el.css('border-color', 'transparent');
       })
   }
 
@@ -225,6 +251,7 @@ $(document).ready(function(){
       },
       placeholder: "Add Members"
     });
+
 })
   $(".reopen-back-btn").on("click",function(){
     for (instance in CKEDITOR.instances) {
@@ -237,7 +264,22 @@ $(document).ready(function(){
     }else{
       return false;
     }
-  })
+  });
+
+
+  function switchTooltip() {
+    var $switch = $('.onoffswitch');
+    var $input = $switch.children('input');
+    var $tooltip = $switch.find('.ticket-tooltip-wrap');
+    var activeCls = 'active';
+
+      if ($input.hasClass(activeCls)) {
+        $tooltip.text('This ticket is marked urgent, click to unmark');
+      } else {
+        $tooltip.text('Click to mark this ticket urgent');
+      }
+
+  }
 
   $(".ticket-category-select-option").on("click",function(){
     var el = $(this);
@@ -245,34 +287,38 @@ $(document).ready(function(){
       window.location.href = window.location.pathname + "/changecategory?category_id=" + el.data("category-id");
     }
     return false;
-  })
+  });
-  $("#toggle-urgent").on("click",function(){
+
-    var el = $(this);
+  switchTooltip();
-    var mark_urgent = !el.hasClass("active");
+
+  $("#myonoffswitch").on("click",function(){
+    var $el = $(this);
+    var mark_urgent = !$el.hasClass("active");
     $.ajax({
-      url : el.attr("href"),
+      url : $el.attr("data-url"),
-      type : "post",
+      type : "POST",
-      data : {"mark_urgent" : mark_urgent},
+      data : {"mark_urgent": mark_urgent},
       dataType : "json"
     }).done(function(response){
       if(response.success){
         if(mark_urgent){
           if(response.can_make_urgent){
             $("#ticket-urgent-marker").addClass('active');
-            el.addClass("active");
+            $el.addClass("active");
           }else{
             alert("Urgent quota for this category is already over.");
           }
         }else{
           $("#ticket-urgent-marker").removeClass('active');
-          el.removeClass("active");
+          $el.removeClass("active");
         }
+        
+      switchTooltip();
       }
     })
     return false;
   })
 
+
+
 </script>
-
-
-

config/routes.rb

@@ -15,6 +15,7 @@ Rails.application.routes.draw do
     post "ticket/submit_response" => 'tickets#submit_response'
     get "tickets/category/:category_id" => 'tickets#tickets_by_category'
     get "tickets/my_tickets" => 'tickets#my_tickets'
+    post "comments/read" => 'tickets#mark_response_read'
    	resources :tickets do
       get "start"
       get "leave"