redesign admin objects

app/assets/javascripts/app/views/agent_ticket_create.jst.eco

@@ -1,7 +1,7 @@
 <div class="tabsSidebar-holder flex horizontal">
   <div class="main no-padding flex tabsSidebar-sidebarSpacer tabsSidebar-tabsSpacer">
     <div class="newTicket">
-      <div class="box">
+      <div class="box box--newTicket">
         <div class="page-header">
           <h1><%- @T( @head ) %></h1>
         </div>

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

@@ -1,6 +1,6 @@
 <div class="fit vertical">
   <div class="tableOverview flex scrollable">
-    <div class="horizontal">
+    <div class="page-header">
       <div class="page-header-title">
         <h1><%- @T( @overview.name ) %></h1>
       </div>

app/assets/javascripts/app/views/customer_ticket_create.jst.eco

@@ -1,7 +1,7 @@
 <div class="horizontal flex">
   <div class="main no-padding flex">
     <div class="newTicket">
-      <div class="box">
+      <div class="box box--newTicket">
         <div class="page-header">
           <h1><%- @T( 'New Ticket' ) %></h1>
         </div>

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

@@ -1,5 +1,5 @@
 <div>
-  <div class="horizontal">
+  <div class="page-header">
     <div class="page-header-title">
       <h1 class="can-move"><%- @T( @overview.name ) %></h1>
     </div>

app/assets/javascripts/app/views/generic/admin/index.jst.eco

@@ -1,13 +1,13 @@
-<div class="page-header-title">
-  <div class="horizontal">
+<div class="page-header">
+  <div class="page-header-title">
     <h1><%- @T( @head ) %> <small><%- @T( 'Management' ) %></small></h1>
-    <div class="page-header-meta">
-      <% if @buttons: %>
-      <% for button in @buttons: %>
-        <a data-type="<%= button['data-type'] %>" class="btn <%= button['class'] %>"><%- @T( button.name ) %></a>
-      <% end %>
-      <% end %>
-    </div>
+  </div>
+  <div class="page-header-meta">
+    <% if @buttons: %>
+    <% for button in @buttons: %>
+      <a data-type="<%= button['data-type'] %>" class="btn <%= button['class'] %>"><%- @T( button.name ) %></a>
+    <% end %>
+    <% end %>
   </div>
 </div>
 

app/assets/javascripts/app/views/generic/admin_level2/index.jst.eco

@@ -11,8 +11,10 @@
 </div>
 <div class="main flex">
 
-  <div class="page-header horizontal">
-    <h1><%- @T( @page.head ) %> <small><%- @T( @page.sub_head ) %></small></h1>
+  <div class="page-header">
+    <div class="page-header-title">
+      <h1><%- @T( @page.head ) %> <small><%- @T( @page.sub_head ) %></small></h1>
+    </div>
   </div>
   <div class="nav-tab-content"></div>
 

app/assets/javascripts/app/views/generic/content_two_title.jst.eco

@@ -2,7 +2,9 @@
 </div>
 <div class="main flex">
   <div class="page-header">
-    <h1><%- @T( @head ) %> <small><%- @T( @sub_head ) %></small></h1>
+    <div class="page-header-title">
+      <h1><%- @T( @head ) %> <small><%- @T( @sub_head ) %></small></h1>
+    </div>
   </div>
   <div class="page-content"></div>
 </div>

app/assets/javascripts/app/views/layout_ref/communication_overview.jst.eco

@@ -30,7 +30,7 @@
           </a>
       </ul>
     </div>
-    <div class="page-header horizontal">
+    <div class="page-header">
       <div class="flex vertical center">
         <span class="avatar unique user-popover size-50" data-id="2" style="background-position: -92.79607555375712px -106.24902447601627px;" data-original-title="" title="">NB</span>
         <div class="ticket-title">

app/assets/javascripts/app/views/network.jst.eco

@@ -1,5 +1,7 @@
 <div class="page-header">
-  <h1>Networking <small></small></h1>
+  <div class="page-header-title">
+    <h1>Networking <small></small></h1>
+  </div>
 </div>
 
 <div class="row">

app/assets/javascripts/app/views/object_manager/index.jst.eco

@@ -1,34 +1,42 @@
-<div class="page-header-title">
-  <h1><%- @T( @head ) %> <small><%- @T( 'Object Manager' ) %></small></h1>
+<div class="page-header">
+  <div class="page-header-title">
+    <h1><%- @T( @head ) %> <small><%- @T( 'Object Manager' ) %></small></h1>
+  </div>
   <div class="page-header-meta">
