Skip to content

Commit

Permalink
Fix RDE help section
Browse files Browse the repository at this point in the history
  • Loading branch information
@brianzelip
brianzelip committed Apr 24, 2024
1 parent be349b2 commit 0bc779c
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 36 deletions.
8 changes: 8 additions & 0 deletions frontend/app/assets/stylesheets/archivesspace/common.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,10 @@ td .btn-group {
column-gap: 1rem;
}

.gap-x-4 {
column-gap: 1.5rem;
}

.gap-bs-x-15px {
column-gap: 15px; // because bootstrap `.row`s
}
Expand Down Expand Up @@ -322,3 +326,7 @@ td .btn-group {
color: var(--bs-text-body);
background-color: var(--light);
}

.colon-after::after {
content: ":";
}
70 changes: 54 additions & 16 deletions frontend/app/views/shared/_rde.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,10 @@
</div>
</div>

<table id="rdeTable" class="table table-striped table-bordered table-condensed" style="width: auto; margin-right: 20px;">
<table
id="rdeTable"
class="table table-striped table-bordered table-condensed mb-4"
style="width: auto; margin-right: 20px;">
<colgroup>
<col class="status" data-default-width='24' />
<%= form.emit_template "rde_#{@children.child_type}_cols" %>
Expand Down Expand Up @@ -192,8 +195,8 @@
<% end %>
</tbody>
</table>
<br/>
<div>

<div class="mb-4">
<div class="btn-group">
<button class="btn btn-sm btn-success add-row"><%= t("rde.actions.add_row") %></button>
<button class="btn btn-sm btn-success dropdown-toggle add-rows-dropdown" data-toggle="dropdown">
Expand All @@ -205,20 +208,55 @@
</div>
</div>
</div>
<br/>
<div class="well">
<div class="row">
<div class="col-md-6">
<%= t("rde.help.keyboard_shortcuts") %>
<br/>
<%= t("rde.help.fill_column") %>

<div class="card">
<div class="card-body d-flex gap-x-4">
<div class="w-50">
<h4 class="h6 font-weight-bold">
<%= t("rde.help.keyboard_shortcuts.title") %>
</h4>
<dl class="mb-4">
<div class="d-flex gap-x-3">
<dt class="fs-14px font-weight-normal colon-after"><%= t("rde.help.keyboard_shortcuts.move_term") %></dt>
<dd class="fs-14px">
<kbd><%= t("rde.help.keyboard_shortcuts.shift") %></kbd> + <kbd><%= t("rde.help.keyboard_shortcuts.arrow_keys") %></kbd>
</dd>
</div>
<div class="d-flex gap-x-3">
<dt class="fs-14px font-weight-normal colon-after"><%= t("rde.help.keyboard_shortcuts.new_term") %></dt>
<dd class="fs-14px">
<kbd><%= t("rde.help.keyboard_shortcuts.shift") %></kbd> + <kbd><%= t("rde.help.keyboard_shortcuts.return") %></kbd>
</dd>
</div>
</dl>

<h4 class="h6 font-weight-bold">
<%= t("rde.help.fill_column.basic_title") %>
</h4>
<p class="mb-4 fs-14px"><%= t("rde.help.fill_column.basic_description") %></p>

<h4 class="h6 font-weight-bold">
<%= t("rde.help.fill_column.sequence_title") %>
</h4>
<p class="mb-0 fs-14px"><%= t("rde.help.fill_column.sequence_description") %></p>
</div>
<div class="col-md-6">
<%= t("rde.help.sticky_columns") %>
<br/>
<%= t("rde.help.resize_and_reorder_columns") %>
<br/>
<%= t("rde.help.reset") %>

<div class="w-50">
<h4 class="h6 font-weight-bold">
<%= t("rde.help.sticky_columns.title") %>
</h4>
<p class="fs-14px"><%= t("rde.help.sticky_columns.p_one") %></p>
<p class="mb-4 fs-14px"><%= t("rde.help.sticky_columns.p_two") %></p>

<h4 class="h6 font-weight-bold">
<%= t("rde.help.reorder_columns.title") %>
</h4>
<p class="mb-4 fs-14px"><%= t("rde.help.reorder_columns.description") %></p>

