Merge branch 'ui-rework-note-buttons' into 'main'

Ui rework note buttons See merge request reportcreator/reportcreator!386
Syslifters · Dec 22, 2023 · 334e818 · 334e818
2 parents 68bad8e + 5e26478
commit 334e818
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 31 deletions.
diff --git a/frontend/src/components/Btn/Confirm.vue b/frontend/src/components/Btn/Confirm.vue
@@ -32,7 +32,6 @@
             :loading="actionInProgress"
             :disabled="disabled"
             :color="($attrs.color as string|undefined) || buttonColor || 'secondary'"
-            class="ml-1 mr-1"
             @click="!props.confirm ? performAction() : null"
             v-bind="{...$attrs, ...tooltipProps, ...dialogProps}"
           />

diff --git a/frontend/src/components/CreateFindingDialog.vue b/frontend/src/components/CreateFindingDialog.vue
@@ -163,6 +163,10 @@ function onKeydown(event: KeyboardEvent) {
     searchInput.value = null;
   }
 }
+
+defineExpose({
+  open: () => { dialogVisible.value = true },
+});
 </script>
 
 <style lang="scss" scoped>

diff --git a/frontend/src/layouts/default.vue b/frontend/src/layouts/default.vue
@@ -27,7 +27,7 @@
         :active="false"
       >
         <v-icon icon="mdi-notebook" />
-        <s-tooltip activator="parent" location="bottom" text="Notes" />
+        <s-tooltip activator="parent" location="bottom" text="Personal Notes" />
       </s-btn-icon>
       <notification-menu-item v-if="auth.loggedIn.value" />
       <s-btn-icon href="https://docs.sysreptor.com/" target="_blank">

diff --git a/frontend/src/pages/notes/personal.vue b/frontend/src/pages/notes/personal.vue
@@ -1,21 +1,8 @@
 <template>
   <split-menu v-model="localSettings.notebookInputMenuSize" :content-props="{ class: 'pa-0 h-100' }">
     <template #menu>
-      <v-list density="compact" class="pb-0 h-100 d-flex flex-column">
+      <v-list density="compact" class="pt-0 pb-0 h-100 d-flex flex-column">
         <div>
-          <v-list-item-title class="text-h6 pl-2">Personal Notes</v-list-item-title>
-        </div>
-
-        <notes-sortable-list
-          :model-value="noteGroups"
-          @update:model-value="updateNoteOrder"
-          @update:note="updateNote"
-          to-prefix="/notes/personal/"
-          class="flex-grow-1 overflow-y-auto"
-        />
-
-        <div>
-          <v-divider />
           <v-list-item>
             <btn-confirm
               :action="createNote"
@@ -28,7 +15,16 @@
               block
             />
           </v-list-item>
+          <v-divider />
         </div>
+
+        <notes-sortable-list
+          :model-value="noteGroups"
+          @update:model-value="updateNoteOrder"
+          @update:note="updateNote"
+          to-prefix="/notes/personal/"
+          class="flex-grow-1 overflow-y-auto"
+        />
       </v-list>
     </template>
 
@@ -47,7 +43,7 @@ const userNotesStore = useUserNotesStore();
 
 useHeadExtended({
   titleTemplate: (title?: string|null) => userNotesTitleTemplate(title, route),
-  breadcrumbs: () => [{ title: 'Notes', to: '/notes/personal/' }],
+  breadcrumbs: () => [{ title: 'Personal Notes', to: '/notes/personal/' }],
 });
 
 await useAsyncDataE(async () => await userNotesStore.fetchNotes());

diff --git a/frontend/src/pages/projects/[projectId]/notes.vue b/frontend/src/pages/projects/[projectId]/notes.vue
@@ -1,18 +1,8 @@
 <template>
   <split-menu v-model="localSettings.notebookInputMenuSize" :content-props="{ class: 'pa-0 h-100' }">
     <template #menu>
-      <v-list density="compact" class="pb-0 h-100 d-flex flex-column">
-        <notes-sortable-list
-          :model-value="noteGroups"
-          @update:model-value="updateNoteOrder"
-          @update:note="updateNote"
-          :disabled="project.readonly"
-          :to-prefix="`/projects/${$route.params.projectId}/notes/`"
-          class="flex-grow-1 overflow-y-auto"
-        />
-
+      <v-list density="compact" class="pt-0 pb-0 h-100 d-flex flex-column">
         <div>
-          <v-divider />
           <v-list-item>
             <btn-confirm
               :action="createNote"
@@ -24,9 +14,19 @@
               keyboard-shortcut="ctrl+j"
               size="small"
               block
+              class="ma-0"
             />
           </v-list-item>
+          <v-divider />
         </div>
+        <notes-sortable-list
+          :model-value="noteGroups"
+          @update:model-value="updateNoteOrder"
+          @update:note="updateNote"
+          :disabled="project.readonly"
+          :to-prefix="`/projects/${$route.params.projectId}/notes/`"
+          class="flex-grow-1 overflow-y-auto"
+        />
       </v-list>
     </template>
 

diff --git a/frontend/src/pages/projects/[projectId]/reporting.vue b/frontend/src/pages/projects/[projectId]/reporting.vue
@@ -29,15 +29,28 @@
 
           <v-list-subheader>
             <span>Findings</span>
+            <s-btn-icon
+              @click="($refs.createFindingDialogRef as any)!.open()"
+              :disabled="project.readonly"
+              size="small"
+              variant="flat"
+              color="secondary"
+              density="compact"
+              class="ml-2"
+            >
+              <v-icon icon="mdi-plus" />
+              <s-tooltip activator="parent" location="top">Add Finding (Ctrl+J)</s-tooltip>
+            </s-btn-icon>
             <v-spacer />
             <s-btn-icon
               v-if="projectType.finding_ordering.length > 0"
               @click="toggleOverrideFindingOrder"
               :disabled="project.readonly"
-              size="x-small"
+              size="small"
+              density="compact"
             >
               <v-icon :icon="project.override_finding_order ? 'mdi-sort-variant-off' : 'mdi-sort-variant'" />
-              <s-tooltip activator="parent">
+              <s-tooltip activator="parent" location="top">
                 <span v-if="project.override_finding_order">Custom order</span>
                 <span v-else>Default order</span>
               </s-tooltip>
@@ -83,7 +96,7 @@
         <div>
           <v-divider class="mb-1" />
           <v-list-item>
-            <create-finding-dialog :project="project" />
+            <create-finding-dialog ref="createFindingDialogRef" :project="project" />
           </v-list-item>
         </div>
       </v-list>