Merge pull request #3524 from huridocs/3494-media-field-revamp

3494 media field revamp
huridocs · Apr 7, 2021 · 0af9aa6 · 0af9aa6
2 parents 5ef68a6 + 9127532
commit 0af9aa6
Show file tree

Hide file tree

Showing 22 changed files with 890 additions and 52 deletions.
diff --git a/app/react/App/scss/modules/_attachments-modal.scss b/app/react/App/scss/modules/_attachments-modal.scss
@@ -60,6 +60,7 @@
 
   &__content {
     flex: 1;
+    overflow: hidden;
 
     > div {
       display: flex;
@@ -90,9 +91,11 @@
 
   &__tabs-content {
     flex: 1;
+    overflow: auto;
+    overflow-x: hidden;
 
     .tab-content {
-      padding: 24px 0;
+      padding: 24px 0 0 0;
       height: 100%;
 
       &.centered {
@@ -116,14 +119,112 @@
           width: 100%;
         }
 
-        .has-feedback .feedback-icon {
+        .has-feedback .property-help {
           position: absolute;
           top: 7px;
           right: 7px;
           width: 17px;
           color: $c-primary;
         }
       }
+
+      .media-grid {
+        width: calc(100% + 20px);
+        max-width: calc(100% + 20px);
+        margin-left: -10px;
+
+        .row {
+          display: flex;
+          flex-wrap: wrap;
+        }
+
+        &-item {
+          width: 100%;
+          flex-basis: 100%;
+          margin-bottom: 15px;
+          padding-left: 10px;
+          padding-right: 10px;
+          cursor: pointer;
+
+          @media (min-width: 768px) {
+            width: 33.3333%;
+            flex-basis: 33.3333%;
+          }
+
+          @media (min-width: 1024px) {
+            width: 25%;
+            flex-basis: 25%;
+          }
+        }
+
+        &-card {
+          background: #ffffff;
+          border: 1px solid #dddddd;
+          box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
+          padding: 6px;
+
+          &.active {
+            border-color: $c-type-9;
+            border-width: 2px;
+          }
+
+          &-header {
+            h5 {
+              margin: 0;
+              font-weight: 500;
+              font-size: 12px;
+              line-height: 14px;
+            }
+
+            span {
+              font-weight: 500;
+              font-size: 10px;
+              line-height: 12px;
+              color: #888888;
+            }
+          }
+
+          &-content {
+            padding-top: 85%;
+            position: relative;
+            overflow: hidden;
+
+            .media {
+              position: absolute;
+              top: 0;
+              left: 0;
+              bottom: 0;
+              right: 0;
+              overflow: hidden;
+
+              img {
+                object-fit: contain;
+                object-position: center;
+                width: 100%;
+                height: 100%;
+                background-color: #fafafa;
+              }
+
+              .video-container {
+                height: 100%;
+
+                > div:first-child {
+                  padding-bottom: initial;
+                  overflow: initial;
+                  height: 100%;
+                  display: flex;
+                  margin-top: 0 !important;
+                  margin-bottom: 0 !important;
+
+                  .react-player {
+                    height: auto !important;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
     }
   }
 

diff --git a/app/react/App/scss/modules/_search.scss b/app/react/App/scss/modules/_search.scss
@@ -13,7 +13,7 @@
   position: relative;
   display: block;
   max-width: 100%;
-  
+
   @media (min-width: 768px) {
     max-width: calc(100% - 550px);
     width: 632px;
@@ -234,12 +234,13 @@
 }
 
 .admin-filter {
-  span, label {
-    color: #2B56C1;
+  span,
+  label {
+    color: #2b56c1;
   }
 
   input {
-    border: #2B56C1;
+    border: #2b56c1;
   }
 }
 
@@ -363,6 +364,42 @@
   }
 }
 
+.search__filter--selected__media {
+  margin-top: 8px;
+
+  img {
+    object-fit: contain;
+    object-position: center;
+    width: 100%;
+    height: 100%;
+    background-color: #fafafa;
+  }
+
+  .video-container {
+    height: 100%;
+
+    > div:first-child {
+      padding-bottom: initial;
+      overflow: initial;
+      height: 100%;
+      display: flex;
+      margin-top: 0 !important;
+      margin-bottom: 0 !important;
+
+      .react-player {
+        height: auto !important;
+      }
+    }
+  }
+}
+
+.search__filter--selected__media-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 12px;
+}
+
 .switcher-wrapper {
   float: right;
   span {

diff --git a/app/react/App/scss/modules/_settings-metadata.scss b/app/react/App/scss/modules/_settings-metadata.scss
@@ -104,6 +104,7 @@
   margin-left: 5px;
   position: relative;
   color: $c-grey-dark;
+  z-index: 5;
 }
 .no-margin {
   margin: 0 !important;
@@ -120,16 +121,26 @@
   @include tooltip('top-left');
   transform: translate(-175px, -5px);
 }
+
+.property-description-right {
+  @include tooltip('right');
+}
+.property-description-left {
+  @include tooltip('left');
+}
 .property-description-top-left:after {
   transform: translateX(175px);
 }
+
 .property-description,
 .property-description-bottom,
+.property-description-right,
+.property-description-left,
 .property-description-top-left {
   width: 200px;
   white-space: normal;
 
-  .property-help:hover &{
+  .property-help:hover & {
     display: block;
   }
 }

diff --git a/app/react/Attachments/components/AttachmentsModal.tsx b/app/react/Attachments/components/AttachmentsModal.tsx
@@ -4,7 +4,7 @@ import ReactModal from 'react-modal';
 import { Tabs, TabLink, TabContent } from 'react-tabs-redux';
 import Dropzone from 'react-dropzone';
 import { actions as formActions, LocalForm, Field } from 'react-redux-form';
-
+import Tip from 'app/Layout/Tip';
 import { Translate } from 'app/I18N';
 import { Icon } from 'app/UI';
 
@@ -154,7 +154,14 @@ export const AttachmentsModalCmp = ({
                         placeholder="Paste URL here"
                       />
                     </Field>
-                    <Icon icon="info-circle" className="feedback-icon" />
+                    <Tip icon="info-circle" position="right">
+                      <p>To get resource from web:</p>
+                      <p>
+                        1. Right-click an image or video on the web and copy the image's URL.
+                        Altenatively websites offers share button whereyou can get URL.
+                      </p>
+                      <p>2. Return here and paste the URL in this field (Ctrl+V or Command+V)</p>
+                    </Tip>
                   </div>
 
                   <Field model=".name">

diff --git a/app/react/Attachments/components/RenderAttachment.tsx b/app/react/Attachments/components/RenderAttachment.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { AttachmentSchema } from 'shared/types/commonTypes';
+import MarkdownMedia from 'app/Markdown/components/MarkdownMedia';
+import ReactPlayer from 'react-player';
+
+export const RenderAttachment = ({ attachment }: { attachment: AttachmentSchema }) => {
+  const { mimetype = '' } = attachment;
+
+  if (mimetype.includes('image')) {
+    return attachment.url ? (
+      <img src={attachment.url} alt={attachment.originalname} />
+    ) : (
+      <img src={`/api/files/${attachment.filename}`} alt={attachment.originalname} />
+    );
+  }
+
+  const isVideoAudio = mimetype.includes('video') || mimetype.includes('audio');
+
+  const isFromSupportedSite = attachment.url && ReactPlayer.canPlay(attachment.url);
+
+  if (isVideoAudio || isFromSupportedSite) {
+    return attachment.url ? (
+      <MarkdownMedia config={`(${attachment.url})`} />
+    ) : (
+      <MarkdownMedia config={`(/api/files/${attachment.filename})`} />
+    );
+  }
+
+  return null;
+};