Fixes #1308 #1306 #1304

Co-authored-by: Nikola Metulev <[email protected]>
microsoftgraph · Sep 1, 2021 · aaf6d02 · aaf6d02
1 parent 51cb2a4
commit aaf6d02
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 34 deletions.
diff --git a/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.scss b/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.scss
@@ -24,6 +24,7 @@ $file-upload-dialog-primarybutton-background-color: set-var(
 );
 $file-upload-button-background-color: set-var(upload__button__background-color, $theme-default, $file-upload);
 $file-item-background-color--hover: set-var(list__item__background-color--hover, $theme-default, $file-upload);
+$file-item-background-color--active: set-var(list__item__background-color--active, $theme-default, $file-upload);
 $file-upload-icon-button-background-color: var(--color, inherit);
 $file-list-box-shadow: var(
   --file-list-box-shadow,
@@ -68,8 +69,6 @@ $file-list-box-shadow: var(
 }
 
 :host .file-upload-table {
-  display: table;
-  width: 260px;
   margin: var(--file-item-margin, 0 4px);
   .file-upload-cell {
     padding: 1px 0px 1px 1px;
@@ -109,6 +108,10 @@ $file-list-box-shadow: var(
     }
   }
 }
+:host .file-upload-table.upload {
+  display: table;
+  width: 260px;
+}
 
 :host .mgt-file-item {
   --file-background-color: transparent;
@@ -127,6 +130,10 @@ $file-list-box-shadow: var(
 }
 
 :host #file-upload-border {
+  display: none;
+}
+
+:host #file-upload-border.visible {
   border: var(--file-upload-border, dashed #0078d4 1px);
   background-color: var(--file-upload-background-color, rgba(0, 120, 212, 0.1));
   position: absolute;
@@ -135,20 +142,12 @@ $file-list-box-shadow: var(
   left: 0;
   right: 0;
   z-index: 1;
-  display: none;
+  display: inline-block;
 }
 
 /* The Modal (background) */
 :host .file-upload-dialog {
   display: none;
-  position: absolute;
-  z-index: 1;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  background-color: $file-upload-dialog-background-color;
 
   .file-upload-dialog-content {
     background-color: $file-upload-dialog-content-background-color;
@@ -212,3 +211,45 @@ $file-list-box-shadow: var(
     font-size: $font-size;
   }
 }
+:host .file-upload-dialog.visible {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: $file-upload-dialog-background-color;
+  display: inline-block;
+}
+
+:host fluent-checkbox.file-upload-dialog-check.hide {
+  display: none;
+}
+
+:host .file-upload-dialog-success {
+  border-top: var(--file-item-border-top, none);
+  border-left: var(--file-item-border-left, none);
+  border-right: var(--file-item-border-right, none);
+  border-bottom: var(--file-item-border-bottom, none);
+  border-radius: var(--file-item-border-radius, 2px);
+  cursor: pointer;
+
+  &:hover,
+  &.focused {
+    background-color: $file-item-background-color--hover;
+
+    mgt-file {
+      --file-background-color: $file-item-background-color--hover;
+    }
+  }
+
+  &:active,
+  &.selected {
+    background-color: $file-item-background-color--active;
+
+    mgt-file {
+      --file-background-color: $file-item-background-color--active;
+    }
+  }
+}
diff --git a/...es/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.theme.scss b/...es/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.theme.scss
@@ -13,6 +13,11 @@ $file-upload: (
     light: rgba(0, 0, 0, 0.1),
     dark: #0078d4
   ),
+  list__item__background-color--active: (
+    _var: --file-item-background-color--active,
+    light: rgba(0, 0, 0, 0.05),
+    dark: #238ada
+  ),
   upload__button__background-color: (
     _var: --file-upload-button-background-color,
     light: rgb(243, 242, 241),

diff --git a/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts b/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts
@@ -14,6 +14,7 @@ import { IGraph, MgtBaseComponent } from '@microsoft/mgt-element';
 import { ViewType } from '../../../graph/types';
 import { DriveItem } from '@microsoft/microsoft-graph-types';
 import {
+  clearFilesCache,
   getGraphfile,
   getUploadSession,
   sendFileContent,
@@ -194,6 +195,12 @@ export interface MgtFileUploadConfig {
  * @cssprop --file-upload-dialog-primarybutton-background-color - {Color} Background color of primary button
  * @cssprop --file-upload-dialog-primarybutton-color - {Color} Color text of primary button
  * @cssprop --file-item-margin - {String} File item margin
+ * @cssprop --file-item-background-color--hover - {Color} File item background hover color
+ * @cssprop --file-item-border-top - {String} File item border top style
+ * @cssprop --file-item-border-left - {String} File item border left style
+ * @cssprop --file-item-border-right - {String} File item border right style
+ * @cssprop --file-item-border-bottom - {String} File item border bottom style
+ * @cssprop --file-item-background-color--active - {Color} File item background active color
  */
 @customElement('mgt-file-upload')
 export class MgtFileUpload extends MgtBaseComponent {
@@ -364,10 +371,13 @@ export class MgtFileUpload extends MgtBaseComponent {
    */
   protected renderFileTemplate(fileItem: MgtFileUploadItem, folderTabStyle: string) {
     return html`
-        <div class='file-upload-table' style="${fileItem.completed ? 'width: 100%;' : null}">
-          <div class="${folderTabStyle}">
+        <div class="${fileItem.completed ? 'file-upload-table' : 'file-upload-table upload'}">
+          <div class="${
+            folderTabStyle +
+            (fileItem.fieldUploadResponse === 'lastModifiedDateTime' ? ' file-upload-dialog-success' : '')
+          }">
             <div class='file-upload-cell'>
-              <div style=${fileItem.fieldUploadResponse === 'description' ? 'opacity: 0.5;' : null}>
+              <div style=${fileItem.fieldUploadResponse === 'description' ? 'opacity: 0.5;' : ''}>
                 <div class="file-upload-status">
                   ${fileItem.iconStatus}
                 </div>
@@ -497,7 +507,7 @@ export class MgtFileUpload extends MgtBaseComponent {
     if (event.dataTransfer.items && event.dataTransfer.items.length > 0) {
       event.dataTransfer.dropEffect = this._dropEffect;
       const dragFileBorder: HTMLElement = this.renderRoot.querySelector('#file-upload-border');
-      dragFileBorder.style.display = 'inline-block';
+      dragFileBorder.classList.add('visible');
     }
   };
 
@@ -513,7 +523,7 @@ export class MgtFileUpload extends MgtBaseComponent {
     this._dragCounter--;
     if (this._dragCounter === 0) {
       const dragFileBorder: HTMLElement = this.renderRoot.querySelector('#file-upload-border');
-      dragFileBorder.style.display = 'none';
+      dragFileBorder.classList.remove('visible');
     }
   };
 
@@ -527,7 +537,7 @@ export class MgtFileUpload extends MgtBaseComponent {
     event.stopPropagation();
 
     const dragFileBorder: HTMLElement = this.renderRoot.querySelector('#file-upload-border');
-    dragFileBorder.style.display = 'none';
+    dragFileBorder.classList.remove('visible');
     if (event.dataTransfer && event.dataTransfer.items) {
       this.getSelectedFiles(await this.getFilesFromUploadArea(event.dataTransfer.items));
     }
@@ -697,7 +707,7 @@ export class MgtFileUpload extends MgtBaseComponent {
           if (this._applyAll === true) {
             return [this._applyAll, this._applyAllConflitBehavior];
           }
-          fileUploadDialog.style.display = 'inline-block';
+          fileUploadDialog.classList.add('visible');
           this._dialogTitle = strings.fileReplaceTitle;
           this._dialogContent = strings.fileReplace.replace('{FileName}', file.name);
           this._dialogCheckBox = strings.checkApplyAll;
@@ -711,7 +721,7 @@ export class MgtFileUpload extends MgtBaseComponent {
             let fileUploadDialogCancel: HTMLElement = this.renderRoot.querySelector('.file-upload-dialog-cancel');
             let fileUploadDialogCheck: HTMLInputElement = this.renderRoot.querySelector('#file-upload-dialog-check');
             fileUploadDialogCheck.checked = false;
-            fileUploadDialogCheck.style.display = '';
+            fileUploadDialogCheck.classList.remove('hide');
 
             //Remove and include event listener to validate options.
             fileUploadDialogOk.removeEventListener('click', onOkDialogClick);
@@ -723,19 +733,19 @@ export class MgtFileUpload extends MgtBaseComponent {
 
             //Replace File
             function onOkDialogClick() {
-              fileUploadDialog.style.display = 'none';
+              fileUploadDialog.classList.remove('visible');
               resolve([fileUploadDialogCheck.checked ? 1 : 0, MgtFileUploadConflictBehavior.replace]);
             }
 
             //Rename File
             function onCancelDialogClick() {
-              fileUploadDialog.style.display = 'none';
+              fileUploadDialog.classList.remove('visible');
               resolve([fileUploadDialogCheck.checked ? 1 : 0, MgtFileUploadConflictBehavior.rename]);
             }
 
             //Cancel File
             function onCloseDialogClick() {
-              fileUploadDialog.style.display = 'none';
+              fileUploadDialog.classList.remove('visible');
               resolve([-1]);
             }
           });
@@ -744,7 +754,7 @@ export class MgtFileUpload extends MgtBaseComponent {
         }
         break;
       case 'MaxFiles':
-        fileUploadDialog.style.display = 'inline-block';
+        fileUploadDialog.classList.add('visible');
         this._dialogTitle = strings.maximumFilesTitle;
         this._dialogContent = strings.maximumFiles.split('{MaxNumber}').join(fileUploadList.maxUploadFile.toString());
         this._dialogCheckBox = strings.checkApplyAll;
@@ -758,7 +768,7 @@ export class MgtFileUpload extends MgtBaseComponent {
           let fileUploadDialogClose: HTMLElement = this.renderRoot.querySelector('.file-upload-dialog-close');
           let fileUploadDialogCheck: HTMLInputElement = this.renderRoot.querySelector('#file-upload-dialog-check');
           fileUploadDialogCheck.checked = false;
-          fileUploadDialogCheck.style.display = 'none';
+          fileUploadDialogCheck.classList.add('hide');
 
           //Remove and include event listener to validate options.
           fileUploadDialogOk.removeEventListener('click', onOkDialogClick);
@@ -769,20 +779,20 @@ export class MgtFileUpload extends MgtBaseComponent {
           fileUploadDialogClose.addEventListener('click', onCancelDialogClick);
 
           function onOkDialogClick() {
-            fileUploadDialog.style.display = 'none';
+            fileUploadDialog.classList.remove('visible');
             //Continue upload
             resolve([1]);
           }
 
           function onCancelDialogClick() {
-            fileUploadDialog.style.display = 'none';
+            fileUploadDialog.classList.remove('visible');
             //Cancel all
             resolve([0]);
           }
         });
         break;
       case 'ExcludedFileType':
-        fileUploadDialog.style.display = 'inline-block';
+        fileUploadDialog.classList.add('visible');
         this._dialogTitle = strings.fileTypeTitle;
         this._dialogContent =
           strings.fileType.replace('{FileName}', file.name) +
@@ -800,7 +810,7 @@ export class MgtFileUpload extends MgtBaseComponent {
           let fileUploadDialogClose: HTMLElement = this.renderRoot.querySelector('.file-upload-dialog-close');
           let fileUploadDialogCheck: HTMLInputElement = this.renderRoot.querySelector('#file-upload-dialog-check');
           fileUploadDialogCheck.checked = false;
-          fileUploadDialogCheck.style.display = '';
+          fileUploadDialogCheck.classList.remove('hide');
 
           //Remove and include event listener to validate options.
           fileUploadDialogOk.removeEventListener('click', onOkDialogClick);
@@ -811,19 +821,19 @@ export class MgtFileUpload extends MgtBaseComponent {
           fileUploadDialogClose.addEventListener('click', onCancelDialogClick);
 
           function onOkDialogClick() {
-            fileUploadDialog.style.display = 'none';
+            fileUploadDialog.classList.remove('visible');
             //Confirm info
             resolve([fileUploadDialogCheck.checked ? 1 : 0]);
           }
 
           function onCancelDialogClick() {
-            fileUploadDialog.style.display = 'none';
+            fileUploadDialog.classList.remove('visible');
             //Cancel all
             resolve([0]);
           }
         });
       case 'MaxFileSize':
-        fileUploadDialog.style.display = 'inline-block';
+        fileUploadDialog.classList.add('visible');
         this._dialogTitle = strings.maximumFileSizeTitle;
         this._dialogContent =
           strings.maximumFileSize
@@ -842,7 +852,7 @@ export class MgtFileUpload extends MgtBaseComponent {
           let fileUploadDialogClose: HTMLElement = this.renderRoot.querySelector('.file-upload-dialog-close');
           let fileUploadDialogCheck: HTMLInputElement = this.renderRoot.querySelector('#file-upload-dialog-check');
           fileUploadDialogCheck.checked = false;
-          fileUploadDialogCheck.style.display = '';
+          fileUploadDialogCheck.classList.remove('hide');
 
           //Remove and include event listener to validate options.
           fileUploadDialogOk.removeEventListener('click', onOkDialogClick);
@@ -853,13 +863,13 @@ export class MgtFileUpload extends MgtBaseComponent {
           fileUploadDialogClose.addEventListener('click', onCancelDialogClick);
 
           function onOkDialogClick() {
-            fileUploadDialog.style.display = 'none';
+            fileUploadDialog.classList.remove('visible');
             //Confirm info
             resolve([fileUploadDialogCheck.checked ? 1 : 0]);
           }
 
           function onCancelDialogClick() {
-            fileUploadDialog.style.display = 'none';
+            fileUploadDialog.classList.remove('visible');
             //Cancel all
             resolve([0]);
           }
@@ -1054,6 +1064,7 @@ export class MgtFileUpload extends MgtBaseComponent {
       fileUpload.fieldUploadResponse = 'lastModifiedDateTime';
       fileUpload.completed = true;
       super.requestStateUpdate(true);
+      clearFilesCache();
     }, 500);
   }