From c80ef7153b7e7e173dbeb75d7919fba3ab39ca27 Mon Sep 17 00:00:00 2001 From: vkozinec142 Date: Thu, 11 Mar 2021 12:24:22 +0100 Subject: [PATCH 01/42] Initial modal UI --- .../App/scss/modules/_attachments-modal.scss | 63 +++++++++ .../Attachments/components/MediaModal.tsx | 131 ++++++++++++++++++ .../Documents/components/DocumentSidePanel.js | 3 + 3 files changed, 197 insertions(+) create mode 100644 app/react/Attachments/components/MediaModal.tsx diff --git a/app/react/App/scss/modules/_attachments-modal.scss b/app/react/App/scss/modules/_attachments-modal.scss index 867c6d8835..b434489093 100644 --- a/app/react/App/scss/modules/_attachments-modal.scss +++ b/app/react/App/scss/modules/_attachments-modal.scss @@ -124,6 +124,69 @@ color: $c-primary; } } + + .media-grid { + width: calc(100% + 20px) !important; + max-width: calc(100% + 20px) !important; + margin-left: -10px; + + .row { + display: flex; + flex-wrap: wrap; + } + + &-item { + width: 25%; + flex-basis: 25%; + margin-bottom: 15px; + padding-left: 10px; + padding-right: 10px; + } + + &-card { + background: #ffffff; + border: 1px solid #dddddd; + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15); + padding: 6px; + + &-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: 100%; + 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%; + } + } + } + } + } } } diff --git a/app/react/Attachments/components/MediaModal.tsx b/app/react/Attachments/components/MediaModal.tsx new file mode 100644 index 0000000000..be78394cd2 --- /dev/null +++ b/app/react/Attachments/components/MediaModal.tsx @@ -0,0 +1,131 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import ReactModal from 'react-modal'; +import { Tabs, TabLink, TabContent } from 'react-tabs-redux'; + +import { Translate } from 'app/I18N'; +import { Icon } from 'app/UI'; + +import { uploadAttachment, uploadAttachmentFromUrl } from '../actions/actions'; + +export interface MediaModalProps { + isOpen?: boolean; +} + +export const MediaModalCmp = ({ isOpen }: MediaModalProps) => { + return ( + +
+

+ Supporting files +

+ + +
+
+ +
+ + Select from files + +
+ +
+ +
+
+
+
+
+
media video.mp4
+ 12 MB +
+
+
+ +
+
+
+
+
+
+
+
media video.mp4
+ 12 MB +
+
+
+ +
+
+
+
+
+
+
+
media video.mp4
+ 12 MB +
+
+
+ +
+
+
+
+
+
+
+
media video.mp4
+ 12 MB +
+
+
+ +
+
+
+
+
+
+
+
media video.mp4
+ 12 MB +
+
+
+ +
+
+
+
+
+
+ +
+ +
+ + ); +}; + +const mapDispatchToProps = { + uploadAttachment, + uploadAttachmentFromUrl, +}; + +export const MediaModal = connect(null, mapDispatchToProps)(MediaModalCmp); diff --git a/app/react/Documents/components/DocumentSidePanel.js b/app/react/Documents/components/DocumentSidePanel.js index 9142b14b69..0aefd4bf96 100644 --- a/app/react/Documents/components/DocumentSidePanel.js +++ b/app/react/Documents/components/DocumentSidePanel.js @@ -18,6 +18,7 @@ import SidePanel from 'app/Layout/SidePanel'; import DocumentSemanticSearchResults from 'app/SemanticSearch/components/DocumentResults'; import { CopyFromEntity } from 'app/Metadata/components/CopyFromEntity'; import { TocGeneratedLabel, ReviewTocButton } from 'app/ToggledFeatures/tocGeneration'; +import { MediaModal } from 'app/Attachments/components/MediaModal'; import { Icon } from 'UI'; import * as viewerModule from 'app/Viewer'; @@ -422,6 +423,8 @@ export class DocumentSidePanel extends Component { parentSharedId={doc.get('sharedId')} storeKey={this.props.storeKey} /> + + ); })()} From bfc4ce4de6674d6abe0ff709526e1618012d30f7 Mon Sep 17 00:00:00 2001 From: Ivan Jakoplic Date: Fri, 12 Mar 2021 10:36:29 +0100 Subject: [PATCH 02/42] Open and close media modal --- .../Documents/components/DocumentSidePanel.js | 3 --- .../components/MediaModal.tsx | 22 +++++----------- .../Metadata/components/MetadataFormFields.js | 25 +++++++++++++++++++ 3 files changed, 31 insertions(+), 19 deletions(-) rename app/react/{Attachments => Metadata}/components/MediaModal.tsx (90%) diff --git a/app/react/Documents/components/DocumentSidePanel.js b/app/react/Documents/components/DocumentSidePanel.js index 0aefd4bf96..9142b14b69 100644 --- a/app/react/Documents/components/DocumentSidePanel.js +++ b/app/react/Documents/components/DocumentSidePanel.js @@ -18,7 +18,6 @@ import SidePanel from 'app/Layout/SidePanel'; import DocumentSemanticSearchResults from 'app/SemanticSearch/components/DocumentResults'; import { CopyFromEntity } from 'app/Metadata/components/CopyFromEntity'; import { TocGeneratedLabel, ReviewTocButton } from 'app/ToggledFeatures/tocGeneration'; -import { MediaModal } from 'app/Attachments/components/MediaModal'; import { Icon } from 'UI'; import * as viewerModule from 'app/Viewer'; @@ -423,8 +422,6 @@ export class DocumentSidePanel extends Component { parentSharedId={doc.get('sharedId')} storeKey={this.props.storeKey} /> - - ); })()} diff --git a/app/react/Attachments/components/MediaModal.tsx b/app/react/Metadata/components/MediaModal.tsx similarity index 90% rename from app/react/Attachments/components/MediaModal.tsx rename to app/react/Metadata/components/MediaModal.tsx index be78394cd2..bf051c3024 100644 --- a/app/react/Attachments/components/MediaModal.tsx +++ b/app/react/Metadata/components/MediaModal.tsx @@ -6,16 +6,15 @@ import { Tabs, TabLink, TabContent } from 'react-tabs-redux'; import { Translate } from 'app/I18N'; import { Icon } from 'app/UI'; -import { uploadAttachment, uploadAttachmentFromUrl } from '../actions/actions'; - export interface MediaModalProps { - isOpen?: boolean; + isOpen: boolean; + onClose: () => void; } -export const MediaModalCmp = ({ isOpen }: MediaModalProps) => { +export const MediaModalCmp = ({ isOpen, onClose }: MediaModalProps) => { return ( { Supporting files - @@ -123,9 +116,6 @@ export const MediaModalCmp = ({ isOpen }: MediaModalProps) => { ); }; -const mapDispatchToProps = { - uploadAttachment, - uploadAttachmentFromUrl, -}; +const mapDispatchToProps = {}; export const MediaModal = connect(null, mapDispatchToProps)(MediaModalCmp); diff --git a/app/react/Metadata/components/MetadataFormFields.js b/app/react/Metadata/components/MetadataFormFields.js index 17648af092..5da961642d 100644 --- a/app/react/Metadata/components/MetadataFormFields.js +++ b/app/react/Metadata/components/MetadataFormFields.js @@ -9,6 +9,7 @@ import { Field } from 'react-redux-form'; import { propertyTypes } from 'shared/propertyTypes'; import { getSuggestions } from 'app/Metadata/actions/actions'; import { Translate } from 'app/I18N'; +import { Icon } from 'UI'; import { DatePicker, DateRange, @@ -25,6 +26,7 @@ import { LookupMultiSelect, } from '../../ReactReduxForms'; import MultipleEditionFieldWarning from './MultipleEditionFieldWarning'; +import { MediaModal } from './MediaModal'; export const translateOptions = thesauri => thesauri @@ -43,11 +45,28 @@ export const translateOptions = thesauri => .toJS(); export class MetadataFormFields extends Component { + constructor(props) { + super(props); + this.state = { openMediaModal: false }; + + this.handleOpenMediaModal = this.handleOpenMediaModal.bind(this); + this.handleCloseMediaModal = this.handleCloseMediaModal.bind(this); + } + + handleOpenMediaModal() { + this.setState({ openMediaModal: true }); + } + + handleCloseMediaModal() { + this.setState({ openMediaModal: false }); + } + getField(property, _model, thesauris) { let thesauri; let totalPossibleOptions = 0; const { dateFormat, version, entityThesauris } = this.props; const propertyType = property.type; + switch (propertyType) { case 'select': thesauri = thesauris.find(opt => opt.get('_id').toString() === property.content.toString()); @@ -144,6 +163,12 @@ export class MetadataFormFields extends Component {