Skip to content

Commit 1445014

Browse files
vitormattosvitormattos
committed
feat(policy): tighten workbench header layout and copy
Signed-off-by: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>
1 parent cbdd3aa commit 1445014

1 file changed

Lines changed: 96 additions & 53 deletions

File tree

‎src/views/Settings/PolicyWorkbench/RealPolicyWorkbench.vue‎

Lines changed: 96 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -168,8 +168,8 @@
168168
</p>
169169

170170
<div v-if="state.summary" class="policy-workbench__summary-line policy-workbench__summary-line--crud">
171-
<span class="policy-workbench__summary-caption">{{ t('libresign', 'Effective baseline') }}</span>
172-
<strong>{{ state.summary.currentBaseValue }}</strong>
171+
<span class="policy-workbench__summary-caption">{{ t('libresign', 'Default:') }}</span>
172+
<strong class="policy-workbench__summary-value-compact">{{ state.summary.currentBaseValue }}</strong>
173173
<span class="policy-workbench__value-source">
174174
{{ state.hasGlobalDefault ? t('libresign', 'Custom default') : t('libresign', 'System default') }}
175175
</span>
@@ -181,42 +181,50 @@
181181
:label="t('libresign', 'Search rules')"
182182
:placeholder="t('libresign', 'Search by scope, target, or value')"
183183
@update:modelValue="onCrudSearchChange" />
184-
<NcPopover :boundary="popoverBoundary">
185-
<template #trigger>
186-
<NcButton :aria-label="t('libresign', 'Filters')" :pressed="crudScopeFilter !== 'all'" variant="tertiary">
187-
<template #icon>
188-
<NcIconSvgWrapper :path="mdiFilterVariant" />
189-
</template>
190-
{{ t('libresign', 'Filters') }}
191-
</NcButton>
192-
</template>
193-
<template #default>
194-
<div class="policy-workbench__crud-filter-popover">
195-
<p class="policy-workbench__crud-filter-title">{{ t('libresign', 'Scope') }}</p>
196-
<div class="policy-workbench__crud-filter-options">
197-
<label class="policy-workbench__filter-option">
198-
<input type="radio" name="crudScope" :checked="crudScopeFilter === 'all'" @change="setCrudScopeFilter('all', true)" />
199-
<span>{{ t('libresign', 'All scopes') }}</span>
200-
</label>
201-
<label class="policy-workbench__filter-option">
202-
<input type="radio" name="crudScope" :checked="crudScopeFilter === 'system'" @change="setCrudScopeFilter('system', true)" />
203-
<span>{{ t('libresign', 'Instance') }}</span>
204-
</label>
205-
<label class="policy-workbench__filter-option">
206-
<input type="radio" name="crudScope" :checked="crudScopeFilter === 'group'" @change="setCrudScopeFilter('group', true)" />
207-
<span>{{ t('libresign', 'Group') }}</span>
208-
</label>
209-
<label class="policy-workbench__filter-option">
210-
<input type="radio" name="crudScope" :checked="crudScopeFilter === 'user'" @change="setCrudScopeFilter('user', true)" />
211-
<span>{{ t('libresign', 'User') }}</span>
212-
</label>
213-
</div>
214-
<NcButton v-if="crudScopeFilter !== 'all'" variant="tertiary" @click="setCrudScopeFilter('all', true)">
215-
{{ t('libresign', 'Clear filter') }}
184+
185+
<div class="policy-workbench__crud-controls">
186+
<NcPopover :boundary="popoverBoundary">
187+
<template #trigger>
188+
<NcButton :aria-label="t('libresign', 'Filters')" :pressed="crudScopeFilter !== 'all'" variant="tertiary">
189+
<template #icon>
190+
<NcIconSvgWrapper :path="mdiFilterVariant" />
191+
</template>
192+
{{ t('libresign', 'Filters') }}
216193
</NcButton>
217-
</div>
218-
</template>
219-
</NcPopover>
194+
</template>
195+
<template #default>
196+
<div class="policy-workbench__crud-filter-popover">
197+
<p class="policy-workbench__crud-filter-title">{{ t('libresign', 'Scope') }}</p>
198+
<div class="policy-workbench__crud-filter-options">
199+
<label class="policy-workbench__filter-option">
200+
<input type="radio" name="crudScope" :checked="crudScopeFilter === 'all'" @change="setCrudScopeFilter('all', true)" />
201+
<span>{{ t('libresign', 'All scopes') }}</span>
202+
</label>
203+
<label class="policy-workbench__filter-option">
204+
<input type="radio" name="crudScope" :checked="crudScopeFilter === 'system'" @change="setCrudScopeFilter('system', true)" />
205+
<span>{{ t('libresign', 'Instance') }}</span>
206+
</label>
207+
<label class="policy-workbench__filter-option">
208+
<input type="radio" name="crudScope" :checked="crudScopeFilter === 'group'" @change="setCrudScopeFilter('group', true)" />
209+
<span>{{ t('libresign', 'Group') }}</span>
210+
</label>
211+
<label class="policy-workbench__filter-option">
212+
<input type="radio" name="crudScope" :checked="crudScopeFilter === 'user'" @change="setCrudScopeFilter('user', true)" />
213+
<span>{{ t('libresign', 'User') }}</span>
214+
</label>
215+
</div>
216+
<NcButton v-if="crudScopeFilter !== 'all'" variant="tertiary" @click="setCrudScopeFilter('all', true)">
217+
{{ t('libresign', 'Clear filter') }}
218+
</NcButton>
219+
</div>
220+
</template>
221+
</NcPopover>
222+
223+
<div v-if="activeScopeFilterChip" class="policy-workbench__crud-filter-chips">
224+
<NcChip :aria-label-close="t('libresign', 'Remove filter')" :text="activeScopeFilterChip" @close="setCrudScopeFilter('all', true)" />
225+
</div>
226+
</div>
227+
220228
<div v-if="state.viewMode === 'system-admin'" class="policy-workbench__crud-create">
221229
<NcButton variant="primary" size="small" :disabled="!hasCreatableScope" :title="createRuleDisabledReason || undefined" @click="requestCreateRule()">
222230
{{ t('libresign', 'Create rule') }}
@@ -227,11 +235,7 @@
227235
</div>
228236
</div>
229237

