mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-11-17 14:32:34 +08:00
Fixed access modal styling issues [SCI-6241] (#3646)
* Fixed access modal styling issues [SCI-6241] * Refactor user access list to use flex [SCI-6241] * Linter fixes [SCI-6241]
This commit is contained in:
artoscinote
GitHub
parent
0eacb91bed
commit
9f92cfab1a
9 changed files with 127 additions and 88 deletions
|
|
@ -1,12 +1,69 @@
|
|||
#user_assignments_modal {
|
||||
.modal-body {
|
||||
max-height: 400px;
|
||||
min-height: 250px;
|
||||
overflow: auto;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.member-item {
|
||||
border-bottom: 1px solid $modal-header-border-color;
|
||||
|
||||
margin: 0 .5em;
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
.user-assignment-role .dropdown-toggle,
|
||||
.user-assignment-remove .btn {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.new-member-item .user-assignment-role .dropdown-toggle {
|
||||
border-width: 1px;
|
||||
border-color: $color-volcano;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.member-item,
|
||||
.user-assignment-info,
|
||||
.user-assignment-controls {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.user-assignment-controls {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.global-avatar-container {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.user-assignment-remove {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-volcano;
|
||||
}
|
||||
|
||||
.sci-checkbox-container {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.sci-input-container {
|
||||
margin-top: 1em;
|
||||
|
||||
.fa-search {
|
||||
color: $color-alto;
|
||||
}
|
||||
}
|
||||
|
||||
.user-assignments-description {
|
||||
margin: 1em .5em;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1em 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
@import "constants";
|
||||
|
||||
.member-item {
|
||||
border-bottom: .1rem solid $btn-default-border;
|
||||
margin: 10px 0;
|
||||
padding: 10px;
|
||||
|
||||
&:last-child {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
<h4 class="modal-title"><%= t '.title', resource_name: experiment.name %></h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>
|
||||
<p class="user-assignments-description">
|
||||
<%= t '.description' %>
|
||||
</p>
|
||||
<hr />
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<h4 class="modal-title"><%= t '.title', resource_name: my_module.name %></h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>
|
||||
<p class="user-assignments-description">
|
||||
<%= t '.description' %>
|
||||
</p>
|
||||
<hr />
|
||||
|
|
|
|||
|
|
@ -7,24 +7,21 @@
|
|||
|
||||
<%= form_with(model: experiment_member, url: update_path, method: :put, remote: true, html: { class: 'row member-item', id: item_id, data: { action: 'replace-form autosave-form' } }) do |f| %>
|
||||
<%= f.hidden_field :user_id, value: f.object.user.id %>
|
||||
<div class="col-xs-1">
|
||||
<span class="global-avatar-container">
|
||||
<%= image_tag avatar_path(user, :icon_small), title: current_assignee_name(user), class: 'img-circle pull-left' %>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<span><%= current_assignee_name(user) %></span>
|
||||
<br>
|
||||
<small class="text-muted"><%= user_assignment_resource_role_name(experiment_member, user, experiment) %></small>
|
||||
<div class="user-assignment-info">
|
||||
<div class="global-avatar-container">
|
||||
<%= image_tag avatar_path(user, :icon_small), title: current_assignee_name(user), class: 'img-circle pull-left' %>
|
||||
</div>
|
||||
<div>
|
||||
<%= current_assignee_name(user) %>
|
||||
<br>
|
||||
<small class="text-muted"><%= user_assignment_resource_role_name(experiment_member, user, experiment) %></small>
|
||||
</div>
|
||||
</div>
|
||||
<% unless user == current_user %>
|
||||
<div class="col-xs-5">
|
||||
<%= f.select :user_role_id,
|
||||
options_for_select(user_roles_collection, selected: f.object.user_role&.id),
|
||||
{},
|
||||
class: 'form-control selectpicker',
|
||||
title: t('user_assignment.change_experiment_role'),
|
||||
data: { 'selected-text-format' => 'static' } %>
|
||||
<div class="user-assignment-controls">
|
||||
<div class="user-assignment-role">
|
||||
<%= f.select :user_role_id, options_for_select(user_roles_collection, selected: f.object.user_role.id), {}, class: 'form-control selectpicker', title: t('user_assignment.change_experiment_role'), data: { 'selected-text-format' => 'static' } %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -7,24 +7,21 @@
|
|||
|
||||
<%= form_with(model: my_module_member, url: update_path, method: :put, remote: true, html: { class: 'row member-item', id: item_id, data: { action: 'replace-form autosave-form' } }) do |f| %>
|
||||
<%= f.hidden_field :user_id, value: f.object.user.id %>
|
||||
<div class="col-xs-1">
|
||||
<span class="global-avatar-container">
|
||||
<%= image_tag avatar_path(user, :icon_small), title: current_assignee_name(user), class: 'img-circle pull-left' %>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<span><%= current_assignee_name(user) %></span>
|
||||
<br>
|
||||
<small class="text-muted"><%= user_assignment_resource_role_name(my_module_member, user, my_module) %></small>
|
||||
<div class="user-assignment-info">
|
||||
<div class="global-avatar-container">
|
||||
<%= image_tag avatar_path(user, :icon_small), title: current_assignee_name(user), class: 'img-circle pull-left' %>
|
||||
</div>
|
||||
<div>
|
||||
<%= current_assignee_name(user) %>
|
||||
<br>
|
||||
<small class="text-muted"><%= user_assignment_resource_role_name(my_module_member, user, my_module) %></small>
|
||||
</div>
|
||||
</div>
|
||||
<% unless user == current_user %>
|
||||
<div class="col-xs-5">
|
||||
<%= f.select :user_role_id,
|
||||
options_for_select(user_roles_collection, selected: f.object.user_role&.id),
|
||||
{},
|
||||
class: 'form-control selectpicker',
|
||||
title: t('user_assignment.change_my_module_role'),
|
||||
data: { 'selected-text-format' => 'static' } %>
|
||||
<div class="user-assignment-controls">
|
||||
<div class="user-assignment-role">
|
||||
<%= f.select :user_role_id, options_for_select(user_roles_collection, selected: f.object.user_role.id), {}, class: 'form-control selectpicker', title: t('user_assignment.change_my_module_role'), data: { 'selected-text-format' => 'static' } %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -7,30 +7,28 @@
|
|||
|
||||
<%= form_with(model: project_member, url: update_path, method: :put, remote: true, html: { class: 'row member-item', id: item_id, data: { action: 'replace-form autosave-form', object_type: :project } }) do |f| %>
|
||||
<%= f.hidden_field :user_id, value: f.object.user.id %>
|
||||
<div class="col-xs-2">
|
||||
<span class="global-avatar-container">
|
||||
<div class="user-assignment-info">
|
||||
<div class="global-avatar-container">
|
||||
<%= image_tag avatar_path(user, :icon_small), title: current_assignee_name(user), class: 'img-circle pull-left' %>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-xs-3">
|
||||
<span><%= current_assignee_name(user) %></span>
|
||||
<br>
|
||||
<small class="text-muted"><%= user_assignment_resource_role_name(project_member, user, project) %></small>
|
||||
</div>
|
||||
<div>
|
||||
<%= current_assignee_name(user) %>
|
||||
<br>
|
||||
<small class="text-muted"><%= user_assignment_resource_role_name(project_member, user, project) %></small>
|
||||
</div>
|
||||
</div>
|
||||
<% unless user == current_user %>
|
||||
<div class="col-xs-7">
|
||||
<div class="row">
|
||||
<div class="col-xs-7">
|
||||
<%= f.select :user_role_id, options_for_select(user_roles_collection, selected: f.object.user_role.id), {}, class: 'form-control selectpicker', title: t('user_assignment.change_project_role'), data: { 'selected-text-format' => 'static' } %>
|
||||
</div>
|
||||
<div class="col-xs-5">
|
||||
<% unless project_member.last_project_owner? %>
|
||||
<%= link_to access_permissions_project_path(project, user_id: user), remote: true, method: :delete, class: 'btn btn-link', data: { action: 'remote-destroy', target: "##{item_id}" } do %>
|
||||
<span class="fas fa-times"></span>
|
||||
<%= t 'general.remove' %>
|
||||
<% end %>
|
||||
<div class="user-assignment-controls">
|
||||
<div class="user-assignment-role">
|
||||
<%= f.select :user_role_id, options_for_select(user_roles_collection, selected: f.object.user_role.id), {}, class: 'form-control selectpicker', title: t('user_assignment.change_project_role'), data: { 'selected-text-format' => 'static' } %>
|
||||
</div>
|
||||
<div class="user-assignment-remove">
|
||||
<% unless project_member.last_project_owner? %>
|
||||
<%= link_to access_permissions_project_path(project, user_id: user), remote: true, method: :delete, class: 'btn btn-secondary', data: { action: 'remote-destroy', target: "##{item_id}" } do %>
|
||||
<span class="fas fa-times"></span>
|
||||
<%= t 'general.remove' %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -6,31 +6,32 @@
|
|||
id = dom_id(user, :new_project_member)
|
||||
%>
|
||||
|
||||
<div class="row member-item" data-filter-item="<%= user.full_name %>">
|
||||
<div class="row member-item new-member-item" data-filter-item="<%= user.full_name %>">
|
||||
<%= f.hidden_field :user_id, value: user.id, name:"access_permissions_new_user_project_form[resource_members][#{user.id}][user_id]" %>
|
||||
<div class="col-xs-1 checkbox text-center">
|
||||
<label>
|
||||
<div class="user-assignment-info">
|
||||
<div class="sci-checkbox-container">
|
||||
<%= f.check_box :assign,
|
||||
name: "access_permissions_new_user_project_form[resource_members][#{user.id}][assign]",
|
||||
data: { action: 'toggle-visibility', target: id}
|
||||
%>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-xs-1">
|
||||
<span class="global-avatar-container">
|
||||
name: "access_permissions_new_user_project_form[resource_members][#{user.id}][assign]",
|
||||
data: { action: 'toggle-visibility', target: id },
|
||||
class: "sci-checkbox"
|
||||
%>
|
||||
<span class="sci-checkbox-label"></span>
|
||||
</div>
|
||||
<div class="global-avatar-container">
|
||||
<%= image_tag avatar_path(user, :icon_small), title: current_assignee_name(user), class: 'img-circle pull-left' %>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<%= current_assignee_name(user) %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<span><%= current_assignee_name(user) %></span>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-4 form-group hidden" id="<%= id %>">
|
||||
<%= f.select :user_role_id,
|
||||
options_for_select(user_roles_collection),
|
||||
{},
|
||||
name: "access_permissions_new_user_project_form[resource_members][#{user.id}][user_role_id]",
|
||||
class: 'form-control selectpicker pull-right',
|
||||
title: t('user_assignment.select_role') %>
|
||||
<div class="user-assignment-controls">
|
||||
<div class="user-assignment-role hidden" id="<%= id %>">
|
||||
<%= f.select :user_role_id,
|
||||
options_for_select(user_roles_collection),
|
||||
{},
|
||||
name: "access_permissions_new_user_project_form[resource_members][#{user.id}][user_role_id]",
|
||||
class: 'form-control selectpicker pull-right',
|
||||
title: t('user_assignment.select_role') %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2515,7 +2515,7 @@ en:
|
|||
failure: "Something went wrong"
|
||||
partials:
|
||||
edit_assignments_content:
|
||||
title: "Manage access for to %{resource_name}"
|
||||
title: "Manage access for %{resource_name}"
|
||||
new_resource_assignments: "Grant new access to %{resource}"
|
||||
new_assignments_form:
|
||||
title: "Select members"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue