harry
/
tickets
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update by joshua for css

This commit is contained in:
Harry Bomrah 2015-09-02 18:16:01 +08:00
parent c8cdfac08c
commit 6906b186ad
15 changed files with 975 additions and 678 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/tickets/ticket-select-arrow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 263 B

172
app/assets/stylesheets/tickets/_common.scss
View File

@ -1,74 +1,178 @@
@charset "utf-8";
@import 'ticket_variables';
#filter {
display: none;
display: none;
}
.ticket-container {
max-width: $main-width;
width: 96%;
margin: auto;
}
.img-avatar {
width: 50px;
height: 50px;
width: 50px;
height: 50px;
}
.t-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
width: 30px;
height: 30px;
border-radius: 50%;
}
.t-label {
border-radius: 0.125rem;
display: inline-block;
padding: 4px 0.5rem;
font-family: $main-font;
border-radius: 0.125rem;
display: inline-block;
padding: 4px 0.5rem;
font-family: $main-font;
}
.t-label-primary {
color: $gray;
background-color: $white;
color: $gray;
background-color: $white;
}
.t-status {
text-transform: uppercase;
border-radius: 0.125rem;
font-size: 0.75rem;
display: inline-block;
padding: 4px 0.375rem;
font-family: $main-font;
text-transform: uppercase;
border-radius: 0.125rem;
font-size: 0.75rem;
display: inline-block;
padding: 4px 0.375rem;
font-family: $main-font;
}
.t-status-open {
color: $white;
background-color: $green;
color: $white;
background-color: $green;
}
.t-status-close {
color: $white;
background-color: $gray;
color: $white;
background-color: $gray;
}
.t-status-processing {
color: $white;
background-color: $purple;
color: $white;
background-color: $purple;
}
// change bootstrap label colors to fit this design theme
.label {
text-shadow: none;
font-family: $main-font;
font-size: 12px;
font-weight: 100;
display: inline-block;
text-shadow: none;
font-family: $main-font;
font-size: 12px;
font-weight: 100;
display: inline-block;
}
.label-primary {
background-color: $primary;
background-color: $primary;
}
.label-second {
background-color: $second;
}
.label-info {
background-color: $green;
}
.label-open {
background-color: $green;
background-color: $green;
}
.label-commenced {
background-color: $purple;
background-color: $purple;
}
.label-danger {
background-color: $red;
}
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;
}
}

2
app/assets/stylesheets/tickets/_ticket_variables.scss
View File

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

227
app/assets/stylesheets/tickets/ticket_index.scss
View File

