YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: update memo action buttons style (#80)

Browse Source 
chore: update memo action btn style
This commit is contained in:
Steven
2022-06-21 08:35:46 +08:00
committed by GitHub
parent f849a94dc5
commit 40680a5e0f
8 changed files with 56 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/public/icons/arrow-right-white.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 209 B

1
web/public/icons/edit-white.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 367 B

1
web/public/icons/more-white.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 306 B

1
web/public/icons/pin.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M31.7 25.6 36 29.45V32.45H25.5V44.5L24 46L22.5 44.5V32.45H12V29.45L16 25.6V9H13.5V6H34.2V9H31.7ZM16.05 29.45H31.65L28.7 26.7V9H19V26.7ZM23.85 29.45Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 229 B

23
web/src/components/Memo.tsx
View File

@ -111,21 +111,26 @@ const Memo: React.FC<Props> = (props: Props) => {
</span>
<div className="more-action-btns-wrapper">
<div className="more-action-btns-container">
<div className="btns-container">
<div className="btn" onClick={handleGenMemoImageBtnClick}>
<img className="icon-img" src="/icons/share.svg" alt="" />
<span className="tip-text">Share</span>
</div>
<div className="btn" onClick={handleEditMemoClick}>
<img className="icon-img" src="/icons/edit.svg" alt="" />
<span className="tip-text">Edit</span>
</div>
<div className="btn" onClick={handleTogglePinMemoBtnClick}>
<img className="icon-img" src="/icons/pin.svg" alt="" />
<span className="tip-text">{memo.pinned ? "Unpin" : "Pin"}</span>
</div>
</div>
<span className="btn" onClick={handleShowMemoStoryDialog}>
View Story
</span>
<span className="btn" onClick={handleTogglePinMemoBtnClick}>
{memo.pinned ? "Unpin" : "Pin"}
</span>
<span className="btn" onClick={handleMarkMemoClick}>
Mark
</span>
<span className="btn" onClick={handleGenMemoImageBtnClick}>
Share
</span>
<span className="btn" onClick={handleEditMemoClick}>
Edit
</span>
<span className={`btn delete-btn ${showConfirmDeleteBtn ? "final-confirm" : ""}`} onClick={handleDeleteMemoClick}>
{showConfirmDeleteBtn ? "Delete!" : "Delete"}
</span>

14
web/src/components/MemoEditor.tsx
View File

@ -74,17 +74,13 @@ const MemoEditor: React.FC<Props> = () => {
}, [editorState.markMemoId, editorState.editMemoId]);
useEffect(() => {
if (!editorRef.current) {
return;
}
const handlePasteEvent = async (event: ClipboardEvent) => {
if (event.clipboardData && event.clipboardData.files.length > 0) {
event.preventDefault();
const file = event.clipboardData.files[0];
const url = await handleUploadFile(file);
if (url) {
editorRef.current?.insertText(url);
editorRef.current?.insertText(url + " ");
}
}
};
@ -110,10 +106,10 @@ const MemoEditor: React.FC<Props> = () => {
});
};
editorRef.current.element.addEventListener("paste", handlePasteEvent);
editorRef.current.element.addEventListener("drop", handleDropEvent);
editorRef.current.element.addEventListener("click", handleClickEvent);
editorRef.current.element.addEventListener("keydown", handleKeyDownEvent);
editorRef.current?.element.addEventListener("paste", handlePasteEvent);
editorRef.current?.element.addEventListener("drop", handleDropEvent);
editorRef.current?.element.addEventListener("click", handleClickEvent);
editorRef.current?.element.addEventListener("keydown", handleKeyDownEvent);
return () => {
editorRef.current?.element.removeEventListener("paste", handlePasteEvent);

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

@ -2,8 +2,7 @@
@import "./memo-content.less";
.memo-wrapper {
.flex(column, flex-start, flex-start);
@apply w-full max-w-full p-3 px-4 mt-2 bg-white rounded-lg border border-white hover:border-gray-200;
@apply flex flex-col justify-start items-start w-full max-w-full p-3 px-4 mt-2 bg-white rounded-lg border border-white hover:border-gray-200;
&.deleted-memo {
@apply border-gray-200;
@ -14,49 +13,50 @@
}
> .memo-top-wrapper {
.flex(row, space-between, center);
@apply w-full h-6 mb-2;
@apply flex flex-row justify-between items-center w-full h-6 mb-2;
> .time-text {
@apply text-xs text-gray-400 cursor-pointer;
}
> .btns-container {
.flex(row, flex-end, center);
@apply relative flex-shrink-0;
@apply flex flex-row justify-end items-center relative flex-shrink-0;
> .more-action-btns-wrapper {
.flex(column, flex-start, center);
@apply absolute flex-nowrap hover:flex;
top: calc(100% - 8px);
right: -16px;
width: auto;
height: auto;
padding: 12px;
z-index: 1;
display: none;
@apply hidden flex-col justify-start items-center absolute top-2 -right-4 z-10 flex-nowrap hover:flex p-3;
> .more-action-btns-container {
width: 112px;
height: auto;
padding: 4px;
white-space: nowrap;
border-radius: 8px;
background-color: white;
@apply w-28 h-auto p-1 whitespace-nowrap rounded-lg bg-white;
box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
z-index: 1;
> .btns-container {
@apply w-full flex flex-row justify-between items-center border-b border-gray-100 p-1 mb-1;
> .btn {
@apply relative w-7 h-7 p-1;
&:hover > .tip-text {
@apply block;
}
> .icon-img {
@apply w-5 h-auto;
}
> .tip-text {
@apply hidden absolute top-0 p-1 px-2 rounded text-xs leading-6 -mt-9 bg-black text-white shadow opacity-70;
}
}
}
> .btn {
@apply w-full py-2 px-3 rounded;
height: unset;
line-height: unset;
justify-content: flex-start;
@apply w-full py-2 px-3 rounded justify-start;
&.delete-btn {
color: @text-red;
@apply text-red-600;
&.final-confirm {
font-weight: bold;
@apply font-bold;
}
}
}
@ -64,12 +64,10 @@
}
.btn {
.flex(row, center, center);
@apply px-2 leading-6 text-sm rounded hover:bg-gray-100;
@apply flex flex-row justify-center items-center px-2 leading-6 text-sm rounded hover:bg-gray-100;
&.more-action-btn {
@apply w-8 -mr-2 opacity-60;
cursor: unset;
@apply w-8 -mr-2 opacity-60 cursor-default;
> .icon-img {
@apply w-4 h-auto;
@ -92,35 +90,15 @@
}
> .images-wrapper {
.flex(row, flex-start, flex-start);
margin-top: 8px;
width: 100%;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 4px;
@apply flex flex-row justify-start items-start mt-2 w-full overflow-x-auto overflow-y-hidden pb-1;
.pretty-scroll-bar(0, 2px);
> .memo-img {
margin-right: 8px;
width: auto;
height: 128px;
flex-shrink: 0;
flex-grow: 0;
overflow-y: hidden;
@apply mr-2 last:mr-0 w-auto h-32 shrink-0 grow-0 overflow-y-hidden;
.hide-scroll-bar();
&:hover {
border-color: lightgray;
}
&:last-child {
margin-right: 0;
}
> img {
width: auto;
max-height: 128px;
border-radius: 8px;
@apply w-auto max-h-32 rounded-lg;
}
}
}

9
web/src/main.tsx
View File

@ -1,4 +1,3 @@
import React from "react";
import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";
import store from "./store";
@ -11,11 +10,9 @@ import "./css/index.css";
const container = document.getElementById("root");
const root = createRoot(container as HTMLElement);
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
<Provider store={store}>
<App />
</Provider>
);
window.onload = () => {