hyrax
hyrax copied to clipboard
Published
20 hours ago •
samvera
samvera
Update UI Layout of the Collections/Projects Release and Visibility Tab
Descriptive summary
Update layout for Collections/Projects "Release and Visibility" tab to be more user friendly and readable.
Steps to User Interface (UI) location:
- Login
- From the DASHBOARD go to COLLECTIONS
- Select a existing project or click ADD NEW COLLECTIONS button (top left) i. If adding a new collection, select PROJECTS and CREATE COLLECTION button (bottom right) ii. Add collection title and description, select
- Select the RELEASE AND VISIBILITY tab (left of center)
Actual behavior (include screenshots if available)
Acceptance Criteria/Expected Behavior
- [ ] Replace radio buttons with toogle
- [ ] Set text copy, "Release and visibility settings determine the options available to depositors when submitting an object. Changes to these settings do not affect previously deposited objects.", to a display/conceal tip alert
- [ ] Reformat typography, as needed
Rationale (for feature request only)
This change would create a more readable and visually intuitive interaction.
Non-functioning HTML for tab display:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visibility</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.0/css/font-awesome.css" />
</head>
<body class="m-2 p-2">
<div class="card-body">
<div class="alert alert-primary alert-dismissible" role="alert">
Release and visibility settings determine the options available to depositors when submitting an object. Changes to these settings do not affect previously deposited objects.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<h3>Release</h3>
<p>Set embargoes and lease policies for the Project.</p>
<div class="form-check mb-4">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="permission_template_release_period_now">
<label class="form-check-label" for="permission_template_release_period_now">Do not allow embargoes or leases</label>
</div>
</div>
<div class="form-check mb-4">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="permission_template_release_period_" checked>
<label class="form-check-label" for="permission_template_release_period_">Allow depositor to choose settings:</label>
</div>
<ul class="pl-3-switch">
<li class="form-check mb-2">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="permission_template_release_varies_" checked>
<label class="form-check-label" for="permission_template_release_varies_">Depositor can choose any embargo length; leases are allowed</label>
</div>
</li>
<li class="form-check mb-2 pl-6-switch">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="permission_template_release_varies_before">
<label class="form-check-label" for="permission_template_release_varies_before">Depositor can choose embargo up to date:</label>
<input wrapper="inline" class="datepicker form-control form-control-sm d-inline" placeholder="mm/dd/yyyy" type="date" name="permission_template[release_date]" id="permission_template_release_date" disabled="" style="width: unset;">
</div>
</li>
<li class="form-check mb-2 pl-6-switch">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="permission_template_release_varies_embargo">
<label class="form-check-label" for="permission_template_release_varies_embargo">Depositor can choose embargo period up to:</label>
<select name="permission_template[release_embargo]" id="permission_template_release_embargo" disabled="" class="custom-select custom-select-sm">
<option value="">Select embargo period..</option>
<option value="6mos">6 months after deposit</option>
<option value="1yr">1 year after deposit</option>
<option value="2yrs">2 years after deposit</option>
<option value="3yrs">3 years after deposit</option>
</select>
</div>
</li>
</ul>
</div>
<div class="form-check form-check-inline mb-4">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="permission_template_release_period_fixed">
<label class="form-check-label" for="permission_template_release_period_fixed">Depositor must choose embargo -- delay release of all objects for the duration of the embargo period:</label>
<input wrapper="inline" class="datepicker form-control form-control-sm" placeholder="mm/dd/yyyy" type="date" name="permission_template[release_date]" id="permission_template_release_date" disabled="" style="width: unset;">
</div>
</div>
<h3>Visibility</h3>
<p>Set visibility policies for the Project. Setting honors embargo policies.</p>
<div class="form-check mb-3">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="permission_template_visibility_open">
<label class="form-check-label" for="permission_template_visibility_open">Public - depositor can only choose public visibility setting</label>
</div>
</div>
<div class="form-check mb-3">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="permission_template_visibility_" checked="checked">
<label class="form-check-label" for="permission_template_visibility_">All settings allowed -- depositor can choose. Must use this option to allow leases.</label>
</div>
</div>
<div class="form-check mb-3">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="permission_template_visibility_authenticated">
<label class="form-check-label" for="permission_template_visibility_authenticated">Institution -- depositor can only select institution visibility setting</label>
</div>
</div>
<div class="form-check mb-3">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="permission_template_visibility_restricted" disabled="">
<label class="form-check-label" for="permission_template_visibility_restricted">Private -- depositor can only select private for visibility. Access is restricted to repository administrators, managers, and viewers. Must be used with "No embargo" setting above.</label>
</div>
</div>
</div>
</body>
</html>
@rjkati we would love feedback on these designs before taking a stab at implementing
Just to clarify for myself, it seems that the analogous interface in Hyrax would be the admin set interface, since the user collection interface doesn't have release and visibility settings.
I like the use of the toggle switches, as I think it is easier for the user to see which settings have been selected. While I do like that the release and visibility text is more emphasized in the tip alert, I do worry if it can be permanently dismissed by default. As I recall, this text was added to the page because new admins were confused about how release and visibility applies to previous works and it seems like allowing it to be permanently dismissed could create a situation in which the needed information is not present and can't be retrieved.
