add new ticket plus to overviews

This commit is contained in:
Felix Niklas 2015-11-05 12:04:29 +01:00
parent e921f7dc04
commit 86c615ef47
4 changed files with 61 additions and 29 deletions

View file

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

View file

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

View file

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

View file

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