replace glyphicon edit icon with action button
and make the overview options a local modal
This commit is contained in:
parent
77020390ce
commit
28797b8c8c
4 changed files with 28 additions and 13 deletions
|
@ -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
|
||||||
|
|
|
@ -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 %>">
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in a new issue