aiden
/
memos
mirror of https://github.com/usememos/memos
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: update sharing image preview

Browse Source
pull/91/head
boojack 3 years ago
parent cad4db128b
commit 8cb3994022
7 changed files with 27 additions and 180 deletions
Show Stats Download Patch File Download Diff File

41
web/src/components/PreviewImageDialog.tsx
Unescape Escape View File

@ -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>
</>
);

2
web/src/components/ShareMemoImageDialog.tsx
Unescape Escape View File

@ -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);

4
web/src/less/daily-memo.less
Unescape Escape View File

@ -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;

1
web/src/less/global.less
Unescape Escape View File

@ -45,4 +45,3 @@ a {
.btn {
@apply select-none cursor-pointer text-center;
}

72
web/src/less/preview-image-dialog.less
Unescape Escape View File

@ -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;
}
}
}

85
web/src/less/share-memo-image-dialog.less
Unescape Escape View File

@ -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;
}
}
}

2
web/src/less/toast.less
Unescape Escape View File

@ -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;

Write Preview
Loading…
Cancel
Save