feat(media dir nav): delete button enabled when at least one media as…

…sets selected
decaporg · Dec 22, 2020 · 4089afa · 4089afa
1 parent b6f6a81
commit 4089afa
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 3 deletions.
diff --git a/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryCard.js b/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryCard.js
@@ -16,7 +16,7 @@ const Card = styled.div`
   cursor: pointer;
   overflow: hidden;
   background-color: ${props => props.isPrivate && colors.textFieldBorder};
-
+  position: relative;
   &:focus {
     outline: none;
   }
@@ -85,6 +85,61 @@ const DraftText = styled.p`
   border-radius: ${lengths.borderRadius} 0px ${lengths.borderRadius} 0;
 `;
 
+const radioButtonCheckboxWidthHeight = '24px';
+const inputBorderColor = '#fff';
+const inputBackgroundColor = 'rgba(0, 0, 0, 0.2)';
+const inputHoverBorderColor = '#33BCB0';
+const radioCheckboxSelectedBackgroundColor = '#33BCB0';
+const svgDataRriIconTick = `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 28"  class="single-colour tick"><path fill="%23fff" d="M13 28c-0.7 0-1.3-0.2-1.9-0.7l-10-8c-1.3-1-1.5-2.9-0.5-4.2 1-1.3 2.9-1.5 4.2-0.5l7.9 6.3L32.9 0.9c1.2-1.2 3.1-1.2 4.2 0 1.2 1.2 1.2 3.1 0 4.2l-22 22C14.5 27.7 13.8 28 13 28z"/></svg>')`;
+const radioCheckboxSelectedBackgroundPosition = 'center 6px';
+const radioCheckboxSelectedBackgroundSize = '13px';
+const inputFocusBorderColor = '#fff';
+
+const AssetCheckbox = styled.input`
+  display: inline-block;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  position: relative;
+  cursor: pointer;
+  left: 0;
+  top: 0;
+  width: ${radioButtonCheckboxWidthHeight};
+  height: ${radioButtonCheckboxWidthHeight};
+  padding: 0 !important;
+  background: transparent !important;
+  border-width: 0 !important;
+  &:after {
+    border: 1px solid ${inputBorderColor};
+    content: "";
+    background-color: ${inputBackgroundColor};
+    width: ${radioButtonCheckboxWidthHeight};
+    height: ${radioButtonCheckboxWidthHeight};
+    border-radius: 50%;
+    position: absolute;
+    top: 0;
+    left: 0px;
+    
+  }
+  &:checked:after, &.checked:after {
+    background: ${radioCheckboxSelectedBackgroundColor} ${svgDataRriIconTick} no-repeat ${radioCheckboxSelectedBackgroundPosition};
+    background-size: ${radioCheckboxSelectedBackgroundSize};
+
+  }
+  &:focus:after, &:focus:checked:after {
+    border-color: ${inputFocusBorderColor};
+  }
+  &:hover:after {
+    border-color ${inputHoverBorderColor};
+  }
+`;
+
+const CheckboxContainer = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+`;
+
 function readableFileSize(numberOfBytes) {
   let readableSize;
   let units;
@@ -151,12 +206,15 @@ class MediaLibraryCard extends React.Component {
         tabIndex="-1"
         isPrivate={isPrivate}
       >
-        <input type="checkbox" onClick={onChecked} checked={isSelected} readOnly />
+        <CheckboxContainer>
+          <AssetCheckbox type="checkbox" onClick={onChecked} checked={isSelected} readOnly />
+        </CheckboxContainer>
         {previewElement}
         <CardText>
           <ObjectName>{text}</ObjectName>
           {isViewableImage ? <ImageMeta>{type} - {readableFileSize(size)}</ImageMeta> : null}
         </CardText>
+
       </Card>
     );
   }

diff --git a/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryModal.js b/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryModal.js
@@ -112,7 +112,7 @@ const MediaLibraryModal = ({
     (!hasFilteredFiles && t('mediaLibrary.mediaLibraryModal.noImagesFound')) ||
     (!hasSearchResults && t('mediaLibrary.mediaLibraryModal.noResults'));
 
-  const hasSelection = hasMedia && !isEmpty(selectedFile);
+  const hasSelection = hasMedia && (selectedAssets || []).length > 0;
 
   return (
     <StyledModal isOpen={isVisible} onClose={handleClose} isPrivate={privateUpload}>