Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

create ticket sidebar: customer info & templates

Browse source
This commit is contained in:
Felix Niklas 2014-09-05 11:20:07 +02:00
parent 3d0864e1ba
commit 5124c4ff0a
8 changed files with 372 additions and 173 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/assets/javascripts/app/controllers/agent_ticket_create.js.coffee
View file

@ -185,10 +185,10 @@ class App.TicketCreate extends App.Controller
)
# show template UI
new App.WidgetTemplate(
el: @el.find('.ticket_template')
template_id: template['id']
)
# new App.WidgetTemplate(
# el: @el.find('.ticket_template')
# template_id: template['id']
# )
@formDefault = @formParam( @el.find('.ticket-create') )

2
app/assets/javascripts/app/controllers/widget/template.js.coffee
View file

@ -23,7 +23,7 @@ class App.WidgetTemplate extends App.ControllerDrox
# insert data
@html @template(
file: 'widget/template'
header: 'Templates'
header: 'Select Template:'
params:
template: template
)

119
app/assets/javascripts/app/views/agent_ticket_create.jst.eco
View file

@ -1,3 +1,4 @@
<div class="create-new horizontal flex">
<div class="create-new main flex">
<div class="box">
<div class="page-header">
@ -89,8 +90,122 @@
<div class="sidebar">
<div class="widgets">
<div class="customer_info"></div>
<div class="ticket_template"></div>
<div class="customer_info">
<div class="drox"><!-- Customer Info -->
<div class="drox-header">
<h2>Customer Info</h2>
</div>
<div class="drox-body">
<p>
<span class="customer-name">Benjamin Wahlers</span>
<span class="customer-email u-highlight">benjamin@wahlers.de</span>
</p>
<div class="form-group">
<label for="customer-info-note"><%- @T('Note') %></label>
<textarea class="form-control" id="customer-info-note" rows="5">Not assigned</textarea>
</div>
<label><%- @T('Tickets') %></label>
<ol class="tasks tasks-standalone"> <!-- vaguely based on task_widget_tasks.jst.eco -->
<li class="task level-1 horizontal">
<div class="icon-holder">
<div class="priority icon"></div>
</div>
<div class="flex">
<div class="u-highlight name u-textTruncate">Micro-SIM doesn't work</div>
<div class="time">23 minutes ago</div>
</div>
<li class="task level-3 horizontal">
<div class="icon-holder">
<div class="priority icon"></div>
</div>
<div class="flex">
<div class="u-highlight name u-textTruncate">Superb Service!</div>
<div class="time">43 minutes ago</div>
</div>
<li class="task level-2 horizontal">
<div class="icon-holder">
<div class="priority icon"></div>
</div>
<div class="flex">
<div class="u-highlight name u-textTruncate">Print sheets strip off</div>
<div class="time">1 hour ago</div>
</div>
<li class="task level-3 horizontal">
<div class="icon-holder">
<div class="priority icon"></div>
</div>
<div class="flex">
<div class="u-highlight name u-textTruncate">Block not properly wrought</div>
<div class="time">2 hour ago</div>
</div>
</ol>
</div>
</div>
</div>
<div class="ticket_template">
<div class="drox hide"><!-- Template Wizard Step One -->
<div class="drox-header">
<h2>Choose Template:</h2>
</div>
<div class="drox-body">
<p>No template created yet.</p>
<p>With templates you can pre-fill ticket attributes.</p>
<p>Choose attributes and then save them as a new template.</p>
<p><a class="create u-clickable">Save new template</a></p>
</div>
</div>
<div class="drox hide"><!-- Template Wizard Step Two -->
<div class="drox-header">
<h2>Create Template:</h2>
</div>
<div class="drox-body">
<form>
<div class="form-group">
<label for="template-title"><%- @T('Template Title') %>:</label>
<input class="form-control" id="template-title" placeholder="<%- @T('Enter Template Name') %>">
</div>
<p>This template saves the following attributes:</p>
<ul class="template-attributes">
<li class="template-attribute horizontal">
<div class="key">Owner</div> | <div class="value flex u-textTruncate">Web-Dev</div>
<div class="delete u-clickable">&times;</div>
<li class="template-attribute horizontal">
<div class="key">Type</div> | <div class="value flex u-textTruncate">Question</div>
<div class="delete u-clickable">&times;</div>
<li class="template-attribute horizontal">
<div class="key">Status</div> | <div class="value flex u-textTruncate">open</div>
<div class="delete u-clickable">&times;</div>
<li class="template-attribute horizontal">
<div class="key">Priority</div> | <div class="value flex u-textTruncate">high</div>
<div class="delete u-clickable">&times;</div>
<li class="template-attribute horizontal">
<div class="key">Tag</div> | <div class="value flex u-textTruncate">New Website</div>
<div class="delete u-clickable">&times;</div>
<li class="template-attribute horizontal">
<div class="key">Tag</div> | <div class="value flex u-textTruncate">Feedback</div>
<div class="delete u-clickable">&times;</div>
</ul>
<div class="horizontal">
<button class="btn btn-primary" type="submit"><%- @T('Save Template') %></button>
<a class="subtle-link standalone cancel align-right u-clickable"><%- @T('Cancel') %></a>
</div>
</form>
</div>
</div>
<div class="drox hide"><!-- Template Chooser, shown instead of Template Wizard Step One when there are templates there -->
<div class="drox-header">
<h2>Choose Template:</h2>
</div>
<div class="drox-body">
<ul class="templates">
<li class="u-clickable u-highlight">Feedback New Website
</ul>
<p>Choose attributes and then save them as a new template.</p>
<p><a class="create u-clickable">Save new template</a></p>
</div>
</div>
</div>
<div class="text_module"></div>
</div>
</div>
</div>