@ -1,159 +1,182 @@
@charset "utf-8";
@import 'ticket_variables';
@import 'common';
@import 'classes';
@import "ticket_variables";
@import "common";
@import "classes";
body {
background-color: $subtle-gray;
background-color: $subtle-gray;
}
.ticket-container {
a {
color: $primary;
&:hover {
color: lighten($primary, 10%);
}
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;
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;
.ticket-search-option {
width: 15%;
height: 50px;
border: none;
border-radius: $t-round;
font-size: 18px;
}
.ticket-search-field {
color: $gray;
font-size: 18px;
font-weight: normal;
padding: 0 20px;
width: 84%;
height: 50px;
margin-bottom: 0;
font-size: 18px;
font-weight: normal;
padding: 0 20px;
width: 84%;
height: 50px;
margin-bottom: 0;
box-shadow: none;
border: none;
border-radius: $t-round;
&:focus {
box-shadow: none;
border: none;
border-radius: $t-round;
border: 0;
}
}
}
.ticket-section {
margin-bottom: 20px;
margin-bottom: 20px;
}
.ticket-section-heading {
background-color: $primary;
color: $white;
padding: 16px 14px;
margin-bottom: 0;
font-family: $main-font;
&.type--ugrent {
background-color: $red;
}
&.type--normal {
background-color: $second;
}
background-color: $primary;
color: $white;
padding: 16px 14px;
margin-bottom: 0;
font-family: $main-font;
&.type--ugrent {
background-color: $red;
}
&.type--normal {
background-color: $second;
}
}
.ticket-section-heading-icon {
margin-right: 8px;
margin-right: 8px;
}
.ticket-section-container {
background-color: $white;
margin-bottom: 20px;
position: relative;
background-color: $white;
margin-bottom: 20px;
position: relative;
}
.ticket-category-title {
margin: 0;
padding: 20px 16px;
background-color: #fbfbfb;
font-family: $main-font;
border-bottom: 1px solid $light-gray;
margin: 0;
padding: 20px 16px;
background-color: #fbfbfb;
font-family: $main-font;
border-bottom: 1px solid $light-gray;
}
.ticket-category-title-icon {
margin-right: 5px;
margin-right: 5px;
}
.ticket-item {
padding: 16px 20px;
border-bottom: 1px solid $light-gray;
font-family: $main-font;
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;
font-size: 12px;
color: $white;
background-color: $second;
border-radius: $t-strong-round;
&:hover {
background-color: $light-blue;
}
.ticket-site-link {
margin-left: 8px;
padding: 2px 4px;
font-size: 12px;
color: $white;
background-color: $second;
border-radius: $t-strong-round;
&:hover {
color: $white;
text-decoration: none;
background-color: darken($second, 10%);
}
color: $white;
text-decoration: none;
background-color: darken($second, 10%);
}
}
}
.ticket-item:first-child {
border-top: 1px solid $light-gray;
border-top: 1px solid $light-gray;
}
.ticket-label {
white-space: nowrap;
white-space: nowrap;
}
.ticket-section-view-all {
position: absolute;
right: 2rem;
top: 20px;
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 {
.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;
}
text-decoration: none;
}
}
}
.ticket-section-view-all-icon {
position: relative;
top: 40px;
color: $second;
-webkit-webkit-transition: $t-fast all;
transition: $t-fast all;
position: relative;
top: 40px;
color: $second;
-webkit-webkit-transition: $t-fast all;
transition: $t-fast all;
}
// Search result
.ticket-search-result {
background-color: $second;
padding: 16px 14px;
background-color: $second;
padding: 16px 14px;
color: $white;
font-size: 24px;
a {
color: $white;
font-size: 24px;
a {
color: $white;
&:hover {
color: $white;
text-decoration: none;
}
}
&:active {
text-decoration: none;
}
}
}

1033
app/assets/stylesheets/tickets/ticket_show.scss
View File

File diff suppressed because it is too large Load Diff

12
app/controllers/admin/tickets_controller.rb
View File

@ -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"]

1
app/models/ticket_query_response.rb
View File

@ -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]) }

41
app/views/admin/tickets/_query.html.erb
View File

@ -14,25 +14,30 @@
<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>
<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 class="ticket-tag-member">
<h4 class="ticket-tag-mebmer-heading">Tag member</h4>
<select class="member_tags" multiple="multiple" name="user_tags[]">
<% @members.each do |member| %>
<%
name = member["name"][I18n.locale.to_s] == "" ? member["name"]["zh_tw"] : member["name"][I18n.locale.to_s]
name = "" if name.nil?
user_name = "(#{member["user_name"]})"
text = " #{name} #{user_name}"
%>
<option value="<%= member["id"] %>" data-member="<%= member.to_json %>"><%= text %></option>
<% end %>
</select>
<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> -->
<select class="member_tags" multiple="multiple" name="user_tags[]">
<% @members.each do |member| %>
<%
name = member["name"][I18n.locale.to_s] == "" ? member["name"]["zh_tw"] : member["name"][I18n.locale.to_s]
name = "" if name.nil?
user_name = "(#{member["user_name"]})"
text = " #{name} #{user_name}"
%>
<option value="<%= member["id"] %>" data-member="<%= member.to_json %>"><%= text %></option>
<% 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") %>
@ -40,4 +45,4 @@
</div>
<% end %>
</div>
</div>
</div>