-    <a class="btn js-restore"><%- @T( 'Restore Attributes to default' ) %></a>
-    <a class="btn btn--danger js-sync"><%- @T( 'Sync Changes' ) %> <span class="glyphicon glyphicon-lock"></span></a>
+    <a class="btn js-restore"><%- @T( 'Restore Defaults' ) %></a>
     <a class="btn btn--success js-new"><%- @T( 'New Attribute' ) %></a>
   </div>
 </div>
-<table class="table table-striped table-hover">
+<div class="box box--message">
+  <h2>Database Update required</h2>
+  <p><%- @T( 'Changes were made that require a database update. This might take some time.' ) %></p>
+  <div class="box-controls">
+    <div class="subtle-link standalone js-discard">Discard Changes</div>
+    <div class="btn btn--primary js-sync align-right"><%- @T( 'Update Database' ) %></div>
+  </div>
+</div>
+<div class="box box--message">
+  <div class="box-progress">
+    <div class="box-progress-title"><%- @T('Updating Database') %></div>
+    <div class="box-progress-body">
+      <progress max="100" value="50"></progress>
+    </div>
+  </div>
+</div>
+<table class="table table-striped table-hover is-disabled">
   <thead>
     <tr>
-      <th class=""><%- @T('State') %></th>
       <th class=""><%- @T('Display') %></th>
       <th class=""><%- @T('Name') %></th>
       <th class=""><%- @T('Type') %></th>
-      <th class=""><%- @T('Actions') %></th>
     </tr>
   </thead>
   <tbody>
     <% for item in @items: %>
-    <tr class="<% if item.active is false: %>not-active<% end %> js-edit u-clickable" data-id="<%- item.id %>">
-      <td><span class="glyphicon <% if item.pending_migration: %>glyphicon-flash<% end %> <% if item.active: %>glyphicon-ok<% else: %>glyphicon-remove<% end %>"></span></td>
+    <tr class="<% if item.active is false: %>is-inactive<% end %> js-edit u-clickable" data-id="<%- item.id %>">
       <td><%= item.display %></td>
       <td><%= item.name %></td>
       <td><%= item.data_type %></td>
-      <td>
-        <a href="#" class="glyphicon glyphicon-chevron-up js-up"></a><a href="#" class="glyphicon glyphicon-chevron-down js-down"></a>
-        <% if item.editable: %>
-          <a href="#" data-id="<%- item.id %>" data-type="delete" class="glyphicon glyphicon-trash" title="<%- @Ti('Delete') %>"></a>
-        <% end %>
-      </td>
     </tr>
     <% end %>
   </tbody>

app/assets/javascripts/app/views/profile/avatar.jst.eco

@@ -1,12 +1,12 @@
-<div class="page-header-title">
-  <div class="horizontal">
+<div class="page-header">
+  <div class="page-header-title">
     <h1><%- @T( 'Avatar' ) %></h1>
-    <div class="page-header-meta">
-    <% if @webcamSupport: %>
-      <div class="btn btn--success js-openCamera"><%- @T('Camera') %></div>
-    <% end %>
-      <div class="btn btn--success fileUpload"><%- @T('Upload') %><input type="file" class="js-upload" accept="image/*"></div>
-    </div>
+  </div>
+  <div class="page-header-meta">
+  <% if @webcamSupport: %>
+    <div class="btn btn--success js-openCamera"><%- @T('Camera') %></div>
+  <% end %>
+    <div class="btn btn--success fileUpload"><%- @T('Upload') %><input type="file" class="js-upload" accept="image/*"></div>
   </div>
 </div>
 <div class="avatar-gallery">

app/assets/javascripts/app/views/ticket_zoom.jst.eco

@@ -7,7 +7,7 @@
         <div class="overview-navigator"></div>
       </div>
       <div class="overview-navigator horizontal"></div>
-      <div class="page-header horizontal">
+      <div class="page-header">
         <div class="flex vertical center">
           <div class="js-avatar"></div>
           <div class="ticket-title"></div>

app/assets/javascripts/app/views/translation/index.jst.eco

@@ -1,4 +1,4 @@
-<div class="horizontal">
+<div class="page-header">
   <div class="page-header-title">
     <h1><%- @T('Translations') %> <small></small></h1>
   </div>

