replace glyphicon edit icon with action button

and make the overview options a local modal

app/assets/javascripts/app/controllers/ticket_overview.js.coffee

@@ -482,6 +482,7 @@ class Table extends App.ControllerContent
     new App.OverviewSettings(
       overview_id: @overview.id
       view_mode:   @view_mode
+      container: @el
     )
 
 class App.OverviewSettings extends App.ControllerModal

app/assets/javascripts/app/views/agent_ticket_view/content.jst.eco

@@ -2,9 +2,12 @@
   <div class="tableOverview flex scrollable">
     <div class="horizontal">
       <div class="page-header-title">
-        <h1><%- @T( @overview.name ) %> <% if @edit: %><small><a href="#" data-type="settings" class="glyphicon glyphicon-edit"></a></small><% end %></h1>
+        <h1><%- @T( @overview.name ) %></h1>
       </div>
       <div class="page-header-meta">
+        <% if @edit: %>
+        <div class="btn btn--action" data-type="settings"><%- @T('Options') %></div>
+        <% end %>
         <ul class="pagination">
         <% for item in @view_modes: %>
           <li class="<%= item.class %>">

app/assets/javascripts/app/views/dashboard/ticket.jst.eco

@@ -1,9 +1,10 @@
 <div>
   <div class="horizontal">
     <div class="page-header-title">
-      <h1 class="can-move"><%- @T( @overview.name ) %> <small><a href="#" data-type="settings" class="glyphicon glyphicon-edit"></a></small></h1>
+      <h1 class="can-move"><%- @T( @overview.name ) %></h1>
     </div>
-    <div class="page-header-meta horizontal">
+    <div class="page-header-meta">
+      <div class="btn btn--action" data-type="settings"><%- @T('Options') %></div>
       <div class="pagination-counter">
         <span class="pagination-items-range"><%- @items_from %>-<%- @items_till %></span> <%- @T("of") %> <span class="pagination-total-items"><%- @items_total %></span>
       </div>

app/assets/stylesheets/zammad.css.scss

@@ -283,8 +283,8 @@ span[data-tooltip]:hover:before {
   }
 
   &.btn--action {
-    padding: 7px 11px 5px;
     @extend label;
+    padding: 7px 11px 5px !important;
   }
 
   &.btn--primary {
@@ -803,8 +803,8 @@ textarea,
 .pagination > li > span {
   padding: 0;
   width: 31px;
-  height: 28px;
-  border-color: #ececec;
+  height: 31px;
+  border-color: #e5e5e5;
 }
 
 .pagination > .active > a, 
@@ -818,8 +818,8 @@ textarea,
 }
 
 .pagination-counter {
-  margin-right: 19px;
-  line-height: 28px;
+  margin: 0 19px 0 10px;
+  line-height: 33px;
   color: #9c9c9b;
 }
 
@@ -840,12 +840,15 @@ textarea,
 }
 
 .page-header-meta {
-  margin-top: 5px;
+  margin-top: 6px;
   margin-left: auto;
-}
+  @extend .horizontal;
+  @extend .justify;
+  @extend .self-start;
   
-.page-header-meta.horizontal .pagination {
-  margin-left: auto;
+  .btn {
+    margin: 0 9px 2px;
+  }
 }
 
 .dropdown-menu .count {
@@ -5219,6 +5222,13 @@ body.fit {
   align-items: flex-end;
 }
 
+.self-start {
+  -webkit-align-self: start;
+     -moz-align-self: start;
+      -ms-align-self: start;
+          align-self: start;
+}
+
 .two-columns,
 .three-columns,
 .wrap {