Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI/keep line breaks #44

Merged
merged 6 commits into from
Feb 14, 2024
Merged

UI/keep line breaks #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ac67fd7
Keep line breaks in detail views
nas-tabchiche Feb 13, 2024
4583fb9
Keep line breaks in ModelTable
nas-tabchiche Feb 13, 2024
ff1b77f
Keep line breaks for TreeViewItemContent
nas-tabchiche Feb 13, 2024
9409149
Use span instead of pre
nas-tabchiche Feb 13, 2024
a8701fc
Keep line breaks in requirement assessment detail
nas-tabchiche Feb 14, 2024
adce386
Keep line breaks in requirement assessments title
nas-tabchiche Feb 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions frontend/src/lib/components/ModelTable/ModelTable.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script lang="ts">
import TableRowActions from '$lib/components/TableRowActions/TableRowActions.svelte';
import { page } from '$app/stores';
import TableRowActions from '$lib/components/TableRowActions/TableRowActions.svelte';
import { FIELD_COLORED_TAG_MAP, FIELD_COMPONENT_MAP } from '$lib/utils/crud';
import { createEventDispatcher } from 'svelte';

Expand Down Expand Up @@ -198,8 +198,9 @@
{#if component}
<svelte:component this={component} meta={row.meta ?? {}} cell={value}/>
{:else}
<span class="font-token whitespace-pre-line break-words">
{#if Array.isArray(value)}
<ul class="list-disc pl-4">
<ul class="list-disc pl-4 whitespace-normal">
{#each value as val}
<li>
{#if val.str && val.id}
Expand All @@ -224,11 +225,12 @@
{:else}
{value.str ?? '-'}
{/if}
{:else if value && value.hexcolor}
<p class="flex w-1/2 justify-center p-1 rounded-md ml-2" style="background-color: {value.hexcolor}">{value.name ?? value.str ?? '-'}</p>
{:else if value && value.hexcolor}
<p class="flex w-1/2 justify-center p-1 rounded-md ml-2" style="background-color: {value.hexcolor}">{value.name ?? value.str ?? '-'}</p>
{:else}
{value ?? '-'}
{/if}
</span>
{/if}
</td>
{/if}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/routes/(app)/[model=urlmodel]/[id=uuid]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@
</div>
{/if}
<div class="card px-6 py-4 bg-white flex flex-row space-y-2 justify-between shadow-lg">
<div class="flex flex-col space-y-2">
<div class="flex flex-col space-y-2 whitespace-pre-line">
{#each Object.entries(data.data).filter(([key, _]) => !['id', 'is_published'].includes(key)) as [key, value]}
<div class="flex flex-col">
<div class="text-sm font-medium text-gray-800 capitalize-first">
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/routes/(app)/compliance-assessments/[id=uuid]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,9 +80,9 @@
$: expandedNodesState.set(expandedNodes);
</script>

<div class="flex flex-col space-y-4">
<div class="flex flex-col space-y-4 whitespace-pre-line">
<div class="card px-6 py-4 bg-white flex flex-row justify-between shadow-lg">
<div class="flex flex-col space-y-2">
<div class="flex flex-col space-y-2 whitespace-pre-line">
{#each Object.entries(data.compliance_assessment).filter( ([key, _]) => ['name', 'description', 'project', 'framework'].includes(key) ) as [key, value]}
<div class="flex flex-col">
<div class="text-sm font-medium text-gray-800 capitalize-first">
Expand Down
4 changes: 3 additions & 1 deletion frontend/src/routes/(app)/compliance-assessments/[id=uuid]/TreeViewItemContent.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,9 @@
</a>
</span>
{:else}
{content}
<p class="max-w-[65ch] whitespace-pre-line">
{content}
</p>
{/if}
</span>
{#if (threats && threats.length > 0) || (security_functions && security_functions.length > 0)}
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/routes/(app)/evidences/[id=uuid]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,9 +66,9 @@
let tabSet = 0;
</script>

<div class="flex flex-col space-y-4">
<div class="flex flex-col space-y-4 whitespace-pre-line">
<div class="card px-6 py-4 bg-white flex flex-row justify-between shadow-lg">
<div class="flex flex-col space-y-2">
<div class="flex flex-col space-y-2 whitespace-pre-line">
{#each Object.entries(data.evidence).filter( ([key, _]) => ['name', 'description', 'folder', 'attachment', 'link', 'comment'].includes(key) ) as [key, value]}
<div class="flex flex-col">
<div class="text-sm font-medium text-gray-800 capitalize-first">
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/routes/(app)/frameworks/[id=uuid]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
let treeViewNodes: TreeViewNode[] = transformToTreeView(Object.entries(tree));
</script>

<div class="flex flex-col space-y-4">
<div class="flex flex-col space-y-4 whitespace-pre-line">
<div class="card px-6 py-4 bg-white flex flex-row justify-between shadow-lg">
<div class="flex flex-col space-y-2">
{#each Object.entries(data.framework).filter(([key, _]) => key !== 'id' && key !== 'created_at') as [key, value]}
Expand Down
18 changes: 14 additions & 4 deletions frontend/src/routes/(app)/frameworks/[id=uuid]/TreeViewItemContent.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,26 @@
</script>

<div>
<span style="font-weight: {hasChildren ? 600 : 300};">
{content}
<span class="whitespace-pre-line" style="font-weight: {hasChildren ? 600 : 300};">
<p class="max-w-[65ch]">
{content}
</p>
</span>
{#if (threats && threats.length > 0) || (security_functions && security_functions.length > 0)}
<div
role="button"
tabindex="0"
class="underline text-sm hover:text-primary-400 {classesShowInfoText(showInfo)}"
on:click={(_) => (showInfo = !showInfo)}
on:keydown={(_) => (showInfo = !showInfo)}
on:click={(e) => {
e.preventDefault();
showInfo = !showInfo;
}}
on:keydown={(e) => {
if (e.key === 'Enter') {
e.preventDefault();
showInfo = !showInfo;
}
}}
>
<i class="text-xs fa-solid fa-info-circle" /> Learn more
</div>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/routes/(app)/requirement-assessments/[id=uuid]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,12 +141,12 @@
</script>

<div class="card space-y-2 p-4 bg-white shadow">
<h3 class="h3 font-semibold">
<h3 class="h3 font-semibold whitespace-pre-line">
{title}
</h3>
<code class="code">{data.requirement.urn}</code>
{#if data.requirement.description}
<p>{data.requirement.description}</p>
<p class="whitespace-pre-line">{data.requirement.description}</p>
{/if}
{#if threats || security_functions}
<div class="card p-4 variant-glass-primary text-sm flex flex-row cursor-auto">
Expand Down
Loading