mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-09-20 23:16:15 +08:00
Revamp of (top) toolbar + search field - inventories [SCI-8306]
This commit is contained in:
parent
bfaa5c991b
commit
a83625fbef
|
@ -110,6 +110,12 @@
|
|||
DataTableHelpers.initSearchField(dataTableWrapper, I18n.t('repositories.index.filter_inventory'));
|
||||
$('.content-body .toolbar').html($('#repositoriesListButtons').html());
|
||||
dataTableWrapper.find('.main-actions, .pagination-row').removeClass('hidden');
|
||||
var childHtml = $('.repo-view-switch').detach().html();
|
||||
$('.main-actions').append(childHtml);
|
||||
var removedDivs = $('.main-actions .filter-container').detach();
|
||||
$('.main-actions').append(removedDivs);
|
||||
initRepositoryViewSwitcher();
|
||||
|
||||
$('#createRepoBtn').initSubmitModal('#create-repo-modal', 'repository');
|
||||
$('#deleteRepoBtn').initSubmitModal('#delete-repo-modal', 'repository');
|
||||
$('#renameRepoBtn').initSubmitModal('#rename-repo-modal', 'repository');
|
||||
|
@ -143,7 +149,13 @@
|
|||
}
|
||||
|
||||
function initRepositoryViewSwitcher() {
|
||||
$('.view-switch-active').addClass('form-dropdown-state-item');
|
||||
if ($('.repositories-index').hasClass('active')) {
|
||||
$('.view-switch-btn-name').text(I18n.t('toolbar.active_state'));
|
||||
$('.view-switch-active').addClass('form-dropdown-state-item');
|
||||
} else {
|
||||
$('.view-switch-btn-name').text(I18n.t('toolbar.archived_state'));
|
||||
$('.view-switch-archived').addClass('form-dropdown-state-item');
|
||||
}
|
||||
|
||||
var viewSwitch = $('.view-switch');
|
||||
viewSwitch.on('click', '.view-switch-archived', function() {
|
||||
|
|
|
@ -1,4 +1,9 @@
|
|||
.repositories-index {
|
||||
|
||||
.toolbar-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
&.active {
|
||||
[data-view-mode="archived"] {
|
||||
display: none !important;
|
||||
|
@ -42,7 +47,88 @@
|
|||
}
|
||||
}
|
||||
|
||||
.dataTables_wrapper {
|
||||
.main-actions {
|
||||
.toolbar {
|
||||
flex-grow: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-actions {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.view-switch {
|
||||
.caret {
|
||||
margin: 8px 0 8px 8px;
|
||||
}
|
||||
|
||||
&.open {
|
||||
.caret {
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
@include font-button;
|
||||
min-width: 100%;
|
||||
|
||||
.divider-label {
|
||||
@include font-small;
|
||||
color: $color-silver-chalice;
|
||||
padding: .25em 1em;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
cursor: pointer;
|
||||
padding: .5em 1em;
|
||||
white-space: nowrap;
|
||||
|
||||
.button-icon {
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
&:hover:not(.divider-label) {
|
||||
background: $color-concrete;
|
||||
}
|
||||
|
||||
.btn {
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
margin: -1em;
|
||||
padding: .5em 1em;
|
||||
width: calc(100% + 2em);
|
||||
|
||||
&.selected::after {
|
||||
@include font-awesome;
|
||||
content: $font-fas-check;
|
||||
margin-left: auto;
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cards-switch {
|
||||
&.active::after {
|
||||
@include font-awesome;
|
||||
content: "\f00c";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
|
@ -19,14 +19,12 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.search-icon:not(.collapsed) {
|
||||
display: initial;
|
||||
}
|
||||
.search-icon:not(.collapsed) {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
.search-container:not(.expand) {
|
||||
display: none;
|
||||
}
|
||||
.search-container:not(.expand) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -4,14 +4,6 @@
|
|||
<div class="title-row">
|
||||
<h1 data-view-mode="active"><%= t('libraries.index.head_title') %></h1>
|
||||
<h1 data-view-mode="archived"><i class="fas fa-archive"></i> <%= t('libraries.index.head_title_archived') %></h1>
|
||||
<%= render layout: "shared/view_switch", locals: { disabled: false, name: params[:archived] ? t('toolbar.archived_state') : t('toolbar.active_state') } do %>
|
||||
<li class="view-switch-active">
|
||||
<%= t('toolbar.active_state') %>
|
||||
</li>
|
||||
<li class="view-switch-archived">
|
||||
<%= t('toolbar.archived_state') %>
|
||||
</li>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
|
|
|
@ -46,6 +46,19 @@
|
|||
<span class="hidden-xs"><%= t('libraries.index.no_libraries.create_new_button') %></span>
|
||||
</a>
|
||||
<% end %>
|
||||
|
||||
<div class="content-header repo-view-switch">
|
||||
<%= render layout: "shared/view_switch", locals: { disabled: false, name: params[:archived] ? t('toolbar.archived_state') : t('toolbar.active_state') } do %>
|
||||
<li class="view-switch-active">
|
||||
<%= t('toolbar.active_state') %>
|
||||
</li>
|
||||
<li class="view-switch-archived">
|
||||
<%= t('toolbar.archived_state') %>
|
||||
</li>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<a id="renameRepoBtn" class="btn btn-light disabled hidden" data-view-mode="active" href="#" data-action-mode="single" data-remote="true">
|
||||
<span class="fas fa-pencil-alt"></span>
|
||||
<%= t('libraries.index.buttons.edit') %>
|
||||
|
@ -76,6 +89,7 @@
|
|||
<span class="fas fa-trash"></span>
|
||||
<%= t('libraries.index.buttons.delete') %>
|
||||
</a>
|
||||
-->
|
||||
</template>
|
||||
|
||||
<%= javascript_include_tag "repositories/index" %>
|
||||
|
|
Loading…
Reference in a new issue