admin pages: add page-content and style containing labels

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

@@ -6,6 +6,7 @@
           <h1><%- @T( @head ) %></h1>
         </div>
 
+        <div class="page-content">
           <ul class="tabs type-tabs">
 
             <li class="tab u-textTruncate" data-type="phone-in">
@@ -44,6 +45,7 @@
         </div>
       </div>
     </div>
+  </div>
 
   <div class="tabsSidebar vertical"></div>
 </div>

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

@@ -18,4 +18,6 @@
   </div>
 </div>
 
-<div class="table-overview"></div>
+<div class="page-content">
+  <div class="table-overview"></div>
+</div>

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

@@ -10,13 +10,15 @@
     <a class="btn btn--success js-new"><%- @T('New Calendar') %></a>
   </div>
 </div>
+<div class="page-content">
+  <% if _.isEmpty(@calendars): %>
+  <div class="page-description">
+    <%- @description %>
+  </div>
+  <% end %>
 
-<% if _.isEmpty(@calendars): %>
-<%- @description %>
-<% end %>
-
-<% for calendar in @calendars: %>
-<div class="action" data-id="<%- calendar.id %>">
+  <% for calendar in @calendars: %>
+  <div class="action" data-id="<%- calendar.id %>">
     <div class="action-flow action-flow--row">
       <div class="action-row">
         <div class="action-flow action-flow--noWrap">
@@ -82,5 +84,6 @@
       <% end %>
       <div class="sla-edit btn js-edit"><%- @T('Edit') %></div>
     </div>
+  </div>
+  <% end %>
 </div>
-<% end %>

app/assets/javascripts/app/views/channel/chat.jst.eco

@@ -3,7 +3,7 @@
     <h1><%- @T('Chat Widget') %></h1>
   </div>
 </div>
-<div>
+<div class="page-content">
   <p><%- @T('You can embedd this widget into your web page to allow visitors to directly chat with you.') %></p>
   
   <h2><%- @T('Designer') %></h2>
