@imposium-hub/components 2.9.0-5 → 2.9.0-7

package/dist/styles.css

@@ -557,6 +557,10 @@ body a {
   justify-content: space-between;
   width: 100%;
 }
+.ongoing-upload-inner .upload-icon {
+  padding-left: 2px;
+  padding-right: 2px;
+}
 .ongoing-upload-inner .tags-column {
   width: unset;
   padding: unset;
@@ -655,6 +659,7 @@ body a {
 }
 .button-menu .menu.left {
   right: 0;
+  z-index: 2000;
 }
 .button-menu-item {
   padding: 3px;
@@ -814,10 +819,6 @@ body a {
   margin: 0px;
 }
 .confirm-modal {
-  position: relative;
-  align-items: center;
-  display: flex;
-  flex-direction: column;
   top: calc(50% - 38px);
 }
 .confirm-modal p {
@@ -828,7 +829,49 @@ body a {
   width: 76px;
 }
 .confirm-modal .confirm-buttons .imposium-btn .btn-bold {
-  border: 1px solid #2D8CEA;
+  border: 1px solid #2d8cea;
+}
+.replace-files-modal,
+.confirm-modal {
+  position: relative;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+}
+.replace-files-modal .confirm-buttons .imposium-btn,
+.confirm-modal .confirm-buttons .imposium-btn,
+.replace-files-modal .replace-files-buttons .imposium-btn,
+.confirm-modal .replace-files-buttons .imposium-btn {
+  width: 76px;
+}
+.replace-files-modal .confirm-buttons .imposium-btn .btn-bold,
+.confirm-modal .confirm-buttons .imposium-btn .btn-bold,
+.replace-files-modal .replace-files-buttons .imposium-btn .btn-bold,
+.confirm-modal .replace-files-buttons .imposium-btn .btn-bold {
+  border: 1px solid #2d8cea;
+}
+.replace-files-modal {
+  text-align: center;
+}
+.replace-files-buttons {
+  width: 100%;
+  margin-top: 10px;
+}
+.replace-files-buttons .checkbox {
+  float: left;
+  padding-left: 10px;
+  position: relative;
+  top: 6px;
+}
+.replace-files-buttons .checkbox .label-left {
+  width: fit-content;
+}
+.replace-files-buttons .checkbox .checkbox {
+  top: 0px;
+}
+.replace-files-buttons .buttons {
+  float: right;
+  padding-right: 10px;
 }
 .card {
   background: #2f2f2f;
@@ -2759,7 +2802,7 @@ body a {
   padding-left: 4px;
   height: 35px;
   background: #242424;
-  z-index: 2000;
+  z-index: 1000;
 }
 .story-viewer .viewer-content .content-header .output {
   margin-top: 4px;

package/dist/styles.less

@@ -362,44 +362,6 @@ body{
     }
 }
 
-// .assetUploads {
-//     .imposium-dropdown {
-//         border: unset;
-
-//         .uploads-dropzone{
-//             position: absolute;
-//             top: 0;
-//             height: 100%;
-//             z-index: 2;
-//             display: none;
-
-//             &.asset-over {
-//                 .uploads-menu{
-//                     opacity: .3;
-//                 }
-//                 .overlay {
-//                     border-style: dashed;
-//                     border-color: hsl(225, 100%, 50%);
-//                     border-width: medium;
-//                     position: absolute;
-//                     top: 50%;
-//                     left: 50%;
-//                     transform: translate(-50%, -50%);
-//                     -ms-transform: translate(-50%, -50%);
-//                     text-align: center;
-//                     height: 98%;
-//                     width: 99%;
-//                     display: flex;
-//                     z-index: 1;
-//                     p {
-//                         vertical-align: middle;
-//                         margin: auto;
-//                     }
-//                 }
-//             }
-//         }
-//     }
-// }
 .uploads-menu {
     height: 100%;
     overflow-y: auto;
@@ -577,7 +539,7 @@ body{
         width: 173px;
         z-index: 1001;
     }
-} 
+}
 
 .asset-details .rta .rta__autocomplete {
     width: 362px;
@@ -634,6 +596,10 @@ body{
     flex-direction: row;
     justify-content: space-between;
     width: 100%;
+    .upload-icon {
+        padding-left: 2px;
+        padding-right: 2px;
+    }
     .tags-column {
         width: unset;
         padding: unset;
@@ -743,6 +709,7 @@ body{
 
         &.left{
             right: 0;
+            z-index: 2000;
         }
     }
 }
@@ -929,26 +896,65 @@ body{
 }
 
 .confirm-modal {
-	position: relative;
-	align-items: center;
-	display: flex;
-	flex-direction: column;
-	top: calc(50% - 38px);
-	p{
-		text-align: center;
-		padding-bottom: 5px;
-	}
-	.confirm-buttons {
-		.imposium-btn {
-			width: 76px;
-
-			.btn-bold{
-				border: 1px solid #2D8CEA;
-			}
-		}
-	}
+    top: calc(50% - 38px);
+    p {
+        text-align: center;
+        padding-bottom: 5px;
+    }
+    .confirm-buttons {
+        .imposium-btn {
+            width: 76px;
+
+            .btn-bold {
+                border: 1px solid #2d8cea;
+            }
+        }
+    }
+}
+
+.replace-files-modal,
+.confirm-modal {
+    position: relative;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    .confirm-buttons,
+    .replace-files-buttons {
+        .imposium-btn {
+            width: 76px;
+
+            .btn-bold {
+                border: 1px solid #2d8cea;
+            }
+        }
+    }
+}
+.replace-files-modal {
+    text-align: center;
 }
 
+.replace-files-buttons {
+    width: 100%;
+    margin-top: 10px;
+    .checkbox {
+        float: left;
+        padding-left: 10px;
+        position: relative;
+        top: 6px;
+        .label-left {
+            width: fit-content;
+        }
+        .checkbox {
+            top: 0px;
+        }
+    }
+    .buttons {
+        float: right;
+        padding-right: 10px;
+    }
+}
+
+
 @cardHeaderHeight:25px;
 @cardHeaderHeightSmall:21px;
 @cardHeaderHeightLarge:35px;
@@ -2810,7 +2816,7 @@ body{
             padding-left:4px;
             height:@storyViewerHeaderHeight;
             background:darken(@background, 1%);
-            z-index: 2000;
+            z-index: 1000;
 
             .output{
                 margin-top:4px;

package/less/components/assets.less

@@ -116,44 +116,6 @@
     }
 }
 
-// .assetUploads {
-//     .imposium-dropdown {
-//         border: unset;
-
-//         .uploads-dropzone{
-//             position: absolute;
-//             top: 0;
-//             height: 100%;
-//             z-index: 2;
-//             display: none;
-
-//             &.asset-over {
-//                 .uploads-menu{
-//                     opacity: .3;
-//                 }
-//                 .overlay {
-//                     border-style: dashed;
-//                     border-color: hsl(225, 100%, 50%);
-//                     border-width: medium;
-//                     position: absolute;
-//                     top: 50%;
-//                     left: 50%;
-//                     transform: translate(-50%, -50%);
-//                     -ms-transform: translate(-50%, -50%);
-//                     text-align: center;
-//                     height: 98%;
-//                     width: 99%;
-//                     display: flex;
-//                     z-index: 1;
-//                     p {
-//                         vertical-align: middle;
-//                         margin: auto;
-//                     }
-//                 }
-//             }
-//         }
-//     }
-// }
 .uploads-menu {
     height: 100%;
     overflow-y: auto;
@@ -331,7 +293,7 @@
         width: 173px;
         z-index: 1001;
     }
-} 
+}
 
 .asset-details .rta .rta__autocomplete {
     width: 362px;
@@ -388,6 +350,10 @@
     flex-direction: row;
     justify-content: space-between;
     width: 100%;
+    .upload-icon {
+        padding-left: 2px;
+        padding-right: 2px;
+    }
     .tags-column {
         width: unset;
         padding: unset;

package/less/components/button-menu.less

@@ -22,6 +22,7 @@
 
         &.left{
             right: 0;
+            z-index: 2000;
         }
     }
 }

package/less/components/button.less

@@ -166,22 +166,60 @@
 }
 
 .confirm-modal {
-	position: relative;
-	align-items: center;
-	display: flex;
-	flex-direction: column;
-	top: calc(50% - 38px);
-	p{
-		text-align: center;
-		padding-bottom: 5px;
-	}
-	.confirm-buttons {
-		.imposium-btn {
-			width: 76px;
-
-			.btn-bold{
-				border: 1px solid #2D8CEA;
-			}
-		}
-	}
-}
+    top: calc(50% - 38px);
+    p {
+        text-align: center;
+        padding-bottom: 5px;
+    }
+    .confirm-buttons {
+        .imposium-btn {
+            width: 76px;
+
+            .btn-bold {
+                border: 1px solid #2d8cea;
+            }
+        }
+    }
+}
+
+.replace-files-modal,
+.confirm-modal {
+    position: relative;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    .confirm-buttons,
+    .replace-files-buttons {
+        .imposium-btn {
+            width: 76px;
+
+            .btn-bold {
+                border: 1px solid #2d8cea;
+            }
+        }
+    }
+}
+.replace-files-modal {
+    text-align: center;
+}
+
+.replace-files-buttons {
+    width: 100%;
+    margin-top: 10px;
+    .checkbox {
+        float: left;
+        padding-left: 10px;
+        position: relative;
+        top: 6px;
+        .label-left {
+            width: fit-content;
+        }
+        .checkbox {
+            top: 0px;
+        }
+    }
+    .buttons {
+        float: right;
+        padding-right: 10px;
+    }
+}

package/less/components/story-previewer.less

@@ -222,7 +222,7 @@
             padding-left:4px;
             height:@storyViewerHeaderHeight;
             background:darken(@background, 1%);
-            z-index: 2000;
+            z-index: 1000;
 
             .output{
                 margin-top:4px;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imposium-hub/components",
-    "version": "2.9.0-5",
+    "version": "2.9.0-7",
     "description": "React & Typescript component / asset library for Imposium front-ends",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",

package/src/components/app-wrapper/AppWrapper.tsx

@@ -9,6 +9,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faExclamationTriangle } from '@fortawesome/pro-light-svg-icons';
 import { initPendo } from '../../utils/pendo';
 import { EditGuideModal } from '../edit-guide-modal/EditGuideModal';
+import { ReplaceFilesModal } from '../replace-files-modal/ReplaceFilesModal';
 
 export interface IAppWrapperProps {
     appLabel: string;
@@ -287,6 +288,7 @@ export const AppWrapper: React.FC<IAppWrapperProps> = (props) => {
             {innerContent}
             <ConfirmModal />
             <EditGuideModal />
+            <ReplaceFilesModal />
         </div>
     );
 };

package/src/components/assets/AssetsUploadMenu.tsx

@@ -18,7 +18,7 @@ import AssetsTableTagsPivot from './AssetsTableTagsPivot';
 import Tag from '../tag/Tag';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faEraser } from '@fortawesome/free-solid-svg-icons';
