Comment usability improvements

CHANGELOG.md

@@ -6,6 +6,9 @@
 * Run periodic tasks in background
 * Add user option to force change password on next login
 * Fix finding.created not included in design preview data 
+* Allow marking resolved comments as open
+* UI: Create comments with Ctrl+Alt+M
+* UI: Save comment texts with Ctrl+Enter
 * UI: fix line break in logo text on Firefox
 
 

packages/frontend/src/components/Comment/Btn.vue

@@ -1,6 +1,7 @@
 <template>
   <s-btn-icon
     v-if="props.comments.length > 0"
+    ref="btnRef"
     @click="emit('comment', {type: 'select', comment: props.comments[0], openSidebar: true})"
   >
     <v-badge 
@@ -15,7 +16,7 @@
   </s-btn-icon>
   <s-btn-icon
     v-else
-    @click="emit('comment', {type: 'create', comment: { collabPath: props.collabPath}})"
+    @click="createComment"
     :disabled="props.disabled"
     icon="mdi-comment-plus-outline"
     :style="{ opacity: props.isHovering ? 1 : 0 }"
@@ -34,4 +35,16 @@ const props = defineProps<{
 const emit = defineEmits<{
   'comment': [value: any];
 }>();
+
+function createComment() {
+  if (props.disabled) {
+    return;
+  }
+  emit('comment', {type: 'create', comment: { collabPath: props.collabPath}})
+}
+
+const btnRef = ref();
+defineExpose({
+  createComment,
+});
 </script>

packages/frontend/src/components/Comment/Content.vue

@@ -47,6 +47,7 @@
         <v-textarea
           ref="textFieldRef"
           v-model="editText"
+          @keydown.ctrl.enter.prevent="performUpdate"
           :placeholder="props.placeholder"
           density="compact"
           variant="outlined"

packages/frontend/src/components/Comment/Detail.vue

@@ -22,13 +22,24 @@
       <template #menu>
         <btn-confirm
           v-if="comment.status === CommentStatus.OPEN"
-          :action="() => projectStore.resolveComment(props.project, comment, { status: comment.status === CommentStatus.OPEN ? CommentStatus.RESOLVED : CommentStatus.OPEN })"
+          :action="() => projectStore.resolveComment(props.project, comment, { status: CommentStatus.RESOLVED })"
           :disabled="readonly"
           :confirm="false"
           button-variant="icon"
-          button-icon="mdi-check"
+          button-icon="mdi-circle-outline"
           button-text="Resolve"
           tooltip-text="Resolve comment"
+          density="compact"
+        />
+        <btn-confirm
+          v-else
+          :action="() => projectStore.resolveComment(props.project, comment, { status: CommentStatus.OPEN })"
+          :disabled="readonly"
+          :confirm="false"
+          button-variant="icon"
+          button-icon="mdi-checkbox-marked-circle-outline"
+          button-text="Un-resolve"
+          tooltip-text="Mark as open (unresolved)"
           :button-color="'success'"
           density="compact"
         />

packages/frontend/src/components/Comment/Sidebar.vue

@@ -257,3 +257,10 @@ defineExpose({
   min-height: 0;
 }
 </style>
+
+<!-- TODO: comment improvements
+* [x] change icon for resolve: mdi-check-marked-circle
+* [x] allow un-resolving comments
+* [x] save comment/answer with Ctrl+Enter
+* [x] add comment in markdown for selected text with Ctrl+Alt+M 
+-->

packages/frontend/src/components/DynamicInputField.vue

@@ -1,7 +1,7 @@
 <template>
   <v-hover v-model="isHovering">
     <template #default="{ props: hoverProps }">
-      <div :id="props.id" class="mt-4 d-flex flex-row flex-grow-width" :class="nestedClass" v-bind="hoverProps">
+      <div :id="props.id" class="mt-4 d-flex flex-row flex-grow-width" :class="nestedClass" @keydown.ctrl.alt.m.stop="commentBtnRef?.createComment()" v-bind="hoverProps">
         <div class="flex-grow-width">
           <!-- String -->
           <markdown-text-field
@@ -538,12 +538,15 @@ const inheritedAttrs = computed(() => (nestedDefinition: FieldDefinition) => {
 
 const isHovering = ref(false);
 const commentBtnAttrs = computed(() => ({
+  ref: 'commentBtnRef',
   comments: props.collab?.comments?.filter(c => c.collabPath === props.collab?.path) || [],
   onComment: (v: any) => emit('comment', v),
   collabPath: props.collab?.path || '',
   isHovering: isHovering.value,
   disabled: props.disabled || props.readonly,
 }));
+
+const commentBtnRef = ref();
 </script>
 
 <style lang="scss" scoped>

packages/frontend/src/components/DynamicInputFieldDiff.vue

@@ -4,7 +4,7 @@
     v-model="isHovering"
   >
     <template #default="{ props: hoverProps }">
-      <div :id="props.id" class="mt-4" :class="nestedClass" v-bind="hoverProps">
+      <div :id="props.id" class="mt-4" :class="nestedClass" @keydown.ctrl.alt.m.stop="commentBtnRef?.createComment()" v-bind="hoverProps">
         <s-card v-if="props.current.definition?.type === 'object'">
           <v-card-item class="pb-0">
             <v-card-title class="text-body-1">{{ props.current.definition.label }}</v-card-title>
@@ -173,11 +173,13 @@ const nestedClass = computed(() => {
 
 const isHovering = ref(false);
 const commentBtnAttrs = computed(() => ({
+  ref: 'commentBtnRef',
   comments: props.current.collab?.comments?.filter(c => c.collabPath === props.current.collab?.path) || [],
   onComment: (v: any) => props.current?.onComment?.(v),
   collabPath: props.current.collab?.path || '',
   isHovering: isHovering.value,
   disabled: (props.current as any).disabled || props.current.readonly,
   density: 'comfortable',
 }));
+const commentBtnRef = ref();
 </script>

packages/frontend/src/composables/markdown.ts

@@ -185,6 +185,24 @@ export function useMarkdownEditorBase(options: {
       fileUploadInProgress.value = false;
     }
   }
+
+  function createCommentShortcut(view: EditorView) {
+    if (!options.props.value.collab?.comments || options.props.value.disabled || options.props.value.readonly) {
+      return false;
+    }
+
+    const selectionRange = view.state.selection.main
+    options.emit('comment', {
+      type: 'create', 
+      comment: { 
+        text: '', 
+        collabPath: options.props.value.collab!.path, 
+        text_range: selectionRange.empty ? null : { from: selectionRange.from, to: selectionRange.to },
+      }
+    });
+
+    return true;
+  }
 
   function onBeforeApplyRemoteTextChange(event: any) {
     if (options.editorView.value && event.path === options.props.value.collab?.path) {
@@ -234,7 +252,11 @@ export function useMarkdownEditorBase(options: {
             return { dom };
           },
         }),
-        keymap.of([...defaultKeymap, ...historyKeymap]),
+        keymap.of([
+          ...defaultKeymap, 
+          ...historyKeymap,
+          { key: 'Ctrl-Alt-m', stopPropagation: true, run: createCommentShortcut },
+        ]),
         tooltips({ parent: document.body }),
         EditorView.domEventHandlers({
           blur: (event: FocusEvent) => options.emit('blur', event),

plugins/webhooks/README.md

@@ -7,7 +7,7 @@ Configure webhooks by enabling this plugin and configuring `WEBHOOKS='[...]'` in
 
 ```shell
 ENABLED_PLUGINS="webhooks"
-WEBHOOKS='[{"url": "https://example.com/webhook", "headers": {"Authorization": "shared secret", "X-Custom-Header": "other"} "events": ["project_created"]}]'
+WEBHOOKS='[{"url": "https://example.com/webhook", "headers": {"Authorization": "shared secret", "X-Custom-Header": "other"} "events": ["project_created", "project_finished"]}]'
 ```
 
 The `events` option configures a list of events that should trigger the webhook. See [WebhookEventType in models.py](./models.py) for available events.
@@ -20,7 +20,7 @@ The body contains the event type and resource IDs, but no (potentially sensitive
 
 ```json
 {
-    "event": "project_created",
+    "event": "project_finished",
     "project_id": "11223344-5566-7788-9900-aabbccddeeff"
 }
 ```