mirror of
https://github.com/discourse/discourse.git
synced 2026-08-08 17:53:55 +08:00
a20a6a465cPolicy nodes in the rich editor now display a summary of their attributes (groups, version, renew, accept, etc.) and expose an edit button that opens the policy builder modal pre-populated with the current values. Changes are applied directly to the node, so policies can be tweaked without dropping back to markdown source. Also migrates the policy builder form to FormKit, replacing the bespoke `policy-form-field` component. This brings tooltips, proper field-level validation and a layout consistent with the rest of the UI. The "add users to group" picker now excludes automatic groups, which cannot be assigned to. Before: <img width="1238" height="337" alt="image" src="https://github.com/user-attachments/assets/44b21b44-a669-4474-8d14-5855326debfa" /> <img width="1030" height="1539" alt="image" src="https://github.com/user-attachments/assets/a816a491-ba25-4b0a-aa50-cbee32c60962" /> After: <img width="1280" height="574" alt="image" src="https://github.com/user-attachments/assets/6c4b4e18-674d-4e5a-be20-6008c730d348" /> <img width="1160" height="1499" alt="image" src="https://github.com/user-attachments/assets/7d47782c-9b53-43ee-b135-3bb3a2b9ae43" />
193 lines
3.2 KiB
SCSS
Vendored
193 lines
3.2 KiB
SCSS
Vendored
// Policy in post styles
|
|
.cooked .policy {
|
|
container-type: inline-size;
|
|
position: relative;
|
|
border: 1px solid var(--primary-low);
|
|
|
|
.policy-body {
|
|
padding: 0.75em;
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
.policy-footer {
|
|
border-top: 1px solid var(--primary-low);
|
|
padding: 0.75em;
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&.toggle-accepted {
|
|
color: var(--success);
|
|
}
|
|
|
|
&.toggle-not-accepted {
|
|
color: var(--primary-medium);
|
|
}
|
|
|
|
.user-count {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 0.25em;
|
|
}
|
|
|
|
.d-icon {
|
|
line-height: var(--line-height-large);
|
|
}
|
|
}
|
|
|
|
.no-possible-users {
|
|
color: var(--danger);
|
|
font-size: var(--font-down-1);
|
|
}
|
|
|
|
.user-lists {
|
|
display: flex;
|
|
font-size: var(--font-up-1);
|
|
gap: 0.5rem;
|
|
justify-content: end;
|
|
|
|
.users {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
.avatar {
|
|
margin: 1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.separator {
|
|
border-right: 2px solid var(--primary-low);
|
|
}
|
|
|
|
.see-policy-settings-btn,
|
|
.edit-policy-settings-btn {
|
|
position: absolute;
|
|
top: 0.25em;
|
|
right: 0.25em;
|
|
background: none;
|
|
padding: 0.5em;
|
|
|
|
&:hover {
|
|
color: var(--primary-very-low);
|
|
background: var(--primary-medium);
|
|
}
|
|
}
|
|
|
|
.load-more-users {
|
|
color: var(--primary-medium);
|
|
margin-left: 0.25em;
|
|
}
|
|
|
|
.policy-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
|
|
.btn {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.policy-settings {
|
|
display: none; // JS override kicks in when needed.
|
|
border-top: 1px solid var(--primary-low);
|
|
padding: 0.75em;
|
|
flex-direction: column;
|
|
|
|
.visible-settings {
|
|
color: var(--primary-medium);
|
|
}
|
|
|
|
.save-policy-settings-btn {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
|
|
.settings-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.setting {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 0.75em;
|
|
}
|
|
|
|
.policy-setting-name {
|
|
flex: 1;
|
|
}
|
|
|
|
.policy-setting-value {
|
|
flex: 4;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
@container (max-width: 25rem) {
|
|
.policy-footer {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.user-lists,
|
|
.policy-actions,
|
|
.policy-actions .btn {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Policy in editor styles
|
|
.d-editor-preview .policy,
|
|
.ProseMirror .policy {
|
|
padding: 0.5em;
|
|
border: 1px solid var(--primary-low);
|
|
margin-block: var(--space-4);
|
|
|
|
.policy-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-2);
|
|
font-size: var(--font-up-1);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.policy-node-edit-button {
|
|
padding: var(--space-1);
|
|
}
|
|
|
|
.policy-attrs {
|
|
display: grid;
|
|
grid-template-columns: max-content 1fr;
|
|
gap: var(--space-1) var(--space-2);
|
|
margin: var(--space-2) 0;
|
|
padding: var(--space-2);
|
|
background: var(--primary-very-low);
|
|
|
|
dt {
|
|
font-weight: 700;
|
|
}
|
|
|
|
dd {
|
|
margin: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
}
|
|
|
|
.policy-preview {
|
|
font-size: var(--font-up-1);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.policy-body {
|
|
padding: var(--space-2) 0;
|
|
}
|
|
}
|
