replace glyphicon edit icon with action button

and make the overview options a local modal
This commit is contained in:
Felix Niklas 2015-01-21 04:17:33 +01:00
parent 77020390ce
commit 28797b8c8c
4 changed files with 28 additions and 13 deletions

View file

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

View file

@ -2,9 +2,12 @@
<div class="tableOverview flex scrollable"> <div class="tableOverview flex scrollable">
<div class="horizontal"> <div class="horizontal">
<div class="page-header-title"> <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>
<div class="page-header-meta"> <div class="page-header-meta">
<% if @edit: %>
<div class="btn btn--action" data-type="settings"><%- @T('Options') %></div>
<% end %>
<ul class="pagination"> <ul class="pagination">
<% for item in @view_modes: %> <% for item in @view_modes: %>
<li class="<%= item.class %>"> <li class="<%= item.class %>">

View file

@ -1,9 +1,10 @@
<div> <div>
<div class="horizontal"> <div class="horizontal">
<div class="page-header-title"> <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>
<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"> <div class="pagination-counter">
<span class="pagination-items-range"><%- @items_from %>-<%- @items_till %></span> <%- @T("of") %> <span class="pagination-total-items"><%- @items_total %></span> <span class="pagination-items-range"><%- @items_from %>-<%- @items_till %></span> <%- @T("of") %> <span class="pagination-total-items"><%- @items_total %></span>
</div> </div>

View file

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