-import { ICON_TIMES, ICON_UPLOAD } from '../../constants/icons';
+import { ICON_FILE_ADD, ICON_FILE_REPLACE, ICON_TIMES, ICON_UPLOAD } from '../../constants/icons';
 import AssetsTableDropzone from './AssetsTableDropzone';
 
 interface IAssetsUploadMenuProps {
@@ -167,6 +167,7 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAsse
 
         let uploadsListInner;
         const uploading = [];
+
         if (uploads.length > 0) {
             uploadsListInner = uploads.map((u: any) => {
                 const { filename, percent, tags } = u;
@@ -182,21 +183,27 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAsse
                         </Button>
                     );
 
-                    const fileTags = tags
-                        ? tags.map((tag: string) => (
-                              <Tag
-                                  key={tag}
-                                  copy={tag}
-                                  colorize={AssetsTableTagsPivot.COLORIZE_TAGS}
-                              />
-                          ))
-                        : [];
+                    const fileTags =
+                        tags && !u.assetId
+                            ? tags.map((tag: string) => (
+                                  <Tag
+                                      key={tag}
+                                      copy={tag}
+                                      colorize={AssetsTableTagsPivot.COLORIZE_TAGS}
+                                  />
+                              ))
+                            : [];
 
                     return (
                         <div
                             className='ongoing-upload'
                             key={filename}>
                             <div className='ongoing-upload-inner'>
+                                {u.assetId ? (
+                                    <div className='upload-icon'>{ICON_FILE_REPLACE}</div>
+                                ) : (
+                                    <div className='upload-icon'>{ICON_FILE_ADD}</div>
+                                )}
                                 <input
                                     className='upload-filename'
                                     value={filename}

package/src/components/confirm-modal/ConfirmModal.tsx

@@ -4,6 +4,7 @@ import Modal from '../modal/Modal';
 import Button from '../button/Button';
 import { confirm as copy } from '../../constants/copy';
 import Section from '../section/Section';
+import { confirmModalEvent } from '../../utils/modal';
 
 export interface IConfirmModalProps {
     onYes: () => void;
@@ -65,9 +66,9 @@ export const ConfirmModal = () => {
     );
 
     useEffect(() => {
-        window.addEventListener('openconfirmmodal', onOpen);
+        window.addEventListener(confirmModalEvent, onOpen);
         return () => {
-            window.removeEventListener('openconfirmmodal', onOpen);
+            window.removeEventListener(confirmModalEvent, onOpen);
         };
     }, []);
 

package/src/components/number-field/NumberField.tsx

@@ -74,8 +74,8 @@ class NumberField extends React.PureComponent<INumberFieldProps, INumberFieldSta
 
     private onChange(e) {
         let val = e.target.value;
-        if (val === '') {
-            val = null;
+        if (val === '' || val === null) {
+            val = this.props.min;
         } else {
             val = parseFloat(val);
         }