MediaFolder.js
5 years ago
MediaItem.js
5 years ago
MediaPopup.js
3 years ago
MediaPopupTemplate.js
3 years ago
chunk-upload.js
5 years ago
styles.js
5 years ago
MediaPopupTemplate.js
133 lines
| 1 | /** |
| 2 | * WordPress dependencies |
| 3 | */ |
| 4 | /** @jsx jsx */ |
| 5 | const { __ } = wp.i18n; |
| 6 | const { Modal } = wp.components; |
| 7 | |
| 8 | import { css, jsx } from "@emotion/core"; |
| 9 | |
| 10 | export default ({ |
| 11 | onClose, |
| 12 | title, |
| 13 | header, |
| 14 | error, |
| 15 | mainContent, |
| 16 | sidebar, |
| 17 | footer, |
| 18 | }) => { |
| 19 | return ( |
| 20 | <Modal |
| 21 | isFullScreen |
| 22 | title={title ? title : __("Add Media", "presto-player")} |
| 23 | onRequestClose={onClose} |
| 24 | css={css` |
| 25 | .components-modal__header { |
| 26 | border-bottom: 1px solid #ddd; |
| 27 | } |
| 28 | .components-modal__content { |
| 29 | display: flex; |
| 30 | flex-direction: column; |
| 31 | padding: 0; |
| 32 | |
| 33 | > :not(.components-modal__header) { |
| 34 | flex: 1; |
| 35 | } |
| 36 | } |
| 37 | `} |
| 38 | overlayClassName="presto-player__modal-overlay" |
| 39 | > |
| 40 | <div |
| 41 | css={css` |
| 42 | @media screen and (min-width: 780px) { |
| 43 | height: 100%; |
| 44 | display: grid; |
| 45 | flex: 1; |
| 46 | max-height: calc(100vh - 68px); |
| 47 | grid-template-columns: 1fr 1fr minmax(0px, 267px); |
| 48 | grid-template-rows: minmax(50px, auto) 1fr 60px; |
| 49 | grid-template-areas: |
| 50 | "header header sidebar" |
| 51 | "main main sidebar" |
| 52 | "footer footer footer"; |
| 53 | overflow: hidden; |
| 54 | } |
| 55 | `} |
| 56 | data-cy="media-modal" |
| 57 | > |
| 58 | <div |
| 59 | css={css` |
| 60 | grid-area: header; |
| 61 | padding: 24px 24px 12px 24px; |
| 62 | `} |
| 63 | > |
| 64 | <div |
| 65 | css={css` |
| 66 | display: flex; |
| 67 | align-items: center; |
| 68 | |
| 69 | > * { |
| 70 | margin-right: 10px; |
| 71 | } |
| 72 | `} |
| 73 | > |
| 74 | {header} |
| 75 | </div> |
| 76 | {error} |
| 77 | </div> |
| 78 | <div |
| 79 | css={css` |
| 80 | grid-area: main; |
| 81 | display: grid; |
| 82 | overflow: hidden; |
| 83 | |
| 84 | .components-drop-zone__provider { |
| 85 | overflow: hidden; |
| 86 | display: grid; |
| 87 | } |
| 88 | |
| 89 | .components-drop-zone { |
| 90 | z-index: 99; |
| 91 | } |
| 92 | `} |
| 93 | > |
| 94 | {mainContent} |
| 95 | </div> |
| 96 | <div |
| 97 | css={css` |
| 98 | display: none; |
| 99 | grid-area: sidebar; |
| 100 | padding: 0 16px; |
| 101 | z-index: 75; |
| 102 | background: #f3f3f3; |
| 103 | border-left: 1px solid #ddd; |
| 104 | overflow: auto; |
| 105 | |
| 106 | @media screen and (min-width: 780px) { |
| 107 | display: block; |
| 108 | } |
| 109 | |
| 110 | .sidebar-content { |
| 111 | padding: 16px 0; |
| 112 | } |
| 113 | `} |
| 114 | > |
| 115 | {sidebar} |
| 116 | </div> |
| 117 | <div |
| 118 | css={css` |
| 119 | grid-area: footer; |
| 120 | border-top: 1px solid #ddd; |
| 121 | display: flex; |
| 122 | align-items: center; |
| 123 | justify-content: flex-end; |
| 124 | padding: 8px; |
| 125 | `} |
| 126 | > |
| 127 | {footer} |
| 128 | </div> |
| 129 | </div> |
| 130 | </Modal> |
| 131 | ); |
| 132 | }; |
| 133 |