4
app/assets/javascripts/app/views/generic/drox.jst.eco
View file

@ -1,11 +1,11 @@
<div class="drox">
<div class="drox-header">
<h3>
<h2>
<%- @T( @header ) %>
<% if @edit: %>
<a href="" data-type="edit" class="pull-right glyphicon glyphicon-edit" title="<%- @Ti( 'edit' ) %>"></a>
<% end %>
</h3>
</h2>
</div>
<div class="drox-body">
</div>

2
app/assets/javascripts/app/views/navigation.jst.eco
View file

@ -11,7 +11,7 @@
<ul class="nav navbar-nav navbar-items-menu"></ul>
<div class="tasks flex"></div>
<div class="tasks tasks-navigation flex"></div>
<% if !_.isEmpty(@user): %>
<!--<a href="#bell" class="glyphicon glyphicon-bell"></a>-->

2
app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco
View file

@ -81,7 +81,7 @@
<!-- .text-bubble grows with textarea (and expanding clone) -->
<div class="article-attachment js-attachment u-unclickable">
<span class="bubble-placeholder-hint">Antwort eingeben oder</span>
<span class="highlight u-clickable edit-upload-button js-attachment-text">
<span class="u-highlight u-clickable edit-upload-button js-attachment-text">
Dateien wählen..
<input multiple="multiple" type="file" name="file" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;">
</span>

11
app/assets/javascripts/app/views/widget/template.jst.eco
View file

@ -1,7 +1,5 @@
<div class="">
<form>
<!--<form>
<div id="form-template"></div>
<!--<button type="submit" class="btn btn-default" data-type="template_edit"><%- @T( 'Edit' ) %></button>-->
<button type="submit" class="btn btn-default" data-type="template_delete"><%- @T( 'Delete' ) %></button>
<button type="submit" class="btn btn-default" data-type="template_select"><%- @T( 'Apply' ) %></button>
</form>
@ -12,5 +10,8 @@
<input type="text" name="template_name" id="template_name" class="form-control" value="<%= @template.name %>"/>
</fieldset>
<button type="submit" class="btn btn-default" data-type="template_save"><%- @T( 'Save' ) %></button>
</form>
</div>
</form>-->
<p>No template created yet.</p>
<p>With templates you can pre-fill ticket attributes.</p>
<p>Choose attributes and then save them as a new template.</p>
<p><a class="create u-clickable">Save new template</a></p>

211
app/assets/stylesheets/zzz.css.erb
View file

