Add sticky toolbar for projects page [SCI-5401] (#3108)

* Add sticky toolbar for projects page [SCI-5401]
This commit is contained in:
aignatov-bio 2021-01-25 15:36:23 +01:00 committed by GitHub
parent cea61a6bd2
commit 8396c086f5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 437 additions and 401 deletions

View file

@ -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;
}
}

View file

@ -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%;
}
}
}
}

View file

@ -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);
}
}
}

View file

@ -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">

View file

@ -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>&nbsp;<%= 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>&nbsp;<%= 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>

View file

@ -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>

View file

@ -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>&nbsp;<%= 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>&nbsp;<%= 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>

View file

@ -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>&nbsp;
<%= 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>&nbsp;
<%= 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>&nbsp;<%= 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>&nbsp;<%= 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 -->

View file

@ -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">