add new ticket plus to overviews
This commit is contained in:
parent
e921f7dc04
commit
86c615ef47
4 changed files with 61 additions and 29 deletions
|
@ -78,6 +78,7 @@ class App.TicketOverview extends App.Controller
|
|||
|
||||
class Navbar extends App.Controller
|
||||
elements:
|
||||
'.js-tabsHolder': 'tabsHolder'
|
||||
'.js-tabsClone': 'clone'
|
||||
'.js-tabClone': 'tabClone'
|
||||
'.js-tabs': 'tabs'
|
||||
|
@ -122,19 +123,25 @@ class Navbar extends App.Controller
|
|||
if @bindId
|
||||
App.OverviewIndexCollection.unbind(@bindId)
|
||||
|
||||
trimName: (name) ->
|
||||
start = if name.indexOf('All') > -1 then 4 else 0;
|
||||
shortname = name.substr start, name.indexOf('Tickets') - 1 - start
|
||||
return shortname.charAt(0).toUpperCase() + shortname.slice(1);
|
||||
|
||||
autoFoldTabs: =>
|
||||
items = App.OverviewIndexCollection.get()
|
||||
@html App.view("agent_ticket_view/navbar#{ if @vertical then '_vertical' }")
|
||||
items: items
|
||||
trimName: @trimName
|
||||
|
||||
while @clone.width() > @el.width()
|
||||
while @clone.width() > @tabsHolder.width()
|
||||
@tabClone.not('.hide').last().addClass('hide')
|
||||
@tab.not('.hide').last().addClass('hide')
|
||||
@dropdownItem.filter('.hide').last().removeClass('hide')
|
||||
|
||||
# if all tabs are visible
|
||||
# remove dropdown and dropdown button
|
||||
if @dropdownItem.filter('.hide').size() is 0
|
||||
if @dropdownItem.not('.hide').size() is 0
|
||||
@dropdown.remove()
|
||||
@dropdownToggle.remove()
|
||||
|
||||
|
@ -172,6 +179,7 @@ class Navbar extends App.Controller
|
|||
|
||||
@html App.view("agent_ticket_view/navbar#{ if @vertical then '_vertical' else '' }")
|
||||
items: data
|
||||
trimName: @trimName
|
||||
|
||||
if @vertical
|
||||
@autoFoldTabs()
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<% for item in @items: %>
|
||||
<li <% if item.active: %>class="active"<% end %>>
|
||||
<a class="horizontal center" href="<%= item.target %>">
|
||||
<span class="local u-textTruncate"><%- @T(item.name) %></span>
|
||||
<span class="local u-textTruncate"><%- @T(@trimName(item.name)) %></span>
|
||||
<span class="badge badge--text"><%= item.count %></span>
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
@ -1,29 +1,34 @@
|
|||
<div class="tabs tabs--inline tabs--big js-tabs">
|
||||
<% if @items: %>
|
||||
<% for item in @items: %>
|
||||
<a class="tab js-tab<%= ' active' if item.active %>" href="<%= item.target %>">
|
||||
<span class="tab-name"><%- @T(item.name) %></span>
|
||||
<span class="tab-badge"><%= item.count %></span>
|
||||
</a>
|
||||
<% end %>
|
||||
<ul class="dropdown dropdown--actions dropdown--wide dropdown-menu dropdown-menu-right js-dropdown" role="menu" aria-labelledby="userAction">
|
||||
<div class="tabsHolder js-tabsHolder">
|
||||
<div class="tabs tabs--inline tabs--big js-tabs">
|
||||
<% if @items: %>
|
||||
<% for item in @items: %>
|
||||
<li class="js-dropdownItem hide<%= ' active' if item.active %>" role="presentation" data-target="<%= item.target %>" role="menuitem" tabindex="-1">
|
||||
<span class="flex u-textTruncate"><%- @T( item.name ) %></span>
|
||||
<span class="badge badge--text"><%= item.count %></span>
|
||||
<a class="tab js-tab<%= ' active' if item.active %>" href="<%= item.target %>">
|
||||
<span class="tab-name"><%- @T(@trimName(item.name)) %></span>
|
||||
<span class="tab-badge"><%= item.count %></span>
|
||||
</a>
|
||||
<% end %>
|
||||
</ul>
|
||||
<div class="tab tab-dropdown js-toggle" data-toggle="dropdown">
|
||||
<%- @Icon('dropdown-list') %>
|
||||
<%- @Icon('arrow-down', 'arrow') %>
|
||||
</div>
|
||||
<% end %>
|
||||
<ul class="dropdown dropdown--actions dropdown--wide dropdown-menu dropdown-menu-right js-dropdown" role="menu" aria-labelledby="userAction">
|
||||
<% for item in @items: %>
|
||||
<li class="js-dropdownItem hide<%= ' active' if item.active %>" role="presentation" data-target="<%= item.target %>" role="menuitem" tabindex="-1">
|
||||
<span class="flex u-textTruncate"><%- @T(@trimName(item.name)) %></span>
|
||||
<span class="badge badge--text"><%= item.count %></span>
|
||||
<% end %>
|
||||
</ul>
|
||||
<div class="tab tab-dropdown js-toggle" data-toggle="dropdown">
|
||||
<%- @Icon('dropdown-list') %>
|
||||
<%- @Icon('arrow-down', 'arrow') %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<a class="btn btn--success btn--quad" href="#ticket/create">
|
||||
<%- @Icon('plus') %>
|
||||
</a>
|
||||
<% if @items: %>
|
||||
<div class="tabs tabs--inline tabs--big u-invisible js-tabsClone">
|
||||
<% for item in @items: %>
|
||||
<a class="tab js-tabClone<%= ' active' if item.active %>" href="<%= item.target %>">
|
||||
<span class="tab-name"><%- @T(item.name) %></span>
|
||||
<span class="tab-name"><%- @T(@trimName(item.name)) %></span>
|
||||
<span class="tab-badge"><%= item.count %></span>
|
||||
</a>
|
||||
<% end %>
|
||||
|
|
|
@ -70,7 +70,7 @@ strong {
|
|||
.u-invisible {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
position: absolute !important;
|
||||
}
|
||||
|
||||
a {
|
||||
|
@ -270,7 +270,7 @@ blockquote {
|
|||
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
margin-top: -3px;
|
||||
margin-top: -1px; // more negative margin top looks bad on the btn--quad plus in overviews
|
||||
}
|
||||
|
||||
&.btn--icon--last .icon {
|
||||
|
@ -368,6 +368,7 @@ blockquote {
|
|||
&.btn--success {
|
||||
color: white;
|
||||
background: hsl(145,51%,45%);
|
||||
|
||||
&:active {
|
||||
background: hsl(145,51%,35%);
|
||||
}
|
||||
|
@ -380,6 +381,10 @@ blockquote {
|
|||
background: hsl(0,0%,98%);
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn--danger {
|
||||
|
@ -455,6 +460,10 @@ blockquote {
|
|||
}
|
||||
}
|
||||
|
||||
&.btn--quad {
|
||||
padding: 10px 12px 9px;
|
||||
}
|
||||
|
||||
&.btn--split--first {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
@ -2083,7 +2092,7 @@ ol.tabs li {
|
|||
|
||||
.tab {
|
||||
height: auto;
|
||||
padding: 10px 24px;
|
||||
padding: 10px 23px 9px;
|
||||
}
|
||||
|
||||
.tab-dropdown {
|
||||
|
@ -2355,16 +2364,26 @@ footer {
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
.main {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.overview-header {
|
||||
position: relative;
|
||||
height: 92px;
|
||||
margin: 20px 0 32px;
|
||||
height: 41px;
|
||||
display: none;
|
||||
align-items: center;
|
||||
|
||||
.tabsHolder {
|
||||
flex: 1;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 32px;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
@ -2374,7 +2393,7 @@ footer {
|
|||
}
|
||||
|
||||
@media only screen and (max-width: $largeScreenBreakpoint) {
|
||||
display: block;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue