Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

style reporting

Browse source
This commit is contained in:
Felix Niklas 2015-10-20 17:16:29 +02:00
parent c9db9202fb
commit 1a4b120696
7 changed files with 166 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/assets/javascripts/app/controllers/report.js.coffee
View file

@ -71,7 +71,7 @@ class Index extends App.ControllerContent
) )
new Sidebar( new Sidebar(
el: @el.find('.sidebar') el: @el.find('.js-aside')
config: @config config: @config
params: @params params: @params
) )
@ -87,6 +87,8 @@ class Graph extends App.ControllerContent
constructor: -> constructor: ->
super super
return
# rerender view # rerender view
@bind 'ui:report:rerender', => @bind 'ui:report:rerender', =>
@render() @render()
@ -449,7 +451,7 @@ class Sidebar extends App.Controller
events: events:
'click .js-profileSelector': 'selectProfile' 'click .js-profileSelector': 'selectProfile'
'click .js-backendSelector': 'selectBackend' 'click .js-backendSelector': 'selectBackend'
'click .panel-title': 'selectMetric' 'click .panel-heading': 'selectMetric'
constructor: -> constructor: ->
super super

43
app/assets/javascripts/app/views/report/main.jst.eco
View file

@ -1,29 +1,32 @@
<div class="sidebar"></div>
<div class="main flex"> <div class="main flex">
<div class="page-header clearfix"> <div class="page-header page-header--center">
<h1 class="pull-left"><%- @T( 'Reporting' ) %> <small></small></h1> <div class="page-header-title">
<div class="js-timeRangePicker pull-right" style="margin-top: 20px;"></div> <h1><%- @T( 'Reporting' ) %> <small></small></h1>
</div>
</div> </div>
<div class="page-content"></div> <div class="page-body page-body--two-column">
<div class="page-aside js-aside"></div>
<div id="placeholder" class="" style="width:710px;height:450px;"></div> <div class="page-main">
<div class="js-timeRangePicker"></div>
<div class="page-content">
<br> <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>
<!-- <!--
<a href="<%-@download%>" target="_blank" data-type="attachment" class="pull-right" id="download-chart"> <a href="<%-@download%>" target="_blank" data-type="attachment" class="pull-right" id="download-chart">
<i class="icon-download" title="<%- @Ti('Download') %>"></i> <i class="icon-download" title="<%- @Ti('Download') %>"></i>
</a> </a>
--> -->
<!-- <!--
<div id="overview" style="margin-left:50px;margin-top:20px;width:400px;height:50px"></div> <div id="overview" style="margin-left:50px;margin-top:20px;width:400px;height:50px"></div>
--> -->
<div class="js-timePicker"></div> <div class="js-timePicker"></div>
<br> <div class="js-dataDownload"></div>
<div class="js-dataDownload"></div> </div>
</div>
</div> </div>
</div> </div>

32
app/assets/javascripts/app/views/report/sidebar.jst.eco
View file

@ -1,19 +1,22 @@
<div class="panel-group" id="accordion"> <div class="panel-group" id="accordion">
<% for key, metric of @metrics: %> <% for key, metric of @metrics: %>
<div class="panel panel-default" data-metric="<%= metric.name %>"> <div class="panel panel-default" data-metric="<%= metric.name %>">
<div class="panel-heading"> <a class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapse-<%= metric.name %>">
<div class="panel-title"> <span class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse-<%= metric.name %>"> <%- @T(metric.display) %>
<%- @T(metric.display) %> </span>
</a> </a>
</div>
</div>
<div id="collapse-<%= metric.name %>" class="panel-collapse collapse <% if metric.name is @params.metric: %>in<% end %>"> <div id="collapse-<%= metric.name %>" class="panel-collapse collapse <% if metric.name is @params.metric: %>in<% end %>">
<div class="panel-body"> <div class="panel-body">
<ul class="type area_select"> <ul class="type area_select">
<% for backend in metric.backend: %> <% for backend in metric.backend: %>
<li style="display: block; margin-left: -12px;"><input class="js-backendSelector" type="checkbox" value="<%= backend.name %>" <% if @params.backendSelected[backend.name]: %>checked<% end %>/> <li>
<%- @T(backend.display) %> <label class="inline-label checkbox-replacement">
<input class="js-backendSelector" type="checkbox" value="<%= backend.name %>"<%- ' checked' if @params.backendSelected[backend.name] %>>
<%- @Icon('checkbox', 'icon-unchecked') %>
<%- @Icon('checkbox-checked', 'icon-checked') %>
<span class="label-text"><%- @T(backend.display) %></span>
</label>
</li> </li>
<% end %> <% end %>
</ul> </ul>
@ -24,10 +27,15 @@
</div> </div>
<h3><%- @T('Profiles') %></h3> <h3><%- @T('Profiles') %></h3>
<ul> <ul class="checkbox-list">
<% for profile in @profiles: %> <% for profile in @profiles: %>
<li style="display: block; margin-left: -12px;"><input class="js-profileSelector" type="radio" name="profile" value="<%= profile.id %>" <% if @params.profileSelected[profile.id]: %>checked<% end %>/> <li>
<%= profile.name %> <label class="inline-label radio-replacement">
<input class="js-profileSelector" type="radio" value="<%= profile.id %>"<%- ' checked' if @params.profileSelected[profile.id] %>>
<%- @Icon('radio', 'icon-unchecked') %>
<%- @Icon('radio-checked', 'icon-checked') %>
<span class="label-text"><%= profile.name %></span>
</label>
</li> </li>
<% end %> <% end %>
</ul> </ul>

19
app/assets/javascripts/app/views/report/time_picker.jst.eco
View file

@ -1,35 +1,32 @@
<div class=""> <div class="">
<% if @params.timeRange is 'day': %> <% if @params.timeRange is 'day': %>
<div class="btn-group" role="group" aria-label=""> <div class="btn-group btn-group--full" role="group" aria-label="">
<% for item in @timeRangeDay: %> <% for item in @timeRangeDay: %>
<button type="button" class="btn btn-default js-timePickerDay <% if @params.day is item.value: %>active<% end %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></button> <div class="btn btn--text js-timePickerDay<%- ' btn--positive' if @params.day is item.value %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
<% end %> <% end %>
</div> </div>
<br>
<% end %> <% end %>
<% if @params.timeRange is 'day' || @params.timeRange is 'month': %> <% if @params.timeRange is 'day' || @params.timeRange is 'month': %>
<div class="btn-group" role="group" aria-label=""> <div class="btn-group btn-group--full" role="group" aria-label="">
<% for item in @timeRangeMonth: %> <% for item in @timeRangeMonth: %>
<button type="button" class="btn btn-default js-timePickerMonth <% if @params.month is item.value: %>active<% end %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></button> <div class="btn btn--text js-timePickerMonth<%- ' btn--positive' if @params.month is item.value %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
<% end %> <% end %>
</div> </div>
<br>
<% end %> <% end %>
<% if @params.timeRange is 'week': %> <% if @params.timeRange is 'week': %>
<div class="btn-group" role="group" aria-label=""> <div class="btn-group btn-group--full" role="group" aria-label="">
<% for item in @timeRangeWeek: %> <% for item in @timeRangeWeek: %>
<button type="button" class="btn btn-default js-timePickerWeek <% if @params.week is item.value: %>active<% end %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></button> <div class="btn btn--text js-timePickerWeek<%- ' btn--positive' if @params.week is item.value %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
<% end %> <% end %>
</div> </div>
<br>
<% end %> <% end %>
<% if @params.timeRange isnt 'realtime': %> <% if @params.timeRange isnt 'realtime': %>
<div class="btn-group" role="group" aria-label=""> <div class="btn-group btn-group--full" role="group" aria-label="">
<% for item in @timeRangeYear: %> <% for item in @timeRangeYear: %>
<button type="button" class="btn btn-default js-timePickerYear <% if @params.year is item.value: %>active<% end %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></button> <div class="btn btn--text js-timePickerYear<%- ' btn--positive' if @params.year is item.value %>" data-id="<%= @params.timeRange %>" data-type="<%= item.value %>"><%= item.display %></div>
<% end %> <% end %>
</div> </div>
<% end %> <% end %>

12
app/assets/javascripts/app/views/report/time_range_picker.jst.eco
View file

@ -1,7 +1,7 @@
<div class="btn-group"> <div class="tabs">
<button type="button" class="btn js-timeRange" data-type="year"><%- @T('Year') %></button> <div class="tab js-timeRange active" data-type="year"><%- @T('Year') %></div>
<button type="button" class="btn js-timeRange" data-type="month"><%- @T('Month') %></button> <div class="tab js-timeRange" data-type="month"><%- @T('Month') %></div>
<button type="button" class="btn js-timeRange" data-type="week"><%- @T('Week') %></button> <div class="tab js-timeRange" data-type="week"><%- @T('Week') %></div>
<button type="button" class="btn js-timeRange" data-type="day"><%- @T('Day') %></button> <div class="tab js-timeRange" data-type="day"><%- @T('Day') %></div>
<button type="button" class="btn js-timeRange" data-type="realtime"><%- @T('Realtime') %></button> <div class="tab js-timeRange" data-type="realtime"><%- @T('Realtime') %></div>
</div> </div>

27
app/assets/stylesheets/bootstrap.css vendored
View file

@ -2254,33 +2254,6 @@ tbody.collapse.in {
left: 0; left: 0;
} }
} }
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle;
}
.btn-group > .btn,
.btn-group-vertical > .btn {
position: relative;
float: left;
}
.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover,
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus,
.btn-group > .btn:active,
.btn-group-vertical > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn.active {
z-index: 2;
}
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
margin-left: -1px;
}
.btn-toolbar { .btn-toolbar {
margin-left: -5px; margin-left: -5px;
} }

111
app/assets/stylesheets/zammad.scss
View file

@ -408,6 +408,7 @@ blockquote {
&:active { &:active {
color: hsl(203,65%,40%); color: hsl(203,65%,40%);
background: none;
} }
&.btn--secondary { &.btn--secondary {
@ -541,6 +542,30 @@ blockquote {
} }
} }
.btn-group {
display: inline-flex;
flex-wrap: wrap;
&.btn-group--full {
display: flex;
}
& + .btn-group {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid hsl(240,2%,92%);
}
.btn + .btn {
margin-left: 0;
}
.btn--text {
padding: 6px 10px 5px; /* reporting main.eco */
display: inline-block;
}
}
.buttonDropdown { .buttonDropdown {
display: flex; display: flex;
align-items: center; align-items: center;
@ -712,6 +737,18 @@ table {
vertical-align: middle; vertical-align: middle;
} }
.checkbox-list {
list-style: none;
margin-bottom: 15px;
padding: 3px 12px;
font-size: 14px;
line-height: 25px;
color: hsl(60,1%,34%);
background: white;
border: 1px solid hsl(0, 0%, 90%);
border-radius: 3px;
}
.checkbox-replacement, .checkbox-replacement,
.radio-replacement { .radio-replacement {
padding: 0; padding: 0;
@ -772,10 +809,6 @@ table {
float: right; float: right;
} }
.panel-title {
font-size: 14px;
}
#task { #task {
position: fixed; position: fixed;
display: table; display: table;
@ -1627,6 +1660,10 @@ kbd {
flex-wrap: wrap; flex-wrap: wrap;
} }
.page-header--center {
justify-content: center;
}
.page-header-title h1 { .page-header-title h1 {
margin-top: 9px; margin-top: 9px;
margin-bottom: 7px; margin-bottom: 7px;
@ -1652,6 +1689,29 @@ kbd {
} }
} }
.page-body--two-column {
display: flex;
}
.page-aside {
padding-right: 20px;
border-right: 1px solid hsl(0,0%,90%);
margin-right: 20px;
width: 240px;
flex-shrink: 0;
flex-grow: 0;
}
.page-main {
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;
@ -1849,11 +1909,13 @@ ol.tabs li {
} }
.tabs { .tabs {
display: flex;
padding: 0; padding: 0;
margin-bottom: 20px; margin-bottom: 20px;
color: #b8b8b8; color: #b8b8b8;
border: 1px solid rgba(0,8,14,.08); border: 1px solid rgba(0,8,14,.08);
border-radius: 3px; border-radius: 3px;
background: white;
} }
.tabs-condensed .tab { .tabs-condensed .tab {
@ -1866,8 +1928,8 @@ ol.tabs li {
} }
.tab { .tab {
height: 40px; height: 35px;
padding: 10px 20px; padding: 8px 20px;
text-align: center; text-align: center;
border-right: 1px solid rgba(0,8,14,.08); border-right: 1px solid rgba(0,8,14,.08);
flex: 1 1 auto; flex: 1 1 auto;
@ -1893,8 +1955,12 @@ ol.tabs li {
margin: 25px auto 20px; margin: 25px auto 20px;
font-size: 15px; font-size: 15px;
font-weight: 300; font-weight: 300;
background: white;
border-radius: 8px; border-radius: 8px;
.tab {
height: 40px;
padding: 10px 20px;
}
} }
.dashboard .wide-tabs { .dashboard .wide-tabs {
@ -2194,6 +2260,37 @@ footer {
margin-left: auto; margin-left: auto;
} }
.panel {
box-shadow: none;
color: hsl(60,1%,34%);
}
.panel-default > .panel-heading {
padding-bottom: 8px;
font-weight: normal;
text-transform: uppercase;
font-size: 12px;
line-height: 17px;
letter-spacing: 0.05em;
background: hsl(197, 20%, 93%);
background: hsl(197,20%,93%);
border-color: hsl(198,18%,86%);
}
.panel-title {
font-size: inherit;
}
.panel-group .panel-heading {
display: block;
}
.panel-body ul {
list-style: none;
padding: 0;
margin: 0;
}
.show_toogle { .show_toogle {
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 12px;