mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-09-24 22:16:24 +08:00
Add sticky toolbar for projects page [SCI-5401] (#3108)
* Add sticky toolbar for projects page [SCI-5401]
This commit is contained in:
parent
cea61a6bd2
commit
8396c086f5
9 changed files with 437 additions and 401 deletions
|
@ -762,8 +762,6 @@ li.module-hover {
|
|||
}
|
||||
|
||||
.projects-toolbar {
|
||||
margin-bottom: 1em;
|
||||
|
||||
.form-group {
|
||||
width: 100%;
|
||||
}
|
||||
|
@ -1157,10 +1155,14 @@ li.module-hover {
|
|||
display: flex;
|
||||
height: 3em;
|
||||
padding: 0 .5em;
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
top: 13em;
|
||||
width: calc(100% + 1em);
|
||||
z-index: 2;
|
||||
|
||||
&.select-all-checkboxes {
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -31,66 +31,70 @@
|
|||
|
||||
|
||||
#repository-toolbar {
|
||||
align-items: center;
|
||||
background-color: $color-white;
|
||||
border: 0;
|
||||
display: flex;
|
||||
left: var(--repository-sidebar-margin);
|
||||
padding: 0 2em;
|
||||
position: fixed;
|
||||
transition: .4s $timing-function-sharp;
|
||||
width: calc(100% - var(--repository-sidebar-margin));
|
||||
z-index: 100;
|
||||
|
||||
.toolbar-delimiter {
|
||||
border-bottom: $border-tertiary;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
width: calc(100% - 4em);
|
||||
}
|
||||
|
||||
.repository-share-icon {
|
||||
flex-shrink: 0;
|
||||
margin-top: -2px;
|
||||
|
||||
.fas-custom {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
@include font-button;
|
||||
}
|
||||
|
||||
.repository-title-name {
|
||||
@include font-h2;
|
||||
.title-row {
|
||||
align-items: center;
|
||||
background-color: $color-white;
|
||||
border: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
line-height: 32px;
|
||||
margin-right: 20px;
|
||||
overflow: hidden;
|
||||
padding-left: 5px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
left: var(--repository-sidebar-margin);
|
||||
margin-left: 0em;
|
||||
padding: 0 2em;
|
||||
position: fixed;
|
||||
transition: .4s $timing-function-sharp;
|
||||
width: calc(100% - var(--repository-sidebar-margin));
|
||||
z-index: 100;
|
||||
|
||||
.name-container {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
height: 32px;
|
||||
margin: 0;
|
||||
.toolbar-delimiter {
|
||||
border-bottom: $border-tertiary;
|
||||
bottom: 0;
|
||||
margin-left: -2em;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.read-only-name {
|
||||
display: inline-block;
|
||||
line-height: 32px;
|
||||
max-width: calc(100% - 30px);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
.repository-share-icon {
|
||||
flex-shrink: 0;
|
||||
margin-top: -2px;
|
||||
|
||||
.fas-custom {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.inline-editing-container {
|
||||
width: 100%;
|
||||
.dropdown-menu {
|
||||
@include font-button;
|
||||
}
|
||||
|
||||
.repository-title-name {
|
||||
@include font-h2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
line-height: 32px;
|
||||
margin-right: 20px;
|
||||
overflow: hidden;
|
||||
padding-left: 5px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
.name-container {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
height: 32px;
|
||||
margin: 0;
|
||||
|
||||
.read-only-name {
|
||||
display: inline-block;
|
||||
line-height: 32px;
|
||||
max-width: calc(100% - 30px);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.inline-editing-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,3 +1,6 @@
|
|||
// scss-lint:disable SelectorDepth SelectorFormat
|
||||
// scss-lint:disable NestingDepth QualifyingElement
|
||||
|
||||
.content-pane {
|
||||
background-color: $color-white;
|
||||
margin: 20px 0;
|
||||
|
@ -9,50 +12,68 @@
|
|||
}
|
||||
|
||||
.content-header {
|
||||
align-items: center;
|
||||
border-bottom: $border-tertiary;
|
||||
display: flex;
|
||||
height: 5em;
|
||||
|
||||
h1 {
|
||||
flex-grow: 1;
|
||||
margin: 0;
|
||||
&.sticky-header {
|
||||
background: $color-white;
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
top: var(--navbar-height);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.view-switch {
|
||||
margin-left: auto;
|
||||
.title-row {
|
||||
align-items: center;
|
||||
border-bottom: $border-tertiary;
|
||||
display: flex;
|
||||
height: 5em;
|
||||
margin-left: -2em;
|
||||
padding-left: 2em;
|
||||
width: calc(100% + 4em);
|
||||
|
||||
.caret {
|
||||
margin: 8px 0 8px 8px;
|
||||
h1 {
|
||||
flex-grow: 1;
|
||||
margin: 0;
|
||||
}
|
||||
&.open {
|
||||
|
||||
.view-switch {
|
||||
margin-left: auto;
|
||||
|
||||
.caret {
|
||||
transform: rotateX(180deg)
|
||||
margin: 8px 0 8px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
@include font-button;
|
||||
min-width: auto;
|
||||
|
||||
li {
|
||||
cursor: pointer;
|
||||
padding: 1em;
|
||||
white-space: nowrap;
|
||||
|
||||
.button-icon {
|
||||
margin-right: .5em;
|
||||
&.open {
|
||||
.caret {
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $color-concrete;
|
||||
.dropdown-menu {
|
||||
@include font-button;
|
||||
min-width: auto;
|
||||
|
||||
li {
|
||||
cursor: pointer;
|
||||
padding: 1em;
|
||||
white-space: nowrap;
|
||||
|
||||
.button-icon {
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $color-concrete;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-body {
|
||||
|
||||
.toolbar-row {
|
||||
border-bottom: $border-tertiary;
|
||||
margin-left: -2em;
|
||||
padding: 1em 0;
|
||||
padding-left: 2em;
|
||||
width: calc(100% + 4em);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -21,9 +21,7 @@
|
|||
<%= render partial: 'projects/index/modals/export_projects' %>
|
||||
|
||||
<div class="projects-container">
|
||||
<div id="toolbarWrapper">
|
||||
</div>
|
||||
<div class="cards-wrapper" id="cardsWrapper" data-projects-cards-url="<%= current_folder ? project_folder_cards_url(current_folder) : cards_projects_url %>">
|
||||
<div class="cards-wrapper" id="cardsWrapper" data-projects-cards-url="<%= @current_folder ? project_folder_cards_url(@current_folder) : cards_projects_url %>">
|
||||
<div class="table-header">
|
||||
<div class="table-header-cell select-all-checkboxes">
|
||||
<div class="sci-checkbox-container">
|
||||
|
|
|
@ -1,168 +1,172 @@
|
|||
<div class="content-header">
|
||||
<h1 data-view-mode="active"><%= t('projects.index.head_title') %></h1>
|
||||
<h1 data-view-mode="archived"><i class="fas fa-archive"></i> <%= t('projects.index.head_title_archived') %></h1>
|
||||
<div class="content-header sticky-header">
|
||||
<div class="title-row">
|
||||
<h1 data-view-mode="active"><%= t('projects.index.head_title') %></h1>
|
||||
<h1 data-view-mode="archived"><i class="fas fa-archive"></i> <%= t('projects.index.head_title_archived') %></h1>
|
||||
|
||||
<div class="sci-btn-group header-actions">
|
||||
<%= render layout: 'shared/view_switch', locals: { disabled: false } do %>
|
||||
<li class="view-switch-cards projects-view-mode active">
|
||||
<i class="fas fa-th-large button-icon"></i> <%= t('projects.index.header.cards') %>
|
||||
</li>
|
||||
<div class="sci-btn-group header-actions">
|
||||
<%= render layout: 'shared/view_switch', locals: { disabled: false } do %>
|
||||
<li class="view-switch-cards projects-view-mode active">
|
||||
<i class="fas fa-th-large button-icon"></i> <%= t('projects.index.header.cards') %>
|
||||
</li>
|
||||
|
||||
<li class="view-switch-list projects-view-mode ">
|
||||
<i class="fas fa-list button-icon"></i> <%= t('projects.index.header.table') %>
|
||||
</li>
|
||||
<li class="view-switch-list projects-view-mode ">
|
||||
<i class="fas fa-list button-icon"></i> <%= t('projects.index.header.table') %>
|
||||
</li>
|
||||
|
||||
<li class="view-switch-active archive-switch" data-view-mode="archived" data-url="<%= projects_path %>">
|
||||
<i class="fas fa-rocket button-icon"></i> <%= t('projects.index.header.active_projects') %>
|
||||
</li>
|
||||
<li class="view-switch-active archive-switch" data-view-mode="archived" data-url="<%= projects_path %>">
|
||||
<i class="fas fa-rocket button-icon"></i> <%= t('projects.index.header.active_projects') %>
|
||||
</li>
|
||||
|
||||
<li class="view-switch-archived archive-switch" data-view-mode="active" data-url="<%= projects_path(view_mode: 'archived') %>">
|
||||
<i class="fas fa-archive button-icon"></i> <%= t('projects.index.header.archived_projects') %>
|
||||
</li>
|
||||
<% end %>
|
||||
<div class="filter-container dropdown project-filters-dropdown">
|
||||
<button class="btn btn-light icon-btn filter-button" data-toggle="dropdown"><i class="fas fa-filter"></i></button>
|
||||
<div class="dropdown-menu dropdown-menu-right projects-filters" role="menu" data-team-id="<%= current_team.id %>">
|
||||
<div class="header">
|
||||
<div class="title"><%= t("projects.index.filters_modal.title") %></div>
|
||||
<div class="btn btn-light clear-button">
|
||||
<i class="fas fa-times-circle"></i><%= t("projects.index.filters_modal.clear_btn") %></div>
|
||||
</div>
|
||||
<div class="select-block dropdown-selector-container">
|
||||
<label><%= t('projects.index.filters_modal.text.label') %></label>
|
||||
<div class="input-field dropdown text-search-filter">
|
||||
<input id="textSearchFilterInput"
|
||||
class="dropdown-toggle search-field"
|
||||
type="text"
|
||||
name="search"
|
||||
autocomplete="off"
|
||||
data-toggle="dropdown"
|
||||
placeholder="<%= t('projects.index.filters_modal.text.placeholder') %>">
|
||||
<li class="view-switch-archived archive-switch" data-view-mode="active" data-url="<%= projects_path(view_mode: 'archived') %>">
|
||||
<i class="fas fa-archive button-icon"></i> <%= t('projects.index.header.archived_projects') %>
|
||||
</li>
|
||||
<% end %>
|
||||
<div class="filter-container dropdown project-filters-dropdown">
|
||||
<button class="btn btn-light icon-btn filter-button" data-toggle="dropdown"><i class="fas fa-filter"></i></button>
|
||||
<div class="dropdown-menu dropdown-menu-right projects-filters" role="menu" data-team-id="<%= current_team.id %>">
|
||||
<div class="header">
|
||||
<div class="title"><%= t("projects.index.filters_modal.title") %></div>
|
||||
<div class="btn btn-light clear-button">
|
||||
<i class="fas fa-times-circle"></i><%= t("projects.index.filters_modal.clear_btn") %></div>
|
||||
</div>
|
||||
<div id="textSearchFilterHistory" class="dropdown-menu recent-searches" aria-labelledby="textSearchFilterInput">
|
||||
<label><%= t("projects.index.filters_modal.recent_searches_label") %></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="select-block">
|
||||
<div class="created-on-label">
|
||||
<label><%= t("projects.index.filters_modal.created_on.label") %></label>
|
||||
</div>
|
||||
<div class="datetime-picker-container" id="from-date">
|
||||
<span class="fas fa-calendar-alt"></span>
|
||||
<input id="createdOnFromDate"
|
||||
type="datetime"
|
||||
data-toggle='date-time-picker'
|
||||
class="form-control calendar-input"
|
||||
readonly
|
||||
placeholder="<%= t('projects.index.filters_modal.created_on.from_placeholder') %>"
|
||||
data-date-format="<%= datetime_picker_format_full %>"
|
||||
data-date-locale="<%= I18n.locale %>"
|
||||
data-date-use-current="false"
|
||||
value=""/>
|
||||
</div>
|
||||
|
||||
<div class="connect-line"></div>
|
||||
|
||||
<div class="datetime-picker-container" id="to-date">
|
||||
<span class="fas fa-calendar-alt"></span>
|
||||
<input id="createdOnToDate"
|
||||
type="datetime"
|
||||
data-toggle='date-time-picker'
|
||||
class="form-control calendar-input"
|
||||
readonly
|
||||
placeholder="<%= t('projects.index.filters_modal.created_on.to_placeholder') %>"
|
||||
data-date-format="<%= datetime_picker_format_full %>"
|
||||
data-date-locale="<%= I18n.locale %>"
|
||||
data-date-use-current="false"
|
||||
data-date-orientation="left"
|
||||
value=""/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="select-block">
|
||||
<label><%= t("projects.index.filters_modal.members.label") %></label>
|
||||
<select class="members-filter"
|
||||
data-ajax-url="<%= users_filter_projects_path %>"
|
||||
data-placeholder="<%= t('projects.index.filters_modal.members.placeholder') %>">
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="select-block" data-view-mode="archived">
|
||||
<div class="created-on-label">
|
||||
<label><%= t("projects.index.filters_modal.archived_on.label") %></label>
|
||||
</div>
|
||||
<div class="datetime-picker-container" id="from-date">
|
||||
<span class="fas fa-calendar-alt"></span>
|
||||
<input id="archivedOnFromDate"
|
||||
type="datetime"
|
||||
data-toggle='date-time-picker'
|
||||
class="form-control calendar-input"
|
||||
readonly
|
||||
placeholder="<%= t('projects.index.filters_modal.created_on.from_placeholder') %>"
|
||||
data-date-format="<%= datetime_picker_format_full %>"
|
||||
data-date-locale="<%= I18n.locale %>"
|
||||
data-date-use-current="false"
|
||||
value=""/>
|
||||
</div>
|
||||
|
||||
<div class="connect-line"></div>
|
||||
|
||||
<div class="datetime-picker-container" id="to-date">
|
||||
<span class="fas fa-calendar-alt"></span>
|
||||
<input id="archivedOnToDate"
|
||||
type="datetime"
|
||||
data-toggle='date-time-picker'
|
||||
class="form-control calendar-input"
|
||||
readonly
|
||||
placeholder="<%= t('projects.index.filters_modal.created_on.to_placeholder') %>"
|
||||
data-date-format="<%= datetime_picker_format_full %>"
|
||||
data-date-locale="<%= I18n.locale %>"
|
||||
data-date-use-current="false"
|
||||
data-date-orientation="left"
|
||||
value=""/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="select-block folders">
|
||||
<span class="sci-checkbox-container">
|
||||
<%= check_box_tag :folder_search, 'accepted', false, {class: "sci-checkbox"} %>
|
||||
<span class="sci-checkbox-label"></span>
|
||||
</span>
|
||||
<span class="folder-search-label"><%= t("projects.index.filters_modal.folders.label") %></span>
|
||||
<div class="dropdown folder-search-info">
|
||||
<a class="fas fa-info-circle" id="folderSearchInfoBtn" data-toggle="dropdown"></a>
|
||||
<div id="folderSearchInfo" class="dropdown-menu folder-search-popover" aria-labelledby="folderSearchInfo">
|
||||
<%= t("projects.index.filters_modal.folders.popover_html") %>
|
||||
<div class="select-block dropdown-selector-container">
|
||||
<label><%= t('projects.index.filters_modal.text.label') %></label>
|
||||
<div class="input-field dropdown text-search-filter">
|
||||
<input id="textSearchFilterInput"
|
||||
class="dropdown-toggle search-field"
|
||||
type="text"
|
||||
name="search"
|
||||
autocomplete="off"
|
||||
data-toggle="dropdown"
|
||||
placeholder="<%= t('projects.index.filters_modal.text.placeholder') %>">
|
||||
</div>
|
||||
<div id="textSearchFilterHistory" class="dropdown-menu recent-searches" aria-labelledby="textSearchFilterInput">
|
||||
<label><%= t("projects.index.filters_modal.recent_searches_label") %></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="select-block">
|
||||
<div class="created-on-label">
|
||||
<label><%= t("projects.index.filters_modal.created_on.label") %></label>
|
||||
</div>
|
||||
<div class="datetime-picker-container" id="from-date">
|
||||
<span class="fas fa-calendar-alt"></span>
|
||||
<input id="createdOnFromDate"
|
||||
type="datetime"
|
||||
data-toggle='date-time-picker'
|
||||
class="form-control calendar-input"
|
||||
readonly
|
||||
placeholder="<%= t('projects.index.filters_modal.created_on.from_placeholder') %>"
|
||||
data-date-format="<%= datetime_picker_format_full %>"
|
||||
data-date-locale="<%= I18n.locale %>"
|
||||
data-date-use-current="false"
|
||||
value=""/>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div id="applyProjectFiltersButton" class="btn btn-primary"><%= t("projects.index.filters_modal.show_btn.one") %></div>
|
||||
<div class="connect-line"></div>
|
||||
|
||||
<div class="datetime-picker-container" id="to-date">
|
||||
<span class="fas fa-calendar-alt"></span>
|
||||
<input id="createdOnToDate"
|
||||
type="datetime"
|
||||
data-toggle='date-time-picker'
|
||||
class="form-control calendar-input"
|
||||
readonly
|
||||
placeholder="<%= t('projects.index.filters_modal.created_on.to_placeholder') %>"
|
||||
data-date-format="<%= datetime_picker_format_full %>"
|
||||
data-date-locale="<%= I18n.locale %>"
|
||||
data-date-use-current="false"
|
||||
data-date-orientation="left"
|
||||
value=""/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="select-block">
|
||||
<label><%= t("projects.index.filters_modal.members.label") %></label>
|
||||
<select class="members-filter"
|
||||
data-ajax-url="<%= users_filter_projects_path %>"
|
||||
data-placeholder="<%= t('projects.index.filters_modal.members.placeholder') %>">
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="select-block" data-view-mode="archived">
|
||||
<div class="created-on-label">
|
||||
<label><%= t("projects.index.filters_modal.archived_on.label") %></label>
|
||||
</div>
|
||||
<div class="datetime-picker-container" id="from-date">
|
||||
<span class="fas fa-calendar-alt"></span>
|
||||
<input id="archivedOnFromDate"
|
||||
type="datetime"
|
||||
data-toggle='date-time-picker'
|
||||
class="form-control calendar-input"
|
||||
readonly
|
||||
placeholder="<%= t('projects.index.filters_modal.created_on.from_placeholder') %>"
|
||||
data-date-format="<%= datetime_picker_format_full %>"
|
||||
data-date-locale="<%= I18n.locale %>"
|
||||
data-date-use-current="false"
|
||||
value=""/>
|
||||
</div>
|
||||
|
||||
<div class="connect-line"></div>
|
||||
|
||||
<div class="datetime-picker-container" id="to-date">
|
||||
<span class="fas fa-calendar-alt"></span>
|
||||
<input id="archivedOnToDate"
|
||||
type="datetime"
|
||||
data-toggle='date-time-picker'
|
||||
class="form-control calendar-input"
|
||||
readonly
|
||||
placeholder="<%= t('projects.index.filters_modal.created_on.to_placeholder') %>"
|
||||
data-date-format="<%= datetime_picker_format_full %>"
|
||||
data-date-locale="<%= I18n.locale %>"
|
||||
data-date-use-current="false"
|
||||
data-date-orientation="left"
|
||||
value=""/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="select-block folders">
|
||||
<span class="sci-checkbox-container">
|
||||
<%= check_box_tag :folder_search, 'accepted', false, {class: "sci-checkbox"} %>
|
||||
<span class="sci-checkbox-label"></span>
|
||||
</span>
|
||||
<span class="folder-search-label"><%= t("projects.index.filters_modal.folders.label") %></span>
|
||||
<div class="dropdown folder-search-info">
|
||||
<a class="fas fa-info-circle" id="folderSearchInfoBtn" data-toggle="dropdown"></a>
|
||||
<div id="folderSearchInfo" class="dropdown-menu folder-search-popover" aria-labelledby="folderSearchInfo">
|
||||
<%= t("projects.index.filters_modal.folders.popover_html") %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div id="applyProjectFiltersButton" class="btn btn-primary"><%= t("projects.index.filters_modal.show_btn.one") %></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown projects-sort-menu">
|
||||
<button class="btn btn-light dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<span><i class="fas fa-sort-amount-down"></i></span>
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul id="sortMenuDropdown" class="dropdown-menu sort-projects-menu dropdown-menu-right" aria-labelledby="sortMenu">
|
||||
<% %w(new old atoz ztoa archived_new archived_old).each_with_index do |sort, i| %>
|
||||
<% if i.even? && i.positive? %>
|
||||
<li class="divider" <%= i > 3 ? 'data-view-mode=archived' : '' %>></li>
|
||||
<div class="dropdown projects-sort-menu">
|
||||
<button class="btn btn-light dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<span><i class="fas fa-sort-amount-down"></i></span>
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul id="sortMenuDropdown" class="dropdown-menu sort-projects-menu dropdown-menu-right" aria-labelledby="sortMenu">
|
||||
<% %w(new old atoz ztoa archived_new archived_old).each_with_index do |sort, i| %>
|
||||
<% if i.even? && i.positive? %>
|
||||
<li class="divider" <%= i > 3 ? 'data-view-mode=archived' : '' %>></li>
|
||||
<% end %>
|
||||
<li <%= %w(archived_new archived_old).include?(sort) ? 'data-view-mode=archived' : '' %>>
|
||||
<a class="<%= 'selected' if @current_sort == sort %>"
|
||||
data-sort="<%= sort %>" >
|
||||
<%= t("general.sort.#{sort}_html") %>
|
||||
</a>
|
||||
</li>
|
||||
<% end %>
|
||||
<li <%= %w(archived_new archived_old).include?(sort) ? 'data-view-mode=archived' : '' %>>
|
||||
<a class="<%= 'selected' if @current_sort == sort %>"
|
||||
data-sort="<%= sort %>" >
|
||||
<%= t("general.sort.#{sort}_html") %>
|
||||
</a>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="toolbarWrapper" class="toolbar-row">
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,35 +1,37 @@
|
|||
<div class="content-header">
|
||||
<h1 class="project-name">
|
||||
<% if @inline_editable_title_config.present? %>
|
||||
<%= render partial: "shared/inline_editing",
|
||||
locals: {
|
||||
initial_value: @project.name,
|
||||
config: @inline_editable_title_config
|
||||
} %>
|
||||
<% else %>
|
||||
<% if action_name == 'experiment_archive' %>
|
||||
<i class="fas fa-archive"></i>
|
||||
<% end %>
|
||||
<%= @project.name %>
|
||||
<% end %>
|
||||
</h1>
|
||||
<div class="header-actions">
|
||||
<div class="dropdown experiment-sort-menu">
|
||||
<button class="btn btn-light icon-btn dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<i class="fas fa-sort-amount-up"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="sortMenu">
|
||||
<% ["new", "old", "atoz", "ztoa", "archived_new", "archived_old"].each_with_index do |sort, i| %>
|
||||
<% unless action_name != 'experiment_archive' && sort.include?('arch') %>
|
||||
<% if i.even? && i.positive? %>
|
||||
<li class="divider"></li>
|
||||
<% end %>
|
||||
<li>
|
||||
<a class="<%= 'selected' if @current_sort == sort %>" href="?<%= {sort: sort}.reject{|v| v.to_s == "0"}.to_query %>"><%= t("general.sort.#{sort}_html") %></a>
|
||||
</li>
|
||||
<% end %>
|
||||
<div class="title-row">
|
||||
<h1 class="project-name">
|
||||
<% if @inline_editable_title_config.present? %>
|
||||
<%= render partial: "shared/inline_editing",
|
||||
locals: {
|
||||
initial_value: @project.name,
|
||||
config: @inline_editable_title_config
|
||||
} %>
|
||||
<% else %>
|
||||
<% if action_name == 'experiment_archive' %>
|
||||
<i class="fas fa-archive"></i>
|
||||
<% end %>
|
||||
</ul>
|
||||
<%= @project.name %>
|
||||
<% end %>
|
||||
</h1>
|
||||
<div class="header-actions">
|
||||
<div class="dropdown experiment-sort-menu">
|
||||
<button class="btn btn-light icon-btn dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<i class="fas fa-sort-amount-up"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="sortMenu">
|
||||
<% ["new", "old", "atoz", "ztoa", "archived_new", "archived_old"].each_with_index do |sort, i| %>
|
||||
<% unless action_name != 'experiment_archive' && sort.include?('arch') %>
|
||||
<% if i.even? && i.positive? %>
|
||||
<li class="divider"></li>
|
||||
<% end %>
|
||||
<li>
|
||||
<a class="<%= 'selected' if @current_sort == sort %>" href="?<%= {sort: sort}.reject{|v| v.to_s == "0"}.to_query %>"><%= t("general.sort.#{sort}_html") %></a>
|
||||
</li>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -10,18 +10,20 @@
|
|||
<div class="content-pane flexible <%= params[:archived] ? :archived : :active %> repositories-index"
|
||||
data-readonly="<%= !current_user.is_admin_of_team?(current_team) %>">
|
||||
<div class="content-header">
|
||||
<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 } do %>
|
||||
<li class="view-switch-archived" data-view-mode="active">
|
||||
<i class="fas fa-archive button-icon"></i>
|
||||
<%= t('libraries.index.switch_view.archived') %>
|
||||
</li>
|
||||
<li class="view-switch-active" data-view-mode="archived">
|
||||
<i class="fas fa-rocket button-icon"></i>
|
||||
<%= t('libraries.index.switch_view.active') %>
|
||||
</li>
|
||||
<% end %>
|
||||
<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 } do %>
|
||||
<li class="view-switch-archived" data-view-mode="active">
|
||||
<i class="fas fa-archive button-icon"></i>
|
||||
<%= t('libraries.index.switch_view.archived') %>
|
||||
</li>
|
||||
<li class="view-switch-active" data-view-mode="archived">
|
||||
<i class="fas fa-rocket button-icon"></i>
|
||||
<%= t('libraries.index.switch_view.active') %>
|
||||
</li>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
</div>
|
||||
|
|
|
@ -14,133 +14,134 @@
|
|||
|
||||
<div class="content-pane repository-show <%= @repository.active? ? "active" : "archived" %>" data-table-url="<%= load_table_repository_path(@repository) %>">
|
||||
<div id="repository-toolbar" class="content-header">
|
||||
<% if @repository.active? %>
|
||||
<div class="repository-title-name" data-view-mode="active">
|
||||
<h1 class="name-container">
|
||||
<% if @inline_editable_title_config.present? %>
|
||||
<%= render partial: "shared/inline_editing",
|
||||
locals: {
|
||||
initial_value: @repository.name,
|
||||
config: @inline_editable_title_config
|
||||
} %>
|
||||
<% else %>
|
||||
<div class="read-only-name">
|
||||
<%= @repository.name %>
|
||||
</div>
|
||||
<span class="repository-share-icon">
|
||||
<%= inventory_shared_status_icon(@repository, current_team) %>
|
||||
</span>
|
||||
<div class="title-row">
|
||||
<% if @repository.active? %>
|
||||
<div class="repository-title-name" data-view-mode="active">
|
||||
<h1 class="name-container">
|
||||
<% if @inline_editable_title_config.present? %>
|
||||
<%= render partial: "shared/inline_editing",
|
||||
locals: {
|
||||
initial_value: @repository.name,
|
||||
config: @inline_editable_title_config
|
||||
} %>
|
||||
<% else %>
|
||||
<div class="read-only-name">
|
||||
<%= @repository.name %>
|
||||
</div>
|
||||
<span class="repository-share-icon">
|
||||
<%= inventory_shared_status_icon(@repository, current_team) %>
|
||||
</span>
|
||||
<% end %>
|
||||
</h1>
|
||||
<% if @repository.shared_with_anybody? %>
|
||||
<% team_name = @repository.team == current_team ? t('repositories.show.your_team') : @repository.team.name %>
|
||||
<div class="repository-subtitle"><%= t('repositories.show.subtitle', team_name: team_name) %></div>
|
||||
<% end %>
|
||||
</h1>
|
||||
<% if @repository.shared_with_anybody? %>
|
||||
<% team_name = @repository.team == current_team ? t('repositories.show.your_team') : @repository.team.name %>
|
||||
<div class="repository-subtitle"><%= t('repositories.show.subtitle', team_name: team_name) %></div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="repository-archived-title-name" data-view-mode="archived">
|
||||
<% if @repository.archived? %>
|
||||
<i class="fas fa-archive"></i>
|
||||
<%= t('repositories.show.archived_inventory', repository_name: @repository.name) %>
|
||||
<% else %>
|
||||
<%= t('repositories.show.archived_inventory_items', repository_name: @repository.name) %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="repo-datatables-buttons">
|
||||
<div class="share-repository-button" data-view-mode="active">
|
||||
<% if can_share_repository?(@repository) && current_user.teams.count > 1 %>
|
||||
<%= link_to team_repository_share_modal_path(current_team, repository_id: @repository),
|
||||
class: 'btn btn-secondary share-repo-option', remote: true, id: 'shareRepoBtn' do %>
|
||||
<span class="fas fa-user-plus"></span>
|
||||
<span class="hidden-xs"><%= t('repositories.index.share_inventory') %></span>
|
||||
<% end %>
|
||||
<div class="repository-archived-title-name" data-view-mode="archived">
|
||||
<% if @repository.archived? %>
|
||||
<i class="fas fa-archive"></i>
|
||||
<%= t('repositories.show.archived_inventory', repository_name: @repository.name) %>
|
||||
<% else %>
|
||||
<%= t('repositories.show.archived_inventory_items', repository_name: @repository.name) %>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="repo-datatables-buttons">
|
||||
<div class="share-repository-button" data-view-mode="active">
|
||||
<% if can_share_repository?(@repository) && current_user.teams.count > 1 %>
|
||||
<%= link_to team_repository_share_modal_path(current_team, repository_id: @repository),
|
||||
class: 'btn btn-secondary share-repo-option', remote: true, id: 'shareRepoBtn' do %>
|
||||
<span class="fas fa-user-plus"></span>
|
||||
<span class="hidden-xs"><%= t('repositories.index.share_inventory') %></span>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-secondary manage-repo-column-index"
|
||||
data-modal-url="<%= repository_repository_columns_path(@repository) %>"
|
||||
data-action="new">
|
||||
<span class="fas fa-wrench"></span> <%= t('repositories.index.columns') %>
|
||||
</button>
|
||||
|
||||
<div class="repository-cog dropdown">
|
||||
<button id="repository-acitons-dropdown"
|
||||
class="btn btn-secondary"
|
||||
type="button"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="true"
|
||||
<%= "disabled" unless can_perform_repository_actions(@repository) %>>
|
||||
<span class="fas fa-pencil-alt"></span>
|
||||
<span class="hidden-xs"><%= t('repositories.index.edit_inventory') %></span>
|
||||
<span class="caret"></span>
|
||||
<button class="btn btn-secondary manage-repo-column-index"
|
||||
data-modal-url="<%= repository_repository_columns_path(@repository) %>"
|
||||
data-action="new">
|
||||
<span class="fas fa-wrench"></span> <%= t('repositories.index.columns') %>
|
||||
</button>
|
||||
|
||||
<% if can_perform_repository_actions(@repository) %>
|
||||
<ul class="dropdown-menu pull-right">
|
||||
<% if can_create_repository_rows?(@repository) %>
|
||||
<li data-view-mode="active">
|
||||
<a href="#" id="importRecordsButton" data-turbolinks="false">
|
||||
<%= t('repositories.index.options_dropdown.import_items') %>
|
||||
</a>
|
||||
</li>
|
||||
<% end %>
|
||||
<% if can_read_repository?(@repository) %>
|
||||
<li >
|
||||
<a href="#" id="exportRepositoriesButton" data-turbolinks="false">
|
||||
<%= t("repositories.index.options_dropdown.export_items") %>
|
||||
</a>
|
||||
</li>
|
||||
<% end %>
|
||||
<% if can_create_repositories?(current_team) && !@repository.shared_with?(current_team) %>
|
||||
<li data-view-mode="active">
|
||||
<%= link_to t('repositories.index.options_dropdown.copy'),
|
||||
team_repository_copy_modal_path(current_team, repository_id: @repository),
|
||||
class: "copy-repo-option",
|
||||
remote: true %>
|
||||
</li>
|
||||
<% end %>
|
||||
<% if can_archive_repository?(@repository) %>
|
||||
<li data-view-mode="active" role="separator" class="divider"></li>
|
||||
<li data-view-mode="active">
|
||||
<%= link_to t('repositories.index.options_dropdown.archive'),
|
||||
archive_team_repositories_path(current_team),
|
||||
class: "archive-repository-option",
|
||||
data: { repository_id: @repository.id } %>
|
||||
</li>
|
||||
<% if @repository.archived? %>
|
||||
<li data-view-mode="archived">
|
||||
<%= link_to t('repositories.index.options_dropdown.restore'),
|
||||
restore_team_repositories_path(current_team),
|
||||
<div class="repository-cog dropdown">
|
||||
<button id="repository-acitons-dropdown"
|
||||
class="btn btn-secondary"
|
||||
type="button"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="true"
|
||||
<%= "disabled" unless can_perform_repository_actions(@repository) %>>
|
||||
<span class="fas fa-pencil-alt"></span>
|
||||
<span class="hidden-xs"><%= t('repositories.index.edit_inventory') %></span>
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
|
||||
<% if can_perform_repository_actions(@repository) %>
|
||||
<ul class="dropdown-menu pull-right">
|
||||
<% if can_create_repository_rows?(@repository) %>
|
||||
<li data-view-mode="active">
|
||||
<a href="#" id="importRecordsButton" data-turbolinks="false">
|
||||
<%= t('repositories.index.options_dropdown.import_items') %>
|
||||
</a>
|
||||
</li>
|
||||
<% end %>
|
||||
<% if can_read_repository?(@repository) %>
|
||||
<li >
|
||||
<a href="#" id="exportRepositoriesButton" data-turbolinks="false">
|
||||
<%= t("repositories.index.options_dropdown.export_items") %>
|
||||
</a>
|
||||
</li>
|
||||
<% end %>
|
||||
<% if can_create_repositories?(current_team) && !@repository.shared_with?(current_team) %>
|
||||
<li data-view-mode="active">
|
||||
<%= link_to t('repositories.index.options_dropdown.copy'),
|
||||
team_repository_copy_modal_path(current_team, repository_id: @repository),
|
||||
class: "copy-repo-option",
|
||||
remote: true %>
|
||||
</li>
|
||||
<% end %>
|
||||
<% if can_archive_repository?(@repository) %>
|
||||
<li data-view-mode="active" role="separator" class="divider"></li>
|
||||
<li data-view-mode="active">
|
||||
<%= link_to t('repositories.index.options_dropdown.archive'),
|
||||
archive_team_repositories_path(current_team),
|
||||
class: "archive-repository-option",
|
||||
data: { repository_id: @repository.id } %>
|
||||
</li>
|
||||
<% if @repository.archived? %>
|
||||
<li data-view-mode="archived">
|
||||
<%= link_to t('repositories.index.options_dropdown.restore'),
|
||||
restore_team_repositories_path(current_team),
|
||||
class: "archive-repository-option",
|
||||
data: { repository_id: @repository.id } %>
|
||||
</li>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% if can_manage_repository?(@repository) && @repository.archived? %>
|
||||
<li data-view-mode="archived" data-hook="destroy-repository-option">
|
||||
<%= link_to t('repositories.index.options_dropdown.delete'),
|
||||
team_repository_destroy_modal_path(current_team, repository_id: @repository),
|
||||
class: "delete-repo-option",
|
||||
remote: true %>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
<% end %>
|
||||
<% if can_manage_repository?(@repository) && @repository.archived? %>
|
||||
<li data-view-mode="archived" data-hook="destroy-repository-option">
|
||||
<%= link_to t('repositories.index.options_dropdown.delete'),
|
||||
team_repository_destroy_modal_path(current_team, repository_id: @repository),
|
||||
class: "delete-repo-option",
|
||||
remote: true %>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
<% end %>
|
||||
</div>
|
||||
<%= render layout: "shared/view_switch", locals: {disabled: @repository.archived?} do %>
|
||||
<li class="view-switch-archived" data-view-mode="active">
|
||||
<i class="fas fa-archive button-icon"></i>
|
||||
<%= t('repositories.show.show_archived_items') %>
|
||||
</li>
|
||||
<li class="view-switch-active" data-view-mode="archived">
|
||||
<i class="fas fa-rocket button-icon"></i>
|
||||
<%= t('repositories.show.show_active_items') %>
|
||||
</li>
|
||||
<% end %>
|
||||
</div>
|
||||
<%= render layout: "shared/view_switch", locals: {disabled: @repository.archived?} do %>
|
||||
<li class="view-switch-archived" data-view-mode="active">
|
||||
<i class="fas fa-archive button-icon"></i>
|
||||
<%= t('repositories.show.show_archived_items') %>
|
||||
</li>
|
||||
<li class="view-switch-active" data-view-mode="archived">
|
||||
<i class="fas fa-rocket button-icon"></i>
|
||||
<%= t('repositories.show.show_active_items') %>
|
||||
</li>
|
||||
<% end %>
|
||||
<div class="toolbar-delimiter"></div>
|
||||
</div>
|
||||
|
||||
<div class="toolbar-delimiter"></div>
|
||||
</div>
|
||||
|
||||
<!-- These buttons are appended to table in javascript, after table initialization -->
|
||||
|
|
|
@ -5,7 +5,9 @@
|
|||
|
||||
<div class="content-pane active flexible user-settings">
|
||||
<div class="content-header">
|
||||
<h1><%=t "users.registrations.edit.title" %></h1>
|
||||
<div class="title-row">
|
||||
<h1><%=t "users.registrations.edit.title" %></h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row settings-row">
|
||||
<div class="col-md-12">
|
||||
|
|
Loading…
Add table
Reference in a new issue