app/assets/javascripts/app/views/trigger.jst.eco

@@ -1,5 +1,7 @@
 <div class="page-header">
-  <h1>Trigger <small>Management</small></h1>
+  <div class="page-header-title">
+    <h1>Trigger <small>Management</small></h1>
+  </div>
 </div>
 
 <div class="row">

app/assets/javascripts/app/views/user.jst.eco

@@ -1,4 +1,4 @@
-<div class="horizontal">
+<div class="page-header">
   <div class="page-header-title">
     <h1><%- @T( @head ) %> <small><%- @T( 'Management' ) %></small></h1>
   </div>

app/assets/stylesheets/zammad.css.scss

@@ -14,6 +14,7 @@ body {
   font-weight: normal;
   background: hsl(210,17%,98%);
   height: 100%;
+  color: hsl(198,19%,72%);
 }
 
 p {
@@ -457,7 +458,6 @@ table {
 
 .table {
   display: table;
-  color: hsl(198,19%,72%);
 }
 
 .table .table-row {
@@ -503,6 +503,15 @@ table {
   padding: 0;
 }
 
+.table tr.is-inactive {
+  opacity: 0.5;
+  text-decoration: line-through;
+  
+  a {
+    color: #bbb;
+  }
+}
+
 .table .icon-trash {
   vertical-align: middle;
   fill: hsl(240,1%,77%);
@@ -935,11 +944,12 @@ textarea,
 }
 
 .page-header {
+  margin: 0 0 15px;
+  padding: 0;
   border: none;
-}
-
-.page-header-title {
-  margin-bottom: 15px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
 }
 
 .page-header-title h1 {
@@ -947,13 +957,12 @@ textarea,
 }
 
 .page-header-meta {
-  margin-top: 6px;
   margin-left: auto;
+  padding-left: 9px;
   display: flex;
-  align-self: flex-start;
-  
-  .btn {
-    margin: 0 0 2px 9px;
+
+  .btn + .btn {
+    margin-left: 9px;
   }
 }
 
@@ -1461,13 +1470,6 @@ footer {
   text-decoration: line-through;
 }
 
-.not-active {
-  text-decoration: line-through;
-}
-.not-active a {
-  color: #bbb;
-}
-
 .translation {
   border: 1px dotted #F92;
   border-radius: 3px;
@@ -2089,10 +2091,6 @@ footer {
     margin: 21px 0 12px;
   }
 
-  .NavBarAdmin + .main p {
-    color: hsl(198,19%,72%);
-  }
-
   .nav-stacked > li + li {
     margin-top: 0;
   }
@@ -2741,7 +2739,6 @@ footer {
 
 .ticketZoom .page-header {
   margin-top: 24px;
-  margin-bottom: 0;
   padding: 0;
 }
 
@@ -3620,7 +3617,7 @@ footer {
 }
 
 .newTicket {
-  padding: 34px;
+  padding: 14px 34px;
 }
 
   .newTicket .sidebar {
@@ -3638,22 +3635,31 @@ footer {
 
 .box {
   background: white;
-  margin: 0 auto;
+  margin: 20px 0;
   border: 1px solid #e6e6e6;
-  padding: 12px 24px 20px;
-  max-width: 658px;
+  padding: 20px 24px;
 }
 
+  .box.box--newTicket {
+    max-width: 658px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
   .box .page-header {
     text-align: center;
-    margin: 0;
-    padding-bottom: 12px;
+    margin-bottom: 12px;
   }
 
   .box h1 {
+    margin-top: 12px;
     color: hsl(60,1%,34%);
   }
 
+  .box h2 {
+    margin-top: 12px;
+  }
+
   .box .two-columns {
     margin-left: -4px;
     margin-right: -4px;
@@ -3665,6 +3671,44 @@ footer {
     width: calc(50% - 8px);
   }
 
+  .box-controls {
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+  }
+
+  .box--yellow {
+    background: hsl(47,100%,93%);
+    border-color: hsl(47,100%,75%);
+    color: hsl(47,20%,67%);
+    
+    h1, h2 {
+      color: hsl(47,3%,28%);
+    }
+  }
+
+  .box-progress {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .box-progress-title {
+    color: hsl(47,3%,28%);
+  }
+
+  .box-progress-body {
+    flex: 1;
+    margin-left: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    progress {
+      width: 100%;
+    }
+  }
+
 .formset-inset {
   margin: 34px -24px 24px;
   padding: 19px 24px 24px;