Merge pull request #208 from pneumaticapp/frontend/ui/46275__print_a_workflow_log

46275 frontend [ workflows ] print a workflow log

Author: pneumatic-ilyacedrik

frontend/src/public/assets/css/print/print.css

@@ -0,0 +1,32 @@
+/* stylelint-disable declaration-no-important */
+@media print {
+    html,
+    body {
+      overflow: visible !important;
+      height: auto !important;
+    }
+  
+    [id='pneumatic-frontend'] {
+      overflow: visible !important;
+      height: auto !important;
+    }
+  
+    main .container-fluid .row {
+      display: flex !important;
+    }
+  
+    * {
+      print-color-adjust: exact;
+      -webkit-print-color-adjust: exact;
+      scrollbar-width: none;
+    }
+    
+    *::-webkit-scrollbar {
+      display: none;
+    }
+
+    .no-print {
+      display: none !important;
+    }
+}
+  

frontend/src/public/assets/css/style.css

@@ -2,6 +2,7 @@
 // Table of Contents
 // -------------------
 // 00. Variables
+// 00.1. Print
 // 01. Library
 // 02. Reset style
 // 03. Base style
@@ -14,6 +15,12 @@
 
 @import './variables/color';
 
+/* ===================
+// 00.1. Print
+// =================== */
+
+@import './print/print.css';
+
 /* ===================
 // 01. Library
 // ===================
@@ -93,4 +100,4 @@ svg {
 /* Fix bootstrap style */
 .form-control {
   font-size: 1.5rem !important;
-}
+}

frontend/src/public/components/TaskCard/TaskCard.tsx

@@ -365,7 +365,7 @@ export function TaskCard({
           <UsersDropdown
               isMulti
               controlSize="sm"
-              className={styles['responsible']}
+              className={classnames(styles['responsible'], 'no-print')} 
               placeholder={formatMessage({ id: 'user.search-field-placeholder' })}
               options={[...performerGroupDropdownOption, ...performerDropdownOption]}
               value={[...performerDropdownValue, ...performerGroupDropdownValue]}
@@ -379,7 +379,7 @@ export function TaskCard({
         )}
 
         {viewMode !== ETaskCardViewMode.Guest && !task.isReadOnlyViewer && (
-          <GuestController ref={guestsControllerRef} taskId={task.id} className={styles['guest-dropdown']} />
+          <GuestController ref={guestsControllerRef} taskId={task.id} className={classnames(styles['guest-dropdown'], 'no-print')} />
         )}
       </>
     );
@@ -497,7 +497,7 @@ export function TaskCard({
     );
 
     return (
-      <div className={styles['buttons']}>
+      <div className={classnames(styles['buttons'], 'no-print')}>
         <div className={styles['buttons__complete']}>
           {isEmbeddedWorkflowsComplete ? (
             renderCompleteButton(!isEmbeddedWorkflowsComplete)

frontend/src/public/components/Workflows/WorkflowLog/WorkflowLog.tsx

@@ -222,7 +222,7 @@ export const WorkflowLog = ({
     }
 
     return (
-      <div className={styles['comment-field']}>
+      <div className={classnames(styles['comment-field'], 'no-print')}>
         <PopupCommentFieldContainer sendComment={sendComment} taskId={taskId} mentions={mentions} />
       </div>
     );

frontend/src/public/components/Workflows/WorkflowLog/WorkflowLogEvents/WorkflowLogTaskComment/WorkflowLogTaskComment.tsx

@@ -158,7 +158,7 @@ export function WorkflowLogTaskComment({
     if (currentUserId !== userId || workflowStatus === EWorkflowStatus.Finished) return null;
 
     return (
-      <div className={styles['comment__actions']}>
+      <div className={classnames(styles['comment__actions'], 'no-print')}>
         {renderDeleteButton()}
         {!isDelete && (
           <button
@@ -327,7 +327,7 @@ export function WorkflowLogTaskComment({
           <Tooltip
             visible={isShowTooltipEmoji}
             size="auto"
-            containerClassName={classnames(styles['comment__footer-item'], styles['is-add-emoji'])}
+            containerClassName={classnames(styles['comment__footer-item'], styles['is-add-emoji'], 'no-print')}
             content={
               isShowEmoji && (
                 <Picker

frontend/stylelint/config.js

@@ -255,7 +255,7 @@ module.exports = {
         // Property
         // 'property-blacklist': array|string,
         'property-case': 'lower',
-        'property-no-unknown': [true, { ignoreProperties: ['composes', 'field-sizing'] }],
+        'property-no-unknown': [true, { ignoreProperties: ['composes', 'field-sizing', 'print-color-adjust'] }],
         'property-no-vendor-prefix': true,
         // 'property-whitelist': array|string,
         // Keyframe declaration