@ -5,13 +5,24 @@ body {
background: #2c2d36;
}
ol,
ul {
list-style: none;
padding: 0;
}
a.create {
color: hsl(145,51%,45%);
text-decoration: underline;
}
small {
color: #c6c6c5;
font-size: 12px;
}
.highlight {
color: hsl(202,68%,54%);
.u-highlight {
color: hsl(194,90%,45%);
}
.u-unclickable {
@ -622,7 +633,7 @@ label {
font-weight: normal;
letter-spacing: 0.1em;
padding: 0 2px;
margin-bottom: 4px;
margin-bottom: 6px;
}
.form-group + .form-group {
@ -822,13 +833,7 @@ label {
color: rgba(0,0,0,.5);
}
ul.tabs {
padding: 0;
list-style: none;
}
ol.tabs {
padding: 0;
list-style: decimal inside;
}
@ -1488,6 +1493,10 @@ form a.standalone {
margin: 0 5px;
}
form a.standalone.align-right {
margin-left: auto;
}
.modal-header {
padding: 10px 15px;
}
@ -1505,36 +1514,6 @@ form a.standalone {
padding: 14px 20px 20px;
}
.drox {
margin-bottom: 6px;
}
.drox-header {
padding: 8px 13px;
background-color: #f5f5f5;
color: #333333;
border-radius: 5px;
}
.drox-header .glyphicon {
display: none;
}
.drox-header:hover .glyphicon, .drox-header:focus .glyphicon {
display: inline-block;
color: #005580;
text-decoration: none;
}
.drox-header h3 {
font-size: 13px;
font-weight: 200;
margin-top: 2px;
margin-bottom: 2px;
}
.drox-body {
padding: 8px 13px;
}
footer {
clear: both;
padding-top: 10px;
@ -1773,39 +1752,68 @@ footer {
overflow: auto;
}
.tasks.tasks-standalone {
background: none;
margin-top: 8px;
}
.tasks-standalone .task {
padding: 0;
margin-bottom: 9px;
}
.tasks-standalone .icon-holder {
width: 20px;
}
.tasks-standalone .icon-holder .icon {
margin-top: 4px;
}
.tasks-standalone .time {
color: hsl(198,19%,72%);
}
.tasks-standalone .task .priority.icon:after {
background: white;
}
.task {
height: 38px;
padding: 10px 15px 7px 0;
border-bottom: 1px solid #33363e;
cursor: pointer;
position: relative;
}
.task .name {
.tasks-navigation .task {
height: 38px;
border-bottom: 1px solid #33363e;
}
.tasks-navigation .task:hover {
background: #26272e;
}
.tasks-navigation .name {
color: #808080;
}
.tasks-navigation .icon-holder {
width: 30px;
}
.tasks-navigation .icon-holder .icon {
margin-right: 3px;
margin-top: -3px;
}
.task:hover {
text-decoration: none;
}
.task .icon-holder {
width: 30px;
}
.task .icon-holder .icon {
margin-right: 3px;
margin-top: -3px;
}
.task .modified.priority.icon {
margin-right: 8px;
}
.task:hover {
background: #26272e;
}
.task.active {
background: #389ed9;
}
@ -3166,15 +3174,26 @@ footer {
opacity: 0.5;
}
.create-new {
.create-new .main {
padding: 34px;
}
.create-new .sidebar {
width: 290px;
}
.create-new .form-control:not(:focus):not(.focus) {
border-color: hsl(0,0%,90%);
}
.create-new .subtle-link {
color: hsl(0,0%,89%);
}
.box {
background: white;
margin: 0 auto;
border: 1px solid #e6e6e6;
padding: 12px 24px 20px;
max-width: 658px;
}
.box .page-header {
@ -3188,14 +3207,6 @@ footer {
color: hsl(60,1%,34%);
}
.box .subtle-link {
color: hsl(0,0%,89%);
}
.box .form-control:not(:focus):not(.focus) {
border-color: hsl(0,0%,90%);
}
.box .two-columns {
margin-left: -4px;
margin-right: -4px;
@ -3268,6 +3279,78 @@ footer {
opacity: .5;
}
.drox {
color: hsl(60,1%,74%);
}
.drox .drox-header {
padding-bottom: 2px;
margin-bottom: 16px;
border-bottom: 1px solid hsl(240,4%,95%);
}
.drox a.create {
margin-top: 2px;
display: inline-block;
}
.drox .form-group {
margin-bottom: 22px;
}
.drox .drox-body p:first-child {
margin-top: 20px;
}
.create-new .templates {
border-bottom: 1px solid hsl(240,4%,95%);
padding-bottom: 14px;
}
.template-attributes {
margin: 17px 0 19px;
}
.template-attribute {
height: 24px;
line-height: 25px;
padding-left: 10px;
margin-bottom: 2px;
font-size: 13px;
color: hsl(198,11%,59%);
background: hsl(197,20%,93%);
border: 1px solid hsl(0,0%,90%);
border-radius: 3px;
}
.template-attribute .key {
text-transform: uppercase;
margin-right: 3px;
}
.template-attribute .value {
margin-left: 3px;
}
.template-attribute .delete {
padding: 0 7px;
margin-top: 4px;
line-height: 19px;
font-size: 28px;
font-weight: lighter;
opacity: .4;
}
.customer-name {
color: hsl(60,1%,34%);
}
.customer-email {
margin-top: 5px;
margin-bottom: 20px;
display: block;
}
/*
----------------