<h4 class="h6 font-weight-bold">
<%= t("rde.help.reset.title") %>
</h4>
<p class="mb-0 fs-14px"><%= t("rde.help.reset.description") %></p>
</div>
</div>
</div>
Expand Down
42 changes: 22 additions & 20 deletions frontend/config/locales/en.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1490,26 +1490,28 @@ en:
error_summary_header: "Errors in row:"
select_prompt: Apply an RDE Template
help:
keyboard_shortcuts: |
<div><strong>Keyboard Shortcuts</strong></div>
<div class="row"><small><span class="span3">Jump from cell to cell:</span>SHIFT + Arrow Keys</small></div>
<div class="row"><small><span class="span3">Create a new row (from last row):</span> SHIFT + Return</small></div>
sticky_columns: |
<div><strong>Sticky Columns</strong></div>
<div><small>Highlighted columns are sticky and will be replicated when new rows are added. Toggle 'sticky' by clicking the corresponding table heading.</small></div>
<div><small>Clicking <strong>Add Row</strong> will copy values from the last row; The row's <strong>+</strong> button will copy values from the currently focused row.</small></div>
fill_column: |
<div><strong>Fill Column - Basic</strong></div>
<div><small>To fill a column with a single value, click <strong>Fill Column</strong> and under the <strong>Basic</strong> tab select the target <strong>Column</strong>, enter the desired <strong>Fill Value</strong> and click <strong>Apply Fill</strong>.</small></div>
<br/>
<div><strong>Fill Column - Sequence</strong></div>
<div><small>To apply a sequence to a column, click <strong>Fill Column</strong> and under the <strong>Sequence</strong> tab select the target <strong>Column</strong> and complete the <strong>Fill Value</strong> fields to generate the sequence you desire. A warning will be displayed if the sequence generated will not fulfil the number of rows in the form.</small></div>
resize_and_reorder_columns: |
<div><strong>Reorder Columns</strong></div>
<div><small>Click <strong>Reorder columns</strong>, select the row(s) you wish to reorder and use the up/down arrow buttons to change their position in the list. When happy with your new ordering, click <strong>Apply Column Order</strong></small></div>
reset: |
<div><strong>Reset Form</strong></div>
<div><small>Click <strong>Reset</strong> to clear the form and revert the sticky, visible and order of the columns to the default values.</small></div>
keyboard_shortcuts:
title: Keyboard Shortcuts
shift: SHIFT
arrow_keys: Arrow Keys
return: Return
move_term: Jump from cell to cell
new_term: "Create a new row (from last row)"
sticky_columns:
title: Sticky Columns
p_one: "Highlighted columns are sticky and will be replicated when new rows are added. Toggle 'sticky' by clicking the corresponding table heading."
p_two: "Clicking <strong>Add Row</strong> will copy values from the last row. The row's <strong>+</strong> button will copy values from the currently focused row."
fill_column:
basic_title: Fill Column - Basic
basic_description: To fill a column with a single value, click <strong>Fill Column</strong> and under the <strong>Basic</strong> tab select the target <strong>Column</strong>, enter the desired <strong>Fill Value</strong> and click <strong>Apply Fill</strong>.
sequence_title: Fill Column - Sequence
sequence_description: To apply a sequence to a column, click <strong>Fill Column</strong> and under the <strong>Sequence</strong> tab select the target <strong>Column</strong> and complete the <strong>Fill Value</strong> fields to generate the sequence you desire. A warning will be displayed if the sequence generated will not fulfil the number of rows in the form.
reorder_columns:
title: Reorder Columns
description: "Click <strong>Reorder columns</strong>, select the row(s) you wish to reorder and use the up/down arrow buttons to change their position in the list. When happy with your new ordering, click <strong>Apply Column Order</strong>."
reset:
title: Reset Form
description: "Click <strong>Reset</strong> to clear the form and revert the sticky, visible and order of the columns to the default values."
update_monitor:
save_failed: <strong>Failed to save your changes</strong>
stale_record: This record has been updated by another user. Please refresh the page to access the latest version.
Expand Down

0 comments on commit 0bc779c

Please sign in to comment.