admin pages: add page-content and style containing labels

This commit is contained in:
Felix Niklas 2015-11-17 12:10:04 +01:00
parent b6c1973e0e
commit 1d3c849187
27 changed files with 419 additions and 381 deletions

View file

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

View file

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

View file

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

View file

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

View file

@ -3,7 +3,7 @@
<h1><%- @T('Form') %> <small></small></h1> <h1><%- @T('Form') %> <small></small></h1>
</div> </div>
</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> <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> <div class="js-settings"></div>

View file

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

View file

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

View file

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

View file

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

View file

@ -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> <h1><%- @T('Maintenance Message') %><small></small></h1>
</div>
</div> </div>
<form id="maintenanceForm"> <div class="page-content">
<form id="maintenanceForm">
<div class="form-group"> <div class="form-group">
<label for="maintenance-title"><%- @T('Title') %></label> <label for="maintenance-title"><%- @T('Title') %></label>
<div class="controls"> <div class="controls">
@ -15,7 +18,13 @@
</div> </div>
</div> </div>
<div class="form-group"> <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> </div>
<button type="submit" class="btn btn--primary submit"><%- @T('Send to clients') %></button> <button type="submit" class="btn btn--primary submit"><%- @T('Send to clients') %></button>
</form> </form>
</div>

View file

@ -7,23 +7,24 @@
<a class="btn btn--success js-new"><%- @T( 'New Attribute' ) %></a> <a class="btn btn--success js-new"><%- @T( 'New Attribute' ) %></a>
</div> </div>
</div> </div>
<div class="box box--message"> <div class="page-content">
<div class="box box--message">
<h2>Database Update required</h2> <h2>Database Update required</h2>
<p><%- @T( 'Changes were made that require a database update. This might take some time.' ) %></p> <p><%- @T( 'Changes were made that require a database update. This might take some time.' ) %></p>
<div class="box-controls"> <div class="box-controls">
<div class="btn btn--text btn--secondary js-discard">Discard Changes</div> <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 class="btn btn--primary js-sync align-right"><%- @T( 'Update Database' ) %></div>
</div> </div>
</div> </div>
<div class="box box--message"> <div class="box box--message">
<div class="box-progress"> <div class="box-progress">
<div class="box-progress-title"><%- @T('Updating Database') %></div> <div class="box-progress-title"><%- @T('Updating Database') %></div>
<div class="box-progress-body"> <div class="box-progress-body">
<progress max="100" value="50"></progress> <progress max="100" value="50"></progress>
</div> </div>
</div> </div>
</div> </div>
<table class="table table-striped table-hover is-disabled"> <table class="table table-striped table-hover is-disabled">
<thead> <thead>
<tr> <tr>
<th class=""><%- @T('Display') %></th> <th class=""><%- @T('Display') %></th>
@ -40,4 +41,5 @@
</tr> </tr>
<% end %> <% end %>
</tbody> </tbody>
</table> </table>
</div>

View file

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

View file

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

View file

@ -3,15 +3,16 @@
<h1><%= @T('Calendar') %></h1> <h1><%= @T('Calendar') %></h1>
</div> </div>
</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> <h3><%= @T('URL') %></h3>
<input class="form-control js-select" readonly value="<%= @baseurl %>/ical/tickets"> <input class="form-control js-select" readonly value="<%= @baseurl %>/ical/tickets">
<h3><%= @T('Subscription Settings') %></h3> <h3><%= @T('Subscription Settings') %></h3>
<table class="settings-list"> <table class="settings-list">
<thead> <thead>
<tr> <tr>
<th style="white-space: nowrap;"><%= @T('Status Type') %> <th style="white-space: nowrap;"><%= @T('Status Type') %>
@ -44,4 +45,5 @@
</tr> </tr>
<% end %> <% end %>
</tbody> </tbody>
</table> </table>
</div>

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -4168,28 +4168,6 @@ a.list-group-item-danger.active:focus {
.embed-responsive.embed-responsive-4by3 { .embed-responsive.embed-responsive-4by3 {
padding-bottom: 75%; 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 { .close {
float: right; float: right;
font-size: 21px; font-size: 21px;

View file

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