MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Make role editor full screen

This commit is contained in:
Andrew Kingston 2024-10-03 15:47:05 +01:00
parent 303bb94eec
commit c51c7cd2a6
No known key found for this signature in database
2 changed files with 27 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/builder/src/components/backend/RoleEditor/Controls.svelte
View File

@ -8,7 +8,7 @@
const flow = useSvelteFlow() const flow = useSvelteFlow()
</script> </script>
<div class="control top-left"> <div class="control top-right">
<div class="group"> <div class="group">
<ActionButton <ActionButton
icon="Add" icon="Add"
@ -36,25 +36,25 @@
align-items: center; align-items: center;
gap: 12px; gap: 12px;
} }
.top-left { .top-right {
top: 20px; top: 20px;
left: 20px; right: 20px;
} }
.bottom-right { .bottom-right {
bottom: 20px; bottom: 20px;
right: 20px; right: 20px;
} }
.top-left :global(.spectrum-Button), .top-right :global(.spectrum-Button),
.top-left :global(.spectrum-ActionButton), .top-right :global(.spectrum-ActionButton),
.top-left :global(.spectrum-Icon) { .top-right :global(.spectrum-Icon) {
color: var(--spectrum-global-color-gray-900) !important; color: var(--spectrum-global-color-gray-900) !important;
} }
.top-left :global(.spectrum-Button), .top-right :global(.spectrum-Button),
.top-left :global(.spectrum-ActionButton) { .top-right :global(.spectrum-ActionButton) {
background: var(--spectrum-global-color-gray-200) !important; background: var(--spectrum-global-color-gray-200) !important;
} }
.top-left :global(.spectrum-Button:hover), .top-right :global(.spectrum-Button:hover),
.top-left :global(.spectrum-ActionButton:hover) { .top-right :global(.spectrum-ActionButton:hover) {
background: var(--spectrum-global-color-gray-300) !important; background: var(--spectrum-global-color-gray-300) !important;
} }
.group { .group {

31
packages/builder/src/components/backend/RoleEditor/RoleFlow.svelte
View File

@ -157,10 +157,7 @@
</script> </script>
<div class="title"> <div class="title">
<div class="heading"> <div class="heading" />
<Heading size="S">Manage roles</Heading>
</div>
<div class="description">Roles inherit permissions from each other.</div>
</div> </div>
<div class="flow"> <div class="flow">
<SvelteFlow <SvelteFlow
@ -180,22 +177,17 @@
> >
<Background variant={BackgroundVariant.Dots} /> <Background variant={BackgroundVariant.Dots} />
<Controls /> <Controls />
<div class="title">
<Heading size="S">Manage roles</Heading>
</div>
<div class="footer">Roles inherit permissions from each other</div>
</SvelteFlow> </SvelteFlow>
</div> </div>
<style> <style>
.heading {
border-bottom: 1px solid var(--spectrum-global-color-gray-300);
margin-bottom: 20px;
padding-bottom: 12px;
}
.description {
color: var(--spectrum-global-color-gray-600);
margin-bottom: calc(20px - var(--spacing-l));
}
.flow { .flow {
margin: -28px -40px -40px -40px;
flex: 1 1 auto; flex: 1 1 auto;
border-radius: 8px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
--background-color: var(--spectrum-global-color-gray-50); --background-color: var(--spectrum-global-color-gray-50);
@ -204,6 +196,17 @@
--handle-color: var(--spectrum-global-color-gray-600); --handle-color: var(--spectrum-global-color-gray-600);
--selected-color: var(--spectrum-global-color-blue-400); --selected-color: var(--spectrum-global-color-blue-400);
} }
.title {
position: absolute;
top: 20px;
left: 20px;
}
.footer {
position: absolute;
left: 20px;
bottom: 20px;
color: var(--spectrum-global-color-gray-600);
}
/* Customise svelte-flow theme */ /* Customise svelte-flow theme */
.flow :global(.svelte-flow) { .flow :global(.svelte-flow) {