usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-12-19 00:51:30 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore: update share memo image (#482)

Browse Source
This commit is contained in:
boojack 2022-11-17 21:01:26 +08:00 committed by GitHub
parent c89a6665b6
commit a24b885236
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 66 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/src/components/MemoResources.tsx
View File

@ -3,12 +3,24 @@ import Icon from "./Icon";
import "../less/memo-resources.less";
interface Props {
className?: string;
resourceList: Resource[];
className?: string;
style?: "row" | "col";
}
const getDefaultProps = (): Props => {
return {
className: "",
style: "row",
resourceList: [],
};
};
const MemoResources: React.FC<Props> = (props: Props) => {
const { className, resourceList } = props;
const { className, style, resourceList } = {
...getDefaultProps(),
...props,
};
const imageList = resourceList.filter((resource) => resource.type.includes("image"));
const otherResourceList = resourceList.filter((resource) => !resource.type.includes("image"));
@ -24,7 +36,7 @@ const MemoResources: React.FC<Props> = (props: Props) => {
return (
<div className={`resource-wrapper ${className || ""}`}>
{imageList.length > 0 && (
<div className="images-wrapper">
<div className={`images-wrapper ${style}`}>
{imageList.map((resource, index) => (
<Image className="memo-img" key={resource.id} imgUrls={imgUrls} index={index} />
))}

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

@ -112,7 +112,7 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
<span className="time-text">{memo.createdAtStr}</span>
<div className="memo-content-wrapper">
<MemoContent content={memo.content} displayConfig={{ enableExpand: false }} />
<MemoResources resourceList={memo.resourceList} />
<MemoResources style="col" resourceList={memo.resourceList} />
</div>
<div className="watermark-container">
<div className="userinfo-container">

12
web/src/css/index.css
View File

@ -1,3 +1,15 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
/* Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
.hide-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
}

7
web/src/less/base-dialog.less
View File

@ -1,15 +1,12 @@
@import "./mixin.less";
.dialog-wrapper {
@apply fixed top-0 left-0 flex flex-col justify-start items-center w-full h-full pt-16 z-100 overflow-x-hidden overflow-y-scroll bg-transparent transition-all;
.hide-scroll-bar();
@apply fixed top-0 left-0 flex flex-col justify-start items-center w-full h-full pt-16 z-100 overflow-x-hidden overflow-y-scroll bg-transparent transition-all hide-scrollbar;
&.showup {
background-color: rgba(0, 0, 0, 0.6);
}
&.showoff {
display: none;
@apply hidden;
}
> .dialog-container {

2
web/src/less/common-dialog.less
View File

@ -1,5 +1,3 @@
@import "./mixin.less";
.common-dialog {
> .dialog-container {
@apply w-80;

5
web/src/less/common/selector.less
View File

@ -1,5 +1,3 @@
@import "../mixin.less";
.selector-wrapper {
@apply flex flex-col justify-start items-start relative h-8;
@ -26,11 +24,10 @@
}
> .items-wrapper {
@apply flex flex-col justify-start items-start absolute top-full left-0 w-auto p-1 mt-1 -ml-2 bg-white rounded-md overflow-y-auto z-1;
@apply flex flex-col justify-start items-start absolute top-full left-0 w-auto p-1 mt-1 -ml-2 bg-white rounded-md overflow-y-auto z-1 hide-scrollbar;
min-width: calc(100% + 16px);
max-height: 256px;
box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
.hide-scroll-bar();
> .item-container {
@apply flex flex-col justify-start items-start w-full px-3 text-sm select-none leading-8 cursor-pointer rounded whitespace-nowrap hover:bg-gray-100;

2
web/src/less/daily-memo.less
View File

@ -1,5 +1,3 @@
@import "./mixin.less";
.daily-memo-wrapper {
@apply flex flex-row justify-start items-start relative w-full flex-nowrap pb-6;

2
web/src/less/daily-review-dialog.less
View File

@ -1,5 +1,3 @@
@import "./mixin.less";
.daily-review-dialog {
@apply p-0 sm:py-16;

3
web/src/less/editor.less
View File

@ -1,12 +1,9 @@
@import "./mixin.less";
.common-editor-wrapper {
@apply flex flex-col justify-start items-start relative w-full h-auto bg-white;
> .common-editor-inputer {
@apply w-full h-full my-1 text-base resize-none overflow-x-hidden overflow-y-auto bg-transparent whitespace-pre-wrap;
max-height: 300px;
.pretty-scroll-bar(2px, 0);
&::placeholder {
padding-left: 2px;

2
web/src/less/global.less
View File

@ -1,5 +1,3 @@
@import "./mixin.less";
body,
html {
@apply text-base;

2
web/src/less/home.less
View File

@ -1,5 +1,3 @@
@import "./mixin.less";
.page-wrapper.home {
@apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden;
background-color: #f6f5f4;

7
web/src/less/image.less
View File

@ -1,16 +1,11 @@
@import "./mixin.less";
.image-container {
width: 200px;
height: auto;
overflow-y: scroll;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
.pretty-scroll-bar(2px, 0);
> img {
margin: auto;
width: 100%;
height: auto;
@apply m-auto w-full h-auto;
}
}

2
web/src/less/memo-content.less
View File

@ -1,5 +1,3 @@
@import "./mixin.less";
.memo-content-wrapper {
@apply w-full flex flex-col justify-start items-start;

5
web/src/less/memo-list.less
View File

@ -1,8 +1,5 @@
@import "./mixin.less";
.memo-list-container {
@apply flex flex-col justify-start items-start w-full max-w-full overflow-y-scroll !pb-36;
.hide-scroll-bar();
@apply flex flex-col justify-start items-start w-full max-w-full overflow-y-scroll !pb-36 hide-scrollbar;
> .status-text-container {
@apply flex flex-col justify-start items-center w-full my-6;

33
web/src/less/memo-resources.less
View File

@ -1,17 +1,38 @@
@import "./mixin.less";
.resource-wrapper {
@apply w-full flex flex-col justify-start items-start;
> .images-wrapper {
@apply flex flex-row justify-start items-start mt-2 w-full overflow-x-auto overflow-y-hidden pb-1;
@apply w-full flex mt-2 pb-1;
> .memo-img {
@apply mr-2 last:mr-0 w-auto h-auto shrink-0 grow-0 overflow-y-hidden;
.hide-scroll-bar();
@apply w-auto h-auto shrink-0 grow-0;
> img {
@apply w-auto max-h-40 rounded;
@apply rounded;
}
}
&.row {
@apply flex-row justify-start items-start overflow-x-auto overflow-y-hidden;
> .memo-img {
@apply mr-2 last:mr-0;
> img {
@apply w-auto max-h-40;
}
}
}
&.col {
@apply flex-col justify-start items-start;
> .memo-img {
@apply w-full h-auto shrink-0 mb-2 last:mb-0 hide-scrollbar;
> img {
@apply w-full h-auto;
}
}
}
}

2
web/src/less/memo.less
View File

@ -1,5 +1,3 @@
@import "./mixin.less";
.memo-wrapper {
@apply relative flex flex-col justify-start items-start w-full p-4 pt-3 mt-2 bg-white rounded-lg border border-white hover:border-gray-200;

2
web/src/less/memos-header.less
View File

@ -1,5 +1,3 @@
@import "./mixin.less";
.section-header-container,
.memos-header-container {
@apply sticky top-4 flex flex-row justify-between items-center w-full h-10 flex-nowrap mt-4 mb-2 shrink-0 z-1;

28
web/src/less/mixin.less
View File

@ -1,28 +0,0 @@
.hide-scroll-bar {
.pretty-scroll-bar(0, 0);
&::-webkit-scrollbar {
display: none;
}
}
.pretty-scroll-bar(@width: 0px, @height: 0px) {
scrollbar-width: none;
&::-webkit-scrollbar {
width: @width;
height: @height;
cursor: pointer;
}
&::-webkit-scrollbar-thumb {
width: @width;
height: @height;
border-radius: 8px;
background-color: #d5d5d5;
&:hover {
background-color: #ccc;
}
}
}

5
web/src/less/preview-image-dialog.less
View File

@ -1,5 +1,3 @@
@import "./mixin.less";
.preview-image-dialog {
@apply p-0;
z-index: 101;
@ -22,9 +20,8 @@
}
> .img-container {
@apply w-full h-full p-4 flex flex-col justify-center items-center;
@apply w-full h-full p-4 flex flex-col justify-center items-center hide-scrollbar;
background-color: unset;
.hide-scroll-bar();
> img {
@apply h-auto w-auto max-w-full max-h-full shadow;

2
web/src/less/resources-dialog.less
View File

@ -1,5 +1,3 @@
@import "./mixin.less";
.resources-dialog {
@apply px-4;

2
web/src/less/search-bar.less
View File

@ -1,5 +1,3 @@
@import "./mixin.less";
.search-bar-container {
@apply relative w-auto;

8
web/src/less/setting-dialog.less
View File

@ -1,5 +1,3 @@
@import "./mixin.less";
.setting-dialog {
@apply px-4;
@ -7,8 +5,7 @@
@apply w-180 max-w-full mb-8 p-0;
> .dialog-content-container {
@apply flex flex-col sm:flex-row justify-start items-start relative w-full overflow-y-scroll p-0;
.hide-scroll-bar();
@apply flex flex-col sm:flex-row justify-start items-start relative w-full overflow-y-scroll p-0 hide-scrollbar;
> .close-btn {
@apply z-1 flex flex-col justify-center items-center absolute top-4 right-4 w-6 h-6 rounded bg-white hover:bg-gray-200 hover:shadow;
@ -39,8 +36,7 @@
}
> .section-content-container {
@apply w-full sm:w-auto p-4 sm:px-6 grow flex flex-col justify-start items-start h-128 overflow-y-scroll;
.hide-scroll-bar();
@apply w-full sm:w-auto p-4 sm:px-6 grow flex flex-col justify-start items-start h-128 overflow-y-scroll hide-scrollbar;
> .section-container {
@apply flex flex-col justify-start items-start w-full my-2;

2
web/src/less/share-memo-image-dialog.less
View File

@ -1,5 +1,3 @@
@import "./mixin.less";
.share-memo-image-dialog {
> .dialog-container {
@apply w-96 p-0 bg-gray-200;

5
web/src/less/shortcut-list.less
View File

@ -1,8 +1,5 @@
@import "./mixin.less";
.shortcuts-wrapper {
@apply flex flex-col justify-start items-start w-full py-0 px-2 mt-2 h-auto shrink-0 flex-nowrap;
.hide-scroll-bar();
@apply flex flex-col justify-start items-start w-full py-0 px-2 mt-2 h-auto shrink-0 flex-nowrap hide-scrollbar;
> .title-text {
@apply flex flex-row justify-start items-center w-full px-4;

5
web/src/less/siderbar.less
View File

@ -1,8 +1,5 @@
@import "./mixin.less";
.sidebar-wrapper {
@apply fixed sm:sticky top-0 z-30 sm:z-0 -translate-x-64 sm:translate-x-0 sm:flex flex-col justify-start items-start w-64 h-screen py-4 pl-2 bg-white sm:bg-transparent overflow-x-hidden overflow-y-auto transition-transform duration-300 overscroll-contain;
.hide-scroll-bar();
@apply fixed sm:sticky top-0 z-30 sm:z-0 -translate-x-64 sm:translate-x-0 sm:flex flex-col justify-start items-start w-64 h-screen py-4 pl-2 bg-white sm:bg-transparent overflow-x-hidden overflow-y-auto transition-transform duration-300 overscroll-contain hide-scrollbar;
&.show {
@apply translate-x-0 shadow-2xl sm:shadow-none;

5
web/src/less/tag-list.less
View File

@ -1,8 +1,5 @@
@import "./mixin.less";
.tags-wrapper {
@apply flex flex-col justify-start items-start px-2 w-full h-auto flex-nowrap pb-4 mt-2 grow;
.hide-scroll-bar();
@apply flex flex-col justify-start items-start px-2 w-full h-auto flex-nowrap pb-4 mt-2 grow hide-scrollbar;
> .title-text {
@apply w-full px-4 text-sm leading-6 font-mono text-gray-400;