diff --git a/web/src/components/PreviewImageDialog.tsx b/web/src/components/PreviewImageDialog.tsx index 3d76fdca..fa254f4a 100644 --- a/web/src/components/PreviewImageDialog.tsx +++ b/web/src/components/PreviewImageDialog.tsx @@ -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 = ({ destroy, imgUrl }: Props) => { - const imgRef = useRef(null); - const [imgWidth, setImgWidth] = useState(-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 ( <>
- - Loading image... - 😟 Failed to load image -
- -
- - - +
); diff --git a/web/src/components/ShareMemoImageDialog.tsx b/web/src/components/ShareMemoImageDialog.tsx index 948d6fb4..c812a764 100644 --- a/web/src/components/ShareMemoImageDialog.tsx +++ b/web/src/components/ShareMemoImageDialog.tsx @@ -55,7 +55,7 @@ const ShareMemoImageDialog: React.FC = (props: Props) => { const handleImageOnLoad = (ev: React.SyntheticEvent) => { if (ev.type === "error") { - toastHelper.error("ζœ‰δΈͺε›Ύη‰‡εŠ θ½½ε€±θ΄₯δΊ†πŸ˜Ÿ"); + toastHelper.error("😟 Image load failed"); (ev.target as HTMLImageElement).remove(); } setImgAmount(imgAmount - 1); diff --git a/web/src/less/daily-memo.less b/web/src/less/daily-memo.less index a441be01..d058fc06 100644 --- a/web/src/less/daily-memo.less +++ b/web/src/less/daily-memo.less @@ -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; diff --git a/web/src/less/global.less b/web/src/less/global.less index 11975f22..1de8cee1 100644 --- a/web/src/less/global.less +++ b/web/src/less/global.less @@ -45,4 +45,3 @@ a { .btn { @apply select-none cursor-pointer text-center; } - diff --git a/web/src/less/preview-image-dialog.less b/web/src/less/preview-image-dialog.less index 7a9d264f..d041a2ff 100644 --- a/web/src/less/preview-image-dialog.less +++ b/web/src/less/preview-image-dialog.less @@ -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; } } } diff --git a/web/src/less/share-memo-image-dialog.less b/web/src/less/share-memo-image-dialog.less index faa579a5..683dde65 100644 --- a/web/src/less/share-memo-image-dialog.less +++ b/web/src/less/share-memo-image-dialog.less @@ -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; } } } diff --git a/web/src/less/toast.less b/web/src/less/toast.less index 341c39a4..0051c1cd 100644 --- a/web/src/less/toast.less +++ b/web/src/less/toast.less @@ -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;