zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-08-25 10:33:50 +02:00
Code Issues Projects Releases Packages Wiki Activity

ui wip

Browse source
This commit is contained in:
Rachid Mrad 2025-01-24 14:57:26 -05:00
parent 691106c14b
commit d3a8e018b6
No known key found for this signature in database
6 changed files with 181 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/registrar/assets/src/js/getgov/portfolio-member-page.js
View file

@ -94,7 +94,7 @@ export function initAddNewMemberPageListeners() {
const permissionDetailsContainer = document.getElementById("permission_details");
permissionDetailsContainer.innerHTML = ""; // Clear previous content
if (permission_details_div_id == 'new-member-basic-permissions') {
if (permission_details_div_id == 'member-basic-permissions') {
// for basic users, display values are based on selections in the form
// Get all permission sections (divs with h3 and radio inputs)
const permissionSections = document.querySelectorAll(`#${permission_details_div_id} > h3`);
@ -181,7 +181,7 @@ export function initAddNewMemberPageListeners() {
if (selectedAccess && selectedAccess.value === 'organization_admin') {
populatePermissionDetails('admin');
} else {
populatePermissionDetails('new-member-basic-permissions');
populatePermissionDetails('member-basic-permissions');
}
//------- Show the modal
@ -198,7 +198,7 @@ export function initPortfolioMemberPageRadio() {
document.addEventListener("DOMContentLoaded", () => {
let memberForm = document.getElementById("member_form");
let newMemberForm = document.getElementById("add_member_form")
if (memberForm) {
if (memberForm || newMemberForm) {
hookupRadioTogglerListener(
'role',
{
@ -206,14 +206,6 @@ export function initPortfolioMemberPageRadio() {
'organization_member': 'member-basic-permissions'
}
);
}else if (newMemberForm){
hookupRadioTogglerListener(
'role',
{
'organization_admin': '',
'organization_member': 'new-member-basic-permissions'
}
);
}
});
}

26
src/registrar/assets/src/sass/_theme/_accordions.scss
View file

@ -49,3 +49,29 @@ tr:last-of-type .usa-accordion--more-actions .usa-accordion__content {
bottom: -10px;
right: 30px;
}
.usa-accordion--show-more {
width: auto;
.usa-accordion__button[aria-expanded=false],
.usa-accordion__button[aria-expanded=false]:hover,
.usa-accordion__button[aria-expanded=true],
.usa-accordion__button[aria-expanded=true]:hover {
background-image: none;
background-color: transparent;
padding-right: 0;
padding-left: 0;
font-weight: normal;
}
.usa-accordion__button[aria-expanded=true] .expand-more {
display: inline-block;
}
.usa-accordion__button[aria-expanded=true] .expand-less {
display: none;
}
.usa-accordion__button[aria-expanded=false] .expand-more {
display: none;
}
.usa-accordion__button[aria-expanded=false] .expand-less {
display: inline-block;
}
}

12
src/registrar/assets/src/sass/_theme/_tables.scss
View file

@ -99,3 +99,15 @@ th {
}
}
}
.dotgov-table--padding-left {
td, th {
padding: units(2) units(4) units(2) units(2);
}
}
.usa-table--bg-transparent {
td, thead th {
background-color: transparent;
}
}

4
src/registrar/assets/src/sass/_theme/_typography.scss
View file

@ -51,3 +51,7 @@ h2 {
padding-left: units(1);
border-left: 2px solid color('base-lighter');
}
.font-body-1 {
font-size: size('body', 1);
}

3
src/registrar/forms/portfolio.py
View file

@ -132,6 +132,7 @@ class BasePortfolioMemberForm(forms.ModelForm):
],
widget=forms.RadioSelect,
required=False,
initial=UserPortfolioPermissionChoices.VIEW_MANAGED_DOMAINS.value,
error_messages={
"required": "Member domain permission is required",
},
@ -146,6 +147,7 @@ class BasePortfolioMemberForm(forms.ModelForm):
],
widget=forms.RadioSelect,
required=False,
initial="no_access",
error_messages={
"required": "Basic member permission is required",
},
@ -158,6 +160,7 @@ class BasePortfolioMemberForm(forms.ModelForm):
],
widget=forms.RadioSelect,
required=False,
initial="no_access",
error_messages={
"required": "Admin member permission is required",
},

135
src/registrar/templates/portfolio_members_add_new.html
View file

@ -62,8 +62,139 @@
{% endwith %}
</fieldset>
<div class="usa-accordion usa-accordion--show-more">
<h4 class="usa-accordion__heading">
<button
type="button"
class="usa-accordion__button"
aria-expanded="false"
aria-controls="admin-vs-basic-matrix"
>
<svg class="usa-icon font-body-xl text-primary-darker text-middle" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/public/img/sprite.svg#help_outline"></use>
</svg>
<span class="text-middle">
How are admins and basic members different?
</span>
<svg class="usa-icon font-body-xl text-primary text-middle expand-less" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/public/img/sprite.svg#expand_less"></use>
</svg>
<svg class="usa-icon font-body-xl text-primary text-middle expand-more" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/public/img/sprite.svg#expand_more"></use>
</svg>
</button>
</h4>
<div id="admin-vs-basic-matrix" class="usa-accordion__content bg-transparent padding-top-0">
<table class="usa-table dotgov-table dotgov-table--padding-left usa-table--bg-transparent usa-table--borderless usa-table--striped font-body-2xs">
<thead>
<tr>
<th scope="col" role="columnheader"><span class="text-base-darkest text-normal">Member actions available</span></th>
<th scope="col" role="columnheader" class="text-center">Admin</th>
<th scope="col" role="columnheader" class="text-center">Basic</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
View domains they manage
<svg
class="usa-icon usa-tooltip text-primary text-middle margin-bottom-05 no-click-outline-and-cursor-help"
data-position="top"
title="Domains can be assigned after invitation."
focusable="true"
aria-label="Domains can be assigned after invitation."
role="tooltip"
>
<use aria-hidden="true" xlink:href="/public/img/sprite.svg#info_outline"></use>
</svg>
</th>
<td class="text-center">
<svg class="usa-icon font-body-xl text-primary-darker" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/public/img/sprite.svg#check"></use>
</svg>
</td>
<td class="text-center">
<svg class="usa-icon font-body-xl text-primary-darker" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/public/img/sprite.svg#check"></use>
</svg>
</td>
</tr>
<tr>
<th scope="row">View all domains for the organization</th>
<td class="text-center">
<svg class="usa-icon font-body-xl text-primary-darker" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/public/img/sprite.svg#check"></use>
</svg>
</td>
<td class="text-center">
<span class="font-body-1 text-primary-darker">Optional</span>
</td>
</tr>
<tr>
<th scope="row">View all domain requests</th>
<td class="text-center">
<svg class="usa-icon font-body-xl text-primary-darker" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/public/img/sprite.svg#check"></use>
</svg>
</td>
<td class="text-center">
<span class="font-body-1 text-primary-darker">Optional</span>
</td>
</tr>
<tr>
<th scope="row">Create domain requests</th>
<td class="text-center">
<svg class="usa-icon font-body-xl text-primary-darker" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/public/img/sprite.svg#check"></use>
</svg>
</td>
<td class="text-center">
<span class="font-body-1 text-primary-darker">Optional</span>
</td>
</tr>
<tr>
<th scope="row">View all member permissions</th>
<td class="text-center">
<svg class="usa-icon font-body-xl text-primary-darker" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/public/img/sprite.svg#check"></use>
</svg>
</td>
<td class="text-center">
<span class="font-body-1 text-primary-darker">Optional</span>
</td>
</tr>
<tr>
<th scope="row">Manage member permissions</th>
<td class="text-center">
<svg class="usa-icon font-body-xl text-primary-darker" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/public/img/sprite.svg#check"></use>
</svg>
</td>
<td class="text-center">
<svg class="usa-icon font-body-xl text-primary-darker" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/public/img/sprite.svg#cancel"></use>
</svg>
</td>
</tr>
<tr>
<th scope="row">Manage organization metadata (address)</th>
<td class="text-center">
<svg class="usa-icon font-body-xl text-primary-darker" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/public/img/sprite.svg#check"></use>
</svg>
</td>
<td class="text-center">
<svg class="usa-icon font-body-xl text-primary-darker" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/public/img/sprite.svg#cancel"></use>
</svg>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Basic access form -->
<div id="new-member-basic-permissions" class="margin-top-2">
<div id="member-basic-permissions" class="margin-top-2">
<h2>What permissions do you want to add?</h2>
<p>Configure the permissions for this member. Basic members cannot manage member permissions or organization metadata.</p>
@ -85,7 +216,7 @@
<h3 class="margin-bottom-1">Domain management</h3>
<p>After you invite this person to your organization, you can assign domain management permissions on their member profile.</p>
<p class="margin-top-0">After you invite this person to your organization, you can assign domain management permissions on their member profile.</p>
<!-- Submit/cancel buttons -->
<div class="margin-top-3">