style create new ticket
This commit is contained in:
Felix Niklas
parent
4996c6fb95
commit
3d0864e1ba
5 changed files with 212 additions and 36 deletions
|
|
@ -197,6 +197,8 @@ class App.TicketCreate extends App.Controller
|
|||
el: @el.find('.ticket-create').find('textarea')
|
||||
)
|
||||
|
||||
$('#tags').tokenfield()
|
||||
|
||||
# start auto save
|
||||
@autosave()
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,89 @@
|
|||
<div class="main flex">
|
||||
|
||||
<div class="create-new main flex">
|
||||
<div class="box">
|
||||
<div class="page-header">
|
||||
<h1><%- @T( 'New Ticket' ) %> <small>(<%- @T( @title ) %>)<% if @admin: %> <a href="#" data-type="settings" class="glyphicon glyphicon-edit"></a><% end %></small></h1>
|
||||
<h1><%- @T( 'Create New Ticket' ) %></h1>
|
||||
</div>
|
||||
|
||||
<ul class="horizontal tabs type-tabs">
|
||||
|
||||
<li class="tab u-textTruncate active">
|
||||
<div class="white email channel icon"></div>
|
||||
<%- @T( 'E-Mail' ) %>
|
||||
|
||||
<li class="tab u-textTruncate">
|
||||
<div class="gray received-calls channel icon"></div>
|
||||
<%- @T( 'Received Call' ) %>
|
||||
|
||||
<li class="tab u-textTruncate">
|
||||
<div class="gray outbound-calls channel icon"></div>
|
||||
<%- @T( 'Outbound Call' ) %>
|
||||
|
||||
</ul>
|
||||
|
||||
<form role="form">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="customer"><%- @T('Customer') %></label>
|
||||
<input class="form-control" id="customer" placeholder="<%- @T('Enter Person or Organisation/Company') %>">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="subject"><%- @T('Subject') %></label>
|
||||
<input class="form-control" id="subject">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="text"><%- @T('Text') %></label>
|
||||
<textarea class="form-control" id="text" rows="4"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="formset-inset">
|
||||
<div class="horizontal two-columns">
|
||||
<div class="form-group column">
|
||||
<label for="owner"><%- @T('Owner') %></label>
|
||||
<select class="form-control" id="owner">
|
||||
<option>Support -> Oliver Ruhm</option>
|
||||
<option>Engineering -> Web-Dev</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group column">
|
||||
<label for="type"><%- @T('Type') %></label>
|
||||
<select class="form-control" id="type">
|
||||
<option>Inquiry</option>
|
||||
<option>Support</option>
|
||||
<option selected>Question</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group column">
|
||||
<label for="status"><%- @T('Status') %></label>
|
||||
<select class="form-control" id="status">
|
||||
<option selected>open</option>
|
||||
<option>closed</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group column">
|
||||
<label for="proprity"><%- @T('Priority') %></label>
|
||||
<select class="form-control" id="proprity">
|
||||
<option>low</option>
|
||||
<option selected>normal</option>
|
||||
<option>high</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="tags"><%- @T('Tags') %></label>
|
||||
<input class="form-control" id="tags" placeholder="<%- @T('Tag hinzufügen') %>" value="New Website, Feedback">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<form class="form-horizontal form-large ticket-create">
|
||||
<input type="hidden" value="" name="article_type"/>
|
||||
<div class="ticket_create"></div>
|
||||
<div class="form-actions">
|
||||
<button type="reset" class="btn cancel"><%- @T( 'Cancel' ) %></button> <button type="submit" class="btn btn-primary submit"><%- @T( 'Create' ) %></button>
|
||||
<div class="form-actions horizontal">
|
||||
<a class="subtle-link standalone cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
|
||||
<button type="submit" class="btn btn-create submit align-right"><%- @T( 'Create Ticket' ) %></button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<%- @P( @ticket.customer ) %>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="horizontal two-columns wrap">
|
||||
<div class="horizontal two-columns">
|
||||
<div class="column">
|
||||
<h3>#</h3>
|
||||
<div class="u-textTruncate"><%- @P( @ticket.number ) %></div>
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@
|
|||
<div class="internal-border">
|
||||
<div class="text-bubble">
|
||||
<div class="bubble-arrow"></div>
|
||||
<textarea></textarea>
|
||||
<textarea rows="1"></textarea>
|
||||
<!-- .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>
|
||||
|
|
|
|||
|
|
@ -157,6 +157,13 @@ span[data-tooltip]:hover:before {
|
|||
transition: transform 300ms 1.5s cubic-bezier(0.34,1.6,0.71,1), opacity 300ms 1.5s;
|
||||
}
|
||||
|
||||
.form-control::-webkit-input-placeholder,
|
||||
.token-input::-webkit-input-placeholder { color: hsl(0,0%,80%); }
|
||||
.form-control::-moz-placeholder,
|
||||
.token-input::-moz-placeholder { opacity: 1; color: hsl(0,0%,80%); }
|
||||
.form-control:-ms-input-placeholder,
|
||||
.token-input:-ms-input-placeholder { color: hsl(0,0%,80%); }
|
||||
|
||||
.glyphicon {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
|
@ -630,13 +637,15 @@ label {
|
|||
|
||||
.form-control {
|
||||
height: 41px;
|
||||
line-height: 22px;
|
||||
font-weight: normal;
|
||||
box-shadow: none;
|
||||
border-radius: 3px;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
.form-control:focus,
|
||||
.tokenfield.focus {
|
||||
box-shadow: none;
|
||||
border-color: #419ed7;
|
||||
}
|
||||
|
|
@ -663,25 +672,6 @@ label {
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
.form-large {
|
||||
width: 85%;
|
||||
max-width: 700px;
|
||||
}
|
||||
.form-normal {
|
||||
width: 70%;
|
||||
max-width: 400px;
|
||||
}
|
||||
.form-small {
|
||||
width: 50%;
|
||||
max-width: 250px;
|
||||
}
|
||||
.form-normal fieldset {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.sidebar fieldset {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.form-horizontal label {
|
||||
text-align: right;
|
||||
float: left;
|
||||
|
|
@ -832,6 +822,11 @@ label {
|
|||
color: rgba(0,0,0,.5);
|
||||
}
|
||||
|
||||
ul.tabs {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ol.tabs {
|
||||
padding: 0;
|
||||
list-style: decimal inside;
|
||||
|
|
@ -1716,13 +1711,18 @@ footer {
|
|||
padding: 9px 24px 8px;
|
||||
}
|
||||
|
||||
.btn.primary,
|
||||
.btn-primary {
|
||||
color: white;
|
||||
background: #419ed7;
|
||||
border-color: #419ed7;
|
||||
}
|
||||
|
||||
.btn-create,
|
||||
.btn-create:hover {
|
||||
color: white;
|
||||
background: hsl(145,51%,45%);
|
||||
}
|
||||
|
||||
.navigation {
|
||||
width: 260px;
|
||||
background: #26272e;
|
||||
|
|
@ -3166,6 +3166,108 @@ footer {
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.create-new {
|
||||
padding: 34px;
|
||||
}
|
||||
|
||||
.box {
|
||||
background: white;
|
||||
margin: 0 auto;
|
||||
border: 1px solid #e6e6e6;
|
||||
padding: 12px 24px 20px;
|
||||
}
|
||||
|
||||
.box .page-header {
|
||||
text-align: center;
|
||||
border-bottom: none;
|
||||
margin: 0;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.box h1 {
|
||||
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;
|
||||
}
|
||||
|
||||
.box .two-columns .column {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
width: calc(50% - 8px);
|
||||
}
|
||||
|
||||
.formset-inset {
|
||||
margin: 31px -24px 24px;
|
||||
padding: 19px 24px 4px;
|
||||
background: hsl(197,20%,93%);
|
||||
border-top: 1px solid hsl(0,0%,90%);
|
||||
border-bottom: 1px solid hsl(0,0%,90%);
|
||||
}
|
||||
|
||||
.type-tabs .tab {
|
||||
line-height: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.type-tabs .icon {
|
||||
vertical-align: top;
|
||||
margin-right: 9px;
|
||||
margin-top: 10px;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.tokenfield .token {
|
||||
padding: 0 0 0 10px;
|
||||
margin: -1px 5px 0 0;
|
||||
height: 26px;
|
||||
line-height: 27px;
|
||||
color: white;
|
||||
background: hsl(198,19%,72%);
|
||||
border: none;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.tokenfield .token-input {
|
||||
vertical-align: top;
|
||||
margin: 2px 0 0 5px;
|
||||
}
|
||||
|
||||
.tokenfield .token .token-label {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tokenfield.form-control {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.tokenfield .token .close {
|
||||
margin: 0;
|
||||
padding: 0 10px 0 5px;
|
||||
font-family: inherit;
|
||||
font-weight: 100;
|
||||
font-size: 30px;
|
||||
line-height: 1;
|
||||
color: white;
|
||||
text-shadow: none;
|
||||
opacity: .3;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.tokenfield .token .close:hover {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
----------------
|
||||
|
|
|
|||
Loading…
Reference in a new issue