@@ -197,6 +197,5 @@ $(function() {
     </tbody>
   </table>
 <% end %>
-  <hr>
 
 </div>

app/assets/javascripts/app/views/channel/form.jst.eco

@@ -3,7 +3,7 @@
     <h1><%- @T('Form') %> <small></small></h1>
   </div>
 </div>
-<div>
+<div class="page-content">
   <p><%- @T('With form you can add a formular to your web page witch directly generates a Ticket for you.') %></p>
 
   <div class="js-settings"></div>

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

@@ -6,6 +6,7 @@
           <h1><%- @T( 'New Ticket' ) %></h1>
         </div>
 
+        <div class="page-content">
           <form role="form" class="ticket-create">
             <input type="hidden" name="form_id" value="<%= @form_id %>"/>
 
@@ -23,7 +24,7 @@
               <button type="submit" class="btn btn--success js-submit align-right"><%- @T( 'Create' ) %></button>
             </div>
           </form>
-
+        </div>
       </div>
     </div>
   </div>

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

@@ -14,4 +14,6 @@
   </div>
 </div>
 
-<div class="table-overview"></div>
+<div class="page-content">
+  <div class="table-overview"></div>
+</div>

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

@@ -16,6 +16,7 @@
       <h1><%- @T( @page.head ) %> <small><%- @T( @page.sub_head ) %></small></h1>
     </div>
   </div>
+  <div class="page-content">
     <div class="nav-tab-content"></div>
-
+  </div>
 </div>

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

@@ -3,9 +3,11 @@
     <h1><%- @T( @header ) %> <small><%- @T( @subHeader ) %></small></h1>
   </div>
 </div>
-<ul class="nav nav-tabs" role="tablist">
+<div class="page-content">
+  <ul class="nav nav-tabs" role="tablist">
     <% for tab in @tabs: %>
       <li><a href="#<%= tab.target %>" role="tab" data-toggle="tab"><%- @T( tab.name ) %></a></li>
     <% end %>
-</ul>
-<div class="tab-content"></div>
+  </ul>
+  <div class="tab-content"></div>
+</div>

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

@@ -1,7 +1,10 @@
-<div class="page-header-title">
+<div class="page-header">
+  <div class="page-header-title">
     <h1><%- @T('Maintenance Message') %><small></small></h1>
+  </div>
 </div>
-<form id="maintenanceForm">
+<div class="page-content">
+  <form id="maintenanceForm">
     <div class="form-group">
       <label for="maintenance-title"><%- @T('Title') %></label>
       <div class="controls">
@@ -15,7 +18,13 @@
       </div>
     </div>
     <div class="form-group">
-    <label><input name="reload" type="checkbox" value="1"> <%- @T('Reload application') %></label>
+      <label class="inline-label checkbox-replacement">
+        <input name="reload" type="checkbox" value="1">
+        <%- @Icon('checkbox', 'icon-unchecked') %>
+        <%- @Icon('checkbox-checked', 'icon-checked') %>
+        <span class="label-text"><%- @T('Reload application') %></span>
+      </label>
     </div>
     <button type="submit" class="btn btn--primary submit"><%- @T('Send to clients') %></button>
-</form>
+  </form>
+</div>

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

@@ -7,23 +7,24 @@
     <a class="btn btn--success js-new"><%- @T( 'New Attribute' ) %></a>
   </div>
 </div>
-<div class="box box--message">
+<div class="page-content">
+  <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="btn btn--text btn--secondary 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>
+  <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">
+  </div>
+  <table class="table table-striped table-hover is-disabled">
     <thead>
       <tr>
         <th class=""><%- @T('Display') %></th>
@@ -40,4 +41,5 @@
       </tr>
       <% end %>
     </tbody>
-</table>
+  </table>
+</div>

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

@@ -2,20 +2,21 @@
   <h1><%- @T( 'Package' ) %> <small><%- @T( 'Management' ) %></small></h1>
 </div>
 
-<!--
-<ul class="nav nav-tabs nav-stacked">
+<div class="page-content">
+  <!--
+  <ul class="nav nav-tabs nav-stacked">
     <li class=""><a data-type="" ><%- @T( 'Installed' ) %></a></li>
     <li class=""><a data-type="" ><%- @T( 'Store' ) %></a></li>
-</ul>
--->
-<p>
+  </ul>
+  -->
+  <p>
     <form action="<%= App.Config.get('api_path') %>/packages" method="post" enctype="multipart/form-data" class="horizontal center">
       <input type="file" name="file_upload"/>
       <button class="align-right btn btn--primary" type="submit"><%- @T('Install Package') %></button>
     </form>
-</p>
+  </p>
 
-<table class="table table-striped table-hover">
+  <table class="table table-striped table-hover">
     <thead>
       <tr>
         <th><%- @T('Name') %></th>
@@ -36,4 +37,5 @@
       </tr>
     <% end %>
     </tbody>
-</table>
+  </table>
+</div>

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

@@ -9,7 +9,7 @@
     <div class="btn btn--success fileUpload"><%- @T('Upload') %><input type="file" class="js-upload" accept="image/*"></div>
   </div>
 </div>
-<div class="avatar-gallery">
+<div class="page-content avatar-gallery">
   <% for avatar in @avatars: %>
   <div class="avatar-holder">
     <% if avatar.initial: %>

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

@@ -3,15 +3,16 @@
     <h1><%= @T('Calendar') %></h1>
   </div>
 </div>
-<h2><%= @T('Ticket Subscriptions') %></h2>
+<div class="page-content">
+  <h2><%= @T('Ticket Subscriptions') %></h2>
 
-<p><%= @T('See your tickets from within your favorite calendar by adding the following url to your calendar app.') %></p>
+  <p><%= @T('See your tickets from within your favorite calendar by adding the following url to your calendar app.') %></p>
 
-<h3><%= @T('URL') %></h3>
-<input class="form-control js-select" readonly value="<%= @baseurl %>/ical/tickets">
+  <h3><%= @T('URL') %></h3>
+  <input class="form-control js-select" readonly value="<%= @baseurl %>/ical/tickets">
 
-<h3><%= @T('Subscription Settings') %></h3>
-<table class="settings-list">
+  <h3><%= @T('Subscription Settings') %></h3>
+  <table class="settings-list">
     <thead>
       <tr>
         <th style="white-space: nowrap;"><%= @T('Status Type') %>
@@ -44,4 +45,5 @@
       </tr>
       <% end %>
     </tbody>
-</table>
+  </table>
+</div>

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

@@ -2,7 +2,7 @@
   <div class="page-header-title"><h1><%- @T( 'Devices' ) %></h1></div>
 </div>
 
-<form>
+<form class="page-content">
 
   <p><%- @T('All computers and browsers that have access to your Zammad appear here.') %></p>
 

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

@@ -3,8 +3,10 @@
     <h1><%- @T( 'Language' ) %></h1>
   </div>
 </div>
-<p><%- @T( 'Change your language.' ) %></p>
-<form class="settings-entry horizontal end">
+<div class="page-content">
+  <p><%- @T( 'Change your language.' ) %></p>
+  <form class="settings-entry horizontal end">
     <div class="form-item language_item flex"></div>
     <button type="submit" class="btn btn--primary"><%- @T( 'Submit' ) %></button>
-</form>
+  </form>
+</div>

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

@@ -3,7 +3,8 @@
     <h1><%- @T( 'Link Accounts' ) %></h1>
   </div>
 </div>
-<ul>
+<div class="page-content">
+  <ul>
     <% for auth_provider in @auth_providers: %>
       <li> <%- @T( auth_provider.name ) %>
         <% if !@user['accounts'] || !@user['accounts'][auth_provider.key]: %><a href="<%= auth_provider.url %>"><%- @T('Add') %></a>
@@ -11,4 +12,5 @@
         <% end %>
       </li>
     <% end %>
-</ul>
+  </ul>
+</div>

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

@@ -2,7 +2,7 @@
   <div class="page-header-title"><h1><%- @T( 'Notifications' ) %></h1></div>
 </div>
 
-<form>
+<form div class="page-content">
 
   <h3><%- @T( 'Matrix' ) %></h3>
 

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

@@ -3,7 +3,9 @@
     <h1><%- @T( 'Change your password' ) %></h1>
   </div>
 </div>
-<form class="settings-entry">
+<div class="page-content">
+  <form class="settings-entry">
     <div class="password_item"></div>
     <button type="submit" class="btn btn--primary"><%- @T( 'Submit' ) %></button>
-</form>
+  </form>
+</div>

app/assets/javascripts/app/views/report/main.jst.eco

@@ -11,7 +11,7 @@
 
     <div class="page-main">
       <div class="js-timeRangePicker"></div>
-      <div class="page-content">
+      <div class="well">
 
         <div id="placeholder" class="" style="height:350px;"></div>
         <span class=" muted" id="download-chart" style="font-size: 8px;"></span>

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

@@ -1,7 +1,8 @@
 <div class="page-header-title">
   <h1><%- @T('Sessions') %><small></small></h1>
 </div>
-<table class="table table-striped table-hover">
+<div class="page-content">
+  <table class="table table-striped table-hover">
     <thead>
       <tr>
         <th><%- @T('User') %></th>
@@ -24,4 +25,5 @@
       </tr>
       <% end %>
     </tbody>
-</table>
+  </table>
+</div>

app/assets/javascripts/app/views/settings/item.jst.eco

@@ -1,6 +1,6 @@
 <form class="settings-entry" id="<%= @setting.name %>">
   <h2><%- @T( @setting.title ) %></h2>
-  <p><%- @RichText( @setting.description ) %></p>
+  <p class="help-text"><%- @RichText( @setting.description ) %></p>
   <div class="horizontal end">
     <div class="form-item flex"></div>
     <button type="submit" class="btn btn--primary"><%- @T( 'Submit' ) %></button>

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

@@ -11,12 +11,15 @@
   </div>
 </div>
 
-<% if _.isEmpty(@slas): %>
-<%- @description %>
-<% end %>
+<div class="page-content">
+  <% if _.isEmpty(@slas): %>
+  <div class="page-description">
+    <%- @description %>
+  </div>
+  <% end %>
 
-<% for sla in @slas: %>
-<div class="action" data-id="<%- sla.id %>">
+  <% for sla in @slas: %>
+  <div class="action" data-id="<%- sla.id %>">
     <div class="action-flow action-flow--row">
       <div class="action-row">
         <h2><%= sla.name %></h2>
@@ -52,5 +55,6 @@
       <div class="sla-toggle btn btn--danger btn--secondary js-delete"><%- @T('Delete') %></div>
       <div class="sla-edit btn js-edit"><%- @T('Edit') %></div>
     </div>
+  </div>
+  <% end %>
 </div>
-<% end %>

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

@@ -9,5 +9,7 @@
     <div class="language"></div>
   </div>
 </div>
-<div class="js-ToDo"></div>
-<div class="js-List"></div>
+<div class="page-content">
+  <div class="js-ToDo"></div>
+  <div class="js-List"></div>
+</div>

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

@@ -10,19 +10,20 @@
     <% end %>
   </div>
 </div>
-
-<div class="searchfield">
+<div class="page-content">
+  <div class="searchfield">
     <%- @Icon('magnifier') %>
     <input class="js-search form-control" name="search" placeholder="<%- @Ti('Search for users') %>" type="search">
-</div>
+  </div>
 
-<div class="userSearch horizontal">
+  <div class="userSearch horizontal">
     <div class="userSearch-label"><%- @T('Roles') %>:</div>
     <div class="tabs tabs-wide">
       <% for role in @roles: %>
         <div class="tab" data-id="<%= role.id %>"><%- @T(role.displayName() ) %></div>
       <% end %>
     </div>
-</div>
+  </div>
 
-<div class="table-overview"></div>
+  <div class="table-overview"></div>
+</div>

app/assets/stylesheets/bootstrap.css

@@ -4168,28 +4168,6 @@ a.list-group-item-danger.active:focus {
 .embed-responsive.embed-responsive-4by3 {
   padding-bottom: 75%;
 }
-.well {
-  min-height: 20px;
-  padding: 19px;
-  margin-bottom: 20px;
-  background-color: #f5f5f5;
-  border: 1px solid #e3e3e3;
-  border-radius: 4px;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
-          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
-}
-.well blockquote {
-  border-color: #ddd;
-  border-color: rgba(0, 0, 0, .15);
-}
-.well-lg {
-  padding: 24px;
-  border-radius: 6px;
-}
-.well-sm {
-  padding: 9px;
-  border-radius: 3px;
-}
 .close {
   float: right;
   font-size: 21px;

app/assets/stylesheets/zammad.scss

@@ -40,7 +40,7 @@ use {
 }
 
 p {
-  margin: 14px 0;
+  margin: 12px 0;
 
   &.subtle {
     color: hsl(60,1%,74%);
@@ -1793,6 +1793,21 @@ kbd {
   }
 }
 
+.page-content {
+  label,
+  .label {
+    color: hsl(197,18%,70%);
+  }
+  .help-text,
+  .help-block {
+    color: hsl(198,19%,72%);
+  }
+}
+
+.page-description p {
+  color: initial;
+}
+
 .page-body--two-column {
   display: flex;
 }
@@ -1810,13 +1825,6 @@ kbd {
   flex: 1;
 }
 
-.page-content {
-  background: white;
-  border: 1px solid hsl(240,3%,92%);
-  border-radius: 3px;
-  padding: 10px;
-}
-
 .page-loading {
   min-height: 500px;
   display: flex;
@@ -1845,7 +1853,7 @@ kbd {
 }
 
 .help-block:not(:empty) {
-  margin: 6px 2px 10px;
+  margin: 8px 2px 10px;
 }
 
 /* replace music icon with attachment */
@@ -2497,6 +2505,13 @@ footer {
   color: #999999;
 }
 
+.well {
+  background: white;
+  border: 1px solid hsl(240,3%,92%);
+  border-radius: 3px;
+  padding: 10px;
+}
+
 .well-muted {
   background-color: whiteSmoke;
   border: 1px solid #eee;
@@ -6588,6 +6603,10 @@ output {
     color: hsl(198,18%,72%);
   }
 
+  .inline-label {
+    color: inherit;
+  }
+
   .btn--table {
     margin: 0;
   }
@@ -7417,7 +7436,6 @@ output {
   .tab {
     height: 39px;
     padding-top: 11px;
-    color: hsl(199,18%,72%);
     
     &.is-selected {
       background: linear-gradient(hsla(199,30%,40%,.08), hsla(199,30%,40%,.03));