oxmc/myDrive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated UI for popup window

Browse Source
This commit is contained in:
kyle hoell
2020-12-06 20:34:15 -05:00
parent 596c72f970
commit 2f3b14b4df
2 changed files with 130 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PopupWindow/PopupWindow.js
+43
View File
@@ -1,6 +1,8 @@
import Spinner from ".././Spinner";
import capitalize from "../../utils/capitalize";
import React from "react";
import moment from "moment";
import bytes from "bytes";
class PopupWindow extends React.Component {
@@ -11,6 +13,47 @@ class PopupWindow extends React.Component {
render() {
return (
<div className={this.props.popupFile.metadata.isVideo ? "popup-window popup-window-video" : "popup-window"} ref={this.props.wrapperRef}>
<p className="popup-window__title">{capitalize(this.props.popupFile.filename)}</p>
<div className={this.props.popupFile.metadata.isVideo ? "popup-window-wrapper popup-window-wrapper-video" : "popup-window-wrapper"}>
{!this.props.popupFile.metadata.isVideo ?
<div className="popup-window__image__wrapper">
{!this.props.popupFile.metadata.hasThumbnail ? <h3 className="popup-window__subtitle">No Preview Available</h3> : undefined}
{!this.props.popupFile.metadata.hasThumbnail ? <img className={this.props.state.imageClassname} src={this.props.state.image}/>
: <img className={this.props.state.imageClassname} onClick={this.props.setPhotoViewerWindow} src={this.props.state.image} onError={this.props.thumbnailOnError}/>}
<div className={this.props.state.spinnerClassname}>
{!this.props.popupFile.metadata.hasThumbnail ? undefined : <Spinner />}
</div>
</div>
:
<video className="popup-window__video"
src={this.props.state.video}
ref={this.props.video}
type="video/mp4"
controls>
Your browser does not support the video tag.
</video>}
<div>
<div>
<p className="popup-file-details-title">File Size: {bytes(+this.props.popupFile.metadata.size)}</p>
<p className="popup-file-details-title">Created: {moment(this.props.popupFile.uploadDate).format("L")}</p>
<div className="popup-window-button-wrapper">
<button className={this.props.popupFile.metadata.isVideo ? "button popup-window__button popup-window__button-video" : "button popup-window__button"} onClick={() => this.props.downloadFile(this.props.popupFile._id, this.props.popupFile)}>Download</button>
</div>
</div>
</div>
</div>
<img className="popup-window__close-button" onClick={this.props.hidePopupWindow} src="/images/close_icon.png"/>
</div>
)
return (
<div className="popup-window" ref={this.props.wrapperRef}>
src/styles/components/_Popup-window.scss
+87 -29
View File
@@ -6,6 +6,7 @@
margin: 0 auto;
left: 50%;
top: 50%;
max-width: 800px;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
@@ -23,10 +24,22 @@
width: 100%;
height: 100%;
z-index: 5;
max-width: unset;
}
}
.popup-window-video {
height: unset;
@media (max-width: $desktop-breakpoint) {
width: 100%;
height: 100%;
z-index: 5;
max-width: unset;
}
}
.popup-window--gone {
display: none;
@@ -41,6 +54,13 @@
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: 21px;
height: 35px;
margin-bottom: 0;
@media (max-width: $desktop-breakpoint) {
overflow: hidden;
}
}
.popup-window__subtitle {
@@ -104,14 +124,18 @@
}
}
.popup-window__button-video {
margin-bottom: 14px;
}
.popup-window__image__wrapper {
// width: inherit;
flex-direction: column-reverse;
align-items: center;
display: flex;
margin-bottom: 50px;
height: 50%;
width: 80%;
width: 38%;
max-width: 80%;
overflow: hidden;
position: relative;
@@ -119,35 +143,36 @@
max-height: 50%;
@media (max-width: $desktop-breakpoint) {
// flex-direction: column-reverse;
// align-items: center;
// display: flex;
// margin-bottom: 50px;
// overflow: visible;
// // height: 65%;
// // width: 99%;
// max-width: 100%;
// overflow: hidden;
// position: relative;
// justify-content: center;
// // max-height: 50%;
// height: 70%;
// width: 100%;
// max-height: 70%;
flex-direction: column-reverse;
align-items: center;
display: flex;
margin-bottom: 50px;
overflow: visible;
/* max-width: 100%; */
//overflow: hidden;
position: relative;
justify-content: center;
height: 100vh;
width: 100vw;
width: 98%;
max-width: 98%;
}
// flex-direction: column-reverse;
// align-items: center;
// display: flex;
// margin-bottom: 50px;
// height: 50%;
// width: 80%;
// max-width: 80%;
// overflow: hidden;
// position: relative;
// justify-content: center;
// max-height: 50%;
// @media (max-width: $desktop-breakpoint) {
// flex-direction: column-reverse;
// align-items: center;
// display: flex;
// margin-bottom: 50px;
// overflow: visible;
// position: relative;
// justify-content: center;
// height: 100vh;
// width: 100vw;
// }
}
.popup-window__spinner__wrapper {
@@ -167,6 +192,39 @@
max-height: 70%;
max-width: 95%;
border-radius: 3px;
}
.popup-window-wrapper {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
@media (max-width: $desktop-breakpoint) {
flex-direction: column;
justify-content: center;
}
}
.popup-window-wrapper-video {
flex-direction: column;
justify-content: space-evenly;
@media (max-width: $desktop-breakpoint) {
justify-content: center;
}
}
.popup-file-details-title {
font-family: "Roboto",sans-serif;
font-weight: 300;
}
.popup-window-button-wrapper {
display: flex;
justify-content: center;
align-items: center;
}