Update UI Layout of the Collections/Projects Release and Visibility Tab

alissapierce commented 3 months ago

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)

Mockup of proposed layout for Collection's Visibility Tab

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.

alissapierce commented 3 months ago

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/bootstrap@5.3.3/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>

no-reply commented 3 months ago

@rjkati we would love feedback on these designs before taking a stab at implementing

rjkati commented 3 months ago

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.

samvera / hyrax