diff --git a/app/assets/javascripts/app/controllers/ticket_overview.coffee b/app/assets/javascripts/app/controllers/ticket_overview.coffee index 9546cdb88..c928a205e 100644 --- a/app/assets/javascripts/app/controllers/ticket_overview.coffee +++ b/app/assets/javascripts/app/controllers/ticket_overview.coffee @@ -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() diff --git a/app/assets/javascripts/app/views/agent_ticket_view/navbar.jst.eco b/app/assets/javascripts/app/views/agent_ticket_view/navbar.jst.eco index b49617456..1f3ee8ab1 100644 --- a/app/assets/javascripts/app/views/agent_ticket_view/navbar.jst.eco +++ b/app/assets/javascripts/app/views/agent_ticket_view/navbar.jst.eco @@ -3,7 +3,7 @@ <% for item in @items: %>
  • class="active"<% end %>> - <%- @T(item.name) %> + <%- @T(@trimName(item.name)) %> <%= item.count %>
  • diff --git a/app/assets/javascripts/app/views/agent_ticket_view/navbar_vertical.jst.eco b/app/assets/javascripts/app/views/agent_ticket_view/navbar_vertical.jst.eco index e3c5b015b..5719f12c9 100644 --- a/app/assets/javascripts/app/views/agent_ticket_view/navbar_vertical.jst.eco +++ b/app/assets/javascripts/app/views/agent_ticket_view/navbar_vertical.jst.eco @@ -1,29 +1,34 @@ -
    - <% if @items: %> - <% for item in @items: %> - - <%- @T(item.name) %> - <%= item.count %> - - <% end %> - -
    - <%- @Icon('dropdown-list') %> - <%- @Icon('arrow-down', 'arrow') %> -
    - <% end %> + +
    + <%- @Icon('dropdown-list') %> + <%- @Icon('arrow-down', 'arrow') %> +
    + <% end %> +
    + + <%- @Icon('plus') %> + <% if @items: %>
    <% for item in @items: %> - <%- @T(item.name) %> + <%- @T(@trimName(item.name)) %> <%= item.count %> <% end %> diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index ac6be1bba..b2c0cc5af 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/app/assets/stylesheets/zammad.scss @@ -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; } }