mirror of
https://github.com/usememos/memos.git
synced 2025-03-17 19:20:07 +01:00
chore: update sharing image preview
This commit is contained in:
boojack
parent
cad4db128b
commit
8cb3994022
@ -1,5 +1,3 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import * as utils from "../helpers/utils";
|
||||
import { showDialog } from "./Dialog";
|
||||
import "../less/preview-image-dialog.less";
|
||||
|
||||
@ -8,33 +6,10 @@ interface Props extends DialogProps {
|
||||
}
|
||||
|
||||
const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrl }: Props) => {
|
||||
const imgRef = useRef<HTMLImageElement>(null);
|
||||
const [imgWidth, setImgWidth] = useState<number>(-1);
|
||||
|
||||
useEffect(() => {
|
||||
utils.getImageSize(imgUrl).then(({ width }) => {
|
||||
if (width !== 0) {
|
||||
setImgWidth(80);
|
||||
} else {
|
||||
setImgWidth(0);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleCloseBtnClick = () => {
|
||||
destroy();
|
||||
};
|
||||
|
||||
const handleDecreaseImageSize = () => {
|
||||
if (imgWidth > 30) {
|
||||
setImgWidth(imgWidth - 10);
|
||||
}
|
||||
};
|
||||
|
||||
const handleIncreaseImageSize = () => {
|
||||
setImgWidth(imgWidth + 10);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<button className="btn close-btn" onClick={handleCloseBtnClick}>
|
||||
@ -42,21 +17,7 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrl }: Props) => {
|
||||
</button>
|
||||
|
||||
<div className="img-container">
|
||||
<img className={imgWidth <= 0 ? "hidden" : ""} ref={imgRef} width={imgWidth + "%"} src={imgUrl} />
|
||||
<span className={"loading-text " + (imgWidth === -1 ? "" : "hidden")}>Loading image...</span>
|
||||
<span className={"loading-text " + (imgWidth === 0 ? "" : "hidden")}>😟 Failed to load image</span>
|
||||
</div>
|
||||
|
||||
<div className="action-btns-container">
|
||||
<button className="btn" onClick={handleDecreaseImageSize}>
|
||||
➖
|
||||
</button>
|
||||
<button className="btn" onClick={handleIncreaseImageSize}>
|
||||
➕
|
||||
</button>
|
||||
<button className="btn" onClick={() => setImgWidth(80)}>
|
||||
⭕
|
||||
</button>
|
||||
<img src={imgUrl} crossOrigin="anonymous" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -55,7 +55,7 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
|
||||
|
||||
const handleImageOnLoad = (ev: React.SyntheticEvent<HTMLImageElement>) => {
|
||||
if (ev.type === "error") {
|
||||
toastHelper.error("有个图片加载失败了😟");
|
||||
toastHelper.error("😟 Image load failed");
|
||||
(ev.target as HTMLImageElement).remove();
|
||||
}
|
||||
setImgAmount(imgAmount - 1);
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
}
|
||||
|
||||
> .split-line {
|
||||
@apply h-full px-px bg-gray-100 absolute top-1 left-6 z-0 -ml-px;
|
||||
@apply h-full px-px bg-gray-50 absolute top-1 left-6 z-0 -ml-px;
|
||||
}
|
||||
|
||||
> .time-wrapper {
|
||||
@ -28,7 +28,7 @@
|
||||
}
|
||||
|
||||
> .images-container {
|
||||
@apply flex flex-col justify-start items-start w-full;
|
||||
@apply flex flex-col justify-start items-start mt-1 w-full;
|
||||
|
||||
> img {
|
||||
@apply w-full h-auto rounded mb-2 last:mb-0;
|
||||
|
||||
@ -45,4 +45,3 @@ a {
|
||||
.btn {
|
||||
@apply select-none cursor-pointer text-center;
|
||||
}
|
||||
|
||||
|
||||
@ -1,85 +1,27 @@
|
||||
@import "./mixin.less";
|
||||
|
||||
.preview-image-dialog {
|
||||
padding: 0;
|
||||
@apply p-0;
|
||||
|
||||
> .dialog-container {
|
||||
.flex(column, center, center);
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@apply flex flex-col justify-center items-center relative w-full h-full p-0;
|
||||
background-color: unset;
|
||||
padding: 0;
|
||||
|
||||
> .close-btn {
|
||||
position: fixed;
|
||||
top: 36px;
|
||||
right: 36px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
background-color: lightgray;
|
||||
z-index: 1;
|
||||
@apply fixed top-8 right-8 w-8 h-8 p-1 cursor-pointer rounded opacity-90 bg-gray-300 z-10 shadow-md hover:opacity-70;
|
||||
|
||||
> .icon-img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
@apply w-6 h-auto;
|
||||
}
|
||||
}
|
||||
|
||||
> .img-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
@apply w-full h-full flex flex-col justify-center items-center;
|
||||
background-color: unset;
|
||||
.hide-scroll-bar();
|
||||
|
||||
> img {
|
||||
padding: 16px;
|
||||
height: auto;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
> .loading-text {
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
margin: auto;
|
||||
border-bottom: 2px solid white;
|
||||
padding: 8px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
> .action-btns-container {
|
||||
.flex(row, center, center);
|
||||
position: fixed;
|
||||
bottom: 36px;
|
||||
z-index: 1;
|
||||
|
||||
> .btn {
|
||||
.flex(row, center, center);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
margin-right: 16px;
|
||||
border-radius: 4px;
|
||||
background-color: lightgray;
|
||||
box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
@apply h-auto w-auto max-w-full max-h-full p-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,37 +2,21 @@
|
||||
|
||||
.share-memo-image-dialog {
|
||||
> .dialog-container {
|
||||
width: 380px;
|
||||
padding: 0;
|
||||
background-color: @bg-lightgray;
|
||||
@apply w-96 p-0 bg-gray-200;
|
||||
|
||||
> .dialog-header-container {
|
||||
padding: 8px 16px;
|
||||
padding-left: 24px;
|
||||
margin-bottom: 0;
|
||||
background-color: white;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
@apply py-2 pt-4 px-4 pl-6 mb-0 bg-white rounded-t-lg;
|
||||
}
|
||||
|
||||
> .dialog-content-container {
|
||||
.flex(column, flex-start, flex-start);
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@apply w-full flex flex-col justify-start items-start relative;
|
||||
min-height: 128px;
|
||||
|
||||
> .tip-words-container {
|
||||
.flex(column, center, flex-start);
|
||||
width: 100%;
|
||||
border-bottom: 1px solid lightgray;
|
||||
background-color: white;
|
||||
padding: 0 24px;
|
||||
padding-bottom: 8px;
|
||||
@apply w-full flex flex-col justify-center items-start border-b bg-white px-6 py-0 pb-2;
|
||||
|
||||
> .tip-text {
|
||||
color: gray;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
@apply text-sm text-gray-500;
|
||||
}
|
||||
|
||||
&.loading {
|
||||
@ -53,80 +37,41 @@
|
||||
}
|
||||
|
||||
> .memo-container {
|
||||
.flex(column, flex-start, flex-start);
|
||||
width: 380px;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
@apply w-96 max-w-full h-auto select-none relative flex flex-col justify-start items-start;
|
||||
|
||||
> .memo-shortcut-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@apply absolute top-0 left-0 w-full h-auto rounded-b-lg;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
|
||||
> .time-text {
|
||||
width: 100%;
|
||||
padding: 0 24px;
|
||||
padding-top: 20px;
|
||||
font-size: 12px;
|
||||
color: gray;
|
||||
background-color: white;
|
||||
@apply w-full px-6 pt-5 text-xs text-gray-500 bg-white;
|
||||
}
|
||||
|
||||
> .memo-content-text {
|
||||
padding: 12px 24px;
|
||||
width: 100%;
|
||||
font-size: 15px;
|
||||
background-color: white;
|
||||
@apply w-full pt-2 pb-4 px-6 text-base bg-white;
|
||||
}
|
||||
|
||||
> .images-container {
|
||||
.flex(column, flex-start, flex-start);
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 0 24px;
|
||||
padding-bottom: 8px;
|
||||
background-color: white;
|
||||
.hide-scroll-bar();
|
||||
@apply w-full h-auto flex flex-col justify-start items-start px-6 pb-2 bg-white;
|
||||
|
||||
> img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 4px;
|
||||
@apply w-full h-auto mb-2 rounded;
|
||||
}
|
||||
}
|
||||
|
||||
> .watermark-container {
|
||||
.flex(row, flex-start, center);
|
||||
flex-wrap: nowrap;
|
||||
width: 100%;
|
||||
padding: 16px 26px;
|
||||
@apply flex flex-row justify-start items-center w-full py-3 px-6;
|
||||
|
||||
> .normal-text {
|
||||
.flex(row, flex-start, center);
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
color: gray;
|
||||
@apply w-full flex flex-row justify-start items-center text-sm text-gray-500;
|
||||
|
||||
> .name-text {
|
||||
font-size: 13px;
|
||||
color: @text-black;
|
||||
margin-left: 4px;
|
||||
line-height: 20px;
|
||||
@apply text-black ml-2;
|
||||
}
|
||||
|
||||
> .icon-text {
|
||||
font-size: 15px;
|
||||
margin-right: 6px;
|
||||
@apply text-lg ml-1 mr-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
@apply flex flex-col justify-start items-end fixed top-2 right-4 z-1000 max-h-full;
|
||||
|
||||
> .toast-wrapper {
|
||||
@apply flex flex-col justify-start items-start relative left-full invisible text-base cursor-pointer shadow rounded bg-white mt-6 py-2 px-4;
|
||||
@apply flex flex-col justify-start items-start relative left-full invisible text-base cursor-pointer shadow-lg rounded bg-white mt-6 py-2 px-4;
|
||||
min-width: 6em;
|
||||
transition: all 0.4s ease;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user