usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-10-04 15:28:33 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore: remove less files in editor

Browse Source
This commit is contained in:
Steven 2023-10-14 11:55:37 +08:00
parent dd83358850
commit c02f3c0a7d
7 changed files with 43 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/MemoEditor/ActionButton/TagSelector.tsx
View File

@ -11,8 +11,8 @@ const TagSelector = (props: Props) => {
const tags = tagStore.state.tags;
return (
<div className="action-btn relative group">
<Icon.Hash className="icon-img" />
<div className="relative group flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow">
<Icon.Hash className="w-5 h-5 mx-auto" />
<div className="hidden flex-row justify-start items-start flex-wrap absolute top-6 left-0 mt-1 p-1 z-1 rounded w-52 h-auto max-h-48 overflow-y-auto font-mono shadow bg-zinc-200 dark:bg-zinc-600 group-hover:flex">
{tags.length > 0 ? (
tags.map((tag) => {

2
web/src/components/MemoEditor/Editor/TagSuggestions.tsx
View File

@ -94,7 +94,7 @@ const TagSuggestions = ({ editorRef, editorActions }: Props) => {
if (!isVisibleRef.current || !position) return null;
return (
<div
className="tag-suggestions z-20 p-1 absolute max-w-[12rem] rounded font-mono shadow bg-zinc-200 dark:bg-zinc-600"
className="z-20 p-1 mt-1 -ml-2 absolute max-w-[12rem] rounded font-mono shadow bg-zinc-200 dark:bg-zinc-600"
style={{ left: position.left, top: position.top + position.height }}
>
{suggestionsRef.current.map((tag, i) => (

6
web/src/components/MemoEditor/Editor/index.tsx
View File

@ -1,6 +1,6 @@
import classNames from "classnames";
import { forwardRef, ReactNode, useCallback, useEffect, useImperativeHandle, useRef } from "react";
import TagSuggestions from "./TagSuggestions";
import "@/less/editor.less";
export interface EditorRefActions {
focus: FunctionType;
@ -145,9 +145,9 @@ const Editor = forwardRef(function Editor(props: Props, ref: React.ForwardedRef<
}, []);
return (
<div className={"common-editor-wrapper " + className}>
<div className={classNames("flex flex-col justify-start items-start relative w-full h-auto bg-inherit dark:text-gray-200", className)}>
<textarea
className="common-editor-inputer"
className="w-full h-full max-h-[300px] my-1 text-base resize-none overflow-x-hidden overflow-y-auto bg-transparent outline-none whitespace-pre-wrap word-break"
rows={1}
placeholder={placeholder}
ref={editorRef}

55
web/src/components/MemoEditor/index.tsx
View File

@ -1,9 +1,10 @@
import { Select, Option, Button } from "@mui/joy";
import { isNumber, last, uniq } from "lodash-es";
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { toast } from "react-hot-toast";
import { useTranslation } from "react-i18next";
import useLocalStorage from "react-use/lib/useLocalStorage";
import { TAB_SPACE_WIDTH, UNKNOWN_ID } from "@/helpers/consts";
import { TAB_SPACE_WIDTH, UNKNOWN_ID, VISIBILITY_SELECTOR_ITEMS } from "@/helpers/consts";
import { clearContentQueryParam } from "@/helpers/utils";
import { getMatchedNodes } from "@/labs/marked";
import { useFilterStore, useGlobalStore, useMemoStore, useResourceStore, useTagStore, useUserStore } from "@/store/module";
@ -11,12 +12,11 @@ import { Resource } from "@/types/proto/api/v2/resource_service";
import { useTranslate } from "@/utils/i18n";
import showCreateResourceDialog from "../CreateResourceDialog";
import Icon from "../Icon";
import MemoVisibilitySelector from "./ActionButton/MemoVisibilitySelector";
import VisibilityIcon from "../VisibilityIcon";
import TagSelector from "./ActionButton/TagSelector";
import Editor, { EditorRefActions } from "./Editor";
import RelationListView from "./RelationListView";
import ResourceListView from "./ResourceListView";
import "@/less/memo-editor.less";
const listItemSymbolList = ["- [ ] ", "- [x] ", "- [X] ", "* ", "- "];
const emptyOlReg = /^(\d+)\. $/;
@ -378,7 +378,7 @@ const MemoEditor = (props: Props) => {
const editorConfig = useMemo(
() => ({
className: `memo-editor`,
className: "",
initialContent: "",
placeholder: t("editor.placeholder"),
onContentChange: handleContentChange,
@ -391,7 +391,9 @@ const MemoEditor = (props: Props) => {
return (
<div
className={`${className ?? ""} memo-editor-container`}
className={`${
className ?? ""
} relative w-full flex flex-col justify-start items-start bg-white dark:bg-zinc-700 px-4 pt-4 rounded-lg border-2 border-gray-200 dark:border-zinc-600`}
tabIndex={0}
onKeyDown={handleKeyDown}
onDrop={handleDropEvent}
@ -400,28 +402,45 @@ const MemoEditor = (props: Props) => {
onCompositionEnd={() => setIsInIME(false)}
>
<Editor ref={editorRef} {...editorConfig} />
<div className="common-tools-wrapper">
<div className="common-tools-container">
<div className="relative w-full flex flex-row justify-between items-center pt-2 z-1">
<div className="flex flex-row justify-start items-center">
<TagSelector onTagSelectorClick={(tag) => handleTagSelectorClick(tag)} />
<button className="action-btn">
<Icon.Paperclip className="icon-img" onClick={handleUploadFileBtnClick} />
<button className="flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow">
<Icon.Paperclip className="w-5 h-5 mx-auto" onClick={handleUploadFileBtnClick} />
</button>
<button className="action-btn">
<Icon.CheckSquare className="icon-img" onClick={handleCheckBoxBtnClick} />
<button className="flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow">
<Icon.CheckSquare className="w-5 h-5 mx-auto" onClick={handleCheckBoxBtnClick} />
</button>
<button className="action-btn">
<Icon.Code className="icon-img" onClick={handleCodeBlockBtnClick} />
<button className="flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow">
<Icon.Code className="w-5 h-5 mx-auto" onClick={handleCodeBlockBtnClick} />
</button>
</div>
</div>
<ResourceListView resourceList={state.resourceList} setResourceList={handleSetResourceList} />
<RelationListView relationList={referenceRelations} setRelationList={handleSetRelationList} />
<div className="editor-footer-container">
<MemoVisibilitySelector value={state.memoVisibility} onChange={handleMemoVisibilityChange} />
<div className="buttons-container">
<button className="action-btn confirm-btn" disabled={!allowSave} onClick={handleSaveBtnClick}>
<div className="w-full flex flex-row justify-between items-center py-3 mt-2 border-t border-t-gray-100 dark:border-t-zinc-500">
<div className="relative flex flex-row justify-start items-center" onFocus={(e) => e.stopPropagation()}>
<Select
variant="plain"
value={state.memoVisibility}
startDecorator={<VisibilityIcon visibility={state.memoVisibility} />}
onChange={(_, visibility) => {
if (visibility) {
handleMemoVisibilityChange(visibility);
}
}}
>
{VISIBILITY_SELECTOR_ITEMS.map((item) => (
<Option key={item.value} value={item.value} className="whitespace-nowrap">
{item.text}
</Option>
))}
</Select>
</div>
<div className="shrink-0 flex flex-row justify-end items-center">
<Button color="success" disabled={!allowSave} onClick={handleSaveBtnClick}>
{t("editor.save")}
</button>
</Button>
</div>
</div>
</div>

1
web/src/helpers/consts.ts
View File

@ -1,6 +1,5 @@
// UNKNOWN_ID is the symbol for unknown id
export const UNKNOWN_ID = -1;
export const UNKNOWN_USERNAME = "";
// default animation duration
export const ANIMATION_DURATION = 200;

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

@ -1,17 +0,0 @@
.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 ~"max-h-[300px]" my-1 text-base resize-none overflow-x-hidden overflow-y-auto bg-transparent outline-none whitespace-pre-wrap word-break;
&::placeholder {
padding-left: 2px;
}
&:focus {
&::placeholder {
color: lightgray;
}
}
}
}

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

@ -1,56 +0,0 @@
.memo-editor-container {
@apply relative w-full flex flex-col justify-start items-start bg-white dark:bg-zinc-700 px-4 rounded-lg border-2 border-gray-200 dark:border-zinc-600;
.tag-suggestions {
margin-left: -10px;
margin-top: 2px;
}
> .memo-editor {
@apply mt-4 flex flex-col justify-start items-start relative w-full h-auto bg-inherit dark:text-gray-200;
}
> .common-tools-wrapper {
@apply relative w-full flex flex-row justify-between items-center pt-2 z-1;
> .common-tools-container {
@apply flex flex-row justify-start items-center;
> .action-btn {
@apply flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow;
> .icon-img {
@apply w-5 h-5 mx-auto flex flex-row justify-center items-center;
}
> .tip-text {
@apply hidden ml-1 text-xs leading-5 text-gray-600 dark:text-gray-300 border border-gray-300 dark:border-zinc-500 rounded-xl px-2;
}
}
}
}
> .editor-footer-container {
@apply w-full flex flex-row justify-between items-center border-t border-t-gray-100 dark:border-t-zinc-500 py-3 mt-2;
> .visibility-selector {
@apply h-8;
> .current-value-container {
@apply rounded-xl px-3;
> .value-text {
@apply text-sm w-full mr-1;
}
}
}
> .buttons-container {
@apply grow-0 shrink-0 flex flex-row justify-end items-center;
> .confirm-btn {
@apply border-none select-none rounded-xl flex flex-row justify-center items-center shadow cursor-pointer px-4 py-0 leading-8 bg-green-600 text-white text-sm hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-60;
}
}
}
}