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

feat: update editor style (#454)

Browse Source 
* feat: update editor style

* chore: update bg
This commit is contained in:
boojack 2022-11-12 20:57:08 +08:00 committed by GitHub
parent bf07ab9e2f
commit 241c93c6b7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 91 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,10 +35,9 @@ interface State {
isUploadingResource: boolean;
resourceList: Resource[];
shouldShowEmojiPicker: boolean;
isEditorFocused: boolean;
}
const MemoEditor: React.FC = () => {
const MemoEditor = () => {
const { t, i18n } = useTranslation();
const user = useAppSelector((state) => state.user.user as User);
const setting = user.setting;
@ -49,7 +48,6 @@ const MemoEditor: React.FC = () => {
fullscreen: false,
shouldShowEmojiPicker: false,
resourceList: [],
isEditorFocused: false,
});
const [allowSave, setAllowSave] = useState<boolean>(false);
const prevGlobalStateRef = useRef(editorState);
@ -155,9 +153,11 @@ const MemoEditor: React.FC = () => {
}
}
}
setState({
setState((state) => {
return {
...state,
resourceList: [...state.resourceList, ...resourceList],
};
});
}
};
@ -168,18 +168,22 @@ const MemoEditor: React.FC = () => {
const file = event.clipboardData.files[0];
const resource = await handleUploadResource(file);
if (resource) {
setState({
setState((state) => {
return {
...state,
resourceList: [...state.resourceList, resource],
};
});
}
}
};
const handleUploadResource = async (file: File) => {
setState({
setState((state) => {
return {
...state,
isUploadingResource: true,
};
});
let resource = undefined;
@ -191,9 +195,11 @@ const MemoEditor: React.FC = () => {
toastHelper.error(error.response.data.message);
}
setState({
setState((state) => {
return {
...state,
isUploadingResource: false,
};
});
return resource;
};
@ -232,10 +238,12 @@ const MemoEditor: React.FC = () => {
toastHelper.error(error.response.data.message);
}
setState({
setState((state) => {
return {
...state,
fullscreen: false,
resourceList: [],
};
});
setEditorContentCache("");
storage.remove(["editingMemoVisibilityCache"]);
@ -314,9 +322,11 @@ const MemoEditor: React.FC = () => {
}
}
}
setState({
setState((state) => {
return {
...state,
resourceList: [...state.resourceList, ...resourceList],
};
});
document.body.removeChild(inputEl);
};
@ -324,9 +334,11 @@ const MemoEditor: React.FC = () => {
};
const handleFullscreenBtnClick = () => {
setState({
setState((state) => {
return {
...state,
fullscreen: !state.fullscreen,
};
});
};
@ -354,9 +366,11 @@ const MemoEditor: React.FC = () => {
};
const handleDeleteResource = async (resourceId: ResourceId) => {
setState({
setState((state) => {
return {
...state,
resourceList: state.resourceList.filter((resource) => resource.id !== resourceId),
};
});
if (editorState.editMemoId) {
@ -372,17 +386,10 @@ const MemoEditor: React.FC = () => {
const handleEditorFocus = () => {
editorRef.current?.focus();
setState({
...state,
isEditorFocused: true,
});
};
const handleEditorBlur = () => {
setState({
...state,
isEditorFocused: false,
});
// do nth
};
const isEditing = Boolean(editorState.editMemoId && editorState.editMemoId !== UNKNOWN_ID);
@ -409,12 +416,6 @@ const MemoEditor: React.FC = () => {
onBlur={handleEditorBlur}
>
<div className="editor-header-container">
<Selector
className={`visibility-selector ${state.isEditorFocused || allowSave ? "" : "!hidden"}`}
value={editorState.memoVisibility}
dataSource={memoVisibilityOptionSelectorItems}
handleValueChanged={handleMemoVisibilityOptionChanged}
/>
<div className={`editing-container ${isEditing ? "" : "!hidden"}`}>
<span className="tip-text">{t("editor.editing")}</span>
<button className="cancel-btn" onClick={handleCancelEdit}>
@ -465,12 +466,6 @@ const MemoEditor: React.FC = () => {
onShouldShowEmojiPickerChange={handleChangeShouldShowEmojiPicker}
/>
</div>
<div className="btns-container">
<button className="action-btn confirm-btn" disabled={!allowSave || state.isUploadingResource} onClick={handleSaveBtnClick}>
{t("editor.save")}
<img className="icon-img" src="/logo.webp" />
</button>
</div>
</div>
{state.resourceList.length > 0 && (
<div className="resource-list-wrapper">
@ -485,6 +480,20 @@ const MemoEditor: React.FC = () => {
})}
</div>
)}
<div className="editor-footer-container">
<Selector
className={`visibility-selector`}
value={editorState.memoVisibility}
dataSource={memoVisibilityOptionSelectorItems}
handleValueChanged={handleMemoVisibilityOptionChanged}
/>
<div className="buttons-container">
<button className="action-btn confirm-btn" disabled={!allowSave || state.isUploadingResource} onClick={handleSaveBtnClick}>
{t("editor.save")}
<img className="icon-img w-4 h-auto" src="/logo.webp" />
</button>
</div>
</div>
</div>
);
};

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

@ -4,7 +4,7 @@
@apply flex flex-col justify-start items-start relative w-full h-auto bg-white;
> .common-editor-inputer {
@apply w-full h-full mt-2 mb-1 text-base resize-none overflow-x-hidden overflow-y-auto bg-transparent whitespace-pre-wrap;
@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);

70
web/src/less/memo-editor.less
View File

@ -1,7 +1,7 @@
@import "./mixin.less";
.memo-editor-container {
@apply transition-all relative w-full flex flex-col justify-start items-start bg-white p-4 rounded-lg border-2 border-gray-200;
@apply transition-all relative w-full flex flex-col justify-start items-start bg-white p-4 pt-3 rounded-lg border-2 border-gray-200;
&.float {
@media (max-width: 640px) {
@ -47,26 +47,14 @@
}
&.edit-ing {
border-color: @text-blue;
@apply border-blue-500;
}
> .editor-header-container {
@apply w-full flex flex-row justify-between items-center;
> .visibility-selector {
@apply h-7;
> .current-value-container {
@apply rounded-full;
> .value-text {
@apply text-xs w-full;
}
}
}
@apply w-full flex flex-row justify-between items-center mb-1;
> .editing-container {
@apply mb-1 flex flex-row justify-start items-center text-xs leading-6;
@apply flex flex-row justify-start items-center text-xs;
> .tip-text {
@apply text-gray-400 mr-2;
@ -130,33 +118,13 @@
}
}
}
> .btns-container {
@apply grow-0 shrink-0 flex flex-row justify-end items-center;
> .action-btn {
@apply border-none select-none cursor-pointer py-1 px-3 rounded text-sm hover:opacity-80;
}
> .cancel-btn {
@apply text-gray-500 bg-transparent mr-2;
}
> .confirm-btn {
@apply flex flex-row justify-center items-center shadow cursor-pointer px-3 py-0 leading-8 bg-green-600 text-white text-sm hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-60;
> .icon-img {
@apply ml-1 w-6 h-auto;
}
}
}
}
> .resource-list-wrapper {
@apply w-full flex flex-row justify-start flex-wrap;
> .resource-container {
@apply mt-1 mr-1 flex flex-row justify-start items-center flex-nowrap bg-gray-50 px-2 py-1 rounded cursor-pointer hover:bg-gray-100;
@apply mt-1 mr-1 flex flex-row justify-start items-center flex-nowrap bg-gray-100 px-2 py-1 rounded cursor-pointer hover:bg-gray-200;
> .icon-img {
@apply w-4 h-auto mr-1 text-gray-500;
@ -171,4 +139,32 @@
}
}
}
> .editor-footer-container {
@apply w-full flex flex-row justify-between items-center border-t pt-2 mt-2;
> .visibility-selector {
@apply h-7;
> .current-value-container {
@apply rounded-full;
> .value-text {
@apply text-xs w-full;
}
}
}
> .buttons-container {
@apply grow-0 shrink-0 flex flex-row justify-end items-center;
> .confirm-btn {
@apply border-none select-none rounded flex flex-row justify-center items-center shadow cursor-pointer px-3 py-0 leading-8 bg-green-600 text-white text-sm hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-60;
> .icon-img {
@apply ml-1 w-6 h-auto;
}
}
}
}
}