mirror of
https://github.com/discourse/discourse.git
synced 2026-08-07 13:19:19 +08:00
7ff30d81a3Followup 5823e4e3b2,
this commit allows the addition of users along with
groups to access control lists, modifying DAccessControl
to support selecting a user or group from the same
search input.
Shown here is a mix of user & group permissions in the
`DAccessControl` component:
<img width="611" height="664" alt="image"
src="https://github.com/user-attachments/assets/c25e13b0-8885-4ce7-972c-5116f3acb094"
/>
When the search opens, we show the site's groups that
the user can see as preloaded values, showing only the
group name for clarity:
<img width="612" height="389" alt="image"
src="https://github.com/user-attachments/assets/df93a94b-918e-4fed-b045-ac72f02aca41"
/>
When searching a GET request is sent and users are included
in search results.
<img width="608" height="404" alt="image"
src="https://github.com/user-attachments/assets/ff17e6c0-2505-480e-ae25-e6f8309555bc"
/>
---------
Co-authored-by: Jordan Vidrine <jordan@jordanvidrine.com>
108 lines
2.1 KiB
SCSS
Vendored
108 lines
2.1 KiB
SCSS
Vendored
.d-access-control {
|
|
--d-access-control-prefix-width: var(--space-6);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
width: 100%;
|
|
|
|
&__chooser {
|
|
width: 100%;
|
|
}
|
|
|
|
&__chooser .select-kit-header {
|
|
font-weight: 400;
|
|
}
|
|
|
|
&__rows {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 1px solid var(--content-border-color);
|
|
border-radius: var(--d-border-radius);
|
|
}
|
|
|
|
&__row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-2);
|
|
border-bottom: 1px solid var(--content-border-color);
|
|
padding: var(--space-1) var(--space-2);
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
&__item {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
&__row.--group .d-access-control__item-icon {
|
|
border-radius: 999px;
|
|
background-color: var(--primary-100);
|
|
width: var(--d-access-control-prefix-width);
|
|
height: var(--d-access-control-prefix-width);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
&__row.--group .d-access-control__item-icon svg {
|
|
width: var(--space-3);
|
|
height: var(--space-3);
|
|
}
|
|
|
|
&__tooltip {
|
|
font-size: var(--font-down-3);
|
|
background: var(--primary-100);
|
|
padding: var(--space-half) var(--space-1);
|
|
border-radius: var(--d-border-radius);
|
|
color: var(--d-input-text-color--disabled);
|
|
}
|
|
|
|
&__permission.btn-default {
|
|
border: none;
|
|
|
|
&:hover {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
&__permission-menu-content {
|
|
z-index: z("modal", "dropdown");
|
|
}
|
|
|
|
&__permission-option.--remove .d-access-control__permission-label {
|
|
color: var(--danger);
|
|
}
|
|
|
|
&__permission-texts {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
line-height: var(--line-height-medium);
|
|
}
|
|
|
|
&__permission-label {
|
|
font-weight: bold;
|
|
color: var(--primary);
|
|
}
|
|
|
|
&__permission-description {
|
|
font-size: var(--font-down-1);
|
|
color: var(--primary-medium);
|
|
white-space: normal;
|
|
text-align: start;
|
|
}
|
|
|
|
&__add {
|
|
width: 100%;
|
|
}
|
|
}
|