230-
<div v-if="activeScopeFilterChip" class="policy-workbench__crud-filter-chips">
231-
<NcChip :aria-label-close="t('libresign', 'Remove filter')" :text="activeScopeFilterChip" @close="setCrudScopeFilter('all', true)" />
232-
</div>
233-
234-
<p v-if="state.createUserOverrideDisabledReason" class="policy-workbench__table-note">
238+
<p v-if="state.createUserOverrideDisabledReason && crudScopeFilter === 'user'" class="policy-workbench__table-note">
235239
{{ t('libresign', 'Some users may not allow user overrides because their group rule requires inheritance.') }}
236240
</p>
237241

@@ -1089,7 +1093,6 @@ onBeforeUnmount(() => {
10891093
&__crud-filter-chips {
10901094
display: flex;
10911095
align-items: center;
1092-
margin-top: 0.5rem;
10931096
}
10941097
10951098
&__settings-grid {
@@ -1455,19 +1458,28 @@ onBeforeUnmount(() => {
14551458
14561459
&--crud {
14571460
align-items: flex-end;
1458-
justify-content: space-between;
1461+
gap: 0.85rem;
14591462
14601463
:deep(.text-field) {
1461-
flex: 1 1 280px;
1464+
flex: 1 1 320px;
1465+
min-width: min(100%, 320px);
14621466
}
14631467
}
14641468
}
14651469
1470+
&__crud-controls {
1471+
display: flex;
1472+
align-items: center;
1473+
gap: 0.5rem;
1474+
flex: 0 1 auto;
1475+
}
1476+
14661477
&__crud-create {
14671478
display: flex;
14681479
flex-direction: column;
14691480
align-items: flex-end;
14701481
gap: 0.45rem;
1482+
margin-left: auto;
14711483
}
14721484
14731485
@@ -1543,6 +1555,32 @@ onBeforeUnmount(() => {
15431555
display: none;
15441556
}
15451557
1558+
@media (max-width: 720px) {
1559+
&__table-toolbar-row--crud {
1560+
align-items: stretch;
1561+
}
1562+
1563+
&__crud-controls {
1564+
width: 100%;
1565+
justify-content: flex-start;
1566+
}
1567+
1568+
&__crud-create {
1569+
margin-left: 0;
1570+
align-items: stretch;
1571+
width: 100%;
1572+
1573+
:deep(.button-vue) {
1574+
width: 100%;
1575+
justify-content: center;
1576+
}
1577+
}
1578+
1579+
&__table-note--align-right {
1580+
text-align: left;
1581+
}
1582+
}
1583+
15461584
@media (min-width: 961px) {
15471585
&__dialog {
15481586
flex-direction: row;
@@ -1627,24 +1665,29 @@ onBeforeUnmount(() => {
16271665
// New compact summary line
16281666
&__summary-line {
16291667
display: flex;
1630-
align-items: flex-start;
1631-
flex-direction: column;
1632-
gap: 0.35rem;
1633-
padding: 0.25rem 0;
1668+
align-items: center;
1669+
flex-wrap: wrap;
1670+
gap: 0.45rem;
1671+
padding: 0.15rem 0;
16341672
color: var(--color-main-text);
16351673
16361674
&--crud {
1637-
margin: 0.5rem 0 0.75rem;
1675+
margin: 0.35rem 0 0.6rem;
16381676
}
16391677
}
16401678
16411679
&__summary-caption {
1642-
font-size: 0.82rem;
1643-
text-transform: uppercase;
1644-
letter-spacing: 0.03em;
1680+
font-size: 0.86rem;
1681+
font-weight: 600;
16451682
color: var(--color-text-maxcontrast);
16461683
}
16471684
1685+
&__summary-value-compact {
1686+
font-size: 1rem;
1687+
font-weight: 700;
1688+
line-height: 1.2;
1689+
}
1690+
16481691
&__summary-wrap {
16491692
:deep(.notecard) {
16501693
margin: 0;

0 commit comments

Comments
 (0)