41
app/views/admin/tickets/_response.html.erb
View File

@ -14,24 +14,33 @@
<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">
<%= response.internal_response ? "Inhouse" : "" %>
</h4>
<div class="ticket-inhouse-wrap">
<% response.user_tags.each do |u|
user = User.find(u) rescue nil
if !user.nil?
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
end %>
<img class="t-avatar" src="<%= avatar %>">
<% end %>
<div class="ticket-response-delete-wrap">
<a class="ticket-response-delete" href="#">
<i class="ticket-response-delete-icon fa fa-trash"></i>
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?
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
end %>
<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>
<div class="ticket-response-content">
<div class="ticket-response-content <%= response.internal_response ? "in-house" : "" %>">
<%= response.response.html_safe %>
</div>
</div>

5
app/views/admin/tickets/_search_form.html.erb
View File

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

5
app/views/admin/tickets/_ticket.html.erb
View File

@ -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>

2
app/views/admin/tickets/index.html.erb
View File

@ -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>

1
app/views/admin/tickets/search.html.erb
View File

@ -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] %>

110
app/views/admin/tickets/show.html.erb
View File

@ -6,10 +6,10 @@
<% content_for :page_specific_javascript do %>
<%= javascript_include_tag "lib/jquery.form.js" %>
<%= javascript_include_tag "validator" %>
<%= javascript_include_tag "select2/select2.min" %>
<%= javascript_include_tag "select2/select2.min" %>
<% end %>
<% if !@ticket .nil? %>
<% case @ticket.status
<% case @ticket.status
when "open"
badge_class = "t-status-open"
when "closed"
@ -18,17 +18,32 @@
badge_class = "t-status-processing"
end
%>
<ul class="ticket-breadcrumb breadcrumb">
<li class="ticket-breadcrumb-item"><a href="/admin/tickets"><i class="icons-arrow-left"></i> Dashboard</a> <span class="divider">/</span></li>
<li class="ticket-breadcrumb-itme ticket-breadcrumb-active active"><%= @ticket.subject %></li>
</ul>
<div class="ticket-home-btn-wrap ticket-container">
<a class="btn btn-normal" href="/admin/tickets">
<i class="ticket-home-btn-icon fa fa-home"></i>
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>
@ -91,27 +106,28 @@
<div class="ticket-meta-wrap clearfix">
<div class="ticket-meta">
<span class="ticket-author t-label t-label-primary">
<i class="icon-user"></i>
<i class="icon-user"></i>
<%= !@ticket.ticket_creater_name.nil? ? @ticket.ticket_creater_name : @ticket.ticket_creater_id %>
</span>
<span class="ticket-created-date t-label t-label-primary">
<i class="icon-time"></i>
<i class="icon-time"></i>
<% dt = DateTime.parse(@ticket.created_at.to_s) %> <%= dt.strftime("%d %B %Y - %H:%M") %>
</span>
</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">
<i class="fa fa-fire"></i>
Urgent
<!-- <div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
<!-- <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>
Urgent -->
<div class="onoffswitch ticket-toggle-urgent" title="">
<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>
@ -134,7 +150,7 @@
</ul>
</span>
</div>
</div>
</div>
</div>
<div id="query_box" class="ticket-content">
@ -159,7 +175,7 @@
<% end %>
</div>
<% else %>
<div>
<div>
Error in fetching ticket.
</div>
<% end %>
@ -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);
var mark_urgent = !el.hasClass("active");
});
switchTooltip();
$("#myonoffswitch").on("click",function(){
var $el = $(this);
var mark_urgent = !$el.hasClass("active");
$.ajax({
url : el.attr("href"),
type : "post",
data : {"mark_urgent" : mark_urgent},
url : $el.attr("data-url"),
type : "POST",
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>

1
config/routes.rb
View File

@ -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"